qidian-vue-ui 2.1.1 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/columns-controller/index.css +8 -8
- package/dist/components/columns-controller/index.vue.mjs +1 -1
- package/dist/components/columns-controller/index.vue2.mjs +29 -20
- package/dist/components/columns-controller/props.d.ts +1 -0
- package/dist/components/columns-controller/props.mjs +2 -1
- package/dist/components/columns-controller/types.d.ts +2 -0
- package/dist/components/crud/table/columnsCache.d.ts +5 -3
- package/dist/components/crud/table/columnsCache.mjs +10 -19
- package/dist/components/crud/table/index.css +11 -11
- package/dist/components/crud/table/index.vue.mjs +1 -1
- package/dist/components/crud/table/index.vue2.mjs +73 -47
- package/dist/components/crud/table/props.d.ts +1 -0
- package/dist/components/crud/tabs-table/index.vue.d.ts +1 -0
- package/dist/components/crud/tabs-table/index.vue2.mjs +1 -0
- package/dist/components/crud/tabs-table/props.d.ts +1 -0
- package/dist/components/input-number/props.d.ts +1 -1
- package/dist/components/input-number/props.mjs +1 -1
- package/dist/components/service/table/columnsCompensation.d.ts +39 -0
- package/dist/components/service/table/columnsCompensation.mjs +123 -0
- package/dist/components/service/table/index.css +72 -72
- package/dist/components/service/table/index.vue.mjs +1 -1
- package/dist/components/service/table/index.vue2.mjs +83 -6
- package/dist/components/service/table/props.d.ts +1 -0
- package/dist/components/service/table/props.mjs +1 -0
- package/dist/components/service/table/types.d.ts +1 -0
- package/dist/components/service-dialog-table-select/index.vue2.mjs +3 -0
- package/dist/components/service-dialog-table-select/props.d.ts +1 -0
- package/dist/components/service-dialog-tabs-table-select/index.vue2.mjs +3 -0
- package/dist/components/service-dialog-tabs-table-select/props.d.ts +1 -0
- package/dist/components/service-popup-table-select/index.vue2.mjs +3 -0
- package/dist/components/service-popup-table-select/props.d.ts +1 -0
- package/package.json +2 -1
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
.qd-columns-controller__title[data-v-
|
|
1
|
+
.qd-columns-controller__title[data-v-ec921dfa] {
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
}
|
|
5
|
-
.qd-columns-controller__drag[data-v-
|
|
5
|
+
.qd-columns-controller__drag[data-v-ec921dfa] {
|
|
6
6
|
cursor: move;
|
|
7
7
|
margin-right: var(--td-comp-margin-m);
|
|
8
8
|
}
|
|
9
|
-
.qd-columns-controller__ghost[data-v-
|
|
9
|
+
.qd-columns-controller__ghost[data-v-ec921dfa] {
|
|
10
10
|
opacity: 0.5;
|
|
11
11
|
background: var(--td-brand-color-light);
|
|
12
12
|
}
|
|
13
|
-
.qd-columns-controller__chosen[data-v-
|
|
13
|
+
.qd-columns-controller__chosen[data-v-ec921dfa] {
|
|
14
14
|
background: var(--td-brand-color-light-hover);
|
|
15
15
|
}
|
|
16
|
-
.qd-columns-controller__width-input[data-v-
|
|
16
|
+
.qd-columns-controller__width-input[data-v-ec921dfa] {
|
|
17
17
|
width: 100%;
|
|
18
18
|
}
|
|
19
|
-
.qd-columns-controller__help[data-v-
|
|
19
|
+
.qd-columns-controller__help[data-v-ec921dfa] {
|
|
20
20
|
font-size: var(--td-font-size-title-large);
|
|
21
21
|
}
|
|
22
|
-
.qd-columns-controller__footer[data-v-
|
|
22
|
+
.qd-columns-controller__footer[data-v-ec921dfa] {
|
|
23
23
|
width: 100%;
|
|
24
24
|
display: flex;
|
|
25
25
|
justify-content: space-between;
|
|
26
26
|
align-items: center;
|
|
27
27
|
}
|
|
28
|
-
.qd-columns-controller__footer-actions[data-v-
|
|
28
|
+
.qd-columns-controller__footer-actions[data-v-ec921dfa] {
|
|
29
29
|
flex: 1 1 0;
|
|
30
30
|
overflow: hidden;
|
|
31
31
|
}
|
|
@@ -2,7 +2,7 @@ import './index.css'
|
|
|
2
2
|
import _sfc_main from "./index.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdColumnsController = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdColumnsController = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ec921dfa"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdColumnsController as default
|
|
8
8
|
};
|
|
@@ -6,6 +6,7 @@ import Sortable from "../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/so
|
|
|
6
6
|
import { MoveIcon, HelpCircleIcon } from "tdesign-icons-vue-next";
|
|
7
7
|
import { Space, Link, Divider, InputNumber, Button, Tooltip } from "tdesign-vue-next";
|
|
8
8
|
import { useConfig } from "../config-provider/useConfig.mjs";
|
|
9
|
+
import { COMPONENT_FONT_MAP, compensateWidth, calcOperationLinksWidth } from "../service/table/columnsCompensation.mjs";
|
|
9
10
|
import { qdColumnsControllerProps } from "./props.mjs";
|
|
10
11
|
import _sfc_main$1 from "../dialog/index.vue.mjs";
|
|
11
12
|
/* empty css */
|
|
@@ -31,6 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
31
32
|
props: /* @__PURE__ */ mergeDefaults({
|
|
32
33
|
columns: {},
|
|
33
34
|
defaultColumns: {},
|
|
35
|
+
size: {},
|
|
34
36
|
visible: {
|
|
35
37
|
type: Boolean
|
|
36
38
|
}
|
|
@@ -52,28 +54,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
52
54
|
t: tDialog
|
|
53
55
|
} = useConfig("dialog");
|
|
54
56
|
const {
|
|
55
|
-
t
|
|
57
|
+
t,
|
|
58
|
+
size: globalComponentSize
|
|
56
59
|
} = useConfig("columnsController");
|
|
57
60
|
const dialogRef = useTemplateRef("dialog");
|
|
58
61
|
const tableRef = useTemplateRef("tableRef");
|
|
59
62
|
const flatColumns = ref([]);
|
|
60
63
|
const hasFormItemColumns = computed(() => hasFormItem(props.columns));
|
|
61
|
-
const tableColumns =
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
const tableColumns = computed(() => {
|
|
65
|
+
const tableSize = props.size ?? "small";
|
|
66
|
+
const fontSize = COMPONENT_FONT_MAP[globalComponentSize.value ?? "medium"] ?? COMPONENT_FONT_MAP.medium;
|
|
67
|
+
const widest = (...texts) => texts.reduce((a, b) => b.length > a.length ? b : a);
|
|
68
|
+
return [{
|
|
69
|
+
colKey: "title",
|
|
70
|
+
title: t("columnNameText"),
|
|
71
|
+
minWidth: compensateWidth(200, tableSize, globalComponentSize.value ?? "medium")
|
|
72
|
+
}, {
|
|
73
|
+
colKey: "width",
|
|
74
|
+
title: t("widthText"),
|
|
75
|
+
width: compensateWidth(250, tableSize, globalComponentSize.value ?? "medium"),
|
|
76
|
+
align: "center"
|
|
77
|
+
}, {
|
|
78
|
+
colKey: "operation",
|
|
79
|
+
title: t("operationText"),
|
|
80
|
+
width: calcOperationLinksWidth([t("moveUpText"), t("moveDownText"), widest(t("pinLeftText"), t("unpinText")), widest(t("pinRightText"), t("unpinText"))], tableSize, fontSize),
|
|
81
|
+
align: "center",
|
|
82
|
+
fixed: "right"
|
|
83
|
+
}];
|
|
84
|
+
});
|
|
77
85
|
const selectedColKeys = computed(() => flatColumns.value.filter((c) => !c.hidden).map((c) => c.colKey));
|
|
78
86
|
function hasFormItem(columns2) {
|
|
79
87
|
return columns2?.some((column) => column.formItem || hasFormItem(column.children)) ?? false;
|
|
@@ -218,7 +226,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
218
226
|
ref_key: "tableRef",
|
|
219
227
|
ref: tableRef,
|
|
220
228
|
data: flatColumns.value,
|
|
221
|
-
columns: tableColumns,
|
|
229
|
+
columns: tableColumns.value,
|
|
230
|
+
size: __props.size,
|
|
231
|
+
"width-compensation": false,
|
|
222
232
|
"row-key": "colKey",
|
|
223
233
|
"select-type": hasFormItemColumns.value ? void 0 : "multiple",
|
|
224
234
|
"selected-row-keys": selectedColKeys.value,
|
|
@@ -244,7 +254,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
244
254
|
modelValue: row.width,
|
|
245
255
|
"onUpdate:modelValue": ($event) => row.width = $event,
|
|
246
256
|
min: 50,
|
|
247
|
-
max: 1e3,
|
|
248
257
|
step: 10,
|
|
249
258
|
suffix: "px",
|
|
250
259
|
placeholder: "auto"
|
|
@@ -291,7 +300,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
291
300
|
_: 2
|
|
292
301
|
}, 1024)]),
|
|
293
302
|
_: 1
|
|
294
|
-
}, 8, ["data", "select-type", "selected-row-keys"])]),
|
|
303
|
+
}, 8, ["data", "columns", "size", "select-type", "selected-row-keys"])]),
|
|
295
304
|
_: 1
|
|
296
305
|
}, 8, ["visible", "header"]);
|
|
297
306
|
};
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import type { TableRowData } from 'tdesign-vue-next';
|
|
2
2
|
import type { QdCrudTableCol } from '../crud/table/types';
|
|
3
3
|
import type { QdDialogInstanceFunctions, QdDialogProps } from '../dialog/types';
|
|
4
|
+
import type { QdServiceTableProps } from '../service';
|
|
4
5
|
export interface QdColumnsControllerCol extends Pick<QdCrudTableCol, 'title' | 'hidden' | 'width' | 'minWidth' | 'fixed' | 'colKey'> {
|
|
5
6
|
}
|
|
6
7
|
export interface QdColumnsControllerProps<D extends TableRowData = TableRowData> extends Pick<QdDialogProps, 'visible'> {
|
|
7
8
|
columns?: QdCrudTableCol<D>[];
|
|
8
9
|
defaultColumns?: QdCrudTableCol<D>[];
|
|
10
|
+
size?: QdServiceTableProps['size'] | 'mini';
|
|
9
11
|
}
|
|
10
12
|
export interface QdColumnsControllerInstanceFunctions extends QdDialogInstanceFunctions {
|
|
11
13
|
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
export * from '../../service/table/columnsCompensation';
|
|
2
2
|
import type { QdColumnsControllerCol } from '../../columns-controller/types';
|
|
3
|
-
import type {
|
|
3
|
+
import type { QdColumnWidthStore } from '../../service/table/columnsCompensation';
|
|
4
4
|
export declare function getColumnsStorageKey(key: string): string;
|
|
5
5
|
export interface QdCrudTableCacheCol extends Omit<QdColumnsControllerCol, 'title'> {
|
|
6
6
|
}
|
|
7
|
-
export
|
|
7
|
+
export interface QdCrudTableColumnStore extends QdColumnWidthStore<QdCrudTableCacheCol> {
|
|
8
|
+
}
|
|
9
|
+
export declare function normalizeColumnStore(raw: unknown): QdCrudTableColumnStore;
|
|
@@ -2,28 +2,19 @@ const COLUMNS_CACHE_PREFIX = "qd-crud-table-columns";
|
|
|
2
2
|
function getColumnsStorageKey(key) {
|
|
3
3
|
return `${COLUMNS_CACHE_PREFIX}:${key}`;
|
|
4
4
|
}
|
|
5
|
-
function
|
|
6
|
-
if (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const originalCol = originalMap.get(cachedCol.colKey);
|
|
10
|
-
const { hidden, width, minWidth, fixed } = cachedCol;
|
|
11
|
-
const reOther = {
|
|
12
|
-
...hidden === void 0 ? {} : { hidden },
|
|
13
|
-
width,
|
|
14
|
-
minWidth,
|
|
15
|
-
fixed
|
|
16
|
-
};
|
|
5
|
+
function normalizeColumnStore(raw) {
|
|
6
|
+
if (Array.isArray(raw)) return { columns: raw };
|
|
7
|
+
if (raw && typeof raw === "object") {
|
|
8
|
+
const store = raw;
|
|
17
9
|
return {
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
columns: store.columns ?? [],
|
|
11
|
+
tableSize: store.tableSize,
|
|
12
|
+
globalSize: store.globalSize
|
|
20
13
|
};
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const newCols = original.filter((col) => col.colKey && !cachedKeySet.has(col.colKey));
|
|
24
|
-
return [...cachedCols, ...newCols];
|
|
14
|
+
}
|
|
15
|
+
return { columns: [] };
|
|
25
16
|
}
|
|
26
17
|
export {
|
|
27
18
|
getColumnsStorageKey,
|
|
28
|
-
|
|
19
|
+
normalizeColumnStore
|
|
29
20
|
};
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
.qd-crud-table[data-v-
|
|
1
|
+
.qd-crud-table[data-v-df12a161] {
|
|
2
2
|
width: 100%;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
}
|
|
6
|
-
.qd-crud-table > .qd-crud-search:not(.qd-crud-search--hide) + .qd-crud-table__body[data-v-
|
|
6
|
+
.qd-crud-table > .qd-crud-search:not(.qd-crud-search--hide) + .qd-crud-table__body[data-v-df12a161] {
|
|
7
7
|
margin-top: var(--td-comp-margin-l);
|
|
8
8
|
}
|
|
9
|
-
.qd-crud-table__body[data-v-
|
|
9
|
+
.qd-crud-table__body[data-v-df12a161] > .t-loading__parent > .t-card__body {
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
}
|
|
13
|
-
.qd-crud-table__body[data-v-
|
|
13
|
+
.qd-crud-table__body[data-v-df12a161] > .t-loading__parent > .t-card__body > .qd-service-table .t-table__pagination {
|
|
14
14
|
padding-bottom: 0;
|
|
15
15
|
}
|
|
16
|
-
.qd-crud-table--fit-parent-height[data-v-
|
|
16
|
+
.qd-crud-table--fit-parent-height[data-v-df12a161] {
|
|
17
17
|
height: 100%;
|
|
18
18
|
}
|
|
19
|
-
.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-
|
|
19
|
+
.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-df12a161] {
|
|
20
20
|
flex: auto;
|
|
21
21
|
}
|
|
22
|
-
.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-
|
|
22
|
+
.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-df12a161] > .t-loading__parent > .t-card__body {
|
|
23
23
|
height: 100%;
|
|
24
24
|
min-height: 443px;
|
|
25
25
|
}
|
|
26
|
-
.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-
|
|
26
|
+
.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-df12a161] > .t-loading__parent > .t-card__body > .qd-service-table {
|
|
27
27
|
flex: 1 1 0;
|
|
28
28
|
overflow: hidden;
|
|
29
29
|
}
|
|
30
|
-
.qd-crud-table__toolbar[data-v-
|
|
30
|
+
.qd-crud-table__toolbar[data-v-df12a161] {
|
|
31
31
|
display: flex;
|
|
32
32
|
justify-content: space-between;
|
|
33
33
|
}
|
|
34
|
-
.qd-crud-table__toolbar--has-space-item + .qd-service-table[data-v-
|
|
34
|
+
.qd-crud-table__toolbar--has-space-item + .qd-service-table[data-v-df12a161] {
|
|
35
35
|
margin-top: var(--td-comp-margin-l);
|
|
36
36
|
}
|
|
37
|
-
.qd-crud-table__toolbar-separator[data-v-
|
|
37
|
+
.qd-crud-table__toolbar-separator[data-v-df12a161] {
|
|
38
38
|
display: inline-block;
|
|
39
39
|
padding-left: var(--td-comp-paddingLR-s);
|
|
40
40
|
}
|
|
@@ -2,7 +2,7 @@ import './index.css'
|
|
|
2
2
|
import _sfc_main from "./index.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdCrudTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdCrudTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-df12a161"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdCrudTable as default
|
|
8
8
|
};
|
|
@@ -6,9 +6,10 @@ import { SearchIcon, RefreshIcon, UnfoldLessIcon, UnfoldMoreIcon, SettingIcon, A
|
|
|
6
6
|
import { Space, Button, Tooltip, Divider, Link } from "tdesign-vue-next";
|
|
7
7
|
import { useConfig } from "../../config-provider/useConfig.mjs";
|
|
8
8
|
import { qdServiceTableTreeConfig } from "../../service/table/props.mjs";
|
|
9
|
-
import { getColumnsStorageKey,
|
|
9
|
+
import { getColumnsStorageKey, normalizeColumnStore } from "./columnsCache.mjs";
|
|
10
10
|
import { qdCrudTableProps } from "./props.mjs";
|
|
11
11
|
import { useModal } from "../../../hooks/useModal.mjs";
|
|
12
|
+
import { COMPONENT_FONT_MAP, mergeColumnsWithCache, applySizeCompensation, OPERATION_EXTRA_WIDTH, SIZE_PADDING_MAP, calcTextWidth } from "../../service/table/columnsCompensation.mjs";
|
|
12
13
|
import merge from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
|
|
13
14
|
import cloneDeep from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/cloneDeep.mjs";
|
|
14
15
|
import QdCrudSearch from "../search/index.vue.mjs";
|
|
@@ -77,6 +78,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
77
78
|
columns: {},
|
|
78
79
|
rowKey: {},
|
|
79
80
|
size: {},
|
|
81
|
+
widthCompensation: {
|
|
82
|
+
type: Boolean
|
|
83
|
+
},
|
|
80
84
|
selectType: {},
|
|
81
85
|
activeRowType: {
|
|
82
86
|
type: [String, Boolean]
|
|
@@ -422,17 +426,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
422
426
|
alertWarning,
|
|
423
427
|
confirm
|
|
424
428
|
} = useModal();
|
|
425
|
-
const COMPONENT_FONT_MAP = {
|
|
426
|
-
large: 16,
|
|
427
|
-
medium: 14,
|
|
428
|
-
small: 12
|
|
429
|
-
};
|
|
430
|
-
const SIZE_PADDING_MAP = {
|
|
431
|
-
large: 48,
|
|
432
|
-
medium: 32,
|
|
433
|
-
small: 16,
|
|
434
|
-
mini: 12
|
|
435
|
-
};
|
|
436
429
|
const treeIsExpand = computed(() => !!expandedTreeNodes.value?.length);
|
|
437
430
|
const dialogFormMap = reactive({});
|
|
438
431
|
const ifRenderMap = reactive({});
|
|
@@ -539,8 +532,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
539
532
|
}
|
|
540
533
|
const operationLength = reRowActions.length;
|
|
541
534
|
if (operationLength) {
|
|
542
|
-
const operationSize = serviceTableOptions.size ?? tableGlobalConfig.value?.size ?? "
|
|
543
|
-
const operationFontSize = COMPONENT_FONT_MAP[globalComponentSize.value ?? "medium"] ??
|
|
535
|
+
const operationSize = serviceTableOptions.size ?? tableGlobalConfig.value?.size ?? "small";
|
|
536
|
+
const operationFontSize = COMPONENT_FONT_MAP[globalComponentSize.value ?? "medium"] ?? COMPONENT_FONT_MAP.medium;
|
|
544
537
|
const operationIdx = reColumns.findIndex((item) => item.colKey === "operation");
|
|
545
538
|
const defaultOperation = {
|
|
546
539
|
title: t("operationText"),
|
|
@@ -588,7 +581,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
588
581
|
manual: shouldValidateInitialSearch.value || serviceTableOptions.manual,
|
|
589
582
|
maxHeight: fitParentHeight ? serviceTableOptions.maxHeight : void 0,
|
|
590
583
|
selectType: void 0,
|
|
591
|
-
transformParams
|
|
584
|
+
transformParams,
|
|
585
|
+
// crud 自带补偿 + 列缓存体系,禁止内嵌 service-table 再补偿(防双重补偿)
|
|
586
|
+
widthCompensation: false
|
|
592
587
|
},
|
|
593
588
|
formOptions: form,
|
|
594
589
|
detailOptions: detail,
|
|
@@ -624,12 +619,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
624
619
|
}
|
|
625
620
|
return getColumnsStorageKey(key);
|
|
626
621
|
});
|
|
627
|
-
const
|
|
622
|
+
const cachedColumnStore = useLocalStorage(finalCacheColumnsKey, {
|
|
623
|
+
columns: []
|
|
624
|
+
});
|
|
625
|
+
const columnStore = computed(() => normalizeColumnStore(cachedColumnStore.value));
|
|
626
|
+
const compensationTableSize = computed(() => reProps.value.serviceTableOptions.size ?? tableGlobalConfig.value?.size ?? "small");
|
|
627
|
+
const compensationGlobalSize = computed(() => globalComponentSize.value ?? "medium");
|
|
628
628
|
const hasFormItemColumns = computed(() => hasFormItem(reProps.value.columns));
|
|
629
629
|
const mergeColumns = computed({
|
|
630
630
|
get: () => {
|
|
631
631
|
const original = reProps.value.columns;
|
|
632
|
-
const
|
|
632
|
+
const cachedColumns = columnStore.value.columns;
|
|
633
|
+
const mergedColumns = mergeColumnsWithCache(original, cachedColumns);
|
|
633
634
|
if (!hasFormItemColumns.value) return mergedColumns;
|
|
634
635
|
return mergedColumns.map((column) => ({
|
|
635
636
|
...column,
|
|
@@ -637,19 +638,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
637
638
|
}));
|
|
638
639
|
},
|
|
639
640
|
set: (val) => {
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
641
|
+
cachedColumnStore.value = {
|
|
642
|
+
...columnStore.value,
|
|
643
|
+
columns: val.map(({
|
|
644
|
+
colKey,
|
|
645
|
+
hidden,
|
|
646
|
+
width,
|
|
647
|
+
minWidth,
|
|
648
|
+
fixed
|
|
649
|
+
}) => ({
|
|
650
|
+
colKey,
|
|
651
|
+
hidden: hasFormItemColumns.value ? false : hidden,
|
|
652
|
+
width,
|
|
653
|
+
minWidth,
|
|
654
|
+
fixed
|
|
655
|
+
}))
|
|
656
|
+
};
|
|
653
657
|
}
|
|
654
658
|
});
|
|
655
659
|
const showColumns = computed(() => mergeColumns.value?.filter((item) => !item.hidden));
|
|
@@ -733,6 +737,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
733
737
|
function toggleSearchVisible() {
|
|
734
738
|
searchVisible.value = !searchVisible.value;
|
|
735
739
|
}
|
|
740
|
+
function isSameWidthAsOriginal(next) {
|
|
741
|
+
const originalMap = new Map(reProps.value.columns.map((col) => [col.colKey, col]));
|
|
742
|
+
return next.columns.every((col) => {
|
|
743
|
+
const original = originalMap.get(col.colKey);
|
|
744
|
+
if (!original) return false;
|
|
745
|
+
return (col.width ?? void 0) === (original.width ?? void 0) && (col.minWidth ?? void 0) === (original.minWidth ?? void 0);
|
|
746
|
+
});
|
|
747
|
+
}
|
|
748
|
+
function syncColumnSizeCompensation() {
|
|
749
|
+
const prev = columnStore.value;
|
|
750
|
+
const next = applySizeCompensation(prev, reProps.value.columns, compensationTableSize.value, compensationGlobalSize.value, {
|
|
751
|
+
operation: {
|
|
752
|
+
authoredColumns: props.columns,
|
|
753
|
+
extraWidth: OPERATION_EXTRA_WIDTH
|
|
754
|
+
}
|
|
755
|
+
});
|
|
756
|
+
if (next === prev) return;
|
|
757
|
+
if (!prev.columns.length && isSameWidthAsOriginal(next)) return;
|
|
758
|
+
cachedColumnStore.value = next;
|
|
759
|
+
}
|
|
736
760
|
function toggleTreeExpandAll() {
|
|
737
761
|
if (treeIsExpand.value) tableRef.value?.foldAll();
|
|
738
762
|
else tableRef.value?.expandAll();
|
|
@@ -757,13 +781,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
757
781
|
if (!hasChanged) return;
|
|
758
782
|
mergeColumns.value = newColumns;
|
|
759
783
|
};
|
|
760
|
-
function
|
|
761
|
-
return [...text].reduce((width, char) => {
|
|
762
|
-
if (char.charCodeAt(0) > 255) return width + fontSize;
|
|
763
|
-
return width + Math.round(fontSize * (/[A-Z]/.test(char) ? 0.79 : 0.57));
|
|
764
|
-
}, 0);
|
|
765
|
-
}
|
|
766
|
-
function getActionWidth(action, row, fontSize = 14) {
|
|
784
|
+
function getActionWidth(action, row, fontSize = COMPONENT_FONT_MAP.medium) {
|
|
767
785
|
if (action.component) return Math.round(fontSize * 2);
|
|
768
786
|
let iconWidth = 0;
|
|
769
787
|
if (action.prefixIcon) {
|
|
@@ -796,11 +814,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
796
814
|
}
|
|
797
815
|
return ifRender !== false;
|
|
798
816
|
}
|
|
799
|
-
function calcOperationWidth(rowActions, rows, size = "
|
|
817
|
+
function calcOperationWidth(rowActions, rows, size = "small", fontSize = COMPONENT_FONT_MAP.medium) {
|
|
800
818
|
const permittedActions = rowActions.filter((action) => hasPermiOr(action.permi, false));
|
|
801
819
|
if (!permittedActions.length) return 0;
|
|
802
|
-
const cellPadding = SIZE_PADDING_MAP[size] ??
|
|
803
|
-
const sumWidth = (actions, row) => actions.reduce((width, action) => width + getActionWidth(action, row, fontSize), 0) + (actions.length - 1) * 25 + cellPadding +
|
|
820
|
+
const cellPadding = SIZE_PADDING_MAP[size] ?? SIZE_PADDING_MAP.small;
|
|
821
|
+
const sumWidth = (actions, row) => actions.reduce((width, action) => width + getActionWidth(action, row, fontSize), 0) + (actions.length - 1) * 25 + cellPadding + OPERATION_EXTRA_WIDTH;
|
|
804
822
|
if (!rows?.length) {
|
|
805
823
|
return sumWidth(permittedActions);
|
|
806
824
|
}
|
|
@@ -1205,12 +1223,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1205
1223
|
function syncToolbarHasSpaceItem() {
|
|
1206
1224
|
toolbarHasSpaceItem.value = !!toolbarRef.value?.querySelector(".t-space-item");
|
|
1207
1225
|
}
|
|
1226
|
+
watch([compensationTableSize, compensationGlobalSize, finalCacheColumnsKey], syncColumnSizeCompensation, {
|
|
1227
|
+
immediate: true
|
|
1228
|
+
});
|
|
1208
1229
|
watch(hasFormItemColumns, (hasFormItem2) => {
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1230
|
+
const columns = columnStore.value.columns;
|
|
1231
|
+
if (!hasFormItem2 || !columns.some((column) => column.hidden)) return;
|
|
1232
|
+
cachedColumnStore.value = {
|
|
1233
|
+
...columnStore.value,
|
|
1234
|
+
columns: columns.map((column) => ({
|
|
1235
|
+
...column,
|
|
1236
|
+
hidden: false
|
|
1237
|
+
}))
|
|
1238
|
+
};
|
|
1214
1239
|
}, {
|
|
1215
1240
|
immediate: true
|
|
1216
1241
|
});
|
|
@@ -1457,8 +1482,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1457
1482
|
"onUpdate:visible": _cache[10] || (_cache[10] = ($event) => isRef(columnControllerVisible) ? columnControllerVisible.value = $event : null),
|
|
1458
1483
|
columns: mergeColumns.value,
|
|
1459
1484
|
"onUpdate:columns": _cache[11] || (_cache[11] = ($event) => mergeColumns.value = $event),
|
|
1460
|
-
"default-columns": reProps.value.columns
|
|
1461
|
-
|
|
1485
|
+
"default-columns": reProps.value.columns,
|
|
1486
|
+
size: compensationTableSize.value
|
|
1487
|
+
}, null, 8, ["visible", "columns", "default-columns", "size"])], 2);
|
|
1462
1488
|
};
|
|
1463
1489
|
}
|
|
1464
1490
|
});
|
|
@@ -24,6 +24,7 @@ export declare const qdCrudTableProps: {
|
|
|
24
24
|
readonly emptyImage: true;
|
|
25
25
|
readonly readonly: undefined;
|
|
26
26
|
readonly lazyForm: true;
|
|
27
|
+
readonly widthCompensation: true;
|
|
27
28
|
readonly editCellValidationBlock: "error";
|
|
28
29
|
readonly cellSelectable: undefined;
|
|
29
30
|
readonly cellClipboard: true;
|
|
@@ -192,6 +192,7 @@ declare const _default: <D extends TableRowData = TableRowData, R = unknown, P =
|
|
|
192
192
|
onSuccess?: ((data: import("qidian-shared").ServicePageDataType<D>) => void) | undefined;
|
|
193
193
|
manual?: boolean | undefined;
|
|
194
194
|
cellSelectable?: boolean | undefined;
|
|
195
|
+
widthCompensation?: boolean | undefined;
|
|
195
196
|
selectType?: "single" | "multiple" | undefined;
|
|
196
197
|
cellClipboard?: boolean | undefined;
|
|
197
198
|
onCellCopy?: ((context: import("../../service/table/types").QdServiceTableCellCopyContext<D>) => void) | undefined;
|
|
@@ -18,6 +18,7 @@ export declare const qdCrudTabsTableProps: {
|
|
|
18
18
|
readonly emptyImage: true;
|
|
19
19
|
readonly readonly: undefined;
|
|
20
20
|
readonly lazyForm: true;
|
|
21
|
+
readonly widthCompensation: true;
|
|
21
22
|
readonly editCellValidationBlock: "error";
|
|
22
23
|
readonly cellSelectable: undefined;
|
|
23
24
|
readonly cellClipboard: true;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { TableRowData } from 'tdesign-vue-next';
|
|
2
|
+
import type { QdServiceTableCol } from './types';
|
|
3
|
+
export declare const SIZE_PADDING_MAP: Record<string, number>;
|
|
4
|
+
export declare const COMPONENT_FONT_MAP: Record<string, number>;
|
|
5
|
+
export declare const GLOBAL_SIZE_RATIO_MAP: Record<string, number>;
|
|
6
|
+
export declare const OPERATION_EXTRA_WIDTH = 8;
|
|
7
|
+
export type QdCompensatableCol<D extends TableRowData = TableRowData> = QdServiceTableCol<D> & {
|
|
8
|
+
hidden?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export interface QdCachedCol {
|
|
11
|
+
colKey: string;
|
|
12
|
+
hidden?: boolean;
|
|
13
|
+
width?: QdServiceTableCol['width'];
|
|
14
|
+
minWidth?: QdServiceTableCol['minWidth'];
|
|
15
|
+
fixed?: QdServiceTableCol['fixed'];
|
|
16
|
+
}
|
|
17
|
+
export interface QdColumnWidthStore<C extends QdCachedCol = QdCachedCol> {
|
|
18
|
+
columns: C[];
|
|
19
|
+
tableSize?: string;
|
|
20
|
+
globalSize?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function resolveSizeRatio(globalSize?: string): number;
|
|
23
|
+
export declare function resolvePaddingDelta(tableSize?: string): number;
|
|
24
|
+
export declare function compensateWidth(base: number, tableSize?: string, globalSize?: string): number;
|
|
25
|
+
export declare function decompensateWidth(width: number, tableSize?: string, globalSize?: string): number;
|
|
26
|
+
export declare function calcTextWidth(text: string, fontSize: number): number;
|
|
27
|
+
export declare function calcOperationLinksWidth(links: string[], tableSize?: string, fontSize?: number): number;
|
|
28
|
+
export declare function isSizeExemptColumn<D extends TableRowData>(col?: QdCompensatableCol<D>): boolean;
|
|
29
|
+
export declare function isCompensatableColumn<D extends TableRowData>(col?: QdCompensatableCol<D>): boolean;
|
|
30
|
+
export declare function mergeColumnsWithCache<C extends {
|
|
31
|
+
colKey?: unknown;
|
|
32
|
+
} = QdCompensatableCol>(original: C[], cached: QdCachedCol[] | undefined): C[];
|
|
33
|
+
export interface SizeCompensationOptions<D extends TableRowData = TableRowData> {
|
|
34
|
+
operation?: {
|
|
35
|
+
authoredColumns?: QdCompensatableCol<D>[];
|
|
36
|
+
extraWidth: number;
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
export declare function applySizeCompensation<C extends QdCachedCol = QdCachedCol, D extends TableRowData = TableRowData>(store: QdColumnWidthStore<C>, originalColumns: QdCompensatableCol<D>[], nextTableSize: string, nextGlobalSize: string, options?: SizeCompensationOptions<D>): QdColumnWidthStore<C>;
|