设备管理部分输入框样式优化

src/views/deviceManagement/deviceConfig.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="container">
     <div class="left-pane">
-      <el-input
-        placeholder="告警类别"
-        suffix-icon="el-icon-search"
-        v-model="filterText"
-      ></el-input>
+      <el-input placeholder="告警类别" v-model="filterText" class="left-input">
+        <template slot="append">
+          <i
+            class="el-icon-search"
+            style="cursor: pointer"
+            @click="searchTypeEvent"
+          ></i>
+        </template>
+      </el-input>
       <el-tree
         ref="tree"
         :data="data"
@@ -89,67 +93,6 @@
         </div>
       </div>
     </div>
-    <!-- <div class="right-pane">
-      <div style="margin: 20px 1100px 20px 0">
-        <div style="display: flex">
-          <el-button @click="addDevice()">添加设备</el-button>
-          <el-button style="margin-left: 20px" @click="dataImport()"
-            >批量导入</el-button
-          >
-          <el-button @click="batchDelete">批量删除</el-button>
-        </div>
-        <el-input
-          class="search"
-          v-model="filter"
-          placeholder="请输入"
-          suffix-icon="el-icon-search"
-        ></el-input>
-      </div>
-      <el-table
-        ref="multipleTable"
-        border
-        :data="tableData"
-        tooltip-effect="dark"
-        :header-cell-style="{ textAlign: 'center' }"
-        :cell-style="{ textAlign: 'center' }"
-        style="width: 100%"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="50"> </el-table-column>
-        <el-table-column type="index" width="50" label="序号">
-        </el-table-column>
-        <el-table-column prop="deviceName" label="设备名称"> </el-table-column>
-        <el-table-column prop="deviceID" label="设备ID"> </el-table-column>
-        <el-table-column prop="deviceUse" label="设备用途"> </el-table-column>
-        <el-table-column prop="devicePosition" label="设备位置">
-        </el-table-column>
-        <el-table-column prop="deviceLife" label="设备使用年限">
-        </el-table-column>
-        <el-table-column prop="company" label="设备单位"> </el-table-column>
-        <el-table-column prop="deviceRespon" label="设备责任人">
-        </el-table-column>
-        <el-table-column prop="operation" label="操作">
-          <template slot-scope="scope">
-            <el-button
-              v-show="scope.row.deviceID == null ? false : true"
-              size="mini"
-              type="text"
-              @click="deviceEdit()"
-              >编辑</el-button
-            >
-            <el-button
-              v-show="scope.row.deviceID == null ? false : true"
-              size="mini"
-              type="text"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-    </div> -->
-    <!-- <div class="bottom">
-      <page :paginationData="paginationData"></page>
-    </div> -->
     <!--弹窗-->
     <NewDeviceType ref="newDevice"></NewDeviceType>
     <addDevice ref="addDevice"></addDevice>
@@ -251,6 +194,7 @@ export default {
     },
   },
   methods: {
+    searchTypeEvent() {},
     getTableData(val) {},
     handleSizeChange(val) {},
     filterNode(value, data) {
@@ -302,6 +246,9 @@ export default {
     .left-input {
       height: 30px;
       width: 98%;
+      /deep/.el-input-group__append {
+        cursor: pointer;
+      }
     }
     .el-tree {
       margin-top: 10px;

src/views/deviceManagement/deviceWarning.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="container">
     <div class="left-pane">
-      <el-input
-        placeholder="告警类别"
-        suffix-icon="el-icon-search"
-        v-model="filterText"
-      ></el-input>
+      <el-input placeholder="告警类别" v-model="filterText" class="left-input">
+        <template slot="append">
+          <i
+            class="el-icon-search"
+            style="cursor: pointer"
+            @click="searchTypeEvent"
+          ></i>
+        </template>
+      </el-input>
       <el-tree
         ref="tree"
         :data="data"
@@ -151,6 +155,9 @@ export default {
     getTableData() {},
     handleSizeChange() {},
     batchDelete() {},
+    searchTypeEvent() {
+      console.log("查询告警类别");
+    },
   },
 };
 </script>
@@ -174,6 +181,9 @@ export default {
     .left-input {
       height: 30px;
       width: 98%;
+      /deep/.el-input-group__append {
+        cursor: pointer;
+      }
     }
     .el-tree {
       margin-top: 10px;
@@ -297,5 +307,4 @@ export default {
     }
   }
 }
-
 </style>