From bbedcbc96b58417e44558b1ee3bb59055eb67745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E4=B8=87?= <52823142+Ten-K@users.noreply.github.com> Date: Fri, 22 Apr 2022 10:46:49 +0800 Subject: [PATCH] feat: add form design (#248) --- locales/en.yaml | 1 + locales/zh-CN.yaml | 1 + package.json | 1 + pnpm-lock.yaml | 210 +++++++++++++++++- .../ReIcon/src/iconifyIconOffline.ts | 2 + src/main.ts | 5 +- src/router/index.ts | 4 +- src/router/modules/formdesign.ts | 27 +++ src/views/form-design/index.vue | 25 +++ 9 files changed, 270 insertions(+), 6 deletions(-) create mode 100644 src/router/modules/formdesign.ts create mode 100644 src/views/form-design/index.vue diff --git a/locales/en.yaml b/locales/en.yaml index 4f26e37b3..e11ca567c 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -77,3 +77,4 @@ menus: hsList: List Page hsListCard: Card List Page hsDebounce: Debounce & Throttle + hsFormDesign: Form Design diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 496921a6f..5f6a7d473 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -77,3 +77,4 @@ menus: hsList: 列表页 hsListCard: 卡片列表页 hsDebounce: 防抖节流 + hsFormDesign: 表单设计器 diff --git a/package.json b/package.json index f6dcae6ec..f8d202b5b 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "rgb-hex": "^4.0.0", "v-contextmenu": "3.0.0", "vue": "^3.2.33", + "vue-form-create": "^1.2.7", "vue-i18n": "^9.2.0-beta.35", "vue-json-pretty": "^2.0.2", "vue-router": "^4.0.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3aff784e..5f1589aa7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -97,6 +97,7 @@ specifiers: vite-svg-loader: 2.2.0 vue: ^3.2.33 vue-eslint-parser: ^8.2.0 + vue-form-create: ^1.2.7 vue-i18n: ^9.2.0-beta.35 vue-json-pretty: ^2.0.2 vue-router: ^4.0.14 @@ -142,6 +143,7 @@ dependencies: rgb-hex: 4.0.0 v-contextmenu: 3.0.0_vue@3.2.33 vue: 3.2.33 + vue-form-create: 1.2.7 vue-i18n: 9.2.0-beta.35_vue@3.2.33 vue-json-pretty: 2.0.6_vue@3.2.33 vue-router: 4.0.14_vue@3.2.33 @@ -611,6 +613,17 @@ packages: - supports-color dev: true + /@babel/runtime-corejs3/7.17.9: + resolution: + { + integrity: sha512-WxYHHUWF2uZ7Hp1K+D1xQgbgkGUfA+5UPOegEXGt2Y5SMog/rYCVaifLZDbw8UkNXozEqqrZTy6bglL7xTaCOw== + } + engines: { node: ">=6.9.0" } + dependencies: + core-js-pure: 3.22.2 + regenerator-runtime: 0.13.9 + dev: false + /@babel/runtime/7.17.9: resolution: { @@ -870,6 +883,14 @@ packages: engines: { node: ">=10" } dev: false + /@ctrl/tinycolor/3.4.1: + resolution: + { + integrity: sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw== + } + engines: { node: ">=10" } + dev: false + /@element-plus/icons-vue/1.1.4_vue@3.2.33: resolution: { @@ -1301,6 +1322,16 @@ packages: picomatch: 2.3.1 dev: true + /@simonwep/pickr/1.8.2: + resolution: + { + integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA== + } + dependencies: + core-js: 3.22.0 + nanopop: 2.1.0 + dev: false + /@transloadit/prettier-bytes/0.0.7: resolution: { @@ -2300,6 +2331,13 @@ packages: through: 2.3.8 dev: true + /ace-builds/1.4.14: + resolution: + { + integrity: sha512-NBOQlm9+7RBqRqZwimpgquaLeTJFayqb9UEPtTkpC3TkkwDnlsT/TwsCC0svjt9kEZ6G9mH5AEOHSz6Q/HrzQQ== + } + dev: false + /acorn-jsx/5.3.2_acorn@7.4.1: resolution: { @@ -2432,6 +2470,34 @@ packages: color-convert: 2.0.1 dev: true + /ant-design-vue/3.2.0_vue@3.2.33: + resolution: + { + integrity: sha512-qY9f/kF9YqfzV/vJ9/GKj7s1wmpCuNwWVRyQ3qsG8P4Was/u5WTKG5hz9huUY/cNle2nBTDacvMBIOkfxPeUiQ== + } + peerDependencies: + vue: ">=3.2.0" + dependencies: + "@ant-design/colors": 6.0.0 + "@ant-design/icons-vue": 6.1.0_vue@3.2.33 + "@babel/runtime": 7.17.9 + "@ctrl/tinycolor": 3.4.0 + "@simonwep/pickr": 1.8.2 + array-tree-filter: 2.1.0 + async-validator: 4.0.7 + dayjs: 1.11.0 + dom-align: 1.12.2 + dom-scroll-into-view: 2.0.1 + lodash: 4.17.21 + lodash-es: 4.17.21 + resize-observer-polyfill: 1.5.1 + scroll-into-view-if-needed: 2.2.29 + shallow-equal: 1.2.1 + vue: 3.2.33 + vue-types: 3.0.2_vue@3.2.33 + warning: 4.0.3 + dev: false + /anymatch/3.1.2: resolution: { @@ -2469,6 +2535,13 @@ packages: resolution: { integrity: sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4= } dev: true + /array-tree-filter/2.1.0: + resolution: + { + integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw== + } + dev: false + /array-union/2.1.0: resolution: { @@ -3039,13 +3112,20 @@ packages: safe-buffer: 5.1.2 dev: true + /core-js-pure/3.22.2: + resolution: + { + integrity: sha512-Lb+/XT4WC4PaCWWtZpNPaXmjiNDUe5CJuUtbkMrIM1kb1T/jJoAIp+bkVP/r5lHzMr+ZAAF8XHp7+my6Ol0ysQ== + } + requiresBuild: true + dev: false + /core-js/3.22.0: resolution: { integrity: sha512-8h9jBweRjMiY+ORO7bdWSeWfHhLPO7whobj7Z2Bl0IDo00C228EdGgH7FE4jGumbEjzcFfkfW8bXgdkEDhnwHQ== } requiresBuild: true - dev: true /cosmiconfig/7.0.1: resolution: @@ -3401,6 +3481,20 @@ packages: esutils: 2.0.3 dev: true + /dom-align/1.12.2: + resolution: + { + integrity: sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg== + } + dev: false + + /dom-scroll-into-view/2.0.1: + resolution: + { + integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w== + } + dev: false + /dom-serializer/1.3.2: resolution: { @@ -3511,6 +3605,34 @@ packages: } dev: true + /element-plus/2.1.10_vue@3.2.33: + resolution: + { + integrity: sha512-sS9OMgP20dlYipmzHlEEgCJU+ID7+03YpRpoJWNQEH736C6ArmDMLnGFe8DUjPvwbUEXRA2d0Eo5d0apFgkSqg== + } + peerDependencies: + vue: ^3.2.0 + dependencies: + "@ctrl/tinycolor": 3.4.1 + "@element-plus/icons-vue": 1.1.4_vue@3.2.33 + "@floating-ui/dom": 0.4.4 + "@popperjs/core": 2.11.5 + "@types/lodash": 4.14.181 + "@types/lodash-es": 4.17.6 + "@vueuse/core": 8.2.5_vue@3.2.33 + async-validator: 4.0.7 + dayjs: 1.11.0 + escape-html: 1.0.3 + lodash: 4.17.21 + lodash-es: 4.17.21 + lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd + memoize-one: 6.0.0 + normalize-wheel-es: 1.1.2 + vue: 3.2.33 + transitivePeerDependencies: + - "@vue/composition-api" + dev: false + /element-plus/2.1.9_vue@3.2.33: resolution: { @@ -5040,6 +5162,14 @@ packages: engines: { node: ">=0.10.0" } dev: true + /is-plain-object/3.0.1: + resolution: + { + integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g== + } + engines: { node: ">=0.10.0" } + dev: false + /is-plain-object/5.0.0: resolution: { @@ -5125,7 +5255,6 @@ packages: { integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== } - dev: true /js-yaml/4.1.0: resolution: @@ -5435,6 +5564,16 @@ packages: wrap-ansi: 6.2.0 dev: true + /loose-envify/1.4.0: + resolution: + { + integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== + } + hasBin: true + dependencies: + js-tokens: 4.0.0 + dev: false + /lower-case/2.0.2: resolution: { @@ -5713,6 +5852,13 @@ packages: engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 } hasBin: true + /nanopop/2.1.0: + resolution: + { + integrity: sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw== + } + dev: false + /natural-compare/1.4.0: resolution: { integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= } dev: true @@ -7003,6 +7149,13 @@ packages: upper-case-first: 2.0.2 dev: true + /shallow-equal/1.2.1: + resolution: + { + integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA== + } + dev: false + /shebang-command/2.0.0: resolution: { @@ -7879,7 +8032,6 @@ packages: integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== } hasBin: true - dev: true /v-contextmenu/3.0.0_vue@3.2.33: resolution: @@ -8056,6 +8208,25 @@ packages: - supports-color dev: true + /vue-form-create/1.2.7: + resolution: + { + integrity: sha512-xNVzyHjNV9eWg9FKh+TONJkYmjum0YKL+x+wJVkSvATmQjEfL9pNu53h6DgPMiNazlGv2JWZmsntz1FVjXbhcQ== + } + dependencies: + ace-builds: 1.4.14 + ant-design-vue: 3.2.0_vue@3.2.33 + core-js: 3.22.0 + element-plus: 2.1.10_vue@3.2.33 + lodash: 4.17.21 + uuid: 8.3.2 + vue: 3.2.33 + vuedraggable: 4.1.0_vue@3.2.33 + wangeditor: 4.7.15 + transitivePeerDependencies: + - "@vue/composition-api" + dev: false + /vue-i18n/9.2.0-beta.35_vue@3.2.33: resolution: { @@ -8096,6 +8267,19 @@ packages: vue: 3.2.33 dev: false + /vue-types/3.0.2_vue@3.2.33: + resolution: + { + integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw== + } + engines: { node: ">=10.15.0" } + peerDependencies: + vue: ^3.0.0 + dependencies: + is-plain-object: 3.0.1 + vue: 3.2.33 + dev: false + /vue-types/4.1.1_vue@3.2.33: resolution: { @@ -8147,6 +8331,26 @@ packages: xe-utils: 3.5.4 dev: false + /wangeditor/4.7.15: + resolution: + { + integrity: sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg== + } + dependencies: + "@babel/runtime": 7.17.9 + "@babel/runtime-corejs3": 7.17.9 + tslib: 2.3.1 + dev: false + + /warning/4.0.3: + resolution: + { + integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + } + dependencies: + loose-envify: 1.4.0 + dev: false + /webpack-sources/3.2.3: resolution: { diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index 70f6af9bc..fb735a178 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -86,6 +86,7 @@ import Reset from "@iconify-icons/ri/restart-line"; import Dept from "@iconify-icons/ri/git-branch-line"; import Password from "@iconify-icons/ri/lock-password-line"; import Ppt from "@iconify-icons/ri/file-ppt-2-line"; +import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line"; addIcon("arrow-right-s-line", ArrowRightSLine); addIcon("arrow-left-s-line", ArrowLeftSLine); addIcon("logout-circle-r-line", LogoutCircleRLine); @@ -108,6 +109,7 @@ addIcon("reset", Reset); addIcon("dept", Dept); addIcon("password", Password); addIcon("ppt", Ppt); +addIcon("terminal-window-line", TerminalWindowLine); // Font Awesome 4 import FaUser from "@iconify-icons/fa/user"; diff --git a/src/main.ts b/src/main.ts index 2dea5d91c..958a7ff63 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,16 +1,17 @@ import App from "./App.vue"; import router from "./router"; import { setupStore } from "/@/store"; +import ElementPlus from "element-plus"; import { getServerConfig } from "./config"; import { createApp, Directive } from "vue"; import { useI18n } from "../src/plugins/i18n"; import { MotionPlugin } from "@vueuse/motion"; import { useTable } from "../src/plugins/vxe-table"; -import { useElementPlus } from "../src/plugins/element-plus"; import { injectResponsiveStorage } from "/@/utils/storage/responsive"; import "animate.css"; import "virtual:windi.css"; +import "element-plus/dist/index.css"; // 导入公共样式 import "./style/index.scss"; import "@pureadmin/components/dist/index.css"; @@ -43,6 +44,6 @@ getServerConfig(app).then(async config => { await router.isReady(); injectResponsiveStorage(app, config); setupStore(app); - app.use(MotionPlugin).use(useI18n).use(useElementPlus).use(useTable); + app.use(MotionPlugin).use(useI18n).use(ElementPlus).use(useTable); app.mount("#app"); }); diff --git a/src/router/index.ts b/src/router/index.ts index a7fc7987e..29ddbced8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -41,6 +41,7 @@ import nestedRouter from "./modules/nested"; import flowChartRouter from "./modules/flowchart"; import remainingRouter from "./modules/remaining"; import componentsRouter from "./modules/components"; +import formDesignRouter from "./modules/formdesign"; // 原始静态路由（未做任何处理） const routes = [ @@ -55,7 +56,8 @@ const routes = [ nestedRouter, editorRouter, flowChartRouter, - componentsRouter + componentsRouter, + formDesignRouter ]; // 导出处理后的静态路由（三级及以上的路由全部拍成二级） diff --git a/src/router/modules/formdesign.ts b/src/router/modules/formdesign.ts new file mode 100644 index 000000000..e6375c32b --- /dev/null +++ b/src/router/modules/formdesign.ts @@ -0,0 +1,27 @@ +import { $t } from "/@/plugins/i18n"; +const Layout = () => import("/@/layout/index.vue"); + +const formDesignRouter = { + path: "/formDesign", + component: Layout, + redirect: "/formDesign/index", + meta: { + icon: "terminal-window-line", + title: $t("menus.hsFormDesign"), + i18n: true, + rank: 2 + }, + children: [ + { + path: "/formDesign/index", + name: "formDesign", + component: () => import("/@/views/form-design/index.vue"), + meta: { + title: $t("menus.hsFormDesign"), + i18n: true + } + } + ] +}; + +export default formDesignRouter; diff --git a/src/views/form-design/index.vue b/src/views/form-design/index.vue new file mode 100644 index 000000000..cf42321ff --- /dev/null +++ b/src/views/form-design/index.vue @@ -0,0 +1,25 @@ + + + + +