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,138 @@
|
|
1
|
+
<template>
|
2
|
+
<div v-show="showBanner" :class="b()">
|
3
|
+
<div :class="b('banner-content')" v-if="ctx.showSelection">
|
4
|
+
<span>已选择 {{ selected.length }} 项</span>
|
5
|
+
<template v-if="selected.length <= selection.maxDisplay">
|
6
|
+
<span :class="b('selected-items')">
|
7
|
+
<el-tag
|
8
|
+
v-for="row in selected"
|
9
|
+
:key="row[ctx.operateKey]"
|
10
|
+
:class="b('remove-tag')"
|
11
|
+
size="small"
|
12
|
+
closable
|
13
|
+
disable-transitions
|
14
|
+
@close="ctx.removeSelection(row)"
|
15
|
+
>{{ row[labelKey] }}</el-tag
|
16
|
+
>
|
17
|
+
</span>
|
18
|
+
</template>
|
19
|
+
<template v-else>
|
20
|
+
<el-popover
|
21
|
+
placement="bottom"
|
22
|
+
trigger="hover"
|
23
|
+
:popper-class="b('popover')"
|
24
|
+
>
|
25
|
+
<template #reference>
|
26
|
+
<span :class="b('popover-selected-preview')">
|
27
|
+
<el-tag
|
28
|
+
v-for="row in selected.slice(0, selection.maxDisplay)"
|
29
|
+
:key="row[ctx.operateKey]"
|
30
|
+
:class="b('remove-tag')"
|
31
|
+
size="small"
|
32
|
+
closable
|
33
|
+
disable-transitions
|
34
|
+
@close="ctx.removeSelection(row)"
|
35
|
+
>{{ row[labelKey] }}</el-tag
|
36
|
+
>
|
37
|
+
等 {{ selected.length }} 项
|
38
|
+
</span>
|
39
|
+
</template>
|
40
|
+
<div :class="b('popover-list')">
|
41
|
+
<div
|
42
|
+
v-for="row in selected.slice(selection.maxDisplay)"
|
43
|
+
:key="row[ctx.operateKey]"
|
44
|
+
:class="b('popover-item')"
|
45
|
+
>
|
46
|
+
<span>{{ row[labelKey] }}</span>
|
47
|
+
<el-tag
|
48
|
+
:class="b('popover-remove-tag')"
|
49
|
+
size="small"
|
50
|
+
closable
|
51
|
+
disable-transitions
|
52
|
+
@close="ctx.removeSelection(row)"
|
53
|
+
/>
|
54
|
+
</div>
|
55
|
+
</div>
|
56
|
+
</el-popover>
|
57
|
+
</template>
|
58
|
+
<div :class="b('banner-actions')">
|
59
|
+
<el-button
|
60
|
+
v-if="showClearAction"
|
61
|
+
type="text"
|
62
|
+
@click="ctx.clearSelection"
|
63
|
+
>
|
64
|
+
清空选择
|
65
|
+
</el-button>
|
66
|
+
</div>
|
67
|
+
</div>
|
68
|
+
<div :class="b('banner-content')" v-else-if="selected">
|
69
|
+
<span>已选择</span>
|
70
|
+
<span :class="b('selected-items')">
|
71
|
+
<el-tag
|
72
|
+
:class="b('remove-tag')"
|
73
|
+
size="small"
|
74
|
+
closable
|
75
|
+
disable-transitions
|
76
|
+
@close="ctx.removeSingleSelection"
|
77
|
+
>{{ selected[labelKey] }}</el-tag
|
78
|
+
>
|
79
|
+
</span>
|
80
|
+
<div :class="b('banner-actions')">
|
81
|
+
<el-button
|
82
|
+
v-if="showClearAction"
|
83
|
+
type="text"
|
84
|
+
@click="ctx.removeSingleSelection"
|
85
|
+
>
|
86
|
+
清空选择
|
87
|
+
</el-button>
|
88
|
+
</div>
|
89
|
+
</div>
|
90
|
+
</div>
|
91
|
+
</template>
|
92
|
+
<script>
|
93
|
+
import create from "core/create";
|
94
|
+
import { uniqBy } from "lodash-es";
|
95
|
+
export default create({
|
96
|
+
name: "crud-select-banner",
|
97
|
+
inject: ["ctx"],
|
98
|
+
computed: {
|
99
|
+
selected() {
|
100
|
+
if (this.ctx.showSelection) {
|
101
|
+
return uniqBy(this.ctx.selected, this.ctx.operateKey);
|
102
|
+
}
|
103
|
+
|
104
|
+
if (this.ctx.showSingleSelection) {
|
105
|
+
return this.ctx.selected;
|
106
|
+
}
|
107
|
+
},
|
108
|
+
selection() {
|
109
|
+
return this.ctx.selection;
|
110
|
+
},
|
111
|
+
labelKey() {
|
112
|
+
return (
|
113
|
+
this.selection.labelKey || this.ctx.operateKey || this.ctx.valueKey
|
114
|
+
);
|
115
|
+
},
|
116
|
+
showClearAction() {
|
117
|
+
if (this.ctx.showSelection) {
|
118
|
+
return this.selection.clear;
|
119
|
+
}
|
120
|
+
|
121
|
+
if (this.ctx.showSingleSelection) {
|
122
|
+
return this.ctx.singleSelection.clear;
|
123
|
+
}
|
124
|
+
},
|
125
|
+
showBanner() {
|
126
|
+
if (this.ctx.showSelection) {
|
127
|
+
return this.selected.length > 0;
|
128
|
+
}
|
129
|
+
|
130
|
+
if (this.ctx.showSingleSelection) {
|
131
|
+
return this.selected;
|
132
|
+
}
|
133
|
+
return false;
|
134
|
+
},
|
135
|
+
},
|
136
|
+
methods: {},
|
137
|
+
});
|
138
|
+
</script>
|
@@ -0,0 +1,319 @@
|
|
1
|
+
import { cloneDeep, uniqueId } from "lodash-es";
|
2
|
+
import Vue from "vue";
|
3
|
+
/**
|
4
|
+
* 表格编辑状态管理
|
5
|
+
*/
|
6
|
+
class EditState {
|
7
|
+
constructor(options = {}) {
|
8
|
+
this.valueKey = options.valueKey || "id";
|
9
|
+
this.editingRows = new Map(); // 存储正在编辑的行
|
10
|
+
this.currentEditCell = null; // 当前正在编辑的单元格列属性
|
11
|
+
this.columns = options.columns || []; // 表格列配置
|
12
|
+
this.mode = options.mode;
|
13
|
+
this.trigger = options.trigger;
|
14
|
+
this.isRowEdit = options.isRowEdit;
|
15
|
+
this.exclusive = options.exclusive || false;
|
16
|
+
this._internalIdCounter = 1; // 添加计数器用于生成唯一ID
|
17
|
+
this.eventBus = new Vue();
|
18
|
+
}
|
19
|
+
|
20
|
+
on(event, callback) {
|
21
|
+
this.eventBus.$on(event, callback);
|
22
|
+
}
|
23
|
+
|
24
|
+
off(event, callback) {
|
25
|
+
this.eventBus.$off(event, callback);
|
26
|
+
}
|
27
|
+
/**
|
28
|
+
* 验证单元格是否可编辑
|
29
|
+
* @param {Object} column 列配置
|
30
|
+
* @param {Object} scope 行作用域
|
31
|
+
* @returns {String|Boolean} 编辑模式或false
|
32
|
+
*/
|
33
|
+
validateEdit(column, scope, canEdit) {
|
34
|
+
if (!scope || !column) return false;
|
35
|
+
|
36
|
+
const { row, $index } = scope;
|
37
|
+
if (!row) return false;
|
38
|
+
|
39
|
+
// 获取行的编辑信息
|
40
|
+
const rowEditInfo = this.getRowEditInfo(row);
|
41
|
+
const editMode = rowEditInfo.type || "edit";
|
42
|
+
|
43
|
+
// 检查列是否禁用了该编辑模式
|
44
|
+
if (column[editMode] === false) return false;
|
45
|
+
|
46
|
+
// 根据编辑模式判断
|
47
|
+
if (this.mode === "cell") {
|
48
|
+
return this.isCellEditing(row, column.prop) ? editMode : false;
|
49
|
+
}
|
50
|
+
|
51
|
+
if (this.mode === "row") {
|
52
|
+
return rowEditInfo.isEditing ? editMode : false;
|
53
|
+
}
|
54
|
+
|
55
|
+
// 自由编辑模式或列允许编辑
|
56
|
+
if (this.mode === "free" || canEdit) {
|
57
|
+
return editMode;
|
58
|
+
}
|
59
|
+
|
60
|
+
return false;
|
61
|
+
}
|
62
|
+
getRowKey(row) {
|
63
|
+
const valueKey = row[this.valueKey];
|
64
|
+
if (valueKey) return valueKey;
|
65
|
+
if (row._internalId) return row._internalId;
|
66
|
+
const internalId = `internalId_${this._internalIdCounter++}`;
|
67
|
+
Object.defineProperty(row, "_internalId", {
|
68
|
+
value: internalId,
|
69
|
+
enumerable: false, // 使该属性不可枚举,不会影响JSON序列化
|
70
|
+
configurable: true, // 允许后续删除该属性
|
71
|
+
});
|
72
|
+
return internalId;
|
73
|
+
}
|
74
|
+
|
75
|
+
/**
|
76
|
+
* 设置行的编辑状态
|
77
|
+
* @param {Object} row 行数据
|
78
|
+
* @param {Boolean} isEditing 是否处于编辑状态
|
79
|
+
* @param {String} type 编辑类型,'edit'或'add'
|
80
|
+
* @param {String} addType 新增类型,'first'或'last'
|
81
|
+
* @returns {Object} 更新后的行数据
|
82
|
+
*/
|
83
|
+
setRowEditStatus(row, isEditing, type = "edit", { addType, prop } = {}) {
|
84
|
+
const rowKey = this.getRowKey(row);
|
85
|
+
const editInfo = this.getRowEditInfo(row);
|
86
|
+
if (this.isRowEdit) {
|
87
|
+
const disabled = this.isRowEdit({ row, $index: row.$index }) === false;
|
88
|
+
if (disabled) return;
|
89
|
+
}
|
90
|
+
if (isEditing) {
|
91
|
+
if (editInfo.isEditing && editInfo.type === type) return;
|
92
|
+
|
93
|
+
// 处理互斥编辑
|
94
|
+
if (this.exclusive && this.mode === "row" && type === "edit") {
|
95
|
+
this.clearOtherEditingRows(rowKey);
|
96
|
+
}
|
97
|
+
|
98
|
+
this.editingRows.set(rowKey, {
|
99
|
+
type,
|
100
|
+
data: cloneDeep(row),
|
101
|
+
row,
|
102
|
+
addType,
|
103
|
+
});
|
104
|
+
|
105
|
+
// 添加编辑状态标记
|
106
|
+
const propName = type === "add" ? "$add" : "$edit";
|
107
|
+
if (!row[propName]) {
|
108
|
+
Object.defineProperty(row, propName, {
|
109
|
+
value: true,
|
110
|
+
enumerable: false,
|
111
|
+
configurable: true,
|
112
|
+
});
|
113
|
+
}
|
114
|
+
} else {
|
115
|
+
this.editingRows.delete(rowKey);
|
116
|
+
|
117
|
+
// 移除编辑状态标记
|
118
|
+
if (row.$edit) {
|
119
|
+
delete row.$edit;
|
120
|
+
}
|
121
|
+
if (row.$add) {
|
122
|
+
delete row.$add;
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
this.notifyEditStatusChange({
|
127
|
+
mode: "row",
|
128
|
+
rowKey: rowKey,
|
129
|
+
row,
|
130
|
+
prop,
|
131
|
+
type,
|
132
|
+
});
|
133
|
+
this.isSetting();
|
134
|
+
}
|
135
|
+
|
136
|
+
clearOtherEditingRows(excludeRowKey) {
|
137
|
+
for (const [rowKey, editInfo] of this.editingRows.entries()) {
|
138
|
+
// 跳过新增的行和指定要排除的行
|
139
|
+
if (editInfo.type === "add" || rowKey === excludeRowKey) continue;
|
140
|
+
this.editingRows.delete(rowKey);
|
141
|
+
if (editInfo.row.$edit) {
|
142
|
+
delete editInfo.row.$edit;
|
143
|
+
}
|
144
|
+
if (editInfo.row.$add) {
|
145
|
+
delete editInfo.row.$add;
|
146
|
+
}
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
// 批量编辑
|
151
|
+
batchSetEditStatus(rows, isEditing, type = "edit") {
|
152
|
+
if (!Array.isArray(rows)) return;
|
153
|
+
|
154
|
+
rows.forEach((row) => {
|
155
|
+
this.setRowEditStatus(row, isEditing, type);
|
156
|
+
});
|
157
|
+
|
158
|
+
this.eventBus.$emit("batch-edit-status-change", {
|
159
|
+
rows: rows.map((row) => this.getRowKey(row)),
|
160
|
+
isEditing,
|
161
|
+
type,
|
162
|
+
});
|
163
|
+
}
|
164
|
+
|
165
|
+
/**
|
166
|
+
* 设置单元格的编辑状态
|
167
|
+
* @param {Object} row 行数据
|
168
|
+
* @param {String} prop 列属性名
|
169
|
+
* @returns {Object} 更新后的行数据
|
170
|
+
*/
|
171
|
+
setCellEditStatus(row, prop) {
|
172
|
+
const rowKey = this.getRowKey(row);
|
173
|
+
|
174
|
+
if (this.isCellEditing(row, prop)) return;
|
175
|
+
|
176
|
+
if (this.isRowEdit) {
|
177
|
+
const disabled = this.isRowEdit({ row, $index: row.$index }) === false;
|
178
|
+
if (disabled) return;
|
179
|
+
}
|
180
|
+
|
181
|
+
// 设置当前编辑的单元格
|
182
|
+
this.currentEditCell = {
|
183
|
+
rowKey,
|
184
|
+
prop,
|
185
|
+
row,
|
186
|
+
};
|
187
|
+
|
188
|
+
// 通知状态更新
|
189
|
+
this.notifyEditStatusChange({
|
190
|
+
mode: "cell",
|
191
|
+
rowKey,
|
192
|
+
row,
|
193
|
+
prop,
|
194
|
+
type: "edit",
|
195
|
+
});
|
196
|
+
this.isSetting();
|
197
|
+
}
|
198
|
+
|
199
|
+
isSetting() {
|
200
|
+
this._isSetting = true;
|
201
|
+
setTimeout(() => {
|
202
|
+
this._isSetting = false;
|
203
|
+
}, 50);
|
204
|
+
}
|
205
|
+
/**
|
206
|
+
* 检查行是否处于编辑状态
|
207
|
+
* @param {Object} row 行数据
|
208
|
+
* @returns {Boolean} 是否处于编辑状态
|
209
|
+
*/
|
210
|
+
isRowEditing(row) {
|
211
|
+
const rowKey = this.getRowKey(row);
|
212
|
+
return rowKey && this.editingRows.has(rowKey);
|
213
|
+
}
|
214
|
+
|
215
|
+
/**
|
216
|
+
* 获取行的编辑信息
|
217
|
+
* @param {Object} row 行数据
|
218
|
+
* @returns {Object|null} 行的编辑信息,包含 type 和原始数据
|
219
|
+
*/
|
220
|
+
getRowEditInfo(row) {
|
221
|
+
const rowKey = this.getRowKey(row);
|
222
|
+
const nullObj = { isEditing: false, data: null, type: null };
|
223
|
+
const rowEditInfo = this.editingRows.get(rowKey);
|
224
|
+
if (!rowEditInfo) return nullObj;
|
225
|
+
return {
|
226
|
+
isEditing: true,
|
227
|
+
data: rowEditInfo.data, // 原始数据
|
228
|
+
row: rowEditInfo.row, // 当前行数据
|
229
|
+
type: rowEditInfo.type, // 编辑类型
|
230
|
+
};
|
231
|
+
}
|
232
|
+
|
233
|
+
getEditingCell() {
|
234
|
+
return this.currentEditCell;
|
235
|
+
}
|
236
|
+
|
237
|
+
/**
|
238
|
+
* 检查单元格是否处于编辑状态
|
239
|
+
* @param {Object} row 行数据
|
240
|
+
* @param {String} prop 列属性名
|
241
|
+
* @returns {Boolean} 是否处于编辑状态
|
242
|
+
*/
|
243
|
+
isCellEditing(row, prop) {
|
244
|
+
const rowKey = this.getRowKey(row);
|
245
|
+
return (
|
246
|
+
rowKey &&
|
247
|
+
this.currentEditCell &&
|
248
|
+
this.currentEditCell.rowKey === rowKey &&
|
249
|
+
this.currentEditCell.prop === prop
|
250
|
+
);
|
251
|
+
}
|
252
|
+
|
253
|
+
/**
|
254
|
+
* 检查是否有任何行处于编辑状态
|
255
|
+
* @returns {Boolean} 是否有行处于编辑状态
|
256
|
+
*/
|
257
|
+
hasEditingRows() {
|
258
|
+
return this.editingRows.size > 0;
|
259
|
+
}
|
260
|
+
|
261
|
+
/**
|
262
|
+
* 获取所有处于编辑状态的行的键
|
263
|
+
* @returns {Array} 处于编辑状态的行的键数组
|
264
|
+
*/
|
265
|
+
getEditingRowKeys() {
|
266
|
+
return Array.from(this.editingRows.keys());
|
267
|
+
}
|
268
|
+
|
269
|
+
/**
|
270
|
+
* 清除所有编辑状态
|
271
|
+
*/
|
272
|
+
clearAllEditStatus() {
|
273
|
+
if (this._isSetting) return;
|
274
|
+
|
275
|
+
// 移除所有行的编辑状态标记
|
276
|
+
this.editingRows.forEach((editInfo) => {
|
277
|
+
const row = editInfo.row;
|
278
|
+
if (row.$edit) {
|
279
|
+
delete row.$edit;
|
280
|
+
}
|
281
|
+
if (row.$add) {
|
282
|
+
delete row.$add;
|
283
|
+
}
|
284
|
+
});
|
285
|
+
|
286
|
+
this.editingRows.clear();
|
287
|
+
this.currentEditCell = null;
|
288
|
+
this._internalIdCounter = 1;
|
289
|
+
}
|
290
|
+
|
291
|
+
// 触发编辑状态更新事件
|
292
|
+
notifyEditStatusChange({ mode, rowKey, row, prop, type }) {
|
293
|
+
this.eventBus.$emit("edit-status-change", {
|
294
|
+
mode,
|
295
|
+
rowKey,
|
296
|
+
row,
|
297
|
+
prop,
|
298
|
+
type,
|
299
|
+
...this.getRowEditInfo(row),
|
300
|
+
});
|
301
|
+
}
|
302
|
+
|
303
|
+
// 获取所有新增类型的行数据
|
304
|
+
getAddedRows() {
|
305
|
+
const addedRows = [];
|
306
|
+
this.editingRows.forEach((editInfo, rowKey) => {
|
307
|
+
if (editInfo.type === "add") {
|
308
|
+
addedRows.push(editInfo);
|
309
|
+
}
|
310
|
+
});
|
311
|
+
return addedRows;
|
312
|
+
}
|
313
|
+
// 获取所有处于编辑状态的行数据
|
314
|
+
getEditingRows() {
|
315
|
+
return Array.from(this.editingRows.values());
|
316
|
+
}
|
317
|
+
}
|
318
|
+
|
319
|
+
export default EditState;
|
@@ -0,0 +1,112 @@
|
|
1
|
+
import * as XLSX from "xlsx";
|
2
|
+
|
3
|
+
/**
|
4
|
+
* 将数据导出为Excel文件
|
5
|
+
* @param {Array} data 要导出的数据
|
6
|
+
* @param {Array} columns 表格列配置
|
7
|
+
* @param {Object} options 导出选项
|
8
|
+
* @returns {void}
|
9
|
+
*/
|
10
|
+
export function exportToExcel(data, columns, options = {}) {
|
11
|
+
if (!data || !data.length || !columns || !columns.length) {
|
12
|
+
console.warn("导出数据或列配置为空");
|
13
|
+
return;
|
14
|
+
}
|
15
|
+
|
16
|
+
const {
|
17
|
+
filename = "表格数据",
|
18
|
+
sheetName = "Sheet1",
|
19
|
+
includeHidden = false,
|
20
|
+
onlySelected = false,
|
21
|
+
selectedData = [],
|
22
|
+
formatter = null,
|
23
|
+
} = options;
|
24
|
+
|
25
|
+
// 过滤要导出的列
|
26
|
+
const exportColumns = columns.filter((col) => {
|
27
|
+
// 排除不需要导出的列
|
28
|
+
if (col.type || col.export === false) return false;
|
29
|
+
// 排除隐藏列(如果不包含隐藏列)
|
30
|
+
if (!includeHidden && col.hide) return false;
|
31
|
+
return col.prop && col.label;
|
32
|
+
});
|
33
|
+
|
34
|
+
// 确定要导出的数据
|
35
|
+
const exportData = onlySelected && selectedData.length ? selectedData : data;
|
36
|
+
|
37
|
+
// 准备表头行
|
38
|
+
const headers = exportColumns.map((col) => col.label);
|
39
|
+
|
40
|
+
// 准备数据行
|
41
|
+
const rows = exportData.map((row) => {
|
42
|
+
return exportColumns.map((col) => {
|
43
|
+
let value = row[col.prop];
|
44
|
+
|
45
|
+
// 使用格式化函数处理值
|
46
|
+
if (formatter && typeof formatter === "function") {
|
47
|
+
value = formatter(value, col, row);
|
48
|
+
} else if (col.formatter && typeof col.formatter === "function") {
|
49
|
+
value = col.formatter(row, row, value, null);
|
50
|
+
}
|
51
|
+
|
52
|
+
return value !== undefined && value !== null ? value : "";
|
53
|
+
});
|
54
|
+
});
|
55
|
+
|
56
|
+
// 创建工作表数据
|
57
|
+
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows]);
|
58
|
+
|
59
|
+
// 设置列宽
|
60
|
+
const colWidths = exportColumns.map((col) => ({
|
61
|
+
wch: Math.max(
|
62
|
+
(col.label || "").toString().length * 2,
|
63
|
+
col.width ? parseInt(col.width) / 8 : 10
|
64
|
+
),
|
65
|
+
}));
|
66
|
+
worksheet["!cols"] = colWidths;
|
67
|
+
|
68
|
+
// 创建工作簿
|
69
|
+
const workbook = XLSX.utils.book_new();
|
70
|
+
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
|
71
|
+
|
72
|
+
// 导出文件
|
73
|
+
XLSX.writeFile(workbook, `${filename}.xlsx`);
|
74
|
+
}
|
75
|
+
|
76
|
+
/**
|
77
|
+
* 获取可导出的列
|
78
|
+
* @param {Array} columns 表格列配置
|
79
|
+
* @param {Boolean} includeHidden 是否包含隐藏列
|
80
|
+
* @returns {Array} 可导出的列
|
81
|
+
*/
|
82
|
+
export function getExportableColumns(columns, includeHidden = false) {
|
83
|
+
return columns.filter((col) => {
|
84
|
+
if (col.type || col.export === false) return false;
|
85
|
+
if (!includeHidden && col.hide) return false;
|
86
|
+
return col.prop && col.label;
|
87
|
+
});
|
88
|
+
}
|
89
|
+
|
90
|
+
/**
|
91
|
+
* 格式化导出数据
|
92
|
+
* @param {Array} data 原始数据
|
93
|
+
* @param {Array} columns 列配置
|
94
|
+
* @returns {Array} 格式化后的数据
|
95
|
+
*/
|
96
|
+
export function formatExportData(data, columns) {
|
97
|
+
if (!data || !data.length) return [];
|
98
|
+
|
99
|
+
const exportColumns = getExportableColumns(columns);
|
100
|
+
|
101
|
+
return data.map((row) => {
|
102
|
+
const exportRow = {};
|
103
|
+
exportColumns.forEach((col) => {
|
104
|
+
let value = row[col.prop];
|
105
|
+
if (col.formatter && typeof col.formatter === "function") {
|
106
|
+
value = col.formatter(row, row, value, null);
|
107
|
+
}
|
108
|
+
exportRow[col.label] = value !== undefined && value !== null ? value : "";
|
109
|
+
});
|
110
|
+
return exportRow;
|
111
|
+
});
|
112
|
+
}
|
@@ -0,0 +1,112 @@
|
|
1
|
+
import * as XLSX from "xlsx";
|
2
|
+
import { uniqueId } from "lodash-es";
|
3
|
+
|
4
|
+
/**
|
5
|
+
* 解析Excel文件
|
6
|
+
* @param {File} file Excel文件
|
7
|
+
* @returns {Promise<Array>} 解析后的数据
|
8
|
+
*/
|
9
|
+
export function parseExcel(file) {
|
10
|
+
return new Promise((resolve, reject) => {
|
11
|
+
const reader = new FileReader();
|
12
|
+
reader.onload = (e) => {
|
13
|
+
try {
|
14
|
+
const data = e.target.result;
|
15
|
+
const workbook = XLSX.read(data, { type: "array" });
|
16
|
+
const firstSheetName = workbook.SheetNames[0];
|
17
|
+
const worksheet = workbook.Sheets[firstSheetName];
|
18
|
+
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
19
|
+
|
20
|
+
if (jsonData.length < 2) {
|
21
|
+
// 至少需要表头和一行数据
|
22
|
+
reject(new Error("Excel文件格式不正确或没有数据"));
|
23
|
+
return;
|
24
|
+
}
|
25
|
+
|
26
|
+
resolve(jsonData);
|
27
|
+
} catch (error) {
|
28
|
+
reject(error);
|
29
|
+
}
|
30
|
+
};
|
31
|
+
reader.onerror = (error) => reject(error);
|
32
|
+
reader.readAsArrayBuffer(file);
|
33
|
+
});
|
34
|
+
}
|
35
|
+
|
36
|
+
/**
|
37
|
+
* 获取表头与列的映射关系
|
38
|
+
* @param {Array} columns 表格列配置
|
39
|
+
* @returns {Object} 表头与列属性的映射
|
40
|
+
*/
|
41
|
+
export function getHeaderColumnMap(columns) {
|
42
|
+
const headerMap = {};
|
43
|
+
columns.forEach((column) => {
|
44
|
+
if (column.label && column.prop) {
|
45
|
+
headerMap[column.label] = column.prop;
|
46
|
+
}
|
47
|
+
});
|
48
|
+
return headerMap;
|
49
|
+
}
|
50
|
+
|
51
|
+
/**
|
52
|
+
* 将Excel数据转换为表格数据
|
53
|
+
* @param {Array} excelData Excel解析后的数据
|
54
|
+
* @param {Object} headerMap 表头映射
|
55
|
+
* @param {String} valueKey 行唯一标识字段
|
56
|
+
* @param {Array} columns 表格列配置
|
57
|
+
* @returns {Array} 转换后的表格数据
|
58
|
+
*/
|
59
|
+
export function convertExcelDataToTableData(
|
60
|
+
excelData,
|
61
|
+
headerMap,
|
62
|
+
valueKey,
|
63
|
+
columns
|
64
|
+
) {
|
65
|
+
const headers = excelData[0]; // 第一行是表头
|
66
|
+
const rows = excelData.slice(1); // 剩余行是数据
|
67
|
+
|
68
|
+
return rows.map((row) => {
|
69
|
+
const rowData = {
|
70
|
+
[valueKey]: "temp_" + uniqueId(),
|
71
|
+
};
|
72
|
+
|
73
|
+
// 根据表头映射设置属性值
|
74
|
+
headers.forEach((header, index) => {
|
75
|
+
const prop = headerMap[header];
|
76
|
+
if (prop) {
|
77
|
+
rowData[prop] = row[index] !== undefined ? row[index] : "";
|
78
|
+
}
|
79
|
+
});
|
80
|
+
|
81
|
+
// 设置未匹配到的列为默认值
|
82
|
+
columns.forEach((column) => {
|
83
|
+
if (rowData[column.prop] === undefined && column.prop) {
|
84
|
+
rowData[column.prop] = column.initValue ?? "";
|
85
|
+
}
|
86
|
+
});
|
87
|
+
|
88
|
+
return rowData;
|
89
|
+
});
|
90
|
+
}
|
91
|
+
|
92
|
+
/**
|
93
|
+
* 创建文件选择器并处理文件选择
|
94
|
+
* @param {Function} callback 文件选择后的回调
|
95
|
+
*/
|
96
|
+
export function createFileInput(callback) {
|
97
|
+
const input = document.createElement("input");
|
98
|
+
input.type = "file";
|
99
|
+
input.accept = ".xlsx,.xls";
|
100
|
+
input.style.display = "none";
|
101
|
+
|
102
|
+
input.onchange = (e) => {
|
103
|
+
const file = e.target.files[0];
|
104
|
+
if (file) {
|
105
|
+
callback(file);
|
106
|
+
}
|
107
|
+
document.body.removeChild(input);
|
108
|
+
};
|
109
|
+
|
110
|
+
document.body.appendChild(input);
|
111
|
+
input.click();
|
112
|
+
}
|