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

<template>
	<div class="predict-classify-dialog">
		<el-dialog
		:visible.sync="isOpenDialog"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		:title="title==='添加' ? $t('Table.add_btn') : $t('Table.edit_btn')"
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="650px"
		v-dialogDrag>
			<div class="dialog-main">
				<el-form
				ref="diaForm"
				label-position="left"
				hide-required-asterisk
				label-width="120px"
				:model="formData"
				:rules="formRules">
				
				<el-form-item :label="$t('EtaBasePage.parent_menu')" 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="$t('EtaBasePage.menu_name')"  prop="classify_name">
					<el-input
					v-model="formData.classify_name"
					style="width: 80%"
					:placeholder="$t('Dialog.require_vaild')"></el-input>
				</el-form-item>
				</el-form>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="saveHandle"><!-- 保存 -->{{$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 * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
export default {
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		//标题
		title: {
			type: String,
			default: '添加'
		},
		form: {
			type: Object,
		}
	},
	watch: {
		'isOpenDialog': {
			handler(newval) {
        if(newval) {
          this.formData = {...this.form};
        }
			}
		}
	},
	computed:{
		getParentName(){
			const arr=this.formData.parentArr||[]
			let strArr=arr.reverse().map(item=>{
				return item.classifyName
			})
			
			return strArr.join('/')
		}
	},
	data () {
		return {			
			formData: {},
      formRules: {
        classify_name:[
          { required: true, message: this.$t('EtaBasePage.input_menu_msg'), trigger: 'blur' },
        ]
      },

		};
	},
	methods: {
		async saveHandle() {
			await this.$refs.diaForm.validate()
			const { classify_name,classify_id,Level,ParentId}  = this.formData;
			const { Ret,Msg } = this.title==='添加' 
				? await preDictEdbInterface.classifyAdd({ ClassifyName:classify_name,ParentId,Level})
				: await preDictEdbInterface.classifyEdit({ ClassifyName:classify_name, ClassifyId:classify_id  })
				
			if( Ret !== 200) return
			this.$message.success(Msg);

			this.cancelHandle();
			this.$emit('successCallback')
		},

		/* 取消 */
		cancelHandle() {
      this.formData = {}
			this.$refs.diaForm.resetFields();
			this.$emit('update:isOpenDialog',false)
		},

	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss'>
.predict-classify-dialog {
	.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>