style(payment): 优化票据搜索条件交互和标签宽度统一

- 票据账册搜索改用 el-check-tag 实现快捷筛选，提升用户交互体验
- 查询按钮增加图标，重置按钮同样添加图标及文字说明
- 调整票据搜索表单标签宽度由160px统一为88px，优化界面一致性
- 全站多处搜索栏表单标签宽度由160px改为88px，涵盖多页面及组件
- 修复业务组件内el-autocomplete输入框宽度适配，避免placeholder被裁剪
- 业务页面货物名称表格列宽由150调整为240，改善显示效果
- 修正系统部门操作列宽度避免按钮竖排溢出问题
- 修改多个表单页和搜索板块样式，确保标签宽度和对齐一致
- 调整表单按钮等样式，提升整体页面美观性和操作友好度

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

@@ -1,6 +1,6 @@
 <template>
   <section class="bill-ledger-search">
-    <el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
+    <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
       <div class="bill-ledger-search__grid">
         <el-form-item label="票据编号">
           <el-input v-model="query.billNo" clearable placeholder="请输入" />
@@ -43,25 +43,40 @@
           </el-select>
         </el-form-item>
       </div>
-      <div class="bill-ledger-search__shortcut-row">
-        <span class="bill-ledger-search__shortcut-label">到期快捷筛选</span>
-        <el-segmented v-model="query.expiryShortcut" :options="shortcutOptions" />
-      </div>
       <div class="bill-ledger-search__actions">
-        <el-button type="primary" :loading="loading" @click="$emit('search')">查询</el-button>
-        <el-button @click="$emit('reset')">重置</el-button>
-        <el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
-          <el-button text @click="expanded = !expanded">
-            <el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
+        <div class="bill-ledger-search__actions-left">
+          <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-right">
+          <el-button type="primary" :loading="loading" @click="$emit('search')">
+            <el-icon><Search /></el-icon>
+            <span>搜索</span>
           </el-button>
-        </el-tooltip>
+          <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>
       </div>
     </el-form>
   </section>
 </template>
 
 <script>
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp, Delete, Search } from '@element-plus/icons-vue';
 import { billTypeOptions, maturityStatusOptions } from '@/api/payment/billLedger';
 
 export default {
@@ -76,6 +91,8 @@ export default {
     return {
       ArrowDown,
       ArrowUp,
+      Delete,
+      Search,
       expanded: false,
       billTypeOptions,
       maturityStatusOptions,
@@ -91,6 +108,12 @@ export default {
       ];
     },
   },
+  methods: {
+    handleShortcutChange(value) {
+      this.query.expiryShortcut = value;
+      this.$emit('search');
+    },
+  },
 };
 </script>
 
@@ -113,37 +136,36 @@ export default {
 .bill-ledger-search :deep(.el-date-editor) {
   width: 100%;
 }
-.bill-ledger-search__shortcut-row {
-  display: flex;
-  align-items: center;
-  min-height: 40px;
-}
-.bill-ledger-search__shortcut-label {
-  width: 160px;
-  padding-right: 12px;
-  color: var(--el-text-color-regular);
-  text-align: right;
-  white-space: nowrap;
-}
-.bill-ledger-search__shortcut-row :deep(.el-segmented) {
-  --el-segmented-item-selected-bg-color: #409eff;
-  --el-segmented-item-selected-color: #fff;
-}
 .bill-ledger-search__actions {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
   margin-bottom: 8px;
 }
+.bill-ledger-search__actions-left {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.bill-ledger-search__actions-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.bill-ledger-search__actions-left :deep(.el-check-tag) {
+  margin: 0;
+  white-space: nowrap;
+}
+.bill-ledger-search__actions-left :deep(.el-check-tag.is-checked),
+.bill-ledger-search__actions-left :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));
   }
-  .bill-ledger-search__shortcut-row {
-    align-items: flex-start;
-  }
-  .bill-ledger-search__shortcut-row :deep(.el-segmented) {
-    max-width: calc(100% - 160px);
-  }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <section class="bill-payment-search">
-    <el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
+    <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
       <div class="bill-payment-search__grid">
         <el-form-item label="单据号">
           <el-input v-model="query.paymentNo" clearable placeholder="请输入" />