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

 <template>
	<div class="Dialog-box">
		<el-dialog
		:visible.sync="isOpenDialog"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="560px"
		v-dialogDrag>
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="title=='添加'?$icons.add:title=='编辑'?$icons.edit:''" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">{{title}}</span>
			</div>
			<div class="dialog-main">
				<el-form
				ref="diaForm"
				label-position="left"
				hide-required-asterisk
				label-width="80px"
				:model="formData"
				:rules="formRules">
					<template v-if="!formData.isEDB">
						<el-form-item label="上级目录" v-if="formData.level>0">
							<el-tooltip class="item" effect="dark" :content="getParentName" placement="top">
      							<span class="parentStr">{{getParentName}}</span>
    						</el-tooltip>
						</el-form-item>
						<el-form-item label="目录名称" prop="levelVal">
							<el-input
							v-model="formData.levelVal"
							style="width: 80%"
							placeholder="必填项"></el-input>
						</el-form-item>
					</template>
					<!-- 编辑具体指标 -->
					<template v-if="title=='编辑' && formData.isEDB">
						<el-form-item label="指标名称" prop="levelVal">
							<el-input
							v-model="formData.levelVal"
							style="width: 80%"
							placeholder="指标名称"></el-input>
						</el-form-item>
						<el-form-item label="所属目录" prop="level_menu">
							<el-cascader
							v-model="formData.level_menu"
							:options="options"
							:props="levelProps"
							style="width: 80%"
							placeholder="请选择所属目录"/>
						</el-form-item>
						<el-form-item label="频率" prop="frequency">
							<span slot="label">频&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率</span>
							<el-select 
							v-model="formData.frequency" 
							placeholder="请选择频率" 
							style="width:80%"
							:disabled="$parent.tableData[0].Source===58"
							@change="changeTrade">
								<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">
							<span slot="label">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</span>
							<selectUnit v-model="formData.unit" style="width: 80%" />
						</el-form-item>
					</template>
				</el-form>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="saveHandle">保存</el-button>
				<el-button type="primary" plain @click="cancelHandle">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { unitArr } from '@/utils/defaultOptions';
export default {
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		//标题
		title: {
			type: String,
			default: '添加'
		},
		formData: {
			type: Object,//{parentArr父级数据，isEDB:true 是否为指标}
		}
	},
	watch: {
		'isOpenDialog': {
			handler(newval) {
				if(newval && this.formData.isEDB) {
					this.getMenu();
				}
				// console.log(this.formData);
			}
		}
	},
	computed:{
		getParentName(){
			const arr=this.formData.parentArr||[]
			let strArr=arr.reverse().map(item=>{
				return item.classifyName
			})
			
			return strArr.join('/')
		}
	},
	data () {
		return {
			formRules: {
				levelVal:[
					{ required: true, message: '目录名称不能为空', trigger: 'blur' },
				],
				// level_2:[
				// 	{ required: true, message: '目录名称不能为空', trigger: 'blur' },
				// ],
				// level_3:[
				// 	{ required: true, message: '目录名称不能为空', trigger: 'blur' },
				// ],
				// level_4:[
				// 	{ required: true, message: '指标名称不能为空', trigger: 'blur' },
				// ],
				level_menu:[
					{ required: true, message: '所属目录不能为空', trigger: 'blur' },
				],
				frequency:[
					{ required: true, message: '频率不能为空', trigger: 'blur' },
				],
				unit:[
					{ required: true, message: '单位不能为空', trigger: ['blur','change'] },
				],
			},
			options:  [],
			unitArr,
			levelProps: {
				label: 'ClassifyName',
				value: 'ClassifyId',
				children: 'Children',
				checkStrictly: true
			},
			frequencyArr:['日度','周度','旬度','月度','季度','年度'],

		};
	},
	methods: {
		async saveHandle() {
			await this.$refs.diaForm.validate();
			let res = null;

			if(this.title==='添加') {
				res = await dataBaseInterface.nodeAdd({
						ClassifyName: this.formData.levelVal||'',
						ParentId:this.formData.parent_id || 0,
						Level: this.formData.level
					})
			}else if(this.title==='编辑') {
				res = this.formData.isEDB
					? await dataBaseInterface.targetEdit({
							ClassifyId: this.formData.level_menu[this.formData.level_menu.length - 1],
							EdbInfoId: this.formData.edbinfo_id,
							EdbName: this.formData.levelVal,
							Frequency: this.formData.frequency,
							Unit: this.formData.unit
						})
					: await dataBaseInterface.nodeEdit({
							ClassifyName: this.formData.levelVal||'',
							ClassifyId:this.formData.classify_id || 0
						})
			}
			if(res.Ret !== 200) return
			this.$message.success(res.Msg);

		 if(this.title==='添加') this.callbackHandle('add');
		 else if(this.title==='编辑' && this.formData.isEDB) this.callbackHandle('update');
		 else if(this.title==='编辑' && !this.formData.isEDB) this.callbackHandle();

				
		},
		/* 成功回调 */
		callbackHandle(type) {
			this.$refs.diaForm.resetFields();
			this.$emit('sucessCallback',type)
		},
		/* 取消 */
		cancelHandle() {
			this.$refs.diaForm.resetFields();
			this.$emit('closeDia')
		},
		
		/* 获取目录结构 */
		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
				}
			})
		}
	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss'>
.Dialog-box {
	.parentStr{
		display: block;
		width: 304px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.dialog-main {
		padding-left: 50px;
	}
	.el-cascader .el-input {
		width: 100%;
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;

	}
}
</style>