设备点位优化

src/views/module_tpm/tag/modules/TagForm.vue

@@ -33,12 +33,34 @@
           </a-col>
           <a-col :span="12">
             <a-form-model-item label="能源分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="energytypeid">
-              <j-search-select-tag v-model="model.energytypeid" placeholder="请选择能源分类" dict="base_energy_type,name,id"/>
+              <!-- <j-search-select-tag v-model="model.energytypeid" placeholder="请选择能源分类" dict="base_energy_type,name,id"/> -->
+              <a-select
+                v-model="model.energytypeid"
+                placeholder="请选择能源分类"
+                show-search
+                @change="handleChange"
+                :filterOption="filterOption"
+                :options="energytypeOptions">
+                </a-select>
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
-            <a-form-model-item label="能源分项" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="energyitemid">
-              <j-search-select-tag v-model="model.energyitemid" placeholder="请选择能源分项" dict="base_energy_item,energyitemname,id"/>
+            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="energyitemid">
+              <span slot="label">
+                能耗分项&nbsp;
+                <a-tooltip title="请先选择能源分类">
+                  <a-icon type="exclamation-circle" theme="filled" />
+                </a-tooltip>
+              </span>
+              <!-- <j-search-select-tag v-model="model.energyitemid" placeholder="请选择能耗分项" dict="base_energy_item,energyitemname,id"/> -->
+              <a-select
+                v-model="model.energyitemid"
+                placeholder="请选择能耗分项"
+                show-search
+                @change="handleChange2"
+                :filterOption="filterOption"
+                :options="energyitemOptions">
+                </a-select>
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
@@ -107,6 +129,7 @@
     data () {
       return {
         model:{
+          energyitemid: ''
          },
         labelCol: {
           xs: { span: 24 },
@@ -124,15 +147,24 @@
           tagname: [
             { required: true, message: '请选择点位!'},
           ],
+          tagtype: [
+            { required: true, message: '请选择点位类型!'},
+          ],
         },
         url: {
           add: "/tpmTag/tpmTag/add",
           edit: "/tpmTag/tpmTag/edit",
           queryById: "/tpmTag/tpmTag/queryById",
-          getPoint: "/tpmIoserverTag/tpmIoserverTag/tagList"
+          getPoint: "/tpmIoserverTag/tpmIoserverTag/tagList",
+          getEnergytype: "/energyType/energyType/xialaList",
+          getEnergyitem: "/energyItem/energyItem/xialaList",
         },
         // 点位数据
-        pointOptions: []
+        pointOptions: [],
+        // 能源分类
+        energytypeOptions: [],
+        // 能耗分项
+        energyitemOptions: [],
       }
     },
     computed: {
@@ -145,13 +177,18 @@
       this.modelDefault = JSON.parse(JSON.stringify(this.model));
       // 获取点位下拉列表
       this.getPointOptions()
+      // 获取能源分类
+      this.getEnergytypeOptions()
     },
     methods: {
       add () {
-        this.edit(this.modelDefault);
+        // this.edit(this.modelDefault);
+        this.model = {}
+        this.visible = true;
       },
       edit (record) {
         this.model = Object.assign({}, record);
+        this.getEnergyitemOptions()
         this.visible = true;
       },
       submitForm () {
@@ -185,7 +222,6 @@
       },
       getPointOptions() {
         getAction(this.url.getPoint).then((res) => {
-          console.log(1111,res.result)
           this.pointOptions = res.result.map(item => {
             return {
               // value: item.id,
@@ -194,7 +230,48 @@
             }
           })
         })
-      }
+      },
+      getEnergytypeOptions(){
+        getAction(this.url.getEnergytype).then((res) => {
+          console.log(111,res.result)
+          this.energytypeOptions = res.result.map(item => {
+            return {
+              value: item.id,
+              label: item.name
+            }
+          })
+        })
+      },
+      getEnergyitemOptions(){
+        getAction(this.url.getEnergyitem,{energytypeid:this.model.energytypeid}).then((res) => {
+          this.energyitemOptions = res.result.map(item => {
+            return {
+              value: item.id,
+              label: item.energyitemname
+            }
+          })
+        })
+      },
+      handleChange(value){
+        console.log(22,value)
+        this.model.energyitemid = ''
+        getAction(this.url.getEnergyitem,{energytypeid:value}).then((res) => {
+          console.log(333,res.result)
+          this.energyitemOptions = res.result.map(item => {
+            return {
+              value: item.id,
+              label: item.energyitemname
+            }
+          })
+        })
+      },
+      handleChange2(){
+        // 解决选不中问题
+        this.model = {...this.model}
+      },
+      filterOption (value, option) {
+        return option.componentOptions.children[0].text.indexOf(value) >= 0
+      },
     }
   }
 </script>

src/views/module_tpm/tag/modulesPL/TagFormPL1.vue

@@ -81,26 +81,33 @@
                                 </template>
                                 <template slot="energytypeid" slot-scope="text, record,index">
                                     <a-form-model-item :prop="'data.'+index+'.energytypeid'" :rules="validatorRules.energytypeid" style="margin-bottom: 0px;">
-                                        <j-search-select-tag v-model="record.energytypeid" placeholder="请选择能源分类" dict="base_energy_type,name,id"/>
-                                        <!-- <a-select
+                                        <!-- <j-search-select-tag v-model="record.energytypeid" placeholder="请选择能源分类" dict="base_energy_type,name,id"/> -->
+                                        <a-select
                                         v-model="record.energytypeid"
                                         showSearch
                                         :filterOption="filterOption"
+                                        @change="handleChange"
                                         placeholder="请选择能源分类"
-                                        :options="energyTypeOptions">
-                                        </a-select> -->
+                                        :options="energytypeOptions">
+                                        </a-select>
                                     </a-form-model-item>
                                 </template>
                                 <template slot="energyitemid" slot-scope="text, record,index">
                                     <a-form-model-item :prop="'data.'+index+'.energyitemid'" :rules="validatorRules.energyitemid" style="margin-bottom: 0px;">
-                                        <j-search-select-tag v-model="record.energyitemid" placeholder="请选择能源分项" dict="base_energy_item,energyitemname,id"/>
-                                        <!-- <a-select
-                                        v-model="record.energyitemid"
-                                        showSearch
-                                        :filterOption="filterOption"
-                                        placeholder="请选择能源分项"
-                                        :options="energyItemOptions">
-                                        </a-select> -->
+                                        <!-- <j-search-select-tag v-model="record.energyitemid" placeholder="请选择能耗分项" dict="base_energy_item,energyitemname,id"/> -->
+                                        <a-tooltip>
+                                            <template slot="title">
+                                            请先选择能源分类
+                                            </template>
+                                            <a-select
+                                            v-model="record.energyitemid"
+                                            showSearch
+                                            :filterOption="filterOption"
+                                            placeholder="请选择能耗分项"
+                                            @change="handleChange2"
+                                            :options="energyitemOptions">
+                                            </a-select>
+                                        </a-tooltip>
                                     </a-form-model-item>
                                 </template>
                                 <template slot="max" slot-scope="text, record,index">
@@ -204,7 +211,7 @@ export default {
                 scopedSlots: { customRender: 'energytypeid' }
                 },
                 {
-                title: '能源分项',
+                title: '能耗分项',
                 dataIndex: 'energyitemid',
                 key: 'energyitemid',
                 align: 'center',
@@ -274,7 +281,9 @@ export default {
             selectionRows: [],
             url: {
                 add: "/tpmTag/tpmTag/saveBatch",
-                getPoint: "/tpmIoserverTag/tpmIoserverTag/tagList"
+                getPoint: "/tpmIoserverTag/tpmIoserverTag/tagList",
+                getEnergytype: "/energyType/energyType/xialaList",
+                getEnergyitem: "/energyItem/energyItem/xialaList",
             },
             // 点位数据
             dataPoint: [],
@@ -294,19 +303,26 @@ export default {
                 equipmentid: [
                     { required: true, message: '请选择设备!'},
                 ],
+                tagtype: [
+                    { required: true, message: '请选择点位类型!'},
+                ],
             },
             dictCode: 'tpm_tag_type',
             dictCode2: 'base_energy_type',
             dictCode3: 'base_energy_item',
             tagTypeOptions: [],
-            energyTypeOptions: [],
-            energyItemOptions: []
-        }
+            // 能源分类
+            energytypeOptions: [],
+            // 能耗分项
+            energyitemOptions: [],
+            }
     },
     created () {
       // 获取点位数据
       this.getPointOptions()
       this.initDictData()
+      // 获取能源分类
+      this.getEnergytypeOptions()
     },
     methods: {
         initDictData() {
@@ -361,6 +377,44 @@ export default {
                 })
             })
         },
+        getEnergytypeOptions(){
+            getAction(this.url.getEnergytype).then((res) => {
+            console.log(111,res.result)
+            this.energytypeOptions = res.result.map(item => {
+                return {
+                value: item.id,
+                label: item.name
+                }
+            })
+            })
+        },
+        getEnergyitemOptions(){
+            getAction(this.url.getEnergyitem,{energytypeid:this.model.energytypeid}).then((res) => {
+            this.energyitemOptions = res.result.map(item => {
+                return {
+                value: item.id,
+                label: item.energyitemname
+                }
+            })
+            })
+        },
+        handleChange(value){
+            console.log(22,value)
+            this.model.energyitemid = ''
+            getAction(this.url.getEnergyitem,{energytypeid:value}).then((res) => {
+            console.log(333,res.result)
+            this.energyitemOptions = res.result.map(item => {
+                return {
+                value: item.id,
+                label: item.energyitemname
+                }
+            })
+            })
+        },
+        handleChange2(){
+            // 解决选不中问题
+            this.model = {...this.model}
+        },
         onSelectChange(selectedRowKeys, selectionRows) {
             console.log(selectedRowKeys, selectionRows)
             this.selectedRowKeys = selectedRowKeys;