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

<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" center :close-on-click-modal="false">
    <el-form v-show="data.type === 'IBP'" ref="formIbp" :model="formIbp" label-width="100px" :rules="rulesIbp">
      <el-form-item label="显示位置:" prop="part">
        <el-select v-model="formIbp.part" placeholder="请选择" size="small">
          <el-option
            v-for="item in partList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form v-show="data.type === 'LW'" ref="formLw" :model="formLw" label-width="100px" :rules="rulesLw">
      <el-form-item label="下辖IBP:" prop="ibpCodeList">
        <el-select v-model="formLw.ibpCodeList" placeholder="请选择" multiple size="small">
          <el-option
            v-for="item in ibpList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          />
        </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 { getDeviceDetail, setIbpConfig, setLwConfig, getDevicesByType } from '@/api/project';

export default {
    name: 'EditConfig',
    props: {
        // type: {
        //     type: String,
        //     required: true
        // }
    },
    data() {
        return {
            dialogVisible: false,
            data: {},
            ibpList: [],
            formIbp: {
                part: ''
            },
            formLw: {
                ibpCodeList: []
            },
            rulesIbp: {
                part: [
                    { required: true, message: '请选择显示位置', trigger: 'change' }
                ]
            },
            rulesLw: {
                ibpCodeList: [
                    { required: true, message: '请选择下辖ibp设备！', trigger: 'change'}
                ]
            },
            partList: [{label: '左', value: 'LEFT'}, {label: '右', value: 'RIGHT'}, {label: '全部', value: 'WHOLE'}]
        };
    },
    computed: {
        title() {
            return '编辑设备配置';
        }
    },
    methods: {
        initData(row) {
            getDeviceDetail(row.id).then(resp => {
                if (resp.data.config && resp.data.type === 'IBP') {
                    this.formIbp = JSON.parse(resp.data.config);
                } else if (resp.data.config && resp.data.type === 'LW') {
                    this.formLw = JSON.parse(resp.data.config);
                }
                console.log(this.formIbp, this.formLw);
            }).catch(()=> {
                this.$message.error('获取项目设备详情失败！');
            });
        },
        doShow(row) {
            this.initData(row);
            this.dialogVisible = true;
            this.data = row;
            if (row.type === 'LW') {
                getDevicesByType('IBP').then(res => {
                    if (res.data && res.data.length) {
                        this.ibpList = res.data;
                    }
                });
            }
        },
        doSave() {
            const self = this;
            console.log(this.data.type);
            if (this.data.type === 'IBP') {
                this.$refs.formIbp.validate(() => {
                    setIbpConfig(this.data.id, this.formIbp).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 === 'LW') {
                this.$refs.formLw.validate(() => {
                    setLwConfig(this.data.id, this.formLw).then(response => {
                        self.$message.success('设置设备网关映射配置成功');
                        self.handleClose();
                        self.$emit('reloadTable');
                    }).catch(error => {
                        self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
                    });
                });
            }
        },
        handleClose(done) {
            this.dialogVisible = false;
            this.data = {};
        }
    }
};
</script>