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

<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" top="10vh" width="60%" :before-close="handleClose" center :close-on-click-modal="false">
    <!--<data-form ref="dataTop" :form="formTop" :inline="inline" :form-model="formModel" :rules="topRules" />-->
    <el-form ref="formStation" :model="formModel" label-width="220px" :rules="rulesStation" :inline="inline">
      <el-form-item label="关联地图:" prop="mapId">
        <el-select v-model="mapId" placeholder="请选择" size="small" style="width: 180px" @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="formModel.stationCode" placeholder="请选择" style="width: 180px" 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>
    <el-input v-model="jsonConfig" autosize :readonly="true" type="textarea" />
    <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} from '@/api/project';
import { deepAssign } from '@/utils/index';
import { getAllMapOnline, getStationListNeedAttendant } from '@/api/jmap/map';

export default {
    name: 'EditConfigIbp',
    data() {
        return {
            title: '编辑IBP盘配置',
            activeNames: [],
            checkCount: 0,
            data: null,
            jsonConfig: '',
            formModel: {
                afczjConfig: {},
                dftConfig: {},
                hjsbjkConfig: {
                    pfConfig: {},
                    shfConfig: {}
                },
                mjConfig: {},
                pbmConfig: {},
                sdtfConfig: {},
                xhConfig: {},
                xhsbConfig: {}
            },
            topRules: {
                addr: [
                    { required: true, message: '请填写网关位地址', trigger: 'blur' }
                ],
                quantity: [
                    { required: true, message: '请填写位数量', trigger: 'blur'}
                ]
            },
            rulesStation: {
                stationCode: [
                    { required: true, message: '请选择关联设备', trigger: 'change' }
                ]
            },
            dialogVisible: false,
            inline: true,
            mapId: '',
            mapList: [],
            stationList: []
        };
    },
    computed: {
    },
    watch: {
    },
    mounted() {
    },
    methods: {
        doShow(row) {
            this.initData(row);
            this.data = row;
            getAllMapOnline().then(res => {
                if (res.data && res.data.length) {
                    this.mapList = res.data;
                    this.mapId = this.mapList[0].id;
                    this.mapIdChange(this.mapList[0].id);
                }
            }).catch(() => {
                this.$message.error('获取地图列表失败！');
            });
            this.dialogVisible = true;
        },
        initData(row) {
            getDeviceDetail(row.id).then(resp => {
                if (resp.data.config) {
                    const model = JSON.parse(resp.data.config) || {};
                    this.jsonConfig = JSON.stringify(JSON.parse(resp.data.config), null, 4);
                    this.formModel = model;
                }
            }).catch(()=> {
                this.$message.error('获取项目设备详情失败！');
            });
        },
        doSave() {
            this.checkCount = 0;
            this.$refs.formStation.validate((valid) => {
                const model = deepAssign({}, this.formModel);
                setIbpConfig(this.data.id, model).then(resp => {
                    this.$message.success('设置IBP网关映射配置成功');
                    this.handleClose();
                    this.$emit('reloadTable');
                }).catch(error => {
                    this.$message.error(this.$t('tip.modifyTheFailure') + error.message);
                });
            });
        },
        handleClose() {
            this.formModel = {};
            this.$refs.formStation.resetFields();
            this.data = null;
            this.activeNames = [];
            this.dialogVisible = false;
        },
        mapIdChange(mapId) {
            this.stationList = [];
            if (mapId) {
                getStationListNeedAttendant(mapId).then(resp => {
                    if (resp.data && resp.data.length) {
                        this.stationList = resp.data;
                    }
                }).catch(() => {
                    this.$message.error('获取车站列表失败');
                });
            }
        }
    }
};
</script>

<style scoped>
	/deep/
	.el-dialog--center .el-dialog__body {
		padding: 25px 25px 10px;
	}
</style>