feat: SearchBar 组件添加重置按钮并优化布局

ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue

@@ -10,13 +10,7 @@
             clearable
             size="medium"
             @keyup.enter.native="handleSearch"
-          >
+          />
-            <el-button
-              slot="append"
-              icon="el-icon-search"
-              @click="handleSearch"
-            >搜索</el-button>
-          </el-input>
         </el-col>
         <el-col :span="5">
           <el-select
@@ -35,7 +29,20 @@
             />
           </el-select>
         </el-col>
-        <el-col :span="11" style="text-align: right">
+        <el-col :span="4">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="medium"
+            @click="handleSearch"
+          >搜索</el-button>
+          <el-button
+            icon="el-icon-refresh"
+            size="medium"
+            @click="handleReset"
+          >重置</el-button>
+        </el-col>
+        <el-col :span="7" style="text-align: right">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -82,6 +89,12 @@ export default {
     handleStatusChange() {
       this.emitQuery()
     },
+    /** 重置 */
+    handleReset() {
+      this.searchKeyword = ''
+      this.selectedStatus = ''
+      this.emitQuery()
+    },
     /** 发送查询 */
     emitQuery() {
       this.$emit('query', {
@@ -97,13 +110,6 @@ export default {
     handleImport() {
       this.$emit('import')
     }
-  },
-  watch: {
-    searchKeyword(newVal) {
-      if (newVal === '') {
-        this.emitQuery()
-      }
-    }
   }
 }
 </script>
@@ -123,18 +129,12 @@ export default {
   }
 }
 
-:deep(.el-input-group__append) {
-  background-color: #409EFF;
-  color: white;
-  border-color: #409EFF;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #66b1ff;
-  }
-}
-
 :deep(.el-button--medium) {
   padding: 10px 16px;
+  margin-left: 8px;
+
+  &:first-child {
+    margin-left: 0;
+  }
 }
 </style>