rt-sim-training-client/src/views/system/deviceManage/editConfigScreen.vue

<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" center :close-on-click-modal="false">
    <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
      <el-form-item label="教员机:" prop="deviceCode">
        <el-select v-model="formData.deviceCode" placeholder="请选择" size="small">
          <el-option
            v-for="item in deviceList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="data.type === 'LSW'" label="屏目配置:" prop="quadrant" size="small">
        <el-select v-model="formData.quadrant" placeholder="请选择" size="small">
          <el-option
            v-for="item in screenList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <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 { getDevicesByType, getDeviceDetail, setLswConfig, setCctvConfig, setVrPsdConfig } from '@/api/project';

export default {
    name: 'EditConfig',
    props: {
        // type: {
        //     type: String,
        //     required: true
        // }
    },
    data() {
        return {
            dialogVisible: false,
            data: {},
            screenList: [
                { label: '第一屏', value: 1 },
                { label: '第二屏', value: 2 },
                { label: '第三屏', value: 3 },
                { label: '第四屏', value: 4 }
            ],
            deviceList: [],
            formData: {
                quadrant: '',
                deviceCode: ''
            },
            rules: {
                quadrant: [
                    { required: true, message: '请选择显示屏幕', trigger: 'change' }
                ],
                deviceCode: [
                    { required: true, message: '请选择教员机', trigger: 'change'}
                ]
            }
        };
    },
    computed: {
        title() {
            return '编辑设备配置';
        }
    },
    methods: {
        initData(row) {
            getDevicesByType('IM').then(resp => {
                this.deviceList = resp.data;
            }).catch(()=> {
                this.$message.error('获取项目设备详情失败！');
            });
        },
        doShow(row) {
            this.initData(row);
            this.dialogVisible = true;
            this.data = row;
            getDeviceDetail(this.data.id).then(res => {
                const data = res.data.config ? JSON.parse(res.data.config) : {};
                this.formData = {
                    quadrant: data.quadrant,
                    deviceCode: data.deviceCode
                };
            });
        },
        doSave() {
            const self = this;
            if (this.data.type == 'LSW') {
                this.$refs.form.validate(() => {
                    const param = {
                        deviceCode: this.formData.deviceCode,
                        quadrant: this.formData.quadrant
                    };
                    setLswConfig(this.data.id, param).then(response => {
                        self.$message.success('设置大屏工作站配置成功');
                        self.handleClose();
                        self.$emit('reloadTable');
                    }).catch(error => {
                        self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
                    });
                });
            } else if (this.data.type == 'CCTV') {
                this.$refs.form.validate(() => {
                    const param = {
                        deviceCode: this.formData.deviceCode
                    };
                    setCctvConfig(this.data.id, param).then(response => {
                        self.$message.success('设置CCTV工作站配置成功');
                        self.handleClose();
                        self.$emit('reloadTable');
                    }).catch(error => {
                        self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
                    });
                });
            } else if (this.data.type == 'VR_PSD') {
                this.$refs.form.validate(() => {
                    const param = {
                        deviceCode: this.formData.deviceCode
                    };
                    setVrPsdConfig(this.data.id, param).then(response => {
                        self.$message.success('设置虚拟屏蔽门工作站配置成功');
                        self.handleClose();
                        self.$emit('reloadTable');
                    }).catch(error => {
                        self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
                    });
                });
            }
        },
        handleClose() {
            this.dialogVisible = false;
            this.data = {};
            this.$refs.form.resetFields();
        }
    }
};
</script>