⚡ 优化表格工具栏、附件文件名展示与合同金额两位小数

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/business/voucher-manage.vue

@@ -1,6 +1,6 @@
 <template>
   <basic-container class="voucher-manage-page">
-    <section class="voucher-manage-page__search">
+    <section v-show="searchVisible" class="voucher-manage-page__search">
       <el-form :model="query" label-position="right" label-width="88px">
         <div class="voucher-manage-page__search-grid">
           <el-form-item label="凭证批次号"
@@ -55,10 +55,25 @@
     </section>
     <section>
       <div class="voucher-manage-page__toolbar">
-        <el-button type="primary" @click="openUpload">批量导入凭证</el-button
-        ><el-button plain @click="openProgress">上传进度</el-button>
+        <div class="voucher-manage-page__toolbar-left">
+          <el-button type="primary" @click="openUpload">批量导入凭证</el-button>
+          <el-button plain @click="openProgress">上传进度</el-button>
+        </div>
+        <table-header-tools
+          :columns="columnSettingOptions"
+          v-model:visible-column-keys="visibleColumnKeys"
+          v-model:table-size="tableSize"
+          v-model:search-visible="searchVisible"
+          @refresh="load"
+        />
       </div>
-      <el-table v-loading="loading" :data="rows" border class="voucher-manage-page__table">
+      <el-table
+        v-loading="loading"
+        :data="rows"
+        :size="tableSize"
+        border
+        class="voucher-manage-page__table"
+      >
         <el-table-column type="selection" width="52" fixed="left" align="center" /><el-table-column
           type="index"
           label="序号"
@@ -66,27 +81,47 @@
           fixed="left"
           align="center"
         />
-        <el-table-column prop="voucherBatchNo" label="凭证批次号" min-width="150" fixed="left"
+        <el-table-column
+          v-if="isColumnVisible('voucherBatchNo')"
+          prop="voucherBatchNo"
+          label="凭证批次号"
+          min-width="150"
+          fixed="left"
           ><template #default="{ row }"
             ><el-link class="voucher-manage-page__link" type="primary" @click="view(row)">{{
               row.voucherBatchNo
             }}</el-link></template
           ></el-table-column
         >
-        <el-table-column prop="waybillBatchNo" label="运单批次号" min-width="170" /><el-table-column
+        <el-table-column
+          v-if="isColumnVisible('waybillBatchNo')"
+          prop="waybillBatchNo"
+          label="运单批次号"
+          min-width="170"
+        /><el-table-column
+          v-if="isColumnVisible('fileName')"
           prop="fileName"
           label="文件名"
           min-width="200"
           show-overflow-tooltip
         />
-        <el-table-column v-if="!isCarrier" prop="uploadSource" label="上传来源" width="100" /><el-table-column
-          v-if="!isCarrier"
+        <el-table-column
+          v-if="!isCarrier && isColumnVisible('uploadSource')"
+          prop="uploadSource"
+          label="上传来源"
+          width="100"
+        /><el-table-column
+          v-if="!isCarrier && isColumnVisible('carrierName')"
           prop="carrierName"
           label="承运商名称"
           min-width="160"
           ><template #default="{ row }">{{ row.carrierName || '-' }}</template></el-table-column
         >
-        <el-table-column prop="processStatus" label="处理状态" width="120"
+        <el-table-column
+          v-if="isColumnVisible('processStatus')"
+          prop="processStatus"
+          label="处理状态"
+          width="120"
           ><template #default="{ row }"
             ><span
               :class="{ 'voucher-manage-page__process-failed': row.processStatus === '处理失败' }"
@@ -94,17 +129,35 @@
             ></template
           ></el-table-column
         ><el-table-column
+          v-if="isColumnVisible('voucherCount')"
           prop="voucherCount"
           label="凭证数量"
           width="100"
         /><el-table-column
+          v-if="isColumnVisible('relatedWaybillCount')"
           prop="relatedWaybillCount"
           label="凭证已关联数量"
           width="125"
-        />        <el-table-column prop="unRelatedWaybillCount" label="凭证未关联数量" width="125" />
-        <el-table-column prop="createUserName" label="创建人" min-width="120" />
-        <el-table-column prop="createTime" label="创建时间" min-width="170" />
+        /><el-table-column
+          v-if="isColumnVisible('unRelatedWaybillCount')"
+          prop="unRelatedWaybillCount"
+          label="凭证未关联数量"
+          width="125"
+        />
         <el-table-column
+          v-if="isColumnVisible('createUserName')"
+          prop="createUserName"
+          label="创建人"
+          min-width="120"
+        />
+        <el-table-column
+          v-if="isColumnVisible('createTime')"
+          prop="createTime"
+          label="创建时间"
+          min-width="170"
+        />
+        <el-table-column
+          v-if="isColumnVisible('auditStatus')"
           prop="auditStatus"
           label="审核状态"
           width="120"
@@ -512,6 +565,7 @@ import { WarnTriangleFilled } from '@element-plus/icons-vue';
 import { getList as getProjectList } from '@/api/business/project-apply';
 import * as api from '@/api/business/voucher-manage';
 import SectionCard from '@/components/section-card/main.vue';
+import TableHeaderTools from '@/components/table-header-tools/main.vue';
 
 const router = useRouter();
 const store = useStore();
@@ -539,6 +593,47 @@ const checkIfCarrier = () => {
   isCarrier.value = topDeptName === '外部组织';
 };
 
+const VOUCHER_BASE_COLUMNS = [
+  { prop: 'voucherBatchNo', label: '凭证批次号' },
+  { prop: 'waybillBatchNo', label: '运单批次号' },
+  { prop: 'fileName', label: '文件名' },
+  { prop: 'uploadSource', label: '上传来源', carrierHidden: true },
+  { prop: 'carrierName', label: '承运商名称', carrierHidden: true },
+  { prop: 'processStatus', label: '处理状态' },
+  { prop: 'voucherCount', label: '凭证数量' },
+  { prop: 'relatedWaybillCount', label: '凭证已关联数量' },
+  { prop: 'unRelatedWaybillCount', label: '凭证未关联数量' },
+  { prop: 'createUserName', label: '创建人' },
+  { prop: 'createTime', label: '创建时间' },
+  { prop: 'auditStatus', label: '审核状态' },
+];
+
+const searchVisible = ref(true);
+const tableSize = ref('default');
+const visibleColumnKeys = ref([]);
+const columnSettingOptions = computed(() =>
+  VOUCHER_BASE_COLUMNS.filter(column => !isCarrier.value || !column.carrierHidden).map(column => ({
+    prop: column.prop,
+    label: column.label,
+  }))
+);
+const isColumnVisible = prop => visibleColumnKeys.value.includes(prop);
+
+watch(
+  columnSettingOptions,
+  options => {
+    const props = options.map(column => column.prop);
+    if (!visibleColumnKeys.value.length) {
+      visibleColumnKeys.value = props;
+      return;
+    }
+    const visible = new Set(visibleColumnKeys.value);
+    visibleColumnKeys.value = props.filter(prop => visible.has(prop));
+    if (!visibleColumnKeys.value.length) visibleColumnKeys.value = props;
+  },
+  { immediate: true }
+);
+
 onMounted(() => {
   checkIfCarrier();
 });
@@ -1329,9 +1424,15 @@ load();
   &__toolbar {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 12px;
     margin: 12px 0;
   }
+  &__toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
   &__table {
     width: 100%;
   }