eta_front/src/views/predictEdb_manage/components/computedDialog.vue

<template>
	<el-dialog
		:visible.sync="isOpenComputed"
		:close-on-click-modal="false"
		:modal-append-to-body="false"
		@close="cancelHandle"
		custom-class="computed-dialog"
		center
		width="1090px"
		top="8vh"
		v-dialogDrag
	>
		<div slot="title" style="display: flex; align-items: center">
			<img
				:src="$icons.computed"
				style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
			/>
			<span style="font-size: 16px">{{ title }}</span>
		</div>
		<div class="dialog-main">
			<ul class="add-cont">
				<li class="add-li" v-for="(list, index) in addList" :key="index">
					<span class="li-tag">{{ list.tag }}</span>
					<el-select
						v-model="list.target"
						v-loadMore="searchLoad"
						:filterable="!list.target"
						clearable
						placeholder="请输入指标名称"
						style="width: 400px"
						@change="chooseTarget"
						@clear="clearHandle(index)"
						:disabled="calulateForm.view"
						remote
						:remote-method="searchTarget"
						@click.native="inputFocusHandle"
					>
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
						<el-option
							v-for="item in searchOptions"
							:key="item.EdbInfoId"
							:label="$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
							:value="item.EdbInfoId"
						>
							<edbDetailPopover :info="item">
								<div slot="reference">{{$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</div>
							</edbDetailPopover>
						</el-option>
					</el-select>

					<i class="el-icon-tickets" style="color:#409EFF;font-size:18px" @click="$emit('lookHistory',list.target)" v-if="list.target"/>

					<i
						class="el-icon-error del-tag"
						v-if="index > 3 && !calulateForm.view"
						@click="delTarget(index)"
					/>
					<span :class="{
						'target-date': true,
						'newest': list.end_date===newestDate
					}" v-if="list.start_date">{{
						`${list.start_date}至${list.end_date}`
					}}</span>
				</li>
			</ul>
			<span class="add-icon" @click="addTargetHandle" v-if="!calulateForm.view">
				<i
					class="el-icon-circle-plus-outline"
					style="color: #5882ef; font-size: 16px"
				/>
				添加更多参数
			</span>
			<div class="computed-min">
				<div class="computed-top">
					<span style="margin-right: 8px">计算公式</span>
					<el-input placeholder="请输入公式" v-model="formula" clearable :disabled="calulateForm.view">
					</el-input>
				</div>
				<span class="example-txt"
					>公式示例：A*0.5+B*C*1.2+120-MAX(A,B,C)</span
				>
				<span class="example-txt">函数支持：MAX(),MIN()</span>
			</div>
			<el-form
				ref="diaForm"
				label-position="right"
				inline
				label-width="80px"
				:model="formData"
				:rules="formRules"
				:disabled="calulateForm.view"
			>
				<el-form-item label="指标名称" prop="targetName">
					<el-input
						v-model="formData.targetName"
						style="width: 340px"
						placeholder="请输入指标名称"
					/>
				</el-form-item>
				<el-form-item label="单位" prop="unit">
					<selectUnit v-model="formData.unit" style="width: 340px" />
				</el-form-item>
				<el-form-item label="指标目录" prop="menu">
<!-- 					<el-select
            v-model="formData.menu"
            placeholder="请选择分类"
            style="width: 340px"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.ClassifyId"
              :label="item.ClassifyName"
              :value="item.ClassifyId"
            />
          </el-select> -->
					<el-cascader
						v-model="formData.menu"
						:options="options"
						:props="{
							label: 'ClassifyName',
							value: 'ClassifyId',
							children: 'Children',
						}"
						style="width: 90%"
						placeholder="请选择所属分类"
					/>
				</el-form-item>
				<el-form-item label="频度" prop="frequency">
					<el-select
						v-model="formData.frequency"
						placeholder="请选择频率"
						style="width: 340px"
						clearable
					>
						<el-option
							v-for="item in frequencyArr"
							:key="item"
							:label="item"
							:value="item"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div class="dia-bot" v-if="!calulateForm.view">
			<el-button
				type="primary"
				style="margin-right: 20px"
				@click="saveHandle"
				:loading="dataloading"
				v-if="title==='计算指标'"
				>生成计算指标</el-button
			>
			<el-button
				type="primary"
				style="margin-right: 20px"
				@click="saveHandle"
				v-else
				>保存</el-button
			>
			<el-button type="primary" plain @click="cancelHandle('cancel')">取消</el-button>
		</div>
		<el-popover
			placement="top-start"
			width="360"
			trigger="click">
			<p style="padding:30px;line-height:25px;" v-html="$parent.tips.get(31)"/>
			<span slot="reference" class="tip-label">公式说明</span>
		</el-popover>
	</el-dialog>
</template>

<script>
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import { formRules } from '@/views/dataEntry_manage/databaseComponents/util';
import { unitArr } from '@/utils/defaultOptions';
const tag_arr = [];
for(let i=0;i<26;i++) tag_arr.push(String.fromCharCode(65+i));
export default {
	name: '',
	props: {
		isOpenComputed: {
			type: Boolean,
		},
		title: {
			type: String,
			default: '计算指标',
		},
		calulateForm: {
			type: Object,
		},
		calulateList: {
			type: Array,
		},
	},
	watch: {
		isOpenComputed(newval) {
			newval && this.getMenu();
			/* 回显 */
			if (this.calulateList.length && newval) {
				this.addList = _.cloneDeep(this.calulateList);
				this.formula = this.calulateForm.formula;
				this.formData = {
					targetName: this.calulateForm.targetName,
					unit: this.calulateForm.unit,
					menu: this.calulateForm.menu,
					frequency: this.calulateForm.frequency,
				};

				this.searchOptions = this.calulateList.map(item => ({
					EdbInfoId: item.target,
					EdbName: item.edb_name,
				}))
				this.getNewestDate();
			}
		},
	},
	data() {
		return {
			options: [],
			frequencyArr: ['日度', '周度','旬度','月度', '季度', '年度'],
			formRules,
			unitArr,
			addList: [
				{
					tag: tag_arr[0],
					target: '',
					start_date: '',
					end_date: '',
				},
				{
					tag: tag_arr[1],
					target: '',
					start_date: '',
					end_date: '',
				},
				{
					tag: tag_arr[2],
					target: '',
					start_date: '',
					end_date: '',
				},
				{
					tag: tag_arr[3],
					target: '',
					start_date: '',
					end_date: '',
				},
			],
			searchOptions: [],
			formula: '', //计算公式
			dataloading: false,
			formData: {
				targetName: '',
				unit: '',
				menu: '',
				frequency: '',
			},
			search_have_more: false,
			search_page: 1,
			current_search:'',

			newestDate: '',
		};
	},
	methods: {
		/* 获取目录结构 */
		getMenu() {
			preDictEdbInterface.classifyListV2().then(res => {
				if(res.Ret !== 200) return

				this.options = res.Data.AllNodes || [];
			}) 
		},

		/* 添加额外的指标列 */
		addTargetHandle() {
			if(this.addList.length >= 26) return this.$message.warning('添加指标个数已达上限')
			let tag = this.addList[this.addList.length-1].tag;
			let index = tag_arr.findIndex(item => item === tag);
			const item = {
				tag: tag_arr[index+1],
				target: '',
				start_date: '',
				end_date: ''
			};
			this.addList.push(item);
		},

		/* 搜索指标 */
		searchTarget(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search);
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
			this.searchApi(this.current_search);
		},

		searchApi(query,page=1) {
			preDictEdbInterface
          .edbSearch({
            Keyword: query,
            CurrentIndex: page
          })
          .then((res) => {
            if (res.Ret !== 200) return

						const { List,Paging } = res.Data;
						this.search_have_more = page < Paging.Pages;
						this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
          });
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page)
		},

		/* 选中指标 显示开始日期结束日期 */
		chooseTarget(val) {
			if (val) {
				const choose_obj = this.searchOptions.find(
					(item) => item.EdbInfoId === val
				);
				this.addList.forEach((list) => {
					if (list.target === val) {
						list.start_date = choose_obj.StartDate;
						list.end_date = choose_obj.EndDate;
						this.getNewestDate();
					}
				});
			}
		},

		/* 获取所选日期最早日期 */
		getNewestDate() {
			let dateArr = this.addList.filter(_ => _.end_date).map(_ => new Date(_.end_date).getTime())
			let earliestDate = Math.min(...dateArr);
			let sameDateArr = dateArr.filter(_ => _===earliestDate)
			if(dateArr.length === 1 || sameDateArr.length===dateArr.length) {
				this.newestDate = '';
				return
			}
			this.newestDate = this.$moment(Math.min(...dateArr)).format('YYYY-MM-DD');
		},	

		/* 清空指标和关联日期 */
		clearHandle(index) {
			this.addList[index].start_date = '';
			this.addList[index].end_date = '';
			this.getNewestDate();
		},
		// 删除指标
		delTarget(index) {
			this.addList.splice(index, 1);
			this.getNewestDate();
		},
		saveHandle() {
			if (!this.formula) return this.$message.warning('计算公式不能为空');
				this.$refs.diaForm.validate((valid) => {
					if (valid) {
						// 指标id数组
						let target_arr = this.addList
							.filter((item) => item.target)
							.map((item) => {
								return {
									EdbInfoId: item.target,
									FromTag: item.tag,
								};
							});
						let params = {
							CalculateFormula: this.formula,
							ClassifyId: this.formData.menu[this.formData.menu.length - 1],
							EdbName: this.formData.targetName,
							Frequency: this.formData.frequency,
							Unit: this.formData.unit,
							EdbInfoIdArr: target_arr,
						};
						this.dataloading = true;

						const params2 = { ... params,EdbInfoId: this.calulateForm.edb_id };

						preDictEdbInterface.calculateEdbSave(this.calulateForm.edb_id ? params2 : params).then((res) => {
							this.dataloading = false;
							if (res.Ret !== 200) return

							this.$message.success(this.calulateForm.edb_id ? '编辑成功' : '新增成功');
							this.calulateForm.edb_id ? this.$emit('addCallBack','edit') : this.$emit('addCallBack','add',{ 
								code:res.Data.UniqueCode,
								id:res.Data.EdbInfoId,
								classifyId:params.ClassifyId
							});
							this.init();
						});
					}
				});
		},
		
		init() {
			this.$refs.diaForm.resetFields();
			this.addList = [
				{
					tag: tag_arr[0],
					target: '',
					start_date: '',
					end_date: '',
				},
				{
					tag: tag_arr[1],
					target: '',
					start_date: '',
					end_date: '',
				},
				{
					tag: tag_arr[2],
					target: '',
					start_date: '',
					end_date: '',
				},
				{
					tag: tag_arr[3],
					target: '',
					start_date: '',
					end_date: '',
				},
			];
			this.searchOptions = [];
			this.formula = '';
			this.formData = {
				targetName: '',
				unit: '',
				menu: '',
				frequency: '',
			};
		},
		cancelHandle(type) {
			this.init();
			this.$emit('cancel');
			type==='cancel' && !this.calulateForm.edb_id && this.$emit('openPrev');
		},
	},
	created() {},
	mounted() {},
};
</script>
<style lang="scss">
.computed-dialog {
	overflow: hidden;
	div::-webkit-scrollbar {
		width: 6px !important;
	}
	.el-dialog__body {
		max-height: 700px;
		overflow: auto;
	}
	.dialog-main {
		padding: 25px 42px 25px 25px;
		.el-cascader .el-input {
			width: 340px;
		}
		.add-cont {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.add-li {
				position: relative;
				margin-bottom: 48px;
				.li-tag {
					font-size: 16px;
					margin-right: 8px;
				}
				.del-tag {
					position: absolute;
					right: -30px;
					top: 12px;
					font-size: 16px;
					cursor: pointer;
				}
				.target-date {
					color: #5882ef;
					position: absolute;
					bottom: -25px;
					left: 24px;
					&.newest {
						color: #f00;
					}
				}
			}
		}
		.add-icon {
			font-size: 16px;
			color: #5882ef;
			cursor: pointer;
		}
		.computed-min {
			margin: 50px 0;
			padding-bottom: 40px;
			border-bottom: 1px dashed #aab4cc;
			.example-txt {
				display: block;
				margin-left: 70px;
				margin-top: 15px;
			}
		}
	}
	.dia-bot {
		padding-bottom: 40px;
		display: flex;
		justify-content: center;
	}
	.tip-label {
		position: absolute;
		bottom: 30px;
		right: 30px;
		color: #409EFF;
		cursor: pointer;
	}
}
</style>