rt-sim-training-client/src/views/system/dictionaryDetail/edit.vue

<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
      <el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { create, checkDicDetailCodeExist, getData, update } from '@/api/management/dictionaryDetail';
import { validateCharCode } from '@/utils/validate';
export default {
	name: 'DictionaryDetailEdit',
	props: {
		type: {
			type: String,
			required: true
		},
		dicId: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			dialogVisible: false,
			formModel: {
				code: '',
				name: '',
				status: '1',
				remarks: ''
			}
		};
	},
	computed: {
		form() {
			const isAdd = this.type === 'ADD';
			const form = {
				labelWidth: '60px',
				items: [
					{ prop: 'code', label: this.$t('system.code'), type: 'text', required: true, disabled: !isAdd },
					{ prop: 'name', label: this.$t('system.name'), type: 'text', required: true },
					{
						prop: 'status', label: this.$t('system.status'), type: 'select', required: true, options: this.$ConstSelect.Status
					},
					{ prop: 'remarks', label: this.$t('system.remarks'), type: 'textarea', required: false }
				]
			};
			return form;
		},
		rules() {
			const crules = {
				name: [
					{ required: true, message: this.$t('rules.pleaseInputName'), trigger: 'blur' },
					{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' }
				],
				status: [
					{ required: true, message: this.$t('rules.pleaseSelectStatus'), trigger: 'change' }
				],
				remarks: [
					{ max: 50, message: this.$t('rules.strLengthNotExceed50'), trigger: 'blur' }
				]
			};
			if (this.type === 'ADD') {
				return Object.assign(crules, {
					code: [
						{ required: true, message: this.$t('rules.pleaseInputCode'), trigger: 'blur' },
						{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' },
						{ validator: this.validateCode, trigger: 'blur' }
					]
				});
			} else {
				return crules;
			}
		},
		title() {
			if (this.type === 'ADD') {
				return this.$t('system.createDetail');
			} else {
				return this.$t('system.editDetail');
			}
		}
	},
	methods: {
		validateCode(rule, value, callback) {
			if (!validateCharCode(value)) {
				return callback(new Error(this.$t('error.formartError')));
			} else {
				checkDicDetailCodeExist(this.dicId, value).then(response => {
					if (response.data) {
						return callback(new Error(this.$t('error.codeHasExist')));
					} else {
						return callback();
					}
				}).catch(() => {
					return callback(new Error(this.$t('error.serviceException')));
				});
			}
		},
		show(id) {
			this.dialogVisible = true;
			if (id) {
				getData(this.dicId, id).then(response => {
					this.formModel = response.data;
					this.$refs.dataform.resetForm();
				});
			}
		},
		doSave() {
			const self = this;
			this.$refs.dataform.validateForm(() => {
				if (self.type === 'ADD') {
					self.create();
				} else {
					self.update();
				}
			});
		},
		create() {
			const self = this;
			create(this.dicId, this.formModel).then(response => {
				self.$message.success(this.$t('system.createSuccess'));
				self.handleClose();
				self.$emit('reloadTable');
			}).catch(error => {
				self.$message.error(`${this.$t('error.createDetailFailed')}:${error.message}`);
			});
		},
		update() {
			const self = this;
			update(this.dicId, this.formModel).then(response => {
				self.$message.success(this.$t('system.updateSuccess'));
				self.handleClose();
				self.$emit('reloadTable');
			}).catch(error => {
				self.$message.error(`${this.$t('error.updateDetailFailed')}:${error.message}`);
			});
		},
		handleClose(done) {
			this.formModel = {
				code: '',
				name: '',
				status: '1',
				remarks: ''
			};
			this.$refs.dataform.resetForm();
			if (done) {
				done();
			} else {
				this.dialogVisible = false;
			}
		}
	}
};
</script>