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,298 @@
|
|
1
|
+
<template>
|
2
|
+
<div :class="b()">
|
3
|
+
<div v-if="showHandleRow" :class="b('handleRow')" style="flex: 1;">
|
4
|
+
<position
|
5
|
+
slotName="handleRow"
|
6
|
+
:slots="ctx.$scopedSlots"
|
7
|
+
:scope="ctx.crudOptions"
|
8
|
+
style="width: 100%;"
|
9
|
+
><div
|
10
|
+
style="display: flex; width: 100%;"
|
11
|
+
v-if="handleRowButtons.length > 0"
|
12
|
+
>
|
13
|
+
<button_
|
14
|
+
v-for="(btn, index) in handleRowButtons"
|
15
|
+
:type="btn.type"
|
16
|
+
v-bind="btn"
|
17
|
+
:key="btn.key || btn.title || index"
|
18
|
+
:scope="btn.key === 'batchDelete' ? ctx.selectionRow : null"
|
19
|
+
:loading="ctx.loadingStatus"
|
20
|
+
:disabled="
|
21
|
+
btn.disabled === undefined
|
22
|
+
? ctx.crudOptions.disabled
|
23
|
+
: btn.disabled
|
24
|
+
"
|
25
|
+
/></div
|
26
|
+
></position>
|
27
|
+
</div>
|
28
|
+
<div v-if="showToolbar" :class="b('toolbar')">
|
29
|
+
<position
|
30
|
+
slotName="toolbar"
|
31
|
+
:slots="ctx.$scopedSlots"
|
32
|
+
:scope="ctx.crudOptions"
|
33
|
+
><button_
|
34
|
+
v-for="(btn, index) in toolbarButtons"
|
35
|
+
:type="btn.type"
|
36
|
+
v-bind="btn"
|
37
|
+
:key="btn.key || btn.title || index"
|
38
|
+
:loading="ctx.loadingStatus"
|
39
|
+
/></position>
|
40
|
+
</div>
|
41
|
+
<drawerColumn v-if="showDrawer" ref="drawerColumn" />
|
42
|
+
</div>
|
43
|
+
</template>
|
44
|
+
|
45
|
+
<script>
|
46
|
+
import create from "core/create";
|
47
|
+
import { batchMerge } from "utils/mergeTemp";
|
48
|
+
import drawerColumn from "./drawerColumn.vue";
|
49
|
+
import button_ from "pak/button";
|
50
|
+
import position from "core/components/position";
|
51
|
+
import { checkVisibility } from "utils";
|
52
|
+
export default create({
|
53
|
+
name: "crud-menuBar",
|
54
|
+
inject: ["ctx"],
|
55
|
+
components: { drawerColumn, button_, position },
|
56
|
+
data() {
|
57
|
+
return {
|
58
|
+
isBatchEdit: false,
|
59
|
+
showDrawer: false,
|
60
|
+
};
|
61
|
+
},
|
62
|
+
mounted() {
|
63
|
+
// 订阅编辑状态变更事件
|
64
|
+
if (this.ctx.editState) {
|
65
|
+
this.ctx.editState.on("edit-status-change", () => {
|
66
|
+
if (!this.ctx.editConfig.batch) return;
|
67
|
+
const editRowKeys = this.ctx.editState.getEditingRowKeys();
|
68
|
+
if (editRowKeys.length === 0) {
|
69
|
+
this.isBatchEdit = false;
|
70
|
+
}
|
71
|
+
if (editRowKeys.length === this.ctx.list.length) {
|
72
|
+
this.isBatchEdit = true;
|
73
|
+
}
|
74
|
+
});
|
75
|
+
}
|
76
|
+
},
|
77
|
+
computed: {
|
78
|
+
showHandleRow() {
|
79
|
+
return checkVisibility(this.handleRow, null, true);
|
80
|
+
},
|
81
|
+
showToolbar() {
|
82
|
+
return checkVisibility(this.toolbar, null, true);
|
83
|
+
},
|
84
|
+
handleRow() {
|
85
|
+
const handleRow = { ...(this.ctx.crudOptions.handleRow || {}) };
|
86
|
+
const editConfig = this.ctx.editConfig;
|
87
|
+
return {
|
88
|
+
add: editConfig.add,
|
89
|
+
rowAdd: editConfig.rowAdd,
|
90
|
+
batchDelete: editConfig.batchDelete,
|
91
|
+
...handleRow,
|
92
|
+
};
|
93
|
+
},
|
94
|
+
toolbar() {
|
95
|
+
const toolbar = { ...(this.ctx.crudOptions.toolbar || {}) };
|
96
|
+
const editConfig = this.ctx.editConfig;
|
97
|
+
return {
|
98
|
+
batchEdit: editConfig.batch,
|
99
|
+
batchSave: editConfig.batch,
|
100
|
+
batchCancel: editConfig.batch,
|
101
|
+
search: this.hasSearch,
|
102
|
+
// excelImport: true,
|
103
|
+
// excelExport: true,
|
104
|
+
zoom: true,
|
105
|
+
refresh: true,
|
106
|
+
reset: true,
|
107
|
+
column: true,
|
108
|
+
...toolbar,
|
109
|
+
};
|
110
|
+
},
|
111
|
+
hasSearch() {
|
112
|
+
return this.ctx.trueRenderColumns.some((i) => i.search);
|
113
|
+
},
|
114
|
+
handleRowButtons() {
|
115
|
+
const handleRow = this.handleRow;
|
116
|
+
if (!handleRow) return;
|
117
|
+
let buttons = [];
|
118
|
+
|
119
|
+
const merges = batchMerge(
|
120
|
+
"btn.crud.handleRow",
|
121
|
+
handleRow,
|
122
|
+
{
|
123
|
+
ctx: this.ctx,
|
124
|
+
},
|
125
|
+
this.handleRowTemps
|
126
|
+
);
|
127
|
+
buttons.push(...merges);
|
128
|
+
buttons = this.ctx.checkHiddenButtons("handleRow", buttons);
|
129
|
+
return buttons;
|
130
|
+
},
|
131
|
+
toolbarButtons() {
|
132
|
+
const toolbar = this.toolbar;
|
133
|
+
if (!toolbar) return;
|
134
|
+
let buttons = [];
|
135
|
+
const merges = batchMerge(
|
136
|
+
"btn.crud.toolbar",
|
137
|
+
toolbar,
|
138
|
+
{
|
139
|
+
ctx: this.ctx,
|
140
|
+
self: this,
|
141
|
+
},
|
142
|
+
this.toolbarTemps
|
143
|
+
);
|
144
|
+
buttons.push(...merges);
|
145
|
+
buttons = this.ctx.checkHiddenButtons("toolbar", buttons);
|
146
|
+
return buttons;
|
147
|
+
},
|
148
|
+
handleRowTemps() {
|
149
|
+
return {
|
150
|
+
add: {
|
151
|
+
icon: "el-icon-plus",
|
152
|
+
label: "新增",
|
153
|
+
type: "primary",
|
154
|
+
onClick: () => {
|
155
|
+
this.ctx.handleAdd(this.ctx.editConfig.add?.addType || "last");
|
156
|
+
},
|
157
|
+
},
|
158
|
+
batchDelete: {
|
159
|
+
icon: "el-icon-delete",
|
160
|
+
label: "删除",
|
161
|
+
type: "danger",
|
162
|
+
disabled: this.ctx.selectionRow.length === 0,
|
163
|
+
onClick: () => {
|
164
|
+
this.ctx.handleBatchDelete();
|
165
|
+
},
|
166
|
+
},
|
167
|
+
rowAdd: {
|
168
|
+
icon: "el-icon-plus",
|
169
|
+
label: "新增",
|
170
|
+
type: "primary",
|
171
|
+
onClick: () => {
|
172
|
+
const editConfig = this.ctx.editConfig;
|
173
|
+
this.ctx.handleRowAdd(editConfig.rowAdd?.addType);
|
174
|
+
},
|
175
|
+
},
|
176
|
+
};
|
177
|
+
},
|
178
|
+
toolbarTemps() {
|
179
|
+
return {
|
180
|
+
batchEdit: {
|
181
|
+
label: "批量编辑",
|
182
|
+
type: "primary",
|
183
|
+
innerHide: this.isBatchEdit,
|
184
|
+
disabled:
|
185
|
+
this.ctx.list.length === 0 ||
|
186
|
+
(this.ctx.editConfig.batch?.isSelect &&
|
187
|
+
this.ctx.selectionRow.length === 0),
|
188
|
+
onClick: () => {
|
189
|
+
this.isBatchEdit = true;
|
190
|
+
this.ctx.handleBatchRowEdit();
|
191
|
+
},
|
192
|
+
},
|
193
|
+
batchSave: {
|
194
|
+
type: "primary",
|
195
|
+
label: "保存",
|
196
|
+
style: {
|
197
|
+
marginLeft: "auto",
|
198
|
+
},
|
199
|
+
innerHide: !this.isBatchEdit,
|
200
|
+
onClick: () => {
|
201
|
+
this.ctx.handleBatchRowSave(() => {
|
202
|
+
this.isBatchEdit = false;
|
203
|
+
});
|
204
|
+
},
|
205
|
+
},
|
206
|
+
batchCancel: {
|
207
|
+
label: "取消",
|
208
|
+
style: {
|
209
|
+
marginRight: "10px",
|
210
|
+
},
|
211
|
+
innerHide: !this.isBatchEdit,
|
212
|
+
onClick: () => {
|
213
|
+
this.resetBatchEdit();
|
214
|
+
},
|
215
|
+
},
|
216
|
+
excelImport: {
|
217
|
+
icon: "el-icon-upload",
|
218
|
+
title: "导入",
|
219
|
+
circle: true,
|
220
|
+
onClick: () => {
|
221
|
+
this.ctx.showExcelImportDialog();
|
222
|
+
},
|
223
|
+
},
|
224
|
+
excelExport: {
|
225
|
+
icon: "el-icon-download",
|
226
|
+
title: "导出",
|
227
|
+
circle: true,
|
228
|
+
onClick: () => {
|
229
|
+
this.ctx.exportToExcel();
|
230
|
+
},
|
231
|
+
},
|
232
|
+
zoom: {
|
233
|
+
icon: "el-icon-full-screen",
|
234
|
+
title: "最大化",
|
235
|
+
circle: true,
|
236
|
+
onClick: () => {
|
237
|
+
this.ctx.isMaximize = !this.ctx.isMaximize;
|
238
|
+
this.ctx.$emit("zoom");
|
239
|
+
},
|
240
|
+
},
|
241
|
+
refresh: {
|
242
|
+
icon: "el-icon-refresh",
|
243
|
+
title: "刷新",
|
244
|
+
circle: true,
|
245
|
+
onClick: () => {
|
246
|
+
this.ctx.getList();
|
247
|
+
this.ctx.$emit("refresh");
|
248
|
+
},
|
249
|
+
},
|
250
|
+
reset: {
|
251
|
+
icon: "el-icon-refresh-right",
|
252
|
+
title: "重置",
|
253
|
+
circle: true,
|
254
|
+
onClick: () => {
|
255
|
+
this.ctx.handleReset();
|
256
|
+
},
|
257
|
+
},
|
258
|
+
search: {
|
259
|
+
icon: "el-icon-search",
|
260
|
+
title: "查询",
|
261
|
+
circle: true,
|
262
|
+
onClick: () => {
|
263
|
+
this.ctx.showSearch = !this.ctx.showSearch;
|
264
|
+
this.ctx.loadingStatus = true;
|
265
|
+
this.ctx.isChangeShowSearch = true;
|
266
|
+
setTimeout(() => {
|
267
|
+
this.ctx.loadingStatus = false;
|
268
|
+
}, 300);
|
269
|
+
setTimeout(() => {
|
270
|
+
this.ctx.isChangeShowSearch = false;
|
271
|
+
}, 500);
|
272
|
+
},
|
273
|
+
},
|
274
|
+
column: {
|
275
|
+
icon: "el-icon-set-up",
|
276
|
+
title: "列设置",
|
277
|
+
circle: true,
|
278
|
+
onClick: () => {
|
279
|
+
this.showDrawerColumn();
|
280
|
+
},
|
281
|
+
},
|
282
|
+
};
|
283
|
+
},
|
284
|
+
},
|
285
|
+
methods: {
|
286
|
+
showDrawerColumn() {
|
287
|
+
this.showDrawer = true;
|
288
|
+
this.$nextTick(() => {
|
289
|
+
this.$refs.drawerColumn.showDrawer();
|
290
|
+
});
|
291
|
+
},
|
292
|
+
resetBatchEdit() {
|
293
|
+
this.isBatchEdit = false;
|
294
|
+
this.ctx.handleBatchRowCancel();
|
295
|
+
},
|
296
|
+
},
|
297
|
+
});
|
298
|
+
</script>
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import cache from "utils/cache.js";
|
2
|
+
export default {
|
3
|
+
data() {
|
4
|
+
return {
|
5
|
+
setOptions: {
|
6
|
+
fixed: {},
|
7
|
+
sort: {},
|
8
|
+
hidden: [],
|
9
|
+
pageSize: 10,
|
10
|
+
},
|
11
|
+
};
|
12
|
+
},
|
13
|
+
methods: {
|
14
|
+
getLocalCache() {
|
15
|
+
if (!this.$route) return;
|
16
|
+
const cacheData = cache.local.getJSON("tableOptions") || {};
|
17
|
+
this.setOptions = Object.assign(
|
18
|
+
this.setOptions,
|
19
|
+
cacheData[this.$route.path]
|
20
|
+
);
|
21
|
+
},
|
22
|
+
resetLocalCache() {
|
23
|
+
this.setOptions.fixed = {};
|
24
|
+
this.setOptions.sort = {};
|
25
|
+
this.setOptions.hidden = [];
|
26
|
+
this.saveLocalCache();
|
27
|
+
},
|
28
|
+
saveLocalCache(refresh = true) {
|
29
|
+
if (!this.$route) return;
|
30
|
+
let cacheData = cache.local.getJSON("tableOptions") || {};
|
31
|
+
cacheData[this.$route.path] = this.setOptions;
|
32
|
+
cache.local.setJSON("tableOptions", cacheData);
|
33
|
+
refresh && this.refreshTable();
|
34
|
+
},
|
35
|
+
},
|
36
|
+
};
|
@@ -0,0 +1,79 @@
|
|
1
|
+
export default {
|
2
|
+
data() {
|
3
|
+
return {
|
4
|
+
curIndex: 0,
|
5
|
+
};
|
6
|
+
},
|
7
|
+
created() {
|
8
|
+
this.canvas = document.createElement("canvas");
|
9
|
+
this.context = this.canvas.getContext("2d");
|
10
|
+
},
|
11
|
+
methods: {
|
12
|
+
getCharacterWidth(char, font = "12px Arial") {
|
13
|
+
this.context.font = font;
|
14
|
+
return Math.ceil(this.context.measureText(char).width);
|
15
|
+
},
|
16
|
+
|
17
|
+
// 获取最大宽度
|
18
|
+
getMaxContentWidth(tableData, property, font, padding) {
|
19
|
+
let maxWidth = 0;
|
20
|
+
for (let index = 0; index < tableData.length; index++) {
|
21
|
+
const row = tableData[index];
|
22
|
+
if (row[property] != null) {
|
23
|
+
const contentWidth = this.getCharacterWidth(
|
24
|
+
String(row[property]),
|
25
|
+
font
|
26
|
+
);
|
27
|
+
if (contentWidth > maxWidth) {
|
28
|
+
maxWidth = contentWidth;
|
29
|
+
this.curIndex = index;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
return maxWidth + padding;
|
34
|
+
},
|
35
|
+
|
36
|
+
// 获取第一个内容不为空的宽度
|
37
|
+
getFirstContentWidth(tableData, property, font, padding) {
|
38
|
+
for (let index = 0; index < tableData.length; index++) {
|
39
|
+
const row = tableData[index];
|
40
|
+
if (row[property] != null && row[property].toString().length > 0) {
|
41
|
+
this.curIndex = index;
|
42
|
+
return this.getCharacterWidth(String(row[property]), font) + padding;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
return 0;
|
46
|
+
},
|
47
|
+
|
48
|
+
calcColumnWidth(property, tableData, type = "first", font, padding = 20) {
|
49
|
+
if (!property || !Array.isArray(tableData) || tableData.length === 0) {
|
50
|
+
return "80px";
|
51
|
+
}
|
52
|
+
|
53
|
+
let contentWidth;
|
54
|
+
if (type === "first") {
|
55
|
+
contentWidth = this.getFirstContentWidth(
|
56
|
+
tableData,
|
57
|
+
property,
|
58
|
+
font,
|
59
|
+
padding
|
60
|
+
);
|
61
|
+
} else {
|
62
|
+
contentWidth = this.getMaxContentWidth(
|
63
|
+
tableData,
|
64
|
+
property,
|
65
|
+
font,
|
66
|
+
padding
|
67
|
+
);
|
68
|
+
}
|
69
|
+
let flexWidth = contentWidth < 80 ? 80 : contentWidth;
|
70
|
+
return `${flexWidth}px`;
|
71
|
+
},
|
72
|
+
getColumnWidth(width, prop, data, type, font, padding) {
|
73
|
+
if (width === "auto") {
|
74
|
+
return this.calcColumnWidth(prop, data, type, font, padding);
|
75
|
+
}
|
76
|
+
return width;
|
77
|
+
},
|
78
|
+
},
|
79
|
+
};
|
@@ -0,0 +1,105 @@
|
|
1
|
+
import { debounce } from "lodash-es";
|
2
|
+
import { checkVisibility } from "utils";
|
3
|
+
export default {
|
4
|
+
data() {
|
5
|
+
return {
|
6
|
+
tableTop: 0,
|
7
|
+
wrapperTop: 0,
|
8
|
+
innerHeight: innerHeight,
|
9
|
+
observer: new IntersectionObserver((entries) => {
|
10
|
+
entries.forEach((entry) => {
|
11
|
+
if (this.visibilityCallback) {
|
12
|
+
this.visibilityCallback(entry.isIntersecting);
|
13
|
+
}
|
14
|
+
});
|
15
|
+
}),
|
16
|
+
visibilityCallback: null,
|
17
|
+
};
|
18
|
+
},
|
19
|
+
created() {
|
20
|
+
this.handleResize = debounce(this.handleResize, 200);
|
21
|
+
},
|
22
|
+
mounted() {
|
23
|
+
window.addEventListener("resize", this.handleResize);
|
24
|
+
this.getClientTop();
|
25
|
+
},
|
26
|
+
destroyed() {
|
27
|
+
window.removeEventListener("resize", this.handleResize);
|
28
|
+
},
|
29
|
+
computed: {
|
30
|
+
defaultHeight() {
|
31
|
+
return this.crudOptions.defaultHeight || 200;
|
32
|
+
},
|
33
|
+
isAutoHeight() {
|
34
|
+
return this.crudOptions.height === "auto";
|
35
|
+
},
|
36
|
+
tableHeight() {
|
37
|
+
if (!this.isAutoHeight) return this.crudOptions.height;
|
38
|
+
const calc = (this.crudOptions.calcHeight || 0) + this.footerHeight;
|
39
|
+
const defaultHeight =
|
40
|
+
this.defaultHeight -
|
41
|
+
(this.tableTop - this.wrapperTop) -
|
42
|
+
this.footerHeight;
|
43
|
+
return (
|
44
|
+
Math.max(
|
45
|
+
Math.ceil(this.innerHeight - this.tableTop - calc),
|
46
|
+
defaultHeight
|
47
|
+
) + "px"
|
48
|
+
);
|
49
|
+
},
|
50
|
+
wrapperHeight() {
|
51
|
+
if (!this.isAutoHeight) return "auto";
|
52
|
+
const calc = this.crudOptions.calcHeight || 0;
|
53
|
+
return (
|
54
|
+
Math.max(
|
55
|
+
Math.ceil(this.innerHeight - this.wrapperTop - calc),
|
56
|
+
this.defaultHeight
|
57
|
+
) + "px"
|
58
|
+
);
|
59
|
+
},
|
60
|
+
footerHeight() {
|
61
|
+
if (
|
62
|
+
checkVisibility(this.crudOptions.pagination, null, this.total > 0) ===
|
63
|
+
false
|
64
|
+
)
|
65
|
+
return 0;
|
66
|
+
return 50;
|
67
|
+
},
|
68
|
+
},
|
69
|
+
updated() {
|
70
|
+
this.getClientTop();
|
71
|
+
},
|
72
|
+
activated() {
|
73
|
+
this.getClientTop();
|
74
|
+
},
|
75
|
+
methods: {
|
76
|
+
getClientTop() {
|
77
|
+
if (this.isAutoHeight) {
|
78
|
+
this.$nextTick(() => {
|
79
|
+
const tableRef = this.$refs.tableRef?.$el;
|
80
|
+
this.observeVisibility(tableRef, (isVisible) => {
|
81
|
+
if (isVisible) {
|
82
|
+
const tableTop = tableRef?.getBoundingClientRect().top;
|
83
|
+
if (this.tableTop !== tableTop) this.tableTop = tableTop;
|
84
|
+
const wrapperTop = this.$refs.wrapper?.getBoundingClientRect()
|
85
|
+
.top;
|
86
|
+
if (this.wrapperHeight !== wrapperTop)
|
87
|
+
this.wrapperTop = wrapperTop;
|
88
|
+
}
|
89
|
+
this.$nextTick(() => {
|
90
|
+
this.observer.disconnect();
|
91
|
+
});
|
92
|
+
});
|
93
|
+
});
|
94
|
+
}
|
95
|
+
},
|
96
|
+
observeVisibility(element, callback) {
|
97
|
+
this.visibilityCallback = callback;
|
98
|
+
this.observer.observe(element);
|
99
|
+
},
|
100
|
+
handleResize() {
|
101
|
+
this.innerHeight = innerHeight;
|
102
|
+
this.getClientTop();
|
103
|
+
},
|
104
|
+
},
|
105
|
+
};
|
@@ -0,0 +1,128 @@
|
|
1
|
+
import { isPlainObject, get, merge, cloneDeep, pick } from "lodash-es";
|
2
|
+
import { mergeTemp, singleMerge } from "utils";
|
3
|
+
export default {
|
4
|
+
methods: {
|
5
|
+
initColumn(item, index) {
|
6
|
+
if (
|
7
|
+
(item.form || this.isEdit || item.isEdit) &&
|
8
|
+
item.form !== false &&
|
9
|
+
item.isEdit !== false
|
10
|
+
) {
|
11
|
+
item.form = this.extendsOption(
|
12
|
+
item,
|
13
|
+
item.form,
|
14
|
+
pick(item, ["label", "prop", "required", "regular", "rules"])
|
15
|
+
);
|
16
|
+
}
|
17
|
+
if ((item.form || item.add) && item.add !== false) {
|
18
|
+
item.add = this.extendsOption(item, item.add, item.form);
|
19
|
+
}
|
20
|
+
if ((item.form || item.edit) && item.edit !== false) {
|
21
|
+
item.edit = this.extendsOption(item, item.edit, item.form);
|
22
|
+
}
|
23
|
+
if ((item.form || item.view) && item.view !== false) {
|
24
|
+
item.view = this.extendsOption(item, item.view, item.form);
|
25
|
+
}
|
26
|
+
if (item.search) {
|
27
|
+
item.search = this.extendsOption(item, item.search, {});
|
28
|
+
}
|
29
|
+
if ((item.search || item.searchHeader) && item.searchHeader !== false) {
|
30
|
+
item.searchHeader = this.extendsOption(
|
31
|
+
item,
|
32
|
+
item.searchHeader,
|
33
|
+
item.search
|
34
|
+
);
|
35
|
+
}
|
36
|
+
const order = this.setOptions?.sort[item.prop];
|
37
|
+
item.order = order === 0 || order ? order : index;
|
38
|
+
|
39
|
+
// 行合并
|
40
|
+
const span = item.spanProp || item.sameRowSpan;
|
41
|
+
if (span) {
|
42
|
+
if (typeof span === "string") {
|
43
|
+
this.sameRowSpans.push(span);
|
44
|
+
} else {
|
45
|
+
this.sameRowSpans.push(item.prop);
|
46
|
+
}
|
47
|
+
}
|
48
|
+
// 统计
|
49
|
+
if (item.summary) {
|
50
|
+
this._showSummary = true;
|
51
|
+
}
|
52
|
+
if (!item.minWidth && !item.width) {
|
53
|
+
item.minWidth = this.getDefaultColumnMinWidth(item);
|
54
|
+
}
|
55
|
+
},
|
56
|
+
extendsOption(item, current, extendsObj) {
|
57
|
+
if (current === false) return;
|
58
|
+
// current 可能为 undefined || true 转换为 {}
|
59
|
+
current = isPlainObject(current) ? current : {};
|
60
|
+
current = mergeTemp("render", current.presetType, current);
|
61
|
+
const formatData = get(current, "formatData.type") || current.formatData;
|
62
|
+
if (typeof formatData === "string") {
|
63
|
+
current.formatData = Object.assign(
|
64
|
+
{},
|
65
|
+
current.formatData,
|
66
|
+
singleMerge("formatData", formatData, current)
|
67
|
+
);
|
68
|
+
}
|
69
|
+
extendsObj = cloneDeep(extendsObj);
|
70
|
+
if (current.hidden !== true) {
|
71
|
+
return merge(
|
72
|
+
{
|
73
|
+
label: item.label,
|
74
|
+
prop: item.prop,
|
75
|
+
dict: item.dict,
|
76
|
+
...extendsObj,
|
77
|
+
},
|
78
|
+
current
|
79
|
+
);
|
80
|
+
}
|
81
|
+
},
|
82
|
+
isDefaultColumn(col) {
|
83
|
+
return this._runWithoutDeps(() => {
|
84
|
+
if (
|
85
|
+
col.comp ||
|
86
|
+
col.render ||
|
87
|
+
col.html ||
|
88
|
+
col.isEdit ||
|
89
|
+
this.extendsScopedSlots[col.prop] ||
|
90
|
+
col.position ||
|
91
|
+
col.formatData
|
92
|
+
) {
|
93
|
+
return false;
|
94
|
+
}
|
95
|
+
if (this.editConfig.mode && col.isEdit !== false) {
|
96
|
+
return false;
|
97
|
+
}
|
98
|
+
return true;
|
99
|
+
});
|
100
|
+
},
|
101
|
+
getDefaultColumnMinWidth(col) {
|
102
|
+
if (this.labelMinWidthMap.has(col.label)) {
|
103
|
+
return this.labelMinWidthMap.get(col.label);
|
104
|
+
}
|
105
|
+
const labelSpan = document.createElement("span");
|
106
|
+
labelSpan.innerText = col.label;
|
107
|
+
document.body.appendChild(labelSpan);
|
108
|
+
let labelMinWidth = labelSpan.getBoundingClientRect().width + 20;
|
109
|
+
col.search && (labelMinWidth += 20);
|
110
|
+
col.sortable && (labelMinWidth += 25);
|
111
|
+
document.body.removeChild(labelSpan);
|
112
|
+
labelMinWidth = Math.max(Math.round(labelMinWidth), 80);
|
113
|
+
this.labelMinWidthMap.set(col.label, labelMinWidth);
|
114
|
+
return labelMinWidth;
|
115
|
+
},
|
116
|
+
extendsSlots(slots, name, extendsName) {
|
117
|
+
Object.keys(slots).forEach((slot) => {
|
118
|
+
if (slot.endsWith(`-${extendsName}`)) {
|
119
|
+
const baseName = slot.slice(0, -(extendsName.length + 1));
|
120
|
+
const searchSlotName = `${baseName}-${name}`;
|
121
|
+
if (!slots[searchSlotName]) {
|
122
|
+
slots[searchSlotName] = slots[slot];
|
123
|
+
}
|
124
|
+
}
|
125
|
+
});
|
126
|
+
},
|
127
|
+
},
|
128
|
+
};
|