穿梭框不禁用选项

src/api/equipmentManagement/devicegroup/index.ts

@@ -345,10 +345,6 @@ function delTreeNode(nodes, targetValue, childField = "children", valueFiled = "
 
 //获取某个节点的设备数据
 function getNodeDevice(para) {
-
-
-
-
   let promise2 = new Promise((resolve, reject) => {
     request({
       url: '/api/device',
@@ -358,6 +354,9 @@ function getNodeDevice(para) {
         "pageNum": para.pageIndex,
         "pageSize": para.pageSize,
         "groupId": para.nodeCode,
+        "communicationMode": para.communicationMode,//通讯方式 0:4G;1:蓝牙
+        "deviceType": para.deviceType,//设备类型
+        "deviceName": para.deviceName
 
       }
     }).then((res) => {
@@ -409,6 +408,30 @@ function deviceMoveGroup(groupid,deviceIds){
   });
 }
 
+
+//获取设备类型
+function getDeviceTypeAll(){
+    return new Promise((resolve, reject) => {
+    request({
+      url: '/api/deviceType/all' ,
+      method: 'get',
+
+    }).then((res) => {
+      resolve(res);
+    }).catch((ex) => {
+      reject(ex);
+    });
+  });
+}
+
+//获取通讯方式
+function getNetMode ()  {
+  return request({
+    url: '/api/deviceType/communicationMode',
+    method: 'get'
+  });
+}
+
 export default {
   getTreeData: getTreeData,
   treeNodeSearch: treeNodeSearch,
@@ -417,5 +440,8 @@ export default {
   delTreeNode: delTreeNode,
   getNodeDevice: getNodeDevice,
   groupDelDevice: groupDelDevice,
-  deviceMoveGroup:deviceMoveGroup
+  deviceMoveGroup: deviceMoveGroup,
+  getDeviceTypeAll:getDeviceTypeAll,
+  getNetMode:getNetMode
+
 }

src/views/fys-equipment/group/index.vue

@@ -43,7 +43,7 @@
         <div class="rightSearch">
           <div class="searchContent">
             <div class="center H100">
-              <input type="text" class="serchTxt" v-model="GjSearchForm.deviceName" />
+              <input type="text" class="serchTxt" v-model="GjSearchForm.deviceName" @input="InputSearch()" />
               <Search class="icon" style="width: 16px;height:16px;" />
             </div>
           </div>
@@ -58,23 +58,21 @@
             style="width: 100%;">
 
             <el-form-item label="设备类型">
-              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
+              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择">
-                <el-option label="650" value="HBY 650" />
+                <el-option v-for="item in deviceTypes" :key="item.value" :label="item.typeName" :value="item.value" />
-                <el-option label="670" value="HBY 670" />
               </el-select>
             </el-form-item>
 
             <el-form-item label="通信方式">
-              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
+              <el-select v-model="GjSearchForm.netMode" placeholder="请选择">
-                <el-option label="650" value="蓝牙" />
+                <el-option label="4G" :value="0" />
-                <el-option label="670" value="4G" />
+                <el-option label="蓝牙" :value="1" />
-                <el-option label="670" value="蓝牙&4G" />
               </el-select>
             </el-form-item>
             <el-form-item>
 
-              <button class="btnSearch">查询</button>
+              <div class="btnSearch" @click="getDeviceList()">查询</div>
-              <button class="btnReset">重置</button>
+              <div class="btnReset" @click="ResetQuery()">重置</div>
             </el-form-item>
 
           </el-form>
@@ -184,7 +182,7 @@
     <!-- 选择设备的穿梭框 -->
     <el-dialog v-model="Status.dialogDeviceVisible" title="选择设备" width="800" :draggable="true">
 
-      <el-transfer v-model="transfer.value" :data="transfer.data" :filterable="true" />
+      <el-transfer :titles="['所有设备', '已选择设备']" v-model="transfer.value" :data="transfer.data" :filterable="true" />
 
       <div class="center" style="margin-top: 10px;">
         <el-button type="primary" @click="OKCheckDevice()">
@@ -206,6 +204,7 @@
 import api from '@/api/equipmentManagement/devicegroup/index';
 import { stat } from 'fs';
 import { func } from 'vue-types';
+import { deviceTypeAll } from '@/api/equipmentManagement/device';
 
 interface Device {
   deviceName: string;
@@ -246,14 +245,17 @@
 //右边的筛选条件
 var GjSearchForm = reactive({
   deviceName: '',
-    deviceType: '',
+  deviceType: "",
-    netMode: '',
+  netMode: "",
   pageNum: 1,
   pageSize: 10
 });
-
+//设备列表
 var deviceList = ref<Device[]>();
+//所有设备类型
+var deviceTypes = reactive([]);
 
+//穿梭框的数据和值
 var transfer = reactive({
   value: [],
   data: []
@@ -326,6 +328,11 @@
   }
 }
 var hideloading = closeLoading;
+
+function ResetQuery() {
+  GjSearchForm.deviceType = "";
+  GjSearchForm.netMode = "";
+}
 //查询某个节点的设备
 var getDeviceList = () => {
   if (!checkNode.val) {
@@ -333,17 +340,23 @@
     deviceList.value = [];
     return;
   }
+
   let para = {
     nodeCode: checkNode.val,
     pageIndex: GjSearchForm.pageNum,
-      pageSize: GjSearchForm.pageSize
+    pageSize: GjSearchForm.pageSize,
+    communicationMode: GjSearchForm.netMode,
+    deviceType: GjSearchForm.deviceType,
+    deviceName: GjSearchForm.deviceName
   }
-
+  showloading();
   api.getNodeDevice(para).then((res) => {
     deviceList.value = res.rows;
     pagin.total = res.total;
   }).catch((ex) => {
     console.log("出现了异常", ex);
+  }).finally(() => {
+    hideloading();
   });
 
 
@@ -666,8 +679,8 @@
       if (res1.code == 200) {
         let arr = res1.rows.map(item => ({
           key: item.deviceId,
-            label: item.deviceName,
+          label: item.deviceName//,
-            disabled:item.groupId && item.groupId==checkNode.val?false:item.groupId ?true:false
+          // disabled: item.groupId && item.groupId == checkNode.val ? false : item.groupId ? true : false
         }));
 
         transfer.data = arr;
@@ -794,8 +807,26 @@ debugger;
 }
 
 
+  let timer;
+  function InputSearch() {
+    clearTimeout(timer);
+    // 等待 500ms 无输入后执行查询
+    timer = setTimeout(() => {
+      getDeviceList();
+    }, 500);
+  }
+
 onMounted(() => {
   RefreshTree();
+  api.getDeviceTypeAll().then((res) => {
+    if (res.code == 200) {
+      deviceTypes = res.data.map(item => ({
+        value: item.deviceTypeId,
+        typeName: item.typeName
+      }))
+    }
+  });
+
 });
 </script>
 
@@ -814,7 +845,7 @@ debugger;
   line-height: 32px;
   letter-spacing: 0px;
   border: 1px solid rgb(2, 124, 251);
-
+  cursor: pointer;
 }
 
 .main .searchBar .btnSearch {
@@ -832,6 +863,7 @@ debugger;
   letter-spacing: 0px;
   border: none;
   margin-right: 15px;
+  cursor: pointer;
 }
 
 .main .searchBar {
@@ -864,7 +896,7 @@ debugger;
   border: 1px solid rgba(2, 124, 251, 1);
   border-radius: 4px;
   color: rgba(2, 124, 251, 1);
-
+  cursor: pointer;
   font-family: Noto Sans SC;
   font-size: 14px;
   font-weight: 400;
@@ -898,7 +930,7 @@ debugger;
   font-weight: 400;
   line-height: 32px;
   letter-spacing: 0px;
-
+  cursor: pointer;
 }
 
 .main .toolBar {
@@ -1067,8 +1099,7 @@ debugger;
 }
 
 .center {
-    display: flex
+  display: flex;
-;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
@@ -1144,8 +1175,8 @@ debugger;
 .gridTool {
   padding-bottom: 10px;
 }
+
 :deep .el-tree-node__content {
   height: auto !important;
 }
-  
 </style>