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

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

src/views/payment/bill-payment-form.vue

@@ -48,6 +48,7 @@
           <el-col :span="6">
             <el-form-item label="本次使用" prop="usedAmount">
               <el-input-number
+                class="used-amount-input"
                 v-model="form.usedAmount"
                 :disabled="readonly"
                 :min="0"
@@ -388,12 +389,16 @@ export default {
 .bill-payment-form-page__remark :deep(.el-form-item__content) {
   margin-left: 0 !important;
 }
+// 本次使用 input-number 默认文字居中，改为居左
+.used-amount-input :deep(.el-input__inner) {
+  text-align: left;
+}
 .bill-payment-form-page__uploader {
   margin-top: 12px;
 }
 .bill-payment-form-page__actions {
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
   gap: 8px;
   padding: 16px 0 8px;
 }

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="请输入" />

src/views/payment/invoice-application.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-container class="invoice-page">
     <section class="invoice-page__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="invoice-page__search-grid">
           <el-form-item label="单据号">
             <el-input v-model="query.applicationNo" clearable placeholder="请输入" />
@@ -12,7 +12,7 @@
           <el-form-item label="所属组织">
             <el-input v-model="query.deptName" clearable placeholder="请输入" />
           </el-form-item>
-          <el-form-item label="金蝶单据状态">
+          <el-form-item class="invoice-kingdee-item" label="金蝶单据状态">
             <el-select v-model="query.kingdeeStatus" clearable placeholder="请选择">
               <el-option
                 v-for="item in kingdeeStatusOptions"
@@ -423,6 +423,10 @@ export default {
 .invoice-page__search :deep(.el-select) {
   width: 100%;
 }
+// 金蝶单据状态 label 为 6 个汉字，去掉 EP 默认 line-height:32px，避免与控件行高不对齐
+.invoice-page__search .invoice-kingdee-item :deep(.el-form-item__label) {
+  line-height: normal;
+}
 .invoice-page__search-actions {
   display: flex;
   justify-content: flex-end;

src/views/payment/invoice-receipt.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-container class="receipt-page">
     <section class="receipt-page__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="receipt-page__search-grid">
           <el-form-item label="发票号码">
             <el-input v-model="query.invoiceNo" clearable placeholder="请输入" />

src/views/payment/payment-application.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-container class="payment-page">
     <section class="payment-page__search">
-      <el-form :model="query" label-position="right" label-width="160px">
+      <el-form :model="query" label-position="right" label-width="88px">
         <div class="payment-page__search-grid">
           <el-form-item label="单据号"
             ><el-input v-model="query.paymentNo" clearable

src/views/payment/receipt-claim-record.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-container class="claim-record-page">
     <section-card class="claim-record-page__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="claim-record-page__search-grid">
           <el-form-item label="认领通知单">
             <el-input v-model="query.receiptNoticeNo" clearable placeholder="请输入" />
@@ -255,7 +255,7 @@ export default {
 
 <style scoped lang="scss">
 .claim-record-page__search {
-  padding: 12px 12px 4px;
+  //padding: 12px 12px 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 .claim-record-page__search-grid {

src/views/payment/receipt-flow.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-container class="receipt-flow-page">
     <section class="receipt-flow-page__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="receipt-flow-page__search-grid">
           <el-form-item label="认领通知单">
             <el-input v-model="query.receiptNoticeNo" clearable placeholder="请输入" />