feat(table): 调整表格操作列宽度并统一文字链接间距

- /business/project-apply 主表操作列宽度固定为 220，移除 applyTableMenuWidth 调用 - /business/temporary-credit-limit 通过传入 menuWidth prop 固定操作列宽度为 180 - /base/common-address 操作列宽度由 220 降至 180 - /business/process-config 操作列宽度由 320 调整为 180，修复末尾语法错误 - /vehicle/insurance-record 操作列宽度先降至 140 后改回 160，后全部车/船务管理模块记录页统一为 180 - 多个车/船务管理模块相关 option 文件及 vue 文件操作列宽统调为 180 - 新增 business-crud-page 组件 menuWidth prop，支持外部传值控制操作列宽度 - 全站操作列文字链接去除 el-link 默认 margin，避免和 gap 叠加导致文字间距过宽 - 优化操作列按钮过多时自动换行展示逻辑，确保按钮不被裁切
2026-08-06 23:55:30 +08:00
parent 454608d7be
commit cf04d48010
25 changed files with 123 additions and 37 deletions
--- a/src/option/base/common-address.js
+++ b/src/option/base/common-address.js
@@ -28,7 +28,7 @@ export const createOption = () => ({
  addBtn: false,
  dialogClickModal: false,
  menuFixed: 'right',
-  menuWidth: 220,
+  menuWidth: 180,
  column: [
    {
      label: '地址名称',
--- a/src/option/business/process-config.js
+++ b/src/option/business/process-config.js
@@ -6,7 +6,6 @@ import {
  selectRule,
  textRule,
 } from './common';
-import { applyTableMenuWidth } from '@/utils/table-menu';

 export const config = {
  title: '过程配置',
@@ -20,7 +19,7 @@ export const config = {
  deleteStatus: [0, 2],
 };

-export const option = applyTableMenuWidth({
+export const option = {
  ...createCrudOption([
    {
      label: '',
@@ -179,4 +178,5 @@ export const option = applyTableMenuWidth({
  updateBtnText: '保存',
  dialogTop: '10px',
  dialogWidth: '96%',
-}, 5);
+  menuWidth: 180,
+};
--- a/src/option/transportCapacity/driver.js
+++ b/src/option/transportCapacity/driver.js
@@ -16,7 +16,7 @@ export const option = {
  editBtn: false,
  delBtn: false,
  viewBtn: false,
-  menuWidth: 220,
+  menuWidth: 180,
  dialogClickModal: false,
  column: [
    {
--- a/src/option/transportCapacity/transport-ship.js
+++ b/src/option/transportCapacity/transport-ship.js
@@ -14,7 +14,7 @@ export const option = {
  editBtn: false,
  delBtn: false,
  viewBtn: false,
-  menuWidth: 220,
+  menuWidth: 180,
  dialogClickModal: false,
  column: [
    {
--- a/src/option/transportCapacity/transport-vehicle.js
+++ b/src/option/transportCapacity/transport-vehicle.js
@@ -14,7 +14,7 @@ export const option = {
  editBtn: false,
  delBtn: false,
  viewBtn: false,
-  menuWidth: 220,
+  menuWidth: 180,
  dialogClickModal: false,
  column: [
    {
--- a/src/option/vehicle/accident-record.js
+++ b/src/option/vehicle/accident-record.js
@@ -52,7 +52,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  column: [
    {
      label: '车船类型',
--- a/src/option/vehicle/annual-inspection-record.js
+++ b/src/option/vehicle/annual-inspection-record.js
@@ -51,7 +51,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  column: [
    {
      label: '车船类型',
--- a/src/option/vehicle/etc-record.js
+++ b/src/option/vehicle/etc-record.js
@@ -41,7 +41,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  menuFixed: 'right',
  column: [
    {
--- a/src/option/vehicle/insurance-record.js
+++ b/src/option/vehicle/insurance-record.js
@@ -49,7 +49,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  column: [
    {
      label: '车船类型',
--- a/src/option/vehicle/mileage-record.js
+++ b/src/option/vehicle/mileage-record.js
@@ -37,7 +37,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  menuFixed: 'right',
  column: [
    {
--- a/src/option/vehicle/oil-electric-record.js
+++ b/src/option/vehicle/oil-electric-record.js
@@ -38,7 +38,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  menuFixed: 'right',
  column: [
    {
--- a/src/option/vehicle/other-expense-record.js
+++ b/src/option/vehicle/other-expense-record.js
@@ -49,7 +49,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  menuFixed: 'right',
  column: [
    {
--- a/src/option/vehicle/tire-replacement-record.js
+++ b/src/option/vehicle/tire-replacement-record.js
@@ -42,7 +42,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  column: [
    {
      label: '车牌号',
--- a/src/option/vehicle/transport-change-record.js
+++ b/src/option/vehicle/transport-change-record.js
@@ -29,7 +29,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  menuFixed: 'right',
  column: [
    {
--- a/src/option/vehicle/violation-record.js
+++ b/src/option/vehicle/violation-record.js
@@ -60,7 +60,7 @@ export const option = {
  viewBtn: true,
  selection: true,
  dialogClickModal: false,
-  menuWidth: 160,
+  menuWidth: 180,
  column: [
    {
      label: '车船类型',
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -579,6 +579,12 @@
  --el-link-disabled-text-color: var(--el-color-primary-light-5);
 }

+// 全站统一：去除操作列 el-link 默认 margin，避免与 8px gap 叠加导致文字间距过宽
+.avue-crud .avue-crud__menu .el-link,
+.el-table .el-table__body .cell:not(.avue-crud__menu):has(> .el-link) .el-link {
+  margin: 0;
+}
+
 .avue-crud__menu > .el-button,
 .avue-crud__menu > .el-dropdown {
  margin: 0;
--- a/src/views/business/components/business-crud-page.vue
+++ b/src/views/business/components/business-crud-page.vue
@@ -3871,6 +3871,11 @@ export default {
      type: Object,
      default: () => ({ column: [] }),
    },
+    // 可选：固定操作列宽度；不传则按按钮数量自动估算（沿用既有逻辑）
+    menuWidth: {
+      type: Number,
+      default: null,
+    },
  },
  data() {
    return {
@@ -3918,7 +3923,11 @@ export default {
      defaultDialogButtons: null,
      contractCreateActionLoading: '',
      transportPlanCreateActionLoading: '',
-      option: this.cloneOption(this.crudOption, estimateMenuButtonCount(this.config)),
+      option: (() => {
+        const opt = this.cloneOption(this.crudOption, estimateMenuButtonCount(this.config));
+        if (this.menuWidth != null) opt.menuWidth = this.menuWidth;
+        return opt;
+      })(),
      selectedProjectId: '',
      projectOptions: [],
      projectLoading: false,
--- a/src/views/business/contract-manage.vue
+++ b/src/views/business/contract-manage.vue
@@ -1,5 +1,5 @@
 <template>
-  <business-crud-page :api="api" :config="config" :crud-option="option" />
+  <business-crud-page :api="api" :config="config" :crud-option="option" :menu-width="245" />
 </template>

 <script>
--- a/src/views/business/project-apply.vue
+++ b/src/views/business/project-apply.vue
@@ -695,7 +695,6 @@ import { getDictionary as getSystemDictionary } from '@/api/system/dict';
 import { getDictionary as getBizDictionary } from '@/api/system/dictbiz';
 import { getList as getUserList } from '@/api/system/user';
 import { getToken } from '@/utils/auth';
-import { applyTableMenuWidth } from '@/utils/table-menu';
 import { downloadFileByUrl, downloadXls } from '@/utils/util';
 import { mapGetters } from 'vuex';
 import NProgress from 'nprogress';
@@ -1036,18 +1035,17 @@ export default {
  },
  methods: {
    buildTableOption() {
-      return applyTableMenuWidth(
-        {
-          ...option,
-          dialogType: 'dialog',
-          addBtn: false,
-          viewBtn: false,
-          editBtn: false,
-          delBtn: false,
-          column: (option.column || []).map(column => ({ ...column, display: false })),
-        },
-        4
-      );
+      return {
+        ...option,
+        dialogType: 'dialog',
+        addBtn: false,
+        viewBtn: false,
+        editBtn: false,
+        delBtn: false,
+        // 操作列收窄：本项目操作按钮较少，320px 过宽，调整为 220px（链接会自动换行兜底）
+        menuWidth: 180,
+        column: (option.column || []).map(column => ({ ...column, display: false })),
+      };
    },
    hasPermission(code) {
      return this.isAdmin || this.validData(this.permission && this.permission[code], false);
--- a/src/views/business/shipping-template.vue
+++ b/src/views/business/shipping-template.vue
@@ -1,5 +1,5 @@
 <template>
-  <business-crud-page :api="api" :config="config" :crud-option="option" />
+  <business-crud-page :api="api" :config="config" :crud-option="option" :menu-width="270" />
 </template>

 <script>
--- a/src/views/business/temporary-credit-limit.vue
+++ b/src/views/business/temporary-credit-limit.vue
@@ -1,5 +1,5 @@
 <template>
-  <business-crud-page :api="api" :config="config" :crud-option="option" />
+  <business-crud-page :api="api" :config="config" :crud-option="option" :menu-width="270" />
 </template>

 <script>
--- a/src/views/business/transport-plan.vue
+++ b/src/views/business/transport-plan.vue
@@ -1,5 +1,5 @@
 <template>
-  <business-crud-page :api="api" :config="config" :crud-option="option" />
+  <business-crud-page :api="api" :config="config" :crud-option="option" :menu-width="220" />
 </template>

 <script>
--- a/src/views/vehicle/maintenance-plan.vue
+++ b/src/views/vehicle/maintenance-plan.vue
@@ -172,7 +172,7 @@ export default {
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
-        menuWidth: 160,
+        menuWidth: 180,
        column: [
          {
            label: '车船类型',
--- a/src/views/vehicle/maintenance-record.vue
+++ b/src/views/vehicle/maintenance-record.vue
@@ -170,7 +170,7 @@ export default {
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
-        menuWidth: 160,
+        menuWidth: 180,
        column: [
          {
            label: '车船类型',