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 叠加导致文字间距过宽 - 优化操作列按钮过多时自动换行展示逻辑,确保按钮不被裁切
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user