删除一部分不用的代码、局部风机多种类新

package.json

@@ -24,7 +24,6 @@
     "@ant-design/colors": "^7.0.0",
     "@ant-design/icons-vue": "^6.1.0",
     "@iconify/iconify": "^3.1.1",
-    "@jeecg/online": "3.5.3-vite4",
     "@kjgl77/datav-vue3": "^1.4.2",
     "@liveqing/liveplayer-v3": "^3.1.9",
     "@logicflow/core": "^1.2.12",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@ant-design/colors':
     specifier: ^7.0.0
@@ -10,9 +14,6 @@ dependencies:
   '@iconify/iconify':
     specifier: ^3.1.1
     version: 3.1.1
-  '@jeecg/online':
-    specifier: 3.5.3-vite4
-    version: 3.5.3-vite4
   '@kjgl77/datav-vue3':
     specifier: ^1.4.2
     version: 1.7.1(vue@3.3.6)
@@ -27,7 +28,7 @@ dependencies:
     version: 1.2.17(ts-node@10.9.1)
   '@qiaoqiaoyun/drag-free':
     specifier: ^1.1.4
-    version: 1.1.4(typescript@4.9.5)
+    version: 1.1.4(@aesoper/normal-utils@0.1.5)(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19)(@popperjs/core@2.11.8)(gradient-parser@1.0.2)(tinycolor2@1.6.0)(typescript@4.9.5)
   '@vue/runtime-core':
     specifier: ^3.3.4
     version: 3.3.6
@@ -48,7 +49,7 @@ dependencies:
     version: 3.2.20(vue@3.3.6)
   axios:
     specifier: ^1.5.0
-    version: 1.5.1
+    version: 1.5.1(debug@4.3.4)
   china-area-data:
     specifier: ^5.0.1
     version: 5.0.1
@@ -272,7 +273,7 @@ devDependencies:
     version: 6.8.0(eslint@8.52.0)(typescript@4.9.5)
   '@vitejs/plugin-legacy':
     specifier: ^2.0.0
-    version: 2.3.1(vite@4.5.0)
+    version: 2.3.1(terser@5.22.0)(vite@4.5.0)
   '@vitejs/plugin-vue':
     specifier: ^4.3.3
     version: 4.4.0(vite@4.5.0)(vue@3.3.6)
@@ -404,7 +405,7 @@ devDependencies:
     version: 6.0.3(stylelint@15.11.0)
   ts-jest:
     specifier: ^29.1.1
-    version: 29.1.1(jest@29.7.0)(typescript@4.9.5)
+    version: 29.1.1(@babel/core@7.23.2)(jest@29.7.0)(typescript@4.9.5)
   ts-node:
     specifier: ^10.9.1
     version: 10.9.1(@types/node@20.8.7)(typescript@4.9.5)
@@ -416,7 +417,7 @@ devDependencies:
     version: 0.55.7(postcss@8.4.31)(rollup@3.29.4)(vite@4.5.0)
   vite:
     specifier: ^4.4.9
-    version: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+    version: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
   vite-plugin-compression:
     specifier: ^0.5.1
     version: 0.5.1(vite@4.5.0)
@@ -1011,7 +1012,7 @@ packages:
       '@commitlint/types': 18.0.0
       '@types/node': 18.18.6
       chalk: 4.1.2
-      cosmiconfig: 8.3.6(typescript@5.2.2)
+      cosmiconfig: 8.3.6(typescript@4.9.5)
       cosmiconfig-typescript-loader: 4.4.0(@types/node@18.18.6)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.2.2)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
@@ -1511,15 +1512,6 @@ packages:
       - supports-color
     dev: true
 
-  /@interactjs/actions@1.10.19:
-    resolution: {integrity: sha512-mZyx1MZx5/IoLj9zg/5IZ8LmO98XGUQ3IJoDfSM7sY5yTo/WgHY0v4fdLCy8ssx5X2n1VEPV889J7u8+42kavw==, tarball: http://registry.npm.taobao.org/@interactjs/actions/-/actions-1.10.19.tgz}
-    peerDependencies:
-      '@interactjs/core': 1.10.19
-      '@interactjs/utils': 1.10.19
-    optionalDependencies:
-      '@interactjs/interact': 1.10.19
-    dev: false
-
   /@interactjs/actions@1.10.19(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19):
     resolution: {integrity: sha512-mZyx1MZx5/IoLj9zg/5IZ8LmO98XGUQ3IJoDfSM7sY5yTo/WgHY0v4fdLCy8ssx5X2n1VEPV889J7u8+42kavw==, tarball: http://registry.npm.taobao.org/@interactjs/actions/-/actions-1.10.19.tgz}
     peerDependencies:
@@ -1542,15 +1534,6 @@ packages:
       '@interactjs/interact': 1.10.19
     dev: false
 
-  /@interactjs/auto-start@1.10.19:
-    resolution: {integrity: sha512-WifIomXIV9MWWHEz3zrMN6n+wl+9IshMVIUsbvx13AM4oiL4832A0JUNrCkL5m6BUTn7iw5CpIdwtnBh+OCYSQ==, tarball: http://registry.npm.taobao.org/@interactjs/auto-start/-/auto-start-1.10.19.tgz}
-    peerDependencies:
-      '@interactjs/core': 1.10.19
-      '@interactjs/utils': 1.10.19
-    optionalDependencies:
-      '@interactjs/interact': 1.10.19
-    dev: false
-
   /@interactjs/auto-start@1.10.19(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19):
     resolution: {integrity: sha512-WifIomXIV9MWWHEz3zrMN6n+wl+9IshMVIUsbvx13AM4oiL4832A0JUNrCkL5m6BUTn7iw5CpIdwtnBh+OCYSQ==, tarball: http://registry.npm.taobao.org/@interactjs/auto-start/-/auto-start-1.10.19.tgz}
     peerDependencies:
@@ -1571,17 +1554,6 @@ packages:
       '@interactjs/utils': 1.10.19
     dev: false
 
-  /@interactjs/dev-tools@1.10.19(@interactjs/modifiers@1.10.19):
-    resolution: {integrity: sha512-FfsOp8nQ/Gduhz25axLzezOnrMl1V+1gkKBCIXaEwlBzFOycJ+YOjgolajPVgC/26UjHMSKy4vIXfD6hLTJpfw==, tarball: http://registry.npm.taobao.org/@interactjs/dev-tools/-/dev-tools-1.10.19.tgz}
-    peerDependencies:
-      '@interactjs/modifiers': 1.10.19
-      '@interactjs/utils': 1.10.19
-    dependencies:
-      '@interactjs/modifiers': 1.10.19
-    optionalDependencies:
-      '@interactjs/interact': 1.10.19
-    dev: false
-
   /@interactjs/dev-tools@1.10.19(@interactjs/modifiers@1.10.19)(@interactjs/utils@1.10.19):
     resolution: {integrity: sha512-FfsOp8nQ/Gduhz25axLzezOnrMl1V+1gkKBCIXaEwlBzFOycJ+YOjgolajPVgC/26UjHMSKy4vIXfD6hLTJpfw==, tarball: http://registry.npm.taobao.org/@interactjs/dev-tools/-/dev-tools-1.10.19.tgz}
     peerDependencies:
@@ -1633,17 +1605,6 @@ packages:
       '@interactjs/utils': 1.10.19
     dev: false
 
-  /@interactjs/modifiers@1.10.19:
-    resolution: {integrity: sha512-qkUHwgTxlC4W4rLFaz64WyBOo/laVz+s0uUJsHDCzdzAz5ZGguMM6Cvnt8EJ04eZWqrZ2zGAF1dzHFe07XB6Qg==, tarball: http://registry.npm.taobao.org/@interactjs/modifiers/-/modifiers-1.10.19.tgz}
-    peerDependencies:
-      '@interactjs/core': 1.10.19
-      '@interactjs/utils': 1.10.19
-    dependencies:
-      '@interactjs/snappers': 1.10.19
-    optionalDependencies:
-      '@interactjs/interact': 1.10.19
-    dev: false
-
   /@interactjs/modifiers@1.10.19(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19):
     resolution: {integrity: sha512-qkUHwgTxlC4W4rLFaz64WyBOo/laVz+s0uUJsHDCzdzAz5ZGguMM6Cvnt8EJ04eZWqrZ2zGAF1dzHFe07XB6Qg==, tarball: http://registry.npm.taobao.org/@interactjs/modifiers/-/modifiers-1.10.19.tgz}
     peerDependencies:
@@ -1693,14 +1654,6 @@ packages:
       '@interactjs/interact': 1.10.19
     dev: false
 
-  /@interactjs/snappers@1.10.19:
-    resolution: {integrity: sha512-JZUSecoiSx96Z1x8BYg8ZPPicgFt6KKHAQ578x4oEuqMQqpHz9SbWk2PdW9b0JcrkdxPx42Ot01eTDFyGmPq3g==, tarball: http://registry.npm.taobao.org/@interactjs/snappers/-/snappers-1.10.19.tgz}
-    peerDependencies:
-      '@interactjs/utils': 1.10.19
-    optionalDependencies:
-      '@interactjs/interact': 1.10.19
-    dev: false
-
   /@interactjs/snappers@1.10.19(@interactjs/utils@1.10.19):
     resolution: {integrity: sha512-JZUSecoiSx96Z1x8BYg8ZPPicgFt6KKHAQ578x4oEuqMQqpHz9SbWk2PdW9b0JcrkdxPx42Ot01eTDFyGmPq3g==, tarball: http://registry.npm.taobao.org/@interactjs/snappers/-/snappers-1.10.19.tgz}
     peerDependencies:
@@ -1779,10 +1732,6 @@ packages:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==, tarball: http://registry.npm.taobao.org/@istanbuljs/schema/-/schema-0.1.3.tgz}
     engines: {node: '>=8'}
 
-  /@jeecg/online@3.5.3-vite4:
-    resolution: {integrity: sha512-3HhVsrkFkyoZIXW2VpVFXOCdeRJ21OcLjrBKWG9EGKmsRpAo/xCDBUPh2Qd8QcgqYcBtd/EhEjV8oWQcjuqBZQ==, tarball: http://registry.npm.taobao.org/@jeecg/online/-/online-3.5.3-vite4.tgz}
-    dev: false
-
   /@jest/console@27.5.1:
     resolution: {integrity: sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==, tarball: http://registry.npm.taobao.org/@jest/console/-/console-27.5.1.tgz}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -2500,7 +2449,7 @@ packages:
       '@iconify/iconify': 3.1.1
     dev: true
 
-  /@qiaoqiaoyun/drag-free@1.1.4(typescript@4.9.5):
+  /@qiaoqiaoyun/drag-free@1.1.4(@aesoper/normal-utils@0.1.5)(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19)(@popperjs/core@2.11.8)(gradient-parser@1.0.2)(tinycolor2@1.6.0)(typescript@4.9.5):
     resolution: {integrity: sha512-eH4fVMj4GtGN4Ix4XZirTwqRHziRFHPTZ4cVDXItRAB8jWIMy21en0magxQmy+hhJaQxjc0W9LfmQXyaM8H67g==, tarball: http://registry.npm.taobao.org/@qiaoqiaoyun/drag-free/-/drag-free-1.1.4.tgz}
     dependencies:
       '@ant-design/colors': 7.0.0
@@ -2512,7 +2461,7 @@ packages:
       '@fullcalendar/vue3': 5.10.1(vue@3.3.6)
       '@vueuse/core': 6.9.2(vue@3.3.6)
       ant-design-vue: 3.2.20(vue@3.3.6)
-      axios: 1.5.1
+      axios: 1.5.1(debug@4.3.4)
       china-area-data: 5.0.1
       codemirror: 5.65.15
       core-js: 3.33.1
@@ -2531,16 +2480,20 @@ packages:
       vue: 3.3.6(typescript@4.9.5)
       vue-clipboard3: 2.0.0
       vue-count-to2: 1.0.6(vue@3.3.6)
-      vue-grid-layout: 3.0.0-beta1
+      vue-grid-layout: 3.0.0-beta1(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19)
       vue-types: 4.2.1(vue@3.3.6)
-      vue3-colorpicker: 2.2.2(@vueuse/core@6.9.2)(lodash-es@4.17.21)(vue-types@4.2.1)(vue@3.3.6)
+      vue3-colorpicker: 2.2.2(@aesoper/normal-utils@0.1.5)(@popperjs/core@2.11.8)(@vueuse/core@6.9.2)(gradient-parser@1.0.2)(lodash-es@4.17.21)(tinycolor2@1.6.0)(vue-types@4.2.1)(vue@3.3.6)
       vuedraggable: 4.1.0(vue@3.3.6)
       xlsx: 0.17.5
     transitivePeerDependencies:
+      - '@aesoper/normal-utils'
       - '@interactjs/core'
       - '@interactjs/utils'
+      - '@popperjs/core'
       - '@vue/composition-api'
       - debug
+      - gradient-parser
+      - tinycolor2
       - typescript
     dev: false
 
@@ -2592,7 +2545,7 @@ packages:
       esbuild: 0.11.23
       esbuild-plugin-alias: 0.1.2
       tinycolor2: 1.6.0
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3233,7 +3186,7 @@ packages:
       '@unocss/core': 0.55.7
       '@unocss/reset': 0.55.7
       '@unocss/vite': 0.55.7(rollup@3.29.4)(vite@4.5.0)
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -3411,12 +3364,12 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.1
       magic-string: 0.30.5
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@vitejs/plugin-legacy@2.3.1(vite@4.5.0):
+  /@vitejs/plugin-legacy@2.3.1(terser@5.22.0)(vite@4.5.0):
     resolution: {integrity: sha512-J5KaGBlSt2tEYPVjM/C8dA6DkRzkFkbPe+Xb4IX5G+XOV5OGbVAfkMjKywdrkO3gGynO8S98i71Lmsff4cWkCQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -3428,7 +3381,8 @@ packages:
       magic-string: 0.26.7
       regenerator-runtime: 0.13.11
       systemjs: 6.14.2
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      terser: 5.22.0
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     dev: true
 
   /@vitejs/plugin-vue-jsx@3.0.2(vite@4.5.0)(vue@3.3.6):
@@ -3441,7 +3395,7 @@ packages:
       '@babel/core': 7.23.2
       '@babel/plugin-transform-typescript': 7.22.15(@babel/core@7.23.2)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.2)
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
       vue: 3.3.6(typescript@4.9.5)
     transitivePeerDependencies:
       - supports-color
@@ -3454,7 +3408,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
       vue: 3.3.6(typescript@4.9.5)
     dev: true
 
@@ -4008,16 +3962,6 @@ packages:
       - debug
     dev: true
 
-  /axios@1.5.1:
-    resolution: {integrity: sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==, tarball: http://registry.npm.taobao.org/axios/-/axios-1.5.1.tgz}
-    dependencies:
-      follow-redirects: 1.15.3
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
   /axios@1.5.1(debug@4.3.4):
     resolution: {integrity: sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==, tarball: http://registry.npm.taobao.org/axios/-/axios-1.5.1.tgz}
     dependencies:
@@ -4026,7 +3970,6 @@ packages:
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
-    dev: true
 
   /babel-jest@27.5.1(@babel/core@7.23.2):
     resolution: {integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==, tarball: http://registry.npm.taobao.org/babel-jest/-/babel-jest-27.5.1.tgz}
@@ -4983,7 +4926,7 @@ packages:
       typescript: '>=4'
     dependencies:
       '@types/node': 18.18.6
-      cosmiconfig: 8.3.6(typescript@5.2.2)
+      cosmiconfig: 8.3.6(typescript@4.9.5)
       ts-node: 10.9.1(@types/node@18.18.6)(typescript@5.2.2)
       typescript: 5.2.2
     dev: true
@@ -5020,23 +4963,6 @@ packages:
       typescript: 4.9.5
     dev: true
 
-  /cosmiconfig@8.3.6(typescript@5.2.2):
-    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==, tarball: http://registry.npm.taobao.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      typescript: 5.2.2
-    dev: true
-    optional: true
-
   /crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==, tarball: http://registry.npm.taobao.org/crc-32/-/crc-32-1.2.2.tgz}
     engines: {node: '>=0.8'}
@@ -6619,16 +6545,6 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==, tarball: http://registry.npm.taobao.org/flatted/-/flatted-3.2.9.tgz}
     dev: true
 
-  /follow-redirects@1.15.3:
-    resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==, tarball: http://registry.npm.taobao.org/follow-redirects/-/follow-redirects-1.15.3.tgz}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
   /follow-redirects@1.15.3(debug@4.3.4):
     resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==, tarball: http://registry.npm.taobao.org/follow-redirects/-/follow-redirects-1.15.3.tgz}
     engines: {node: '>=4.0'}
@@ -6639,7 +6555,6 @@ packages:
         optional: true
     dependencies:
       debug: 4.3.4
-    dev: true
 
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==, tarball: http://registry.npm.taobao.org/for-each/-/for-each-0.3.3.tgz}
@@ -11698,7 +11613,7 @@ packages:
       typescript: 4.9.5
     dev: true
 
-  /ts-jest@29.1.1(jest@29.7.0)(typescript@4.9.5):
+  /ts-jest@29.1.1(@babel/core@7.23.2)(jest@29.7.0)(typescript@4.9.5):
     resolution: {integrity: sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==, tarball: http://registry.npm.taobao.org/ts-jest/-/ts-jest-29.1.1.tgz}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -11719,6 +11634,7 @@ packages:
       esbuild:
         optional: true
     dependencies:
+      '@babel/core': 7.23.2
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
       jest: 29.7.0(@types/node@20.8.7)(ts-node@10.9.1)
@@ -12049,7 +11965,7 @@ packages:
       '@unocss/transformer-directives': 0.55.7
       '@unocss/transformer-variant-group': 0.55.7
       '@unocss/vite': 0.55.7(rollup@3.29.4)(vite@4.5.0)
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -12200,7 +12116,7 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12222,7 +12138,7 @@ packages:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     dev: true
 
   /vite-plugin-mkcert@1.16.0(vite@4.5.0):
@@ -12235,7 +12151,7 @@ packages:
       axios: 1.5.1(debug@4.3.4)
       debug: 4.3.4
       picocolors: 1.0.0
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -12257,7 +12173,7 @@ packages:
       fast-glob: 3.3.1
       mockjs: 1.1.0
       path-to-regexp: 6.2.1
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12271,7 +12187,7 @@ packages:
       '@purge-icons/core': 0.9.1
       '@purge-icons/generated': 0.9.0
       rollup-plugin-purge-icons: 0.9.1
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -12289,7 +12205,7 @@ packages:
       fs-extra: 10.1.0
       magic-string: 0.25.9
       pathe: 0.2.0
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     dev: true
 
   /vite-plugin-svg-icons@2.0.1(vite@4.5.0):
@@ -12305,7 +12221,7 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12318,7 +12234,7 @@ packages:
       '@rollup/plugin-virtual': 3.0.2(rollup@3.29.4)
       '@swc/core': 1.3.96
       uuid: 9.0.1
-      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)
+      vite: 4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0)
     transitivePeerDependencies:
       - '@swc/helpers'
       - rollup
@@ -12328,7 +12244,7 @@ packages:
     resolution: {integrity: sha512-pa27KIsHIBvBMv4xz9uB3UCfAuP2tr7PLlFhCS9vw+aXd326LEHsvhqd3hCQDOR5MjlQVyQH6vwuGr3u+KRiiw==, tarball: http://registry.npm.taobao.org/vite-plugin-vue-setup-extend-plus/-/vite-plugin-vue-setup-extend-plus-0.1.0.tgz}
     dev: true
 
-  /vite@4.5.0(@types/node@20.8.7)(less@4.2.0):
+  /vite@4.5.0(@types/node@20.8.7)(less@4.2.0)(terser@5.22.0):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==, tarball: http://registry.npm.taobao.org/vite/-/vite-4.5.0.tgz}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -12361,6 +12277,7 @@ packages:
       less: 4.2.0
       postcss: 8.4.31
       rollup: 3.29.4
+      terser: 5.22.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -12435,14 +12352,14 @@ packages:
       - supports-color
     dev: true
 
-  /vue-grid-layout@3.0.0-beta1:
+  /vue-grid-layout@3.0.0-beta1(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19):
     resolution: {integrity: sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==, tarball: http://registry.npm.taobao.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz}
     dependencies:
-      '@interactjs/actions': 1.10.19
-      '@interactjs/auto-start': 1.10.19
-      '@interactjs/dev-tools': 1.10.19(@interactjs/modifiers@1.10.19)
+      '@interactjs/actions': 1.10.19(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19)
+      '@interactjs/auto-start': 1.10.19(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19)
+      '@interactjs/dev-tools': 1.10.19(@interactjs/modifiers@1.10.19)(@interactjs/utils@1.10.19)
       '@interactjs/interactjs': 1.10.19
-      '@interactjs/modifiers': 1.10.19
+      '@interactjs/modifiers': 1.10.19(@interactjs/core@1.10.19)(@interactjs/utils@1.10.19)
       element-resize-detector: 1.2.4
       mitt: 2.1.0
     transitivePeerDependencies:
@@ -12543,11 +12460,15 @@ packages:
       vue: 3.3.6(typescript@4.9.5)
     dev: false
 
-  /vue3-colorpicker@2.2.2(@vueuse/core@6.9.2)(lodash-es@4.17.21)(vue-types@4.2.1)(vue@3.3.6):
+  /vue3-colorpicker@2.2.2(@aesoper/normal-utils@0.1.5)(@popperjs/core@2.11.8)(@vueuse/core@6.9.2)(gradient-parser@1.0.2)(lodash-es@4.17.21)(tinycolor2@1.6.0)(vue-types@4.2.1)(vue@3.3.6):
     resolution: {integrity: sha512-gHFMGsw9FkpNLFEwbxeG/yM5eLKK3AxLIjebT0bm4U3LnKpEti+UcP729nwTl+Puq2BzvoqWLaWxXpM0KVsL+A==, tarball: http://registry.npm.taobao.org/vue3-colorpicker/-/vue3-colorpicker-2.2.2.tgz}
     peerDependencies:
+      '@aesoper/normal-utils': ^0.1.5
+      '@popperjs/core': ^2.11.8
       '@vueuse/core': ^10.1.2
+      gradient-parser: ^1.0.2
       lodash-es: ^4.17.21
+      tinycolor2: ^1.4.2
       vue: ^3.2.6
       vue-types: ^4.1.0
     dependencies:
@@ -12943,7 +12864,3 @@ packages:
     dependencies:
       tslib: 2.3.0
     dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

public/js/config.js

@@ -4,12 +4,12 @@ const VUE_APP_URL = {
   webRtcUrl: '//192.168.183.216:8000' // rtsp服务器IP地址
 }
 const History_Type = {
-  type: 'remote', // remote、vent
-  // type: 'vent', // remote、vent
+  // type: 'remote', // remote、vent
+  type: 'vent', // remote、vent
   deviceType: []
 }
 
 const VENT_PARAM = {
-  // simulatedPassword: '123456'
-  simulatedPassword: ''
+  simulatedPassword: '123456'
+  // simulatedPassword: ''
 }

src/components/Form/src/BasicForm.vue

@@ -399,10 +399,18 @@
     :deep(.@{ventSpace}-select-dropdown) {
       left: 0px !important;
       top: 34px !important;
-      background: #ffffff !important;
+      // background: #ffffff !important;
       .@{ventSpace}-select-item{
         color: #000 !important;
       }
+      .@{ventSpace}-select-tree {
+        .@{ventSpace}-select-tree-treenode {
+          color: black !important;
+        }
+        .@{ventSpace}-select-tree-switcher-icon {
+          color: black !important;
+        }
+      }
     }
   }
   

src/components/Form/src/hooks/useForm.ts

@@ -8,7 +8,7 @@ import { error } from '/@/utils/log';
 import { getDynamicProps, getValueType } from '/@/utils';
 import { add } from "/@/components/Form/src/componentMap";
 //集成online专用控件
-import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from  '@jeecg/online';
+// import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from  '@jeecg/online';
 
 export declare type ValidateFields = (nameList?: NamePath[], options?: ValidateOptions) => Promise<Recordable>;
 
@@ -19,9 +19,9 @@ export function useForm(props?: Props): UseFormReturnType {
   const loadedRef = ref<Nullable<boolean>>(false);
 
   //集成online专用控件
-  add("OnlineSelectCascade", OnlineSelectCascade)
-  add("LinkTableCard", LinkTableCard)
-  add("LinkTableSelect", LinkTableSelect)
+  // add("OnlineSelectCascade", OnlineSelectCascade)
+  // add("LinkTableCard", LinkTableCard)
+  // add("LinkTableSelect", LinkTableSelect)
   
   async function getForm() {
     const form = unref(formRef);

src/enums/pageEnum.ts

@@ -5,6 +5,7 @@ export enum PageEnum {
   // 暂时修改
   // BASE_LOGIN = '/monitor/monitor-fan-main',
   // basic home path
+  //micro-vent-3dModal/modelchannel /micro-vent-3dModal/modelchannel/model3D
   BASE_HOME = '/micro-vent-3dModal/dashboard/analysis',
   // BASE_HOME = '/micro-need-air',
   // BASE_HOME = '/monitorChannel/monitor-windrect',
@@ -17,5 +18,5 @@ export enum PageEnum {
   //文件路由
   SYS_FILES_PATH = '/file/share',
   // 邮件中的跳转地址
-  TOKEN_LOGIN = '/tokenLogin'
+  TOKEN_LOGIN = '/tokenLogin',
 }

src/layouts/default/header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header v-if="!getShowFullHeader || (currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/') && !noHeadeLink.includes(currentRoute.path)  && !currentRoute.path.endsWith('home')) " 
+  <Header v-if="((!getShowFullHeader && !currentRoute.path.endsWith('home')) || (currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/'))) && !noHeadeLink.includes(currentRoute.path)" 
     :class="[...getHeaderClass, { 'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'), 'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-'), 'no-header': currentRoute.path.endsWith('home') }]">
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
@@ -38,7 +38,7 @@
       </div>
     </div>
   </Header>
-  <div v-else-if="!currentRoute.path.startsWith('/micro-need-air')" :class="`${prefixCls}-action`"  style="position: fixed; top: 30px; right: 20px; z-index: 999;">
+  <div v-else-if="currentRoute.path.endsWith('home') || currentRoute.path.startsWith('/micro')" :class="`${prefixCls}-action`"  style="position: fixed; top: 30px; right: 20px; z-index: 999;">
     <div class="right-position">
       <UserDropDown :theme="getHeaderTheme" />
     </div>

src/layouts/default/sider/bottomSideder.vue

@@ -16,7 +16,7 @@
                     </div>
                   </template>
                   <template v-else>
-                    <div class="child-menu-item-disabled" :style="{ backgroundColor: '#314671' }">
+                    <div class="child-menu-item-disabled" @click="handleMenuClick(childMenu)" :style="{ backgroundColor: '#314671' }">
                       {{ childMenu.name }}
                     </div>
                   </template>
@@ -86,16 +86,21 @@
       }
 
       function handleMenuClick(path: Menu) {
-        if(path.path.includes('sw/monitor-fanmain')) {
+        if(path.path.includes('sw/monitor-fanmain')) { // 上湾主风机
           var url = window.open('_blank') as Window; //打开一个窗口，然后用
           url.location = 'https://swkhmi.shendong.vip:9043/#SW_PW_NORTH';//使这个窗口跳转到。
           return
         }
+        if (path.path.includes('sw/forcFan')) { // 上湾压风
+          var url = window.open('_blank') as Window; //打开一个窗口，然后用
+          url.location = 'https://swkhmi.shendong.vip:9043/#SW_CA';//使这个窗口跳转到。
+          return
+        }
 
         if (route.path.startsWith('/micro-')) { 
           if (route.path.startsWith(glob.homePath || PageEnum.BASE_HOME)){
             if (!path.path.startsWith(glob.homePath || PageEnum.BASE_HOME)) {
-              router.replace(path.path)
+              go(path.path);
             } else {
               go(path.path);
             }
@@ -130,7 +135,6 @@
 
       onMounted(async () => {
         menuModules.value = await getMenus();
-        debugger
         currentParentRoute.value = menuModules.value[1];
       });
       return {

src/main.ts

@@ -17,7 +17,7 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
 import { registerThirdComp } from '/@/settings/registerThirdComp';
 import { useSso } from '/@/hooks/web/useSso';
 // 注册online模块lib
-import { registerPackages } from '/@/utils/monorepo/registerPackages';
+// import { registerPackages } from '/@/utils/monorepo/registerPackages';
 import { initModalWorker, initTHREE } from '/@/utils/threejs/main.worker';
 import GlobalConfig from './components/config/GlobalConfig.vue';
 
@@ -43,7 +43,7 @@ async function bootstrap() {
   initAppConfigStore();
 
   // 注册外部模块路由(注册online模块lib)
-  registerPackages(app);
+  // registerPackages(app);
 
   // 注册全局组件
   registerGlobComp(app);

src/router/routes/index.ts

@@ -3,21 +3,21 @@ import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
 import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE, QIANKUN_ROUTE } from '/@/router/routes/basic';
 import { LAYOUT } from '/@/router/constant';
 
-import { mainOutRoutes } from './mainOut';
+// import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
 import { useGlobSetting, getRemoteSetting } from '/@/hooks/setting';
 
-const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
+// const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 
 const routeModuleList: AppRouteModule[] = [];
 
 // 加入到路由集合中
-Object.keys(modules).forEach((key) => {
-  const mod = (modules as Recordable)[key].default || {};
-  const modList = Array.isArray(mod) ? [...mod] : [mod];
-  routeModuleList.push(...modList);
-});
+// Object.keys(modules).forEach((key) => {
+//   const mod = (modules as Recordable)[key].default || {};
+//   const modList = Array.isArray(mod) ? [...mod] : [mod];
+//   routeModuleList.push(...modList);
+// });
 
 await getRemoteSetting();
 const glob = useGlobSetting();
@@ -74,7 +74,7 @@ export const TokenLoginRoute: AppRouteRecordRaw = {
 export const basicRoutes = [
   LoginRoute,
   RootRoute,
-  ...mainOutRoutes,
+  // ...mainOutRoutes,
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
   TokenLoginRoute,

src/router/types.ts

@@ -14,7 +14,7 @@ export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
   props?: Recordable;
   fullPath?: string;
   alwaysShow?: boolean;
-  ver: string;
+  ver?: string;
 }
 
 export interface MenuTag {

src/settings/registerThirdComp.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
-import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
-import { registerJVxeCustom } from '/@/components/JVxeCustom';
+// import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
+// import { registerJVxeCustom } from '/@/components/JVxeCustom';
 
 // 注册全局聊天表情包
 import { Picker } from 'emoji-mart-vue-fast/src';
@@ -11,10 +11,10 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 export async function registerThirdComp(app: App) {
   //---------------------------------------------------------------------
-  // 注册 JVxeTable 组件
-  registerJVxeTable(app);
-  // 注册 JVxeTable 自定义组件
-  await registerJVxeCustom();
+  // // 注册 JVxeTable 组件
+  // registerJVxeTable(app);
+  // // 注册 JVxeTable 自定义组件
+  // await registerJVxeCustom();
   //---------------------------------------------------------------------
   // 注册全局聊天表情包
   app.component('Picker', Picker);

src/store/modules/permission.ts

@@ -263,6 +263,7 @@ export const usePermissionStore = defineStore({
           } catch (error) {
             console.error(error);
           }
+          debugger
           // 组件地址前加斜杠处理  author: lsq date:2021-09-08
           routeList = addSlashToRouteComponent(routeList);
           // 动态引入组件

src/utils/http/axios/index.ts

@@ -52,7 +52,7 @@ const transform: AxiosTransform = {
 
     const { code, result, message, success } = data;
     // 这里逻辑可以根据项目进行修改
-    const hasSuccess = data && Reflect.has(data, 'code') && (code === ResultEnum.SUCCESS || code === 200);
+    const hasSuccess = data && Reflect.has(data, 'code') && (code === ResultEnum.SUCCESS || code == 200);
     if (hasSuccess) {
       if (success && message && options.successMessageMode === 'success') {
         //信息成功提示

src/utils/monorepo/registerPackages.ts

@@ -2,11 +2,11 @@ import type { App } from 'vue';
 import { warn } from '/@/utils/log';
 import { registerDynamicRouter } from '/@/utils/monorepo/dynamicRouter';
 // 引入模块
-import PACKAGE_TEST_JEECG_ONLINE from '@jeecg/online';
+// import PACKAGE_TEST_JEECG_ONLINE from '@jeecg/online';
 
-export function registerPackages(app: App) {
-  use(app, PACKAGE_TEST_JEECG_ONLINE);
-}
+// export function registerPackages(app: App) {
+//   use(app, PACKAGE_TEST_JEECG_ONLINE);
+// }
 
 // noinspection JSUnusedGlobalSymbols
 const installOptions = {

src/views/demo/codemirror/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <textarea ref="textarea">
-白日依山尽，黄河入海流。
-欲穷千里目，更上一层楼。
-        </textarea
-    >
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, onMounted, ref, reactive } from 'vue';
-  // 引入全局实例
-  import _CodeMirror from 'codemirror';
-
-  // 核心样式
-  import 'codemirror/lib/codemirror.css';
-  // 引入主题后还需要在 options 中指定主题才会生效
-  import 'codemirror/theme/cobalt.css';
-
-  // 需要引入具体的语法高亮库才会有对应的语法高亮效果
-  // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
-  // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
-  import 'codemirror/mode/javascript/javascript.js';
-  import 'codemirror/mode/css/css.js';
-  import 'codemirror/mode/xml/xml.js';
-  import 'codemirror/mode/clike/clike.js';
-  import 'codemirror/mode/markdown/markdown.js';
-  import 'codemirror/mode/python/python.js';
-  import 'codemirror/mode/r/r.js';
-  import 'codemirror/mode/shell/shell.js';
-  import 'codemirror/mode/sql/sql.js';
-  import 'codemirror/mode/swift/swift.js';
-  import 'codemirror/mode/vue/vue.js';
-  // 尝试获取全局实例
-
-  export default defineComponent({
-    components: {},
-    setup() {
-      const CodeMirror = window.CodeMirror || _CodeMirror;
-
-      const textarea = ref(null);
-      const options = reactive({
-        // 缩进格式
-        tabSize: 2,
-        // 主题，对应主题库 JS 需要提前引入
-        theme: 'cobalt',
-        // 显示行号
-        lineNumbers: true,
-        line: true,
-      });
-      onMounted(() => {
-        init();
-      });
-
-      function init() {
-        CodeMirror.fromTextArea(textarea.value, options);
-      }
-
-      return {
-        textarea,
-      };
-    },
-  });
-</script>
-
-<style lang="css" scoped></style>

src/views/demo/comp/button/index.vue

@@ -1,110 +0,0 @@
-<template>
-  <PageWrapper
-    contentFullHeight
-    title="基础组件"
-    content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
-  >
-    <a-row :gutter="[20, 20]">
-      <a-col :xl="10" :lg="24">
-        <a-card title="BasicButton Color">
-          <div class="my-2">
-            <h3>success</h3>
-            <div class="py-2">
-              <a-button color="success"> 成功 </a-button>
-              <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
-              <a-button color="success" class="ml-2" loading> loading </a-button>
-              <a-button color="success" type="link" class="ml-2"> link </a-button>
-              <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
-              <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
-            </div>
-          </div>
-
-          <div class="my-2">
-            <h3>warning</h3>
-            <a-button color="warning"> 警告 </a-button>
-            <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
-            <a-button color="warning" class="ml-2" loading> loading </a-button>
-            <a-button color="warning" type="link" class="ml-2"> link </a-button>
-            <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
-            <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>error</h3>
-            <a-button color="error"> 错误 </a-button>
-            <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
-            <a-button color="error" class="ml-2" loading> loading </a-button>
-            <a-button color="error" type="link" class="ml-2"> link </a-button>
-            <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
-            <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>ghost</h3>
-            <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
-            <a-button ghost color="warning" class="ml-2"> 幽灵警告 </a-button>
-            <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
-            <a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
-            <a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xl="14" :lg="24">
-        <a-card title="BasicButton Types">
-          <div class="my-2">
-            <h3>primary</h3>
-            <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
-            <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
-            <a-button type="primary" class="ml-2" danger preIcon="mdi:page-next-outline"> 危险 </a-button>
-            <a-button type="primary" class="ml-2" loading> loading </a-button>
-            <a-button type="link" class="ml-2"> link </a-button>
-            <a-button type="link" class="ml-2" loading> loading link </a-button>
-            <a-button type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>default</h3>
-            <a-button type="default"> 默认 </a-button>
-            <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
-            <a-button type="default" class="ml-2" danger> 危险 </a-button>
-            <a-button type="default" class="ml-2" loading> loading </a-button>
-            <a-button type="link" class="ml-2"> link </a-button>
-            <a-button type="link" class="ml-2" loading> loading link </a-button>
-            <a-button type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>dashed</h3>
-            <a-button type="dashed"> dashed </a-button>
-            <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
-            <a-button type="dashed" class="ml-2" danger> 危险 </a-button>
-            <a-button type="dashed" class="ml-2" loading> loading </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
-            <div class="bg-gray-400 py-2">
-              <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
-              <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
-              <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
-              <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
-              <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
-            </div>
-            <!-- antd 按钮不能同时使用ghost和link -->
-            <!--      <a-button ghost type="link" class="ml-2"> link </a-button>-->
-            <!--      <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
-            <!--      <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { Card, Row, Col } from 'ant-design-vue';
-  export default defineComponent({
-    components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
-  });
-</script>

src/views/demo/comp/card-list/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <PageWrapper title="卡片列表示例" content="基础封装">
-    <CardList :params="params" :api="demoListApi" @getMethod="getMethod" @delete="handleDel">
-      <template #header>
-        <Button type="primary" color="error"> 按钮1 </Button>
-        <Button type="primary" color="success"> 按钮2 </Button>
-      </template>
-    </CardList>
-  </PageWrapper>
-</template>
-<script lang="ts" setup>
-  import { CardList } from '/@/components/CardList';
-  import { Button } from '/@/components/Button';
-  import { PageWrapper } from '/@/components/Page';
-  import { demoListApi } from '/@/api/demo/table';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  const { notification } = useMessage();
-  // 请求api时附带参数
-  const params = {};
-
-  let reload = () => {};
-  // 获取内部fetch方法;
-  function getMethod(m: any) {
-    reload = m;
-  }
-  //删除按钮事件
-  function handleDel(id) {
-    console.log(id);
-    notification.success({ message: `成功删除${id}` });
-    reload();
-  }
-</script>

src/views/demo/comp/count-to/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <PageWrapper title="数字动画示例">
-    <Card>
-      <CardGrid class="count-to-demo-card">
-        <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
-      </CardGrid>
-      <CardGrid class="count-to-demo-card">
-        <CountTo suffix="$" :color="'red'" :startVal="1" :endVal="300000" :decimals="2" :duration="6000" />
-      </CardGrid>
-      <CardGrid class="count-to-demo-card">
-        <CountTo suffix="$" :color="'rgb(0,238,0)'" :startVal="1" :endVal="400000" :duration="7000" />
-      </CardGrid>
-      <CardGrid class="count-to-demo-card">
-        <CountTo separator="-" :color="'rgba(138,43,226,.6)'" :startVal="10000" :endVal="500000" :duration="8000" />
-      </CardGrid>
-    </Card>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { CountTo } from '/@/components/CountTo/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: {
-      Card,
-      CardGrid: Card.Grid,
-      CountTo,
-      PageWrapper,
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .count-to-demo {
-    &-card {
-      width: 50%;
-      font-size: 30px;
-      text-align: center;
-    }
-  }
-</style>

src/views/demo/comp/cropper/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！">
-    <CollapseContainer title="头像裁剪">
-      <CropperAvatar :uploadApi="uploadApi" :value="avatar" />
-    </CollapseContainer>
-
-    <CollapseContainer title="矩形裁剪" class="my-4">
-      <div class="container p-4">
-        <div class="cropper-container mr-10">
-          <CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
-        </div>
-        <img :src="cropperImg" class="croppered" v-if="cropperImg" alt="" />
-      </div>
-      <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
-    </CollapseContainer>
-
-    <CollapseContainer title="圆形裁剪">
-      <div class="container p-4">
-        <div class="cropper-container mr-10">
-          <CropperImage ref="refCropper" :src="img" @cropend="handleCircleCropend" style="width: 40vw" circled />
-        </div>
-        <img :src="circleImg" class="croppered" v-if="circleImg" />
-      </div>
-      <p v-if="circleImg">裁剪后图片信息：{{ circleInfo }}</p>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { CollapseContainer } from '/@/components/Container';
-  import { CropperImage, CropperAvatar } from '/@/components/Cropper';
-  import { uploadApi } from '/@/api/sys/upload';
-  import img from '/@/assets/images/header.jpg';
-  import { useUserStore } from '/@/store/modules/user';
-
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      CropperImage,
-      CollapseContainer,
-      CropperAvatar,
-    },
-    setup() {
-      const info = ref('');
-      const cropperImg = ref('');
-      const circleInfo = ref('');
-      const circleImg = ref('');
-      const userStore = useUserStore();
-      const avatar = ref(userStore.getUserInfo?.avatar || '');
-      function handleCropend({ imgBase64, imgInfo }) {
-        info.value = imgInfo;
-        cropperImg.value = imgBase64;
-      }
-
-      function handleCircleCropend({ imgBase64, imgInfo }) {
-        circleInfo.value = imgInfo;
-        circleImg.value = imgBase64;
-      }
-
-      return {
-        img,
-        info,
-        circleInfo,
-        cropperImg,
-        circleImg,
-        handleCropend,
-        handleCircleCropend,
-        avatar,
-        uploadApi: uploadApi as any,
-      };
-    },
-  });
-</script>
-
-<style scoped>
-  .container {
-    display: flex;
-    width: 100vw;
-    align-items: center;
-  }
-
-  .cropper-container {
-    width: 40vw;
-  }
-
-  .croppered {
-    height: 360px;
-  }
-
-  p {
-    margin: 10px;
-  }
-</style>

src/views/demo/comp/desc/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <PageWrapper title="详情组件示例">
-    <Description title="基础示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="3" :data="mockData" :schema="schema" />
-
-    <Description
-      class="mt-4"
-      title="垂直示例"
-      layout="vertical"
-      :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
-      :column="2"
-      :data="mockData"
-      :schema="schema"
-    />
-
-    <Description @register="register" class="mt-4" />
-    <Description @register="register1" class="mt-4" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Description, DescItem, useDescription } from '/@/components/Description/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  const mockData: Recordable = {
-    username: 'test',
-    nickName: 'VB',
-    age: '123',
-    phone: '15695909xxx',
-    email: '190848757@qq.com',
-    addr: '厦门市思明区',
-    sex: '男',
-    certy: '3504256199xxxxxxxxx',
-    tag: 'orange',
-  };
-  const schema: DescItem[] = [
-    {
-      field: 'username',
-      label: '用户名',
-    },
-    {
-      field: 'nickName',
-      label: '昵称',
-      render: (curVal, data) => {
-        return `${data.username}-${curVal}`;
-      },
-    },
-    {
-      field: 'phone',
-      label: '联系电话',
-    },
-    {
-      field: 'email',
-      label: '邮箱',
-    },
-    {
-      field: 'addr',
-      label: '地址',
-    },
-  ];
-  export default defineComponent({
-    components: { Description, PageWrapper },
-    setup() {
-      const [register] = useDescription({
-        title: 'useDescription',
-        data: mockData,
-        schema: schema,
-      });
-
-      const [register1] = useDescription({
-        title: '无边框',
-        bordered: false,
-        data: mockData,
-        schema: schema,
-      });
-
-      return { mockData, schema, register, register1 };
-    },
-  });
-</script>

src/views/demo/comp/drawer/Drawer1.vue

@@ -1,13 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-    setup() {
-      return {};
-    },
-  });
-</script>

src/views/demo/comp/drawer/Drawer2.vue

@@ -1,17 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
-    Drawer Info.
-    <a-button type="primary" @click="closeDrawer"> 内部关闭drawer </a-button>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-    setup() {
-      const [register, { closeDrawer }] = useDrawerInner();
-      return { register, closeDrawer };
-    },
-  });
-</script>

src/views/demo/comp/drawer/Drawer3.vue

@@ -1,35 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" title="Modal Title" width="50%" showFooter @ok="handleOk">
-    <p class="h-20" v-for="index in 40" :key="index"> 根据屏幕高度自适应 </p>
-    <template #insertFooter>
-      <a-button> btn</a-button>
-    </template>
-    <template #centerFooter>
-      <a-button> btn2</a-button>
-    </template>
-
-    <template #appendFooter>
-      <a-button> btn3</a-button>
-    </template>
-
-    <!-- <template #footer>
-      <a-button> customerFooter</a-button>
-    </template> -->
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-    setup() {
-      return {
-        handleOk: () => {
-          console.log('=====================');
-          console.log('ok');
-          console.log('======================');
-        },
-      };
-    },
-  });
-</script>

src/views/demo/comp/drawer/Drawer4.vue

@@ -1,53 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
-    <div>
-      <BasicForm @register="registerForm" />
-    </div>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 12,
-      },
-      defaultValue: '111',
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 12,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicDrawer, BasicForm },
-    setup() {
-      const [registerForm, { setFieldsValue }] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      const [register] = useDrawerInner((data) => {
-        // 方式1
-        setFieldsValue({
-          field2: data.data,
-          field1: data.info,
-        });
-      });
-      return { register, schemas, registerForm };
-    },
-  });
-</script>

src/views/demo/comp/drawer/Drawer5.vue

@@ -1,13 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" :isDetail="true" title="Drawer Title5">
-    <p class="h-20"> Content Message </p>
-    <template #titleToolbar> toolbar </template>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-  });
-</script>

src/views/demo/comp/drawer/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <PageWrapper title="抽屉组件使用示例">
-    <Alert message="使用 useDrawer 进行抽屉操作" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
-
-    <Alert message="内外同时控制显示隐藏" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer2(true)"> 打开Drawer </a-button>
-    <Alert message="自适应高度/显示footer" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer3(true)"> 打开Drawer </a-button>
-
-    <Alert message="内外数据交互" show-icon />
-    <a-button type="primary" class="my-4" @click="send"> 打开Drawer并传递数据 </a-button>
-    <Alert message="详情页模式" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer5(true)"> 打开详情Drawer </a-button>
-    <Drawer1 @register="register1" />
-    <Drawer2 @register="register2" />
-    <Drawer3 @register="register3" />
-    <Drawer4 @register="register4" />
-    <Drawer5 @register="register5" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Alert } from 'ant-design-vue';
-  import { useDrawer } from '/@/components/Drawer';
-  import Drawer1 from './Drawer1.vue';
-  import Drawer2 from './Drawer2.vue';
-  import Drawer3 from './Drawer3.vue';
-  import Drawer4 from './Drawer4.vue';
-  import Drawer5 from './Drawer5.vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { Alert, PageWrapper, Drawer1, Drawer2, Drawer3, Drawer4, Drawer5 },
-    setup() {
-      const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
-      const [register2, { openDrawer: openDrawer2 }] = useDrawer();
-      const [register3, { openDrawer: openDrawer3 }] = useDrawer();
-      const [register4, { openDrawer: openDrawer4 }] = useDrawer();
-      const [register5, { openDrawer: openDrawer5 }] = useDrawer();
-      function send() {
-        openDrawer4(true, {
-          data: 'content',
-          info: 'Info',
-        });
-      }
-      function openDrawerLoading() {
-        openDrawer1();
-        setDrawerProps({ loading: true });
-        setTimeout(() => {
-          setDrawerProps({ loading: false });
-        }, 2000);
-      }
-      return {
-        register1,
-        openDrawer1,
-        register2,
-        openDrawer2,
-        register3,
-        openDrawer3,
-        register4,
-        register5,
-        openDrawer5,
-        send,
-        openDrawerLoading,
-      };
-    },
-  });
-</script>

src/views/demo/comp/lazy/TargetContent.vue

@@ -1,19 +0,0 @@
-<template>
-  <Card hoverable :style="{ width: '240px', background: '#fff' }">
-    <template #cover>
-      <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
-    </template>
-    <CardMeta title="懒加载组件" />
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Card } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: { CardMeta: Card.Meta, Card },
-    setup() {
-      return {};
-    },
-  });
-</script>

src/views/demo/comp/lazy/Transition.vue

@@ -1,77 +0,0 @@
-<template>
-  <PageWrapper title="懒加载自定义动画示例" content="懒加载组件显示动画">
-    <div class="lazy-base-demo-wrap">
-      <h1>向下滚动</h1>
-
-      <div class="lazy-base-demo-box">
-        <LazyContainer transitionName="custom">
-          <TargetContent />
-        </LazyContainer>
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import TargetContent from './TargetContent.vue';
-  import { LazyContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { LazyContainer, TargetContent, PageWrapper },
-  });
-</script>
-<style lang="less">
-  .lazy-base-demo {
-    &-wrap {
-      display: flex;
-      width: 50%;
-      height: 2000px;
-      margin: 20px auto;
-      text-align: center;
-      background-color: @component-background;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &-box {
-      width: 300px;
-      height: 300px;
-    }
-
-    h1 {
-      height: 1300px;
-      margin: 20px 0;
-    }
-  }
-
-  .custom-enter {
-    opacity: 0;
-    transform: scale(0.4) translate(100%);
-  }
-
-  .custom-enter-to {
-    opacity: 1;
-  }
-
-  .custom-enter-active {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    transition: all 0.5s;
-  }
-
-  .custom-leave {
-    opacity: 1;
-  }
-
-  .custom-leave-to {
-    opacity: 0;
-    transform: scale(0.4) translate(-100%);
-  }
-
-  .custom-leave-active {
-    transition: all 0.5s;
-  }
-</style>

src/views/demo/comp/lazy/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <PageWrapper title="懒加载基础示例" content="向下滚动到可见区域才会加载组件">
-    <div class="lazy-base-demo-wrap">
-      <h1>向下滚动</h1>
-
-      <div class="lazy-base-demo-box">
-        <LazyContainer>
-          <TargetContent />
-          <template #skeleton>
-            <Skeleton :rows="10" />
-          </template>
-        </LazyContainer>
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Skeleton } from 'ant-design-vue';
-  import TargetContent from './TargetContent.vue';
-  import { LazyContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { LazyContainer, PageWrapper, TargetContent, Skeleton },
-  });
-</script>
-<style lang="less">
-  .lazy-base-demo {
-    &-wrap {
-      display: flex;
-      width: 50%;
-      height: 2000px;
-      margin: 20px auto;
-      text-align: center;
-      background-color: @component-background;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &-box {
-      width: 300px;
-      height: 300px;
-    }
-
-    h1 {
-      height: 1300px;
-      margin: 20px 0;
-    }
-  }
-</style>

src/views/demo/comp/loading/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
-    <div ref="wrapEl">
-      <a-alert message="组件方式" />
-      <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading"> 全屏 Loading </a-button>
-      <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
-      <Loading :loading="loading" :absolute="absolute" :theme="theme" :background="background" :tip="tip" />
-
-      <a-alert message="函数方式" />
-
-      <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> 全屏 Loading </a-button>
-      <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
-
-      <a-alert message="指令方式" />
-      <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading"> 打开指令Loading </a-button>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref } from 'vue';
-  import { Loading, useLoading } from '/@/components/Loading';
-  import { PageWrapper } from '/@/components/Page';
-  import { Alert } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: { Loading, PageWrapper, [Alert.name]: Alert },
-    setup() {
-      const wrapEl = ref<ElRef>(null);
-
-      const loadingRef = ref(false);
-      const compState = reactive({
-        absolute: false,
-        loading: false,
-        theme: 'dark',
-        background: 'rgba(111,111,111,.7)',
-        tip: '加载中...',
-      });
-      const [openFullLoading, closeFullLoading] = useLoading({
-        tip: '加载中...',
-      });
-
-      const [openWrapLoading, closeWrapLoading] = useLoading({
-        target: wrapEl,
-        props: {
-          tip: '加载中...',
-          absolute: true,
-        },
-      });
-
-      function openLoading(absolute: boolean) {
-        compState.absolute = absolute;
-        compState.loading = true;
-        setTimeout(() => {
-          compState.loading = false;
-        }, 2000);
-      }
-
-      function openCompFullLoading() {
-        openLoading(false);
-      }
-
-      function openCompAbsolute() {
-        openLoading(true);
-      }
-
-      function openFnFullLoading() {
-        openFullLoading();
-
-        setTimeout(() => {
-          closeFullLoading();
-        }, 2000);
-      }
-
-      function openFnWrapLoading() {
-        openWrapLoading();
-
-        setTimeout(() => {
-          closeWrapLoading();
-        }, 2000);
-      }
-
-      function openDirectiveLoading() {
-        loadingRef.value = true;
-        setTimeout(() => {
-          loadingRef.value = false;
-        }, 2000);
-      }
-
-      return {
-        openCompFullLoading,
-        openFnFullLoading,
-        openFnWrapLoading,
-        openCompAbsolute,
-        wrapEl,
-        loadingRef,
-        openDirectiveLoading,
-        ...toRefs(compState),
-      };
-    },
-  });
-</script>

src/views/demo/comp/modal/Modal1.vue

@@ -1,58 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" destroyOnClose @register="register" title="Modal Title" :helpMessage="['提示1', '提示2']" @visible-change="handleShow">
-    <template #insertFooter>
-      <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
-    </template>
-    <template v-if="loading">
-      <div class="empty-tips"> 加载中，稍等3秒…… </div>
-    </template>
-    <template v-if="!loading">
-      <ul>
-        <li v-for="index in lines" :key="index">加载完成{{ index }}！</li>
-      </ul>
-    </template>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, watch } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  export default defineComponent({
-    components: { BasicModal },
-    setup() {
-      const loading = ref(true);
-      const lines = ref(10);
-      const [register, { setModalProps, redoModalHeight }] = useModalInner();
-
-      watch(
-        () => lines.value,
-        () => {
-          redoModalHeight();
-        }
-      );
-
-      function handleShow(visible: boolean) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-          setTimeout(() => {
-            lines.value = Math.round(Math.random() * 30 + 5);
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 3000);
-        }
-      }
-
-      function setLines() {
-        lines.value = Math.round(Math.random() * 20 + 10);
-      }
-      return { register, loading, handleShow, lines, setLines };
-    },
-  });
-</script>
-<style scoped>
-  .empty-tips {
-    height: 100px;
-    line-height: 100px;
-    text-align: center;
-  }
-</style>

src/views/demo/comp/modal/Modal2.vue

@@ -1,23 +0,0 @@
-<template>
-  <BasicModal @register="register"  title="Modal Title" :helpMessage="['提示1', '提示2']" :okButtonProps="{ disabled: true }">
-    <a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
-    <a-button type="primary" @click="setModalProps"> 从内部修改title </a-button>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  export default defineComponent({
-    components: { BasicModal },
-    setup() {
-      const [register, { closeModal, setModalProps }] = useModalInner();
-      return {
-        register,
-        closeModal,
-        setModalProps: () => {
-          setModalProps({ title: 'Modal New Title' });
-        },
-      };
-    },
-  });
-</script>

src/views/demo/comp/modal/Modal3.vue

@@ -1,15 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']" width="700px">
-    <p class="h-20" v-for="index in 20" :key="index"> 根据屏幕高度自适应 </p>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicModal } from '/@/components/Modal';
-  export default defineComponent({
-    components: { BasicModal },
-    setup() {
-      return {};
-    },
-  });
-</script>

src/views/demo/comp/modal/Modal4.vue

@@ -1,81 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" @register="register" title="Modal Title" @visible-change="handleVisibleChange">
-    <div class="pt-3px pr-3px">
-      <BasicForm @register="registerForm" :model="model" />
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 24,
-      },
-      defaultValue: '111',
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 24,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    props: {
-      userData: { type: Object },
-    },
-    setup(props) {
-      const modelRef = ref({});
-      const [
-        registerForm,
-        {
-          // setFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-
-      const [register] = useModalInner((data) => {
-        data && onDataReceive(data);
-      });
-
-      function onDataReceive(data) {
-        console.log('Data Received', data);
-        // 方式1;
-        // setFieldsValue({
-        //   field2: data.data,
-        //   field1: data.info,
-        // });
-
-        // // 方式2
-        modelRef.value = { field2: data.data, field1: data.info };
-
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
-      }
-
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-
-      return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
-    },
-  });
-</script>

src/views/demo/comp/modal/index.vue

@@ -1,112 +0,0 @@
-<template>
-  <PageWrapper title="modal组件使用示例">
-    <Alert
-      message="使用 useModal 进行弹窗操作，默认可以拖动，可以通过 draggable
-    参数进行控制是否可以拖动/全屏，并演示了在Modal内动态加载内容并自动调整高度"
-      show-icon
-    />
-    <a-button type="primary" class="my-4" @click="openModalLoading"> 打开弹窗,加载动态数据并自动调整高度(默认可以拖动/全屏) </a-button>
-
-    <Alert message="内外同时同时显示隐藏" show-icon />
-    <a-button type="primary" class="my-4" @click="openModal2"> 打开弹窗</a-button>
-    <Alert message="自适应高度" show-icon />
-    <a-button type="primary" class="my-4" @click="openModal3"> 打开弹窗</a-button>
-
-    <Alert message="内外数据交互" show-icon />
-    <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据</a-button>
-
-    <Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
-    <a-space>
-      <a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1</a-button>
-      <a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2</a-button>
-      <a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3</a-button>
-      <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4</a-button>
-    </a-space>
-
-    <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
-
-    <Modal1 @register="register1" :minHeight="100" />
-    <Modal2 @register="register2" />
-    <Modal3 @register="register3" />
-    <Modal4 @register="register4" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, shallowRef, ComponentOptions, ref, nextTick } from 'vue';
-  import { Alert, Space } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
-  import Modal1 from './Modal1.vue';
-  import Modal2 from './Modal2.vue';
-  import Modal3 from './Modal3.vue';
-  import Modal4 from './Modal4.vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
-    setup() {
-      const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
-      const [register1, { openModal: openModal1 }] = useModal();
-      const [register2, { openModal: openModal2 }] = useModal();
-      const [register3, { openModal: openModal3 }] = useModal();
-      const [register4, { openModal: openModal4 }] = useModal();
-      const modalVisible = ref<Boolean>(false);
-      const userData = ref<any>(null);
-
-      function send() {
-        openModal4(true, {
-          data: 'content',
-          info: 'Info',
-        });
-      }
-
-      function openModalLoading() {
-        openModal1(true);
-        // setModalProps({ loading: true });
-        // setTimeout(() => {
-        //   setModalProps({ loading: false });
-        // }, 2000);
-      }
-
-      function openTargetModal(index) {
-        switch (index) {
-          case 1:
-            currentModal.value = Modal1;
-            break;
-          case 2:
-            currentModal.value = Modal2;
-            break;
-          case 3:
-            currentModal.value = Modal3;
-            break;
-          default:
-            currentModal.value = Modal4;
-            break;
-        }
-        nextTick(() => {
-          // `useModal` not working with dynamic component
-          // passing data through `userData` prop
-          userData.value = { data: Math.random(), info: 'Info222' };
-          // open the target modal
-          modalVisible.value = true;
-        });
-      }
-
-      return {
-        register1,
-        openModal1,
-        register2,
-        openModal2,
-        register3,
-        openModal3,
-        register4,
-        openModal4,
-        modalVisible,
-        userData,
-        openTargetModal,
-        send,
-        currentModal,
-        openModalLoading,
-      };
-    },
-  });
-</script>

src/views/demo/comp/qrcode/index.vue

@@ -1,117 +0,0 @@
-<template>
-  <PageWrapper title="二维码组件使用示例">
-    <div class="flex flex-wrap">
-      <CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" />
-      </CollapseContainer>
-
-      <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" tag="img" />
-      </CollapseContainer>
-
-      <CollapseContainer title="配置样式示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode
-          :value="qrCodeUrl"
-          :options="{
-            color: { dark: '#55D187' },
-          }"
-        />
-      </CollapseContainer>
-
-      <CollapseContainer title="本地logo示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" :logo="LogoImg" />
-      </CollapseContainer>
-
-      <CollapseContainer title="在线logo示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode
-          :value="qrCodeUrl"
-          logo="http://jeecg.com/images/logo.png"
-          :options="{
-            color: { dark: '#55D187' },
-          }"
-        />
-      </CollapseContainer>
-
-      <CollapseContainer title="logo配置示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode
-          :value="qrCodeUrl"
-          :logo="{
-            src: 'http://jeecg.com/images/logo.png',
-            logoSize: 0.2,
-            borderSize: 0.05,
-            borderRadius: 50,
-            bgColor: 'blue',
-          }"
-        />
-      </CollapseContainer>
-
-      <CollapseContainer title="下载示例" class="text-center qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
-        <a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
-        <div class="msg"> (在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题) </div>
-      </CollapseContainer>
-
-      <CollapseContainer title="配置大小示例" class="text-center qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" :width="300" />
-      </CollapseContainer>
-
-      <CollapseContainer title="扩展绘制示例" class="text-center qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" :width="200" :options="{ margin: 5 }" ref="qrDiyRef" :logo="LogoImg" @done="onQrcodeDone" />
-        <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
-        <div class="msg"> 要进行扩展绘制则不能将tag设为img </div>
-      </CollapseContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
-  import LogoImg from '/@/assets/images/logo.png';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  const qrCodeUrl = 'https://www.vvbin.cn';
-  export default defineComponent({
-    components: { CollapseContainer, QrCode, PageWrapper },
-    setup() {
-      const qrRef = ref<Nullable<QrCodeActionType>>(null);
-      const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
-      function download() {
-        const qrEl = unref(qrRef);
-        if (!qrEl) return;
-        qrEl.download('文件名');
-      }
-      function downloadDiy() {
-        const qrEl = unref(qrDiyRef);
-        if (!qrEl) return;
-        qrEl.download('Qrcode');
-      }
-
-      function onQrcodeDone({ ctx }: any) {
-        if (ctx instanceof CanvasRenderingContext2D) {
-          // 额外绘制
-          ctx.fillStyle = 'black';
-          ctx.font = '16px "微软雅黑"';
-          ctx.textBaseline = 'bottom';
-          ctx.textAlign = 'center';
-          ctx.fillText('你帅你先扫', 100, 195, 200);
-        }
-      }
-      return {
-        onQrcodeDone,
-        qrCodeUrl,
-        LogoImg,
-        download,
-        downloadDiy,
-        qrRef,
-        qrDiyRef,
-      };
-    },
-  });
-</script>
-<style scoped>
-  .qrcode-demo-item {
-    width: 30%;
-    margin-right: 1%;
-  }
-</style>

src/views/demo/comp/scroll/Action.vue

@@ -1,59 +0,0 @@
-<template>
-  <PageWrapper title="滚动组件函数示例" content="基于el-scrollbar">
-    <div class="my-4">
-      <a-button @click="scrollTo(100)" class="mr-2"> 滚动到100px位置 </a-button>
-      <a-button @click="scrollTo(800)" class="mr-2"> 滚动到800px位置 </a-button>
-      <a-button @click="scrollTo(0)" class="mr-2"> 滚动到顶部 </a-button>
-      <a-button @click="scrollBottom()" class="mr-2"> 滚动到底部 </a-button>
-    </div>
-    <div class="scroll-wrap">
-      <ScrollContainer class="mt-4" ref="scrollRef">
-        <ul class="p-3">
-          <template v-for="index in 100" :key="index">
-            <li class="p-2" :style="{ border: '1px solid #eee' }">
-              {{ index }}
-            </li>
-          </template>
-        </ul>
-      </ScrollContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { ScrollContainer, PageWrapper },
-    setup() {
-      const scrollRef = ref<Nullable<ScrollActionType>>(null);
-      const getScroll = () => {
-        const scroll = unref(scrollRef);
-        if (!scroll) {
-          throw new Error('scroll is Null');
-        }
-        return scroll;
-      };
-
-      function scrollTo(top: number) {
-        getScroll().scrollTo(top);
-      }
-      function scrollBottom() {
-        getScroll().scrollBottom();
-      }
-      return {
-        scrollTo,
-        scrollRef,
-        scrollBottom,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .scroll-wrap {
-    width: 50%;
-    height: 300px;
-    background-color: @component-background;
-  }
-</style>

src/views/demo/comp/scroll/VirtualScroll.vue

@@ -1,64 +0,0 @@
-<template>
-  <PageWrapper class="virtual-scroll-demo">
-    <Divider>基础滚动示例</Divider>
-    <div class="virtual-scroll-demo-wrap">
-      <VScroll :itemHeight="41" :items="data" :height="300" :width="300">
-        <template #default="{ item }">
-          <div class="virtual-scroll-demo__item">
-            {{ item.title }}
-          </div>
-        </template>
-      </VScroll>
-    </div>
-
-    <Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
-    <div class="virtual-scroll-demo-wrap">
-      <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
-        <template #default="{ item }">
-          <div class="virtual-scroll-demo__item">
-            {{ item.title }}
-          </div>
-        </template>
-      </VScroll>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { VScroll } from '/@/components/VirtualScroll/index';
-
-  import { Divider } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  const data: Recordable[] = (() => {
-    const arr: Recordable[] = [];
-    for (let index = 1; index < 20000; index++) {
-      arr.push({
-        title: '列表项' + index,
-      });
-    }
-    return arr;
-  })();
-  export default defineComponent({
-    components: { VScroll: VScroll, Divider, PageWrapper },
-    setup() {
-      return { data: data };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .virtual-scroll-demo {
-    &-wrap {
-      display: flex;
-      margin: 0 30%;
-      background-color: @component-background;
-      justify-content: center;
-    }
-
-    &__item {
-      height: 40px;
-      padding: 0 20px;
-      line-height: 40px;
-      border-bottom: 1px solid @border-color-base;
-    }
-  }
-</style>

src/views/demo/comp/scroll/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <PageWrapper title="滚动组件示例" content="基于el-scrollbar">
-    <div class="scroll-wrap">
-      <ScrollContainer class="mt-4">
-        <ul class="p-3">
-          <template v-for="index in 100" :key="index">
-            <li class="p-2" :style="{ border: '1px solid #eee' }">
-              {{ index }}
-            </li>
-          </template>
-        </ul>
-      </ScrollContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { ScrollContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { ScrollContainer, PageWrapper },
-  });
-</script>
-<style lang="less" scoped>
-  .scroll-wrap {
-    width: 50%;
-    height: 300px;
-    background-color: @component-background;
-  }
-</style>

src/views/demo/comp/strength-meter/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <PageWrapper title="密码强度校验组件">
-    <div class="flex justify-center">
-      <div class="demo-wrap p-10">
-        <StrengthMeter placeholder="默认" />
-        <StrengthMeter placeholder="禁用" disabled />
-        <br />
-        <StrengthMeter placeholder="隐藏input" :show-input="false" value="!@#qwe12345" />
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { StrengthMeter } from '/@/components/StrengthMeter';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: {
-      StrengthMeter,
-      PageWrapper,
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .demo-wrap {
-    width: 50%;
-    background-color: @component-background;
-    border-radius: 10px;
-  }
-</style>

src/views/demo/comp/time/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <PageWrapper title="时间组件示例">
-    <CollapseContainer title="基础示例">
-      <Time :value="time1" />
-      <br />
-      <Time :value="time2" />
-    </CollapseContainer>
-
-    <CollapseContainer title="定时更新" class="my-4">
-      <Time :value="now" :step="1" />
-      <br />
-      <Time :value="now" :step="5" />
-    </CollapseContainer>
-
-    <CollapseContainer title="定时更新">
-      <Time :value="now" mode="date" />
-      <br />
-      <Time :value="now" mode="datetime" />
-      <br />
-      <Time :value="now" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { Time } from '/@/components/Time';
-  import { CollapseContainer } from '/@/components/Container/index';
-
-  export default defineComponent({
-    components: { PageWrapper, Time, CollapseContainer },
-    setup() {
-      const now = new Date().getTime();
-      const state = reactive({
-        time1: now - 60 * 3 * 1000,
-        time2: now - 86400 * 3 * 1000,
-      });
-      return {
-        ...toRefs(state),
-        now,
-      };
-    },
-  });
-</script>

src/views/demo/comp/transition/index.vue

@@ -1,91 +0,0 @@
-<template>
-  <PageWrapper title="动画组件示例">
-    <div class="flex">
-      <Select :options="options" v-model:value="value" placeholder="选择动画" :style="{ width: '150px' }" />
-      <a-button type="primary" class="ml-4" @click="start"> start </a-button>
-    </div>
-    <component :is="`${value}Transition`">
-      <div class="box" v-show="show"></div>
-    </component>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  import {
-    FadeTransition,
-    ScaleTransition,
-    SlideYTransition,
-    ScrollYTransition,
-    SlideYReverseTransition,
-    ScrollYReverseTransition,
-    SlideXTransition,
-    ScrollXTransition,
-    SlideXReverseTransition,
-    ScrollXReverseTransition,
-    ScaleRotateTransition,
-    ExpandXTransition,
-    ExpandTransition,
-  } from '/@/components/Transition';
-
-  const transitionList = [
-    'Fade',
-    'Scale',
-    'SlideY',
-    'ScrollY',
-    'SlideYReverse',
-    'ScrollYReverse',
-    'SlideX',
-    'ScrollX',
-    'SlideXReverse',
-    'ScrollXReverse',
-    'ScaleRotate',
-    'ExpandX',
-    'Expand',
-  ];
-  const options = transitionList.map((item) => ({
-    label: item,
-    value: item,
-    key: item,
-  }));
-
-  export default defineComponent({
-    components: {
-      Select,
-      PageWrapper,
-      FadeTransition,
-      ScaleTransition,
-      SlideYTransition,
-      ScrollYTransition,
-      SlideYReverseTransition,
-      ScrollYReverseTransition,
-      SlideXTransition,
-      ScrollXTransition,
-      SlideXReverseTransition,
-      ScrollXReverseTransition,
-      ScaleRotateTransition,
-      ExpandXTransition,
-      ExpandTransition,
-    },
-    setup() {
-      const value = ref('Fade');
-      const show = ref(true);
-      function start() {
-        show.value = false;
-        setTimeout(() => {
-          show.value = true;
-        }, 300);
-      }
-      return { options, value, start, show };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .box {
-    width: 150px;
-    height: 150px;
-    margin-top: 20px;
-    background-color: rgb(126, 170, 236);
-  }
-</style>

src/views/demo/comp/upload/index.vue

@@ -1,54 +0,0 @@
-<template>
-  <PageWrapper title="上传组件示例">
-    <a-alert message="基础示例" />
-    <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" class="my-5" :accept="['image/*']" />
-
-    <a-alert message="嵌入表单,加入表单校验" />
-
-    <BasicForm @register="register" class="my-5" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicUpload } from '/@/components/Upload';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { PageWrapper } from '/@/components/Page';
-  import { Alert } from 'ant-design-vue';
-  import { uploadApi } from '/@/api/sys/upload';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Upload',
-      label: '字段1',
-      colProps: {
-        span: 8,
-      },
-      rules: [{ required: true, message: '请选择上传文件' }],
-      componentProps: {
-        api: uploadApi,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert },
-    setup() {
-      const { createMessage } = useMessage();
-      const [register] = useForm({
-        labelWidth: 120,
-        schemas,
-        actionColOptions: {
-          span: 16,
-        },
-      });
-      return {
-        handleChange: (list: string[]) => {
-          createMessage.info(`已上传文件${JSON.stringify(list)}`);
-        },
-        uploadApi,
-        register,
-      };
-    },
-  });
-</script>

src/views/demo/comp/verify/Rotate.vue

@@ -1,33 +0,0 @@
-<template>
-  <PageWrapper title="旋转校验示例">
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <RotateDragVerify :src="img" ref="el" @success="handleSuccess" />
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { RotateDragVerify } from '/@/components/Verify/index';
-
-  import img from '/@/assets/images/header.jpg';
-
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { RotateDragVerify, PageWrapper },
-    setup() {
-      const handleSuccess = () => {
-        console.log('success!');
-      };
-      return {
-        handleSuccess,
-        img,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .bg-gray-700 {
-    background-color: #4a5568;
-  }
-</style>

src/views/demo/comp/verify/index.vue

@@ -1,97 +0,0 @@
-<template>
-  <PageWrapper title="拖动校验示例">
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el1" @success="handleSuccess" />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el1)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el2" @success="handleSuccess" circle />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el2)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify
-        ref="el3"
-        @success="handleSuccess"
-        text="拖动以进行校验"
-        successText="校验成功"
-        :barStyle="{
-          backgroundColor: '#018ffb',
-        }"
-      />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el4" @success="handleSuccess">
-        <template #actionIcon="isPassing">
-          <BugOutlined v-if="isPassing" />
-          <RightOutlined v-else />
-        </template>
-      </BasicDragVerify>
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el4)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el5" @success="handleSuccess">
-        <template #text="isPassing">
-          <div v-if="isPassing">
-            <BugOutlined />
-            成功
-          </div>
-          <div v-else>
-            拖动
-            <RightOutlined />
-          </div>
-        </template>
-      </BasicDragVerify>
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el5)"> 还原 </a-button>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicDragVerify, DragVerifyActionType, PassingData } from '/@/components/Verify/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { BugOutlined, RightOutlined } from '@ant-design/icons-vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { BasicDragVerify, BugOutlined, RightOutlined, PageWrapper },
-    setup() {
-      const { createMessage } = useMessage();
-      const el1 = ref<Nullable<DragVerifyActionType>>(null);
-      const el2 = ref<Nullable<DragVerifyActionType>>(null);
-      const el3 = ref<Nullable<DragVerifyActionType>>(null);
-      const el4 = ref<Nullable<DragVerifyActionType>>(null);
-      const el5 = ref<Nullable<DragVerifyActionType>>(null);
-
-      function handleSuccess(data: PassingData) {
-        const { time } = data;
-        createMessage.success(`校验成功,耗时${time}秒`);
-      }
-
-      function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
-        if (!elRef) {
-          return;
-        }
-        elRef.resume();
-      }
-      return {
-        handleSuccess,
-        el1,
-        el2,
-        el3,
-        el4,
-        el5,
-        handleBtnClick,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .bg-gray-700 {
-    background-color: #4a5568;
-  }
-</style>

src/views/demo/editor/json/index.vue

@@ -1,92 +0,0 @@
-<template>
-  <PageWrapper title="代码编辑器组件示例" contentFullHeight fixedHeight contentBackground>
-    <template #extra>
-      <a-space size="middle">
-        <a-button @click="showData" type="primary">获取数据</a-button>
-        <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
-          <RadioButton value="application/json"> json数据 </RadioButton>
-          <RadioButton value="htmlmixed"> html代码 </RadioButton>
-          <RadioButton value="javascript"> javascript代码 </RadioButton>
-        </RadioGroup>
-      </a-space>
-    </template>
-    <CodeEditor v-model:value="value" :mode="modeValue" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CodeEditor } from '/@/components/CodeEditor';
-  import { PageWrapper } from '/@/components/Page';
-  import { Radio, Space, Modal } from 'ant-design-vue';
-
-  const jsonData =
-    '{"name":"BeJson","url":"http://www.xxx.com","page":88,"isNonProfit":true,"address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},"links":[{"name":"Google","url":"http://www.xxx.com"},{"name":"Baidu","url":"http://www.xxx.com"},{"name":"SoSo","url":"http://www.xxx.com"}]}';
-
-  const jsData = `
-      (() => {
-        var htmlRoot = document.getElementById('htmlRoot');
-        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
-        if (htmlRoot && theme) {
-          htmlRoot.setAttribute('data-theme', theme);
-          theme = htmlRoot = null;
-        }
-      })();
-  `;
-
-  const htmlData = `
-     <!DOCTYPE html>
-<html lang="en" id="htmlRoot">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="renderer" content="webkit" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
-    <title><%= title %></title>
-    <link rel="icon" href="/logo.png" />
-  </head>
-  <body>
-    <div id="app">
-    </div>
-    <div id="testDom"></div>
-  </body>
-</html>
-  `;
-  export default defineComponent({
-    components: {
-      CodeEditor,
-      PageWrapper,
-      RadioButton: Radio.Button,
-      RadioGroup: Radio.Group,
-      ASpace: Space,
-    },
-    setup() {
-      const modeValue = ref('application/json');
-      const value = ref(jsonData);
-
-      function handleModeChange(e: ChangeEvent) {
-        const mode = e.target.value;
-        if (mode === 'application/json') {
-          value.value = jsonData;
-          return;
-        }
-        if (mode === 'htmlmixed') {
-          value.value = htmlData;
-          return;
-        }
-        if (mode === 'javascript') {
-          value.value = jsData;
-          return;
-        }
-      }
-
-      function showData() {
-        Modal.info({ title: '编辑器当前值', content: value.value });
-      }
-
-      return { value, modeValue, handleModeChange, showData };
-    },
-  });
-</script>

src/views/demo/editor/markdown/Editor.vue

@@ -1,53 +0,0 @@
-<template>
-  <PageWrapper title="MarkDown组件嵌入Form示例">
-    <CollapseContainer title="MarkDown表单">
-      <BasicForm :labelWidth="100" :schemas="schemas" :actionColOptions="{ span: 24 }" @submit="handleSubmit" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { MarkDown } from '/@/components/Markdown';
-  import { PageWrapper } from '/@/components/Page';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'title',
-      component: 'Input',
-      label: 'title',
-      defaultValue: '标题',
-      rules: [{ required: true }],
-    },
-    {
-      field: 'markdown',
-      component: 'Input',
-      label: 'markdown',
-      defaultValue: 'defaultValue',
-      rules: [{ required: true, trigger: 'blur' }],
-      render: ({ model, field }) => {
-        return h(MarkDown, {
-          value: model[field],
-          onChange: (value: string) => {
-            model[field] = value;
-          },
-        });
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const { createMessage } = useMessage();
-
-      return {
-        schemas,
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-      };
-    },
-  });
-</script>

src/views/demo/editor/markdown/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <PageWrapper title="MarkDown组件示例">
-    <div>
-      <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
-      <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button>
-      <MarkDown v-model:value="value" @change="handleChange" ref="markDownRef" placeholder="这是占位文本" />
-    </div>
-    <div class="mt-2">
-      <a-card title="Markdown Viewer 组件演示">
-        <MarkdownViewer :value="value" />
-      </a-card>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown';
-  import { PageWrapper } from '/@/components/Page';
-  import { Card } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card },
-    setup() {
-      const markDownRef = ref<Nullable<MarkDownActionType>>(null);
-      const valueRef = ref(`
-# title
-
-# content
-`);
-
-      function toggleTheme() {
-        const markDown = unref(markDownRef);
-        if (!markDown) return;
-        const vditor = markDown.getVditor();
-        vditor.setTheme('dark');
-      }
-
-      function handleChange(v: string) {
-        valueRef.value = v;
-      }
-
-      function clearValue() {
-        valueRef.value = '';
-      }
-
-      return {
-        value: valueRef,
-        toggleTheme,
-        markDownRef,
-        handleChange,
-        clearValue,
-      };
-    },
-  });
-</script>

src/views/demo/editor/tinymce/Editor.vue

@@ -1,53 +0,0 @@
-<template>
-  <PageWrapper title="富文本嵌入表单示例">
-    <CollapseContainer title="富文本表单">
-      <BasicForm :labelWidth="100" :schemas="schemas" :actionColOptions="{ span: 24 }" @submit="handleSubmit" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Tinymce } from '/@/components/Tinymce/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'title',
-      component: 'Input',
-      label: 'title',
-      defaultValue: 'defaultValue',
-      rules: [{ required: true }],
-    },
-    {
-      field: 'tinymce',
-      component: 'Input',
-      label: 'tinymce',
-      defaultValue: 'defaultValue',
-      rules: [{ required: true }],
-      render: ({ model, field }) => {
-        return h(Tinymce, {
-          value: model[field],
-          onChange: (value: string) => {
-            model[field] = value;
-          },
-        });
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const { createMessage } = useMessage();
-
-      return {
-        schemas,
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-      };
-    },
-  });
-</script>

src/views/demo/editor/tinymce/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <PageWrapper title="富文本组件示例">
-    <Tinymce v-model="value" @change="handleChange" width="100%" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { Tinymce } from '/@/components/Tinymce/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { Tinymce, PageWrapper },
-    setup() {
-      const value = ref('hello world!');
-      function handleChange(value: string) {
-        console.log(value);
-      }
-      return { handleChange, value };
-    },
-  });
-</script>

src/views/demo/feat/breadcrumb/ChildrenList.vue

@@ -1,13 +0,0 @@
-<template>
-  <PageWrapper title="层级面包屑示例" content="子级页面面包屑会添加到当前层级后面">
-    <router-link to="/feat/breadcrumb/children/childrenDetail"> 进入子级详情页 </router-link>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { PageWrapper },
-  });
-</script>

src/views/demo/feat/breadcrumb/ChildrenListDetail.vue

@@ -1,10 +0,0 @@
-<template>
-  <PageWrapper title="子级详情页">
-    <div> 子级详情页内容在此 </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  export default defineComponent({ components: { PageWrapper } });
-</script>

src/views/demo/feat/breadcrumb/FlatList.vue

@@ -1,13 +0,0 @@
-<template>
-  <PageWrapper title="平级面包屑示例" content="子级页面面包屑会覆盖当前层级">
-    <router-link to="/feat/breadcrumb/flatDetail"> 进入平级详情页 </router-link>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { PageWrapper },
-  });
-</script>

src/views/demo/feat/breadcrumb/FlatListDetail.vue

@@ -1,8 +0,0 @@
-<template>
-  <div> 平级详情页 </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({});
-</script>

src/views/demo/feat/click-out-side/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <PageWrapper title="点内外部触发事件">
-    <ClickOutSide @clickOutside="handleClickOutside" class="flex justify-center">
-      <div @click="innerClick" class="demo-box">
-        {{ text }}
-      </div>
-    </ClickOutSide>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { ClickOutSide } from '/@/components/ClickOutSide';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { ClickOutSide, PageWrapper },
-    setup() {
-      const text = ref('Click');
-      function handleClickOutside() {
-        text.value = 'Click Out Side';
-      }
-
-      function innerClick() {
-        text.value = 'Click Inner';
-      }
-      return { innerClick, handleClickOutside, text };
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  .demo-box {
-    display: flex;
-    width: 100%;
-    height: 300px;
-    font-size: 24px;
-    color: #fff;
-    background-color: #408ede;
-    border-radius: 10px;
-    justify-content: center;
-    align-items: center;
-  }
-</style>

src/views/demo/feat/context-menu/index.vue

@@ -1,85 +0,0 @@
-<template>
-  <PageWrapper title="右键菜单示例">
-    <CollapseContainer title="Simple">
-      <a-button type="primary" @contextmenu="handleContext"> Right Click on me </a-button>
-    </CollapseContainer>
-
-    <CollapseContainer title="Multiple" class="mt-4">
-      <a-button type="primary" @contextmenu="handleMultipleContext"> Right Click on me </a-button>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { CollapseContainer } from '/@/components/Container';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const [createContextMenu] = useContextMenu();
-      const { createMessage } = useMessage();
-      function handleContext(e: MouseEvent) {
-        createContextMenu({
-          event: e,
-          items: [
-            {
-              label: 'New',
-              icon: 'bi:plus',
-              handler: () => {
-                createMessage.success('click new');
-              },
-            },
-            {
-              label: 'Open',
-              icon: 'bx:bxs-folder-open',
-              handler: () => {
-                createMessage.success('click open');
-              },
-            },
-          ],
-        });
-      }
-
-      function handleMultipleContext(e: MouseEvent) {
-        createContextMenu({
-          event: e,
-          items: [
-            {
-              label: 'New',
-              icon: 'bi:plus',
-
-              children: [
-                {
-                  label: 'New1-1',
-                  icon: 'bi:plus',
-                  divider: true,
-                  children: [
-                    {
-                      label: 'New1-1-1',
-                      handler: () => {
-                        createMessage.success('click new');
-                      },
-                    },
-                    {
-                      label: 'New1-2-1',
-                      disabled: true,
-                    },
-                  ],
-                },
-                {
-                  label: 'New1-2',
-                  icon: 'bi:plus',
-                },
-              ],
-            },
-          ],
-        });
-      }
-
-      return { handleContext, handleMultipleContext };
-    },
-  });
-</script>

src/views/demo/feat/copy/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <PageWrapper title="文本复制示例">
-    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example">
-      <div class="flex justify-center">
-        <a-input placeholder="请输入" v-model:value="value" />
-        <a-button type="primary" @click="handleCopy"> Copy </a-button>
-      </div>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, unref, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    name: 'Copy',
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const valueRef = ref('');
-      const { createMessage } = useMessage();
-      const { clipboardRef, copiedRef } = useCopyToClipboard();
-
-      function handleCopy() {
-        const value = unref(valueRef);
-        if (!value) {
-          createMessage.warning('请输入要拷贝的内容！');
-          return;
-        }
-        clipboardRef.value = value;
-        if (unref(copiedRef)) {
-          createMessage.warning('copy success！');
-        }
-      }
-      return { handleCopy, value: valueRef };
-    },
-  });
-</script>

src/views/demo/feat/download/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <PageWrapper title="文件下载示例">
-    <a-alert message="根据后台接口文件流下载" />
-    <a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button>
-
-    <a-alert message="根据文件地址下载文件" />
-    <a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button>
-
-    <a-alert message="base64流下载" />
-    <a-button type="primary" class="my-4" @click="handleDownloadByBase64"> base64流下载 </a-button>
-
-    <a-alert message="图片Url下载,如果有跨域问题，需要处理图片跨域" />
-    <a-button type="primary" class="my-4" @click="handleDownloadByOnlineUrl"> 图片Url下载 </a-button>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { downloadByUrl, downloadByData, downloadByBase64, downloadByOnlineUrl } from '/@/utils/file/download';
-  import imgBase64 from './imgBase64';
-  import { PageWrapper } from '/@/components/Page';
-  import { Alert } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: { PageWrapper, [Alert.name]: Alert },
-    setup() {
-      function handleDownByData() {
-        downloadByData('text content', 'testName.txt');
-      }
-      function handleDownloadByUrl() {
-        downloadByUrl({
-          url: 'https://codeload.github.com/anncwb/vue-Jeecg-admin-doc/zip/master',
-          target: '_self',
-        });
-
-        downloadByUrl({
-          url: 'https://vebn.oss-cn-beijing.aliyuncs.com/Jeecg/logo.png',
-          target: '_self',
-        });
-      }
-
-      function handleDownloadByBase64() {
-        downloadByBase64(imgBase64, 'logo.png');
-      }
-
-      function handleDownloadByOnlineUrl() {
-        downloadByOnlineUrl(
-          'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image',
-          'logo.png'
-        );
-      }
-      return {
-        handleDownloadByUrl,
-        handleDownByData,
-        handleDownloadByBase64,
-        handleDownloadByOnlineUrl,
-      };
-    },
-  });
-</script>

src/views/demo/feat/full-screen/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <PageWrapper title="全屏示例">
-    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Window Full Screen">
-      <a-button type="primary" @click="enter" class="mr-2"> Enter Window Full Screen </a-button>
-      <a-button color="success" @click="toggle" class="mr-2"> Toggle Window Full Screen </a-button>
-
-      <a-button color="error" @click="exit" class="mr-2"> Exit Window Full Screen </a-button>
-
-      Current State: {{ isFullscreen }}
-    </CollapseContainer>
-
-    <CollapseContainer class="w-full mt-5 bg-white rounded-md" title="Dom Full Screen">
-      <a-button type="primary" @click="toggleDom" class="mr-2"> Enter Dom Full Screen </a-button>
-    </CollapseContainer>
-
-    <div ref="domRef" class="flex items-center justify-center w-1/2 h-64 mx-auto mt-10 bg-white rounded-md">
-      <a-button type="primary" @click="toggleDom" class="mr-2"> Exit Dom Full Screen </a-button>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useFullscreen } from '@vueuse/core';
-
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const domRef = ref<Nullable<HTMLElement>>(null);
-      const { enter, toggle, exit, isFullscreen } = useFullscreen();
-
-      const { toggle: toggleDom } = useFullscreen(domRef);
-      return {
-        enter,
-        toggleDom,
-        toggle,
-        isFullscreen,
-        exit,
-        domRef,
-      };
-    },
-  });
-</script>

src/views/demo/feat/icon/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <PageWrapper title="Icon组件示例">
-    <CollapseContainer title="Antv Icon使用 (直接按需引入相应组件即可)">
-      <div class="flex justify-around">
-        <GithubFilled :style="{ fontSize: '30px' }" />
-        <QqCircleFilled :style="{ fontSize: '30px' }" />
-        <WechatFilled :style="{ fontSize: '30px' }" />
-        <AlipayCircleFilled :style="{ fontSize: '30px' }" />
-        <IeCircleFilled :style="{ fontSize: '30px' }" />
-        <TaobaoCircleFilled :style="{ fontSize: '30px' }" />
-        <CodepenCircleFilled :style="{ fontSize: '30px' }" />
-      </div>
-    </CollapseContainer>
-
-    <CollapseContainer title="IconIfy 组件使用" class="my-5">
-      <div class="flex justify-around flex-wrap">
-        <Icon icon="ion:layers-outline" :size="30" />
-        <Icon icon="ion:bar-chart-outline" :size="30" />
-        <Icon icon="ion:tv-outline" :size="30" />
-        <Icon icon="ion:settings-outline" :size="30" />
-      </div>
-    </CollapseContainer>
-
-    <CollapseContainer title="svg 雪碧图" class="my-5">
-      <div class="flex justify-around flex-wrap">
-        <SvgIcon name="test" size="32" />
-        <template v-for="item in 6" :key="item">
-          <SvgIcon :name="`dynamic-avatar-${item}`" size="32" />
-        </template>
-      </div>
-    </CollapseContainer>
-
-    <CollapseContainer title="图标选择器(Iconify)" class="my-5">
-      <div class="flex justify-around flex-wrap">
-        <IconPicker />
-      </div>
-    </CollapseContainer>
-
-    <CollapseContainer title="图标选择器(Svg)" class="my-5">
-      <div class="flex justify-around flex-wrap">
-        <IconPicker mode="svg" />
-      </div>
-    </CollapseContainer>
-
-    <Alert
-      show-icon
-      message="推荐使用Iconify组件"
-      description="Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。"
-    />
-    <a-button type="link" @click="toIconify"> Iconify 图标大全 </a-button>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { Alert } from 'ant-design-vue';
-  import {
-    QqCircleFilled,
-    GithubFilled,
-    WechatFilled,
-    AlipayCircleFilled,
-    IeCircleFilled,
-    TaobaoCircleFilled,
-    CodepenCircleFilled,
-  } from '@ant-design/icons-vue';
-
-  import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index';
-
-  import { openWindow } from '/@/utils';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      CollapseContainer,
-      GithubFilled,
-      QqCircleFilled,
-      WechatFilled,
-      AlipayCircleFilled,
-      IeCircleFilled,
-      TaobaoCircleFilled,
-      CodepenCircleFilled,
-      Icon,
-      Alert,
-      IconPicker,
-      SvgIcon,
-    },
-    setup() {
-      return {
-        toIconify: () => {
-          openWindow('https://iconify.design/');
-        },
-      };
-    },
-  });
-</script>

src/views/demo/feat/img-preview/index.vue

@@ -1,38 +0,0 @@
-<template>
-  <PageWrapper title="图片预览示例">
-    <h1>有预览图</h1>
-    <ImagePreview :imageList="imgList" />
-    <a-divider />
-    <h1>无预览图</h1>
-    <a-button @click="openImg" type="primary">点击预览</a-button>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
-  import { PageWrapper } from '/@/components/Page';
-  import { ImageProps } from '/@/components/Preview/src/typing';
-
-  const imgList: ImageProps[] = [
-    { src: 'https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/login_1658829954004.png', width: 300 },
-    { src: 'https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/home_index_1658830084684.png', width: 300 },
-    { src: 'https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/design_1658830200539.png', width: 300 },
-    { src: 'https://static.jeecg.com/upload/test/13_1592320121058.png', width: 300 },
-    { src: 'https://static.jeecg.com/upload/test/16_1592320251436.png', width: 300 },
-  ];
-  export default defineComponent({
-    components: { PageWrapper, ImagePreview },
-    setup() {
-      function openImg() {
-        const onImgLoad = ({ index, url, dom }) => {
-          console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
-        };
-        // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
-        let imageList = imgList.map<string>((i) => i.src);
-        createImgPreview({ imageList: imageList, defaultWidth: 700, rememberState: true, onImgLoad });
-      }
-
-      return { imgList, openImg };
-    },
-  });
-</script>

src/views/demo/feat/menu-params/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <PageWrapper title="带参数菜单（路由）" content="支持多级参数">
-    当前参数：{{ params }}
-    <br />
-    输入参数切换路由：
-    <Input v-model:value="value" placeholder="建议为url标准字符，输入后点击切换" />
-    <a-button type="primary" @click="handleClickGo">切换路由</a-button>
-    <br />
-    切换路由后
-    <ul>
-      <li>可刷新页面测试路由参数情况是否正常。</li>
-      <li>可于左侧菜单中展开子菜单，点击测试参数是否携带正常。</li>
-    </ul>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { Input } from 'ant-design-vue';
-  import { computed, defineComponent, ref, unref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    name: 'TestMenu',
-    components: { PageWrapper, Input },
-    setup() {
-      const { currentRoute, replace } = useRouter();
-      const value = ref<string>('');
-
-      const handleClickGo = () => {
-        const { name } = unref(currentRoute);
-        replace({ name: name!, params: { id: unref(value) } });
-      };
-      return {
-        value,
-        handleClickGo,
-        params: computed(() => {
-          return unref(currentRoute).params;
-        }),
-      };
-    },
-  });
-</script>

src/views/demo/feat/msg/index.vue

@@ -1,85 +0,0 @@
-<template>
-  <PageWrapper title="消息示例">
-    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Message">
-      <a-button @click="infoMsg('Info message')" class="mr-2"> Info </a-button>
-      <a-button @click="successMsg('Success message')" class="mr-2" color="success"> Success </a-button>
-      <a-button @click="warningMsg('Warning message')" class="mr-2" color="warning"> Warning </a-button>
-      <a-button @click="errorMsg('Error message')" class="mr-2" color="error"> Error </a-button>
-      <a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button>
-    </CollapseContainer>
-
-    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Comfirm">
-      <a-button @click="handleConfirm('info')" class="mr-2"> Info </a-button>
-      <a-button @click="handleConfirm('warning')" color="warning" class="mr-2"> Warning </a-button>
-      <a-button @click="handleConfirm('success')" color="success" class="mr-2"> Success </a-button>
-      <a-button @click="handleConfirm('error')" color="error" class="mr-2"> Error </a-button>
-    </CollapseContainer>
-
-    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Modal">
-      <a-button @click="handleInfoModal" class="mr-2"> Info </a-button>
-      <a-button @click="handleSuccessModal" color="success" class="mr-2"> Success </a-button>
-      <a-button @click="handleErrorModal" color="error" class="mr-2"> Error </a-button>
-      <a-button @click="handleWarningModal" color="warning" class="mr-2"> Warning </a-button>
-    </CollapseContainer>
-
-    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Notification 用法与上面一致">
-      <a-button @click="handleNotify" color="success" class="mr-2"> Success </a-button>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const { createMessage, createConfirm, createSuccessModal, createInfoModal, createErrorModal, createWarningModal, notification } = useMessage();
-      const { info, success, warning, error } = createMessage;
-
-      function handleLoading() {
-        createMessage.loading('Loading...');
-      }
-      function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') {
-        createConfirm({
-          iconType: type,
-          title: 'Tip',
-          content: 'content message...',
-        });
-      }
-      function handleSuccessModal() {
-        createSuccessModal({ title: 'Tip', content: 'content message...' });
-      }
-      function handleErrorModal() {
-        createErrorModal({ title: 'Tip', content: 'content message...' });
-      }
-      function handleWarningModal() {
-        createWarningModal({ title: 'Tip', content: 'content message...' });
-      }
-      function handleInfoModal() {
-        createInfoModal({ title: 'Tip', content: 'content message...' });
-      }
-      function handleNotify() {
-        notification.success({
-          message: 'Tip',
-          description: 'content message...',
-        });
-      }
-      return {
-        infoMsg: info,
-        successMsg: success,
-        warningMsg: warning,
-        errorMsg: error,
-        handleLoading,
-        handleConfirm,
-        handleSuccessModal,
-        handleErrorModal,
-        handleWarningModal,
-        handleInfoModal,
-        handleNotify,
-      };
-    },
-  });
-</script>

src/views/demo/feat/print/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <PageWrapper title="打印示例">
-    <CollapseContainer title="json打印表格">
-      <a-button type="primary" @click="jsonPrint">打印</a-button>
-    </CollapseContainer>
-
-    <a-button type="primary" class="mt-5" @click="imagePrint">Image Print</a-button>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { CollapseContainer } from '/@/components/Container/index';
-
-  import printJS from 'print-js';
-
-  export default defineComponent({
-    name: 'AppLogo',
-    components: { PageWrapper, CollapseContainer },
-    setup() {
-      function jsonPrint() {
-        printJS({
-          printable: [
-            { name: 'll', email: '123@gmail.com', phone: '123' },
-            { name: 'qq', email: '456@gmail.com', phone: '456' },
-          ],
-          properties: ['name', 'email', 'phone'],
-          type: 'json',
-        });
-      }
-
-      function imagePrint() {
-        printJS({
-          printable: ['https://anncwb.github.io/anncwb/images/preview1.png', 'https://anncwb.github.io/anncwb/images/preview2.png'],
-          type: 'image',
-          header: 'Multiple Images',
-          imageStyle: 'width:100%;',
-        });
-      }
-      return {
-        jsonPrint,
-        imagePrint,
-      };
-    },
-  });
-</script>

src/views/demo/feat/ripple/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <PageWrapper title="Ripple示例">
-    <div class="demo-box" v-ripple> content </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import RippleDirective from '/@/directives/ripple';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { PageWrapper },
-    directives: {
-      Ripple: RippleDirective,
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  .demo-box {
-    display: flex;
-    width: 300px;
-    height: 300px;
-    font-size: 24px;
-    color: #fff;
-    background-color: #408ede;
-    border-radius: 10px;
-    justify-content: center;
-    align-items: center;
-  }
-</style>

src/views/demo/feat/session-timeout/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <PageWrapper title="登录过期示例" content="用户登录过期示例，不再跳转登录页，直接生成页面覆盖当前页面，方便保持过期前的用户状态！">
-    <a-card title="请点击下面的按钮访问测试接口" extra="所访问的接口会返回Token过期响应">
-      <a-card-grid style="width: 50%; text-align: center">
-        <a-button type="primary" @click="test1">HttpStatus == 401</a-button>
-      </a-card-grid>
-      <a-card-grid style="width: 50%; text-align: center">
-        <span></span>
-        <a-button class="ml-4" type="primary" @click="test2">Response.code == 401</a-button>
-      </a-card-grid>
-    </a-card>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { useUserStore } from '/@/store/modules/user';
-
-  import { sessionTimeoutApi, tokenExpiredApi } from '/@/api/demo/account';
-  import { Card } from 'ant-design-vue';
-
-  export default defineComponent({
-    name: 'TestSessionTimeout',
-    components: { ACardGrid: Card.Grid, ACard: Card, PageWrapper },
-    setup() {
-      const userStore = useUserStore();
-      async function test1() {
-        // 示例网站生产环境用的是mock数据，不能返回Http状态码，
-        // 所以在生产环境直接改变状态来达到测试效果
-        if (import.meta.env.PROD) {
-          userStore.setToken(undefined);
-          userStore.setSessionTimeout(true);
-        } else {
-          // 这个api会返回状态码为401的响应
-          await sessionTimeoutApi();
-        }
-      }
-
-      async function test2() {
-        // 这个api会返回code为401的json数据，Http状态码为200
-        try {
-          await tokenExpiredApi();
-        } catch (err) {
-          console.log('接口访问错误：', (err as Error).message || '错误');
-        }
-      }
-
-      return { test1, test2 };
-    },
-  });
-</script>

src/views/demo/feat/tab-params/index.vue

@@ -1,27 +0,0 @@
-<template>
-  <PageWrapper title="带参数标签页" content="支持带参数多tab缓存">
-    Current Param : {{ params }}
-    <br />
-    Keep Alive
-    <Input />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { PageWrapper } from '/@/components/Page';
-  import { Input } from 'ant-design-vue';
-
-  export default defineComponent({
-    name: 'TestTab',
-    components: { PageWrapper, Input },
-    setup() {
-      const { currentRoute } = useRouter();
-      return {
-        params: computed(() => {
-          return unref(currentRoute).params;
-        }),
-      };
-    },
-  });
-</script>

src/views/demo/feat/tabs/TabDetail.vue

@@ -1,28 +0,0 @@
-<template>
-  <PageWrapper title="Tab详情页面">
-    <div>{{ index }} - 详情页内容在此</div>
-  </PageWrapper>
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { useTabs } from '/@/hooks/web/useTabs';
-  import { useRoute } from 'vue-router';
-
-  export default defineComponent({
-    name: 'TabDetail',
-    components: { PageWrapper },
-    setup() {
-      const route = useRoute();
-      const index = route.params?.id ?? -1;
-      const { setTitle } = useTabs();
-
-      // 设置标识
-      setTitle(`No.${index} - 详情信息`);
-      return {
-        index,
-      };
-    },
-  });
-</script>

src/views/demo/feat/tabs/index.vue

@@ -1,66 +0,0 @@
-<template>
-  <PageWrapper title="标签页操作示例">
-    <CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存">
-      <a-alert banner message="该操作不会影响页面标题，仅修改Tab标题" />
-      <div class="mt-2 flex flex-grow-0">
-        <a-button class="mr-2" @click="setTabTitle" type="primary"> 设置Tab标题 </a-button>
-        <a-input placeholder="请输入" v-model:value="title" class="mr-4 w-12" />
-      </div>
-    </CollapseContainer>
-
-    <CollapseContainer class="mt-4" title="标签页操作">
-      <a-button class="mr-2" @click="closeAll"> 关闭所有 </a-button>
-      <a-button class="mr-2" @click="closeLeft"> 关闭左侧 </a-button>
-      <a-button class="mr-2" @click="closeRight"> 关闭右侧 </a-button>
-      <a-button class="mr-2" @click="closeOther"> 关闭其他 </a-button>
-      <a-button class="mr-2" @click="closeCurrent"> 关闭当前 </a-button>
-      <a-button class="mr-2" @click="refreshPage"> 刷新当前 </a-button>
-    </CollapseContainer>
-
-    <CollapseContainer class="mt-4" title="标签页复用超出限制自动关闭(使用场景: 动态路由)">
-      <a-button v-for="index in 6" :key="index" class="mr-2" @click="toDetail(index)"> 打开{{ index }}详情页 </a-button>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container';
-  import { useTabs } from '/@/hooks/web/useTabs';
-  import { PageWrapper } from '/@/components/Page';
-  import { Input, Alert } from 'ant-design-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useGo } from '/@/hooks/web/usePage';
-
-  export default defineComponent({
-    name: 'TabsDemo',
-    components: { CollapseContainer, PageWrapper, [Input.name]: Input, [Alert.name]: Alert },
-    setup() {
-      const go = useGo();
-      const title = ref<string>('');
-      const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } = useTabs();
-      const { createMessage } = useMessage();
-      function setTabTitle() {
-        if (title.value) {
-          setTitle(title.value);
-        } else {
-          createMessage.error('请输入要设置的Tab标题！');
-        }
-      }
-
-      function toDetail(index: number) {
-        go(`/comp/basic/tabs/detail/${index}`);
-      }
-      return {
-        closeAll,
-        closeLeft,
-        closeRight,
-        closeOther,
-        closeCurrent,
-        toDetail,
-        refreshPage,
-        setTabTitle,
-        title,
-      };
-    },
-  });
-</script>

src/views/demo/feat/watermark/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <PageWrapper title="水印示例">
-    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Global WaterMark">
-      <a-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info')"> Create </a-button>
-      <a-button color="error" class="mr-2" @click="clear"> Clear </a-button>
-      <a-button color="warning" class="mr-2" @click="setWatermark('WaterMark Info New')"> Reset </a-button>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useWatermark } from '/@/hooks/web/useWatermark';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const areaRef = ref<Nullable<HTMLElement>>(null);
-      const { setWatermark, clear } = useWatermark();
-      return {
-        setWatermark,
-        clear,
-        areaRef,
-      };
-    },
-  });
-</script>

src/views/demo/feat/ws/index.vue

@@ -1,120 +0,0 @@
-<template>
-  <PageWrapper title="WebSocket 示例">
-    <div class="flex">
-      <div class="w-1/3 bg-white p-4">
-        <div class="flex items-center">
-          <span class="text-lg font-medium mr-4"> 连接状态: </span>
-          <Tag :color="getTagColor">{{ status }}</Tag>
-        </div>
-        <hr class="my-4" />
-
-        <div class="flex">
-          <a-input v-model:value="server" disabled>
-            <template #addonBefore> 服务地址 </template>
-          </a-input>
-          <a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
-            {{ getIsOpen ? '关闭连接' : '开启连接' }}
-          </a-button>
-        </div>
-        <p class="text-lg font-medium mt-4">设置</p>
-        <hr class="my-4" />
-
-        <InputTextArea placeholder="需要发送到服务器的内容" :disabled="!getIsOpen" v-model:value="sendValue" allowClear />
-
-        <a-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handlerSend"> 发送 </a-button>
-      </div>
-
-      <div class="w-2/3 bg-white ml-4 p-4">
-        <span class="text-lg font-medium mr-4"> 消息记录: </span>
-        <hr class="my-4" />
-
-        <div class="max-h-80 overflow-auto">
-          <ul>
-            <li v-for="item in getList" class="mt-2" :key="item.time">
-              <div class="flex items-center">
-                <span class="mr-2 text-primary font-medium">收到消息:</span>
-                <span>{{ formatToDateTime(item.time) }}</span>
-              </div>
-              <div>
-                {{ item.res }}
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, watchEffect, computed, toRefs } from 'vue';
-  import { Tag, Input } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { useWebSocket } from '@vueuse/core';
-  import { formatToDateTime } from '/@/utils/dateUtil';
-
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      [Input.name]: Input,
-      InputTextArea: Input.TextArea,
-      Tag,
-    },
-    setup() {
-      const state = reactive({
-        server: 'ws://localhost:3300/test',
-        sendValue: '',
-        recordList: [] as { id: number; time: number; res: string }[],
-      });
-
-      const { status, data, send, close, open } = useWebSocket(state.server, {
-        autoReconnect: false,
-        heartbeat: true,
-      });
-
-      watchEffect(() => {
-        if (data.value) {
-          try {
-            const res = JSON.parse(data.value);
-            state.recordList.push(res);
-          } catch (error) {
-            state.recordList.push({
-              res: data.value,
-              id: Math.ceil(Math.random() * 1000),
-              time: new Date().getTime(),
-            });
-          }
-        }
-      });
-
-      const getIsOpen = computed(() => status.value === 'OPEN');
-      const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
-
-      const getList = computed(() => {
-        return [...state.recordList].reverse();
-      });
-
-      function handlerSend() {
-        send(state.sendValue);
-        state.sendValue = '';
-      }
-
-      function toggle() {
-        if (getIsOpen.value) {
-          close();
-        } else {
-          open();
-        }
-      }
-      return {
-        status,
-        formatToDateTime,
-        ...toRefs(state),
-        handlerSend,
-        getList,
-        toggle,
-        getIsOpen,
-        getTagColor,
-      };
-    },
-  });
-</script>

src/views/demo/form/AdvancedForm.vue

@@ -1,190 +0,0 @@
-<template>
-  <PageWrapper title="可折叠表单示例">
-    <CollapseContainer title="基础收缩示例">
-      <BasicForm @register="register" />
-    </CollapseContainer>
-
-    <CollapseContainer title="超过3行自动收起，折叠时保留2行" class="mt-4">
-      <BasicForm @register="register1" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container';
-  import { PageWrapper } from '/@/components/Page';
-
-  const getSchamas = (): FormSchema[] => {
-    return [
-      {
-        field: 'field1',
-        component: 'Input',
-        label: '字段1',
-        colProps: {
-          span: 8,
-        },
-        componentProps: {
-          placeholder: '自定义placeholder',
-          onChange: (e: any) => {
-            console.log(e);
-          },
-        },
-      },
-      {
-        field: 'field2',
-        component: 'Input',
-        label: '字段2',
-        colProps: {
-          span: 8,
-        },
-      },
-      {
-        field: 'field3',
-        component: 'DatePicker',
-        label: '字段3',
-        colProps: {
-          span: 8,
-        },
-      },
-      {
-        field: 'field4',
-        component: 'Select',
-        label: '字段4',
-        colProps: {
-          span: 8,
-        },
-        componentProps: {
-          options: [
-            {
-              label: '选项1',
-              value: '1',
-              key: '1',
-            },
-            {
-              label: '选项2',
-              value: '2',
-              key: '2',
-            },
-          ],
-        },
-      },
-      {
-        field: 'field5',
-        component: 'CheckboxGroup',
-        label: '字段5',
-        colProps: {
-          span: 8,
-        },
-        componentProps: {
-          options: [
-            {
-              label: '选项1',
-              value: '1',
-            },
-            {
-              label: '选项2',
-              value: '2',
-            },
-          ],
-        },
-      },
-      // {
-      //   field: 'field7',
-      //   component: 'RadioGroup',
-      //   label: '字段7',
-      //   colProps: {
-      //     span: 8,
-      //   },
-      //   componentProps: {
-      //     options: [
-      //       {
-      //         label: '选项1',
-      //         value: '1',
-      //       },
-      //       {
-      //         label: '选项2',
-      //         value: '2',
-      //       },
-      //     ],
-      //   },
-      // },
-    ];
-  };
-
-  function getAppendSchemas(): FormSchema[] {
-    return [
-      {
-        field: 'field10',
-        component: 'Input',
-        label: '字段10',
-        colProps: {
-          span: 8,
-        },
-      },
-      {
-        field: 'field11',
-        component: 'Input',
-        label: '字段11',
-        colProps: {
-          span: 8,
-        },
-      },
-      {
-        field: 'field12',
-        component: 'Input',
-        label: '字段12',
-        colProps: {
-          span: 8,
-        },
-      },
-      {
-        field: 'field13',
-        component: 'Input',
-        label: '字段13',
-        colProps: {
-          span: 8,
-        },
-      },
-    ];
-  }
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const [register] = useForm({
-        labelWidth: 120,
-        schemas: getSchamas(),
-        actionColOptions: {
-          span: 24,
-        },
-        compact: true,
-        showAdvancedButton: true,
-      });
-      const extraSchemas: FormSchema[] = [];
-      for (let i = 14; i < 30; i++) {
-        extraSchemas.push({
-          field: 'field' + i,
-          component: 'Input',
-          label: '字段' + i,
-          colProps: {
-            span: 8,
-          },
-        });
-      }
-      const [register1] = useForm({
-        labelWidth: 120,
-        schemas: [...getSchamas(), ...getAppendSchemas(), { field: '', component: 'Divider', label: '更多字段' }, ...extraSchemas],
-        actionColOptions: {
-          span: 24,
-        },
-        compact: true,
-        showAdvancedButton: true,
-        alwaysShowLines: 2,
-      });
-      return {
-        register,
-        register1,
-      };
-    },
-  });
-</script>

src/views/demo/form/AppendForm.vue

@@ -1,118 +0,0 @@
-<template>
-  <PageWrapper title="表单增删示例">
-    <CollapseContainer title="表单增删">
-      <BasicForm @register="register" @submit="handleSubmit">
-        <template #add="{ field }">
-          <Button v-if="Number(field) === 0" @click="add">+</Button>
-          <Button v-if="field > 0" @click="del(field)">-</Button>
-        </template>
-      </BasicForm>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { Input } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { Button } from '/@/components/Button';
-
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input, Button },
-    setup() {
-      const [register, { appendSchemaByField, removeSchemaByFiled, validate }] = useForm({
-        schemas: [
-          {
-            field: 'field0a',
-            component: 'Input',
-            label: '字段0',
-            colProps: {
-              span: 8,
-            },
-            required: true,
-          },
-          {
-            field: 'field0b',
-            component: 'Input',
-            label: '字段0',
-            colProps: {
-              span: 8,
-            },
-            required: true,
-          },
-          {
-            field: '0',
-            component: 'Input',
-            label: ' ',
-            colProps: {
-              span: 8,
-            },
-            slot: 'add',
-          },
-        ],
-        labelWidth: 100,
-        actionColOptions: { span: 24 },
-      });
-
-      async function handleSubmit() {
-        try {
-          const data = await validate();
-          console.log(data);
-        } catch (e) {
-          console.log(e);
-        }
-      }
-
-      const n = ref(1);
-
-      function add() {
-        appendSchemaByField(
-          {
-            field: `field${n.value}a`,
-            component: 'Input',
-            label: '字段' + n.value,
-            colProps: {
-              span: 8,
-            },
-            required: true,
-          },
-          ''
-        );
-        appendSchemaByField(
-          {
-            field: `field${n.value}b`,
-            component: 'Input',
-            label: '字段' + n.value,
-            colProps: {
-              span: 8,
-            },
-            required: true,
-          },
-          ''
-        );
-
-        appendSchemaByField(
-          {
-            field: `${n.value}`,
-            component: 'Input',
-            label: ' ',
-            colProps: {
-              span: 8,
-            },
-            slot: 'add',
-          },
-          ''
-        );
-        n.value++;
-      }
-
-      function del(field) {
-        removeSchemaByFiled([`field${field}a`, `field${field}b`, `${field}`]);
-        n.value--;
-      }
-
-      return { register, handleSubmit, add, del };
-    },
-  });
-</script>

src/views/demo/form/CustomerForm.vue

@@ -1,85 +0,0 @@
-<template>
-  <PageWrapper title="自定义组件示例">
-    <CollapseContainer title="自定义表单">
-      <BasicForm @register="register" @submit="handleSubmit">
-        <template #f3="{ model, field }">
-          <a-input v-model:value="model[field]" placeholder="自定义slot" />
-        </template>
-      </BasicForm>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Input } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: 'render方式',
-      colProps: {
-        span: 8,
-      },
-      rules: [{ required: true }],
-      render: ({ model, field }) => {
-        return h(Input, {
-          placeholder: '请输入',
-          value: model[field],
-          onChange: (e: ChangeEvent) => {
-            model[field] = e.target.value;
-          },
-        });
-      },
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: 'render组件slot',
-      colProps: {
-        span: 8,
-      },
-      rules: [{ required: true }],
-      renderComponentContent: () => {
-        return {
-          suffix: () => 'suffix',
-        };
-      },
-    },
-    {
-      field: 'field3',
-      component: 'Input',
-      label: '自定义Slot',
-      slot: 'f3',
-      colProps: {
-        span: 8,
-      },
-      rules: [{ required: true }],
-    },
-  ];
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input },
-    setup() {
-      const { createMessage } = useMessage();
-      const [register, { setProps }] = useForm({
-        labelWidth: 120,
-        schemas,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      return {
-        register,
-        schemas,
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-        setProps,
-      };
-    },
-  });
-</script>

src/views/demo/form/DynamicForm.vue

@@ -1,258 +0,0 @@
-<template>
-  <PageWrapper title="动态表单示例">
-    <div class="mb-4">
-      <a-button @click="changeLabel3" class="mr-2"> 更改字段3label </a-button>
-      <a-button @click="changeLabel34" class="mr-2"> 同时更改字段3,4label </a-button>
-      <a-button @click="appendField" class="mr-2"> 往字段3后面插入字段10 </a-button>
-      <a-button @click="deleteField" class="mr-2"> 删除字段11 </a-button>
-    </div>
-    <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
-      <BasicForm @register="register" />
-    </CollapseContainer>
-
-    <CollapseContainer class="mt-5" title="componentProps动态改变">
-      <BasicForm @register="register1" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  const { hasPermission } = usePermission();
-  const schemas: FormSchema[] = [
-    {
-      field: 'field5',
-      component: 'Switch',
-      label: '是否显示字段1(css控制)',
-      defaultValue: true,
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-    },
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 12,
-      },
-      show: ({ values }) => {
-        return hasPermission('test001');
-      },
-    },
-    {
-      field: 'field6',
-      component: 'Switch',
-      label: '是否显示字段2(dom控制)',
-      defaultValue: true,
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 12,
-      },
-      ifShow: ({ values }) => {
-        return !!values.field6;
-      },
-    },
-    {
-      field: 'field7',
-      component: 'Switch',
-      label: '是否禁用字段3',
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-    },
-    {
-      field: 'field3',
-      component: 'DatePicker',
-      label: '字段3',
-      colProps: {
-        span: 12,
-      },
-      dynamicDisabled: ({ values }) => {
-        return !!values.field7;
-      },
-    },
-    {
-      field: 'field8',
-      component: 'Switch',
-      label: '字段4是否必填',
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-    },
-    {
-      field: 'field4',
-      component: 'Select',
-      label: '字段4',
-      colProps: {
-        span: 12,
-      },
-      dynamicRules: ({ values }) => {
-        return values.field8 ? [{ required: true, message: '字段必填' }] : [];
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-            key: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-            key: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field11',
-      component: 'DatePicker',
-      label: '字段11',
-      colProps: {
-        span: 8,
-      },
-    },
-  ];
-
-  const schemas1: FormSchema[] = [
-    {
-      field: 'f1',
-      component: 'Input',
-      label: 'F1',
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-      componentProps: ({ formModel }) => {
-        return {
-          placeholder: '同步f2的值为f1',
-          onChange: (e: ChangeEvent) => {
-            formModel.f2 = e.target.value;
-          },
-        };
-      },
-    },
-    {
-      field: 'f2',
-      component: 'Input',
-      label: 'F2',
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-      componentProps: { disabled: true },
-    },
-    {
-      field: 'f3',
-      component: 'Input',
-      label: 'F3',
-      colProps: {
-        span: 12,
-      },
-      labelWidth: 200,
-      // @ts-ignore
-      componentProps: ({ formActionType }) => {
-        return {
-          placeholder: '值改变时执行查询,查看控制台',
-          onChange: async () => {
-            const { validate } = formActionType;
-            // tableAction只适用于在表格内开启表单的例子
-            // const { reload } = tableAction;
-            const res = await validate();
-            console.log(res);
-          },
-        };
-      },
-    },
-  ];
-
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] = useForm({
-        labelWidth: 120,
-        schemas,
-        //禁用表单所有组件
-        disabled: true,
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 6 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 18 },
-        },
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      const [register1] = useForm({
-        labelWidth: 120,
-        schemas: schemas1,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      function changeLabel3() {
-        updateSchema({
-          field: 'field3',
-          label: '字段3 New',
-        });
-      }
-      function changeLabel34() {
-        updateSchema([
-          {
-            field: 'field3',
-            label: '字段3 New++',
-          },
-          {
-            field: 'field4',
-            label: '字段4 New++',
-          },
-        ]);
-      }
-
-      function appendField() {
-        appendSchemaByField(
-          {
-            field: 'field10',
-            label: '字段10',
-            component: 'Input',
-            colProps: {
-              span: 8,
-            },
-          },
-          'field3'
-        );
-      }
-      function deleteField() {
-        removeSchemaByFiled('field11');
-      }
-      return {
-        register,
-        register1,
-        schemas,
-        setProps,
-        changeLabel3,
-        changeLabel34,
-        appendField,
-        deleteField,
-      };
-    },
-  });
-</script>

src/views/demo/form/RefForm.vue

@@ -1,174 +0,0 @@
-<template>
-  <PageWrapper title="Ref操作示例">
-    <div class="mb-4">
-      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2"> 更改labelWidth </a-button>
-      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2"> 还原labelWidth </a-button>
-      <a-button @click="setProps({ size: 'large' })" class="mr-2"> 更改Size </a-button>
-      <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原Size </a-button>
-      <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
-      <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
-      <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
-      <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
-      <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2"> 操作按钮位置 </a-button>
-    </div>
-    <div class="mb-4">
-      <a-button @click="setProps({ showActionButtonGroup: false })" class="mr-2"> 隐藏操作按钮 </a-button>
-      <a-button @click="setProps({ showActionButtonGroup: true })" class="mr-2"> 显示操作按钮 </a-button>
-      <a-button @click="setProps({ showResetButton: false })" class="mr-2"> 隐藏重置按钮 </a-button>
-      <a-button @click="setProps({ showResetButton: true })" class="mr-2"> 显示重置按钮 </a-button>
-      <a-button @click="setProps({ showSubmitButton: false })" class="mr-2"> 隐藏查询按钮 </a-button>
-      <a-button @click="setProps({ showSubmitButton: true })" class="mr-2"> 显示查询按钮 </a-button>
-      <a-button
-        @click="
-          setProps({
-            resetButtonOptions: {
-              disabled: true,
-              text: '重置New',
-            },
-          })
-        "
-        class="mr-2"
-      >
-        修改重置按钮
-      </a-button>
-      <a-button
-        @click="
-          setProps({
-            submitButtonOptions: {
-              disabled: true,
-              loading: true,
-            },
-          })
-        "
-        class="mr-2"
-      >
-        修改查询按钮
-      </a-button>
-    </div>
-    <CollapseContainer title="使用ref调用表单内部函数示例">
-      <BasicForm :schemas="schemas" ref="formElRef" :labelWidth="100" @submit="handleSubmit" :actionColOptions="{ span: 24 }" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema, FormActionType, FormProps } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        placeholder: '自定义placeholder',
-        onChange: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field3',
-      component: 'DatePicker',
-      label: '字段3',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field4',
-      component: 'Select',
-      label: '字段4',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-            key: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-            key: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field5',
-      component: 'CheckboxGroup',
-      label: '字段5',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field7',
-      component: 'RadioGroup',
-      label: '字段7',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-  ];
-
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const formElRef = ref<Nullable<FormActionType>>(null);
-      const { createMessage } = useMessage();
-      return {
-        formElRef,
-        schemas,
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-        setProps(props: FormProps) {
-          const formEl = formElRef.value;
-          if (!formEl) return;
-          formEl.setProps(props);
-        },
-      };
-    },
-  });
-</script>

src/views/demo/form/RuleForm.vue

@@ -1,260 +0,0 @@
-<template>
-  <PageWrapper title="表单校验示例">
-    <div class="mb-4">
-      <a-button @click="validateForm" class="mr-2"> 手动校验表单</a-button>
-      <a-button @click="resetValidate" class="mr-2"> 清空校验信息</a-button>
-      <a-button @click="getFormValues" class="mr-2"> 获取表单值</a-button>
-      <a-button @click="setFormValues" class="mr-2"> 设置表单值</a-button>
-      <a-button @click="resetFields" class="mr-2"> 重置</a-button>
-    </div>
-    <CollapseContainer title="表单校验">
-      <BasicForm @register="register" @submit="handleSubmit" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-  import { isAccountExist } from '/@/api/demo/system';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 8,
-      },
-      required: true,
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 8,
-      },
-      required: true,
-    },
-    {
-      field: 'id',
-      label: 'id',
-      required: true,
-      defaultValue: 0,
-      component: 'InputNumber',
-      show: false,
-    },
-    {
-      field: 'field3',
-      component: 'DatePicker',
-      label: '字段3',
-      colProps: {
-        span: 8,
-      },
-      required: true,
-    },
-    {
-      field: 'field33',
-      component: 'DatePicker',
-      label: '字段33',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        valueFormat: 'YYYY-MM-DD',
-      },
-      rules: [{ required: true, type: 'string' }],
-    },
-    {
-      field: 'field44',
-      component: 'InputCountDown',
-      label: '验证码',
-      colProps: {
-        span: 8,
-      },
-      required: true,
-    },
-    {
-      field: 'field4',
-      component: 'Select',
-      label: '字段4',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        mode: 'multiple',
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-            key: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-            key: '2',
-          },
-        ],
-      },
-      rules: [
-        {
-          required: true,
-          message: '请输入aa',
-          type: 'array',
-        },
-      ],
-    },
-    {
-      field: 'field441',
-      component: 'Input',
-      label: '自定义校验',
-      colProps: {
-        span: 8,
-      },
-      rules: [
-        {
-          required: true,
-          // @ts-ignore
-          validator: async (rule, value) => {
-            if (!value) {
-              /* eslint-disable-next-line */
-              return Promise.reject('值不能为空');
-            }
-            if (value === '1') {
-              /* eslint-disable-next-line */
-              return Promise.reject('值不能为1');
-            }
-            return Promise.resolve();
-          },
-          trigger: 'change',
-        },
-      ],
-    },
-    {
-      field: 'field5',
-      component: 'CheckboxGroup',
-      label: '字段5',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-      rules: [{ required: true }],
-    },
-    {
-      field: 'field7',
-      component: 'RadioGroup',
-      label: '字段7',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-      rules: [{ required: true, message: '覆盖默认生成的校验信息' }],
-    },
-    {
-      field: 'field8',
-      component: 'Input',
-      label: '后端异步验证',
-      colProps: {
-        span: 8,
-      },
-      helpMessage: ['本字段演示异步验证', '本地规则：必须填写', '后端规则：不能包含admin'],
-      rules: [
-        {
-          required: true,
-          message: '请输入数据',
-        },
-        {
-          validator(_, value) {
-            return new Promise((resolve, reject) => {
-              isAccountExist(value)
-                .then(() => resolve())
-                .catch((err) => {
-                  reject(err.message || '验证失败');
-                });
-            });
-          },
-        },
-      ],
-    },
-  ];
-
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const { createMessage } = useMessage();
-      const [register, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }] = useForm({
-        labelWidth: 120,
-        schemas,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-
-      async function validateForm() {
-        try {
-          const res = await validateFields();
-          console.log('passing', res);
-        } catch (error) {
-          console.log('not passing', error);
-        }
-      }
-
-      async function resetValidate() {
-        clearValidate();
-      }
-
-      function getFormValues() {
-        const values = getFieldsValue();
-        createMessage.success('values:' + JSON.stringify(values));
-      }
-
-      function setFormValues() {
-        setFieldsValue({
-          field1: 1111,
-          field5: ['1'],
-          field7: '1',
-          field33: '2020-12-12',
-          field3: '2020-12-12',
-        });
-      }
-
-      return {
-        register,
-        schemas,
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-        getFormValues,
-        setFormValues,
-        validateForm,
-        resetValidate,
-        resetFields,
-      };
-    },
-  });
-</script>

src/views/demo/form/UseForm.vue

@@ -1,189 +0,0 @@
-<template>
-  <PageWrapper title="UseForm操作示例">
-    <div class="mb-4">
-      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2"> 更改labelWidth </a-button>
-      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2"> 还原labelWidth </a-button>
-      <a-button @click="setProps({ size: 'large' })" class="mr-2"> 更改Size </a-button>
-      <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原Size </a-button>
-      <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
-      <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
-      <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
-      <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
-      <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2"> 操作按钮位置 </a-button>
-    </div>
-    <div class="mb-4">
-      <a-button @click="setProps({ showActionButtonGroup: false })" class="mr-2"> 隐藏操作按钮 </a-button>
-      <a-button @click="setProps({ showActionButtonGroup: true })" class="mr-2"> 显示操作按钮 </a-button>
-      <a-button @click="setProps({ showResetButton: false })" class="mr-2"> 隐藏重置按钮 </a-button>
-      <a-button @click="setProps({ showResetButton: true })" class="mr-2"> 显示重置按钮 </a-button>
-      <a-button @click="setProps({ showSubmitButton: false })" class="mr-2"> 隐藏查询按钮 </a-button>
-      <a-button @click="setProps({ showSubmitButton: true })" class="mr-2"> 显示查询按钮 </a-button>
-      <a-button
-        @click="
-          setProps({
-            resetButtonOptions: {
-              disabled: true,
-              text: '重置New',
-            },
-          })
-        "
-        class="mr-2"
-      >
-        修改重置按钮
-      </a-button>
-      <a-button
-        @click="
-          setProps({
-            submitButtonOptions: {
-              disabled: true,
-              loading: true,
-            },
-          })
-        "
-        class="mr-2"
-      >
-        修改查询按钮
-      </a-button>
-    </div>
-    <CollapseContainer title="useForm示例">
-      <BasicForm @register="register" @submit="handleSubmit" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        placeholder: '自定义placeholder',
-        onChange: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field3',
-      component: 'DatePicker',
-      label: '字段3',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'fieldTime',
-      component: 'RangePicker',
-      label: '时间字段',
-      componentProps: {
-        valueType: 'Date',
-      },
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field4',
-      component: 'Select',
-      label: '字段4',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-            key: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-            key: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field5',
-      component: 'CheckboxGroup',
-      label: '字段5',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field7',
-      component: 'RadioGroup',
-      label: '字段7',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-  ];
-
-  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
-    setup() {
-      const { createMessage } = useMessage();
-
-      const [register, { setProps }] = useForm({
-        labelWidth: 120,
-        schemas,
-        actionColOptions: {
-          span: 24,
-        },
-        fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
-      });
-      return {
-        register,
-        schemas,
-        handleSubmit: (values: Recordable) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-        setProps,
-      };
-    },
-  });
-</script>

src/views/demo/form/index.vue

@@ -1,621 +0,0 @@
-<template>
-  <PageWrapper title="表单基础示例" contentFullHeight>
-    <CollapseContainer title="基础示例">
-      <BasicForm
-        autoFocusFirstItem
-        :labelWidth="200"
-        :schemas="schemas"
-        :actionColOptions="{ span: 24 }"
-        :labelCol="{ span: 8 }"
-        @submit="handleSubmit"
-        @reset="handleReset"
-      >
-        <template #jAreaLinkage="{ model, field }">
-          <JAreaLinkage v-model:value="model[field]" :showArea="true" :showAll="false" />
-        </template>
-        <template #localSearch="{ model, field }">
-          <ApiSelect
-            :api="optionsListApi"
-            showSearch
-            v-model:value="model[field]"
-            optionFilterProp="label"
-            resultField="list"
-            labelField="name"
-            valueField="id"
-          />
-        </template>
-        <template #selectA="{ model, field }">
-          <a-select :options="optionsA" mode="multiple" v-model:value="model[field]" @change="valueSelectA = model[field]" allowClear />
-        </template>
-        <template #selectB="{ model, field }">
-          <a-select :options="optionsB" mode="multiple" v-model:value="model[field]" @change="valueSelectB = model[field]" allowClear />
-        </template>
-        <template #remoteSearch="{ model, field }">
-          <ApiSelect
-            :api="optionsListApi"
-            showSearch
-            v-model:value="model[field]"
-            :filterOption="false"
-            resultField="list"
-            labelField="name"
-            valueField="id"
-            @search="onSearch"
-          />
-        </template>
-      </BasicForm>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { computed, defineComponent, unref, ref } from 'vue';
-  import { BasicForm, FormSchema, ApiSelect, JAreaLinkage } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
-
-  import { optionsListApi } from '/@/api/demo/select';
-  import { useDebounceFn } from '@vueuse/core';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
-  import { Select } from 'ant-design-vue';
-  import { cloneDeep } from 'lodash-es';
-
-  const valueSelectA = ref<string[]>([]);
-  const valueSelectB = ref<string[]>([]);
-  const options = ref<Recordable[]>([]);
-  for (let i = 1; i < 10; i++) options.value.push({ label: '选项' + i, value: `${i}` });
-
-  const optionsA = computed(() => {
-    return cloneDeep(unref(options)).map((op) => {
-      op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
-      return op;
-    });
-  });
-  const optionsB = computed(() => {
-    return cloneDeep(unref(options)).map((op) => {
-      op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
-      return op;
-    });
-  });
-  const provincesOptions = [
-    {
-      id: 'guangdong',
-      label: '广东省',
-      value: '1',
-      key: '1',
-    },
-    {
-      id: 'jiangsu',
-      label: '江苏省',
-      value: '2',
-      key: '2',
-    },
-  ];
-  const citiesOptionsData = {
-    guangdong: [
-      {
-        label: '珠海市',
-        value: '1',
-        key: '1',
-      },
-      {
-        label: '深圳市',
-        value: '2',
-        key: '2',
-      },
-      {
-        label: '广州市',
-        value: '3',
-        key: '3',
-      },
-    ],
-    jiangsu: [
-      {
-        label: '南京市',
-        value: '1',
-        key: '1',
-      },
-      {
-        label: '无锡市',
-        value: '2',
-        key: '2',
-      },
-      {
-        label: '苏州市',
-        value: '3',
-        key: '3',
-      },
-    ],
-  };
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'divider-basic',
-      component: 'Divider',
-      label: '基础字段',
-    },
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-
-      colProps: {
-        span: 8,
-      },
-      // componentProps:{},
-      // can func
-      componentProps: ({ schema, formModel }) => {
-        console.log('form:', schema);
-        console.log('formModel:', formModel);
-        return {
-          placeholder: '自定义placeholder',
-          onChange: (e: any) => {
-            console.log(e);
-          },
-        };
-      },
-      renderComponentContent: () => {
-        return {
-          prefix: () => 'pSlot',
-          suffix: () => 'sSlot',
-        };
-      },
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      defaultValue: '111',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        onChange: (e: any) => {
-          console.log(e);
-        },
-      },
-      suffix: '天',
-    },
-    {
-      field: 'field3',
-      component: 'DatePicker',
-      label: '字段3',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field4',
-      component: 'Select',
-      label: '字段4',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-            key: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-            key: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field5',
-      component: 'CheckboxGroup',
-      label: '字段5',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field7',
-      component: 'RadioGroup',
-      label: '字段7',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field8',
-      component: 'Checkbox',
-      label: '字段8',
-      colProps: {
-        span: 8,
-      },
-      renderComponentContent: 'Check',
-    },
-    {
-      field: 'field9',
-      component: 'Switch',
-      label: '字段9',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field10',
-      component: 'RadioButtonGroup',
-      label: '字段10',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'field11',
-      component: 'Cascader',
-      label: '字段11',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [
-          {
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [
-              {
-                value: 'hangzhou',
-                label: 'Hangzhou',
-                children: [
-                  {
-                    value: 'xihu',
-                    label: 'West Lake',
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [
-              {
-                value: 'nanjing',
-                label: 'Nanjing',
-                children: [
-                  {
-                    value: 'zhonghuamen',
-                    label: 'Zhong Hua Men',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    },
-    {
-      field: 'divider-api-select',
-      component: 'Divider',
-      label: '远程下拉演示',
-    },
-    {
-      field: 'field30',
-      component: 'ApiSelect',
-      label: '懒加载远程下拉',
-      required: true,
-      componentProps: {
-        // more details see /src/components/Form/src/components/ApiSelect.vue
-        api: optionsListApi,
-        params: {
-          id: 1,
-        },
-        resultField: 'list',
-        // use name as label
-        labelField: 'name',
-        // use id as value
-        valueField: 'id',
-        // not request untill to select
-        immediate: false,
-        onChange: (e) => {
-          console.log('selected:', e);
-        },
-        // atfer request callback
-        onOptionsChange: (options) => {
-          console.log('get options', options.length, options);
-        },
-      },
-      colProps: {
-        span: 8,
-      },
-      defaultValue: '0',
-    },
-    {
-      field: 'field311',
-      component: 'JAreaLinkage',
-      label: '省市区选择',
-      helpMessage: ['JAreaLinkage组件', '省市区选择'],
-      required: true,
-      slot: 'jAreaLinkage',
-      colProps: {
-        span: 8,
-      },
-      defaultValue: ['130000', '130200'],
-    },
-    {
-      field: 'field31',
-      component: 'Input',
-      label: '下拉本地搜索',
-      helpMessage: ['ApiSelect组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'],
-      required: true,
-      slot: 'localSearch',
-      colProps: {
-        span: 8,
-      },
-      defaultValue: '0',
-    },
-    {
-      field: 'field32',
-      component: 'Input',
-      label: '下拉远程搜索',
-      helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
-      required: true,
-      slot: 'remoteSearch',
-      colProps: {
-        span: 8,
-      },
-      defaultValue: '0',
-    },
-    {
-      field: 'field33',
-      component: 'ApiTreeSelect',
-      label: '远程下拉树',
-      helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'],
-      required: true,
-      componentProps: {
-        api: treeOptionsListApi,
-        resultField: 'list',
-      },
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field34',
-      component: 'ApiRadioGroup',
-      label: '远程Radio',
-      helpMessage: ['ApiRadioGroup组件', '使用接口提供的数据生成选项'],
-      required: true,
-      componentProps: {
-        api: optionsListApi,
-        params: {
-          count: 2,
-        },
-        resultField: 'list',
-        // use name as label
-        labelField: 'name',
-        // use id as value
-        valueField: 'id',
-      },
-      defaultValue: '1',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field35',
-      component: 'ApiRadioGroup',
-      label: '远程Radio',
-      helpMessage: ['ApiRadioGroup组件', '使用接口提供的数据生成选项'],
-      required: true,
-      componentProps: {
-        api: optionsListApi,
-        params: {
-          count: 2,
-        },
-        resultField: 'list',
-        // use name as label
-        labelField: 'name',
-        // use id as value
-        valueField: 'id',
-        isBtn: true,
-      },
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'divider-linked',
-      component: 'Divider',
-      label: '字段联动',
-    },
-    {
-      field: 'province',
-      component: 'Select',
-      label: '省份',
-      colProps: {
-        span: 8,
-      },
-      componentProps: ({ formModel, formActionType }) => {
-        return {
-          options: provincesOptions,
-          placeholder: '省份与城市联动',
-          onChange: (e: any) => {
-            // console.log(e)
-            let citiesOptions = e == 1 ? citiesOptionsData[provincesOptions[0].id] : citiesOptionsData[provincesOptions[1].id];
-            // console.log(citiesOptions)
-            if (e === undefined) {
-              citiesOptions = [];
-            }
-            formModel.city = undefined; //  reset city value
-            const { updateSchema } = formActionType;
-            updateSchema({
-              field: 'city',
-              componentProps: {
-                options: citiesOptions,
-              },
-            });
-          },
-        };
-      },
-    },
-    {
-      field: 'city',
-      component: 'Select',
-      label: '城市',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        options: [], // defalut []
-        placeholder: '省份与城市联动',
-      },
-    },
-    {
-      field: 'divider-selects',
-      component: 'Divider',
-      label: '互斥多选',
-      helpMessage: ['两个Select共用数据源', '但不可选择对方已选中的项目'],
-    },
-    {
-      field: 'selectA',
-      component: 'Select',
-      label: '互斥SelectA',
-      slot: 'selectA',
-      defaultValue: [],
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'selectB',
-      component: 'Select',
-      label: '互斥SelectB',
-      slot: 'selectB',
-      defaultValue: [],
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'divider-others',
-      component: 'Divider',
-      label: '其它',
-    },
-    {
-      field: 'field20',
-      component: 'InputNumber',
-      label: '字段20',
-      required: true,
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field21',
-      component: 'Slider',
-      label: '字段21',
-      componentProps: {
-        min: 0,
-        max: 100,
-        range: true,
-        marks: {
-          20: '20°C',
-          60: '60°C',
-        },
-      },
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'field22',
-      component: 'Rate',
-      label: '字段22',
-      defaultValue: 3,
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        disabled: false,
-        allowHalf: true,
-      },
-    },
-  ];
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-      CollapseContainer,
-      PageWrapper,
-      ApiSelect,
-      JAreaLinkage,
-      ASelect: Select,
-    },
-    setup() {
-      const check = ref(null);
-      const { createMessage } = useMessage();
-      const keyword = ref<string>('');
-      const searchParams = computed<Recordable>(() => {
-        return { keyword: unref(keyword) };
-      });
-
-      function onSearch(value: string) {
-        keyword.value = value;
-      }
-      function areaChange(value) {
-        alert(value);
-      }
-
-      return {
-        schemas,
-        optionsListApi,
-        optionsA,
-        optionsB,
-        valueSelectA,
-        valueSelectB,
-        onSearch: useDebounceFn(onSearch, 300),
-        searchParams,
-        handleReset: () => {
-          keyword.value = '';
-        },
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-        check,
-      };
-    },
-  });
-</script>

src/views/demo/jeecg/AsyncTreeTable.vue

@@ -1,57 +0,0 @@
-<template>
-  <PageWrapper>
-    <a-card :bordered="false">
-      <BasicTable :loading="loading" :dataSource="dataSource" @register="registerTable" @expand="onExpand" />
-    </a-card>
-  </PageWrapper>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { PageWrapper } from '/@/components/Page';
-  import { BasicTable, useTable } from '/@/components/Table';
-
-  const url = '/mock/api/asynTreeList';
-
-  const loading = ref<boolean>(false);
-  const dataSource = ref<any[]>([]);
-  const [registerTable, { setLoading }] = useTable({
-    rowKey: 'id',
-    bordered: true,
-    canResize: false,
-    // 树表格
-    isTreeTable: true,
-    showIndexColumn: true,
-    columns: [
-      { title: '名称', dataIndex: 'name' },
-      { title: '组件', dataIndex: 'component' },
-      { title: '排序', dataIndex: 'orderNum' },
-    ],
-  });
-
-  async function loadData(params) {
-    loading.value = true;
-    let result = await defHttp.get({ url, params });
-    loading.value = false;
-    return result.map((item) => {
-      if (item.hasChildren) {
-        return { ...item, children: [] };
-      } else {
-        return item;
-      }
-    });
-  }
-
-  async function loadRootData() {
-    dataSource.value = await loadData({ id: '0' });
-  }
-
-  loadRootData();
-
-  async function onExpand(isExpand, rowData) {
-    if (isExpand && rowData.hasChildren && rowData.children.length === 0) {
-      rowData.children = await loadData({ id: rowData.id });
-    }
-  }
-</script>

src/views/demo/jeecg/ImgDragSort.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <draggable @end="end" v-model="dataArr" item-key="id" style="display: flex">
-      <template #item="{ element }">
-        <div class="imgDiv">
-          <img :src="element.filePath" preview="index" />
-        </div>
-      </template>
-      <template #footer>
-        <a-button @click="sureChange" type="primary" style="margin-top: 100px">确定</a-button>
-      </template>
-    </draggable>
-    <a-divider>json数据</a-divider>
-    <a-row>
-      <a-col :span="12">
-        <p>拖拽前：</p>
-        <textarea rows="25" style="width: 780px">{{ oldDateSource }}</textarea>
-      </a-col>
-      <a-col :span="12">
-        <p>拖拽后：</p>
-        <textarea rows="25" style="width: 780px">{{ newDateSource }}</textarea>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import draggable from 'vuedraggable';
-  import { defineComponent, ref, unref } from 'vue';
-
-  const mockData = [
-    { id: '000', sort: 0, filePath: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg' },
-    { id: '111', sort: 1, filePath: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg' },
-    { id: '222', sort: 2, filePath: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg' },
-    { id: '333', sort: 3, filePath: 'https://static.jeecg.com/temp/国炬软件logo_1606575029126.png' },
-    { id: '444', sort: 4, filePath: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg' },
-  ];
-
-  //数据集
-  const dataArr = ref(mockData);
-  //原始数据
-  const oldDateSource = ref(mockData);
-  //更改后的数据
-  const newDateSource = ref([]);
-
-  /**
-   * 拖动结束事件
-   * @param evt
-   */
-  function end(evt) {
-    console.log('拖动前的位置' + evt.oldIndex);
-    console.log('拖动后的位置' + evt.newIndex);
-  }
-
-  /**
-   * 确认更改事件
-   * @param evt
-   */
-  function sureChange() {
-    for (let i = 0; i < unref(dataArr).length; i++) {
-      dataArr.value[i].sort = i;
-    }
-    newDateSource.value = unref(dataArr);
-  }
-</script>
-
-<style scoped lang="less">
-  .imgDiv {
-    padding: 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    margin: 0 8px 8px 0;
-
-    img {
-      width: 120px;
-      height: 120px;
-      object-fit: cover;
-    }
-  }
-</style>

src/views/demo/jeecg/ImgTurnPage.vue

@@ -1,170 +0,0 @@
-<template>
-  <div style="min-width: 800px">
-    <a-row>
-      <!-- 左侧文件树 -->
-      <a-col :span="6">
-        <a-tree
-          showLine
-          :treeData="treeData"
-          :expandedKeys="[expandedKeys[0]]"
-          :selectedKeys="selectedKeys"
-          :style="{ height: '500px', 'border-right': '2px solid #c1c1c1', 'overflow-y': 'auto' }"
-          @expand="onExpand"
-          @select="onSelect"
-        ></a-tree>
-      </a-col>
-
-      <!--右侧缩略图-->
-      <a-col :span="18">
-        <a-row style="margin-top: 10px; padding-left: 2%">
-          <a-col :span="24" style="margin-bottom: 10px">
-            <a-button @click="prev" preIcon="ant-design:left-outlined" type="primary">上一页</a-button>
-            <a-button @click="next" preIcon="ant-design:right-outlined" style="margin-left: 8px" type="primary">下一页</a-button>
-            <span style="margin-left: 100px; font-weight: bolder">{{ navName }}</span>
-          </a-col>
-          <a-col :span="24">
-            <img :src="imgUrl" preview />
-          </a-col>
-        </a-row>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref, unref, onMounted } from 'vue';
-  //mock数据
-  const mockdata = [
-    {
-      title: '第一页',
-      key: '0-0',
-      children: [
-        {
-          title: '1页',
-          key: '0-0-0',
-          imgUrl: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg',
-        },
-        {
-          title: '2页',
-          key: '0-0-1',
-          imgUrl: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg',
-        },
-      ],
-    },
-    {
-      title: '第二页',
-      key: '0-1',
-      children: [
-        {
-          title: '1页',
-          key: '0-1-0',
-          imgUrl: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg',
-        },
-        {
-          title: '2页',
-          key: '0-1-1',
-          imgUrl: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg',
-        },
-      ],
-    },
-    {
-      title: '第三页',
-      key: '0-2',
-      children: [
-        {
-          title: '1页',
-          key: '0-2-0',
-          imgUrl: 'https://static.jeecg.com/upload/test/1374962_1587621329085.jpg',
-        },
-      ],
-    },
-  ];
-  /**
-   * 左侧树形数据
-   */
-  const treeData = ref(mockdata);
-  //选中的key
-  const selectedKeys = ref([]);
-  //展开的key
-  const expandedKeys = ref([]);
-  const sort = ref(0);
-  //图片链接
-  const imgUrl = ref('');
-  //页码标题
-  const navName = ref('');
-  //图片集合
-  const imgList = ref([]);
-
-  onMounted(getImgList);
-
-  /**
-   * 加载图片集合
-   */
-  function getImgList() {
-    var count = 0;
-    for (var i = 0; i < unref(treeData).length; i++) {
-      for (var j = 0; j < unref(treeData)[i].children.length; j++) {
-        imgList.value.push({
-          key: unref(treeData)[i].children[j].key,
-          pkey: unref(treeData)[i].key,
-          sort: count++,
-          imgUrl: unref(treeData)[i].children[j].imgUrl,
-          navName: unref(treeData)[i].title + '/' + unref(treeData)[i].children[j].title,
-        });
-      }
-    }
-    setValue(imgList.value[unref(sort)]);
-  }
-  /**
-   * 节点选中事件
-   */
-  function onSelect(selectedKeys, info) {
-    for (var i = 0; i < unref(imgList).length; i++) {
-      if (unref(imgList)[i].key === selectedKeys[0]) {
-        sort.value = unref(imgList)[i].sort;
-        setValue(unref(imgList)[i]);
-        break;
-      }
-    }
-  }
-  /**
-   * 节点展开事件
-   */
-  function onExpand(expandedKey) {
-    expandedKeys.value = [];
-    if (expandedKey !== null && expandedKey !== '') {
-      expandedKeys.value[0] = expandedKey[1];
-    }
-  }
-  /**
-   * 上一页
-   */
-  function prev() {
-    if (unref(sort) === 0) {
-      sort.value = unref(imgList).length - 1;
-    } else {
-      sort.value = sort.value - 1;
-    }
-    setValue(unref(imgList)[unref(sort)]);
-  }
-  /**
-   * 下一页
-   */
-  function next() {
-    if (unref(sort) === unref(imgList).length - 1) {
-      sort.value = 0;
-    } else {
-      sort.value = unref(sort) + 1;
-    }
-    setValue(unref(imgList)[unref(sort)]);
-  }
-
-  // 设置受控节点值
-  function setValue(value) {
-    selectedKeys.value = [];
-    imgUrl.value = value.imgUrl;
-    selectedKeys.value[0] = value.key;
-    expandedKeys.value[0] = value.pkey;
-    navName.value = value.navName;
-  }
-</script>

src/views/demo/jeecg/InnerExpandTable.vue

@@ -1,245 +0,0 @@
-<template>
-  <a-card :bordered="false">
-    <BasicTable @register="registerTable" :expandedRowKeys="expandedRowKeys" :rowSelection="rowSelection" @expand="handleExpand">
-      <template #tableTitle>
-        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-      </template>
-      <template #expandedRowRender>
-        <BasicTable bordered size="middle" rowKey="id" :canResize="false" :columns="innerColumns" :dataSource="innerData" :pagination="false">
-        </BasicTable>
-      </template>
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" />
-      </template>
-    </BasicTable>
-    <JVxeTableModal @register="registerModal" @success="reload()"></JVxeTableModal>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useModal } from '/@/components/Modal';
-  import JVxeTableModal from '/@/views/demo/vextable/jvxetable/JVxeTableModal.vue';
-  //接口url
-  const url = {
-    list: '/test/order/orderList',
-    delete: '/test/order/delete',
-    deleteBatch: '/test/order/deleteBatch',
-    customerListByMainId: '/test/order/listOrderCustomerByMainId',
-  };
-  // 展开key
-  const expandedRowKeys = ref<any[]>([]);
-  // 选择key
-  const checkedKeys = ref<any[]>([]);
-  // 子表数据
-  const innerData = ref<any[]>([]);
-  // 主表表头
-  const columns = [
-    {
-      title: '订单号',
-      align: 'center',
-      dataIndex: 'orderCode',
-      width: 100,
-    },
-    {
-      title: '订单类型',
-      align: 'center',
-      dataIndex: 'ctype',
-      width: 100,
-      customRender: ({ text }) => {
-        let re = '';
-        if (text === '1') {
-          re = '国内订单';
-        } else if (text === '2') {
-          re = '国际订单';
-        }
-        return re;
-      },
-    },
-    {
-      title: '订单日期',
-      align: 'center',
-      width: 100,
-      dataIndex: 'orderDate',
-    },
-    {
-      title: '订单金额',
-      align: 'center',
-      dataIndex: 'orderMoney',
-      width: 100,
-    },
-    {
-      title: '订单备注',
-      align: 'center',
-      dataIndex: 'content',
-      width: 100,
-    },
-  ];
-  // 子表表头
-  const innerColumns = [
-    {
-      title: '客户名',
-      align: 'center',
-      width: 100,
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: '性别',
-      align: 'center',
-      dataIndex: 'sex',
-      customRender: function (text) {
-        //console.log(typeof  text )
-        //console.log(text)
-        if (text.value == '1') {
-          return '男';
-        } else if (text.value == '2') {
-          return '女';
-        } else {
-          return text;
-        }
-      },
-    },
-    {
-      title: '身份证号码',
-      align: 'center',
-      dataIndex: 'idcard',
-    },
-    {
-      title: '电话',
-      dataIndex: 'telphone',
-      align: 'center',
-    },
-  ];
-  const list = (params) => defHttp.get({ url: url.list, params });
-  const [registerModal, { openModal }] = useModal();
-  const [registerTable, { reload }] = useTable({
-    columns,
-    api: list,
-    rowKey: 'id',
-    striped: true,
-    useSearchForm: false,
-    showTableSetting: true,
-    clickToRowSelect: false,
-    bordered: true,
-    actionColumn: {
-      width: 110,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: undefined,
-    },
-  });
-
-  /**
-   * 选择列配置
-   */
-  const rowSelection = {
-    type: 'checkbox',
-    columnWidth: 30,
-    selectedRowKeys: checkedKeys,
-    onChange: onSelectChange,
-  };
-
-  /**
-   * 选择事件
-   */
-  function onSelectChange(selectedRowKeys: (string | number)[]) {
-    checkedKeys.value = selectedRowKeys;
-  }
-  /**
-   * 展开事件
-   * */
-  function handleExpand(expanded, record) {
-    expandedRowKeys.value = [];
-    innerData.value = [];
-    if (expanded === true) {
-      expandedRowKeys.value.push(record.id);
-      defHttp.get({ url: url.customerListByMainId, params: { orderId: record.id } }, { isTransformResponse: false }).then((res) => {
-        if (res.success) {
-          innerData.value = res.result.records;
-        }
-      });
-    }
-  }
-  /**
-   * 新增事件
-   */
-  function handleAdd() {
-    openModal(true, {
-      isUpdate: false,
-    });
-  }
-  /**
-   * 编辑事件
-   */
-  function handleEdit(record) {
-    openModal(true, {
-      record,
-      isUpdate: true,
-    });
-  }
-  /**
-   * 删除事件
-   */
-  function handleDelete(record) {
-    defHttp.delete({ url: url.delete, data: { id: record.id } }, { joinParamsToUrl: true }).then(() => {
-      reload();
-    });
-  }
-  /**
-   * 操作栏
-   */
-  function getTableAction(record) {
-    return [
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-      {
-        label: '删除',
-        popConfirm: {
-          title: '是否确认删除',
-          confirm: handleDelete.bind(null, record),
-        },
-      },
-    ];
-  }
-</script>
-<style scoped lang="less">
-  @ventSpace: zxm;
-  
-  .@{ventSpace}-card-body .table-operator {
-    margin-bottom: 18px;
-  }
-
-  .@{ventSpace}-table-tbody .@{ventSpace}-table-row td {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-
-  .anty-row-operator button {
-    margin: 0 5px;
-  }
-
-  .@{ventSpace}-btn-danger {
-    background-color: #ffffff;
-  }
-
-  .@{ventSpace}-modal-cust-warp {
-    height: 100%;
-  }
-
-  .@{ventSpace}-modal-cust-warp .@{ventSpace}-modal-body {
-    height: calc(100% - 110px) !important;
-    overflow-y: auto;
-  }
-
-  .@{ventSpace}-modal-cust-warp .@{ventSpace}-modal-content {
-    height: 90% !important;
-    overflow-y: hidden;
-  }
-</style>

src/views/demo/jeecg/JCodeEditDemo.vue

@@ -1,67 +0,0 @@
-<template>
-  <BasicForm
-    :labelWidth="200"
-    :schemas="schemas"
-    :showResetButton="false"
-    :showSubmitButton="false"
-    :actionColOptions="{ span: 24 }"
-    @submit="handleSubmit"
-    @reset="handleReset"
-    style="height: 800px"
-  >
-    <template #jCodeEdit="{ model, field }">
-      <JCodeEditor v-model:value="model[field]" mode="js" height="300px" :fullScreen="true" />
-    </template>
-  </BasicForm>
-</template>
-<script lang="ts">
-  import { computed, defineComponent, unref, ref } from 'vue';
-  import { BasicForm, FormSchema, JCodeEditor } from '/@/components/Form';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { optionsListApi } from '/@/api/demo/select';
-  import { useDebounceFn } from '@vueuse/core';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'JCodeEditor',
-      label: '代码编辑器',
-      required: true,
-      slot: 'jCodeEdit',
-      colProps: {
-        span: 15,
-      },
-      defaultValue: 'Hello JeecgBoot',
-    },
-  ];
-
-  export default defineComponent({
-    components: { BasicForm, JCodeEditor },
-    setup() {
-      const check = ref(null);
-      const { createMessage } = useMessage();
-      const keyword = ref<string>('');
-      const searchParams = computed<Recordable>(() => {
-        return { keyword: unref(keyword) };
-      });
-
-      function onSearch(value: string) {
-        keyword.value = value;
-      }
-
-      return {
-        schemas,
-        optionsListApi,
-        onSearch: useDebounceFn(onSearch, 300),
-        searchParams,
-        handleReset: () => {
-          keyword.value = '';
-        },
-        handleSubmit: (values: any) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
-        },
-        check,
-      };
-    },
-  });
-</script>

src/views/demo/jeecg/JEditorDemo.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="p-4">
-    <div class="p-4 bg-white">
-      <a-button-group class="j-table-operator">
-        <a-button type="primary" @click="setDis(0)">启用</a-button>
-        <a-button type="primary" @click="setDis(1)">禁用</a-button>
-        <a-button type="primary" @click="getValues()">校验表单并获取值</a-button>
-        <a-button type="primary" @click="setValues()">设置值</a-button>
-      </a-button-group>
-
-      <BasicForm @register="register" @submit="handleSubmit" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-  export default {
-    title: '富文本 | Markdown',
-    name: 'MarkdownDemo',
-  };
-</script>
-
-<script lang="ts" setup>
-  import { FormSchema, useForm, BasicForm } from '/@/components/Form';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const { createMessage, createSuccessModal } = useMessage();
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'name',
-      component: 'Input',
-      label: '姓名',
-      required: true,
-      defaultValue: 'zhangsan',
-    },
-    {
-      field: 'tinymce',
-      component: 'JEditor',
-      label: '富文本',
-      defaultValue: 'defaultValue',
-      required: true,
-    },
-    {
-      field: 'markdown',
-      component: 'JMarkdownEditor',
-      label: 'Markdown',
-      defaultValue: '# 张三',
-      required: true,
-      componentProps: {
-        height: 300,
-      },
-    },
-  ];
-
-  const [register, { setProps, validate, setFieldsValue }] = useForm({
-    labelWidth: 120,
-    schemas: schemas,
-    actionColOptions: {
-      span: 24,
-    },
-    compact: true,
-    showResetButton: false,
-    showSubmitButton: false,
-    showAdvancedButton: false,
-    disabled: false,
-  });
-
-  function handleSubmit(values) {
-    console.log(values);
-  }
-
-  function setDis(flag) {
-    setProps({ disabled: !!flag });
-  }
-
-  async function getValues() {
-    try {
-      const values = await validate();
-      console.log(values);
-      createSuccessModal({
-        title: '校验通过',
-        content: `${JSON.stringify(values)}`,
-      });
-    } catch (error) {
-      createMessage.warning('检验不通过');
-    }
-  }
-
-  function setValues() {
-    setFieldsValue({
-      name: 'LiSi',
-      markdown: '# 李四',
-      tinymce: '<p><strong><span style="font-size: 18pt;">张<span style="color: #e03e2d;">三</span>丰</span></strong></p>',
-    });
-  }
-</script>
-
-<style scoped></style>

src/views/demo/jeecg/JUploadDemo.vue

@@ -1,84 +0,0 @@
-<template>
-  <a-button-group class="j-table-operator">
-    <a-button type="primary" @click="setDisabled(0)">启用</a-button>
-    <a-button type="primary" @click="setDisabled(1)">禁用</a-button>
-    <a-button type="primary" @click="showUploadModal">文件弹窗</a-button>
-  </a-button-group>
-  <BasicForm @register="register" @submit="handleSubmit" />
-  <JUploadModal v-model:value="uploadModalValue" @register="registerModel" />
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { FormSchema, useForm, BasicForm } from '/@/components/Form';
-  import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
-  import { JUploadModal } from '/@/components/Form/src/jeecg/components/JUpload';
-  import { useModal } from '/@/components/Modal';
-
-  const uploadModalValue = ref('');
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'uploadFile',
-      component: 'JUpload',
-      helpMessage: '无限制上传',
-      label: '上传文件',
-    },
-    {
-      field: 'uploadFileMax',
-      component: 'JUpload',
-      helpMessage: '最多上传3个文件',
-      label: '上传文件（3）',
-      componentProps: { maxCount: 3 },
-    },
-    {
-      field: 'uploadImage',
-      component: 'JUpload',
-      label: '上传图片',
-      helpMessage: '无限制上传',
-      componentProps: {
-        fileType: UploadTypeEnum.image,
-      },
-    },
-    {
-      field: 'uploadImageMax',
-      component: 'JUpload',
-      label: '上传图片（1）',
-      helpMessage: '最多上传1张图片',
-      componentProps: {
-        fileType: UploadTypeEnum.image,
-        maxCount: 1,
-      },
-    },
-  ];
-
-  const [registerModel, { openModal }] = useModal();
-
-  const [register, { setProps, validate, setFieldsValue }] = useForm({
-    labelWidth: 120,
-    schemas: schemas,
-    actionColOptions: {
-      span: 24,
-    },
-    compact: true,
-    showResetButton: false,
-    showSubmitButton: false,
-    showAdvancedButton: false,
-    disabled: false,
-  });
-
-  function handleSubmit(values) {
-    console.log(values);
-  }
-
-  function setDisabled(flag) {
-    setProps({ disabled: !!flag });
-  }
-
-  function showUploadModal() {
-    openModal(true, {
-      maxCount: 9,
-      fileType: UploadTypeEnum.image,
-    });
-  }
-</script>

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue

@@ -1,391 +0,0 @@
-<template>
-  <a-space>
-    <a-button @click="onToggleLoading">切换加载</a-button>
-    <a-button @click="onToggleDisabled">切换禁用</a-button>
-  </a-space>
-  <!--这种使用场景得用height，用maxHeight底层有问题-->
-  <JVxeTable
-    ref="tableRef"
-    stripe
-    toolbar
-    rowNumber
-    rowSelection
-    rowExpand
-    resizable
-    asyncRemove
-    clickSelectRow
-    :height="480"
-    :checkboxConfig="{ range: true }"
-    :disabledRows="{ input: ['text--16', 'text--18'] }"
-    :loading="loading"
-    :disabled="disabled"
-    :columns="columns"
-    :dataSource="dataSource"
-    @removed="onJVxeRemove"
-    @valueChange="handleValueChange"
-    @blur="handleBlur"
-  >
-    <template #toolbarSuffix>
-      <a-button @click="handleTableCheck">表单验证</a-button>
-      <a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
-        <a-button @click="onGetData">获取数据</a-button>
-      </a-tooltip>
-      <a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
-        <a-button @click="handleTableSet">设置值</a-button>
-      </a-tooltip>
-      <a-button @click="onGetSelData">获取选中数据</a-button>
-      <a-button @click="onClearSel">清空选中</a-button>
-      <a-button @click="onDelFirst">删除第一行数据</a-button>
-      <a-button @click="onDelSel">删除选中数据</a-button>
-    </template>
-
-    <template #expandContent="props">
-      <div style="padding: 20px">
-        <span>Hello! My name is: {{ props.row.input }}!</span>
-      </div>
-    </template>
-
-    <template #myAction="props">
-      <a @click="onLookRow(props)">查看</a>
-      <a-divider type="vertical" />
-      <Popconfirm title="确定删除吗？" @confirm="onDeleteRow(props)">
-        <a>删除</a>
-      </Popconfirm>
-    </template>
-  </JVxeTable>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  // noinspection ES6UnusedImports
-  import { Popconfirm } from 'ant-design-vue';
-  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { random } from 'lodash-es';
-  import { buildUUID } from '/@/utils/uuid';
-  import dayjs from 'dayjs';
-  import { pushIfNotExist } from '/@/utils/common/compUtils';
-
-  const { createMessage } = useMessage();
-  const tableRef = ref<JVxeTableInstance>();
-  const loading = ref(false);
-  const disabled = ref(false);
-  const columns = ref<JVxeColumn[]>([
-    {
-      title: 'ID',
-      key: 'id',
-      type: JVxeTypes.hidden,
-    },
-    {
-      title: '不可编辑',
-      key: 'noEdit',
-      type: JVxeTypes.normal,
-      width: 180,
-      defaultValue: 'noEdit-new',
-    },
-    {
-      title: '单行文本',
-      key: 'input',
-      type: JVxeTypes.input,
-      width: 180,
-      defaultValue: '',
-      placeholder: '请输入${title}',
-      validateRules: [
-        {
-          required: true, // 必填
-          message: '请输入${title}', // 显示的文本
-        },
-        {
-          pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
-          message: '必须以字母开头，可包含数字、下划线、横杠',
-        },
-        {
-          unique: true,
-          message: '${title}不能重复',
-        },
-        {
-          handler({ cellValue, row, column }, callback, target) {
-            // cellValue 当前校验的值
-            // callback(flag, message) 方法必须执行且只能执行一次
-            //          flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
-            //          message = 提示的类型，默认使用配置的 message
-            // target 行编辑的实例对象
-            if (cellValue === 'abc') {
-              callback(false, '${title}不能是abc'); // false = 未通过校验
-            } else {
-              callback(true); // true = 通过验证
-            }
-          },
-          message: '${title}默认提示',
-        },
-      ],
-    },
-    {
-      title: '多行文本',
-      key: 'textarea',
-      type: JVxeTypes.textarea,
-      width: 200,
-    },
-    {
-      title: '数字',
-      key: 'number',
-      type: JVxeTypes.inputNumber,
-      width: 80,
-      defaultValue: 32,
-      // 【统计列】sum = 求和、average = 平均值
-      statistics: ['sum', 'average'],
-    },
-    {
-      title: '下拉框',
-      key: 'select',
-      type: JVxeTypes.select,
-      width: 180,
-      // 下拉选项
-      options: [
-        { title: 'String', value: 'string' },
-        { title: 'Integer', value: 'int' },
-        { title: 'Double', value: 'double' },
-        { title: 'Boolean', value: 'boolean' },
-      ],
-      // allowInput: true,
-      allowSearch: true,
-      placeholder: '请选择',
-    },
-    {
-      title: '下拉框_字典',
-      key: 'select_dict',
-      type: JVxeTypes.select,
-      width: 180,
-      options: [],
-      dictCode: 'sex',
-      placeholder: '请选择',
-    },
-    {
-      title: '下拉框_多选',
-      key: 'select_multiple',
-      type: JVxeTypes.selectMultiple,
-      width: 205,
-      options: [
-        { title: 'String', value: 'string' },
-        { title: 'Integer', value: 'int' },
-        { title: 'Double', value: 'double' },
-        { title: 'Boolean', value: 'boolean' },
-      ],
-      defaultValue: ['int', 'boolean'], // 多个默认项
-      // defaultValue: 'string,double,int', // 也可使用这种方式
-      placeholder: '多选',
-    },
-    {
-      title: '下拉框_搜索',
-      key: 'select_search',
-      type: JVxeTypes.selectSearch,
-      width: 180,
-      options: [
-        { title: 'String', value: 'string' },
-        { title: 'Integer', value: 'int' },
-        { title: 'Double', value: 'double' },
-        { title: 'Boolean', value: 'boolean' },
-      ],
-    },
-    {
-      title: '日期时间',
-      key: 'datetime',
-      type: JVxeTypes.datetime,
-      width: 200,
-      defaultValue: '2019-04-30 14:52:22',
-      placeholder: '请选择',
-    },
-    {
-      title: '时间',
-      key: 'time',
-      type: JVxeTypes.time,
-      width: 200,
-      defaultValue: '14:52:22',
-      placeholder: '请选择',
-    },
-    {
-      title: '复选框',
-      key: 'checkbox',
-      type: JVxeTypes.checkbox,
-      width: 100,
-      customValue: ['Y', 'N'], // true ,false
-      defaultChecked: false,
-    },
-    {
-      title: '操作',
-      key: 'action',
-      type: JVxeTypes.slot,
-      fixed: 'right',
-      minWidth: 100,
-      align: 'center',
-      slotName: 'myAction',
-    },
-  ]);
-  const dataSource = ref<any[]>([]);
-
-  /* 随机生成数据 */
-  function randomPage(current, pageSize, isLoading = false) {
-    if (isLoading) {
-      loading.value = true;
-    }
-
-    let randomDatetime = () => {
-      let time = random(1000, 9999999999999);
-      return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
-    };
-
-    let limit = (current - 1) * pageSize;
-
-    let options = ['string', 'int', 'double', 'boolean'];
-
-    let begin = Date.now();
-    let values: any[] = [];
-    for (let i = 0; i < pageSize; i++) {
-      values.push({
-        id: buildUUID(),
-        noEdit: `noEdit-${limit + i + 1}`,
-        input: `text-${limit + i + 1}`,
-        textarea: `textarea-${limit + i + 1}`,
-        number: random(0, 233),
-        select: options[random(0, 3)],
-        select_dict: random(1, 2).toString(),
-        select_multiple: (() => {
-          let length = random(1, 4);
-          let arr = [];
-          for (let j = 0; j < length; j++) {
-            pushIfNotExist(arr, options[random(0, 3)]);
-          }
-          return arr.join(',');
-        })(),
-        select_search: options[random(0, 3)],
-        datetime: randomDatetime(),
-        checkbox: ['Y', 'N'][random(0, 1)],
-      });
-    }
-
-    dataSource.value = values;
-    let end = Date.now();
-    let diff = end - begin;
-
-    if (isLoading && diff < pageSize) {
-      setTimeout(() => (loading.value = false), pageSize - diff);
-    }
-  }
-
-  randomPage(0, 20, true);
-
-  function onLookRow(props) {
-    createMessage.success('请在控制台查看输出');
-    // 参数介绍：
-    // props.value          当前单元格的值
-    // props.row            当前行的数据
-    // props.rowId          当前行ID
-    // props.rowIndex       当前行下标
-    // props.column         当前列的配置
-    // props.columnIndex    当前列下标
-    // props.$table         vxe实例，可以调用vxe内置方法
-    // props.target         JVXE实例，可以调用JVXE内置方法
-    // props.caseId         JVXE实例唯一ID
-    // props.scrolling      是否正在滚动
-    // props.triggerChange  触发change事件，用于更改slot的值
-    console.log('查看: ', { props });
-  }
-
-  async function onDeleteRow(props) {
-    // 调用删除方法
-    const res = await tableRef.value?.removeRows(props.row);
-    if (res && res.rows.length > 0) {
-      createMessage.success('删除成功');
-    }
-  }
-
-  function handleValueChange(event) {
-    console.log('handleValueChange.event: ', event);
-  }
-
-  // update-begin--author:liaozhiyang---date:20230817---for：【issues/636】JVxeTable加上blur事件
-  function handleBlur(event){
-    console.log("blur",event);
-  }
-  // update-end--author:liaozhiyang---date:20230817---for：【issues/636】JVxeTable加上blur事件
-  /** 表单验证 */
-  function handleTableCheck() {
-    tableRef.value!.validateTable().then((errMap) => {
-      if (errMap) {
-        console.log('表单验证未通过：', { errMap });
-        createMessage.error('验证未通过，请在控制台查看详细');
-      } else {
-        createMessage.success('验证通过');
-      }
-    });
-  }
-
-  /** 获取值，忽略表单验证 */
-  function onGetData() {
-    const values = tableRef.value!.getTableData();
-    console.log('获取值:', { values });
-    createMessage.success('获取值成功，请看控制台输出');
-  }
-
-  /** 模拟加载1000条数据 */
-  function handleTableSet() {
-    randomPage(1, 1000, true);
-  }
-
-  function onDelFirst() {
-    const xTable = tableRef.value!.getXTable();
-    const record = xTable.getTableData().fullData[0];
-    tableRef.value!.removeRows(record);
-  }
-
-  function onDelSel() {
-    const xTable = tableRef.value!.getXTable();
-    xTable.removeCheckboxRow();
-  }
-
-  function onGetSelData() {
-    createMessage.info('请看控制台');
-    console.log(tableRef.value!.getSelectionData());
-  }
-
-  function onClearSel() {
-    tableRef.value!.clearSelection();
-  }
-
-  function onToggleLoading() {
-    loading.value = !loading.value;
-  }
-
-  function onToggleDisabled() {
-    disabled.value = !disabled.value;
-  }
-
-  function doDelete(deleteRows) {
-    return new Promise((resolve) => {
-      let rowId = deleteRows.filter((row) => row.id);
-      console.log('删除 rowId: ', rowId);
-      setTimeout(() => resolve(true), 1500);
-    });
-  }
-
-  /** 异步删除示例 */
-  async function onJVxeRemove(event) {
-    const hideLoading = createMessage.loading('删除中…', 0);
-    try {
-      // 1. 向后台传递 event.deleteRows 以删除
-      let flag = await doDelete(event.deleteRows);
-      if (flag) {
-        // 注：如果启用了表格的 loading 状态，则必须先停止再删除，否则会导致无法从表格上删除数据
-        // 2. 调用 event.confirmRemove 方法确认删除成功
-        // await tableRef.value!.removeSelection();
-        await event.confirmRemove()
-        createMessage.success('删除成功！');
-      } else {
-        // 3. 若删除失败，不调用 event.confirmRemove() 方法就不会删除数据
-        createMessage.warn('删除失败！');
-      }
-    } finally {
-      hideLoading();
-    }
-  }
-</script>

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo2.vue

@@ -1,179 +0,0 @@
-<template>
-  <JVxeTable
-    ref="tableRef"
-    toolbar
-    row-number
-    row-selection
-    keep-source
-    :height="492"
-    :loading="loading"
-    :dataSource="dataSource"
-    :columns="columns"
-    :pagination="pagination"
-    style="margin-top: 8px"
-    @pageChange="handlePageChange"
-  >
-    <template #toolbarSuffix>
-      <a-button @click="handleTableGet">获取数据</a-button>
-    </template>
-  </JVxeTable>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  // noinspection ES6UnusedImports
-  import { Popconfirm } from 'ant-design-vue';
-  import { JVxeColumn, JVxeTableInstance, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { random } from 'lodash-es';
-  import { buildUUID } from '/@/utils/uuid';
-  import { uploadUrl } from '/@/api/common/api';
-
-  const tableRef = ref<JVxeTableInstance>();
-  const { createMessage } = useMessage();
-  const loading = ref(false);
-  const columns = ref<JVxeColumn[]>([
-    {
-      title: '下拉框_字典表搜索',
-      key: 'select_dict_search',
-      type: JVxeTypes.selectDictSearch,
-      width: 200,
-      async: true, // 异步搜索，默认为 true
-      // 字典表配置信息：数据库表名,显示字段名,存储字段名
-      dict: 'sys_user,realname,username',
-      tipsContent: '请输入查询条件',
-    },
-    {
-      title: 'JPopup',
-      key: 'popup',
-      type: JVxeTypes.popup,
-      width: 180,
-      popupCode: 'demo',
-      // field: 'name,sex,age',
-      // orgFields: 'name,sex,age',
-      // destFields: 'popup,popup_sex,popup_age',
-      fieldConfig: [
-        { source: 'name', target: 'popup' },
-        { source: 'sex', target: 'popup_sex' },
-        { source: 'age', target: 'popup_age' },
-      ],
-    },
-    {
-      title: 'JP-性别',
-      key: 'popup_sex',
-      type: JVxeTypes.select,
-      dictCode: 'sex',
-      disabled: true,
-      width: 100,
-    },
-    {
-      title: 'JP-年龄',
-      key: 'popup_age',
-      type: JVxeTypes.normal,
-      width: 80,
-    },
-    {
-      title: '用户选择',
-      key: 'userSelect',
-      type: JVxeTypes.userSelect,
-      width: 240,
-    },
-    {
-      title: '部门选择',
-      key: 'departSelect',
-      type: JVxeTypes.departSelect,
-      width: 240,
-    },
-    {
-      title: '单选',
-      key: 'radio',
-      type: JVxeTypes.radio,
-      width: 130,
-      options: [
-        { text: '男', value: '1' },
-        { text: '女', value: '2' },
-      ],
-      // 允许清除选择（再点一次取消选择）
-      allowClear: false,
-    },
-    {
-      title: '上传',
-      key: 'upload',
-      type: JVxeTypes.upload,
-      width: 180,
-      btnText: '点击上传',
-      token: true,
-      responseName: 'message',
-      action: uploadUrl,
-    },
-    {
-      title: '图片上传',
-      key: 'image',
-      type: JVxeTypes.image,
-      width: 180,
-      maxCount: 6,
-    },
-    {
-      title: '文件上传',
-      key: 'file',
-      type: JVxeTypes.file,
-      width: 180,
-      maxCount: 2,
-    },
-    {
-      title: '进度条',
-      key: 'progress',
-      type: JVxeTypes.progress,
-      minWidth: 320,
-    },
-  ]);
-  const dataSource = ref<any[]>([]);
-  const pagination = reactive({
-    current: 1,
-    pageSize: 10,
-    pageSizeOptions: ['10', '20', '30', '100', '200'],
-    total: 1000,
-  });
-
-  randomPage(pagination.current, pagination.pageSize, true);
-
-  // 当分页参数变化时触发的事件
-  function handlePageChange(event) {
-    // 重新赋值
-    pagination.current = event.current;
-    pagination.pageSize = event.pageSize;
-    // 查询数据
-    randomPage(event.current, event.pageSize, true);
-  }
-
-  /** 获取值，忽略表单验证 */
-  function handleTableGet() {
-    const values = tableRef.value!.getTableData();
-    console.log('获取值:', { values });
-    createMessage.success('获取值成功，请看控制台输出');
-  }
-
-  /* 随机生成分页数据 */
-  function randomPage(current, pageSize, $loading = false) {
-    if ($loading) {
-      loading.value = true;
-    }
-    let begin = Date.now();
-    let values: any[] = [];
-    for (let i = 0; i < pageSize; i++) {
-      let radio = random(0, 2);
-      values.push({
-        id: buildUUID(),
-        select_dict_search: ['admin', '', 'jeecg'][random(0, 2)],
-        progress: random(0, 100),
-        radio: radio ? radio.toString() : null,
-      });
-    }
-    dataSource.value = values;
-    let end = Date.now();
-    let diff = end - begin;
-    if ($loading && diff < pageSize) {
-      setTimeout(() => (loading.value = false), pageSize - diff);
-    }
-  }
-</script>

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo3.vue

@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <ol style="border: 1px solid #cccccc; width: 600px; padding: 8px">
-      <li>1. 开启 dragSort 属性之后即可实现上下拖拽排序。</li>
-      <li>2. 使用 sortKey 属性可以自定义排序保存的 key，默认为 orderNum。</li>
-      <li>3. 使用 sortBegin 属性可以自定义排序的起始值，默认为 0。</li>
-      <li>4. sortKey 定义的字段不需要定义在 columns 中也能正常获取到值。</li>
-      <li>5. 当存在 fixed 列时，拖拽排序将会失效，仅能上下排序。</li>
-    </ol>
-
-    <p> 以下示例开启了拖拽排序，排序值保存字段为 sortNum，排序起始值为 3<br /> </p>
-
-    <JVxeTable
-      ref="tableRef1"
-      toolbar
-      dragSort
-      sortKey="sortNum"
-      :sortBegin="3"
-      rowSelection
-      :maxHeight="580"
-      :columns="table1.columns"
-      :dataSource="table1.data"
-    >
-      <template #toolbarSuffix>
-        <a-button @click="onGetData1">获取数据</a-button>
-      </template>
-    </JVxeTable>
-
-    <br />
-    <p>以下 fixed 表格不支持拖拽排序，仅支持点击上下排序</p>
-
-    <JVxeTable ref="tableRef2" toolbar dragSort rowSelection :maxHeight="580" :columns="table2.columns" :dataSource="table2.data">
-      <template #toolbarSuffix>
-        <a-button @click="onGetData2">获取数据</a-button>
-      </template>
-    </JVxeTable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const tableRef1 = ref<JVxeTableInstance>();
-  const tableRef2 = ref<JVxeTableInstance>();
-  const table1 = reactive({
-    columns: [
-      {
-        title: 'ID',
-        key: 'id',
-        width: 120,
-        type: JVxeTypes.normal,
-      },
-      {
-        title: '姓名',
-        key: 'name',
-        width: 240,
-        type: JVxeTypes.input,
-        defaultValue: 'new name',
-      },
-      {
-        title: '字段长度',
-        key: 'dbLength',
-        width: 240,
-        type: JVxeTypes.inputNumber,
-        defaultValue: 32,
-      },
-      {
-        title: 'sortNum',
-        key: 'sortNum',
-        width: 120,
-        type: JVxeTypes.normal,
-      },
-    ] as JVxeColumn[],
-    data: [
-      { id: 'uuid-0001', name: '张三', dbLength: 123 },
-      { id: 'uuid-0002', name: '李四', dbLength: 777 },
-      { id: 'uuid-0003', name: '王五', dbLength: 666 },
-      { id: 'uuid-0004', name: '赵六', dbLength: 233 },
-    ],
-  });
-
-  const table2 = reactive({
-    columns: [
-      {
-        title: 'ID',
-        key: 'id',
-        width: 320,
-        fixed: 'left',
-        type: JVxeTypes.normal,
-      },
-      {
-        title: '姓名',
-        key: 'name',
-        width: 720,
-        type: JVxeTypes.input,
-        defaultValue: 'new name',
-      },
-      {
-        title: '字段长度',
-        key: 'dbLength',
-        width: 720,
-        type: JVxeTypes.inputNumber,
-        defaultValue: 32,
-      },
-    ] as JVxeColumn[],
-    data: [
-      { id: 'uuid-0001', name: '张三', dbLength: 123 },
-      { id: 'uuid-0002', name: '李四', dbLength: 777 },
-      { id: 'uuid-0003', name: '王五', dbLength: 666 },
-      { id: 'uuid-0004', name: '赵六', dbLength: 233 },
-    ],
-  });
-
-  const { createMessage } = useMessage();
-
-  function onGetData1() {
-    createMessage.info('请看控制台');
-    console.log(tableRef1.value!.getTableData());
-  }
-
-  function onGetData2() {
-    createMessage.info('请看控制台');
-    console.log(tableRef2.value!.getTableData());
-  }
-</script>

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo4.vue

@@ -1,153 +0,0 @@
-<template>
-  <JVxeTable
-    ref="vTable"
-    toolbar
-    rowNumber
-    rowSelection
-    :maxHeight="580"
-    :dataSource="dataSource"
-    :columns="columns"
-    :linkageConfig="linkageConfig"
-  />
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeTypes, JVxeColumn, JVxeLinkageConfig } from '/@/components/jeecg/JVxeTable/types';
-
-  // 联动配置
-  const linkageConfig = ref<JVxeLinkageConfig[]>([
-    { requestData: requestMockData, key: 's1' },
-    // 可配置多个联动
-    { requestData: requestMenu, key: 'menu1' },
-  ]);
-
-  const columns = ref<JVxeColumn[]>([
-    {
-      title: '性别',
-      key: 'sex',
-      type: JVxeTypes.select,
-      dictCode: 'sex',
-      width: '180px',
-      placeholder: '请选择${title}',
-    },
-    {
-      title: '省/直辖市/自治区',
-      key: 's1',
-      type: JVxeTypes.select,
-      width: '180px',
-      placeholder: '请选择${title}',
-      // 联动字段（即下一级的字段）
-      linkageKey: 's2',
-    },
-    {
-      title: '市',
-      key: 's2',
-      type: JVxeTypes.select,
-      width: '180px',
-      placeholder: '请选择${title}',
-      // 联动字段（即下一级的字段）
-      linkageKey: 's3',
-    },
-    {
-      title: '县/区',
-      key: 's3',
-      type: JVxeTypes.select,
-      width: '180px',
-      options: [],
-      placeholder: '请选择${title}',
-    },
-    {
-      title: '一级菜单',
-      key: 'menu1',
-      type: JVxeTypes.select,
-      width: '180px',
-      placeholder: '请选择${title}',
-      // 联动字段（即下一级的字段）
-      linkageKey: 'menu2',
-    },
-    {
-      title: '二级菜单',
-      key: 'menu2',
-      type: JVxeTypes.select,
-      width: '180px',
-      placeholder: '请选择${title}',
-      // 联动字段（即下一级的字段）
-      linkageKey: 'menu3',
-    },
-    {
-      title: '三级菜单',
-      key: 'menu3',
-      type: JVxeTypes.select,
-      width: '180px',
-      placeholder: '请选择${title}',
-    },
-  ]);
-
-  const dataSource = ref([
-    { sex: '1', s1: '110000', s2: '110100', s3: '110101' },
-    { sex: '2', s1: '130000', s2: '130300', s3: '130303' },
-  ]);
-
-  // 模拟数据
-  const mockData = [
-    { text: '北京市', value: '110000', parent: '' },
-    { text: '天津市', value: '120000', parent: '' },
-    { text: '河北省', value: '130000', parent: '' },
-    { text: '上海市', value: '310000', parent: '' },
-
-    { text: '北京市', value: '110100', parent: '110000' },
-    { text: '天津市市', value: '120100', parent: '120000' },
-    { text: '石家庄市', value: '130100', parent: '130000' },
-    { text: '唐山市', value: '130200', parent: '130000' },
-    { text: '秦皇岛市', value: '130300', parent: '130000' },
-    { text: '上海市', value: '310100', parent: '310000' },
-
-    { text: '东城区', value: '110101', parent: '110100' },
-    { text: '西城区', value: '110102', parent: '110100' },
-    { text: '朝阳区', value: '110105', parent: '110100' },
-    { text: '和平区', value: '120101', parent: '120100' },
-    { text: '河东区', value: '120102', parent: '120100' },
-    { text: '河西区', value: '120103', parent: '120100' },
-    { text: '黄浦区', value: '310101', parent: '310100' },
-    { text: '徐汇区', value: '310104', parent: '310100' },
-    { text: '长宁区', value: '310105', parent: '310100' },
-    { text: '长安区', value: '130102', parent: '130100' },
-    { text: '桥西区', value: '130104', parent: '130100' },
-    { text: '新华区', value: '130105', parent: '130100' },
-    { text: '路南区', value: '130202', parent: '130200' },
-    { text: '路北区', value: '130203', parent: '130200' },
-    { text: '古冶区', value: '130204', parent: '130200' },
-    { text: '海港区', value: '130302', parent: '130300' },
-    { text: '山海关区', value: '130303', parent: '130300' },
-    { text: '北戴河区', value: '130304', parent: '130300' },
-  ];
-
-  /** 模拟从后台查询数据 */
-  function requestMockData(parent) {
-    return new Promise((resolve) => {
-      let data = mockData.filter((i) => i.parent === parent);
-      setTimeout(() => resolve(data), 500);
-    });
-  }
-
-  /** 查询后台真实数据 */
-  async function requestMenu(parent) {
-    let result;
-    // 如果parent为空，则查询第一级菜单
-    if (parent === '') {
-      result = await defHttp.get({
-        url: '/sys/permissionNew/getSystemMenuList',
-        params: {},
-      });
-    } else {
-      result = await defHttp.get({
-        url: '/sys/permissionNew/getSystemSubmenu',
-        params: { parentId: parent },
-      });
-    }
-    // 返回的数据里必须包含 value 和 text 字段
-    return result.map((item) => ({ value: item.id, text: item.name }));
-  }
-</script>

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo5.vue

@@ -1,129 +0,0 @@
-<template>
-  <div>
-    <b>键盘操作快捷键：</b>
-    <div style="border: 1px solid #cccccc; padding: 8px; width: 740px">
-      <pre>
-             F2 | 如果存在，激活单元格为编辑状态
-            Esc | 如果存在，取消单元格编辑状态
-              ↑ | 如果存在，则移动到上面的单元格
-              ↓ | 如果存在，则移动到下面的单元格
-              ← | 如果存在，则移动到左边的单元格
-              → | 如果存在，则移动到右边的单元格
-            Tab | 如果存在，则移动到右边单元格；如果移动到最后一列，则从下一行开始移到，以此循环
-    Shift + Tab | 如果存在，则移动到左边单元格，如果移动到第一列，则从上一行开始移到，以此循环
-          Enter | 如果存在，取消单元格编辑并移动到下面的单元格
-  Shift + Enter | 如果存在，取消单元格编辑并移动到上面的单元格</pre
-      >
-    </div>
-
-    <JVxeTable ref="tableRef" stripe toolbar rowNumber rowSelection keyboardEdit :columns="columns" :dataSource="dataSource"> </JVxeTable>
-  </div>
-</template>
-<script lang="ts">
-  import { ref, onMounted, nextTick, defineComponent } from 'vue';
-  import { Popconfirm } from 'ant-design-vue';
-  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
-
-  export default defineComponent({
-    name: 'JVxeDemo5',
-    components: { [Popconfirm.name]: Popconfirm },
-    setup() {
-      const tableRef = ref<JVxeTableInstance>();
-      const columns = ref<JVxeColumn[]>([
-        {
-          title: '单行文本',
-          key: 'input',
-          type: JVxeTypes.input,
-          width: 220,
-          defaultValue: '',
-          placeholder: '请输入${title}',
-        },
-        {
-          title: '多行文本',
-          key: 'textarea',
-          type: JVxeTypes.textarea,
-          width: 240,
-        },
-        {
-          title: '数字',
-          key: 'number',
-          type: JVxeTypes.inputNumber,
-          width: 120,
-          defaultValue: 32,
-        },
-        {
-          title: '日期时间',
-          key: 'datetime',
-          type: JVxeTypes.datetime,
-          width: 240,
-          defaultValue: '2019-04-30 14:51:22',
-          placeholder: '请选择',
-        },
-        {
-          title: '时间',
-          key: 'time',
-          type: JVxeTypes.time,
-          width: 220,
-          defaultValue: '14:52:22',
-          placeholder: '请选择',
-        },
-        {
-          title: '下拉框',
-          key: 'select',
-          type: JVxeTypes.select,
-          width: 220,
-          // 下拉选项
-          options: [
-            { title: 'String', value: 'string' },
-            { title: 'Integer', value: 'int' },
-            { title: 'Double', value: 'double' },
-            { title: 'Boolean', value: 'boolean' },
-          ],
-          // allowInput: true,
-          allowSearch: true,
-          placeholder: '请选择',
-        },
-        {
-          title: '复选框',
-          key: 'checkbox',
-          type: JVxeTypes.checkbox,
-          // width: 100,
-          customValue: ['Y', 'N'], // true ,false
-          defaultChecked: false,
-        },
-      ]);
-      const dataSource = ref([]);
-
-      function handleView(props) {
-        // 参数介绍：
-        // props.value          当前单元格的值
-        // props.row            当前行的数据
-        // props.rowId          当前行ID
-        // props.rowIndex       当前行下标
-        // props.column         当前列的配置
-        // props.columnIndex    当前列下标
-        // props.$table         vxe-table实例，可以调用vxe-table内置方法
-        // props.scrolling      是否正在滚动
-        // props.reloadEffect   是否开启了数据刷新特效
-        // props.triggerChange  触发change事件，用于更改slot的值
-        console.log('props: ', props);
-      }
-
-      function handleDelete({ row }) {
-        // 使用实例：删除当前操作的行
-        tableRef.value?.removeRows(row);
-      }
-
-      onMounted(async () => {
-        console.log(tableRef.value);
-        await nextTick();
-        // 默认添加五行数据
-        tableRef.value!.addRows([{ input: 'input_1' }, { input: 'input_2' }, { input: 'input_3' }, { input: 'input_4' }, { input: 'input_5' }], {
-          setActive: false,
-        });
-      });
-
-      return { tableRef, columns, dataSource, handleView, handleDelete };
-    },
-  });
-</script>

src/views/demo/jeecg/JVxeTableDemo/func-demo/JSBCDemo.vue

@@ -1,224 +0,0 @@
-<template>
-  <a-card title="即时保存示例" :bordered="false">
-    <!--
-      【即时保存大体思路】：
-      1. JVxeTable 上必须加 keep-source 属性
-      2. 监听 edit-closed事件，这个事件是在编辑完成后触发
-      3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
-    -->
-    <JVxeTable
-      toolbar
-      :toolbarConfig="toolbarConfig"
-      rowNumber
-      rowSelection
-      keepSource
-      asyncRemove
-      :height="340"
-      :loading="loading"
-      :columns="columns"
-      :dataSource="dataSource"
-      :pagination="pagination"
-      @save="handleTableSave"
-      @removed="handleTableRemove"
-      @edit-closed="handleEditClosed"
-      @pageChange="handlePageChange"
-      @selectRowChange="handleSelectRowChange"
-    />
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  // 即时保存示例
-  import { reactive, ref } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const { createMessage } = useMessage();
-  // 工具栏的按钮配置
-  const toolbarConfig = reactive({
-    // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
-    btn: ['add', 'save', 'remove', 'clearSelection'],
-  });
-  // 是否正在加载
-  const loading = ref(false);
-  // 分页器参数
-  const pagination = reactive({
-    // 当前页码
-    current: 1,
-    // 每页的条数
-    pageSize: 200,
-    // 可切换的条数
-    pageSizeOptions: ['10', '20', '30', '100', '200'],
-    // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
-    total: 0,
-  });
-  // 选择的行
-  const selectedRows = ref<Recordable[]>([]);
-  // 数据源，控制表格的数据
-  const dataSource = ref<Recordable[]>([]);
-  // 列配置，控制表格显示的列
-  const columns = ref<JVxeColumn[]>([
-    { key: 'num', title: '序号', width: 80, type: JVxeTypes.normal },
-    {
-      // 字段key，跟后台数据的字段名匹配
-      key: 'ship_name',
-      // 列的标题
-      title: '船名',
-      // 列的宽度
-      width: 180,
-      // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-      type: JVxeTypes.input,
-    },
-    { key: 'call', title: '呼叫', width: 80, type: JVxeTypes.input },
-    { key: 'len', title: '长', width: 80, type: JVxeTypes.input },
-    { key: 'ton', title: '吨', width: 120, defaultValue: 233, type: JVxeTypes.input },
-    { key: 'payer', title: '付款方', width: 120, defaultValue: '张三', type: JVxeTypes.input },
-    { key: 'count', title: '数', width: 40, type: JVxeTypes.normal },
-    {
-      key: 'company',
-      title: '公司',
-      // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
-      // 如果要做占满表格的列可以这么写
-      minWidth: 180,
-      type: JVxeTypes.input,
-    },
-    { key: 'trend', title: '动向', width: 120, type: JVxeTypes.input },
-  ]);
-
-  // 查询url地址
-  enum Api {
-    getData = '/mock/vxe/getData',
-    // 模拟保存单行数据（即时保存）
-    saveRow = '/mock/vxe/immediateSaveRow',
-    // 模拟保存整个表格的数据
-    saveAll = '/mock/vxe/immediateSaveAll',
-  }
-
-  loadData();
-
-  // 加载数据
-  async function loadData() {
-    loading.value = true;
-    // 调用查询数据接口
-    await defHttp
-      .get({
-        // 请求地址
-        url: Api.getData,
-        // 封装查询条件
-        params: {
-          pageNo: pagination.current,
-          pageSize: pagination.pageSize,
-        },
-      })
-      .then((result) => {
-        // 后台查询回来的 total，数据总数量
-        pagination.total = result.total;
-        // 将查询的数据赋值给 dataSource
-        dataSource.value = result.records;
-        // 重置选择
-        selectedRows.value = [];
-      })
-      .finally(() => {
-        // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-        loading.value = false;
-      });
-  }
-
-  // 【整体保存】点击保存按钮时触发的事件
-  function handleTableSave({ $table, target }) {
-    // 校验整个表格
-    $table.validate().then((errMap) => {
-      // 校验通过
-      if (!errMap) {
-        // 获取所有数据
-        let tableData = target.getTableData();
-        console.log('当前保存的数据是：', tableData);
-        // 获取新增的数据
-        let newData = target.getNewData();
-        console.log('-- 新增的数据：', newData);
-        // 获取删除的数据
-        let deleteData = target.getDeleteData();
-        console.log('-- 删除的数据：', deleteData);
-        // 【模拟保存】
-        loading.value = true;
-        defHttp
-          .post({
-            url: Api.saveAll,
-            params: tableData,
-          })
-          .then(() => {
-            createMessage.success(`保存成功！`);
-          })
-          .finally(() => {
-            loading.value = false;
-          });
-      }
-    });
-  }
-
-  // 触发单元格删除事件
-  function handleTableRemove(event) {
-    // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
-    console.log('待删除的数据: ', event.deleteRows);
-    // 也可以只传ID，因为可以根据ID删除
-    let deleteIds = event.deleteRows.map((row) => row.id);
-    console.log('待删除的数据ids: ', deleteIds);
-
-    // 模拟请求后台删除
-    loading.value = true;
-    window.setTimeout(() => {
-      loading.value = false;
-      createMessage.success('删除成功');
-      // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
-      event.confirmRemove();
-    }, 1000);
-  }
-
-  // 单元格编辑完成之后触发的事件
-  function handleEditClosed(event) {
-    let { $table, row, column } = event;
-    let field = column.property;
-    // 判断单元格值是否被修改
-    if ($table.isUpdateByRow(row, field)) {
-      // 校验当前行
-      $table.validate(row).then((errMap) => {
-        // 校验通过
-        if (!errMap) {
-          // 【模拟保存】
-          let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
-          console.log('即时保存数据：', row);
-          defHttp
-            .put({
-              url: Api.saveRow,
-              params: row,
-            })
-            .then((res) => {
-              createMessage.success(`"${column.title}"保存成功！`);
-              // 局部更新单元格为已保存状态
-              $table.reloadRow(row, null, field);
-            })
-            .finally(() => {
-              hideLoading();
-            });
-        }
-      });
-    }
-  }
-
-  // 当分页参数变化时触发的事件
-  function handlePageChange(event) {
-    // 重新赋值
-    pagination.current = event.current;
-    pagination.pageSize = event.pageSize;
-    // 查询数据
-    loadData();
-  }
-
-  // 当选择的行变化时触发的事件
-  function handleSelectRowChange(event) {
-    selectedRows.value = event.selectedRows;
-  }
-</script>
-
-<style scoped></style>

src/views/demo/jeecg/JVxeTableDemo/func-demo/PopupSubTable.vue

@@ -1,244 +0,0 @@
-<template>
-  <a-card title="弹出子表示例" :bordered="false">
-    <!--
-      【弹出子表大体思路】
-      1. 必须要有 clickRowShowSubForm 属性，如果该属性设为false，那么就不会弹出子表
-      2. 必须要有 subForm 插槽，用于规定弹出子表的内容
-      3. highlightCurrentRow 属性可有可无，如果有则点击一行的时候，该行会背景色会常亮
-    -->
-    <!--
-      【弹出详细信息大体思路】
-      1. 必须要有 clickRowShowMainForm 属性，如果该属性设为false，那么就不会弹出详细信息
-      2. 必须要有 mainForm 插槽，用于规定弹出的内容
-    -->
-    <JVxeTable
-      toolbar
-      rowNumber
-      rowSelection
-      highlightCurrentRow
-      clickRowShowSubForm
-      clickRowShowMainForm
-      :height="750"
-      :loading="loading"
-      :columns="columns"
-      :dataSource="dataSource"
-      @detailsConfirm="handleDetailsConfirm"
-    >
-      <!-- 主表单 -->
-      <template #mainForm="{ row }">
-        <template v-if="row">
-          <a-form ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-row :gutter="8">
-              <a-col :span="8">
-                <a-form-item label="ID" name="id">
-                  <a-input v-model:value="row.id" disabled />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="序号" name="num">
-                  <a-input v-model:value="row.num" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="船名" name="ship_name">
-                  <a-input v-model:value="row.ship_name" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="呼叫" name="call">
-                  <a-input v-model:value="row.call" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="长" name="len">
-                  <a-input v-model:value="row.len" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="吨" name="ton">
-                  <a-input v-model:value="row.ton" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="付款方" name="payer">
-                  <a-input v-model:value="row.payer" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="数" name="count">
-                  <a-input v-model:value="row.count" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="公司" name="company">
-                  <a-input v-model:value="row.company" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item label="动向" name="trend">
-                  <a-input v-model:value="row.trend" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </template>
-      </template>
-
-      <!-- 子表单 -->
-      <template #subForm="{ row }">
-        <template v-if="loadSubData(row)">
-          <JVxeTable
-            ref="subFormTable"
-            height="auto"
-            :max-height="350"
-            :loading="subTable.loading"
-            :columns="subTable.columns"
-            :dataSource="subTable.dataSource"
-          />
-        </template>
-      </template>
-    </JVxeTable>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  // 弹出子表示例
-  import { reactive, ref } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const { createMessage } = useMessage();
-  const loading = ref(false);
-  const dataSource = ref([]);
-  const columns = ref<JVxeColumn[]>([
-    { key: 'num', title: '序号', width: '80px' },
-    { key: 'ship_name', title: '船名', width: '180px', type: JVxeTypes.input },
-    { key: 'call', title: '呼叫', width: '80px' },
-    { key: 'len', title: '长', width: '80px' },
-    { key: 'ton', title: '吨', width: '120px' },
-    { key: 'payer', title: '付款方', width: '120px' },
-    { key: 'count', title: '数', width: '40px' },
-    {
-      key: 'company',
-      title: '公司',
-      minWidth: '180px',
-      // 是否点击显示详细信息
-      // 只有当前单元格不能编辑的时候才能生效
-      // 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
-      showDetails: true,
-    },
-    { key: 'trend', title: '动向', width: '120px' },
-  ]);
-  const selectedRows = ref([]);
-  // 子表的信息
-  const subTable = reactive({
-    currentRowId: null,
-    loading: false,
-    pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
-    selectedRows: [],
-    dataSource: [],
-    columns: [
-      { key: 'dd_num', title: '调度序号', width: '120px' },
-      { key: 'tug', title: '拖轮', width: '180px', type: JVxeTypes.input },
-      { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVxeTypes.input },
-      { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVxeTypes.input },
-      { key: 'type', title: '船舶分类', width: '120px', type: JVxeTypes.input },
-      { key: 'port_area', title: '所属港区', minWidth: '120px', type: JVxeTypes.input },
-    ] as JVxeColumn[],
-  });
-
-  // form表单 col
-  const labelCol = reactive({ span: 4 });
-  const wrapperCol = reactive({ span: 20 });
-  const rules = reactive({
-    num: [{ required: true, message: '必须输入序号' }],
-  });
-
-  // 查询url地址
-  enum Api {
-    getData = '/mock/vxe/getData',
-  }
-
-  loadData();
-
-  // 加载数据
-  function loadData() {
-    // 封装查询条件
-    // 调用查询数据接口
-    loading.value = true;
-    defHttp
-      .get({
-        url: Api.getData,
-        params: {
-          pageNo: 1,
-          pageSize: 30,
-        },
-      })
-      .then((result) => {
-        // 将查询的数据赋值给 dataSource
-        dataSource.value = result.records;
-        // 重置选择
-        selectedRows.value = [];
-      })
-      .finally(() => {
-        // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-        loading.value = false;
-      });
-  }
-
-  // 查询子表数据
-  function loadSubData(row) {
-    if (row) {
-      // 这里一定要做限制，限制不能重复查询，否者会出现死循环
-      if (subTable.currentRowId === row.id) {
-        return true;
-      }
-      subTable.currentRowId = row.id;
-      subTable.loading = true;
-      defHttp
-        .get({
-          url: Api.getData,
-          params: {
-            pageNo: 1,
-            pageSize: 30,
-            parentId: row.id,
-          },
-        })
-        .then((result) => {
-          // 将查询的数据赋值给 dataSource
-          subTable.dataSource = result.records;
-        })
-        .finally(() => {
-          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-          subTable.loading = false;
-        });
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  // 详细信息里点了确认按钮
-  function handleDetailsConfirm({ row, $table, callback }) {
-    console.log('保存的数据：', row);
-    // 校验当前行
-    $table.validate(row).then((errMap) => {
-      // 校验通过
-      if (!errMap) {
-        // 校验子表，如果需要的话，可以操作下面这个对象：
-        callback(true);
-        loading.value = true;
-        setTimeout(() => {
-          loading.value = false;
-          createMessage.success('保存成功');
-        }, 1000);
-      } else {
-        callback(false);
-        createMessage.warn('校验失败');
-      }
-    });
-  }
-</script>
-
-<style scoped></style>

src/views/demo/jeecg/JVxeTableDemo/func-demo/SocketReload.vue

@@ -1,126 +0,0 @@
-<template>
-  <a-card title="无痕刷新示例" :bordered="false">
-    <div style="margin-bottom: 8px">
-      <span>启用数据变动特效：</span>
-      <a-switch v-model:checked="reloadEffect" />
-    </div>
-
-    <!--
-      【无痕刷新大体思路】：
-      1. 该功能依赖于【即时保存】功能，请先看即时保存示例
-      2. 必须要有 socket-reload 属性，且设为 true
-      3. 必须要有 socket-key 属性，该属性为当前表格的唯一标识，
-         系统会自动更新所有 socket-key 相同的表格
-      4. 在局部保存 edit-closed 事件中，
-         保存成功后调用 socketSendUpdateRow 方法，将当前 row 传递过去即可 （见第 102 行）
-    -->
-    <JVxeTable
-      ref="tableRef"
-      rowNumber
-      rowSelection
-      keepSource
-      socketReload
-      socketKey="demo-socket-reload"
-      :reloadEffect="reloadEffect"
-      :height="340"
-      :loading="loading"
-      :columns="columns"
-      :dataSource="dataSource"
-      @valueChange="onValueChange"
-      @edit-closed="handleEditClosed"
-    />
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  // 无痕刷新示例
-  import { ref } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeColumn, JVxeTableInstance, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const { createMessage } = useMessage();
-  const tableRef = ref<JVxeTableInstance>();
-  // 是否启用日历刷新效果
-  const reloadEffect = ref(true);
-  const loading = ref(false);
-  const dataSource = ref<Recordable[]>([]);
-  const columns = ref<JVxeColumn[]>([
-    { key: 'num', title: '序号', width: 80 },
-    { key: 'enabled', title: '启用', width: 80, type: JVxeTypes.checkbox },
-    { key: 'ship_name', title: '船名', width: 180, type: JVxeTypes.input },
-    { key: 'call', title: '呼叫', width: 80, type: JVxeTypes.input },
-    { key: 'len', title: '长', width: 80, type: JVxeTypes.input },
-    { key: 'ton', title: '吨', width: 120, type: JVxeTypes.input },
-    { key: 'payer', title: '付款方', width: 120, type: JVxeTypes.input },
-    { key: 'count', title: '数', width: 40 },
-    { key: 'company', title: '公司', minWidth: 180, type: JVxeTypes.input },
-    { key: 'trend', title: '动向', width: 120, type: JVxeTypes.input },
-  ]);
-
-  // 查询url地址
-  enum Api {
-    getData = '/mock/vxe/getData',
-  }
-
-  loadData();
-
-  // 加载数据
-  function loadData() {
-    loading.value = true;
-    defHttp
-      .get({
-        url: Api.getData,
-        params: { pageNo: 1, pageSize: 200 },
-      })
-      .then((result) => {
-        dataSource.value = result.records;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  }
-
-  /** 单元格值变化时触发的事件 */
-  function onValueChange(event) {
-    switch (event.type) {
-      // 所有不能触发 editClosed 事件的组件，都需要定义在这里，可以安装你自己的业务需求来完善此处的case
-      case JVxeTypes.radio:
-      case JVxeTypes.checkbox:
-        doSendUpdateRow(event);
-        break;
-    }
-  }
-
-  // 单元格编辑完成之后触发的事件
-  function handleEditClosed(event) {
-    doSendUpdateRow(event);
-  }
-
-  // 发送变更行请求
-  function doSendUpdateRow(event) {
-    let { $table, row, column } = event;
-    let field = column.property;
-    // 判断单元格值是否被修改
-    if ($table.isUpdateByRow(row, field)) {
-      // 校验当前行
-      $table.validate(row).then((errMap) => {
-        // 校验通过
-        if (!errMap) {
-          // 【模拟保存】（此处需要替换成真实的请求）
-          let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
-          setTimeout(() => {
-            hideLoading();
-            createMessage.success(`"${column.title}"保存成功！`);
-            // 局部更新单元格为已保存状态
-            $table.reloadRow(row, null, field);
-            // 发送更新消息
-            tableRef.value?.socketSendUpdateRow(row);
-          }, 555);
-        }
-      });
-    }
-  }
-</script>
-
-<style scoped></style>

src/views/demo/jeecg/JVxeTableDemo/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <PageWrapper>
-    <a-card :bordered="false">
-      <template #title>
-        <span> 
-          JVXETable是专门为大数据和各种ERP风格的复杂操作研发的的高性能表格组件，底层采用vxe-table组件，可以完美弥补antd默认table性能不足问题。 
-          <a href="https://help.jeecg.com/component/JVxeTable.html">API文档</a>
-        </span>
-      </template>
-    
-      <a-tabs defaultActiveKey="1">
-        <a-tab-pane tab="基础示例" key="1">
-          <JVxeDemo1 />
-        </a-tab-pane>
-        <a-tab-pane tab="高级示例" key="2">
-          <JVxeDemo2 />
-        </a-tab-pane>
-        <a-tab-pane tab="排序示例" key="3">
-          <JVxeDemo3 />
-        </a-tab-pane>
-        <a-tab-pane tab="联动示例" key="4">
-          <JVxeDemo4 />
-        </a-tab-pane>
-        <a-tab-pane tab="键盘操作" key="5">
-          <JVxeDemo5 />
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
-  </PageWrapper>
-</template>
-
-<script lang="ts" setup>
-  // noinspection ES6UnusedImports
-  import { PageWrapper } from '/@/components/Page';
-  import JVxeDemo1 from './JVxeDemo1.vue';
-  import JVxeDemo2 from './JVxeDemo2.vue';
-  import JVxeDemo3 from './JVxeDemo3.vue';
-  import JVxeDemo4 from './JVxeDemo4.vue';
-  import JVxeDemo5 from './JVxeDemo5.vue';
-</script>

src/views/demo/jeecg/JVxeTableDemo/layout-demo/ErpTemplate.vue

@@ -1,320 +0,0 @@
-<template>
-  <a-card :bordered="false">
-    <JVxeTable
-      toolbar
-      :toolbarConfig="toolbarConfig"
-      rowNumber
-      rowSelection
-      rowSelectionType="radio"
-      clickSelectRow
-      highlightCurrentRow
-      :height="tableHeight"
-      :loading="table1.loading"
-      :columns="table1.columns"
-      :dataSource="table1.dataSource"
-      :pagination="table1.pagination"
-      :expandConfig="expandConfig"
-      style="margin-bottom: 8px"
-      @pageChange="handleTable1PageChange"
-      @selectRowChange="handleTable1SelectRowChange"
-    ></JVxeTable>
-
-    <a-tabs v-show="subTabs.show" :class="{ 'sub-tabs': true, 'un-expand': !subTabs.expand }">
-      <a-tab-pane tab="子表1" key="1">
-        <JVxeTable
-          toolbar
-          row-number
-          row-selection
-          height="auto"
-          :maxHeight="350"
-          :loading="table2.loading"
-          :columns="table2.columns"
-          :dataSource="table2.dataSource"
-          :pagination="table2.pagination"
-          @pageChange="handleTable2PageChange"
-          @selectRowChange="handleTable2SelectRowChange"
-        />
-      </a-tab-pane>
-      <a-tab-pane tab="子表2" key="2">
-        <h1>这里是子表2</h1>
-        <h1>这里是子表2</h1>
-        <h1>这里是子表2</h1>
-        <h1>这里是子表2</h1>
-        <h1>这里是子表2</h1>
-        <h1>这里是子表2</h1>
-      </a-tab-pane>
-    </a-tabs>
-  </a-card>
-</template>
-
-<script>
-  import { h } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-  import { Button, Checkbox } from 'ant-design-vue';
-  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue';
-
-  export default {
-    name: 'ErpTemplate',
-    data() {
-      return {
-        toolbarConfig: {
-          // prefix 前缀；suffix 后缀
-          slot: ['prefix', 'suffix'],
-          // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
-          btn: ['add', 'remove', 'clearSelection'],
-        },
-
-        expandConfig: {
-          // 是否只能同时展开一行
-          accordion: true,
-        },
-
-        // 子表 tabs
-        subTabs: {
-          show: false,
-          // 是否展开
-          expand: true,
-          // 是否自动展开
-          autoExpand: true,
-        },
-
-        table1: {
-          // 是否正在加载
-          loading: false,
-          // 分页器参数
-          pagination: {
-            // 当前页码
-            current: 1,
-            // 每页的条数
-            pageSize: 200,
-            // 可切换的条数
-            pageSizeOptions: ['10', '20', '30', '100', '200'],
-            // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
-            total: 0,
-            showTotal: (total, range) => {
-              // 此处为 jsx 语法
-              let text = h('span', `${range[0]}-${range[1]} 共 ${total} 条`);
-              // 判断子表是否显示，如果显示就渲染展开收起按钮
-              if (this.subTabs.show) {
-                let expand = h('span', {}, [
-                  h(
-                    Button,
-                    {
-                      type: 'link',
-                      onClick: this.handleToggleTabs,
-                    },
-                    () => [this.subTabs.expand ? h(UpOutlined) : h(DownOutlined), h('span', {}, this.subTabs.expand ? '收起' : '展开')]
-                  ),
-                  h(
-                    Checkbox,
-                    {
-                      // h 写法不支持 v-model , 所以需要手动赋值
-                      checked: this.subTabs.autoExpand,
-                      'onUpdate:checked': (checked) => (this.subTabs.autoExpand = checked),
-                    },
-                    () => '自动展开'
-                  ),
-                ]);
-                // 返回多个dom用数组
-                return [expand, text];
-              } else {
-                // 直接返回单个dom
-                return text;
-              }
-            },
-          },
-          // 选择的行
-          selectedRows: [],
-          // 数据源，控制表格的数据
-          dataSource: [],
-          // 列配置，控制表格显示的列
-          columns: [
-            { key: 'num', title: '序号', width: '80px' },
-            {
-              // 字段key，跟后台数据的字段名匹配
-              key: 'ship_name',
-              // 列的标题
-              title: '船名',
-              // 列的宽度
-              width: '180px',
-              // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-              type: JVxeTypes.input,
-            },
-            { key: 'call', title: '呼叫', width: '990px', type: JVxeTypes.input },
-            { key: 'len', title: '长', width: '80px', type: JVxeTypes.inputNumber },
-            { key: 'ton', title: '吨', width: '120px', type: JVxeTypes.inputNumber },
-            { key: 'payer', title: '付款方', width: '120px', type: JVxeTypes.input },
-            { key: 'count', title: '数', width: '40px' },
-            {
-              key: 'company',
-              title: '公司',
-              // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
-              // 如果要做占满表格的列可以这么写
-              minWidth: '180px',
-              type: JVxeTypes.input,
-            },
-            { key: 'trend', title: '动向', width: '120px', type: JVxeTypes.input },
-          ],
-        },
-        // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
-        table2: {
-          currentRowId: null,
-          loading: false,
-          pagination: { current: 1, pageSize: 10, pageSizeOptions: ['5', '10', '20', '30'], total: 0 },
-          selectedRows: [],
-          dataSource: [],
-          columns: [
-            { key: 'dd_num', title: '调度序号', width: '120px' },
-            { key: 'tug', title: '拖轮', width: '180px', type: JVxeTypes.input },
-            { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVxeTypes.input },
-            { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVxeTypes.input },
-            { key: 'type', title: '船舶分类', width: '120px', type: JVxeTypes.input },
-            { key: 'port_area', title: '所属港区', width: '120px', type: JVxeTypes.input },
-          ],
-        },
-        currentSubRow: null,
-        // 查询url地址
-        url: {
-          getData: '/mock/vxe/getData',
-        },
-      };
-    },
-    computed: {
-      tableHeight() {
-        let { show, expand } = this.subTabs;
-        return show ? (expand ? 350 : 482) : 482;
-      },
-    },
-    created() {
-      this.loadTable1Data();
-    },
-    methods: {
-      // 加载table1【主表】的数据
-      loadTable1Data() {
-        // 封装查询条件
-        let formData = {
-          pageNo: this.table1.pagination.current,
-          pageSize: this.table1.pagination.pageSize,
-        };
-        // 调用查询数据接口
-        this.table1.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            // 后台查询回来的 total，数据总数量
-            this.table1.pagination.total = result.total;
-            // 将查询的数据赋值给 dataSource
-            this.table1.dataSource = result.records;
-            // 重置选择
-            this.table1.selectedRows = [];
-          })
-          .finally(() => {
-            // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-            this.table1.loading = false;
-          });
-      },
-
-      // 查询子表数据
-      loadSubData(row) {
-        if (row) {
-          // 这里一定要做限制，限制不能重复查询，否者会出现死循环
-          if (this.table2.currentRowId === row.id) {
-            return true;
-          }
-          this.table2.currentRowId = row.id;
-          this.loadTable2Data();
-          return true;
-        } else {
-          return false;
-        }
-      },
-      // 查询子表数据
-      loadTable2Data() {
-        let table2 = this.table2;
-        let formData = {
-          parentId: table2.currentRowId,
-          pageNo: this.table2.pagination.current,
-          pageSize: this.table2.pagination.pageSize,
-        };
-        table2.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            // 将查询的数据赋值给 dataSource
-            table2.selectedRows = [];
-            table2.dataSource = result.records;
-            table2.pagination.total = result.total;
-          })
-          .finally(() => {
-            // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-            table2.loading = false;
-          });
-      },
-
-      // table1【主表】当选择的行变化时触发的事件
-      handleTable1SelectRowChange(event) {
-        this.table1.selectedRows = event.selectedRows;
-        this.subTabs.show = true;
-        if (this.subTabs.autoExpand) {
-          this.subTabs.expand = true;
-        }
-        this.loadSubData(event.selectedRows[0]);
-      },
-      // table2【子表】当选择的行变化时触发的事件
-      handleTable2SelectRowChange(event) {
-        this.table2.selectedRows = event.selectedRows;
-      },
-
-      handleTable1PageChange(event) {
-        // 重新赋值
-        this.table1.pagination.current = event.current;
-        this.table1.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable1Data();
-      },
-      // 当table2【子表】分页参数变化时触发的事件
-      handleTable2PageChange(event) {
-        // 重新赋值
-        this.table2.pagination.current = event.current;
-        this.table2.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable2Data();
-      },
-
-      // 展开或收起子表tabs
-      handleToggleTabs() {
-        this.subTabs.expand = !this.subTabs.expand;
-      },
-    },
-  };
-</script>
-
-<style lang="less" scoped>
-  @ventSpace: zxm;
-  .sub-tabs {
-    &.un-expand {
-      :deep(.@{ventSpace}-tabs-content) {
-        height: 0 !important;
-      }
-
-      :deep(.@{ventSpace}-tabs-nav) {
-        border-color: transparent !important;
-      }
-
-      :deep(.@{ventSpace}-tabs-ink-bar) {
-        background-color: transparent !important;
-      }
-
-      :deep(.@{ventSpace}-tabs-tab) {
-        display: none !important;
-      }
-    }
-  }
-</style>

src/views/demo/jeecg/JVxeTableDemo/layout-demo/Template1.vue

@@ -1,332 +0,0 @@
-<template>
-  <a-card :bordered="false">
-    <a-row :gutter="8">
-      <!-- 这里是父级节点 -->
-      <a-col :span="24" style="margin-bottom: 4px">
-        <JVxeTable
-          toolbar
-          rowNumber
-          rowSelection
-          clickSelectRow
-          highlightCurrentRow
-          :radioConfig="{ highlight: false }"
-          :checkboxConfig="{ highlight: false }"
-          :height="340"
-          :loading="table1.loading"
-          :columns="table1.columns"
-          :dataSource="table1.dataSource"
-          :pagination="table1.pagination"
-          @pageChange="handleTable1PageChange"
-          @selectRowChange="handleTable1SelectRowChange"
-        />
-      </a-col>
-      <!-- 这里是子级节点 -->
-      <a-col :span="12">
-        <JVxeTable
-          toolbar
-          rowNumber
-          rowSelection
-          clickSelectRow
-          highlightCurrentRow
-          :radioConfig="{ highlight: false }"
-          :checkboxConfig="{ highlight: false }"
-          :height="340"
-          :loading="table2.loading"
-          :columns="table2.columns"
-          :dataSource="table2.dataSource"
-          :pagination="table2.pagination"
-          @pageChange="handleTable2PageChange"
-          @selectRowChange="handleTable2SelectRowChange"
-        >
-        </JVxeTable>
-      </a-col>
-      <!-- 这里是孙级节点 -->
-      <a-col :span="12">
-        <JVxeTable
-          toolbar
-          rowNumber
-          rowSelection
-          :height="340"
-          :loading="table3.loading"
-          :columns="table3.columns"
-          :dataSource="table3.dataSource"
-          :pagination="table3.pagination"
-          @pageChange="handleTable3PageChange"
-        >
-        </JVxeTable>
-      </a-col>
-    </a-row>
-  </a-card>
-</template>
-
-<script>
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-
-  // 【多种布局模板】上面父、左下子、右下孙
-  export default {
-    name: 'Template1',
-    data() {
-      return {
-        table1: {
-          // 是否正在加载
-          loading: false,
-          // 分页器参数
-          pagination: {
-            // 当前页码
-            current: 1,
-            // 每页的条数
-            pageSize: 200,
-            // 可切换的条数
-            pageSizeOptions: ['10', '20', '30', '100', '200'],
-            // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
-            total: 0,
-          },
-          // 最后选中的行
-          lastRow: null,
-          // 选择的行
-          selectedRows: [],
-          // 数据源，控制表格的数据
-          dataSource: [],
-          // 列配置，控制表格显示的列
-          columns: [
-            { key: 'num', title: '序号', width: '80px' },
-            {
-              // 字段key，跟后台数据的字段名匹配
-              key: 'ship_name',
-              // 列的标题
-              title: '船名',
-              // 列的宽度
-              width: '180px',
-              // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-              type: JVxeTypes.input,
-              formatter({ cellValue, row, column }) {
-                let foo = '';
-                if (row.company === '佧伒侾佯有限公司') {
-                  foo += '-233';
-                }
-                return cellValue + foo;
-              },
-            },
-            { key: 'call', title: '呼叫', width: '80px', type: JVxeTypes.input },
-            { key: 'len', title: '长', width: '80px', type: JVxeTypes.inputNumber },
-            { key: 'ton', title: '吨', width: '120px', type: JVxeTypes.inputNumber },
-            { key: 'payer', title: '付款方', width: '120px', type: JVxeTypes.input },
-            { key: 'count', title: '数', width: '40px' },
-            {
-              key: 'company',
-              title: '公司',
-              // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
-              // 如果要做占满表格的列可以这么写
-              minWidth: '180px',
-              type: JVxeTypes.input,
-            },
-            { key: 'trend', title: '动向', width: '120px', type: JVxeTypes.input },
-          ],
-        },
-        // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
-        table2: {
-          loading: false,
-          pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
-          // 最后选中的行
-          lastRow: null,
-          selectedRows: [],
-          dataSource: [],
-          columns: [
-            { key: 'dd_num', title: '调度序号', width: '120px' },
-            { key: 'tug', title: '拖轮', width: '180px', type: JVxeTypes.input },
-            { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVxeTypes.input },
-            { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVxeTypes.input },
-            { key: 'type', title: '船舶分类', width: '120px', type: JVxeTypes.input },
-            { key: 'port_area', title: '所属港区', width: '120px', type: JVxeTypes.input },
-          ],
-        },
-        // 孙级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
-        table3: {
-          loading: false,
-          pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
-          selectedRows: [],
-          dataSource: [],
-          columns: [
-            { key: 'dd_num', title: '调度序号', width: '120px' },
-            { key: 'tug', title: '拖轮', width: '120px', type: JVxeTypes.input },
-            { key: 'power', title: '马力', width: '120px', type: JVxeTypes.input },
-            { key: 'nature', title: '性质', width: '120px', type: JVxeTypes.input },
-            { key: 'departure_time', title: '发船时间', width: '180px', type: JVxeTypes.input },
-          ],
-        },
-        // 查询url地址
-        url: {
-          getData: '/mock/vxe/getData',
-        },
-      };
-    },
-    // 监听器
-    watch: {
-      // 监听table1 【主表】选择的数据发生了变化
-      ['table1.lastRow'](row) {
-        this.loadTable2Data();
-      },
-      // 监听table2 【子表】选择的数据发生了变化
-      ['table2.lastRow']() {
-        this.loadTable3Data();
-      },
-    },
-    created() {
-      this.loadTable1Data();
-    },
-    methods: {
-      // 加载table1【主表】的数据
-      loadTable1Data() {
-        // 封装查询条件
-        let formData = {
-          pageNo: this.table1.pagination.current,
-          pageSize: this.table1.pagination.pageSize,
-        };
-        // 调用查询数据接口
-        this.table1.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            // 后台查询回来的 total，数据总数量
-            this.table1.pagination.total = result.total;
-            // 将查询的数据赋值给 dataSource
-            this.table1.dataSource = result.records;
-            // 重置选择
-            this.table1.selectedRows = [];
-          })
-          .finally(() => {
-            // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-            this.table1.loading = false;
-          });
-      },
-
-      // 当table1【主表】分页参数变化时触发的事件
-      handleTable1PageChange(event) {
-        // 重新赋值
-        this.table1.pagination.current = event.current;
-        this.table1.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable1Data();
-      },
-
-      // table1【主表】当选择的行变化时触发的事件
-      handleTable1SelectRowChange(event) {
-        this.handleTableSelectRowChange(this.table1, event);
-      },
-
-      // 加载table2【子表】的数据，根据主表的id进行查询
-      loadTable2Data() {
-        // 如果主表没有选择，则不查询
-        let selectedRows = this.table1.selectedRows;
-        if (!selectedRows || selectedRows.length === 0) {
-          this.table2.pagination.total = 0;
-          this.table2.dataSource = [];
-          this.table2.selectedRows = [];
-          return;
-        } else if (this.table1.lastRow == null) {
-          this.table1.lastRow = selectedRows[selectedRows.length - 1];
-        }
-        let formData = {
-          parentId: this.table1.lastRow.id,
-          pageNo: this.table2.pagination.current,
-          pageSize: this.table2.pagination.pageSize,
-        };
-        this.table2.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            this.table2.pagination.total = result.total;
-            this.table2.dataSource = result.records;
-            this.table2.selectedRows = [];
-          })
-          .finally(() => {
-            this.table2.loading = false;
-          });
-      },
-
-      // table2【子表】当选择的行变化时触发的事件
-      handleTable2SelectRowChange(event) {
-        this.handleTableSelectRowChange(this.table2, event);
-      },
-
-      // 当table2【子表】分页参数变化时触发的事件
-      handleTable2PageChange(event) {
-        // 重新赋值
-        this.table2.pagination.current = event.current;
-        this.table2.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable2Data();
-      },
-
-      // 加载table3【孙表】的数据，根据子表的id进行查询
-      loadTable3Data() {
-        // 如果主表没有选择，则不查询
-        let selectedRows = this.table2.selectedRows;
-        if (!selectedRows || selectedRows.length === 0) {
-          this.table3.pagination.total = 0;
-          this.table3.dataSource = [];
-          this.table3.selectedRows = [];
-          return;
-        } else if (this.table2.lastRow == null) {
-          this.table2.lastRow = selectedRows[selectedRows.length - 1];
-        }
-        let formData = {
-          parentId: this.table2.lastRow.id,
-          pageNo: this.table3.pagination.current,
-          pageSize: this.table3.pagination.pageSize,
-        };
-        this.table3.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            this.table3.pagination.total = result.total;
-            this.table3.dataSource = result.records;
-          })
-          .finally(() => {
-            this.table3.loading = false;
-          });
-      },
-      // 当table3【孙表】分页参数变化时触发的事件
-      handleTable3PageChange(event) {
-        // 重新赋值
-        this.table3.pagination.current = event.current;
-        this.table3.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable3Data();
-      },
-
-      /** 公共方法：处理表格选中变化事件 */
-      handleTableSelectRowChange(table, event) {
-        let { row, action, selectedRows, $table } = event;
-        // 获取最后一个选中的
-        let lastSelected = selectedRows[selectedRows.length - 1];
-        if (action === 'selected') {
-          table.lastRow = row;
-        } else if (action === 'selected-all') {
-          // 取消全选
-          if (selectedRows.length === 0) {
-            table.lastRow = null;
-          } else if (!table.lastRow) {
-            table.lastRow = lastSelected;
-          }
-        } else if (action === 'unselected' && row === table.lastRow) {
-          table.lastRow = lastSelected;
-        }
-        $table.setCurrentRow(table.lastRow);
-        table.selectedRows = selectedRows;
-      },
-    },
-  };
-</script>
-
-<style lang="less"></style>

src/views/demo/jeecg/JVxeTableDemo/layout-demo/Template2.vue

@@ -1,249 +0,0 @@
-<template>
-  <a-card :bordered="false">
-    <a-row :gutter="8">
-      <!-- 左侧父 -->
-      <a-col :span="12">
-        <JVxeTable
-          toolbar
-          rowNumber
-          rowSelection
-          clickSelectRow
-          highlightCurrentRow
-          :radioConfig="{ highlight: false }"
-          :checkboxConfig="{ highlight: false }"
-          :height="790"
-          :loading="table1.loading"
-          :columns="table1.columns"
-          :dataSource="table1.dataSource"
-          :pagination="table1.pagination"
-          @pageChange="handleTable1PageChange"
-          @selectRowChange="handleTable1SelectRowChange"
-        />
-      </a-col>
-      <a-col :span="12">
-        <!-- 左侧选择的数据展示在这里 -->
-        <JVxeTable rowNumber :height="375" :columns="table1.columns" :dataSource="table1.selectedRows" style="margin: 52px 0 8px" />
-
-        <!-- 右下子 -->
-        <JVxeTable
-          toolbar
-          rowNumber
-          rowSelection
-          clickSelectRow
-          :height="355"
-          :loading="table2.loading"
-          :columns="table2.columns"
-          :dataSource="table2.dataSource"
-          :pagination="table2.pagination"
-          @pageChange="handleTable2PageChange"
-          @selectRowChange="handleTable2SelectRowChange"
-        />
-      </a-col>
-    </a-row>
-  </a-card>
-</template>
-
-<script>
-  import { defHttp } from '/@/utils/http/axios';
-  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
-
-  // 【多种布局模板】 左边选择后，记录选到右侧，右侧是父、子
-  export default {
-    name: 'Template2',
-    data() {
-      return {
-        table1: {
-          // 是否正在加载
-          loading: false,
-          // 分页器参数
-          pagination: {
-            // 当前页码
-            current: 1,
-            // 每页的条数
-            pageSize: 200,
-            // 可切换的条数
-            pageSizeOptions: ['10', '20', '30', '100', '200'],
-            // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
-            total: 0,
-          },
-          // 最后选中的行
-          lastRow: null,
-          // 选择的行
-          selectedRows: [],
-          // 数据源，控制表格的数据
-          dataSource: [],
-          // 列配置，控制表格显示的列
-          columns: [
-            { key: 'num', title: '序号', width: '80px' },
-            {
-              // 字段key，跟后台数据的字段名匹配
-              key: 'ship_name',
-              // 列的标题
-              title: '船名',
-              // 列的宽度
-              width: '180px',
-              // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
-              type: JVxeTypes.input,
-            },
-            { key: 'call', title: '呼叫', width: '80px', type: JVxeTypes.input },
-            { key: 'len', title: '长', width: '80px', type: JVxeTypes.input },
-            { key: 'ton', title: '吨', width: '120px', type: JVxeTypes.input },
-            { key: 'payer', title: '付款方', width: '120px', type: JVxeTypes.input },
-            { key: 'count', title: '数', width: '40px' },
-            {
-              key: 'company',
-              title: '公司',
-              // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
-              // 如果要做占满表格的列可以这么写
-              minWidth: '180px',
-              type: JVxeTypes.input,
-            },
-            { key: 'trend', title: '动向', width: '120px', type: JVxeTypes.input },
-          ],
-        },
-        // 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
-        table2: {
-          loading: false,
-          pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
-          selectedRows: [],
-          dataSource: [],
-          columns: [
-            { key: 'dd_num', title: '调度序号', width: '120px' },
-            { key: 'tug', title: '拖轮', width: '180px', type: JVxeTypes.input },
-            { key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVxeTypes.input },
-            { key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVxeTypes.input },
-            { key: 'type', title: '船舶分类', width: '120px', type: JVxeTypes.input },
-            { key: 'port_area', title: '所属港区', width: '120px', type: JVxeTypes.input },
-          ],
-        },
-        // 查询url地址
-        url: {
-          getData: '/mock/vxe/getData',
-        },
-      };
-    },
-    // 监听器
-    watch: {
-      // 监听table1 【主表】选择的数据发生了变化
-      ['table1.lastRow']() {
-        this.loadTable2Data();
-      },
-    },
-    created() {
-      this.loadTable1Data();
-    },
-    methods: {
-      // 加载table1【主表】的数据
-      loadTable1Data() {
-        // 封装查询条件
-        let formData = {
-          pageNo: this.table1.pagination.current,
-          pageSize: this.table1.pagination.pageSize,
-        };
-        // 调用查询数据接口
-        this.table1.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            // 后台查询回来的 total，数据总数量
-            this.table1.pagination.total = result.total;
-            // 将查询的数据赋值给 dataSource
-            this.table1.dataSource = result.records;
-            // 重置选择
-            this.table1.selectedRows = [];
-          })
-          .finally(() => {
-            // 这里是无论成功或失败都会执行的方法，在这里关闭loading
-            this.table1.loading = false;
-          });
-      },
-
-      // 加载table2【子表】的数据，根据主表的id进行查询
-      loadTable2Data() {
-        // 如果主表没有选择，则不查询
-        let selectedRows = this.table1.selectedRows;
-        if (!selectedRows || selectedRows.length === 0) {
-          this.table2.pagination.total = 0;
-          this.table2.dataSource = [];
-          this.table2.selectedRows = [];
-          return;
-        } else if (this.table1.lastRow == null) {
-          this.table1.lastRow = selectedRows[selectedRows.length - 1];
-        }
-        let formData = {
-          parentId: this.table1.lastRow.id,
-          pageNo: this.table2.pagination.current,
-          pageSize: this.table2.pagination.pageSize,
-        };
-        this.table2.loading = true;
-        defHttp
-          .get({
-            url: this.url.getData,
-            params: formData,
-          })
-          .then((result) => {
-            this.table2.pagination.total = result.total;
-            this.table2.dataSource = result.records;
-            this.table2.selectedRows = [];
-          })
-          .finally(() => {
-            this.table2.loading = false;
-          });
-      },
-
-      // table1【主表】当选择的行变化时触发的事件
-      handleTable1SelectRowChange(event) {
-        this.handleTableSelectRowChange(this.table1, event);
-      },
-
-      // table2【子表】当选择的行变化时触发的事件
-      handleTable2SelectRowChange(event) {
-        this.table2.selectedRows = event.selectedRows;
-      },
-
-      // 当table1【主表】分页参数变化时触发的事件
-      handleTable1PageChange(event) {
-        // 重新赋值
-        this.table1.pagination.current = event.current;
-        this.table1.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable1Data();
-      },
-
-      // 当table2【子表】分页参数变化时触发的事件
-      handleTable2PageChange(event) {
-        // 重新赋值
-        this.table2.pagination.current = event.current;
-        this.table2.pagination.pageSize = event.pageSize;
-        // 查询数据
-        this.loadTable2Data();
-      },
-
-      /** 公共方法：处理表格选中变化事件 */
-      handleTableSelectRowChange(table, event) {
-        let { row, action, selectedRows, $table } = event;
-        // 获取最后一个选中的
-        let lastSelected = selectedRows[selectedRows.length - 1];
-        if (action === 'selected') {
-          table.lastRow = row;
-        } else if (action === 'selected-all') {
-          // 取消全选
-          if (selectedRows.length === 0) {
-            table.lastRow = null;
-          } else if (!table.lastRow) {
-            table.lastRow = lastSelected;
-          }
-        } else if (action === 'unselected' && row === table.lastRow) {
-          table.lastRow = lastSelected;
-        }
-        $table.setCurrentRow(table.lastRow);
-        table.selectedRows = selectedRows;
-      },
-    },
-  };
-</script>
-
-<style scoped></style>