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-item label="现地工作站:" prop="lwCode" size="small">
        <el-select v-model="formIbp.lwCode" placeholder="请选择" size="small">
          <el-option
            v-for="item in lwList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          />
        </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="关联地图:" prop="mapId">
        <el-select v-model="formLw.mapId" placeholder="请选择" size="small" @change="mapIdChange">
          <el-option
            v-for="item in mapList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关联车站:" prop="stationCode">
        <el-select v-model="formLw.stationCode" placeholder="请选择" size="small">
          <el-option
            v-for="item in stationList"
            :key="item.code"
            :label="item.name"
            :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';
import { getAllMapOnline, getStationListNeedAttendant } from '@/api/jmap/map';

export default {
    name: 'EditConfig',
    props: {
        // type: {
        //     type: String,
        //     required: true
        // }
    },
    data() {
        return {
            dialogVisible: false,
            data: {},
            mapList: [],
            lwList: [],
            formIbp: {
                part: '',
                lwCode: ''
            },
            formLw: {
                mapId: '',
                stationCode: ''
            },
            rulesIbp: {
                part: [
                    { required: true, message: '请选择显示位置', trigger: 'change' }
                ],
                lwCode: [
                    { required: true, message: '请选择归属车站', trigger: 'change'}
                ]
            },
            rulesLw: {
                stationCode: [
                    { required: true, message: '请选择关联车站', trigger: 'change'}
                ]
            },
            partList: [{label: '左', value: 'LEFT'}, {label: '右', value: 'RIGHT'}, {label: '全部', value: 'WHOLE'}],
            stationList: []
        };
    },
    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);
                }
            }).catch(()=> {
                this.$message.error('获取项目设备详情失败！');
            });
        },
        doShow(row) {
            this.initData(row);
            this.dialogVisible = true;
            this.data = row;
            this.mapList = [];
            this.stationList = [];
            if (this.data.type === 'IBP') {
                getDevicesByType('LW').then(res => {
                    if (res.data && res.data.length) {
                        this.lwList = res.data;
                    }
                }).catch(() => {
                    this.$message.error('获取设备列表失败！');
                });
            } else {
                getAllMapOnline().then(res => {
                    if (res.data && res.data.length) {
                        this.mapList = res.data;
                        this.formLw.mapId = this.mapList[0].id;
                        this.formIbp.mapId = this.mapList[0].id;
                        this.mapIdChange(this.mapList[0].id);
                    }
                }).catch(() => {
                    this.$message.error('获取地图列表失败！');
                });
            }

        },
        doSave() {
            const self = this;
            if (this.data.type === 'IBP') {
                this.$refs.formIbp.validate(() => {
                    setIbpConfig(this.data.id, this.formIbp).then(response => {
                        self.$message.success('设置IBP设备配置成功');
                        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() {
            this.dialogVisible = false;
            this.data = {};
            this.$refs.formIbp.resetFields();
            this.$refs.formLw.resetFields();
        },
        mapIdChange(mapId) {
            if (mapId) {
                getStationListNeedAttendant(mapId).then(resp => {
                    if (resp.data && resp.data.length) {
                        this.stationList = resp.data;
                    }
                }).catch(() => {
                    this.$message.error('获取车站列表失败');
                });
            } else {
                this.stationList = [];
            }
        }
    }
};
</script>