绑定用户与SN号时可进行筛选

src/components/features/bindSN.vue

@@ -31,6 +31,14 @@
           <div class="card-header">
             <span>未绑定的用户</span>
           </div>
+          <el-input
+            size="small"
+            placeholder="输入用户名以搜索相关数据"
+            clearable
+            v-model="user"
+            @blur="searchBindUser"
+            style="width: 100%; font-size: 1rem"
+          />
         </template>
         <div class="unbind-users">
           <el-tag
@@ -50,6 +58,15 @@
           <div class="card-header">
             <span>未绑定的SN号</span>
           </div>
+          <el-input
+            size="small"
+            placeholder="输入SN号以搜索相关数据"
+            clearable
+            v-model="snNumber"
+            @input="numberOnly"
+            @blur="searchBindSN"
+            style="width: 100%; font-size: 1rem"
+          />
         </template>
         <div class="unbind-sn">
           <el-tag
@@ -81,12 +98,20 @@ const bindSNActive = bindSNActiveStore();
 
 const emit = defineEmits(["reloadRecord"]);
 
+const user = ref("");
+const snNumber = ref("");
 const selectedUser = ref("");
 const selectedSN = ref("");
 const unbindUsers = ref([]);
 const userObj = ref({});
 const unbindSN = ref([]);
 
+const numberOnly = () => {
+  if (snNumber !== "") {
+    snNumber.value = snNumber.value.replace(/[^0-9]/g,"");
+  }
+};
+
 const selectUser = (user) => {
   selectedUser.value = user;
 };
@@ -107,7 +132,8 @@ const searchBindUser = () => {
   nextTick(() => {
     $http.get($url.searchBindUser).then((res) => {
       if (res.data.code === 200) {
-        res.data.result.forEach(element => {
+        res.data.result.forEach((element) => {
+          if (user.value !== "" && !element.account_name.includes(user.value)) return;
           unbindUsers.value.push(element.account_name);
           userObj.value[element.account_name] = element.uid;
         });
@@ -120,11 +146,13 @@ const searchBindUser = () => {
 };
 
 const searchBindSN = () => {
+  numberOnly();
   unbindSN.value = [];
   nextTick(() => {
     $http.get($url.searchBindSN).then((res) => {
       if (res.data.code === 200) {
-        res.data.result.forEach(element => {
+        res.data.result.forEach((element) => {
+          if (snNumber.value !== "" && !element.includes(snNumber.value)) return;
           unbindSN.value.push(element);
         });
       } else {
@@ -141,7 +169,7 @@ const resetList = () => {
 };
 
 const bindSN = () => {
-  if (selectedUser.value === "" || selectedSN.value  === "") {
+  if (selectedUser.value === "" || selectedSN.value === "") {
     ElMessage.warning("请选择用户和SN号！");
     return;
   }