军信前端2 新增按名字搜索功能

src/App.vue

@@ -54,7 +54,7 @@
         <el-button type="danger" :disabled="!selectedDevices.length" @click="batchDeviceSwitch(0)">关</el-button>
       </el-header>
       <el-main>
-        <el-table :data="deviceData" @selection-change="handleSelectionChange">
+        <el-table :data="filterTableData" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" />
           <el-table-column label="编号" prop="id" width="100" align="center"/>
           <el-table-column label="设备sn" prop="sn" width="200" align="center"/>
@@ -106,10 +106,12 @@
             </template>
           </el-table-column>
           <el-table-column label="操作" prop="action" width="400" align="center">
+            <template #header>
+              <el-input v-model="search" size="small" placeholder="搜索" />
+            </template>
             <template #default="scope">
               <el-button type="success" @click="switchDevice(scope.row,1)">开</el-button>
               <el-button type="danger" @click="switchDevice(scope.row,0)">关</el-button>
-              <el-button type="primary" v-if="scope.row.isSun" @click="">太阳能数据</el-button>
               <el-button type="primary" @click="openUpdateDevice(scope.row)">编辑</el-button>
               <el-button type="danger" @click="deleteDevice(scope.$index)">删除</el-button>
             </template>
@@ -232,7 +234,6 @@ const getData = async() => {
     onlineData.value = res.data
   })
   await getSunDevices().then(res => {
-    console.log(res.data)
     sunDevices.value = res.data
   })
 }
@@ -272,6 +273,15 @@ const openRegionDrawer = (val) => {
     }
   }
 }
+// 搜索
+const search = ref('')
+const filterTableData = computed(() =>
+    deviceData.value.filter(
+        (data) =>
+            !search.value ||
+            data.name.toLowerCase().includes(search.value.toLowerCase())
+    )
+)
 
 //新增
 const openAddDevice = ref(false)
@@ -292,6 +302,12 @@ const addDevice = () => {
     ElMessage.error("数据不能为空")
     return
   }
+
+  if (isRepeatSn(addDeviceData.value.sn)) {
+    ElMessage.error("sn已被使用")
+    return
+  }
+
   for (let i = 0; i < addDeviceData.value.loopNumber; i++) {
     const loop = {
       id: i+1,
@@ -312,6 +328,19 @@ const addDevice = () => {
   openAddDevice.value = false
   // 新增设备逻辑
 }
+
+// sn不能重复
+const isRepeatSn = (sn) => {
+  for (let i = 0; i < regionData.value.length; i++) {
+    for (let j = 0; j < regionData.value[i].devices.length; j++) {
+      if (regionData.value[i].devices[j].sn === sn) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
 //编辑
 const isUpdateDevice = ref(false)
 const updateDeviceData = ref()
@@ -325,6 +354,12 @@ const updateDevice = () => {
     ElMessage.error("数据不能为空")
     return
   }
+
+  if (isRepeatSn(addDeviceData.value.sn)) {
+    ElMessage.error("sn已被使用")
+    return
+  }
+
   save()
   isUpdateDevice.value = false
   ElMessage.success("修改成功")