@tmagic/form 1.7.10 → 1.7.11
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/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +17 -47
- package/dist/es/containers/TableGroupList.js +5 -0
- package/dist/es/containers/TableGroupList.vue_vue_type_script_setup_true_lang.js +162 -0
- package/dist/es/index.js +2 -3
- package/dist/es/plugin.js +3 -4
- package/dist/es/table/Table.vue_vue_type_script_setup_true_lang.js +12 -53
- package/dist/es/table/useAdd.js +3 -16
- package/dist/tmagic-form.umd.cjs +182 -107
- package/package.json +6 -6
- package/src/containers/GroupList.vue +19 -41
- package/src/containers/TableGroupList.vue +181 -0
- package/src/index.ts +3 -2
- package/src/plugin.ts +3 -4
- package/src/table/Table.vue +14 -49
- package/src/table/type.ts +0 -1
- package/src/table/useAdd.ts +2 -18
- package/types/index.d.ts +243 -286
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { initValue } from "../utils/form.js";
|
|
2
2
|
import GroupListItem_default from "./GroupListItem.js";
|
|
3
|
-
import { Fragment,
|
|
3
|
+
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, openBlock, renderList, renderSlot } from "vue";
|
|
4
4
|
import { cloneDeep } from "lodash-es";
|
|
5
|
-
import {
|
|
6
|
-
import { Grid, Plus } from "@element-plus/icons-vue";
|
|
5
|
+
import { tMagicMessage } from "@tmagic/design";
|
|
7
6
|
//#region packages/form/src/containers/GroupList.vue?vue&type=script&setup=true&lang.ts
|
|
8
7
|
var _hoisted_1 = { class: "m-fields-group-list" };
|
|
9
8
|
var _hoisted_2 = ["innerHTML"];
|
|
@@ -29,28 +28,30 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
29
28
|
labelWidth: {},
|
|
30
29
|
prop: {},
|
|
31
30
|
size: {},
|
|
32
|
-
disabled: { type: Boolean }
|
|
31
|
+
disabled: { type: Boolean },
|
|
32
|
+
showIndex: { type: Boolean }
|
|
33
33
|
},
|
|
34
34
|
emits: ["change", "addDiffCount"],
|
|
35
35
|
setup(__props, { emit: __emit }) {
|
|
36
36
|
const props = __props;
|
|
37
37
|
const emit = __emit;
|
|
38
38
|
const mForm = inject("mForm");
|
|
39
|
-
const addable = computed(() => {
|
|
40
|
-
if (!props.name) return false;
|
|
41
|
-
if (typeof props.config.addable === "function") return props.config.addable(mForm, {
|
|
42
|
-
model: props.model[props.name],
|
|
43
|
-
formValue: mForm?.values,
|
|
44
|
-
prop: props.prop,
|
|
45
|
-
config: props.config
|
|
46
|
-
});
|
|
47
|
-
return typeof props.config.addable === "undefined" ? true : props.config.addable;
|
|
48
|
-
});
|
|
49
39
|
const changeHandler = (v, eventData) => {
|
|
50
40
|
emit("change", props.model, eventData);
|
|
51
41
|
};
|
|
52
42
|
const addHandler = async () => {
|
|
53
43
|
if (!props.name) return false;
|
|
44
|
+
if (props.config.max && props.model[props.name].length >= props.config.max) {
|
|
45
|
+
tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
if (typeof props.config.beforeAddRow === "function") {
|
|
49
|
+
if (!await props.config.beforeAddRow(mForm, {
|
|
50
|
+
model: props.model[props.name],
|
|
51
|
+
formValue: mForm?.values,
|
|
52
|
+
prop: props.prop
|
|
53
|
+
})) return;
|
|
54
|
+
}
|
|
54
55
|
let initValues = {};
|
|
55
56
|
if (typeof props.config.defaultAdd === "function") initValues = await props.config.defaultAdd(mForm, {
|
|
56
57
|
model: props.model[props.name],
|
|
@@ -84,15 +85,6 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
84
85
|
props.model[props.name].splice(Math.min(Math.max(idx2, 0), length - 1), 0, currRow);
|
|
85
86
|
emit("change", props.model[props.name]);
|
|
86
87
|
};
|
|
87
|
-
const toggleMode = () => {
|
|
88
|
-
props.config.type = "table";
|
|
89
|
-
props.config.groupItems = props.config.items;
|
|
90
|
-
props.config.items = props.config.tableItems || props.config.items.map((item) => ({
|
|
91
|
-
...item,
|
|
92
|
-
label: item.label || item.text,
|
|
93
|
-
text: null
|
|
94
|
-
}));
|
|
95
|
-
};
|
|
96
88
|
const onAddDiffCount = () => emit("addDiffCount");
|
|
97
89
|
const getLastValues = (item, index) => item?.[index] || {};
|
|
98
90
|
return (_ctx, _cache) => {
|
|
@@ -106,7 +98,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
106
98
|
return openBlock(), createBlock(GroupListItem_default, {
|
|
107
99
|
key: index,
|
|
108
100
|
model: item,
|
|
109
|
-
lastValues: getLastValues(__props.lastValues[__props.name], Number(index)),
|
|
101
|
+
lastValues: getLastValues(__props.lastValues?.[__props.name], Number(index)),
|
|
110
102
|
"is-compare": __props.isCompare,
|
|
111
103
|
config: __props.config,
|
|
112
104
|
prop: __props.prop,
|
|
@@ -133,29 +125,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
133
125
|
"group-model"
|
|
134
126
|
]);
|
|
135
127
|
}), 128)),
|
|
136
|
-
createElementVNode("div", _hoisted_4, [
|
|
137
|
-
key: 0,
|
|
138
|
-
icon: unref(Grid),
|
|
139
|
-
size: "small",
|
|
140
|
-
onClick: toggleMode
|
|
141
|
-
}, {
|
|
142
|
-
default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("切换为表格", -1)])]),
|
|
143
|
-
_: 1
|
|
144
|
-
}, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [addable.value ? (openBlock(), createBlock(unref(TMagicButton), mergeProps({
|
|
145
|
-
key: 0,
|
|
146
|
-
size: __props.config.enableToggleMode ? "small" : "default",
|
|
147
|
-
icon: unref(Plus)
|
|
148
|
-
}, __props.config.addButtonConfig?.props || { type: "primary" }, {
|
|
149
|
-
disabled: __props.disabled,
|
|
150
|
-
onClick: addHandler
|
|
151
|
-
}), {
|
|
152
|
-
default: withCtx(() => [createTextVNode(toDisplayString(__props.config.addButtonConfig?.text || "新增"), 1)]),
|
|
153
|
-
_: 1
|
|
154
|
-
}, 16, [
|
|
155
|
-
"size",
|
|
156
|
-
"icon",
|
|
157
|
-
"disabled"
|
|
158
|
-
])) : createCommentVNode("v-if", true)])])
|
|
128
|
+
createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button", { trigger: addHandler })])])
|
|
159
129
|
]);
|
|
160
130
|
};
|
|
161
131
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import TableGroupList_vue_vue_type_script_setup_true_lang_default from "./TableGroupList.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/form/src/containers/TableGroupList.vue
|
|
3
|
+
var TableGroupList_default = TableGroupList_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { TableGroupList_default as default };
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import Table_default from "../table/Table.js";
|
|
2
|
+
import GroupList_default from "./GroupList.js";
|
|
3
|
+
import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, inject, mergeProps, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
|
|
4
|
+
import { TMagicButton } from "@tmagic/design";
|
|
5
|
+
import { Grid, Plus } from "@element-plus/icons-vue";
|
|
6
|
+
//#region packages/form/src/containers/TableGroupList.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
+
var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
8
|
+
name: "MFormTableGroupList",
|
|
9
|
+
inheritAttrs: false,
|
|
10
|
+
__name: "TableGroupList",
|
|
11
|
+
props: {
|
|
12
|
+
model: {},
|
|
13
|
+
lastValues: {},
|
|
14
|
+
isCompare: { type: Boolean },
|
|
15
|
+
config: {},
|
|
16
|
+
name: {},
|
|
17
|
+
prop: {},
|
|
18
|
+
labelWidth: {},
|
|
19
|
+
disabled: { type: Boolean },
|
|
20
|
+
size: {},
|
|
21
|
+
enableToggleMode: { type: Boolean },
|
|
22
|
+
showIndex: { type: Boolean },
|
|
23
|
+
sortKey: {},
|
|
24
|
+
sort: { type: Boolean }
|
|
25
|
+
},
|
|
26
|
+
emits: [
|
|
27
|
+
"change",
|
|
28
|
+
"select",
|
|
29
|
+
"addDiffCount"
|
|
30
|
+
],
|
|
31
|
+
setup(__props, { emit: __emit }) {
|
|
32
|
+
const props = __props;
|
|
33
|
+
const emit = __emit;
|
|
34
|
+
const mForm = inject("mForm");
|
|
35
|
+
const addable = computed(() => {
|
|
36
|
+
const modelName = props.name || props.config.name || "";
|
|
37
|
+
if (!modelName) return false;
|
|
38
|
+
if (!props.model[modelName].length) return true;
|
|
39
|
+
if (typeof props.config.addable === "function") return props.config.addable(mForm, {
|
|
40
|
+
model: props.model[modelName],
|
|
41
|
+
formValue: mForm?.values,
|
|
42
|
+
prop: props.prop,
|
|
43
|
+
config: props.config
|
|
44
|
+
});
|
|
45
|
+
return typeof props.config.addable === "undefined" ? true : props.config.addable;
|
|
46
|
+
});
|
|
47
|
+
const isGroupListType = (type) => type === "groupList" || type === "group-list";
|
|
48
|
+
const displayMode = ref(isGroupListType(props.config.type) ? "groupList" : "table");
|
|
49
|
+
const calcLabelWidth = (label) => {
|
|
50
|
+
if (!label) return "0px";
|
|
51
|
+
const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
|
|
52
|
+
const chLength = label.length - zhLength;
|
|
53
|
+
return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
|
|
54
|
+
};
|
|
55
|
+
const tableConfig = computed(() => {
|
|
56
|
+
if (!isGroupListType(props.config.type)) return props.config;
|
|
57
|
+
const source = props.config;
|
|
58
|
+
return {
|
|
59
|
+
...props.config,
|
|
60
|
+
type: "table",
|
|
61
|
+
groupItems: source.items,
|
|
62
|
+
items: source.tableItems || source.items.map((item) => ({
|
|
63
|
+
...item,
|
|
64
|
+
label: item.label || item.text,
|
|
65
|
+
text: null
|
|
66
|
+
}))
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
const groupListConfig = computed(() => {
|
|
70
|
+
if (isGroupListType(props.config.type)) return props.config;
|
|
71
|
+
const source = props.config;
|
|
72
|
+
return {
|
|
73
|
+
...props.config,
|
|
74
|
+
type: "groupList",
|
|
75
|
+
tableItems: source.items,
|
|
76
|
+
items: source.groupItems || source.items.map((item) => {
|
|
77
|
+
const text = item.text || item.label;
|
|
78
|
+
return {
|
|
79
|
+
...item,
|
|
80
|
+
text,
|
|
81
|
+
labelWidth: calcLabelWidth(text),
|
|
82
|
+
span: item.span || 12
|
|
83
|
+
};
|
|
84
|
+
})
|
|
85
|
+
};
|
|
86
|
+
});
|
|
87
|
+
const currentConfig = computed(() => displayMode.value === "table" ? tableConfig.value : groupListConfig.value);
|
|
88
|
+
const addButtonSize = computed(() => {
|
|
89
|
+
if (displayMode.value === "table") return "small";
|
|
90
|
+
return props.config.enableToggleMode !== false ? "small" : "default";
|
|
91
|
+
});
|
|
92
|
+
const toggleDisplayMode = () => {
|
|
93
|
+
displayMode.value = displayMode.value === "table" ? "groupList" : "table";
|
|
94
|
+
};
|
|
95
|
+
const onChange = (v, eventData) => emit("change", v, eventData);
|
|
96
|
+
const onSelect = (...args) => emit("select", ...args);
|
|
97
|
+
const onAddDiffCount = () => emit("addDiffCount");
|
|
98
|
+
return (_ctx, _cache) => {
|
|
99
|
+
return openBlock(), createBlock(resolveDynamicComponent(displayMode.value === "table" ? Table_default : GroupList_default), mergeProps(_ctx.$attrs, {
|
|
100
|
+
model: __props.model,
|
|
101
|
+
name: `${__props.name}`,
|
|
102
|
+
config: currentConfig.value,
|
|
103
|
+
disabled: __props.disabled,
|
|
104
|
+
size: __props.size,
|
|
105
|
+
"is-compare": __props.isCompare,
|
|
106
|
+
"last-values": __props.lastValues,
|
|
107
|
+
prop: __props.prop,
|
|
108
|
+
"label-width": __props.labelWidth,
|
|
109
|
+
"show-index": __props.showIndex,
|
|
110
|
+
"sort-key": __props.sortKey,
|
|
111
|
+
sort: __props.sort,
|
|
112
|
+
onChange,
|
|
113
|
+
onSelect,
|
|
114
|
+
onAddDiffCount
|
|
115
|
+
}), {
|
|
116
|
+
"toggle-button": withCtx(() => [__props.config.enableToggleMode || __props.enableToggleMode ? (openBlock(), createBlock(unref(TMagicButton), {
|
|
117
|
+
key: 0,
|
|
118
|
+
icon: unref(Grid),
|
|
119
|
+
size: "small",
|
|
120
|
+
onClick: toggleDisplayMode
|
|
121
|
+
}, {
|
|
122
|
+
default: withCtx(() => [createTextVNode(toDisplayString(displayMode.value === "table" ? "展开配置" : "切换为表格"), 1)]),
|
|
123
|
+
_: 1
|
|
124
|
+
}, 8, ["icon"])) : createCommentVNode("v-if", true)]),
|
|
125
|
+
"add-button": withCtx(({ trigger }) => [addable.value ? (openBlock(), createBlock(unref(TMagicButton), mergeProps({
|
|
126
|
+
key: 0,
|
|
127
|
+
class: displayMode.value === "table" ? "m-form-table-add-button" : "",
|
|
128
|
+
size: addButtonSize.value,
|
|
129
|
+
plain: displayMode.value === "table",
|
|
130
|
+
icon: unref(Plus),
|
|
131
|
+
disabled: __props.disabled
|
|
132
|
+
}, currentConfig.value.addButtonConfig?.props || { type: "primary" }, { onClick: trigger }), {
|
|
133
|
+
default: withCtx(() => [createTextVNode(toDisplayString(currentConfig.value.addButtonConfig?.text || (displayMode.value === "table" ? "新增一行" : "新增")), 1)]),
|
|
134
|
+
_: 1
|
|
135
|
+
}, 16, [
|
|
136
|
+
"class",
|
|
137
|
+
"size",
|
|
138
|
+
"plain",
|
|
139
|
+
"icon",
|
|
140
|
+
"disabled",
|
|
141
|
+
"onClick"
|
|
142
|
+
])) : createCommentVNode("v-if", true)]),
|
|
143
|
+
_: 1
|
|
144
|
+
}, 16, [
|
|
145
|
+
"model",
|
|
146
|
+
"name",
|
|
147
|
+
"config",
|
|
148
|
+
"disabled",
|
|
149
|
+
"size",
|
|
150
|
+
"is-compare",
|
|
151
|
+
"last-values",
|
|
152
|
+
"prop",
|
|
153
|
+
"label-width",
|
|
154
|
+
"show-index",
|
|
155
|
+
"sort-key",
|
|
156
|
+
"sort"
|
|
157
|
+
]);
|
|
158
|
+
};
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
//#endregion
|
|
162
|
+
export { TableGroupList_vue_vue_type_script_setup_true_lang_default as default };
|
package/dist/es/index.js
CHANGED
|
@@ -13,8 +13,7 @@ import FlexLayout_default from "./containers/FlexLayout.js";
|
|
|
13
13
|
import Panel_default from "./containers/Panel.js";
|
|
14
14
|
import Row_default from "./containers/Row.js";
|
|
15
15
|
import Tabs_default from "./containers/Tabs.js";
|
|
16
|
-
import
|
|
17
|
-
import GroupList_default from "./containers/GroupList.js";
|
|
16
|
+
import TableGroupList_default from "./containers/TableGroupList.js";
|
|
18
17
|
import Text_default from "./fields/Text.js";
|
|
19
18
|
import Number_default from "./fields/Number.js";
|
|
20
19
|
import NumberRange_default from "./fields/NumberRange.js";
|
|
@@ -38,4 +37,4 @@ import plugin_default from "./plugin.js";
|
|
|
38
37
|
export * from "@tmagic/form-schema";
|
|
39
38
|
var createForm = (config) => config;
|
|
40
39
|
//#endregion
|
|
41
|
-
export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer,
|
|
40
|
+
export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, useAddField };
|
package/dist/es/plugin.js
CHANGED
|
@@ -8,8 +8,7 @@ import FlexLayout_default from "./containers/FlexLayout.js";
|
|
|
8
8
|
import Panel_default from "./containers/Panel.js";
|
|
9
9
|
import Row_default from "./containers/Row.js";
|
|
10
10
|
import Tabs_default from "./containers/Tabs.js";
|
|
11
|
-
import
|
|
12
|
-
import GroupList_default from "./containers/GroupList.js";
|
|
11
|
+
import TableGroupList_default from "./containers/TableGroupList.js";
|
|
13
12
|
import Text_default from "./fields/Text.js";
|
|
14
13
|
import Number_default from "./fields/Number.js";
|
|
15
14
|
import NumberRange_default from "./fields/NumberRange.js";
|
|
@@ -41,11 +40,11 @@ var plugin_default = { install(app, opt = {}) {
|
|
|
41
40
|
app.component("m-form-dialog", FormDialog_default);
|
|
42
41
|
app.component("m-form-container", Container_default);
|
|
43
42
|
app.component("m-form-fieldset", Fieldset_default);
|
|
44
|
-
app.component("m-form-group-list",
|
|
43
|
+
app.component("m-form-group-list", TableGroupList_default);
|
|
45
44
|
app.component("m-form-panel", Panel_default);
|
|
46
45
|
app.component("m-form-row", Row_default);
|
|
47
46
|
app.component("m-form-step", Step_default);
|
|
48
|
-
app.component("m-form-table",
|
|
47
|
+
app.component("m-form-table", TableGroupList_default);
|
|
49
48
|
app.component("m-form-tab", Tabs_default);
|
|
50
49
|
app.component("m-form-flex-layout", FlexLayout_default);
|
|
51
50
|
app.component("m-fields-text", Text_default);
|
|
@@ -6,9 +6,9 @@ import { usePagination } from "./usePagination.js";
|
|
|
6
6
|
import { useSelection } from "./useSelection.js";
|
|
7
7
|
import { useSortable } from "./useSortable.js";
|
|
8
8
|
import { useTableColumns } from "./useTableColumns.js";
|
|
9
|
-
import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
|
|
9
|
+
import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
|
|
10
10
|
import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from "@tmagic/design";
|
|
11
|
-
import { FullScreen
|
|
11
|
+
import { FullScreen } from "@element-plus/icons-vue";
|
|
12
12
|
//#region packages/form/src/table/Table.vue?vue&type=script&setup=true&lang.ts
|
|
13
13
|
var _hoisted_1 = ["innerHTML"];
|
|
14
14
|
var _hoisted_2 = { style: {
|
|
@@ -41,10 +41,6 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
41
41
|
sortKey: { default: "" },
|
|
42
42
|
text: {},
|
|
43
43
|
size: {},
|
|
44
|
-
enableToggleMode: {
|
|
45
|
-
type: Boolean,
|
|
46
|
-
default: true
|
|
47
|
-
},
|
|
48
44
|
showIndex: {
|
|
49
45
|
type: Boolean,
|
|
50
46
|
default: true
|
|
@@ -63,34 +59,17 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
63
59
|
const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentChange } = usePagination(props, modelName);
|
|
64
60
|
const { nextZIndex } = useZIndex();
|
|
65
61
|
const updateKey = ref(1);
|
|
66
|
-
const
|
|
62
|
+
const fullscreenZIndex = ref(nextZIndex());
|
|
63
|
+
const { newHandler } = useAdd(props, emit);
|
|
67
64
|
const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
|
|
68
65
|
useSortable(props, emit, tMagicTableRef, modelName, updateKey);
|
|
69
66
|
const { isFullscreen, toggleFullscreen } = useFullscreen();
|
|
67
|
+
watch(isFullscreen, (value) => {
|
|
68
|
+
if (value) fullscreenZIndex.value = nextZIndex();
|
|
69
|
+
});
|
|
70
70
|
const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
|
|
71
71
|
const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
|
|
72
72
|
const data = computed(() => props.config.pagination ? paginationData.value : props.model[modelName.value]);
|
|
73
|
-
const toggleMode = () => {
|
|
74
|
-
const calcLabelWidth = (label) => {
|
|
75
|
-
if (!label) return "0px";
|
|
76
|
-
const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
|
|
77
|
-
const chLength = label.length - zhLength;
|
|
78
|
-
return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
|
|
79
|
-
};
|
|
80
|
-
props.config.type = "groupList";
|
|
81
|
-
props.config.enableToggleMode = true;
|
|
82
|
-
props.config.tableItems = props.config.items;
|
|
83
|
-
props.config.items = props.config.groupItems || props.config.items.map((item) => {
|
|
84
|
-
const text = item.text || item.label;
|
|
85
|
-
const labelWidth = calcLabelWidth(text);
|
|
86
|
-
return {
|
|
87
|
-
...item,
|
|
88
|
-
text,
|
|
89
|
-
labelWidth,
|
|
90
|
-
span: item.span || 12
|
|
91
|
-
};
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
73
|
const sortChangeHandler = (sortOptions) => {
|
|
95
74
|
const modelName = props.name || props.config.name || "";
|
|
96
75
|
sortChange(props.model[modelName], sortOptions);
|
|
@@ -102,7 +81,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
102
81
|
disabled: !unref(isFullscreen)
|
|
103
82
|
}, [createElementVNode("div", mergeProps(_ctx.$attrs, {
|
|
104
83
|
class: ["m-fields-table-wrap", { fixed: unref(isFullscreen) }],
|
|
105
|
-
style: unref(isFullscreen) ? `z-index: ${
|
|
84
|
+
style: unref(isFullscreen) ? `z-index: ${fullscreenZIndex.value}` : ""
|
|
106
85
|
}), [createElementVNode("div", { class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }]) }, [
|
|
107
86
|
__props.config.extra ? (openBlock(), createElementBlock("span", {
|
|
108
87
|
key: 0,
|
|
@@ -139,15 +118,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
139
118
|
}, 8, ["disabled"]),
|
|
140
119
|
renderSlot(_ctx.$slots, "default"),
|
|
141
120
|
createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
|
|
142
|
-
|
|
143
|
-
key: 0,
|
|
144
|
-
icon: unref(Grid),
|
|
145
|
-
size: "small",
|
|
146
|
-
onClick: toggleMode
|
|
147
|
-
}, {
|
|
148
|
-
default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("展开配置", -1)])]),
|
|
149
|
-
_: 1
|
|
150
|
-
}, 8, ["icon"])) : createCommentVNode("v-if", true),
|
|
121
|
+
!unref(isFullscreen) ? renderSlot(_ctx.$slots, "toggle-button", { key: 0 }) : createCommentVNode("v-if", true),
|
|
151
122
|
__props.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
|
|
152
123
|
key: 1,
|
|
153
124
|
icon: unref(FullScreen),
|
|
@@ -172,7 +143,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
172
143
|
disabled: __props.disabled,
|
|
173
144
|
plain: ""
|
|
174
145
|
}, {
|
|
175
|
-
default: withCtx(() => [..._cache[
|
|
146
|
+
default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("导入EXCEL", -1)])]),
|
|
176
147
|
_: 1
|
|
177
148
|
}, 8, ["disabled"])]),
|
|
178
149
|
_: 1
|
|
@@ -185,22 +156,10 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
185
156
|
plain: "",
|
|
186
157
|
onClick: unref(clearHandler)
|
|
187
158
|
}, {
|
|
188
|
-
default: withCtx(() => [..._cache[
|
|
159
|
+
default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("清空", -1)])]),
|
|
189
160
|
_: 1
|
|
190
161
|
}, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
|
|
191
|
-
]),
|
|
192
|
-
key: 0,
|
|
193
|
-
class: "m-form-table-add-button",
|
|
194
|
-
size: "small",
|
|
195
|
-
plain: "",
|
|
196
|
-
icon: unref(Plus)
|
|
197
|
-
}, __props.config.addButtonConfig?.props || { type: "primary" }, {
|
|
198
|
-
disabled: __props.disabled,
|
|
199
|
-
onClick: _cache[0] || (_cache[0] = ($event) => unref(newHandler)())
|
|
200
|
-
}), {
|
|
201
|
-
default: withCtx(() => [createTextVNode(toDisplayString(__props.config.addButtonConfig?.text || "新增一行"), 1)]),
|
|
202
|
-
_: 1
|
|
203
|
-
}, 16, ["icon", "disabled"])) : createCommentVNode("v-if", true)]),
|
|
162
|
+
]), renderSlot(_ctx.$slots, "add-button", { trigger: unref(newHandler) })]),
|
|
204
163
|
__props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(TMagicPagination), {
|
|
205
164
|
layout: "total, sizes, prev, pager, next, jumper",
|
|
206
165
|
"hide-on-single-page": __props.model[modelName.value].length < unref(pageSize),
|
package/dist/es/table/useAdd.js
CHANGED
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
import { initValue } from "../utils/form.js";
|
|
2
|
-
import {
|
|
2
|
+
import { inject } from "vue";
|
|
3
3
|
import { tMagicMessage } from "@tmagic/design";
|
|
4
4
|
//#region packages/form/src/table/useAdd.ts
|
|
5
5
|
var useAdd = (props, emit) => {
|
|
6
6
|
const mForm = inject("mForm");
|
|
7
|
-
const addable = computed(() => {
|
|
8
|
-
const modelName = props.name || props.config.name || "";
|
|
9
|
-
if (!props.model[modelName].length) return true;
|
|
10
|
-
if (typeof props.config.addable === "function") return props.config.addable(mForm, {
|
|
11
|
-
model: props.model[modelName],
|
|
12
|
-
formValue: mForm?.values,
|
|
13
|
-
prop: props.prop
|
|
14
|
-
});
|
|
15
|
-
return typeof props.config.addable === "undefined" ? true : props.config.addable;
|
|
16
|
-
});
|
|
17
7
|
const newHandler = async (row) => {
|
|
18
8
|
const modelName = props.name || props.config.name || "";
|
|
19
9
|
if (props.config.max && props.model[modelName].length >= props.config.max) {
|
|
@@ -21,7 +11,7 @@ var useAdd = (props, emit) => {
|
|
|
21
11
|
return;
|
|
22
12
|
}
|
|
23
13
|
if (typeof props.config.beforeAddRow === "function") {
|
|
24
|
-
if (!props.config.beforeAddRow(mForm, {
|
|
14
|
+
if (!await props.config.beforeAddRow(mForm, {
|
|
25
15
|
model: props.model[modelName],
|
|
26
16
|
formValue: mForm?.values,
|
|
27
17
|
prop: props.prop
|
|
@@ -62,10 +52,7 @@ var useAdd = (props, emit) => {
|
|
|
62
52
|
value: inputs
|
|
63
53
|
}] });
|
|
64
54
|
};
|
|
65
|
-
return {
|
|
66
|
-
addable,
|
|
67
|
-
newHandler
|
|
68
|
-
};
|
|
55
|
+
return { newHandler };
|
|
69
56
|
};
|
|
70
57
|
//#endregion
|
|
71
58
|
export { useAdd };
|