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,42 @@
1
+ /**
2
+ * v-dialogDragWidth 可拖动弹窗高度(右下角)
3
+ * Copyright (c) 2019 ruoyi
4
+ */
5
+
6
+ export default {
7
+ bind(el, binding) {
8
+ const value = binding.value;
9
+ if (value == false) return;
10
+ const dragDom = el.querySelector(".el-dialog");
11
+ const lineEl = document.createElement("div");
12
+ lineEl.style =
13
+ "width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;";
14
+ lineEl.addEventListener(
15
+ "mousedown",
16
+ function (e) {
17
+ // 鼠标按下,计算当前元素距离可视区的距离
18
+ const disX = e.clientX - el.offsetLeft;
19
+ const disY = e.clientY - el.offsetTop;
20
+ // 当前宽度 高度
21
+ const curWidth = dragDom.offsetWidth;
22
+ const curHeight = dragDom.offsetHeight;
23
+ document.onmousemove = function (e) {
24
+ dragDom.style["user-select"] = "none";
25
+ e.preventDefault(); // 移动时禁用默认事件
26
+ // 通过事件委托,计算移动的距离
27
+ const xl = e.clientX - disX;
28
+ const yl = e.clientY - disY;
29
+ dragDom.style.width = `${curWidth + xl}px`;
30
+ dragDom.style.height = `${curHeight + yl}px`;
31
+ };
32
+ document.onmouseup = function (e) {
33
+ dragDom.style["user-select"] = "auto";
34
+ document.onmousemove = null;
35
+ document.onmouseup = null;
36
+ };
37
+ },
38
+ false
39
+ );
40
+ dragDom.appendChild(lineEl);
41
+ },
42
+ };
@@ -0,0 +1,9 @@
1
+ import insertSlot from "./insertSlot";
2
+ import dialogDrag from "./dialog/drag";
3
+ import dialogDragSize from "./dialog/dragSize";
4
+
5
+ export default function (Vue) {
6
+ Vue.directive("insertSlot", insertSlot);
7
+ Vue.directive("scDialogDrag", dialogDrag);
8
+ Vue.directive("scDialogDragHeight", dialogDragSize);
9
+ }
@@ -0,0 +1,10 @@
1
+ export default {
2
+ inserted: function (el) {
3
+ el.parentNode && el.parentNode.removeChild(el);
4
+ },
5
+ update(el, binding, vnode, oldVnode) {
6
+ if (binding.value) {
7
+ binding.value.vnode = oldVnode;
8
+ }
9
+ },
10
+ };
@@ -0,0 +1,192 @@
1
+ import { batchMerge } from "utils/mergeTemp";
2
+ import { checkVisibility, filterButtons } from "utils";
3
+ export default {
4
+ methods: {
5
+ contextMenuTemps() {
6
+ return {
7
+ mock: {
8
+ label: "生成测试数据",
9
+ icon: "el-icon-magic-stick",
10
+ onClick: () => {
11
+ this.$emit("mockData");
12
+ },
13
+ },
14
+ reset: {
15
+ label: "重置表单",
16
+ icon: "el-icon-refresh",
17
+ onClick: () => {
18
+ this.$emit("handleChild", "resetField", null, true);
19
+ },
20
+ },
21
+ copy: {
22
+ label: "复制数据",
23
+ icon: "el-icon-document-copy",
24
+ onClick: async () => {
25
+ try {
26
+ // 只获取显示的字段数据
27
+ const visibleData = this.trueRenderColumns.reduce(
28
+ (acc, column) => {
29
+ if (!column.hidden && this.value[column.prop] !== undefined) {
30
+ acc[column.prop] = this.value[column.prop];
31
+ }
32
+ return acc;
33
+ },
34
+ {}
35
+ );
36
+
37
+ const jsonStr = JSON.stringify(visibleData, null, 2);
38
+ await navigator.clipboard.writeText(jsonStr);
39
+ this.$message.success("表单数据已复制到剪贴板");
40
+ this.$emit("copy", jsonStr);
41
+ } catch (error) {
42
+ this.$message.error("复制失败:" + error.message);
43
+ }
44
+ },
45
+ },
46
+ paste: {
47
+ label: "粘贴数据",
48
+ icon: "el-icon-document-add",
49
+ children: [
50
+ {
51
+ label: "粘贴当前",
52
+ onClick: async () => {
53
+ try {
54
+ await this.handlePasteData();
55
+ } catch (error) {
56
+ this.$message.error("导入失败:" + error.message);
57
+ }
58
+ },
59
+ },
60
+ {
61
+ label: "粘贴全部",
62
+ onClick: async () => {
63
+ try {
64
+ await this.handlePasteData(true);
65
+ } catch (error) {
66
+ this.$message.error("导入失败:" + error.message);
67
+ }
68
+ },
69
+ },
70
+ ],
71
+ },
72
+ saveDraft: {
73
+ label: `保存为草稿`,
74
+ icon: "el-icon-plus",
75
+ onClick: () => {
76
+ this.$refs.draftDrawer.handleSaveDraft();
77
+ },
78
+ },
79
+ loadDraft: {
80
+ label: `加载最新草稿`,
81
+ icon: "el-icon-bottom",
82
+ children: [
83
+ {
84
+ label: "加载当前",
85
+ onClick: () => {
86
+ this.$refs.draftDrawer.handleLoadDraft();
87
+ },
88
+ },
89
+ {
90
+ label: "完整加载",
91
+ onClick: () => {
92
+ this.$refs.draftDrawer.handleLoadDraft(null, true);
93
+ },
94
+ },
95
+ ],
96
+ },
97
+ draft: {
98
+ label: `草稿箱 (${this.$refs.draftDrawer.draftNumber})`,
99
+ icon: "el-icon-notebook-2",
100
+ onClick: () => {
101
+ this.$refs.draftDrawer.handleDraft();
102
+ },
103
+ },
104
+ };
105
+ },
106
+ handleContextMenu(event) {
107
+ if (checkVisibility(this.formOptions.contextMenu) === false) return;
108
+
109
+ const isFormElement =
110
+ ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName) ||
111
+ event.target.contentEditable === "true";
112
+ // 如果是表单元素则不拦截右键菜单
113
+ if (isFormElement) return;
114
+ event.preventDefault();
115
+ // 创建右键菜单项
116
+ const menuItems = batchMerge(
117
+ "btn.form.contextMenu",
118
+ this.formOptions.contextMenu,
119
+ this.formScope,
120
+ this.contextMenuTemps()
121
+ );
122
+ // 显示右键菜单
123
+ this.$contextmenu({
124
+ items: filterButtons(
125
+ menuItems,
126
+ this.formOptions,
127
+ this.formScope,
128
+ "contextMenu"
129
+ ),
130
+ event,
131
+ customClass: "sc-form-contextmenu",
132
+ zIndex: 3000,
133
+ minWidth: 180,
134
+ });
135
+ },
136
+
137
+ // 验证粘贴的数据是否符合表单结构
138
+ validatePasteData(data) {
139
+ if (!data || typeof data !== "object") {
140
+ return false;
141
+ }
142
+ return this.trueRenderColumns.some(
143
+ (column) => data[column.prop] !== undefined
144
+ );
145
+ },
146
+ async filterDisabledData(data) {
147
+ const updates = {};
148
+ if (this.isDisabled) {
149
+ return updates;
150
+ }
151
+
152
+ const updatePromises = this.trueRenderColumns.map(async (column) => {
153
+ if (data[column.prop] === undefined) return;
154
+
155
+ // 获取字段配置
156
+ const config = await new Promise((resolve) => {
157
+ this.$emit("handleChild", "getComponentConfig", column.prop, resolve);
158
+ });
159
+
160
+ // 如果字段未禁用,则更新值
161
+ if (!config?.disabled && !column.disabled && !column.detail) {
162
+ updates[column.prop] = data[column.prop];
163
+ }
164
+ });
165
+
166
+ await Promise.all(updatePromises);
167
+ return updates;
168
+ }, // 处理粘贴数据
169
+ async handlePasteData(loadAll = false) {
170
+ const text = await navigator.clipboard.readText();
171
+ let pasteData = JSON.parse(text);
172
+
173
+ // 验证数据结构
174
+ if (!this.validatePasteData(pasteData)) {
175
+ this.$message.error("数据结构不匹配,请检查字段");
176
+ return;
177
+ }
178
+
179
+ // 更新表单数据
180
+ const newFormData = { ...this.value };
181
+ const updates = loadAll
182
+ ? pasteData
183
+ : await this.filterDisabledData(pasteData);
184
+ Object.assign(newFormData, updates);
185
+
186
+ this.$emit("input", newFormData);
187
+ this.$emit("paste", newFormData);
188
+ this.$message.success("数据导入成功");
189
+ this.clearValidate();
190
+ },
191
+ },
192
+ };
@@ -0,0 +1,391 @@
1
+ <template>
2
+ <el-drawer
3
+ title="草稿箱"
4
+ :visible.sync="draftVisible"
5
+ direction="rtl"
6
+ size="600"
7
+ :append-to-body="true"
8
+ :destroy-on-close="false"
9
+ >
10
+ <div :class="b()">
11
+ <!-- 顶部操作区 -->
12
+ <div class="draft-header">
13
+ <div class="draft-header__left">
14
+ <el-tooltip content="清空草稿箱" placement="top">
15
+ <el-button
16
+ type="danger"
17
+ size="small"
18
+ icon="el-icon-delete"
19
+ @click="handleClearDraft"
20
+ >
21
+ </el-button>
22
+ </el-tooltip>
23
+ </div>
24
+ <div class="draft-header__right">
25
+ <el-input
26
+ v-model="searchKeyword"
27
+ placeholder="搜索草稿"
28
+ prefix-icon="el-icon-search"
29
+ clearable
30
+ size="small"
31
+ />
32
+ </div>
33
+ </div>
34
+
35
+ <!-- 草稿列表 -->
36
+ <div class="draft-list">
37
+ <el-empty
38
+ v-if="!filteredDraftList.length"
39
+ description="暂无草稿"
40
+ ></el-empty>
41
+
42
+ <div
43
+ v-else
44
+ v-for="draft in filteredDraftList"
45
+ :key="draft.id"
46
+ class="draft-item"
47
+ >
48
+ <div class="draft-item__header">
49
+ <span class="draft-item__name">{{ draft.name }}</span>
50
+ <span class="draft-item__time">{{
51
+ formatTime(draft.updateTime)
52
+ }}</span>
53
+ </div>
54
+
55
+ <div class="draft-item__footer">
56
+ <el-button type="text" size="mini" @click="handleLoadDraft(draft)">
57
+ 加载当前
58
+ </el-button>
59
+ <el-button
60
+ type="text"
61
+ size="mini"
62
+ @click="handleLoadDraft(draft, true)"
63
+ >
64
+ 完整加载
65
+ </el-button>
66
+ <el-button
67
+ type="text"
68
+ size="mini"
69
+ @click="handlePreviewDraft(draft)"
70
+ >
71
+ 预览
72
+ </el-button>
73
+ <el-button
74
+ type="text"
75
+ size="mini"
76
+ @click="handleDeleteDraft(draft.id)"
77
+ >
78
+ 删除
79
+ </el-button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </el-drawer>
85
+ </template>
86
+
87
+ <script>
88
+ import cache from "utils/cache.js";
89
+ import { create } from "core";
90
+ export default create({
91
+ name: "form-draft",
92
+ inject: ["formCtx"],
93
+ props: {
94
+ // 添加尺寸属性
95
+ size: {
96
+ type: String,
97
+ default: "medium",
98
+ validator: (value) =>
99
+ ["default", "medium", "small", "mini"].includes(value),
100
+ },
101
+ },
102
+ data() {
103
+ return {
104
+ isExpanded: false,
105
+ shouldExpandHorizontal: false,
106
+ hideTimer: null,
107
+ draftList: [],
108
+ draftVisible: false,
109
+ searchKeyword: "",
110
+ };
111
+ },
112
+
113
+ created() {
114
+ this.loadDraftsFromStorage();
115
+ },
116
+
117
+ computed: {
118
+ filteredDraftList() {
119
+ if (!this.searchKeyword) {
120
+ return this.draftList;
121
+ }
122
+ const keyword = this.searchKeyword.toLowerCase();
123
+ return this.draftList.filter((draft) =>
124
+ draft.name.toLowerCase().includes(keyword)
125
+ );
126
+ },
127
+ draftNumber() {
128
+ return this.draftList.length;
129
+ },
130
+ },
131
+
132
+ methods: {
133
+ handleMouseEnter() {
134
+ if (this.hideTimer) {
135
+ clearTimeout(this.hideTimer);
136
+ }
137
+ this.isExpanded = true;
138
+ },
139
+ handleMouseLeave() {
140
+ this.hideTimer = setTimeout(() => {
141
+ this.isExpanded = false;
142
+ }, 200);
143
+ },
144
+ handleDraft() {
145
+ this.draftVisible = true;
146
+ },
147
+
148
+ handleSaveDraft() {
149
+ this.$prompt("请输入草稿名称", "保存草稿", {
150
+ confirmButtonText: "确定",
151
+ cancelButtonText: "取消",
152
+ inputPattern: /\S+/, // 不允许空白字符
153
+ inputErrorMessage: "草稿名称不能为空",
154
+ inputValue: `草稿_${new Date().toLocaleString()}`, // 默认名称
155
+ }).then(({ value: draftName }) => {
156
+ try {
157
+ // 创建新的草稿对象
158
+ const draft = {
159
+ id: `draft_${Date.now()}`, // 使用时间戳生成唯一ID
160
+ name: draftName.trim(),
161
+ formData: JSON.parse(JSON.stringify(this.formCtx.value)), // 深拷贝表单数据
162
+ createTime: new Date().toISOString(),
163
+ updateTime: new Date().toISOString(),
164
+ };
165
+
166
+ // 获取现有草稿列表
167
+ const drafts = [...this.draftList];
168
+
169
+ // 检查是否存在同名草稿
170
+ const existingIndex = drafts.findIndex(
171
+ (item) => item.name === draft.name
172
+ );
173
+
174
+ if (existingIndex !== -1) {
175
+ // 如果存在同名草稿,提示用户是否覆盖
176
+ return this.$confirm("已存在同名草稿,是否覆盖?", "提示", {
177
+ type: "warning",
178
+ confirmButtonText: "覆盖",
179
+ cancelButtonText: "取消",
180
+ })
181
+ .then(() => {
182
+ // 覆盖已有草稿
183
+ drafts[existingIndex] = draft;
184
+ this.saveDraftsToStorage(drafts);
185
+ this.$message.success("草稿已更新");
186
+ })
187
+ .catch(() => {
188
+ // 用户取消覆盖,重新调用保存方法
189
+ this.handleSaveDraft();
190
+ });
191
+ }
192
+
193
+ // 添加新草稿到列表开头
194
+ drafts.unshift(draft);
195
+
196
+ // 保存到本地存储
197
+ this.saveDraftsToStorage(drafts);
198
+
199
+ // 更新组件数据
200
+ this.draftList = drafts;
201
+
202
+ this.$message.success("保存成功");
203
+ } catch (error) {
204
+ console.error("保存草稿失败:", error);
205
+ this.$message.error("保存失败:" + error.message);
206
+ }
207
+ });
208
+ },
209
+
210
+ // 保存草稿列表到本地存储
211
+ saveDraftsToStorage(drafts) {
212
+ try {
213
+ if (!this.$route) return;
214
+ let draftsStr = cache.local.getJSON("SC_FORM_DRAFTS") || {};
215
+ draftsStr[this.$route.path] = drafts;
216
+ cache.local.setJSON("SC_FORM_DRAFTS", draftsStr);
217
+ } catch (error) {
218
+ console.error("保存到本地存储失败:", error);
219
+ throw new Error("保存到本地存储失败");
220
+ }
221
+ },
222
+
223
+ // 从本地存储加载草稿列表
224
+ loadDraftsFromStorage() {
225
+ try {
226
+ const cacheData = cache.local.getJSON("SC_FORM_DRAFTS") || {};
227
+ this.draftList = cacheData[this.$route.path] || [];
228
+ } catch (error) {
229
+ console.error("加载草稿列表失败:", error);
230
+ this.draftList = [];
231
+ }
232
+ },
233
+
234
+ async handleLoadDraft(draft, loadAll = false) {
235
+ if (!draft) {
236
+ draft = this.filteredDraftList[0];
237
+ }
238
+ if (!draft) return;
239
+ try {
240
+ // 更新表单数据
241
+ const formData = JSON.parse(JSON.stringify(draft.formData));
242
+ let newFormData;
243
+ if (loadAll) {
244
+ // 加载全部字段
245
+ newFormData = formData;
246
+ } else {
247
+ // 只更新表单中存在的字段
248
+ const currentFormData = { ...this.formCtx.value };
249
+ const updates = await this.formCtx.filterDisabledData(formData);
250
+ newFormData = { ...currentFormData, ...updates };
251
+ }
252
+
253
+ // 更新表单数据
254
+ this.formCtx.$emit("input", newFormData);
255
+
256
+ // 更新草稿的使用时间
257
+ const updatedDraft = {
258
+ ...draft,
259
+ updateTime: new Date().toISOString(),
260
+ };
261
+
262
+ // 更新草稿列表中的数据
263
+ const draftIndex = this.draftList.findIndex(
264
+ (item) => item.id === draft.id
265
+ );
266
+ if (draftIndex !== -1) {
267
+ this.draftList.splice(draftIndex, 1);
268
+ this.draftList.unshift(updatedDraft);
269
+ // 保存更新后的草稿列表
270
+ this.saveDraftsToStorage(this.draftList);
271
+ }
272
+
273
+ // 关闭草稿箱
274
+ this.draftVisible = false;
275
+
276
+ // 清除表单验证状态
277
+ this.formCtx.clearValidate();
278
+
279
+ // 提示成功
280
+ this.$message.success("加载成功");
281
+
282
+ // 触发加载草稿事件
283
+ this.formCtx.$emit("draft-loaded", draft);
284
+ } catch (error) {
285
+ console.error("加载草稿失败:", error);
286
+ this.$message.error("加载失败:" + error.message);
287
+ }
288
+ },
289
+
290
+ // 添加草稿数据验证方法
291
+ validateDraftData(draftData) {
292
+ // 检查必要的字段
293
+ if (!draftData || typeof draftData !== "object") {
294
+ return false;
295
+ }
296
+
297
+ // 检查是否至少有一个有效字段
298
+ const hasValidField = this.formCtx.trueRenderColumns.some(
299
+ (column) => draftData[column.prop] !== undefined
300
+ );
301
+
302
+ return hasValidField;
303
+ },
304
+
305
+ handleDeleteDraft(draftId) {
306
+ // 确认是否删除草稿
307
+ this.$confirm("确认删除该草稿?删除后将无法恢复", "提示", {
308
+ confirmButtonText: "确定",
309
+ cancelButtonText: "取消",
310
+ type: "warning",
311
+ })
312
+ .then(() => {
313
+ try {
314
+ // 获取要删除的草稿
315
+ const draftIndex = this.draftList.findIndex(
316
+ (item) => item.id === draftId
317
+ );
318
+ if (draftIndex === -1) return;
319
+
320
+ // 从列表中移除草稿
321
+ const deletedDraft = this.draftList[draftIndex];
322
+ this.draftList.splice(draftIndex, 1);
323
+
324
+ // 保存更新后的草稿列表到本地存储
325
+ this.saveDraftsToStorage(this.draftList);
326
+ // 触发删除事件
327
+ this.formCtx.$emit("draft-deleted", deletedDraft);
328
+
329
+ // 如果草稿列表为空,可以自动关闭抽屉
330
+ if (this.draftList.length === 0) {
331
+ this.draftVisible = false;
332
+ }
333
+ } catch (error) {
334
+ console.error("删除草稿失败:", error);
335
+ }
336
+ })
337
+ .catch(() => {
338
+ // 用户取消删除,不做处理
339
+ });
340
+ },
341
+
342
+ handleClearDraft() {
343
+ this.$confirm("确认清空草稿箱?", "提示", {
344
+ confirmButtonText: "确定",
345
+ cancelButtonText: "取消",
346
+ type: "warning",
347
+ }).then(() => {
348
+ this.draftList = [];
349
+ this.saveDraftsToStorage([]);
350
+ });
351
+ },
352
+ // 格式化时间显示
353
+ formatTime(time) {
354
+ return new Date(time).toLocaleString();
355
+ },
356
+ // 添加预览草稿方法
357
+ handlePreviewDraft(draft) {
358
+ // 创建 prop 到 label 的映射
359
+ const propToLabelMap = this.formCtx.trueRenderColumns.reduce(
360
+ (map, col) => {
361
+ map[col.prop] = col.label || col.prop;
362
+ return map;
363
+ },
364
+ {}
365
+ );
366
+
367
+ // 格式化显示数据
368
+ const formattedData = Object.entries(draft.formData)
369
+ .map(([key, value]) => {
370
+ const label = propToLabelMap[key] || key;
371
+ // 处理不同类型的值的显示
372
+ let displayValue = value;
373
+ if (Array.isArray(value)) {
374
+ displayValue = JSON.stringify(value);
375
+ } else if (typeof value === "object" && value !== null) {
376
+ displayValue = JSON.stringify(value);
377
+ } else if (value === "" || value === null || value === undefined) {
378
+ displayValue = "空";
379
+ }
380
+ return `${label}: ${displayValue}`;
381
+ })
382
+ .join("\n");
383
+ this.$alert(formattedData, "草稿预览", {
384
+ confirmButtonText: "关闭",
385
+ customClass: "sc-form-draft__preview-dialog",
386
+ callback: () => {},
387
+ });
388
+ },
389
+ },
390
+ });
391
+ </script>