vue-super-crud 1.7.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/.browserslistrc +3 -0
- package/.versionrc.json +36 -0
- package/CHANGELOG.md +232 -0
- package/LICENSE +201 -0
- package/README.md +46 -0
- package/babel.config.js +12 -0
- package/build/alias.js +10 -0
- package/build/build.js +52 -0
- package/build/config.js +70 -0
- package/deploy.bat +14 -0
- package/docs/.vuepress/components/button/base.vue +88 -0
- package/docs/.vuepress/components/common/code-format.vue +331 -0
- package/docs/.vuepress/components/commonConfig/presetCodeTemplate/base.vue +68 -0
- package/docs/.vuepress/components/commonConfig/presetCodeTemplate/customParams.vue +73 -0
- package/docs/.vuepress/components/commonConfig/renderType/component.vue +160 -0
- package/docs/.vuepress/components/commonConfig/renderType/formatter.vue +49 -0
- package/docs/.vuepress/components/commonConfig/renderType/render.vue +91 -0
- package/docs/.vuepress/components/commonConfig/renderType/slot.vue +63 -0
- package/docs/.vuepress/components/crud/baseUse/baseUse.vue +98 -0
- package/docs/.vuepress/components/crud/baseUse/columnAction.vue +72 -0
- package/docs/.vuepress/components/crud/baseUse/columnWidth.vue +107 -0
- package/docs/.vuepress/components/crud/baseUse/handleRow.vue +65 -0
- package/docs/.vuepress/components/crud/baseUse/height.vue +82 -0
- package/docs/.vuepress/components/crud/baseUse/index.vue +54 -0
- package/docs/.vuepress/components/crud/baseUse/loading.vue +70 -0
- package/docs/.vuepress/components/crud/baseUse/pagination.vue +108 -0
- package/docs/.vuepress/components/crud/baseUse/selection.vue +114 -0
- package/docs/.vuepress/components/crud/baseUse/summaryMethod.vue +118 -0
- package/docs/.vuepress/components/crud/baseUse/title.vue +54 -0
- package/docs/.vuepress/components/crud/baseUse/toolbar.vue +69 -0
- package/docs/.vuepress/components/crud/buttons/common.vue +115 -0
- package/docs/.vuepress/components/crud/buttons/fast.vue +82 -0
- package/docs/.vuepress/components/crud/contextMenu/base.vue +72 -0
- package/docs/.vuepress/components/crud/copy.vue +52 -0
- package/docs/.vuepress/components/crud/crudEvents/api.vue +157 -0
- package/docs/.vuepress/components/crud/crudEvents/deleteTip.vue +93 -0
- package/docs/.vuepress/components/crud/crudEvents/events.vue +188 -0
- package/docs/.vuepress/components/crud/dataSort/base.vue +142 -0
- package/docs/.vuepress/components/crud/genDynamicColumns/base.vue +53 -0
- package/docs/.vuepress/components/crud/genDynamicColumns/dynamicAndFixed.vue +111 -0
- package/docs/.vuepress/components/crud/genDynamicColumns/treeDynamic.vue +68 -0
- package/docs/.vuepress/components/crud/handleBar/handleRow.vue +65 -0
- package/docs/.vuepress/components/crud/handleBar/toolbar.vue +69 -0
- package/docs/.vuepress/components/crud/renderType/1.vue +57 -0
- package/docs/.vuepress/components/crud/renderType/2.vue +63 -0
- package/docs/.vuepress/components/crud/renderType/3.vue +105 -0
- package/docs/.vuepress/components/crud/renderType/5.vue +91 -0
- package/docs/.vuepress/components/crud/search/1.vue +90 -0
- package/docs/.vuepress/components/crud/search/2.vue +78 -0
- package/docs/.vuepress/components/crud/search/3.vue +107 -0
- package/docs/.vuepress/components/crud/search/base.vue +123 -0
- package/docs/.vuepress/components/crud/search/localSearch.vue +124 -0
- package/docs/.vuepress/components/crud/search/special.vue +148 -0
- package/docs/.vuepress/components/crud/selection/events.vue +47 -0
- package/docs/.vuepress/components/crud/selection/pagination.vue +94 -0
- package/docs/.vuepress/components/crud/selection/singleSelection.vue +64 -0
- package/docs/.vuepress/components/crud/span/base.vue +69 -0
- package/docs/.vuepress/components/crud/span/special.vue +75 -0
- package/docs/.vuepress/components/crud/summary/base.vue +99 -0
- package/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue +174 -0
- package/docs/.vuepress/components/crud/tableEdit/cellEdit.vue +194 -0
- package/docs/.vuepress/components/crud/tableEdit/controlEdit.vue +219 -0
- package/docs/.vuepress/components/crud/tableEdit/dialog.vue +172 -0
- package/docs/.vuepress/components/crud/tableEdit/free.vue +88 -0
- package/docs/.vuepress/components/crud/tableEdit/freeColumn.vue +82 -0
- package/docs/.vuepress/components/crud/tableEdit/methods.vue +154 -0
- package/docs/.vuepress/components/crud/tableEdit/rowAction.vue +107 -0
- package/docs/.vuepress/components/crud/tableEdit/rowBatch.vue +116 -0
- package/docs/.vuepress/components/crud/tableEdit/rowClick.vue +98 -0
- package/docs/.vuepress/components/crud/validate/base.vue +122 -0
- package/docs/.vuepress/components/crud/validate/custom.vue +82 -0
- package/docs/.vuepress/components/crud/validate/regulars.vue +88 -0
- package/docs/.vuepress/components/crud/validate/relation.vue +91 -0
- package/docs/.vuepress/components/crud/validate/tree.vue +82 -0
- package/docs/.vuepress/components/dialog/baseUse/base.vue +92 -0
- package/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue +78 -0
- package/docs/.vuepress/components/dialog/baseUse/control.vue +79 -0
- package/docs/.vuepress/components/dialog/baseUse/drawer.vue +59 -0
- package/docs/.vuepress/components/dialog/baseUse/footer.vue +87 -0
- package/docs/.vuepress/components/dialog/baseUse/insertSlot.vue +79 -0
- package/docs/.vuepress/components/dict/DictLinkage.vue +91 -0
- package/docs/.vuepress/components/dict/baseUse.vue +72 -0
- package/docs/.vuepress/components/dict/component.vue +82 -0
- package/docs/.vuepress/components/dict/localDict.vue +68 -0
- package/docs/.vuepress/components/form/baseUse/base.vue +48 -0
- package/docs/.vuepress/components/form/baseUse/dataFormat.vue +92 -0
- package/docs/.vuepress/components/form/baseUse/deep.vue +57 -0
- package/docs/.vuepress/components/form/baseUse/gridLayout.vue +47 -0
- package/docs/.vuepress/components/form/baseUse/group.vue +66 -0
- package/docs/.vuepress/components/form/baseUse/hidden.vue +40 -0
- package/docs/.vuepress/components/form/baseUse/inlineLayout.vue +48 -0
- package/docs/.vuepress/components/form/baseUse/label.vue +51 -0
- package/docs/.vuepress/components/form/baseUse/tooltip.vue +40 -0
- package/docs/.vuepress/components/form/baseUse/validate.vue +52 -0
- package/docs/.vuepress/components/form/detail/base.vue +78 -0
- package/docs/.vuepress/components/form/detail/border.vue +90 -0
- package/docs/.vuepress/components/form/detail/singleDetail.vue +72 -0
- package/docs/.vuepress/components/formatData/baseUse.vue +131 -0
- package/docs/.vuepress/components/mock/index.js +347 -0
- package/docs/.vuepress/components/mockData/custom.vue +69 -0
- package/docs/.vuepress/components/mockData/example.vue +290 -0
- package/docs/.vuepress/components/positionSlot/base.vue +24 -0
- package/docs/.vuepress/components/positionSlot/form.vue +71 -0
- package/docs/.vuepress/components/positionSlot/table.vue +85 -0
- package/docs/.vuepress/components/tabs/base.vue +57 -0
- package/docs/.vuepress/components/temp.js +195 -0
- package/docs/.vuepress/config.js +146 -0
- package/docs/.vuepress/enhanceApp.js +142 -0
- package/docs/.vuepress/public/favicon.ico +0 -0
- package/docs/.vuepress/public/super.png +0 -0
- package/docs/.vuepress/styles/index.styl +25 -0
- package/docs/.vuepress/styles/palette.styl +6 -0
- package/docs/README.md +14 -0
- package/docs/guide/button/base.md +31 -0
- package/docs/guide/commonConfig/jsx.md +166 -0
- package/docs/guide/commonConfig/presetCodeTemplate.md +68 -0
- package/docs/guide/commonConfig/renderType.md +181 -0
- package/docs/guide/crud/baseUse.md +120 -0
- package/docs/guide/crud/buttons.md +18 -0
- package/docs/guide/crud/config.md +217 -0
- package/docs/guide/crud/contextMenu.md +18 -0
- package/docs/guide/crud/dataSort.md +66 -0
- package/docs/guide/crud/genDynamicColumns.md +145 -0
- package/docs/guide/crud/handleBar.md +26 -0
- package/docs/guide/crud/renderType.md +4 -0
- package/docs/guide/crud/search.md +150 -0
- package/docs/guide/crud/selection.md +73 -0
- package/docs/guide/crud/span.md +98 -0
- package/docs/guide/crud/summary.md +167 -0
- package/docs/guide/crud/tableEdit.md +377 -0
- package/docs/guide/crud/validate.md +158 -0
- package/docs/guide/dialog/baseUse.md +81 -0
- package/docs/guide/dict/baseUse.md +174 -0
- package/docs/guide/dict/component.md +88 -0
- package/docs/guide/dict/config.md +44 -0
- package/docs/guide/form/baseUse.md +142 -0
- package/docs/guide/form/detail.md +38 -0
- package/docs/guide/formatData/baseUse.md +98 -0
- package/docs/guide/formatData/config.md +142 -0
- package/docs/guide/mockData/base.md +26 -0
- package/docs/guide/positionSlot/base.md +41 -0
- package/docs/guide/question/base.md +44 -0
- package/docs/guide/start/base.md +30 -0
- package/docs/guide/tabs/base.md +63 -0
- package/examples/App.vue +52 -0
- package/examples/Layout/components/AppMain.vue +40 -0
- package/examples/Layout/components/Item.vue +29 -0
- package/examples/Layout/components/Link.vue +44 -0
- package/examples/Layout/components/SidebarItem.vue +93 -0
- package/examples/Layout/index.vue +69 -0
- package/examples/assets/logo.png +0 -0
- package/examples/favicon.ico +0 -0
- package/examples/index.html +18 -0
- package/examples/main.js +54 -0
- package/examples/router/index.js +140 -0
- package/examples/store/index.js +0 -0
- package/examples/styles/index.scss +63 -0
- package/examples/styles/sidebar.scss +226 -0
- package/examples/styles/transition.scss +48 -0
- package/examples/styles/variables.scss +25 -0
- package/examples/views/crud/base.vue +68 -0
- package/examples/views/crud/handleRow.vue +84 -0
- package/examples/views/crud/search.vue +116 -0
- package/examples/views/dashboard/index.vue +244 -0
- package/examples/views/dashboard/index1.vue +234 -0
- package/examples/views/dashboard/test.vue +9 -0
- package/examples/views/formTest/index.vue +168 -0
- package/examples/views/nested/menu1/index.vue +7 -0
- package/examples/views/nested/menu1/menu1-1/index.vue +7 -0
- package/examples/views/nested/menu1/menu1-2/index.vue +7 -0
- package/examples/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
- package/examples/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
- package/examples/views/nested/menu1/menu1-3/index.vue +5 -0
- package/examples/views/nested/menu2/index.vue +5 -0
- package/gulpfile.js +84 -0
- package/lib/index.css +1 -0
- package/lib/super-crud.min.js +15 -0
- package/package.json +66 -0
- package/packages/button/index.vue +189 -0
- package/packages/core/components/comp.vue +223 -0
- package/packages/core/components/position.vue +135 -0
- package/packages/core/components/render.vue +460 -0
- package/packages/core/configManager.js +302 -0
- package/packages/core/create.js +8 -0
- package/packages/core/defaultRender.js +64 -0
- package/packages/core/dict/global.js +10 -0
- package/packages/core/dict/index.js +432 -0
- package/packages/core/dict/mixin.js +94 -0
- package/packages/core/event.js +60 -0
- package/packages/core/index.js +6 -0
- package/packages/core/init.js +122 -0
- package/packages/core/mock/genConfig.js +228 -0
- package/packages/core/mock/genData.js +422 -0
- package/packages/core/mock/index.js +4 -0
- package/packages/core/rules.js +111 -0
- package/packages/crud/column.vue +205 -0
- package/packages/crud/columnAction.vue +207 -0
- package/packages/crud/columnCell.vue +146 -0
- package/packages/crud/defaultColumn.vue +130 -0
- package/packages/crud/drawerColumn.vue +225 -0
- package/packages/crud/form.vue +69 -0
- package/packages/crud/index.vue +564 -0
- package/packages/crud/menuBar.vue +298 -0
- package/packages/crud/mixins/cacheHandler.js +36 -0
- package/packages/crud/mixins/calcColumnWidth.js +79 -0
- package/packages/crud/mixins/calcHeight.js +105 -0
- package/packages/crud/mixins/columnHandler.js +128 -0
- package/packages/crud/mixins/contextMenu.js +98 -0
- package/packages/crud/mixins/dataProcessor.js +202 -0
- package/packages/crud/mixins/dialog.js +109 -0
- package/packages/crud/mixins/excelHandler.js +150 -0
- package/packages/crud/mixins/exposeMethods.js +107 -0
- package/packages/crud/mixins/generateDynamicColumns.js +250 -0
- package/packages/crud/mixins/props.js +38 -0
- package/packages/crud/mixins/searchHandler.js +151 -0
- package/packages/crud/mixins/select.js +359 -0
- package/packages/crud/mixins/spanMethod.js +288 -0
- package/packages/crud/mixins/summary.js +177 -0
- package/packages/crud/mixins/tableEdit.js +547 -0
- package/packages/crud/mixins/validate.js +219 -0
- package/packages/crud/pagination.vue +110 -0
- package/packages/crud/search.vue +119 -0
- package/packages/crud/searchHeader.vue +231 -0
- package/packages/crud/selectBanner.vue +138 -0
- package/packages/crud/utils/EditState.js +319 -0
- package/packages/crud/utils/excelExport.js +112 -0
- package/packages/crud/utils/excelImport.js +112 -0
- package/packages/crud/utils/index.js +98 -0
- package/packages/dialog/dialog.js +233 -0
- package/packages/dialog/dialog.vue +15 -0
- package/packages/dialog/index.js +22 -0
- package/packages/dict/cascadeFormat.vue +179 -0
- package/packages/dict/dateFormat.vue +40 -0
- package/packages/dict/form/cascade.vue +61 -0
- package/packages/dict/form/checkbox.vue +90 -0
- package/packages/dict/form/extendMethod.js +22 -0
- package/packages/dict/form/input-base.js +31 -0
- package/packages/dict/form/input.js +20 -0
- package/packages/dict/form/radio.vue +69 -0
- package/packages/dict/form/select.vue +118 -0
- package/packages/dict/form/switch.vue +75 -0
- package/packages/dict/valueFormat.vue +188 -0
- package/packages/directive/dialog/drag.js +86 -0
- package/packages/directive/dialog/dragSize.js +42 -0
- package/packages/directive/index.js +9 -0
- package/packages/directive/insertSlot.js +10 -0
- package/packages/form/contextMenu.js +192 -0
- package/packages/form/draftDrawer.vue +391 -0
- package/packages/form/formAction.vue +97 -0
- package/packages/form/formItem.vue +259 -0
- package/packages/form/index.vue +451 -0
- package/packages/form/props.js +15 -0
- package/packages/grid/cell.vue +65 -0
- package/packages/grid/index.vue +130 -0
- package/packages/group/index.vue +96 -0
- package/packages/tabs/index.vue +290 -0
- package/packages/tooltip/index.js +9 -0
- package/packages/tooltip/tooltip.vue +32 -0
- package/packages/tooltip/tooltipComponent.js +38 -0
- package/packages/verifyInput/index.vue +131 -0
- package/src/config/common.js +88 -0
- package/src/config/crud.js +567 -0
- package/src/config/dialog.js +87 -0
- package/src/config/form.js +215 -0
- package/src/config/index.js +9 -0
- package/src/constants/index.js +72 -0
- package/src/index.js +67 -0
- package/src/template/btn/crud.js +6 -0
- package/src/template/btn/dialog.js +1 -0
- package/src/template/btn/form.js +3 -0
- package/src/template/btn/index.js +9 -0
- package/src/template/dicts.js +1 -0
- package/src/template/formatData.js +507 -0
- package/src/template/index.js +19 -0
- package/src/template/render.js +124 -0
- package/src/template/rules.js +53 -0
- package/src/utils/bem.js +49 -0
- package/src/utils/cache.js +77 -0
- package/src/utils/getType.js +34 -0
- package/src/utils/index.js +212 -0
- package/src/utils/mergeTemp.js +124 -0
- package/styles/button.scss +3 -0
- package/styles/crud.scss +425 -0
- package/styles/dialog.scss +95 -0
- package/styles/form.scss +532 -0
- package/styles/group.scss +78 -0
- package/styles/index.scss +94 -0
- package/styles/tabs.scss +139 -0
- package/styles/verifyInput.scss +56 -0
- package/vue-jsx-sync.js +90 -0
- package/vue.config.js +54 -0
@@ -0,0 +1,98 @@
|
|
1
|
+
import { batchMerge } from "utils/mergeTemp";
|
2
|
+
import { isFunction } from "lodash-es";
|
3
|
+
import { checkVisibility } from "utils";
|
4
|
+
export default {
|
5
|
+
computed: {
|
6
|
+
ctxMenu() {
|
7
|
+
return this.crudOptions.contextMenu;
|
8
|
+
},
|
9
|
+
},
|
10
|
+
created() {
|
11
|
+
this.buttonList = [];
|
12
|
+
},
|
13
|
+
methods: {
|
14
|
+
contextMenuTemps(scope, divided) {
|
15
|
+
return {
|
16
|
+
copy: {
|
17
|
+
label: "复制内容",
|
18
|
+
icon: "el-icon-document-copy",
|
19
|
+
onClick: () => {
|
20
|
+
let save = function (e) {
|
21
|
+
e.clipboardData.setData(
|
22
|
+
"text/plain",
|
23
|
+
scope.event.target.innerText
|
24
|
+
);
|
25
|
+
e.preventDefault(); //阻止默认行为
|
26
|
+
};
|
27
|
+
document.addEventListener("copy", save); //添加一个copy事件
|
28
|
+
document.execCommand("copy"); //执行copy方法
|
29
|
+
document.removeEventListener("copy", save); //移除copy事件
|
30
|
+
this.$message.success("复制成功");
|
31
|
+
},
|
32
|
+
},
|
33
|
+
mock: {
|
34
|
+
label: "生成测试数据",
|
35
|
+
icon: "el-icon-magic-stick",
|
36
|
+
onClick: () => {
|
37
|
+
this.$emit("mockData");
|
38
|
+
},
|
39
|
+
},
|
40
|
+
reset: {
|
41
|
+
label: "重置",
|
42
|
+
icon: "el-icon-refresh",
|
43
|
+
onClick: () => {
|
44
|
+
this.reset();
|
45
|
+
},
|
46
|
+
divided,
|
47
|
+
},
|
48
|
+
};
|
49
|
+
},
|
50
|
+
openContextMenu(row, column, event) {
|
51
|
+
if (checkVisibility(this.ctxMenu) === false) return;
|
52
|
+
const items = [];
|
53
|
+
const scope = {
|
54
|
+
row,
|
55
|
+
$index: row.$index,
|
56
|
+
column,
|
57
|
+
ctx: this,
|
58
|
+
event,
|
59
|
+
};
|
60
|
+
const actionBtns = this.getActionButton(scope);
|
61
|
+
if (this.ctxMenu) {
|
62
|
+
let merges = batchMerge(
|
63
|
+
"btn.crud.contextMenu",
|
64
|
+
this.ctxMenu,
|
65
|
+
scope,
|
66
|
+
this.contextMenuTemps(scope, actionBtns.length)
|
67
|
+
);
|
68
|
+
merges = this.checkHiddenButtons("contextMenu", merges);
|
69
|
+
items.push(...merges);
|
70
|
+
}
|
71
|
+
if (this.ctxMenu.actionBtn) {
|
72
|
+
items.push(...actionBtns);
|
73
|
+
}
|
74
|
+
if (items.length === 0) return;
|
75
|
+
event.preventDefault();
|
76
|
+
event.stopPropagation();
|
77
|
+
this.$contextmenu({
|
78
|
+
items,
|
79
|
+
event,
|
80
|
+
minWidth: 100,
|
81
|
+
});
|
82
|
+
},
|
83
|
+
getActionButton(scope) {
|
84
|
+
let custom = this.buttonList[scope.$index] || [];
|
85
|
+
return custom.map(({ hidden, ...item }) => {
|
86
|
+
Object.keys(item).forEach((key) => {
|
87
|
+
if (key === "onClick") {
|
88
|
+
const rawClick = item[key];
|
89
|
+
item[key] = () => rawClick(scope);
|
90
|
+
} else if (isFunction(item[key]) && key !== "onClick") {
|
91
|
+
item[key] = item[key](scope);
|
92
|
+
}
|
93
|
+
});
|
94
|
+
return item;
|
95
|
+
});
|
96
|
+
},
|
97
|
+
},
|
98
|
+
};
|
@@ -0,0 +1,202 @@
|
|
1
|
+
import { isFunction, cloneDeep, uniqueId } from "lodash-es";
|
2
|
+
|
3
|
+
export default {
|
4
|
+
data() {
|
5
|
+
return {
|
6
|
+
loadingStatus: false,
|
7
|
+
localFilteredData: undefined, // 存储过滤后的数据
|
8
|
+
};
|
9
|
+
},
|
10
|
+
|
11
|
+
computed: {
|
12
|
+
list() {
|
13
|
+
return this.filterData();
|
14
|
+
},
|
15
|
+
},
|
16
|
+
watch: {
|
17
|
+
data: {
|
18
|
+
handler(newVal, oldVal) {
|
19
|
+
// 是否完全更新数据
|
20
|
+
const isUpdated = newVal !== oldVal;
|
21
|
+
if (isUpdated) {
|
22
|
+
this.transformData(this.list);
|
23
|
+
}
|
24
|
+
},
|
25
|
+
immediate: true,
|
26
|
+
},
|
27
|
+
loading: {
|
28
|
+
handler(val) {
|
29
|
+
val !== undefined && (this.loadingStatus = val);
|
30
|
+
},
|
31
|
+
immediate: true,
|
32
|
+
},
|
33
|
+
loadingStatus(val) {
|
34
|
+
this.$emit("update:loading", val);
|
35
|
+
},
|
36
|
+
},
|
37
|
+
|
38
|
+
methods: {
|
39
|
+
// 过滤数据
|
40
|
+
filterData() {
|
41
|
+
let data = this.data;
|
42
|
+
if (this.localFilteredData !== undefined) {
|
43
|
+
data = this.localFilteredData;
|
44
|
+
}
|
45
|
+
|
46
|
+
if (this.crudOptions.localPagination) {
|
47
|
+
return this.getLocalPaginationData(data);
|
48
|
+
}
|
49
|
+
return data;
|
50
|
+
},
|
51
|
+
// 完全更新时数据转换
|
52
|
+
transformData(list) {
|
53
|
+
// 检查数据唯一性
|
54
|
+
this.validateUniqueValues(list);
|
55
|
+
|
56
|
+
// 处理行数据
|
57
|
+
this.processRowData(list);
|
58
|
+
|
59
|
+
// 恢复新增状态
|
60
|
+
this.restoreEditState(list);
|
61
|
+
|
62
|
+
// 处理树形数据
|
63
|
+
this.processTreeData(list);
|
64
|
+
|
65
|
+
// 处理动态列数据
|
66
|
+
this.processDynamicColumns(list);
|
67
|
+
|
68
|
+
// 数据排序
|
69
|
+
this.sortedData();
|
70
|
+
|
71
|
+
// 更新表格状态
|
72
|
+
this.updateTableState();
|
73
|
+
},
|
74
|
+
// 检查数据唯一性
|
75
|
+
validateUniqueValues(list) {
|
76
|
+
if (this._hasCheckedUnique) return;
|
77
|
+
|
78
|
+
const valueMap = new Map();
|
79
|
+
list.some((row) => {
|
80
|
+
const key = row[this.valueKey];
|
81
|
+
if (!key) {
|
82
|
+
console.error(
|
83
|
+
`[CRUD Error] 数据中存在缺失的 ${this.valueKey} 值`,
|
84
|
+
row
|
85
|
+
);
|
86
|
+
this._hasCheckedUnique = true;
|
87
|
+
return true;
|
88
|
+
}
|
89
|
+
if (valueMap.has(key)) {
|
90
|
+
console.error(
|
91
|
+
`[CRUD Error] 数据中存在重复的 ${this.valueKey} 值`,
|
92
|
+
row
|
93
|
+
);
|
94
|
+
this._hasCheckedUnique = true;
|
95
|
+
return true;
|
96
|
+
}
|
97
|
+
valueMap.set(key, true);
|
98
|
+
return false;
|
99
|
+
});
|
100
|
+
},
|
101
|
+
|
102
|
+
// 处理行数据
|
103
|
+
processRowData(list) {
|
104
|
+
const isGenUniqueId = this.crudOptions.uniqueId;
|
105
|
+
|
106
|
+
list.forEach((item) => {
|
107
|
+
// 生成唯一ID
|
108
|
+
if (isGenUniqueId && !item.$uniqueId) {
|
109
|
+
item.$uniqueId = uniqueId();
|
110
|
+
}
|
111
|
+
// 检查并添加缺失的列字段
|
112
|
+
this.trueRenderColumns.forEach((column) => {
|
113
|
+
if (column.prop && !(column.prop in item)) {
|
114
|
+
this.$set(item, column.form?.prop || column.prop, "");
|
115
|
+
}
|
116
|
+
});
|
117
|
+
});
|
118
|
+
},
|
119
|
+
|
120
|
+
// 恢复新增状态
|
121
|
+
restoreEditState(list) {
|
122
|
+
const addedRows = this.editState?.getAddedRows() || [];
|
123
|
+
|
124
|
+
if (addedRows.length > 0) {
|
125
|
+
addedRows.forEach((item) => {
|
126
|
+
const { addType, row } = item;
|
127
|
+
if (addType === "first") {
|
128
|
+
list.unshift(row);
|
129
|
+
} else if (addType === "last") {
|
130
|
+
list.push(row);
|
131
|
+
}
|
132
|
+
});
|
133
|
+
}
|
134
|
+
|
135
|
+
const editingRows = this.editState.editingRows || [];
|
136
|
+
list.forEach((row) => {
|
137
|
+
const key = row[this.valueKey];
|
138
|
+
const editInfo = editingRows.get(key);
|
139
|
+
if (editInfo) {
|
140
|
+
Object.defineProperty(row, "$edit", {
|
141
|
+
value: true,
|
142
|
+
enumerable: false,
|
143
|
+
configurable: true,
|
144
|
+
});
|
145
|
+
}
|
146
|
+
});
|
147
|
+
},
|
148
|
+
|
149
|
+
// 处理树形数据
|
150
|
+
processTreeData(list) {
|
151
|
+
if (!this.isTree || !this.crudOptions.autoLazy) return;
|
152
|
+
|
153
|
+
this.lazyTreeData = cloneDeep(list);
|
154
|
+
this.handleLocalLazy(list);
|
155
|
+
|
156
|
+
// 更新懒加载的节点
|
157
|
+
this.treeNodeMap.forEach((value, key) => {
|
158
|
+
const { tree, treeNode, resolve } = value;
|
159
|
+
this.lazyLoad(tree, treeNode, resolve);
|
160
|
+
});
|
161
|
+
},
|
162
|
+
|
163
|
+
// 处理动态列数据
|
164
|
+
processDynamicColumns(list) {
|
165
|
+
if (!this.crudOptions.flattenConfig && !this.crudOptions.dynamicConfig)
|
166
|
+
return;
|
167
|
+
|
168
|
+
this.transformToTree(
|
169
|
+
list,
|
170
|
+
this.crudOptions.flattenConfig || this.crudOptions.dynamicConfig
|
171
|
+
);
|
172
|
+
},
|
173
|
+
|
174
|
+
// 更新表格状态
|
175
|
+
updateTableState() {
|
176
|
+
this.$nextTick(() => {
|
177
|
+
this.$refs.tableRef.layout.updateElsHeight();
|
178
|
+
this.updateSelection();
|
179
|
+
});
|
180
|
+
},
|
181
|
+
// 获取本地分页数据
|
182
|
+
getLocalPaginationData(data) {
|
183
|
+
const { pageNum, pageSize } = this.crudOptions.props;
|
184
|
+
const start = (this.query[pageNum] - 1) * this.query[pageSize];
|
185
|
+
const end = start + this.query[pageSize];
|
186
|
+
return data.slice(start, end);
|
187
|
+
},
|
188
|
+
|
189
|
+
// 数据加载相关
|
190
|
+
changeLoading(bool = false) {
|
191
|
+
if (this.crudOptions.disableLoading) return;
|
192
|
+
this.loadingStatus = bool;
|
193
|
+
},
|
194
|
+
initQuery() {
|
195
|
+
this.query = Object.assign({}, this.query, this.searchParams);
|
196
|
+
this.getList();
|
197
|
+
},
|
198
|
+
getList() {
|
199
|
+
this.$emit("getList");
|
200
|
+
},
|
201
|
+
},
|
202
|
+
};
|
@@ -0,0 +1,109 @@
|
|
1
|
+
import { cloneDeep } from "lodash-es";
|
2
|
+
import formComp from "../form";
|
3
|
+
import dialog from "pak/dialog";
|
4
|
+
export default {
|
5
|
+
data() {
|
6
|
+
this.title = {
|
7
|
+
add: "新增",
|
8
|
+
edit: "编辑",
|
9
|
+
view: "查看",
|
10
|
+
};
|
11
|
+
return {
|
12
|
+
dialogLoading: false, //弹窗与内部表单loading
|
13
|
+
};
|
14
|
+
},
|
15
|
+
computed: {
|
16
|
+
dialogOptions() {
|
17
|
+
return this.crudOptions.dialog;
|
18
|
+
},
|
19
|
+
},
|
20
|
+
watch: {
|
21
|
+
dialogLoading(val) {
|
22
|
+
this.$refs.dialogVm && (this.$refs.dialogVm.loading = val);
|
23
|
+
},
|
24
|
+
},
|
25
|
+
methods: {
|
26
|
+
changeDialogLoading(bool = false) {
|
27
|
+
this.dialogLoading = bool;
|
28
|
+
},
|
29
|
+
handleAdd(addType) {
|
30
|
+
this.runBefore(
|
31
|
+
["add"],
|
32
|
+
(data = {}) => {
|
33
|
+
this.form = data;
|
34
|
+
this.openDialogForm("add", {}, addType);
|
35
|
+
},
|
36
|
+
{ mode: "add" }
|
37
|
+
);
|
38
|
+
},
|
39
|
+
handleView(scope) {
|
40
|
+
const callBack = (data) => {
|
41
|
+
this.openDialogForm("view", scope);
|
42
|
+
this.getDetail(scope, data);
|
43
|
+
};
|
44
|
+
this.runBefore(["view"], callBack, { ...scope, mode: "view" });
|
45
|
+
},
|
46
|
+
getDetail(scope, data) {
|
47
|
+
this.changeDialogLoading(true);
|
48
|
+
const callBack = (dataNew) => {
|
49
|
+
this.form = data || dataNew || cloneDeep(scope.row);
|
50
|
+
|
51
|
+
this.changeDialogLoading();
|
52
|
+
};
|
53
|
+
this.runBefore("getDetail", callBack, scope, this.changeDialogLoading);
|
54
|
+
},
|
55
|
+
handleEdit(scope) {
|
56
|
+
const callBack = (data) => {
|
57
|
+
this.openDialogForm("edit", scope);
|
58
|
+
this.getDetail(scope, data);
|
59
|
+
};
|
60
|
+
this.runBefore(["edit"], callBack, { ...scope, mode: "view" });
|
61
|
+
},
|
62
|
+
handleSave(scope, done, addType) {
|
63
|
+
this.$refs.crudForm.validate().then(() => {
|
64
|
+
this.changeDialogLoading(true);
|
65
|
+
const callBack = (row) => {
|
66
|
+
if (scope.mode === "add") {
|
67
|
+
if (addType === "first") {
|
68
|
+
this.list.unshift(row || this.form);
|
69
|
+
} else {
|
70
|
+
this.list.push(row || this.form);
|
71
|
+
}
|
72
|
+
} else {
|
73
|
+
this.$set(this.list, scope.$index, row || this.form);
|
74
|
+
}
|
75
|
+
|
76
|
+
done();
|
77
|
+
this.changeDialogLoading();
|
78
|
+
this.getList();
|
79
|
+
};
|
80
|
+
this.runBefore(["save"], callBack, scope, this.changeDialogLoading);
|
81
|
+
});
|
82
|
+
},
|
83
|
+
|
84
|
+
openDialogForm(mode, scope = {}, addType) {
|
85
|
+
scope = { ...scope, row: this.form, mode };
|
86
|
+
this.$refs.dialogVm = dialog({
|
87
|
+
title: this.title[mode],
|
88
|
+
render: () => (
|
89
|
+
<formComp
|
90
|
+
loading={this.dialogLoading}
|
91
|
+
ctx={this}
|
92
|
+
mode={mode}
|
93
|
+
scope={scope}
|
94
|
+
/>
|
95
|
+
),
|
96
|
+
confirm: (done) => {
|
97
|
+
const params = {
|
98
|
+
...scope,
|
99
|
+
formRef: this.$refs.crudForm,
|
100
|
+
};
|
101
|
+
this.handleSave(params, done, addType);
|
102
|
+
},
|
103
|
+
footer: mode === "view" ? false : true,
|
104
|
+
...this.dialogOptions,
|
105
|
+
});
|
106
|
+
this.$refs.dialogVm.show();
|
107
|
+
},
|
108
|
+
},
|
109
|
+
};
|
@@ -0,0 +1,150 @@
|
|
1
|
+
// ... 现有代码 ...
|
2
|
+
import {
|
3
|
+
parseExcel,
|
4
|
+
getHeaderColumnMap,
|
5
|
+
convertExcelDataToTableData,
|
6
|
+
createFileInput,
|
7
|
+
} from "../utils/excelImport";
|
8
|
+
import { exportToExcel, formatExportData } from "../utils/excelExport";
|
9
|
+
|
10
|
+
export default {
|
11
|
+
methods: {
|
12
|
+
/**
|
13
|
+
* 处理Excel导入
|
14
|
+
* @param {File} file Excel文件
|
15
|
+
*/
|
16
|
+
handleExcelImport(file) {
|
17
|
+
if (!file) return;
|
18
|
+
this.changeLoading(true);
|
19
|
+
|
20
|
+
// 读取Excel文件
|
21
|
+
parseExcel(file)
|
22
|
+
.then((data) => {
|
23
|
+
if (!data || !data.length) {
|
24
|
+
this.$message.warning("导入的Excel文件不包含有效数据");
|
25
|
+
this.changeLoading(false);
|
26
|
+
return;
|
27
|
+
}
|
28
|
+
|
29
|
+
// 获取表头映射关系
|
30
|
+
const headerMap = getHeaderColumnMap(this.trueRenderColumns);
|
31
|
+
|
32
|
+
// 转换Excel数据为表格数据
|
33
|
+
const importedRows = convertExcelDataToTableData(
|
34
|
+
data,
|
35
|
+
headerMap,
|
36
|
+
this.valueKey,
|
37
|
+
this.trueRenderColumns
|
38
|
+
);
|
39
|
+
|
40
|
+
// 处理导入数据
|
41
|
+
this.processImportedData(importedRows);
|
42
|
+
|
43
|
+
this.changeLoading(false);
|
44
|
+
})
|
45
|
+
.catch((error) => {
|
46
|
+
console.error("Excel导入失败:", error);
|
47
|
+
this.$message.error(
|
48
|
+
"Excel导入失败: " + (error.message || "未知错误")
|
49
|
+
);
|
50
|
+
this.changeLoading(false);
|
51
|
+
});
|
52
|
+
},
|
53
|
+
|
54
|
+
/**
|
55
|
+
* 根据编辑模式处理导入的数据
|
56
|
+
* @param {Array} importedRows 导入的行数据
|
57
|
+
*/
|
58
|
+
processImportedData(importedRows) {
|
59
|
+
if (!importedRows || !importedRows.length) return;
|
60
|
+
|
61
|
+
this.runBefore(
|
62
|
+
["importExcel"],
|
63
|
+
(data) => {
|
64
|
+
const rows = data || importedRows;
|
65
|
+
|
66
|
+
if (this.editConfig.mode === "row") {
|
67
|
+
// 行编辑模式:添加所有行并设置为编辑状态
|
68
|
+
rows.forEach((row) => {
|
69
|
+
this.list.push(row);
|
70
|
+
this.editState.setRowEditStatus(row, true, "add");
|
71
|
+
});
|
72
|
+
this.$message.success(`成功导入 ${rows.length} 条数据`);
|
73
|
+
} else if (this.editConfig.mode === "cell") {
|
74
|
+
// 单元格编辑模式:仅添加行
|
75
|
+
rows.forEach((row) => {
|
76
|
+
this.list.push(row);
|
77
|
+
});
|
78
|
+
this.$message.success(`成功导入 ${rows.length} 条数据`);
|
79
|
+
} else if (this.editConfig.mode === "free") {
|
80
|
+
// 自由编辑模式:直接添加行
|
81
|
+
rows.forEach((row) => {
|
82
|
+
this.list.push(row);
|
83
|
+
});
|
84
|
+
this.$message.success(`成功导入 ${rows.length} 条数据`);
|
85
|
+
} else if (this.editConfig.mode === "dialog") {
|
86
|
+
// 弹窗编辑模式:不直接添加,提示用户使用新增按钮
|
87
|
+
this.$message.info("弹窗编辑模式下,请使用新增按钮添加数据");
|
88
|
+
}
|
89
|
+
|
90
|
+
setTimeout(() => {
|
91
|
+
this.$refs.tableFormRef && this.$refs.tableFormRef.clearValidate();
|
92
|
+
}, 0);
|
93
|
+
},
|
94
|
+
{ rows: importedRows }
|
95
|
+
);
|
96
|
+
},
|
97
|
+
|
98
|
+
/**
|
99
|
+
* 显示Excel导入对话框
|
100
|
+
*/
|
101
|
+
showExcelImportDialog() {
|
102
|
+
createFileInput(this.handleExcelImport.bind(this));
|
103
|
+
},
|
104
|
+
|
105
|
+
/**
|
106
|
+
* 导出表格数据到Excel
|
107
|
+
* @param {Object} options 导出选项
|
108
|
+
*/
|
109
|
+
exportToExcel(options = {}) {
|
110
|
+
const defaultOptions = {
|
111
|
+
filename: this.crudOptions.title || "表格数据",
|
112
|
+
sheetName: "Sheet1",
|
113
|
+
includeHidden: false,
|
114
|
+
onlySelected: false,
|
115
|
+
selectedData: this.selectionRow,
|
116
|
+
formatter: null,
|
117
|
+
};
|
118
|
+
|
119
|
+
const exportOptions = { ...defaultOptions, ...options };
|
120
|
+
|
121
|
+
// 运行前置钩子
|
122
|
+
this.runBefore(
|
123
|
+
["exportExcel"],
|
124
|
+
(data) => {
|
125
|
+
const exportData = data || this.list;
|
126
|
+
|
127
|
+
// 导出Excel
|
128
|
+
exportToExcel(exportData, this.trueRenderColumns, exportOptions);
|
129
|
+
|
130
|
+
// 触发导出成功事件
|
131
|
+
this.$emit("exportSuccess", exportData);
|
132
|
+
},
|
133
|
+
{ data: this.list, options: exportOptions }
|
134
|
+
);
|
135
|
+
},
|
136
|
+
|
137
|
+
/**
|
138
|
+
* 获取格式化后的导出数据
|
139
|
+
* @param {Boolean} onlySelected 是否只导出选中数据
|
140
|
+
* @returns {Array} 格式化后的数据
|
141
|
+
*/
|
142
|
+
getExportData(onlySelected = false) {
|
143
|
+
const data =
|
144
|
+
onlySelected && this.selectionRow.length
|
145
|
+
? this.selectionRow
|
146
|
+
: this.list;
|
147
|
+
return formatExportData(data, this.trueRenderColumns);
|
148
|
+
},
|
149
|
+
},
|
150
|
+
};
|
@@ -0,0 +1,107 @@
|
|
1
|
+
// TODO: 暴露外部方法
|
2
|
+
export default {
|
3
|
+
methods: {
|
4
|
+
resetBatchEdit() {
|
5
|
+
this.$refs.menuBar && this.$refs.menuBar.resetBatchEdit();
|
6
|
+
},
|
7
|
+
/**
|
8
|
+
* 重置表单
|
9
|
+
* @param {String} prop 列属性
|
10
|
+
*/
|
11
|
+
resetField(prop) {
|
12
|
+
// 通知子组件执行重置
|
13
|
+
this.$emit("handleChild", "resetField", prop);
|
14
|
+
},
|
15
|
+
// 重置表单
|
16
|
+
reset() {
|
17
|
+
this.$refs.tableFormRef && this.$refs.tableFormRef.resetFields();
|
18
|
+
this.$emit("reset");
|
19
|
+
},
|
20
|
+
/**
|
21
|
+
* 手动排序
|
22
|
+
* @param {Array} data 数据
|
23
|
+
* @param {Array} props 排序字段
|
24
|
+
*/
|
25
|
+
sortedData(data, props) {
|
26
|
+
this._sortedData(data || this.list, props);
|
27
|
+
},
|
28
|
+
/**
|
29
|
+
* 新增表格行
|
30
|
+
* @param {Object} params 行数据参数
|
31
|
+
* @param {String} type 新增位置类型: 'first' | 'last'
|
32
|
+
*/
|
33
|
+
addRow(params = {}, type = "last") {
|
34
|
+
this.handleRowAdd(params, type);
|
35
|
+
},
|
36
|
+
/**
|
37
|
+
* 设置行编辑状态
|
38
|
+
* @param {Object|Array} rows 行数据或行数据数组
|
39
|
+
* @param {Object} options 配置选项
|
40
|
+
* @param {String} options.type 操作类型: 'edit' | 'cancel' | 'save'
|
41
|
+
* @param {String} options.prop 列属性(可选,用于聚焦)
|
42
|
+
* @returns {void}
|
43
|
+
*/
|
44
|
+
setRowEdit(rows, options = {}) {
|
45
|
+
const { type = "edit", prop } = options;
|
46
|
+
const rowArray = Array.isArray(rows) ? rows : [rows];
|
47
|
+
|
48
|
+
rowArray.forEach((row) => {
|
49
|
+
const scope = { row, $index: row.$index };
|
50
|
+
switch (type) {
|
51
|
+
case "edit":
|
52
|
+
this.handleRowEdit(scope, prop);
|
53
|
+
break;
|
54
|
+
case "cancel":
|
55
|
+
this.handleRowCancel(scope);
|
56
|
+
break;
|
57
|
+
case "save":
|
58
|
+
this.handleRowSave(scope);
|
59
|
+
break;
|
60
|
+
}
|
61
|
+
});
|
62
|
+
},
|
63
|
+
|
64
|
+
/**
|
65
|
+
* 批量设置行编辑状态
|
66
|
+
* @param {String} type 操作类型: 'edit' | 'save' | 'cancel'
|
67
|
+
* @param {Array} rows 行数据数组
|
68
|
+
*/
|
69
|
+
setBatchEdit(type = "edit", rows) {
|
70
|
+
if (type === "edit") {
|
71
|
+
this.handleBatchRowEdit(rows);
|
72
|
+
} else if (type === "save") {
|
73
|
+
this.handleBatchRowSave(undefined, rows);
|
74
|
+
} else if (type === "cancel") {
|
75
|
+
this.handleBatchRowCancel(rows);
|
76
|
+
}
|
77
|
+
},
|
78
|
+
/**
|
79
|
+
* 设置单元格编辑状态
|
80
|
+
* @param {Object|Array} rows 行数据或行数据数组
|
81
|
+
* @param {String} prop 列属性
|
82
|
+
*/
|
83
|
+
setCellEdit(row, prop) {
|
84
|
+
if (!prop) return;
|
85
|
+
const column = this.columnsMap[prop];
|
86
|
+
if (!column) return;
|
87
|
+
const scope = { row, $index: row.$index };
|
88
|
+
this.handleCellEdit(scope, column);
|
89
|
+
},
|
90
|
+
|
91
|
+
// 获取当前所有处于编辑状态的行
|
92
|
+
getEditingRows() {
|
93
|
+
return this.editState?.getEditingRows().map((item) => item.row) || [];
|
94
|
+
},
|
95
|
+
|
96
|
+
// 清除所有编辑状态
|
97
|
+
clearAllEdit() {
|
98
|
+
this.editState?.clearAllEditStatus();
|
99
|
+
this.resetBatchEdit();
|
100
|
+
this.forceUpdate();
|
101
|
+
},
|
102
|
+
// 强制更新表格
|
103
|
+
forceUpdate() {
|
104
|
+
this._forceUpdate();
|
105
|
+
},
|
106
|
+
},
|
107
|
+
};
|