psl添加关联屏蔽门属性

src/views/system/deviceManage/editConfigGateway.vue

@@ -1,6 +1,48 @@
 <template>
   <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" 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="form" :model="formModel" label-width="220px" :rules="topRules" :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="stationCode" placeholder="请选择" size="small" style="width: 180px" @change="stationCodeChange">
+          <el-option
+            v-for="item in stationList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联站台:" prop="standCode">
+        <el-select v-model="standCode" placeholder="请选择" size="small" style="width: 180px" @change="standCodeChange">
+          <el-option
+            v-for="item in standList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联屏蔽门:" prop="psdCode">
+        <el-select v-model="formModel.psdCode" placeholder="请选择" style="width: 180px" size="small">
+          <el-option
+            v-for="item in psdList"
+            :key="item.code"
+            :label="item.code"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
     <el-row :gutter="20">
       <el-col :span="12">
         <el-card class="box-card">
@@ -32,6 +74,7 @@
 
 <script>
 import { getDeviceDetail, setPsdConfig, setSignalConfig, setSwitchConfig, setPslConfig } from '@/api/project';
+import { getAllMapOnline, getStationListNeedAttendant, getPsdListByStandCode, getStandListByStationCode } from '@/api/jmap/map';
 
 export default {
     name: 'EditConfigGateway',
@@ -103,7 +146,14 @@ export default {
                 {label: '写互锁解除指示灯位', value: 'wjcd'},
                 {label: '写IBP盘操作指示灯位', value: 'wibpczd'},
                 {label: '写PST操作指示灯位', value: 'wpstczd'}
-            ]
+            ],
+            mapId: '',
+            mapList: [],
+            stationCode: '',
+            stationList: [],
+            standList: [],
+            standCode: '',
+            psdList: []
         };
     },
     computed: {
@@ -123,6 +173,9 @@ export default {
                 ],
                 quantity: [
                     { required: true, message: '请填写位数量', trigger: 'blur'}
+                ],
+                psdCode: [
+                    { required: true, message: '请选择关联屏蔽门', trigger: 'change'}
                 ]
             };
         },
@@ -451,6 +504,17 @@ export default {
             }).catch(()=> {
                 this.$message.error('获取项目设备详情失败！');
             });
+            if (row.type === 'PSL') {
+                getAllMapOnline().then(resp => {
+                    if (resp.data && resp.data.length) {
+                        this.mapList = resp.data;
+                        this.mapId = this.mapList[0].id;
+                        this.mapIdChange(this.mapList[0].id);
+                    }
+                }).catch(() => {
+                    this.$message.error('获取地图列表失败');
+                });
+            }
         },
         doShow(row) {
             this.initData(row);
@@ -460,10 +524,16 @@ export default {
         },
         doSave() {
             const self = this;
+            let flag = true;
+            if (this.$refs.form) {
+                this.$refs.form.validate((valid) => {
+                    flag = valid;
+                });
+            }
             this.$refs.datatop.validateForm(() => {
                 self.$refs.dataleft.validateForm(()=> {
                     self.$refs.dataright.validateForm(()=> {
-                        this.setDeviceConfigFunction(this.data.id, this.formModel).then(response => {
+                        flag && self.setDeviceConfigFunction(this.data.id, this.formModel).then(response => {
                             self.$message.success('设置设备网关映射配置成功');
                             self.handleClose();
                             self.$emit('reloadTable');
@@ -481,10 +551,54 @@ export default {
             this.leftRules = {};
             this.rightRules = {};
             this.data = {};
+            this.mapList = [];
+            this.stationList = [];
+            this.standList = [];
+            this.psdList = [];
+            this.mapId = '';
+            this.stationCode = '';
+            this.standCode = '';
             this.dialogVisible = false;
             this.$refs.datatop.resetForm();
             this.$refs.dataleft.resetForm();
             this.$refs.dataright.resetForm();
+            this.$refs.form && this.$refs.form.resetFields();
+        },
+        mapIdChange(mapId) {
+            this.stationList = [];
+            if (mapId) {
+                getStationListNeedAttendant(mapId).then(resp => {
+                    if (resp.data && resp.data.length) {
+                        this.stationList = resp.data;
+                    }
+                }).catch(() => {
+                    this.$message.error('获取车站列表失败');
+                });
+            }
+        },
+        stationCodeChange(stationCode) {
+            this.standList = [];
+            if (stationCode) {
+                getStandListByStationCode(this.mapId, stationCode).then(resp => {
+                    if (resp.data && resp.data.length) {
+                        this.standList = resp.data;
+                    }
+                }).catch(() => {
+                    this.$message.error('获取站台列表失败');
+                });
+            }
+        },
+        standCodeChange(standCode) {
+            this.psdList = [];
+            if (standCode) {
+                getPsdListByStandCode(this.mapId, standCode).then(resp => {
+                    if (resp.data && resp.data.length) {
+                        this.psdList = resp.data;
+                    }
+                }).catch(() => {
+                    this.$message.error('获取屏蔽门列表失败');
+                });
+            }
         }
     }
 };