fix: element select, see https://sonic-cloud.wiki/d/3293-v255

Author: ZhouYixun

src/components/ElementSelect.vue

@@ -121,7 +121,6 @@ onMounted(() => {
         filterable
         style="width: 100%"
         value-key="id"
-        :placeholder="$t('element.namePlace')"
         @visible-change="findByProjectIdAndEleType"
       >
         <template #prefix>
@@ -130,39 +129,55 @@ onMounted(() => {
           }}</span>
         </template>
         <template #empty>
-          <div style="text-align: center; margin: 5px 0">
-            <el-select v-model="moduleId" size="small" @change="findByModule">
-              <el-option
-                v-for="item in moduleList"
-                :key="item.name"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
+          <div style="text-align: center; margin: 5px">
+            <el-input
+              v-model="name"
+              :placeholder="$t('element.namePlace')"
+              @input="findByName"
+            >
+              <template #prepend>
+                <el-select
+                  v-model="moduleId"
+                  style="width: 115px"
+                  size="small"
+                  @change="findByModule"
+                >
+                  <el-option
+                    v-for="item in moduleList"
+                    :key="item.name"
+                    :value="item.id"
+                    :label="item.name"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-input>
           </div>
           <el-empty />
         </template>
-        <div
-          style="
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin: 5px 0;
-          "
-        >
-          <span style="font-size: 14px; color: #99a9bf; margin: 0 10px">{{
-            $t('element.modelFilter')
-          }}</span>
-          <el-select v-model="moduleId" size="small" @change="findByModule">
-            <el-option
-              v-for="item in moduleList"
-              :key="item.name"
-              :value="item.id"
-              :label="item.name"
-            >
-            </el-option>
-          </el-select>
+        <div style="text-align: center; margin: 5px">
+          <el-input
+            v-model="name"
+            :placeholder="$t('element.namePlace')"
+            @input="findByName"
+          >
+            <template #prepend>
+              <el-select
+                v-model="moduleId"
+                style="width: 115px"
+                size="small"
+                @change="findByModule"
+              >
+                <el-option
+                  v-for="item in moduleList"
+                  :key="item.name"
+                  :value="item.id"
+                  :label="item.name"
+                >
+                </el-option>
+              </el-select>
+            </template>
+          </el-input>
         </div>
         <el-option
           v-for="item in pageData['content']"

src/views/Devices.vue

@@ -140,13 +140,13 @@ const openHub = () => {
 };
 watch(dialogAgent, (newValue, oldValue) => {
   if (!newValue) {
-  agent.value = {
-    id: 0,
-    name: '',
-    highTemp: 45,
-    highTempTime: 15,
-    robotSecret: '',
-    robotToken: '',
+    agent.value = {
+      id: 0,
+      name: '',
+      highTemp: 45,
+      highTempTime: 15,
+      robotSecret: '',
+      robotToken: '',
       robotType: 1,
     };
   }
@@ -1013,7 +1013,7 @@ onUnmounted(() => {
       </el-form-item>
       <el-form-item prop="alertRobotIds" :label="$t('agent.ui.alertRobotIds')">
         <el-checkbox
-        :label="$t('agent.ui.defaultAlertRobotIds')"
+          :label="$t('agent.ui.defaultAlertRobotIds')"
           :checked="agent.alertRobotIds == null"
           class="mb-2"
           @change="