rt-sim-training-client/src/views/system/configLine/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 { addSkinCode, updateSkinCode } from '@/api/management/mapline';
export default {
    name: 'DictionaryEdit',
    data() {
        return {
            dialogVisible: false,
            formModel: {
                id: '',
                code: '',
                name: '',
                origin: { x: 0, y: 0 },
                scaling: 1
            },
            isAdd:false,
            title:''
        };
    },
    computed: {
        form() {
            const form = {
                labelWidth: '100px',
                items: [
                    { prop: 'code', label: this.$t('system.code'), type: 'text', disabled: !this.isAdd },
                    { prop: 'name', label: this.$t('system.name'), type: 'text' },
                    { prop: 'origin', label: '坐标:', type: 'coordinate', children: [
                        { prop: 'origin.x', firstLevel: 'origin', secondLevel: 'x', label: 'x', type: 'number', labelWidth: '30px'},
                        { prop: 'origin.y', firstLevel: 'origin', secondLevel: 'y', label: 'y', type: 'number', labelWidth: '30px'}
                    ] },
                    { prop: 'scaling', label: '缩放比例:', type: 'number', min: 0.4, max: 8, step: 0.2 }
                ]
            };
            return form;
        },
        rules() {
            const crules = {
                code: [
                    { required: true, message: this.$t('rules.pleaseInputCode'), trigger: 'blur' }
                ],
                name: [
                    { required: true, message: this.$t('rules.pleaseInputName'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('rules.pleaseSelectStatus'), trigger: 'change' }
                ],
                'origin.x': [
                    { required: true, message: '请输入坐标x', trigger: 'blur' }
                ],
                'origin.y': [
                    { required: true, message: '请输入坐标y', trigger: 'blur' }
                ],
                scaling: [
                    { required: true, message: '请输入缩放比例', trigger: 'blur' }
                ]
            };
            return crules;
        }
    },
    methods: {
        show(row) {
            if (row && row.id) {
                this.formModel = {
                    id: row.id,
                    code: row.code,
                    name: row.name,
                    origin: row.origin,
                    scaling: row.scaling
                };
                this.isAdd = false;
                this.title = this.$t('system.editDictionary');
            } else {
                this.isAdd = true;
                this.title = this.$t('system.createDirectory');
            }
            this.dialogVisible = true;
        },
        doSave() {
            const self = this;
            this.$refs.dataform.validateForm(() => {
                if (this.isAdd) {
                    self.create();
                } else {
                    self.update();
                }
            });
        },
        create() {
            addSkinCode(this.formModel).then(response => {
                this.$message.success(this.$t('system.createSuccess'));
                this.handleClose();
                this.$emit('reloadTable');
            }).catch(error => {
                this.$message.error(`${this.$t('error.createDictionaryFailed')}:${error.message}`);
            });
        },
        update() {
            updateSkinCode(this.formModel).then(response => {
                this.$message.success(this.$t('system.updateSuccess'));
                this.handleClose();
                this.$emit('reloadTable');
            }).catch(error => {
                this.$message.error(`${this.$t('error.updateDictionaryFailed')}:${error.message}`);
            });
        },
        handleClose(done) {
            this.formModel = {
                id: '',
                code: '',
                name: '',
                origin: { x: 0, y: 0 },
                scaling: 1
            };
            this.$refs.dataform.resetForm();
            if (done) {
                done();
            } else {
                this.dialogVisible = false;
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>