eta_front/src/views/dataEntry_manage/components/editTarget.vue

<template>
	<div class="edit_dialog_container">
		<el-dialog 
		:modal-append-to-body='false'
		:title="editTitle"
		:visible.sync="isShowedit"
		:close-on-click-modal="false"
		@close="cancelHandle"
		center
		v-dialogDrag 
		custom-class="dialogclass"
		width="700px">
		<div slot="title" style="display:flex;alignItems:center;">
			<img :src="$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
			<span style="fontSize:16px;">{{editTitle==='编辑指标'?$t('ManualEdbListPage.edit_edb_msg'):$t('ManualEdbListPage.edit_input_data')}}</span>
		</div>
		<div class="dialog-min" style="height:560px;">
			<div style="overflowY:auto;overflowX:hidden;">
				<el-tree
				class="type-list"
				accordion
				highlight-current
				:data="typeList"
				:props="defaultProps" 
				@node-click="chooseType"
				style="width:160px;">
				</el-tree>
			</div>
			<div class="rigth-cont">
				<el-form
				ref="formD"
				label-position="right" 
				label-width="120px" 
				:model="formData"
				:rules="formRules">
					<el-form-item :label="$t('ManualEdbListPage.label_classify')" prop="type">
						<span style="fontSize:14px;" :class="editTitle==='修改录入数据'?'not-allow':''">{{formData.type}}</span>
					</el-form-item>
					<!-- 修改数据 -->
					<template v-if="editTitle==='修改录入数据'">
						<el-form-item label="录入日期" prop="date">
							<el-date-picker type="date" placeholder="选择日期" v-model="formData.date" value-format="yyyy-MM-dd" style="width: 321px"></el-date-picker>
						</el-form-item>
						<el-form-item label="录入指标" prop="target">
							<el-select v-model="formData.target" placeholder="请选择录入指标" filterable disabled style="width: 321px">
								<el-option
									v-for="item in targetList"
									:key="item.TRADE_CODE"
									:label="item.SEC_NAME"
									:value="item.SEC_NAME">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="值" prop="value">
							<!-- <span class="require_tag">*</span> -->
							<el-input v-model="formData.value"  placeholder="请填写数值" style="width: 321px"></el-input>
						</el-form-item>
					</template>
					<!-- 修改指标 -->
					<template v-else>
						<el-form-item :label="$t('Edb.Detail.e_fre')" prop="frequency">
							<!-- <span class="require_tag">*</span> -->
							<el-select v-model="formData.frequency" placeholder="请选择频度" style="width: 321px" @change="handleFrequencyChange">
								<el-option
									v-for="item in frequencyArr"
									:label="item.label" 
									:value="item.value"
									:key="item.value"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('Edb.Detail.e_unit')" prop="unit">
							<!-- <span class="require_tag">*</span> -->
							<!-- <el-input v-model="formData.unit"  placeholder="请填写单位" style="width: 321px"></el-input> -->
							<el-autocomplete
								class="inline-input"
								v-model="formData.unit"
								:fetch-suggestions="querySearchUnit"
								placeholder="请填写单位"
								suffix-icon="el-icon-arrow-down"
								style="width: 321px;"
							></el-autocomplete>
						</el-form-item>
						<el-form-item :label="$t('Edb.Detail.e_name')" prop="targetName">
							<!-- <span class="require_tag">*</span> -->
							<el-input v-model="formData.targetName"  placeholder="请输入指标名称" style="width: 321px"></el-input>
						</el-form-item>
						<el-form-item :label="$t('ManualEdbListPage.label_update_remin')" prop="up_week" v-permission="permissionBtn.dataSourcePermission.manualData_add_updateRemind">
							<el-select v-model="formData.up_week" :placeholder="$t('ManualEdbListPage.ph_update_remin')" style="width:145px" v-if="formData.frequency === '周度'">
								<el-option
									v-for="item in weeksArr"
									:label="item.label" 
									:value="item.value"
									:key="item.value"
								></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '月度'">
								<el-option :label="item" :value="item" v-for="(item,index) in days" :key="index"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '季度'">
								<el-option label="每季度末" value="每季度末"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '半年度'">
								<el-option label="每半年末" value="每半年末"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '年度'">
								<el-option label="每年末" value="每年末"></el-option>
							</el-select>
							<el-time-picker
								:style="formData.frequency === '日度'?'width:321px':'width:170px'"
								v-model="formData.up_time"
								value-format="HH:mm:ss"
								:placeholder="$t('ManualEdbListPage.ph_update_remin')">
							</el-time-picker>
						</el-form-item>
					</template>
				</el-form>
				<div class="dialog-footer">
					<el-button type="primary" size="medium" @click.native="editHandle()"><!-- 提交 -->{{$t('Dialog.submit_btn')}}</el-button>
					<!-- <el-button type="primary" size="medium" @click.native="editHandle()" v-else>提交</el-button> -->
					<el-button  size="medium" @click.native="cancelHandle" style="marginLeft:50px;"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
				</div>
			</div>
		</div>
		</el-dialog>

	</div>
</template>

<script>
import {dataInterence} from 'api/api.js';
	export default {
		name:'',
		props:{
			tab_act:{
				type:Number
			},
			//标题
			editTitle: {
				type:String
			},
			// 指标类型
			typeList: {
				type:Array
			},
			// 显示弹窗
			isShowedit: {
				type:Boolean
			},
			// 修改的表单数据
			formData: {
				type:Object,
				default:{}
			},
			//编辑id
			edit_dataId: {
				type:String|Number
			},
			// 修改数据时的老日期
			old_date: {
				type:String,
				default:''
			},
			//指标单位
			unitList:{
				type:Array
			}
		},
		data () {
			return {
				defaultProps: {
					children: 'Child',
					label: 'ClassifyName'
				},
				formRules:{
					date:[
						{required: true, message: '请选择日期', trigger: 'blur'}
					],
					frequency:[
						{ required: true,message: /* '频度不能为空' */this.$t('Edb.Valids.fre_msg'), trigger: 'change' }
					],
					value:[
						{ required: true,message: /* '录入值不能为空' */this.$t('Edb.Valids.val_msg'), trigger: 'blur' }
					],
					target:[
						{ required: true,message: '录入指标不能为空', trigger: 'change' }
					],
					unit:[
						{ required: true,message: /* '单位不能为空' */this.$t('Edb.Valids.unit_msg'), trigger: 'change' }
					],
					targetName:[
						{ required: true,message: /* '指标名称不能为空' */this.$t('Edb.Valids.name_msg'), trigger: 'blur' }
					],
				},
				frequencyArr: [
					{ label:'日度',value:'日度' },
					{ label:'周度',value:'周度' },
					{ label:'旬度',value:'旬度' },
					{ label:'月度',value:'月度' },
					{ label:'季度',value:'季度' },
					{ label:'半年度',value:'半年度' },
					{ label:'年度',value:'年度' },
				],
				weeksArr: [
					{ label:'周一',value:'周一' },
					{ label:'周二',value:'周二' },
					{ label:'周三',value:'周三' },
					{ label:'周四',value:'周四' },
					{ label:'周五',value:'周五' },
					{ label:'周六',value:'周六' },
					{ label:'周日',value:'周日' },
				],
				classify_id:'',//分类id
				targetList:[],//指标列表
				defaultNode:'',
				// unitList:[
				// 	{value:'吨'},
				// 	{value:'元'},
				// 	{value:'米'},
				// ]
			};
		},	
		watch: {
			formData: {
				handler(newValue) {
					// console.log(newValue)
					this.formData = newValue;
				},
			　　deep: true
			},
			// // 指标值发生变化时
			// 'formData.target': {
			// 		handler() {
			// 			this.getTargetlist();
			// 		},
			// },
			// // 指标分类发生变化时
			// 'formData.type': {
			// 		handler() {
			// 			//重置指标值
			// 			// this.$emit('resetTarget');
			// 			this.getTargetlist();
			// 		},
			// }
		},
		computed:{
			days() {
				let days = [];
				for(let i = 1;i<=30;i++) {
					if(i < 10) {
						days.push('0'+i+'日')
					}else {
						days.push(i+'日')
					}
				}
				return days
			}
		},
		methods: {
			//搜索单位
			querySearchUnit(queryString, cb){
				let results = queryString ? this.unitList.filter(item=>item.value.indexOf(queryString) === 0) : this.unitList;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},

			// 频度改变
			handleFrequencyChange(e){
				if(e==='季度'){
					this.formData.up_day='每季度末'
				}else if(e==='半年度'){
					this.formData.up_day='每半年末'
				}else if(e==='年度'){
					this.formData.up_day='每年末'
				}
			},

			// 获取指标列表
			// getTargetlist() {
				// console.log(this.is_editData,this.edit_dataId)
				// dataInterence.searchTarget({
				// 	classify_id:this.is_editData?this.edit_dataId:this.classify_id,
				// 	key_word:this.formData.target||''
				// }).then(res => {
				// 	if(res.Ret === 200) {
				// 		this.targetList = res.data;
				// 	}
				// })
			// },
			// 点击确定
			editHandle(type) {
				this.$refs.formD.validate((valid) => {
					if (valid) {
						if(this.tab_act === 0) {
							// 检查录入日期数据是否已存在
							dataInterence.checkData({
								TradeCode:this.formData.trade_code,
								CreateDate:this.formData.date
							}).then(res => {
								if(res.Data.Status==0) {
									//编辑数据
									dataInterence.editData({
										TradeCode:this.formData.trade_code,
										CreateDate:this.formData.date,
										Close:this.formData.value,
										OldCreateDate:this.old_date
									}).then(res => {
										if(res.Ret === 200) {
											this.$message({
												message: '录入成功',
												type: 'success'
											});
											this.$emit('editDataOver')
										}else {
											this.$message({
												message: res.Msg,
												type: 'warning'
											});
										}
									})
								}else if(res.Data.Status==1) {
									this.$confirm('该日期已存在数据值'+res.Data.Close+'，确认修改?','提示',{
										type:'warning'
									}).then(() => {
										//编辑数据
										dataInterence.editData({
											TradeCode:this.formData.trade_code,
											CreateDate:this.formData.date,
											Close:this.formData.value,
											OldCreateDate:this.old_date
										}).then(res => {
											if(res.Ret === 200) {
												this.$message({
													message: '修改成功',
													type: 'success'
												});
												this.$emit('editDataOver')
											}else {
												this.$message({
													message: res.Msg,
													type: 'warning'
												});
											}
										})
									})
								}else {
									console.log(res.Msg)
								}
							})
								
						}else {
							
						// 	let notice_time = this.formData.frequency === '日度'?this.formData.up_time
						// 	:this.formData.frequency === '周度'?this.formData.up_week+' ' + this.formData.up_time
						// 	:this.formData.frequency === '月度'?this.formData.up_day+' ' + this.formData.up_time
						// 	:this.formData.frequency === '季度'?this.formData.up_day+' ' + this.formData.up_time
						// 	:this.formData.frequency === '半年度'?this.formData.up_day+' ' + this.formData.up_time
						// 	:this.formData.frequency === '年度'?this.formData.up_day+' ' + this.formData.up_time:''

							let notice_time=''
							if(this.formData.frequency==='日度'){
								notice_time=this.formData.up_time
							}else if(this.formData.frequency === '周度'){
								if(this.formData.up_week&&this.formData.up_time){
									notice_time=this.formData.up_week+' ' + this.formData.up_time
								}
							}else{
								if(this.formData.up_day&&this.formData.up_time){
									notice_time=this.formData.up_day+' ' + this.formData.up_time
								}
							}
							// 编辑指标
							dataInterence.editTarget({
								ClassifyId:Number(this.edit_dataId),
								TradeCode:this.formData.trade_code,
								Frequency:this.formData.frequency,
								Unit:this.formData.unit,
								SecName:this.formData.targetName,
								NoticeTime:notice_time
							}).then(res => {
								if(res.Ret === 200) {
									this.$message({
										message: '修改成功',
										type: 'success'
									});
									this.$emit('editDataOver',1)
								}else if(res.Ret!=403){
									this.$message({
										message: res.Msg,
										type: 'warning'
									});
								}
							})
						}
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
			},
			cancelHandle() {
				this.$emit('cancelEdit',1);
			},	
			// 选择类别
			chooseType(item) {
				//修改指标可选择分类
				if(this.tab_act !== 0) {
					if(!item.Child || !item.Child.length ) {
						//修改表单数据
						this.$emit('changeEditForm',item.ClassifyName,item.ClassifyId)
						this.classify_id = item.ClassifyId;
						// console.log(this.classify_id)
					}
				}
			},
		},
		created() {
			
		},
		mounted() {
		},
	}
</script>
<style lang='scss'>
.edit_dialog_container {
	.dialog-min {
		display: flex;
		.rigth-cont {
			border-left: 1px solid #dcdcdc;
			padding:  0 0 48px 60px;
			.not-allow {
				// background-color: #F5F7FA;
				color: #C0C4CC;
    			cursor: not-allowed;
			}
			.el-form-item {
				position: relative;
				.require_tag {
					font-size: 20px;
					color: #F56C6C;
					position: absolute;
					left: -132px;
					top: 4px;
				}
			}
			.el-input{
				width: 100%;
			}
		}
		// ele-reset
		.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
			// background: #fff !important;
			// color: #5882EF !important;
			background: #fff !important;
			.el-tree-node__label {
				// background: #fff !important;
				color: #5882EF !important;
			}
		}
		.el-tree-node {
			margin-bottom: 18px !important;
		}
		.el-tree-node__children .el-tree-node {
			margin-bottom: 0 !important;
		}
		.el-tree-node__content:hover {
			color: #5882EF !important;
		}
		.el-tree-node__content>.el-tree-node__label {
			font-size: 16px !important;
			color: #333;
			font-weight: bold;
		}
		.el-tree-node__children .el-tree-node__content>.el-tree-node__label  {
			font-size: 14px !important;
			font-weight: normal !important;
		}
		// .el-form-item__label {
			// font-size: 17px;
			// text-align: left;
			// color: #3464E0;
		// }
		.el-form-item__label {
			font-size: 14px;
			color: #333;
			width: 100px !important;
			text-align:inherit;
		}
		.el-form-item__content {
			margin-left: 120px !important;
		}
		// .el-date-editor,.el-input {
		// 	width: 321px !important;
		// }
		// .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		// 	content: ''!important;
		// 	// color: #F56C6C;
		// 	margin-right: 0 !important;
		// }
		.el-tree-node.is-expanded>.el-tree-node__children {
			margin-top: 5px!important;
		}
	}
	.dialog-footer {
		margin: 50px 0;
		display: flex;
		justify-content: center;
	}
}
</style>