eta_front/src/views/dataEntry_manage/databaseComponents/jointTargetDia.vue

<template>
	<div class="jointTarget-container">
		<el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    custom-class="joint-dialog"
    top="10vh"
    v-dialogDrag
		width="1000px"
  >
    <div slot="title" style="display: flex; align-items: center">
      <img
        :src="$icons.computed"
        style="color: #fff; width: 16px; height: 16px; marginright: 5px"
      />
      <span style="font-size: 16px">&nbsp;指标拼接</span>
    </div>

		<ul class="label-cont" v-if="!params.view && !params.edb_id">
			<li v-for="item in tagList" :key="item.key" :class="{act: default_type === item.key}" @click="toogleType(item.key)">{{item.label}}</li>
		</ul>

    <el-form
      ref="concatForm"
      class="form-cont"
      label-position="left"
      label-width="110px"
      :model="formData"
      :rules="formRules"
			:disabled="params.view"
    >
			<template v-if="default_type === 1">
				<el-form-item label="拼接日期" prop="date">
					<el-date-picker
					v-model="formData.date"
					value-format="yyyy-MM-dd"
					type="date"
					placeholder="选择日期"
					style="width: 70%">
				</el-date-picker>
				</el-form-item>
				<el-form-item label="拼接日期之前" prop="pre_edb">
					<el-select
						v-model="formData.pre_edb"
						v-loadMore="searchLoad"
						:filterable="!formData.pre_edb"
						clearable
						placeholder="指标ID/指标名称"
						style="width: 70%"
						:disabled="params.view"
						remote
						:remote-method="query=>{searchHandle(query)}"
						@click.native="inputFocusHandle"
						@blur="search_have_more = false"
					>
						<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"
						>
						</el-option>
					</el-select>
					<span v-if="formData.pre_edb">(起始日期：{{ searchOptions.find(item => item.EdbInfoId === formData.pre_edb) ? searchOptions.find(item => item.EdbInfoId === formData.pre_edb).StartDate : ''}})</span>
				</el-form-item>
				<el-form-item label="拼接日期之后" prop="after_edb">
					<el-select
							v-model="formData.after_edb"
							v-loadMore="searchLoad"
							:filterable="!formData.after_edb"
							clearable
							placeholder="指标ID/指标名称"
							style="width: 70%"
							:disabled="params.view"
							remote
							:remote-method="query=>{searchHandle(query)}"
							@click.native="inputFocusHandle"
							@blur="search_have_more = false"
						>
							<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"
							>
							</el-option>
						</el-select>
						<span v-if="formData.after_edb">(最新日期：{{ searchOptions.find(item => item.EdbInfoId === formData.after_edb) ? searchOptions.find(item => item.EdbInfoId === formData.after_edb).EndDate : ''}})</span>
				</el-form-item>
			</template>
			<template v-else>
				<el-form-item label="待拼接指标" prop="old_stay_edb">
					<el-select
						v-model="formData.old_stay_edb"
						v-loadMore="searchLoad2"
						:filterable="!formData.old_stay_edb"
						clearable
						placeholder="指标ID/指标名称"
						style="width: 70%"
						:disabled="params.view"
						remote
						:remote-method="query=>{searchHandle(query,'month')}"
						@click.native="e => {inputFocusHandle(e,'month')} "
						@blur="search_have_more = false"
						>
							<i slot="prefix" class="el-input__icon el-icon-search"></i>
							<el-option
								v-for="item in searchMonthOptions"
								:key="item.EdbInfoId"
								:label="$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
								:value="item.EdbInfoId"
							>
							</el-option>
						</el-select>
					<span v-if="formData.old_stay_edb">(截止日期：{{searchMonthOptions.find(item => item.EdbInfoId === formData.old_stay_edb) ? searchMonthOptions.find(item => item.EdbInfoId === formData.old_stay_edb).EndDate : ''}})</span>
				</el-form-item>
				<el-form-item label="同比值指标" prop="concat_edb">
					<el-select
						v-model="formData.concat_edb"
						v-loadMore="searchLoad"
						:filterable="!formData.concat_edb"
						clearable
						placeholder="指标ID/指标名称"
						style="width: 70%"
						remote
						:remote-method="query=>{searchHandle(query)}"
						@click.native="inputFocusHandle"
						@blur="search_have_more = false"
					>
						<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"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</template>

			<el-form-item label="指标名称" prop="edb_name" class="target-form-cont">
				<el-input
				v-model="formData.edb_name"
				style="width: 70%"
				placeholder="指标名称"></el-input>
			</el-form-item>
			<el-form-item label="所属目录" prop="menu">
				<el-cascader
				v-model="formData.menu"
				:options="menuOptions"
				:props="{
					label: 'ClassifyName',
					value: 'ClassifyId',
					children: 'Children',
					checkStrictly: true
				}"
				style="width: 70%"
				clearable
				placeholder="请选择所属目录"/>
			</el-form-item>
			<el-form-item label="频度" prop="frequency">
				<el-select 
				v-model="formData.frequency" 
				placeholder="请选择频度" 
				style="width:70%" 
				clearable >
					<el-option
						v-for="item in frequencyArr"
						:key="item"
						:label="item"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="单位" prop="unit">
				<selectUnit v-model="formData.unit" style="width:70%" />
			</el-form-item>
		</el-form>
    <div class="dia-bot" v-if="!params.view">
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="saveHandle"
        >保存</el-button
      >
      <el-button type="primary" plain @click="cancelHandle('cancel')">取消</el-button>
    </div>
		<el-popover
			placement="top-start"
			:width="default_type === 1 ? 360 : 550"
			trigger="click">
			<p style="padding:20px;line-height:25px;" v-html="tips.get(default_type)"/>
			<span slot="reference" class="tip-label">公式说明</span>
		</el-popover>
  </el-dialog>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js'
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import { unitArr } from '@/utils/defaultOptions';
export default {
	props: {
		isShow: {
			type: Boolean,
		},
		params: {
			type: Object,
		},
		isPredict:{//是否是预测指标
			type: Boolean,
			default:false
		}
	},
	watch: {
		isShow(newval) {
			newval && this.getMenu();
			if(newval && this.params.edb_id) {

				// this.searchHandle();
				const backData = _.cloneDeep(this.params);
				this.default_type = backData.source === 23||backData.source === 47 ? 1 : 2;

				this.formData = {
					date: backData.date,
					pre_edb: backData.pre_edb,
					after_edb: backData.after_edb,
					old_stay_edb: backData.old_stay_edb,
					concat_edb: backData.concat_edb,
					edb_name: backData.targetName,
					menu: backData.menu,
					frequency: backData.frequency,
					unit: backData.unit,
				}

				//options 回显
				if(backData.source === 23||backData.source === 47) {
					this.searchOptions = backData.from_arr.map(item => ({
						EdbInfoId: item.FromEdbInfoId,
						EdbName: item.FromEdbName,
						StartDate: item.StartDate,
						EndDate: item.EndDate,
					}))
				}else {
					this.searchMonthOptions = backData.from_arr.filter(obj => obj.FromTag === 'A').map(item => ({
						EdbInfoId: item.FromEdbInfoId,
						EdbName: item.FromEdbName,
						StartDate: item.StartDate,
						EndDate: item.EndDate,
					}));

					this.searchMonthConcatOptions = backData.from_arr.filter(obj => obj.FromTag === 'B').map(item => ({
						EdbInfoId: item.FromEdbInfoId,
						EdbName: item.FromEdbName,
						StartDate: item.StartDate,
						EndDate: item.EndDate,
					}))


				}

			}
		}
	},
	data () {
		return {
			default_type: 1,
			tagList: [
				{
					label: "直接拼接",
					key: 1
				},
				{
					label: "累计值同比拼接",
					key: 2
				}
			],
			formData: {
				date: '',
				pre_edb: '',
				after_edb: '',
				old_stay_edb: '',
				concat_edb: '',
				edb_name: '',
				menu: '',
				frequency: '',
				unit: '',
			},
			formRules: {
				date:[
					{ required: true, message: '拼接日期不能为空', trigger: 'blur' },
				],
				pre_edb:[
					{ required: true, message: '指标不能为空', trigger: 'blur' },
				],
				after_edb:[
					{ required: true, message: '指标不能为空', trigger: 'blur' },
				],
				old_stay_edb:[
					{ required: true, message: '待拼接指标不能为空', trigger: 'blur' },
				],
				concat_edb:[
					{ required: true, message: '指标不能为空', trigger: 'blur' },
				],
				edb_name:[
					{ required: true, message: '指标名称不能为空', trigger: 'blur' },
				],
				menu:[
					{ required: true, message: '所属目录不能为空', trigger: 'blur' },
				],
				frequency:[
					{ required: true, message: '频度不能为空', trigger: 'blur' },
				],
				unit:[
					{ required: true, message: '单位不能为空', trigger: ['blur','change'] },
				],
			},
			tips: new Map([
				[1,`
					直接拼接说明：<br>
					1、选取拼接日期<br>
					2、在拼接日期之前的数据选择指标A<br>
					3、拼接日期之后的数据选择指标B<br>
					4、新指标的起始日期为A的开始日期，更新时间跟随指标B进行更新<br>
					5、指标A和B可以是原始指标，也可以是计算指标
				`],
				[2,`
					累计值同比拼接说明：<br>
					1、只支持月频度的指标进行累计值同比拼接<br>
					2、如果出现有空值运算，则返回空值<br>
					3、选取待拼接指标A和同比值指标B<br>
					4、搜索到指标A最后一个12月31日有值的年份，并且向前回溯12个值(12个月)，分别乘以下一年同期对应的同比增长率（B)，公式为【A*(1+同期增长率（B）/100)】，得到下一年每个月的绝对值，再用新得到的下一年的12个月的值再乘以再下一年同期对应的同比增长率,得到再下一年每个月的绝对值<br>
					5、以此类推，直到运算至指标B的最新值，得到新的序列C<br>
					6、新指标是将序列C和指标A进行直接拼接，拼接日期选取指标A中有值的年份的年末最后一天即12月31日，再与序列C的起始日期做拼接<br>
					7、新指标跟随指标B进行更新
				`],
			]),
			searchOptions: [],
			searchMonthOptions: [],
			searchMonthConcatOptions:[],
			unitArr,
			menuOptions: [],
			frequencyArr:['日度','周度','旬度','月度','季度','年度'],

			search_page: 1,
			search_have_more: false,
			current_search: ''
		};
	},
	methods: {
		/* 搜索 */
		searchHandle(query,type) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search,1,type);
		},

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

		async searchApi(query,page=1,type='') {
			const params={
				KeyWord:query,
				CurrentIndex: page,
				// FilterSource: type === 'monthConcat' ? 5 : 0,
				Frequency: ['month'].includes(type) ? '月度' : ''
			}
			const res=this.isPredict?await preDictEdbInterface.edbSearch(params):await dataBaseInterface.targetSearchByPage(params)
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;

				this.search_have_more = page < Paging.Pages;

				if(type === 'month') {
					this.searchMonthOptions = page === 1 ? List : this.searchMonthOptions.concat(List);
					this.searchMonthOptions = this.searchMonthOptions.filter(item => item.EdbInfoId !== this.params.edb_id);
				}else if(type === 'monthConcat') {
					this.searchMonthConcatOptions = page === 1 ? List : this.searchMonthConcatOptions.concat(List);
					this.searchMonthConcatOptions = this.searchMonthConcatOptions.filter(item => item.EdbInfoId !== this.params.edb_id);
				}else {
					this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
					this.searchOptions = this.searchOptions.filter(item => item.EdbInfoId !== this.params.edb_id);
				}

			// })
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page);
		},
		//月度加载
		searchLoad2() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page,'month');
		},
		//月度同比加载
		searchLoad3() {
			console.log(this.search_have_more)
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page,'monthConcat');
		},

		toogleType(key) {
			this.formData = {};
			this.searchOptions = [];
			this.$refs.concatForm.resetFields();
			this.default_type = key;
		},

		/* 获取目录结构 */
		async getMenu() {
			const res=this.isPredict?await preDictEdbInterface.classifyListV2():await dataBaseInterface.menuListV3()
			// dataBaseInterface.menuList().then(res => {
				if(res.Ret === 200) {
					if(!this.isPredict){
						this.filterNodes(res.Data.AllNodes||[]);
						this.menuOptions = res.Data.AllNodes || [];
					}else{
						this.menuOptions = res.Data.AllNodes || [];
					} 
					// this.menuOptions = res.Data.AllNodes || [];
				}
			// })
		},
		// 递归改变第三级目录结构
		filterNodes(arr) {
			arr.length && arr.forEach(item => {
				item.Children.length && this.filterNodes(item.Children)
				if(!item.Children.length) {
					delete item.Children
				}
			})
		},

		/* 保存 */
		saveHandle() {
			this.$refs.concatForm.validate((valid) => {
				if(!valid) return
				let params_base = {
					ClassifyId: this.formData.menu[this.formData.menu.length - 1],
					EdbName: this.formData.edb_name,
					Frequency: this.formData.frequency,
					Unit: this.formData.unit
				}
				let params = this.default_type === 1 ? {
					...params_base,
					EdbInfoIdArr: [
						{ EdbInfoId: this.formData.after_edb }
					],
					Formula: this.formData.date,
					FromEdbInfoId: this.formData.pre_edb,
					Source: this.isPredict?47:23,
				} : {
					...params_base,
					EdbInfoIdArr: [
						{ EdbInfoId: this.formData.concat_edb }
					],
					FromEdbInfoId: this.formData.old_stay_edb,
					Source: this.isPredict?48:24,
				}	

				this.params.edb_id ? this.editEdbHandle(params) : this.addEdbHandle(params);
			})
		},
		
		/* 新增 */
		async addEdbHandle(params) {
			const res=this.isPredict?await preDictEdbInterface.operateEdbSave(params):await dataBaseInterface.calculateTargetSave(params)
			// dataBaseInterface.calculateTargetSave(params).then(res => {
				if (res.Ret !== 200) return
					this.$message.success('新增成功');

					this.$emit('addCallBack','add',{ code:res.Data.UniqueCode,id:res.Data.EdbInfoId,classifyId:params.ClassifyId });
					this.init();
			// });
		},

		/* 编辑 */
		async editEdbHandle(params) {

			let edit_params = {
				...params,
				EdbInfoId: this.params.edb_id,
			}

			const res=this.isPredict?await preDictEdbInterface.operateEdbSave(edit_params):await dataBaseInterface.calculateTargetEdit(edit_params)
			// dataBaseInterface.calculateTargetEdit(edit_params).then(res => {
				if (res.Ret !== 200) return
					this.$message.success('编辑成功');

					this.$emit('addCallBack','edit');
					this.init();
			// });
		},

		init() {
			this.default_type = 1;
			this.formData = {};
			this.$refs.concatForm.resetFields();
		},

		cancelHandle(type) {
			this.init();
			this.$emit('cancel');
			type==='cancel' && !this.params.edb_id && this.$emit('openPrev');
		}
	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss'>
.jointTarget-container {

	.mx-datepicker {
		width: 70% !important;
	}

	.label-cont {
		display: flex;
		align-items: center;
		li {
			cursor: pointer;
			font-size: 16px;
			margin-right: 24px;
			margin-bottom: 35px;
			&:hover {
				color: #409EFF;
			}
			&.act {
				color: #409EFF;
			}
		}
	}
	.form-cont {
		margin-bottom: 40px;
	}
	.target-form-cont {
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px dashed #AAB4CC;
	}
	.el-cascader .el-input {
		width: 100%;
	}
	.dia-bot {
		padding: 10px 0 60px;
		display: flex;
		justify-content: center;
	}
	.tip-label {
		position: absolute;
		bottom: 30px;
		right: 30px;
		color: #409EFF;
		cursor: pointer;
	}
}
</style>