Merge remote-tracking branch 'websoft/master'

src/views/payment/bill-ledger.vue

@@ -2,11 +2,20 @@
   <basic-container class="bill-ledger-page">
     <bill-ledger-search
       :query="query"
-      :counts="counts"
       :loading="loading"
       @search="handleSearch"
       @reset="resetSearch"
     />
+    <div class="bill-ledger-page__expiry-tags">
+      <el-check-tag
+        v-for="item in shortcutOptions"
+        :key="item.value"
+        :checked="query.expiryShortcut === item.value"
+        @change="handleShortcutChange(item.value)"
+      >
+        {{ item.label }}
+      </el-check-tag>
+    </div>
     <bill-ledger-table
       :rows="rows"
       :loading="loading"
@@ -124,7 +133,21 @@ export default {
   mounted() {
     this.loadData();
   },
+  computed: {
+    shortcutOptions() {
+      return [
+        { label: `全部（${this.counts.all || 0}）`, value: 'all' },
+        { label: `30天内到期（${this.counts.within30 || 0}）`, value: 'within30' },
+        { label: `90天内到期（${this.counts.within90 || 0}）`, value: 'within90' },
+        { label: `90天以上（${this.counts.over90 || 0}）`, value: 'over90' },
+      ];
+    },
+  },
   methods: {
+    handleShortcutChange(value) {
+      this.query.expiryShortcut = value;
+      this.handleSearch();
+    },
     unwrapData(response) {
       const body = response?.data || response || {};
       return body?.data || body;
@@ -233,3 +256,19 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.bill-ledger-page__expiry-tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+  margin-bottom: 6px;
+
+  :deep(.el-check-tag) {
+    margin: 0;
+    white-space: nowrap;
+  }
+}
+</style>

src/views/payment/components/bill-ledger-search.vue

@@ -43,33 +43,21 @@
           </el-select>
         </el-form-item>
       </div>
-      <div class="bill-ledger-search__actions">
-        <div class="bill-ledger-search__actions-tags">
-          <el-check-tag
-            v-for="item in shortcutOptions"
-            :key="item.value"
-            :checked="query.expiryShortcut === item.value"
-            @change="handleShortcutChange(item.value)"
-          >
-            {{ item.label }}
-          </el-check-tag>
-        </div>
-        <div class="bill-ledger-search__actions-buttons">
-          <el-button type="primary" :loading="loading" @click="$emit('search')">
-            <el-icon><Search /></el-icon>
-            <span>搜索</span>
+      <div class="bill-ledger-search__actions-buttons">
+        <el-button type="primary" :loading="loading" @click="$emit('search')">
+          <el-icon><Search /></el-icon>
+          <span>搜索</span>
+        </el-button>
+        <el-button @click="$emit('reset')">
+          <el-icon><Delete /></el-icon>
+          <span>重置</span>
+        </el-button>
+        <el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
+          <el-button text @click="expanded = !expanded">
+            <el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
+            <span>{{ expanded ? '折叠' : '展开' }}</span>
           </el-button>
-          <el-button @click="$emit('reset')">
-            <el-icon><Delete /></el-icon>
-            <span>重置</span>
-          </el-button>
-          <el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
-            <el-button text @click="expanded = !expanded">
-              <el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
-              <span>{{ expanded ? '折叠' : '展开' }}</span>
-            </el-button>
-          </el-tooltip>
-        </div>
+        </el-tooltip>
       </div>
     </el-form>
   </section>
@@ -83,7 +71,6 @@ export default {
   name: 'BillLedgerSearch',
   props: {
     query: { type: Object, required: true },
-    counts: { type: Object, default: () => ({}) },
     loading: { type: Boolean, default: false },
   },
   emits: ['search', 'reset'],
@@ -98,22 +85,6 @@ export default {
       maturityStatusOptions,
     };
   },
-  computed: {
-    shortcutOptions() {
-      return [
-        { label: `全部（${this.counts.all || 0}）`, value: 'all' },
-        { label: `30天内到期（${this.counts.within30 || 0}）`, value: 'within30' },
-        { label: `90天内到期（${this.counts.within90 || 0}）`, value: 'within90' },
-        { label: `90天以上（${this.counts.over90 || 0}）`, value: 'over90' },
-      ];
-    },
-  },
-  methods: {
-    handleShortcutChange(value) {
-      this.query.expiryShortcut = value;
-      this.$emit('search');
-    },
-  },
 };
 </script>
 
@@ -136,34 +107,13 @@ export default {
 .bill-ledger-search :deep(.el-date-editor) {
   width: 100%;
 }
-.bill-ledger-search__actions {
+.bill-ledger-search__actions-buttons {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   margin-bottom: 8px;
 }
-.bill-ledger-search__actions-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.bill-ledger-search__actions-tags {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.bill-ledger-search__actions-tags :deep(.el-check-tag) {
-  margin: 0;
-  white-space: nowrap;
-}
-.bill-ledger-search__actions-tags :deep(.el-check-tag.is-checked),
-.bill-ledger-search__actions-tags :deep(.el-check-tag.is-checked:hover) {
-  background-color: #409eff;
-  color: #fff;
-}
 @media (max-width: 1200px) {
   .bill-ledger-search__grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));