feat:优化设备列表增加tag搜索条件

src/views/iot/device/instance/component/tag.vue

@@ -2,7 +2,7 @@
   <el-dialog title="标签设置" v-model="isShowDialog" width="500px">
     <el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="110px">
       <el-form-item label="标签键名" prop="key">
-        <el-input v-model="ruleForm.key" placeholder="请输入标签键名" />
+        <el-input v-model="ruleForm.key" placeholder="请输入标签键名" :disabled="isEdit" />
       </el-form-item>
 
       <el-form-item label="标签名称" prop="name">

src/views/iot/device/instance/index.vue

@@ -4,25 +4,39 @@
       <div class="system-user-search mb15">
         <el-form :model="tableData.param" ref="queryRef" inline>
           <el-form-item label="关键字" prop="keyWord">
-            <el-input v-model="tableData.param.keyWord" placeholder="输入名称或标识" clearable style="width: 150px" @keyup.enter.native="typeList" />
+            <el-input v-model="tableData.param.keyWord" placeholder="输入名称或标识" clearable style="width: 120px" @keyup.enter.native="typeList" />
           </el-form-item>
           <!--          <el-form-item label="标识" prop="key">-->
           <!--            <el-input v-model="tableData.param.key" placeholder="请输入设备标识" clearable style="width: 150px" @keyup.enter.native="typeList" />-->
           <!--          </el-form-item>-->
           <el-form-item label="所属产品" prop="productKey">
-            <el-select v-model="tableData.param.productKey" style="width: 140px" filterable clearable placeholder="选择产品">
+            <el-select v-model="tableData.param.productKey" style="width: 120px" filterable clearable placeholder="选择产品">
               <el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key" value-key="id"> </el-option>
             </el-select>
           </el-form-item>
 
           <el-form-item label="状态" prop="status">
-            <el-select v-model="tableData.param.status" placeholder="状态" clearable style="width: 100px">
+            <el-select v-model="tableData.param.status" placeholder="状态" clearable style="width: 80px">
               <el-option label="在线" :value="2" />
               <el-option label="离线" :value="1" />
               <el-option label="未启用" :value="0" />
             </el-select>
           </el-form-item>
 
+          <el-form-item label="标签" prop="tags">
+            <el-select
+              v-model="tableData.param.tags"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请输入标签"
+              style="width: 150px"
+              clearable
+            >
+            </el-select>
+          </el-form-item>
+
           <!--          <el-form-item label="创建时间" prop="dateRange">-->
           <!--            <el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>-->
           <!--          </el-form-item>-->
@@ -168,6 +182,7 @@ interface TableDataState {
       key: string;
       productKey: string;
       status: string;
+      tags: string[];
       dateRange: string[];
     };
   };
@@ -198,6 +213,7 @@ export default defineComponent({
           key: '',
           productKey: <string>route.query?.productKey || '',
           status: '',
+          tags: [],
           dateRange: [],
         },
       },
@@ -326,6 +342,7 @@ export default defineComponent({
     const resetQuery = (formEl: FormInstance | undefined) => {
       if (!formEl) return;
       formEl.resetFields();
+      state.tableData.param.tags = []; // 确保标签也被重置
       typeList();
     };
     // 多选框选中数据