rt-sim-training-client/src/views/system/deviceManage/add.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="handleClose">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createDevice, deviceIsExist} from '@/api/project';
import ConstConfig from '@/scripts/ConstConfig';
export default {
    name: 'DeviceAdd',
    props: {
        projectCode: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            formModel: {
                code: '',
                type: '',
                projectCode: ''
            },
            LessonList: [],
            UserList: [],
            UserLoading: false,
            deviceTypeList:ConstConfig.ConstSelect.projectDeviceTypeList,
            projectList: [{label:'西铁院', value: 'XTY'}, {label: '贵州装备', value:'GZB'}],
            gatewayList: []
        };
    },
    computed: {
        form() {
            const form = {
                labelWidth: '120px',
                items: [
                    { prop: 'code', label: this.$t('system.deviceCode'), type: 'text', required: true, placeholder: this.$t('rules.enterDeviceCode') },
                    { prop: 'type', label: this.$t('system.deviceType1'), type: 'select', required: true, options: this.deviceTypeList, placeholder: this.$t('rules.selectDeviceType') },
                    { prop: 'projectCode', label: this.$t('system.belongProject'), type: 'select', required: true, options: this.projectList, placeholder: this.$t('rules.selectBelongProject'), disabled: true}
                ]
            };
            return form;
        },
        rules() {
            const crules = {
                code: [
                    { required: true, message: this.$t('rules.enterDeviceCode'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('rules.selectDeviceType'), trigger: 'change' }
                ],
                projectCode: [
                    { required: true, message: this.$t('rules.selectBelongProject'), trigger: 'change' }
                ]
            };
            return crules;
        },
        title() {
            return this.$t('system.createProjectDevice');
        }
    },
    mounted() {
    },
    methods: {
        show(data) {
            this.dialogVisible = true;
            this.formModel.projectCode = this.projectCode;
        },
        doSave() {
            const self = this;
            this.$refs.dataform.validateForm(() => {
                const params = {
                    code: this.formModel.code,
                    type: this.formModel.type,
                    projectCode: this.formModel.projectCode
                };
                deviceIsExist(params.code).then(response => {
                    if (!response.data) {
                        createDevice(params).then(response => {
                            self.$message.success(this.$t('tip.createProjectDeviceSuccessfully'));
                            self.handleClose();
                            self.$emit('reloadTable');
                        }).catch(error => {
                            self.$message.error(this.$t('error.addFailed') + error.message);
                        });
                    } else {
                        self.$message.error('项目设备编号已存在！');
                    }
                });

            });
        },
        handleClose(done) {
            this.formModel = {
                code: '',
                type: '',
                projectCode: ''
            };
            this.$refs.dataform.resetForm();
            this.dialogVisible = false;
        }
    }
};
</script>