提交

src/views/goaf/sensor/Model.vue

@@ -13,28 +13,28 @@
       </el-form-item>
       <el-form-item label="安装区域" required>
         <div class="safe-area">
-          <el-select v-model="formData.goafOrebelt" class="safe-area-item" filterable placeholder="矿带">
+          <el-select v-model="formData.goafOrebelt" class="safe-area-item" filterable placeholder="矿带" @change="changeArea(1)">
             <el-option :value="0" label="请选择矿带" disabled />
-            <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafOrebelt" :label="item.goafOrebelt" />
+            <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item.goafOrebelt" :label="item.goafOrebelt" />
           </el-select>
-          <el-select v-model="formData.goafOrebody" class="safe-area-item" filterable placeholder="矿体">
+          <el-select v-model="formData.goafOrebody" class="safe-area-item" filterable placeholder="矿体" @change="changeArea(2)">
             <el-option :value="0" label="请选择矿体" disabled />
-            <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
+            <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
           </el-select>
-          <el-select v-model="formData.goafOreheight" class="safe-area-item" filterable placeholder="中段">
+          <el-select v-model="formData.goafOreheight" class="safe-area-item" filterable placeholder="中段" @change="changeArea(3)">
             <el-option :value="0" label="请选择中段" disabled />
-            <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
+            <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
           </el-select>
-          <el-select v-model="formData.goafName" class="safe-area-item" filterable placeholder="采空区名称">
+          <el-select v-model="formData.goafId" class="safe-area-item" filterable placeholder="采空区名称" @change="changeArea(4)">
             <el-option :value="0" label="请选择采空区" disabled />
-            <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafName" :label="item.goafName" />
+            <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafId" :label="item.goafName" />
           </el-select>
         </div>
       </el-form-item>
       <el-form-item label="安装地点" required>
         <el-input v-model="formData.address" placeholder="请输入安装地点" style="width:260px" />
       </el-form-item>
-      <el-form-item label="传感器">
+      <el-form-item label="传感器类型">
         <el-select v-model="formData.sensorTypeId" style="width:260px">
           <el-option v-for="item in sensors" :key="item.id" :value="item.id" :label="item.name" />
         </el-select>
@@ -99,6 +99,7 @@ export default {
         'goafOrebelt': 0,
         'goafOrebody': 0,
         'goafOreheight': 0,
+        'goafId': 0,
         'goafName': '',
         'sensorTypeId': '',
         'sensorType': '',
@@ -114,7 +115,11 @@ export default {
       viewData: {},
       actionType: '',
       treeData: [],
-      userList: []
+      userList: [],
+      goafOrebelts: [],
+      goafOrebodys: [],
+      goafOreheights: [],
+      goafNames: []
     }
   },
   mounted() {
@@ -127,6 +132,7 @@ export default {
       })
       getGoafBaseInfo().then((res) => {
         this.goaf = res.data
+        this.goafOrebelts = this.unique(res.data, 'goafOrebelt')
       })
       getGroupByList().then((resp) => {
         const { code, data } = resp
@@ -156,6 +162,41 @@ export default {
         this.userList = data
       })
     },
+    changeArea(type) {
+      const goafOrebelts = this.deeepClone(this.goafOrebelts)
+      let goafOrebodys = this.deeepClone(this.goafOrebodys)
+      let goafOreheights = this.deeepClone(this.goafOreheights)
+      let goafNames = this.deeepClone(this.goafNames)
+      if (type === 1) {
+        goafOrebodys = goafOrebelts.filter(item => item.goafOrebelt === this.formData.goafOrebelt)
+        goafOrebodys = this.unique(goafOrebodys, 'goafOrebelt')
+        this.goafOrebodys = goafOrebodys
+        this.goafOreheights = []
+        this.goafNames = []
+        this.formData.goafOrebody = ''
+        this.formData.goafOreheight = ''
+        this.formData.goafId = ''
+      } else if (type === 2) {
+        goafOreheights = goafOrebodys.filter(item => item.goafOrebody === this.formData.goafOrebody)
+        goafOreheights = this.unique(goafOreheights, 'goafOreheight')
+        this.goafOreheights = goafOreheights
+        this.goafNames = []
+        this.formData.goafOreheights = ''
+        this.formData.goafId = ''
+      } else if (type === 3) {
+        goafNames = goafOreheights.filter(item => item.goafOreheight === this.formData.goafOreheight)
+        goafNames = this.unique(goafNames, 'goafName')
+        this.goafNames = goafNames
+        this.formData.goafId = ''
+      } else {
+        for (let i = 0; i < goafNames.length; i++) {
+          if (this.formData.goafId === goafNames[i].goafId) {
+            this.formData.goafName = goafNames[i].goafName
+          }
+        }
+      }
+      this.$forceUpdate()
+    },
     // Show Add Dialog
     showAddModel() {
       this.resetFormData()
@@ -176,10 +217,17 @@ export default {
     // Reset Form Data
     resetFormData() {
       this.formData = {
+        'goafOrebelt': 0,
+        'goafOrebody': 0,
+        'goafOreheight': 0,
+        'goafId': 0,
+        'goafName': '',
         'sensorTypeId': '',
-        'ocId': '',
         'sensorType': '',
-        'sensorTypeName': ''
+        'sensorTypeName': '',
+        'address': '',
+        'executeAccountId': '',
+        'accountId': ''
       }
     },
     // 选择执行人员
@@ -192,6 +240,10 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
+          if (this.formData.goafId) {
+            this.$message.error('请选择采空区！')
+            return
+          }
           this.formData.sensorTypeName = this.sensors.filter(item => item.id === this.formData.sensorTypeId)[0].name
           switch (this.actionType) {
             case 'ADD':
@@ -235,6 +287,13 @@ export default {
     },
     resetFormField(formName) {
       this.$refs[formName].resetFields()
+    },
+    unique(arr = [], name = 'name') {
+      const res = new Map()
+      return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
+    },
+    deeepClone(params) {
+      return JSON.parse(JSON.stringify(params))
     }
   }
 }