Bladeren bron

设备搜索优化

wyh 1 jaar geleden
bovenliggende
commit
11c4db7f3f

+ 70 - 3
src/views/module_tpm/equipment/EquipmentList.vue

@@ -4,9 +4,31 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-col :xl="10" :lg="7" :md="8" :sm="24">
             <a-form-item label="设备名称">
-              <a-input placeholder="请输入设备名称" v-model="queryParam.equipmentname"></a-input>
+              <!-- <a-input placeholder="请输入设备名称" v-model="queryParam.equipmentname"></a-input> -->
+              <a-select
+              v-model="queryParam.id"
+              placeholder="请输入设备名称或设备编号"
+              show-search
+              :filterOption="filterOptions"
+              @search="searchDevice"
+              allowClear>
+              <a-select-option v-for="(item, index) in deviceOptions" :key="index" :value="item.id" :label="item.equipmentname">
+                <!-- <div style="display: flex; width: 100%;"> -->
+                  <!-- 换行 -->
+                  <!-- <div style="width: 72%; overflow: hidden;white-space: normal; margin-right: 3%;">{{item.equipmentname}}</div> -->
+                  <!-- <div style="width: 72%; overflow: hidden;text-overflow: ellipsis;">{{item.equipmentname}}</div>
+                  <div style="width: 20%; text-align: right; display: flex; align-items: center;">{{ item.equipmentcode }}</div>
+                </div> -->
+                <!-- <a-row>
+                  <a-col :span="12">{{item.equipmentname}}</a-col>
+                  <a-col :span="12" style="text-align: right;">{{ item.equipmentcode }}</a-col>
+                </a-row> -->
+                <span>{{item.equipmentname}}</span>
+                <span style="position: absolute;right: 2%;">{{ item.equipmentcode }}</span>
+              </a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
           <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -157,6 +179,7 @@
   import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
   import EquipmentModal from './modules/EquipmentModal.vue'
   import EquipmentDetail from './modulesDetail/EquipmentDetail.vue'
+  import { httpAction, getAction } from '@/api/manage'
 
   export default {
     name: 'EquipmentList',
@@ -284,11 +307,14 @@
 
         },
         dictOptions:{},
+        deviceOptions: [],
+        deviceOptionsAll: [],
         superFieldList:[],
       }
     },
     created() {
-    this.getSuperFieldList();
+      this.getSuperFieldList();
+      this.getDeviceOption();
     },
     computed: {
       importExcelUrl: function(){
@@ -296,6 +322,47 @@
       },
     },
     methods: {
+      // 获取设备下拉列表
+      getDeviceOption(){
+        getAction(`/tpmEquipment/tpmEquipment/selectEquipmentList`).then(res=>{
+          console.log(111,res.result)
+          this.deviceOptions = res.result.map((res) => {
+            return {
+              id: res.id,
+              equipmentname: res.equipmentname,
+              equipmentcode: res.equipmentcode,
+            }
+          })
+          // 存一个完整的设备表
+          this.deviceOptionsAll = this.deviceOptions
+          console.log(7878,this.deviceOptionsAll)
+        })
+      },
+      // 筛选设备
+      searchDevice(value) {
+        console.log(1212,value,value.trim().length)
+        // 若输入的值删除,则重新赋完整的设备列表
+        if (value.trim().length === 0) {
+          this.deviceOptions = this.deviceOptionsAll
+        }
+        // 通过判断字符串中是数字还是文字进而判断是通过设备名筛选还是设备编号筛选
+        let panDuan = isNaN(parseFloat(value))
+        if (!panDuan) {
+          // 数字
+          console.log(777)
+          let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentcode.includes(value));
+          this.deviceOptions = filteredArray
+        } else {
+          console.log(888)
+          let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentname.includes(value));
+          this.deviceOptions = filteredArray
+        }
+        console.log(999,this.deviceOptions)
+      },
+      // 解决筛选后option不回显问题
+      filterOptions(input, option) {                    
+        return this.deviceOptions
+      },
       getDataList(){
         console.log(111,this.selectData)
         this.queryParam.equipmenttreeid = this.selectData.equipmenttreeid

+ 1 - 1
src/views/module_tpm/equipment/modules/EquipmentForm.vue

@@ -203,7 +203,7 @@
     methods: {
       getTpmTreeData(){
         getAction(`/tpmEquipmentTree/tpmEquipmentTree/listtypetree`).then(res=>{
-          console.log(111,res)
+          // console.log(111,res)
           if (res.success) {
             // 防止res.result对tpmListData造成地址赋值的问题
             let treeDataZanCun = JSON.parse(JSON.stringify(res.result))