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

<template>
	<div class="editTargetDiaBase-box">
		<el-dialog
		:visible.sync="isOpenDialog"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="700px"
		v-dialogDrag>
			<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;">{{$t('EtaBasePage.complate_info')}}</span>
			</div>
			<div class="dialog-main">
				<el-form
				ref="targetForm"
				label-position="left"
				label-width="110px"
				hide-required-asterisk
				:model="formData"
				:rules="formRules">
					<el-form-item :label="$t('Edb.Detail.e_name')" prop="edb_name">
						<el-input
						v-model="formData.edb_name"
						style="width: 80%"
						:placeholder="$t('Edb.InputHolderAll.input_name')"></el-input>
					</el-form-item>
					<el-form-item :label="$t('Edb.Detail.e_menu')" prop="menu">
						<el-cascader
						v-model="formData.menu"
						:options="options"
						:props="levelProps"
						style="width: 80%"
						clearable
						:placeholder="$t('Edb.InputHolderAll.input_menu')"/>
					</el-form-item>
					<el-form-item :label="$t('Edb.Detail.e_fre')" prop="frequency">
						<!-- <span slot="label">频&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率</span> -->
						<el-select 
						v-model="formData.frequency" 
						:placeholder="$t('Edb.InputHolderAll.input_fre')"
						style="width:80%" 
						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="$t('Edb.Detail.e_unit')" prop="unit">
						<!-- <span slot="label">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</span> -->
						<selectUnit v-model="formData.unit" style="width: 80%" />
					</el-form-item>
				</el-form>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="addTarget"><!-- 保存 -->{{$t('Dialog.confirm_save_btn')}}</el-button>
				<el-button type="primary" plain @click="cancelHandle"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { unitArr } from '@/utils/defaultOptions';
import { frequencyArr } from './util'
export default {
	name:'',
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		params: {
			type: Object,
		}
	},
	watch: {
		'isOpenDialog': {
			handler(newval) {
				newval && this.getMenu();
				// console.log(this.params)
				if(newval) this.formData = {
					edb_name: this.params.edb_name || '',
					menu: [],
					frequency: this.params.frequency || '',
					unit: this.params.unit || ''
				}
			}
		}
	},
	data () {
		return {
			formData: {

			},
			formRules: {
				edb_name:[
					{ required: true, message: this.$t('Edb.Valids.name_msg'), trigger: 'blur' },
				],
				menu:[
					{ required: true, message: this.$t('Edb.Valids.menu_msg'), trigger: 'blur' },
				],
				frequency:[
					{ required: true, message: this.$t('Edb.Valids.fre_msg'), trigger: 'blur' },
				],
				unit:[
					{ required: true, message: this.$t('Edb.Valids.unit_msg'), trigger: ['blur','change'] },
				],
			},
			options:  [],
			unitArr,
			levelProps: {
				label: 'ClassifyName',
				value: 'ClassifyId',
				children: 'Children',
				checkStrictly: true
			},
			frequencyArr
		};
	},
	methods: {
		/* 获取目录结构 */
		getMenu() {
			dataBaseInterface.menuListV3().then(res => {
				if(res.Ret === 200) {
					this.filterNodes(res.Data.AllNodes||[]);
					this.options = res.Data.AllNodes || [];
				}
			})
		},
		// 递归改变第三级目录结构
		filterNodes(arr) {
			arr.length && arr.forEach(item => {
				item.Children.length && this.filterNodes(item.Children)
				if(!item.Children.length) {
					delete item.Children
				}
			})
		},
		/* 保存 */
		addTarget() {
			this.$refs.targetForm.validate((valid) => {
				if(valid) {
					let params = {
						...this.params,
						EdbName: this.formData.edb_name,
						ClassifyId: this.formData.menu[this.formData.menu.length - 1],
						Frequency: this.formData.frequency,
						Unit: this.formData.unit
					}

					if(this.$route.path!=='/database') return this.$emit('add',params)

					dataBaseInterface.targetAdd(params).then(res => {
						if(res.Ret === 200) {
							this.$message.success(/* '新增指标成功！' */this.$t('EtaBasePage.add_success_msg'))
							this.formData = {}
							this.$emit('addTargetCallback',{ code:res.Data.UniqueCode,id:res.Data.EdbInfoId,classifyId:params.ClassifyId })
						}
					})
				}
			})
		},
		cancelHandle() {
			this.formData = {}
			this.$emit('cancel')
		}
	},
}
</script>
<style lang='scss'>
.editTargetDiaBase-box {
	.dialog-main {
		padding-left: 50px;
	}
	.el-cascader .el-input {
		width: 100%;
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;

	}
}
</style>