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.
Files changed (291) hide show
  1. package/.browserslistrc +3 -0
  2. package/.versionrc.json +36 -0
  3. package/CHANGELOG.md +232 -0
  4. package/LICENSE +201 -0
  5. package/README.md +46 -0
  6. package/babel.config.js +12 -0
  7. package/build/alias.js +10 -0
  8. package/build/build.js +52 -0
  9. package/build/config.js +70 -0
  10. package/deploy.bat +14 -0
  11. package/docs/.vuepress/components/button/base.vue +88 -0
  12. package/docs/.vuepress/components/common/code-format.vue +331 -0
  13. package/docs/.vuepress/components/commonConfig/presetCodeTemplate/base.vue +68 -0
  14. package/docs/.vuepress/components/commonConfig/presetCodeTemplate/customParams.vue +73 -0
  15. package/docs/.vuepress/components/commonConfig/renderType/component.vue +160 -0
  16. package/docs/.vuepress/components/commonConfig/renderType/formatter.vue +49 -0
  17. package/docs/.vuepress/components/commonConfig/renderType/render.vue +91 -0
  18. package/docs/.vuepress/components/commonConfig/renderType/slot.vue +63 -0
  19. package/docs/.vuepress/components/crud/baseUse/baseUse.vue +98 -0
  20. package/docs/.vuepress/components/crud/baseUse/columnAction.vue +72 -0
  21. package/docs/.vuepress/components/crud/baseUse/columnWidth.vue +107 -0
  22. package/docs/.vuepress/components/crud/baseUse/handleRow.vue +65 -0
  23. package/docs/.vuepress/components/crud/baseUse/height.vue +82 -0
  24. package/docs/.vuepress/components/crud/baseUse/index.vue +54 -0
  25. package/docs/.vuepress/components/crud/baseUse/loading.vue +70 -0
  26. package/docs/.vuepress/components/crud/baseUse/pagination.vue +108 -0
  27. package/docs/.vuepress/components/crud/baseUse/selection.vue +114 -0
  28. package/docs/.vuepress/components/crud/baseUse/summaryMethod.vue +118 -0
  29. package/docs/.vuepress/components/crud/baseUse/title.vue +54 -0
  30. package/docs/.vuepress/components/crud/baseUse/toolbar.vue +69 -0
  31. package/docs/.vuepress/components/crud/buttons/common.vue +115 -0
  32. package/docs/.vuepress/components/crud/buttons/fast.vue +82 -0
  33. package/docs/.vuepress/components/crud/contextMenu/base.vue +72 -0
  34. package/docs/.vuepress/components/crud/copy.vue +52 -0
  35. package/docs/.vuepress/components/crud/crudEvents/api.vue +157 -0
  36. package/docs/.vuepress/components/crud/crudEvents/deleteTip.vue +93 -0
  37. package/docs/.vuepress/components/crud/crudEvents/events.vue +188 -0
  38. package/docs/.vuepress/components/crud/dataSort/base.vue +142 -0
  39. package/docs/.vuepress/components/crud/genDynamicColumns/base.vue +53 -0
  40. package/docs/.vuepress/components/crud/genDynamicColumns/dynamicAndFixed.vue +111 -0
  41. package/docs/.vuepress/components/crud/genDynamicColumns/treeDynamic.vue +68 -0
  42. package/docs/.vuepress/components/crud/handleBar/handleRow.vue +65 -0
  43. package/docs/.vuepress/components/crud/handleBar/toolbar.vue +69 -0
  44. package/docs/.vuepress/components/crud/renderType/1.vue +57 -0
  45. package/docs/.vuepress/components/crud/renderType/2.vue +63 -0
  46. package/docs/.vuepress/components/crud/renderType/3.vue +105 -0
  47. package/docs/.vuepress/components/crud/renderType/5.vue +91 -0
  48. package/docs/.vuepress/components/crud/search/1.vue +90 -0
  49. package/docs/.vuepress/components/crud/search/2.vue +78 -0
  50. package/docs/.vuepress/components/crud/search/3.vue +107 -0
  51. package/docs/.vuepress/components/crud/search/base.vue +123 -0
  52. package/docs/.vuepress/components/crud/search/localSearch.vue +124 -0
  53. package/docs/.vuepress/components/crud/search/special.vue +148 -0
  54. package/docs/.vuepress/components/crud/selection/events.vue +47 -0
  55. package/docs/.vuepress/components/crud/selection/pagination.vue +94 -0
  56. package/docs/.vuepress/components/crud/selection/singleSelection.vue +64 -0
  57. package/docs/.vuepress/components/crud/span/base.vue +69 -0
  58. package/docs/.vuepress/components/crud/span/special.vue +75 -0
  59. package/docs/.vuepress/components/crud/summary/base.vue +99 -0
  60. package/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue +174 -0
  61. package/docs/.vuepress/components/crud/tableEdit/cellEdit.vue +194 -0
  62. package/docs/.vuepress/components/crud/tableEdit/controlEdit.vue +219 -0
  63. package/docs/.vuepress/components/crud/tableEdit/dialog.vue +172 -0
  64. package/docs/.vuepress/components/crud/tableEdit/free.vue +88 -0
  65. package/docs/.vuepress/components/crud/tableEdit/freeColumn.vue +82 -0
  66. package/docs/.vuepress/components/crud/tableEdit/methods.vue +154 -0
  67. package/docs/.vuepress/components/crud/tableEdit/rowAction.vue +107 -0
  68. package/docs/.vuepress/components/crud/tableEdit/rowBatch.vue +116 -0
  69. package/docs/.vuepress/components/crud/tableEdit/rowClick.vue +98 -0
  70. package/docs/.vuepress/components/crud/validate/base.vue +122 -0
  71. package/docs/.vuepress/components/crud/validate/custom.vue +82 -0
  72. package/docs/.vuepress/components/crud/validate/regulars.vue +88 -0
  73. package/docs/.vuepress/components/crud/validate/relation.vue +91 -0
  74. package/docs/.vuepress/components/crud/validate/tree.vue +82 -0
  75. package/docs/.vuepress/components/dialog/baseUse/base.vue +92 -0
  76. package/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue +78 -0
  77. package/docs/.vuepress/components/dialog/baseUse/control.vue +79 -0
  78. package/docs/.vuepress/components/dialog/baseUse/drawer.vue +59 -0
  79. package/docs/.vuepress/components/dialog/baseUse/footer.vue +87 -0
  80. package/docs/.vuepress/components/dialog/baseUse/insertSlot.vue +79 -0
  81. package/docs/.vuepress/components/dict/DictLinkage.vue +91 -0
  82. package/docs/.vuepress/components/dict/baseUse.vue +72 -0
  83. package/docs/.vuepress/components/dict/component.vue +82 -0
  84. package/docs/.vuepress/components/dict/localDict.vue +68 -0
  85. package/docs/.vuepress/components/form/baseUse/base.vue +48 -0
  86. package/docs/.vuepress/components/form/baseUse/dataFormat.vue +92 -0
  87. package/docs/.vuepress/components/form/baseUse/deep.vue +57 -0
  88. package/docs/.vuepress/components/form/baseUse/gridLayout.vue +47 -0
  89. package/docs/.vuepress/components/form/baseUse/group.vue +66 -0
  90. package/docs/.vuepress/components/form/baseUse/hidden.vue +40 -0
  91. package/docs/.vuepress/components/form/baseUse/inlineLayout.vue +48 -0
  92. package/docs/.vuepress/components/form/baseUse/label.vue +51 -0
  93. package/docs/.vuepress/components/form/baseUse/tooltip.vue +40 -0
  94. package/docs/.vuepress/components/form/baseUse/validate.vue +52 -0
  95. package/docs/.vuepress/components/form/detail/base.vue +78 -0
  96. package/docs/.vuepress/components/form/detail/border.vue +90 -0
  97. package/docs/.vuepress/components/form/detail/singleDetail.vue +72 -0
  98. package/docs/.vuepress/components/formatData/baseUse.vue +131 -0
  99. package/docs/.vuepress/components/mock/index.js +347 -0
  100. package/docs/.vuepress/components/mockData/custom.vue +69 -0
  101. package/docs/.vuepress/components/mockData/example.vue +290 -0
  102. package/docs/.vuepress/components/positionSlot/base.vue +24 -0
  103. package/docs/.vuepress/components/positionSlot/form.vue +71 -0
  104. package/docs/.vuepress/components/positionSlot/table.vue +85 -0
  105. package/docs/.vuepress/components/tabs/base.vue +57 -0
  106. package/docs/.vuepress/components/temp.js +195 -0
  107. package/docs/.vuepress/config.js +146 -0
  108. package/docs/.vuepress/enhanceApp.js +142 -0
  109. package/docs/.vuepress/public/favicon.ico +0 -0
  110. package/docs/.vuepress/public/super.png +0 -0
  111. package/docs/.vuepress/styles/index.styl +25 -0
  112. package/docs/.vuepress/styles/palette.styl +6 -0
  113. package/docs/README.md +14 -0
  114. package/docs/guide/button/base.md +31 -0
  115. package/docs/guide/commonConfig/jsx.md +166 -0
  116. package/docs/guide/commonConfig/presetCodeTemplate.md +68 -0
  117. package/docs/guide/commonConfig/renderType.md +181 -0
  118. package/docs/guide/crud/baseUse.md +120 -0
  119. package/docs/guide/crud/buttons.md +18 -0
  120. package/docs/guide/crud/config.md +217 -0
  121. package/docs/guide/crud/contextMenu.md +18 -0
  122. package/docs/guide/crud/dataSort.md +66 -0
  123. package/docs/guide/crud/genDynamicColumns.md +145 -0
  124. package/docs/guide/crud/handleBar.md +26 -0
  125. package/docs/guide/crud/renderType.md +4 -0
  126. package/docs/guide/crud/search.md +150 -0
  127. package/docs/guide/crud/selection.md +73 -0
  128. package/docs/guide/crud/span.md +98 -0
  129. package/docs/guide/crud/summary.md +167 -0
  130. package/docs/guide/crud/tableEdit.md +377 -0
  131. package/docs/guide/crud/validate.md +158 -0
  132. package/docs/guide/dialog/baseUse.md +81 -0
  133. package/docs/guide/dict/baseUse.md +174 -0
  134. package/docs/guide/dict/component.md +88 -0
  135. package/docs/guide/dict/config.md +44 -0
  136. package/docs/guide/form/baseUse.md +142 -0
  137. package/docs/guide/form/detail.md +38 -0
  138. package/docs/guide/formatData/baseUse.md +98 -0
  139. package/docs/guide/formatData/config.md +142 -0
  140. package/docs/guide/mockData/base.md +26 -0
  141. package/docs/guide/positionSlot/base.md +41 -0
  142. package/docs/guide/question/base.md +44 -0
  143. package/docs/guide/start/base.md +30 -0
  144. package/docs/guide/tabs/base.md +63 -0
  145. package/examples/App.vue +52 -0
  146. package/examples/Layout/components/AppMain.vue +40 -0
  147. package/examples/Layout/components/Item.vue +29 -0
  148. package/examples/Layout/components/Link.vue +44 -0
  149. package/examples/Layout/components/SidebarItem.vue +93 -0
  150. package/examples/Layout/index.vue +69 -0
  151. package/examples/assets/logo.png +0 -0
  152. package/examples/favicon.ico +0 -0
  153. package/examples/index.html +18 -0
  154. package/examples/main.js +54 -0
  155. package/examples/router/index.js +140 -0
  156. package/examples/store/index.js +0 -0
  157. package/examples/styles/index.scss +63 -0
  158. package/examples/styles/sidebar.scss +226 -0
  159. package/examples/styles/transition.scss +48 -0
  160. package/examples/styles/variables.scss +25 -0
  161. package/examples/views/crud/base.vue +68 -0
  162. package/examples/views/crud/handleRow.vue +84 -0
  163. package/examples/views/crud/search.vue +116 -0
  164. package/examples/views/dashboard/index.vue +244 -0
  165. package/examples/views/dashboard/index1.vue +234 -0
  166. package/examples/views/dashboard/test.vue +9 -0
  167. package/examples/views/formTest/index.vue +168 -0
  168. package/examples/views/nested/menu1/index.vue +7 -0
  169. package/examples/views/nested/menu1/menu1-1/index.vue +7 -0
  170. package/examples/views/nested/menu1/menu1-2/index.vue +7 -0
  171. package/examples/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
  172. package/examples/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
  173. package/examples/views/nested/menu1/menu1-3/index.vue +5 -0
  174. package/examples/views/nested/menu2/index.vue +5 -0
  175. package/gulpfile.js +84 -0
  176. package/lib/index.css +1 -0
  177. package/lib/super-crud.min.js +15 -0
  178. package/package.json +66 -0
  179. package/packages/button/index.vue +189 -0
  180. package/packages/core/components/comp.vue +223 -0
  181. package/packages/core/components/position.vue +135 -0
  182. package/packages/core/components/render.vue +460 -0
  183. package/packages/core/configManager.js +302 -0
  184. package/packages/core/create.js +8 -0
  185. package/packages/core/defaultRender.js +64 -0
  186. package/packages/core/dict/global.js +10 -0
  187. package/packages/core/dict/index.js +432 -0
  188. package/packages/core/dict/mixin.js +94 -0
  189. package/packages/core/event.js +60 -0
  190. package/packages/core/index.js +6 -0
  191. package/packages/core/init.js +122 -0
  192. package/packages/core/mock/genConfig.js +228 -0
  193. package/packages/core/mock/genData.js +422 -0
  194. package/packages/core/mock/index.js +4 -0
  195. package/packages/core/rules.js +111 -0
  196. package/packages/crud/column.vue +205 -0
  197. package/packages/crud/columnAction.vue +207 -0
  198. package/packages/crud/columnCell.vue +146 -0
  199. package/packages/crud/defaultColumn.vue +130 -0
  200. package/packages/crud/drawerColumn.vue +225 -0
  201. package/packages/crud/form.vue +69 -0
  202. package/packages/crud/index.vue +564 -0
  203. package/packages/crud/menuBar.vue +298 -0
  204. package/packages/crud/mixins/cacheHandler.js +36 -0
  205. package/packages/crud/mixins/calcColumnWidth.js +79 -0
  206. package/packages/crud/mixins/calcHeight.js +105 -0
  207. package/packages/crud/mixins/columnHandler.js +128 -0
  208. package/packages/crud/mixins/contextMenu.js +98 -0
  209. package/packages/crud/mixins/dataProcessor.js +202 -0
  210. package/packages/crud/mixins/dialog.js +109 -0
  211. package/packages/crud/mixins/excelHandler.js +150 -0
  212. package/packages/crud/mixins/exposeMethods.js +107 -0
  213. package/packages/crud/mixins/generateDynamicColumns.js +250 -0
  214. package/packages/crud/mixins/props.js +38 -0
  215. package/packages/crud/mixins/searchHandler.js +151 -0
  216. package/packages/crud/mixins/select.js +359 -0
  217. package/packages/crud/mixins/spanMethod.js +288 -0
  218. package/packages/crud/mixins/summary.js +177 -0
  219. package/packages/crud/mixins/tableEdit.js +547 -0
  220. package/packages/crud/mixins/validate.js +219 -0
  221. package/packages/crud/pagination.vue +110 -0
  222. package/packages/crud/search.vue +119 -0
  223. package/packages/crud/searchHeader.vue +231 -0
  224. package/packages/crud/selectBanner.vue +138 -0
  225. package/packages/crud/utils/EditState.js +319 -0
  226. package/packages/crud/utils/excelExport.js +112 -0
  227. package/packages/crud/utils/excelImport.js +112 -0
  228. package/packages/crud/utils/index.js +98 -0
  229. package/packages/dialog/dialog.js +233 -0
  230. package/packages/dialog/dialog.vue +15 -0
  231. package/packages/dialog/index.js +22 -0
  232. package/packages/dict/cascadeFormat.vue +179 -0
  233. package/packages/dict/dateFormat.vue +40 -0
  234. package/packages/dict/form/cascade.vue +61 -0
  235. package/packages/dict/form/checkbox.vue +90 -0
  236. package/packages/dict/form/extendMethod.js +22 -0
  237. package/packages/dict/form/input-base.js +31 -0
  238. package/packages/dict/form/input.js +20 -0
  239. package/packages/dict/form/radio.vue +69 -0
  240. package/packages/dict/form/select.vue +118 -0
  241. package/packages/dict/form/switch.vue +75 -0
  242. package/packages/dict/valueFormat.vue +188 -0
  243. package/packages/directive/dialog/drag.js +86 -0
  244. package/packages/directive/dialog/dragSize.js +42 -0
  245. package/packages/directive/index.js +9 -0
  246. package/packages/directive/insertSlot.js +10 -0
  247. package/packages/form/contextMenu.js +192 -0
  248. package/packages/form/draftDrawer.vue +391 -0
  249. package/packages/form/formAction.vue +97 -0
  250. package/packages/form/formItem.vue +259 -0
  251. package/packages/form/index.vue +451 -0
  252. package/packages/form/props.js +15 -0
  253. package/packages/grid/cell.vue +65 -0
  254. package/packages/grid/index.vue +130 -0
  255. package/packages/group/index.vue +96 -0
  256. package/packages/tabs/index.vue +290 -0
  257. package/packages/tooltip/index.js +9 -0
  258. package/packages/tooltip/tooltip.vue +32 -0
  259. package/packages/tooltip/tooltipComponent.js +38 -0
  260. package/packages/verifyInput/index.vue +131 -0
  261. package/src/config/common.js +88 -0
  262. package/src/config/crud.js +567 -0
  263. package/src/config/dialog.js +87 -0
  264. package/src/config/form.js +215 -0
  265. package/src/config/index.js +9 -0
  266. package/src/constants/index.js +72 -0
  267. package/src/index.js +67 -0
  268. package/src/template/btn/crud.js +6 -0
  269. package/src/template/btn/dialog.js +1 -0
  270. package/src/template/btn/form.js +3 -0
  271. package/src/template/btn/index.js +9 -0
  272. package/src/template/dicts.js +1 -0
  273. package/src/template/formatData.js +507 -0
  274. package/src/template/index.js +19 -0
  275. package/src/template/render.js +124 -0
  276. package/src/template/rules.js +53 -0
  277. package/src/utils/bem.js +49 -0
  278. package/src/utils/cache.js +77 -0
  279. package/src/utils/getType.js +34 -0
  280. package/src/utils/index.js +212 -0
  281. package/src/utils/mergeTemp.js +124 -0
  282. package/styles/button.scss +3 -0
  283. package/styles/crud.scss +425 -0
  284. package/styles/dialog.scss +95 -0
  285. package/styles/form.scss +532 -0
  286. package/styles/group.scss +78 -0
  287. package/styles/index.scss +94 -0
  288. package/styles/tabs.scss +139 -0
  289. package/styles/verifyInput.scss +56 -0
  290. package/vue-jsx-sync.js +90 -0
  291. 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
+ };