dev

src/views/inventory/goods.vue

@@ -12,12 +12,15 @@
                         @input="searchGoods"
               >
                 <template #prefix>
-                  <el-icon><Search /></el-icon>
+                  <el-icon>
+                    <Search/>
+                  </el-icon>
                 </template>
               </el-input>
             </el-form-item>
             <el-form-item>
-              <el-cascader style="width: 180px;height: 42px" :options="allCateList" :show-all-levels="false" v-model="searchModel.cateId" clearable/>
+              <el-cascader style="width: 180px;height: 42px" :options="allCateList" :show-all-levels="false"
+                           v-model="searchModel.cateId" clearable/>
             </el-form-item>
             <el-form-item>
               <el-select
@@ -37,7 +40,8 @@
               </el-select>
             </el-form-item>
             <el-form-item style="margin-right: 0">
-              <el-input placeholder="最低毛利率" v-model="searchModel.minInterestRate" style="width: 100px;height: 42px">
+              <el-input placeholder="最低毛利率" v-model="searchModel.minInterestRate"
+                        style="width: 100px;height: 42px">
                 <template #suffix>
                   <el-icon class="el-input__icon">%</el-icon>
                 </template>
@@ -47,22 +51,33 @@
               </el-icon>
             </el-form-item>
             <el-form-item>
-              <el-input placeholder="最高毛利率" v-model="searchModel.maxInterestRate" style="width: 100px;height: 42px">
+              <el-input placeholder="最高毛利率" v-model="searchModel.maxInterestRate"
+                        style="width: 100px;height: 42px">
                 <template #suffix>
                   <el-icon class="el-input__icon">%</el-icon>
                 </template>
               </el-input>
             </el-form-item>
           </el-form>
-          <div class="btn">
-            <div  @click="searchGoods">搜索</div>
-            <div @click="resetSearch">重置</div>
         </div>
-        </div>
+        <div class="btn-group">
-        <div class="right">
+          <div class="left">
             <el-checkbox v-model="inventoryNumber" label="不看0库存" size="large" @change="searchGoods"/>
             <el-checkbox v-model="status" label="不看已停用" size="large" @change="searchGoods"/>
           </div>
+          <div class="btn" @click="resetSearch">
+            <el-icon style="margin-right: 10px">
+              <Refresh/>
+            </el-icon>
+            重置
+          </div>
+          <div class="btn" @click="searchGoods">
+            <el-icon style="margin-right: 10px">
+              <Search/>
+            </el-icon>
+            搜索
+          </div>
+        </div>
       </div>
       <div class="addBtn">
         <span @click="open_edit(1301,0)">新增中西成药</span>
@@ -72,7 +87,8 @@
       </div>
     </div>
     <div class="content_goods" ref="content">
-      <el-table :data="tableData" style="width: 100%;height: 100%;padding: 0 24px" @row-click="openMack" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
+      <el-table :data="tableData" style="width: 100%;height: 100%;padding: 0 24px" @row-click="openMack"
+                :header-cell-style="{ backgroundColor: '#F1F5FB' }">
         <el-table-column fixed prop="name" label="名称" width="200" show-overflow-tooltip>
           <template #default="scope">
             {{ scope.row.name }}{{ scope.row.commonName ? "(" + scope.row.commonName + ")" : "" }}
@@ -204,7 +220,8 @@ import Edit from "@/components/inventory/goods/Edit.vue";
 import InventoryBatchDetail from "@/components/inventory/goods/InventoryBatchDetail.vue";
 import InventoryStatistics from "@/components/inventory/goods/InventoryStatistics.vue";
 import CloseBtn from "@/components/CloseBtn.vue";
-import {Search, SemiSelect} from "@element-plus/icons-vue";
+import {Search, SemiSelect, Refresh} from "@element-plus/icons-vue";
+
 const statisticsData = ref<any>({})
 const inventoryNumber = ref(false)
 const status = ref(false)
@@ -431,7 +448,7 @@ const getStatisticsData = () => {
   flex-direction: column;
 
   .top {
-    height: 157px;
+    height: 144px;
     padding: 24px 24px 0;
     background: #fff;
     display: flex;
@@ -468,6 +485,11 @@ const getStatisticsData = () => {
         color: #4D6DE4;
         text-align: center;
         line-height: 42px;
+        &:hover {
+          background: #4D6DE4;
+          color: #fff;
+          border: none;
+        }
       }
     }
   }
@@ -499,10 +521,34 @@ const getStatisticsData = () => {
 .tags {
   margin-left: 5px;
 }
+
 :deep(.el-cascader .el-input) {
   height: 42px;
 }
+
 :deep(.el-select__wrapper) {
   height: 42px;
 }
+
+.btn-group {
+  display: flex;
+
+  .btn {
+    width: 120px;
+    height: 42px;
+    background: #FFFFFF;
+    border-radius: 6px;
+    border: 1px solid #979797;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 24px;
+    cursor: pointer;
+    &:hover {
+      background: #4D6DE4;
+      color: #fff;
+      border: none;
+    }
+  }
+}
 </style>