---初始化后台管理web页面项目

2025-08-20 14:39:30 +08:00
parent ad49711a7e
commit 87545a8baf
2057 changed files with 282864 additions and 213 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+indent_style=space
+indent_size=4
+max_line_length = 250
+
+[*.{yml,yaml,json}]
+indent_style = space
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
--- a/.env
+++ b/.env
@ -0,0 +1,17 @@
+# port
+VITE_PORT = 3100
+
+# spa-title
+VITE_GLOB_APP_TITLE = 全代码平台
+
+# spa shortname(英文缩写)
+VITE_GLOB_APP_SHORT_NAME = 全代码平台
+
+# 应用名称（仅展示在登录页和左上角logo旁，其他情况用VITE_GLOB_APP_TITLE）
+VITE_SYSTEM_NAME = 全代码平台
+# 应用名称简写，用于空间不足的界面显示（左上角logo旁，7个字以内，超出变成...）
+# VITE_SYSTEM_SHORT_NAME = 全代码平台
+
+# 响应式布局的表单宽度分界
+VITE_RESP_LG_WIDTH = 1280
+VITE_RESP_MD_WIDTH = 960
--- a/.env.development.example
+++ b/.env.development.example
@ -0,0 +1,46 @@
+# 是否开启mock数据，关闭时需要自行对接后台接口
+VITE_USE_MOCK = false
+
+# 资源公共路径,需要以 /开头和结尾
+VITE_PUBLIC_PATH = /
+
+# 本地开发代理，可以解决跨域及多地址代理
+# 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
+# 可以有多个，注意多个不能换行，否则代理将会失效
+# VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
+# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+
+# 是否删除Console.log
+VITE_DROP_CONSOLE = false
+
+# 接口地址
+# 如果没有跨域问题，直接在这里配置即可
+VITE_GLOB_API_URL=http://10.133.96.105:8077
+# 报表系统地址
+VITE_GLOB_REPORT_URL=http://10.133.96.105:3100
+
+# 文件上传接口  可选
+VITE_GLOB_UPLOAD_URL = /system/oss/upload
+
+# 文件预览接口  可选
+VITE_GLOB_UPLOAD_PREVIEW = http://10.0.252.28:8012/onlinePreview?url=
+
+#外部url地址
+VITE_GLOB_OUT_LINK_URL = ['http://localhost:4100']
+
+#打印项目地址
+VITE_GLOB_PRINT_BASE_URL = http://114.116.210.204:3300
+
+# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
+VITE_GLOB_API_URL_PREFIX =
+
+# 屏蔽通知消息的轮询
+VITE_GLOB_DISABLE_NEWS = true
+
+#租户开关
+# VITE_GLOB_TENANT_ENABLED = true
+#登录时是否需要输入租户码
+# VITE_GLOB_TENANT_INPUT_REQUIRED = true
+
+#附件上传显示提示
+VITE_GLOB_UPLOAD_ALERT_TIP=（严禁在本非涉密平台处理、传输国家秘密、工作秘密、商业秘密、敏感信息，请确认扫描、传输的文件资料不涉密！）
--- a/.env.production.example
+++ b/.env.production.example
@ -0,0 +1,46 @@
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 资源公共路径,需要以 / 开头和结尾
+VITE_PUBLIC_PATH = /
+
+# 是否删除Console.log
+VITE_DROP_CONSOLE = true
+
+# 打包是否输出gz｜br文件
+# 可选: gzip | brotli | none
+# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
+VITE_BUILD_COMPRESS = 'gzip'
+
+# 使用compress时是否删除源文件，默认false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 接口地址 可以由nginx做转发或者直接写实际地址
+VITE_GLOB_API_URL=http://10.133.96.60:8088
+
+
+# 文件上传地址 可以由nginx做转发或者直接写实际地址
+VITE_GLOB_UPLOAD_URL = /system/oss/upload
+
+# 文件预览接口  可选
+VITE_GLOB_UPLOAD_PREVIEW = http://114.116.210.204:8012/onlinePreview?url=
+
+#外部url地址
+VITE_GLOB_OUT_LINK_URL = ['http://114.116.210.204:4100']
+
+#打印项目地址
+VITE_GLOB_PRINT_BASE_URL = http://114.116.210.204:3300
+
+# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
+VITE_GLOB_API_URL_PREFIX =
+
+# 打包是否开启pwa功能
+VITE_USE_PWA = false
+
+#租户开关
+# VITE_GLOB_TENANT_ENABLED = true
+#登录时是否需要输入租户码
+# VITE_GLOB_TENANT_INPUT_REQUIRED = true
+
+#附件上传显示提示
+VITE_GLOB_UPLOAD_ALERT_TIP=（严禁在本非涉密平台处理、传输国家秘密、工作秘密、商业秘密、敏感信息，请确认扫描、传输的文件资料不涉密！）
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,45 @@
+NODE_ENV=production
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# File upload address， optional
+# It can be forwarded by nginx or write the actual address directly
+VITE_GLOB_UPLOAD_URL=/upload
+
+# 文件预览接口  可选
+VITE_GLOB_UPLOAD_PREVIEW = http://114.116.210.204:8012/onlinePreview?url=
+
+#外部url地址
+VITE_GLOB_OUT_LINK_URL = ['http://localhost:4100']
+
+#打印项目地址
+VITE_GLOB_PRINT_BASE_URL = http://114.116.210.204:3300
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=
+
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,16 @@
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile
+/src/components/Designer
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,76 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    jsxPragma: 'React',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'vue/script-setup-uses-vars': 'error',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+    'vue/multi-word-component-names': 'off',
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -1,149 +1,40 @@
-# ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
+node_modules
+.DS_Store
+dist
+.npmrc
+.cache

-# TODO: where does this rule come from?
-docs/_book
+tests/server/static
+tests/server/static/upload

-# TODO: where does this rule come from?
-test/
+.local
+# local env files
+.env.local
+.env.*.local
+.eslintcache
+.env.development
+.env.production

-# ---> Node
-# Logs
-logs
-*.log
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+pnpm-debug.log*

+# Editor directories and files
+.idea
+# .vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/package-lock.json
+/src/views/dev
+/src/api/dev
+/pnpm-lock.yaml
+pnpm-lock.yaml
+jinayi
+/pnpm-lock.yaml
+/src/views/jianyi
+/src/api/jianyi
--- a/.gitpod.yml
+++ b/.gitpod.yml
@ -0,0 +1,6 @@
+ports:
+  - port: 3344
+    onOpen: open-preview
+tasks:
+  - init: pnpm install
+    command: pnpm run dev
--- a/.pnpm-debug.log
+++ b/.pnpm-debug.log
@ -0,0 +1,20 @@
+{
+  "0 debug pnpm:scope": {
+    "selected": 1
+  },
+  "1 error pnpm": {
+    "errno": 1,
+    "code": "ELIFECYCLE",
+    "pkgid": "vben-admin@2.8.0",
+    "stage": "dev",
+    "script": "vite",
+    "pkgname": "vben-admin",
+    "err": {
+      "name": "pnpm",
+      "message": "vben-admin@2.8.0 dev: `vite`\nExit status 1",
+      "code": "ELIFECYCLE",
+      "stack": "pnpm: vben-admin@2.8.0 dev: `vite`\nExit status 1\n    at EventEmitter.<anonymous> (C:\\Users\\Zexy\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:103336:20)\n    at EventEmitter.emit (events.js:400:28)\n    at ChildProcess.<anonymous> (C:\\Users\\Zexy\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:91276:18)\n    at ChildProcess.emit (events.js:400:28)\n    at maybeClose (internal/child_process.js:1058:16)\n    at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)"
+    }
+  },
+  "2 warn pnpm:global": " Local package.json exists, but node_modules missing, did you mean to install?"
+}
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1,3 @@
+/dist/*
+/public/*
+public/*
--- a/23
+++ b/23
@ -0,0 +1,23 @@
+# 使用 Node.js 18 作为基础镜像
+#FROM 10.4.117.234:8082/node:20-alpine
+FROM --platform=linux/arm64 docker.xuanyuan.run/library/node:20-alpine
+
+# 在容器中创建工作目录
+WORKDIR /app
+
+# 拷贝整个应用程序到工作目录
+COPY . .
+
+# 安装依赖
+RUN  yarn install
+
+# 构建应用程序
+RUN yarn build
+
+# 暴露端口
+EXPOSE 3100
+
+# 运行应用程序
+CMD [ "npm", "run", "serve" ]
+
+#docker build -t pcitc/itc-web:1.0.0 .
--- a/13
+++ b/13
@ -0,0 +1,13 @@
+FROM --platform=linux/arm64 node-http-server:1.0.0
+
+WORKDIR /app
+
+COPY ./dist /app/html/
+
+EXPOSE 8080
+
+CMD ["node", "server.js"]
+
+#  docker build -f Dockerfile-vue -t pcitc/itc-web:1.0.2 .
+
+
--- a/86
+++ b/86
@ -1,73 +1,21 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
+MIT License

-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+Copyright (c) 2020-present, Vben

-1. Definitions.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:

-"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.

-"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
-
-"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
-
-"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
-
-"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
-
-"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
-
-"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
-
-"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
-
-"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
-
-"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
-
-     (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
-
-     (b) You must cause any modified files to carry prominent notices stating that You changed the files; and
-
-     (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
-
-     (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
-
-     You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
-
-Copyright 2025 geg-gas
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,3 +1,143 @@
-# geg-gas-web
+## 特别注意
+如果你遇到了下面问题，包括对话框无法关闭、列表错乱/卡住/无法打开等奇怪问题，请检查node_modules/vue的版本，如果是3.4.x，由于antd-vue的要求，需要降级后使用。
+或者使用yarn重新安装依赖，项目里的yarn.lock为3.2.40版本。

-系统管理界面
+## 二开指南
+进入项目的docs目录，使用任何http服务器部署文件，如[http-server](https://www.npmjs.com/package/http-server)，即可浏览文档：
+```vue
+C:\Users\user\Documents\fcd_framework_pc\docs> http-server
+```
+
+## 路由配置
+为了符合UI规范的要求，框架对流程表单页面的布局进行了定制开发，对于新系统需要**手动创建**菜单
+### 待办列表
+- 组件名称 FlowListPage2
+- 路由地址 /flowList/todo
+- 组件路径 /secondDev/processTasksPage.vue
+### 草稿箱
+- 组件名称 FlowListPage
+- 路由地址 /flowList/draft
+- 组件路径 /secondDev/processTasksPage.vue
+### 我的单据
+- 组件名称 FlowListPage3
+- 路由地址 /flowList/myProcess
+- 组件路径 /secondDev/processTasksPage.vue
+### 新建待办
+```javascript
+router.push({
+    path: `/flow/:schemaId/0/createFlow`
+});
+```
+### 无流程新建
+```javascript
+router.push({
+    path: `/form/表单名/0/createForm`,
+    query: {
+        formPath: '模块目录名/表单名'
+    }
+});
+```
+
+## 技术选型
+
+- 开发框架采用 [Vue3](https://v3.cn.vuejs.org/) 版本：3.3.4+（**>3.4会导致UI问题**）
+- 构建工具采用 [Vite](https://vitejs.cn/) 版本： 4.3.8+
+- 包管理采用 [pnpm](https://www.pnpm.cn/)版本 6.20+
+- 多语言框架采用 [i18n](https://vue-i18n.intlify.dev/) 版本 9.2.2
+- ui 框架采用 [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) 版本：3.0+
+- http 请求库 采用 [axios](https://www.axios-http.cn/) 版本 1.4.0+
+- 代码计算库 采用 [jsbi-calculator](https://www.npmjs.com/package/jsbi-calculator) 版本 0.3.6+
+- 框架开发语言采用 [TypeScript](https://www.typescriptlang.org/) 版本 5.0.4+
+- 工作流组件采用 [bpmn.js](https://bpmn.io/toolkit/bpmn-js/) 版本 8.7+
+- 时间工具库采用 [day.js](https://bpmn.io/toolkit/bpmn-js/) 版本 1.11.0+
+- 状态管理库采用 [pinia ](https://https://pinia.vuejs.org/)版本 2.0.12 +
+- 图表库采用 [echarts](https://echarts.apache.org/zh/index.html)版本 5.3.1+
+- excel 操作库采用 [exceljs](https://github.com/exceljs/) 版本 4.3.0+
+- 工具类采用 [lodash-es](https://www.lodashjs.com/) 版本 4.17.21+
+- 工具类采用 [vueuse](https://vueuse.org/) 版本 10.1.2+
+- 打印工具类库 采用 [printjs](https://printjs.crabbly.com/) 版本 1.6.0+
+- 二维码类库 采用 [qrcode](https://www.qrcode.com/zh/) 版本 1.5.0+
+- 拖拽组件 采用 [vuedraggable](https://www.npmjs.com/package/vue-draggable) 版本 4.1.0+
+- 富文本编辑器 采用 [wangeditor](https://www.wangeditor.com/) 版本 4.6.13+
+- 项目 git 提交管理库 采用 [husky](https://github.com/githusky) 版本 8.0.3+
+- 项目框架结构采用 [Vben](https://vvbin.cn/doc-next/guide/introduction.html) 作为基础，搭建而成。
+- 其他技术及版本 以 Vben 文档 以及 package.json 做参考
+
+## 特性
+
+- **最新技术栈**：使用 Vue3/vite3 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **主题**：可配置的主题
+- **国际化**：内置完善的国际化方案
+- **Mock 数据** 内置 Mock 数据方案
+- **权限** 内置完善的动态路由权限生成方案
+- **组件** 二次封装了多个常用的组件
+
+## 准备
+
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
+- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
+
+## 安装使用
+
+<!-- - 获取项目代码
+
+```sh
+git clone https://fcd.gdyditc.com/itc-framework/ma/2024/front.git
+``` -->
+
+- 安装依赖
+
+```sh
+cd front
+
+pnpm install
+
+```
+
+- 运行
+
+```sh
+pnpm dev
+```
+
+- 打包
+
+```sh
+pnpm build
+```
+
+<br/>
+
+## Git 贡献提交规范
+
+- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 [Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+  - `feat` 增加新功能
+  - `fix` 修复问题/BUG
+  - `style` 代码风格相关无影响运行结果的
+  - `perf` 优化/性能提升
+  - `refactor` 重构
+  - `revert` 撤销修改
+  - `test` 测试相关
+  - `docs` 文档/注释
+  - `chore` 依赖更新/脚手架配置修改等
+  - `workflow` 工作流改进
+  - `ci` 持续集成
+  - `types` 类型定义文件更改
+  - `wip` 开发中
+
+## 相关仓库
+
+- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - 用于本地及开发环境数据 mock
+- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - 用于 html 模版转换及压缩
+- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - 用于组件库样式按需引入
+- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - 用于在线切换主题色等颜色相关配置
+- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - 用于打包压缩图片资源
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输出.gz|.brotil 文件
+- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图
--- a/alias.js
+++ b/alias.js
@ -0,0 +1,33 @@
+import moment from './node_modules/moment';
+
+export const {
+  fn,
+  min,
+  max,
+  now,
+  utc,
+  unix,
+  months,
+  isDate,
+  locale,
+  invalid,
+  duration,
+  isMoment,
+  weekdays,
+  parseZone,
+  localeData,
+  isDuration,
+  monthsShort,
+  weekdaysMin,
+  defineLocale,
+  updateLocale,
+  locales,
+  weekdaysShort,
+  normalizeUnits,
+  relativeTimeRounding,
+  relativeTimeThreshold,
+  calendarFormat,
+  ISO_8601,
+} = moment;
+
+export default moment;
--- a/build/config/themeConfig.ts
+++ b/build/config/themeConfig.ts
@ -0,0 +1,79 @@
+import { generate } from '@ant-design/colors';
+
+export const primaryColor = '#5e95ff';
+
+export const darkMode = 'light';
+
+type Fn = (...arg: any) => any;
+
+type GenerateTheme = 'default' | 'dark';
+
+export interface GenerateColorsParams {
+  mixLighten: Fn;
+  mixDarken: Fn;
+  tinycolor: any;
+  color?: string;
+}
+
+export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
+  return generate(color, {
+    theme,
+  });
+}
+
+export function getThemeColors(color?: string) {
+  const tc = color || primaryColor;
+  const lightColors = generateAntColors(tc);
+  const primary = lightColors[5];
+  const modeColors = generateAntColors(primary, 'dark');
+
+  return [...lightColors, ...modeColors];
+}
+
+export function generateColors({
+  color = primaryColor,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+}: GenerateColorsParams) {
+  const arr = new Array(19).fill(0);
+  const lightens = arr.map((_t, i) => {
+    return mixLighten(color, i / 5);
+  });
+
+  const darkens = arr.map((_t, i) => {
+    return mixDarken(color, i / 5);
+  });
+
+  const alphaColors = arr.map((_t, i) => {
+    return tinycolor(color)
+      .setAlpha(i / 20)
+      .toRgbString();
+  });
+
+  const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
+
+  const tinycolorLightens = arr
+    .map((_t, i) => {
+      return tinycolor(color)
+        .lighten(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#ffffff');
+
+  const tinycolorDarkens = arr
+    .map((_t, i) => {
+      return tinycolor(color)
+        .darken(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#000000');
+  return [
+    ...lightens,
+    ...darkens,
+    ...alphaColors,
+    ...shortAlphaColors,
+    ...tinycolorDarkens,
+    ...tinycolorLightens,
+  ].filter((item) => !item.includes('-'));
+}
--- a/build/constant.ts
+++ b/build/constant.ts
@ -0,0 +1,6 @@
+/**
+ * The name of the configuration file entered in the production environment
+ */
+export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
+
+export const OUTPUT_DIR = 'dist';
--- a/build/generate/generateModifyVars.ts
+++ b/build/generate/generateModifyVars.ts
@ -0,0 +1,39 @@
+import { generateAntColors, primaryColor } from '../config/themeConfig';
+import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+
+/**
+ * less global variable
+ */
+export function generateModifyVars(dark = false) {
+  const palettes = generateAntColors(primaryColor);
+  const primary = palettes[5];
+
+  const primaryColorObj: Record<string, string> = {};
+
+  for (let index = 0; index < 10; index++) {
+    primaryColorObj[`primary-${index + 1}`] = palettes[index];
+  }
+
+  const modifyVars = getThemeVariables({ dark });
+  return {
+    ...modifyVars,
+    // Used for global import to avoid the need to import each style file separately
+    // reference:  Avoid repeated references
+    hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'processing-color': primary,
+    'success-color': '#55D187', //  Success color
+    'error-color': '#ED6F6F', //  False color
+    'warning-color': '#EFBD47', //   Warning color
+
+    'clear-color': '#ff8989', //清空以及删除 颜色
+    //'border-color-base': '#EEEEEE',
+    'font-size-base': '14px', //  Main font size
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+    'app-content-background': '#fafafa', //   Link color
+  };
+}
--- a/build/generate/icon/index.ts
+++ b/build/generate/icon/index.ts
@ -0,0 +1,72 @@
+import path from 'path';
+import fs from 'fs-extra';
+import inquirer from 'inquirer';
+import colors from 'picocolors';
+import pkg from '../../../package.json';
+
+async function generateIcon() {
+  const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json');
+
+  const raw = await fs.readJSON(path.join(dir, 'collections.json'));
+
+  const collections = Object.entries(raw).map(([id, v]) => ({
+    ...(v as any),
+    id,
+  }));
+
+  const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name }));
+
+  inquirer
+    .prompt([
+      {
+        type: 'list',
+        name: 'useType',
+        choices: [
+          { key: 'local', value: 'local', name: 'Local' },
+          { key: 'onLine', value: 'onLine', name: 'OnLine' },
+        ],
+        message: 'How to use icons?',
+      },
+      {
+        type: 'list',
+        name: 'iconSet',
+        choices: choices,
+        message: 'Select the icon set that needs to be generated?',
+      },
+      {
+        type: 'input',
+        name: 'output',
+        message: 'Select the icon set that needs to be generated?',
+        default: 'src/components/Icon/data',
+      },
+    ])
+    .then(async (answers) => {
+      const { iconSet, output, useType } = answers;
+      const outputDir = path.resolve(process.cwd(), output);
+      await fs.ensureDir(outputDir);
+      const genCollections = collections.filter((item) => [iconSet].includes(item.id));
+      const prefixSet: string[] = [];
+      for (const info of genCollections) {
+        const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`));
+        if (data) {
+          const { prefix } = data;
+          const isLocal = useType === 'local';
+          const icons = Object.keys(data.icons).map(
+            (item) => `${isLocal ? prefix + ':' : ''}${item}`,
+          );
+
+          await fs.writeFileSync(
+            path.join(output, `icons.data.ts`),
+            `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`,
+          );
+          prefixSet.push(prefix);
+        }
+      }
+      await fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
+      console.log(
+        `✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`,
+      );
+    });
+}
+
+generateIcon();
--- a/build/getConfigFileName.ts
+++ b/build/getConfigFileName.ts
@ -0,0 +1,9 @@
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+export const getConfigFileName = (env: Record<string, any>) => {
+  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
+    .toUpperCase()
+    .replace(/\s/g, '');
+};
--- a/build/script/buildConf.ts
+++ b/build/script/buildConf.ts
@ -0,0 +1,47 @@
+/**
+ * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
+ */
+import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
+import fs, { writeFileSync } from 'fs-extra';
+import colors from 'picocolors';
+
+import { getEnvConfig, getRootPath } from '../utils';
+import { getConfigFileName } from '../getConfigFileName';
+
+import pkg from '../../package.json';
+
+interface CreateConfigParams {
+    configName: string;
+    config: any;
+    configFileName?: string;
+}
+
+function createConfig(params: CreateConfigParams) {
+    const { configName, config, configFileName } = params;
+    try {
+        const windowConf = `window.${configName}`;
+        // Ensure that the variable will not be modified
+        let configStr = `${windowConf}=${JSON.stringify(config).replace(/:"([^"]+)"/g, ':`$1`')};`;
+        configStr += `
+      Object.freeze(${windowConf});
+      Object.defineProperty(window, "${configName}", {
+        configurable: false,
+        writable: false,
+      });
+    `.replace(/\s/g, '');
+
+        fs.mkdirp(getRootPath(OUTPUT_DIR));
+        writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
+
+        console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
+        console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n');
+    } catch (error) {
+        console.log(colors.red('configuration file configuration file failed to package:\n' + error));
+    }
+}
+
+export function runBuildConfig() {
+    const config = getEnvConfig();
+    const configFileName = getConfigFileName(config);
+    createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
+}
--- a/build/script/postBuild.ts
+++ b/build/script/postBuild.ts
@ -0,0 +1,23 @@
+// #!/usr/bin/env node
+
+import { runBuildConfig } from './buildConf';
+import colors from 'picocolors';
+
+import pkg from '../../package.json';
+
+export const runBuild = async () => {
+  try {
+    const argvList = process.argv.splice(2);
+
+    // Generate configuration file
+    if (!argvList.includes('disabled-config')) {
+      runBuildConfig();
+    }
+
+    console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
+  } catch (error) {
+    console.log(colors.red('vite build error:\n' + error));
+    process.exit(1);
+  }
+};
+runBuild();
--- a/build/utils.ts
+++ b/build/utils.ts
@ -0,0 +1,95 @@
+import fs from 'fs';
+import path from 'path';
+import dotenv from 'dotenv';
+
+export function isDevFn(mode: string): boolean {
+  return mode === 'development';
+}
+
+export function isProdFn(mode: string): boolean {
+  return mode === 'production';
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.REPORT === 'true';
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {};
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n');
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+    if (envName === 'VITE_PORT') {
+      realName = Number(realName);
+    }
+    if (envName === 'VITE_PROXY' && realName) {
+      try {
+        realName = JSON.parse(realName.replace(/'/g, '"'));
+      } catch (error) {
+        realName = '';
+      }
+    }
+    ret[envName] = realName;
+    // if (typeof realName === 'string') {
+    //   process.env[envName] = realName;
+    // } else if (typeof realName === 'object') {
+    //   process.env[envName] = JSON.stringify(realName);
+    // }
+  }
+  return ret;
+}
+
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+  const script = process.env.npm_lifecycle_script;
+  const reg = new RegExp('--mode ([a-z_\\d]+)');
+  const result = reg.exec(script as string) as any;
+  if (result) {
+    const mode = result[1] as string;
+    return ['.env', `.env.${mode}`];
+  }
+  return ['.env', '.env.production'];
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) {
+  let envConfig = {};
+  confFiles.forEach((item) => {
+    try {
+      const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
+      envConfig = { ...envConfig, ...env };
+    } catch (e) {
+      console.error(`Error in parsing ${item}`, e);
+    }
+  });
+  if (match.length > 255) {
+    throw new Error('字符长度超出255个字符');
+  }
+  const reg = new RegExp(`^(${match})`);
+  Object.keys(envConfig).forEach((key) => {
+    if (!reg.test(key)) {
+      Reflect.deleteProperty(envConfig, key);
+    }
+  });
+  return envConfig;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir);
+}
--- a/build/vite/optimize.ts
+++ b/build/vite/optimize.ts
@ -0,0 +1,35 @@
+const include = [
+  'qs',
+  'vue',
+  'less',
+  'axios',
+  'pinia',
+  'dayjs',
+  'qrcode',
+  'echarts',
+  'intro.js',
+  'cropperjs',
+  'crypto-js',
+  'lodash-es',
+  'nprogress',
+  'vue-i18n',
+  'vue-types',
+  'vue-router',
+  'sortablejs',
+  'echarts/core',
+  'echarts/charts',
+  'echarts/components',
+  'echarts/renderers',
+  '@vueuse/core',
+  '@zxcvbn-ts/core',
+  '@iconify/iconify',
+  'ant-design-vue',
+  'ant-design-vue/es/style',
+  'ant-design-vue/es/locale/zh_CN',
+  'ant-design-vue/es/locale/en_US',
+  'vite-plugin-windicss',
+];
+
+const exclude = ['@iconify/json'];
+
+export { include, exclude };
--- a/build/vite/plugin/compress.ts
+++ b/build/vite/plugin/compress.ts
@ -0,0 +1,35 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { PluginOption } from 'vite';
+import compressPlugin from 'vite-plugin-compression';
+
+export function configCompressPlugin(
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false,
+): PluginOption | PluginOption[] {
+  const compressList = compress.split(',');
+
+  const plugins: PluginOption[] = [];
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      }),
+    );
+  }
+
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      }),
+    );
+  }
+  return plugins;
+}
--- a/build/vite/plugin/html.ts
+++ b/build/vite/plugin/html.ts
@ -0,0 +1,40 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/xingyuv/vite-vue-plugin-html
+ */
+import type { PluginOption } from 'vite';
+import { createHtmlPlugin } from 'vite-vue-plugin-html';
+import pkg from '../../../package.json';
+import { GLOB_CONFIG_FILE_NAME } from '../../constant';
+
+export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
+  const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+
+  const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
+
+  const getAppConfigSrc = () => {
+    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
+  };
+
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      // Inject data into ejs template
+      data: {
+        title: VITE_GLOB_APP_TITLE,
+      },
+      // Embed the generated app.config.js file
+      tags: isBuild
+        ? [
+            {
+              tag: 'script',
+              attrs: {
+                src: getAppConfigSrc(),
+              },
+            },
+          ]
+        : [],
+    },
+  });
+  return htmlPlugin;
+}
--- a/build/vite/plugin/imagemin.ts
+++ b/build/vite/plugin/imagemin.ts
@ -0,0 +1,34 @@
+// // Image resource files used to compress the output of the production environment
+// // https://github.com/anncwb/vite-plugin-imagemin
+// import viteImagemin from 'vite-plugin-imagemin';
+
+// export function configImageminPlugin() {
+//   const plugin = viteImagemin({
+//     gifsicle: {
+//       optimizationLevel: 7,
+//       interlaced: false,
+//     },
+//     optipng: {
+//       optimizationLevel: 7,
+//     },
+//     mozjpeg: {
+//       quality: 20,
+//     },
+//     pngquant: {
+//       quality: [0.8, 0.9],
+//       speed: 4,
+//     },
+//     svgo: {
+//       plugins: [
+//         {
+//           name: 'removeViewBox',
+//         },
+//         {
+//           name: 'removeEmptyAttrs',
+//           active: false,
+//         },
+//       ],
+//     },
+//   });
+//   return plugin;
+// }
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@ -0,0 +1,70 @@
+import { PluginOption } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import progress from 'vite-plugin-progress';
+import windiCSS from 'vite-plugin-windicss';
+import purgeIcons from 'vite-plugin-purge-icons';
+import VitePluginCertificate from 'vite-plugin-mkcert';
+import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite';
+import { configPwaConfig } from './pwa';
+import { configMockPlugin } from './mock';
+import { configHtmlPlugin } from './html';
+import { configCompressPlugin } from './compress';
+import { configStyleImportPlugin } from './styleImport';
+import { configVisualizerConfig } from './visualizer';
+import { configThemePlugin } from './theme';
+import { configSvgIconsPlugin } from './svgSprite';
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+  const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+
+  const vitePlugins: (PluginOption | PluginOption[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx(),
+    // 打包进度条
+    progress(),
+    // support name
+    vueSetupExtend({}),
+    VitePluginCertificate({
+      source: 'coding',
+    }),
+  ];
+
+  // windiCSS
+  vitePlugins.push(windiCSS());
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
+
+  // vite-plugin-svg-icons
+  vitePlugins.push(configSvgIconsPlugin(isBuild));
+
+  // vite-plugin-mock
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
+
+  // vite-plugin-purge-icons
+  vitePlugins.push(purgeIcons());
+
+  // rollup-plugin-visualizer
+  vitePlugins.push(configVisualizerConfig());
+
+  // vite-plugin-vben-theme
+  vitePlugins.push(configThemePlugin(isBuild));
+
+  // The following plugins only work in the production environment
+  if (isBuild) {
+    // vite-vue-plugin-style-import
+    vitePlugins.push(configStyleImportPlugin(isBuild));
+    // rollup-plugin-gzip
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
+    );
+
+    // vite-plugin-pwa
+    vitePlugins.push(configPwaConfig(viteEnv));
+  }
+
+  return vitePlugins;
+}
--- a/build/vite/plugin/mock.ts
+++ b/build/vite/plugin/mock.ts
@ -0,0 +1,19 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
+import { viteMockServe } from 'vite-plugin-mock';
+
+export function configMockPlugin(isBuild: boolean) {
+  return viteMockServe({
+    ignore: /^\_/,
+    mockPath: 'mock',
+    localEnabled: !isBuild,
+    prodEnabled: isBuild,
+    injectCode: `
+      import { setupProdMockServer } from '../mock/_createProductionServer';
+
+      setupProdMockServer();
+      `,
+  });
+}
--- a/build/vite/plugin/pwa.ts
+++ b/build/vite/plugin/pwa.ts
@ -0,0 +1,33 @@
+/**
+ * Zero-config PWA for Vite
+ * https://github.com/antfu/vite-plugin-pwa
+ */
+import { VitePWA } from 'vite-plugin-pwa';
+
+export function configPwaConfig(env: ViteEnv) {
+  const { VITE_USE_PWA, VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = env;
+
+  if (VITE_USE_PWA) {
+    // vite-plugin-pwa
+    const pwaPlugin = VitePWA({
+      manifest: {
+        name: VITE_GLOB_APP_TITLE,
+        short_name: VITE_GLOB_APP_SHORT_NAME,
+        icons: [
+          {
+            src: './resource/img/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: './resource/img/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+    });
+    return pwaPlugin;
+  }
+  return [];
+}
--- a/build/vite/plugin/styleImport.ts
+++ b/build/vite/plugin/styleImport.ts
@ -0,0 +1,82 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/xingyuv/vite-vue-plugin-style-import
+ */
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export function configStyleImportPlugin(_isBuild: boolean) {
+  if (!_isBuild) {
+    return [];
+  }
+  const styleImportPlugin = createStyleImportPlugin({
+    libs: [
+      {
+        libraryName: 'ant-design-vue',
+        esModule: true,
+        resolveStyle: (name) => {
+          // 这里是无需额外引入样式文件的“子组件”列表
+          const ignoreList = [
+            'anchor-link',
+            'sub-menu',
+            'menu-item',
+            'menu-divider',
+            'menu-item-group',
+            'breadcrumb-item',
+            'breadcrumb-separator',
+            'form-item',
+            'step',
+            'select-option',
+            'select-opt-group',
+            'card-grid',
+            'card-meta',
+            'collapse-panel',
+            'descriptions-item',
+            'list-item',
+            'list-item-meta',
+            'table-column',
+            'table-column-group',
+            'tab-pane',
+            'tab-content',
+            'timeline-item',
+            'tree-node',
+            'skeleton-input',
+            'skeleton-avatar',
+            'skeleton-title',
+            'skeleton-paragraph',
+            'skeleton-image',
+            'skeleton-button',
+          ];
+          // 这里是需要额外引入样式的子组件列表
+          // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
+          const replaceList = {
+            textarea: 'input',
+            'typography-text': 'typography',
+            'typography-title': 'typography',
+            'typography-paragraph': 'typography',
+            'typography-link': 'typography',
+            'dropdown-button': 'dropdown',
+            'input-password': 'input',
+            'input-search': 'input',
+            'input-group': 'input',
+            'radio-group': 'radio',
+            'checkbox-group': 'checkbox',
+            'layout-sider': 'layout',
+            'layout-content': 'layout',
+            'layout-footer': 'layout',
+            'layout-header': 'layout',
+            'month-picker': 'date-picker',
+            'range-picker': 'date-picker',
+            'image-preview-group': 'image',
+          };
+
+          return ignoreList.includes(name)
+            ? ''
+            : replaceList.hasOwnProperty(name)
+            ? `ant-design-vue/es/${replaceList[name]}/style/index`
+            : `ant-design-vue/es/${name}/style/index`;
+        },
+      },
+    ],
+  });
+  return styleImportPlugin;
+}
--- a/build/vite/plugin/svgSprite.ts
+++ b/build/vite/plugin/svgSprite.ts
@ -0,0 +1,17 @@
+/**
+ *  Vite Plugin for fast creating SVG sprites.
+ * https://github.com/anncwb/vite-plugin-svg-icons
+ */
+
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import path from 'path';
+
+export function configSvgIconsPlugin(isBuild: boolean) {
+  const svgIconsPlugin = createSvgIconsPlugin({
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    svgoOptions: isBuild,
+    // default
+    symbolId: 'icon-[dir]-[name]',
+  });
+  return svgIconsPlugin;
+}
--- a/build/vite/plugin/theme.ts
+++ b/build/vite/plugin/theme.ts
@ -0,0 +1,89 @@
+/**
+ * Vite plugin for website theme color switching
+ * https://github.com/xingyuv/vite-plugin-theme
+ */
+import type { PluginOption } from 'vite';
+import path from 'path';
+import {
+  viteThemePlugin,
+  antdDarkThemePlugin,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+} from 'vite-vue-plugin-theme';
+import { getThemeColors, generateColors } from '../../config/themeConfig';
+import { generateModifyVars } from '../../generate/generateModifyVars';
+
+export function configThemePlugin(isBuild: boolean): PluginOption[] {
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+  });
+  const plugin = [
+    viteThemePlugin({
+      resolveSelector: (s) => {
+        s = s.trim();
+        switch (s) {
+          case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+            return '.ant-steps-item-icon > .ant-steps-icon';
+          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
+          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
+          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
+            return s;
+          case '.ant-steps-item-icon > .ant-steps-icon':
+            return s;
+          case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
+            return s;
+          default:
+            if (s.indexOf('.ant-btn') >= -1) {
+              // 按钮被重新定制过，需要过滤掉class防止覆盖
+              return s;
+            }
+        }
+        return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
+      },
+      colorVariables: [...getThemeColors(), ...colors],
+    }),
+    antdDarkThemePlugin({
+      preloadFiles: [
+        path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
+        //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
+        path.resolve(process.cwd(), 'src/design/index.less'),
+      ],
+      filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
+      // extractCss: false,
+      darkModifyVars: {
+        ...generateModifyVars(true),
+        'text-color': '#c9d1d9',
+        'primary-1': 'rgb(255 255 255 / 8%)',
+        'text-color-base': '#c9d1d9',
+        'component-background': '#151515',
+        'heading-color': 'rgb(255 255 255 / 65%)',
+        // black: '#0e1117',
+        // #8b949e
+        'text-color-secondary': '#8b949e',
+        'border-color-base': '#303030',
+        // 'border-color-split': '#30363d',
+        'item-active-bg': '#111b26',
+        'app-content-background': '#1e1e1e',
+        'tree-node-selected-bg': '#11263c',
+
+        'alert-success-border-color': '#274916',
+        'alert-success-bg-color': '#162312',
+        'alert-success-icon-color': '#49aa19',
+        'alert-info-border-color': '#153450',
+        'alert-info-bg-color': '#111b26',
+        'alert-info-icon-color': '#177ddc',
+        'alert-warning-border-color': '#594214',
+        'alert-warning-bg-color': '#2b2111',
+        'alert-warning-icon-color': '#d89614',
+        'alert-error-border-color': '#58181c',
+        'alert-error-bg-color': '#2a1215',
+        'alert-error-icon-color': '#a61d24',
+      },
+    }),
+  ];
+
+  return plugin as unknown as PluginOption[];
+}
--- a/build/vite/plugin/visualizer.ts
+++ b/build/vite/plugin/visualizer.ts
@ -0,0 +1,17 @@
+/**
+ * Package file volume analysis
+ */
+import visualizer from 'rollup-plugin-visualizer';
+import { isReportMode } from '../../utils';
+
+export function configVisualizerConfig() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    }) as Plugin;
+  }
+  return [];
+}
--- a/build/vite/proxy.ts
+++ b/build/vite/proxy.ts
@ -0,0 +1,36 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
+import type { ProxyOptions } from 'vite';
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions>;
+
+const httpsRE = /^https:\/\//;
+
+/**
+ * Generate proxy
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const isHttps = httpsRE.test(target);
+    if (prefix.length > 255) {
+      throw new Error('字符长度超出255个字符');
+    }
+    // https://github.com/http-party/node-http-proxy#options
+    ret[prefix] = {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
+      // https is require secure=false
+      ...(isHttps ? { secure: false } : {}),
+    };
+  }
+  return ret;
+}
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -0,0 +1,33 @@
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'subject-case': [0],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types',
+        'release',
+      ],
+    ],
+  },
+};
--- a/dev_tools/template_extend.js
+++ b/dev_tools/template_extend.js
@ -0,0 +1,270 @@
+const fs = require('fs');
+const path = require('path');
+const filePath = path.join(process.cwd(), 'config.ts');
+const argv = process.argv;
+const fixResponsive = argv.indexOf('fix-responsive') > 0;
+const templates = require('./templates');
+
+if (fs.existsSync(filePath)) {
+    console.log('Reading ' + filePath);
+    const file = fs.readFileSync(filePath, 'utf-8');
+    const fileArr = file.split('\n');
+    const confArr = [];
+    let parseStart = false;
+
+    fileArr.forEach((row) => {
+        if (!parseStart && row.indexOf('export const formProps: FormProps =') >= 0) {
+            parseStart = true;
+            confArr.push('{');
+            return;
+        }
+        if (parseStart) {
+            if (row.indexOf('};') === 0) {
+                confArr.push('}');
+                parseStart = false;
+                return;
+            }
+            confArr.push(row);
+        }
+    });
+    console.log('total rows: ' + confArr.length);
+    const funStr = `
+        const uploadApi = ''; // 修复文件上传引用的API
+        return ${confArr.join('\n')}
+    `;
+    const fun = new Function(funStr);
+    formProps = fun();
+} else {
+    process.exit(0);
+}
+
+let tmpl = '';
+let tabCount = 0;
+let tableCount = 0;
+const refList = [];
+const refExportList = [];
+const importList = [];
+const components = [];
+
+// 用于将config的表单格式展开成字段，以便二开
+formProps.schemas.forEach((prop) => {
+    appendTmpl(prop);
+});
+
+function appendTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    // 栅格布局
+    tmpl += `<!-- ${prop.label || prop.field || prop.component}  -->\n`;
+    if (prop.component == 'Grid') {
+        prop.children.forEach((child) => {
+            child.list.forEach((listChild) => {
+                appendTmpl(listChild);
+            });
+        });
+        return;
+    } else if (prop.component == 'Tab') {
+        return appendTabTmpl(prop);
+    } else if (prop.component == 'TableLayout') {
+        return appendTableLayoutTmpl(prop);
+    } else if (prop.component == 'Card') {
+        return appendCardTmpl(prop);
+    } else if (prop.component == 'SubForm') {
+        return appendSubFormTmpl(prop);
+    }
+    tmpl += `
+    <Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
+        <template v-if="showComponent(${schema})">
+            <SimpleFormItem v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
+        </template>
+    </Col>
+    `;
+}
+
+function appendSubFormTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    tableCount += 1;
+    createSubFormFile();
+    tmpl += `
+    <Col :span="getColWidth(${schema})">
+        <template v-if="showComponent(${schema})">
+            <CustomDevTableItem${tableCount} v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
+        </template>
+    </Col>
+    `;
+    importList.push(`import CustomDevTableItem${tableCount} from './CustomDevTableItem${tableCount}.vue';`);
+    components.push(`CustomDevTableItem${tableCount}`);
+}
+
+function createSubFormFile() {
+    const subFormStr = templates.subFormTmpl;
+    fs.writeFile(`./CustomDevSubForm${tableCount}.vue`, subFormStr, (err) => {
+        if (err) throw err;
+        console.log(`Write SubForm CustomDevSubForm${tabCount}.vue success`);
+    });
+    const formItemStr = templates.subFormItem.replace('[count]', tableCount);
+    fs.writeFile(`./CustomDevTableItem${tableCount}.vue`, formItemStr, (err) => {
+        if (err) throw err;
+        console.log(`Write FormItem CustomDevTableItem${tabCount}.vue success`);
+    });
+}
+
+function appendTabTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    tabCount += 1;
+    refList.push(`const activeKey${tabCount} = ref(0);`);
+    refExportList.push(`activeKey${tabCount}`);
+    tmpl += `<Tabs v-model:activeKey="activeKey${tabCount}" v-bind="getTabProps('${prop.key}')">\n`;
+    prop.children.forEach((tabChild, index) => {
+        tmpl += `<TabPane :forceRender="true" :key="${index}" tab="${tabChild.name}">\n`;
+        tabChild.list.forEach((listChild) => {
+            appendTmpl(listChild);
+        });
+        tmpl += `</TabPane>\n`;
+    });
+    tmpl += `</Tabs>\n`;
+    if(components.indexOf('TabPane') < 0){
+        components.push('TabPane');
+        components.push('Tabs');
+        importList.push(`import { TabPane, Tabs } from 'ant-design-vue';`);
+    }
+}
+
+function appendTableLayoutTmpl(prop) {
+    if (components.indexOf('TableLayoutPreview') < 0) {
+        components.push('TableLayoutPreview');
+        importList.push(`import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';`);
+    }
+    let schema = `schemaMap['${prop.key}']`;
+    tmpl += `<TableLayoutPreview :element="${schema}">\n`;
+    tmpl += `   <template #tdElement="{ tdElement }">\n`;
+    tmpl += `        <div class="h-full">\n`;
+    tmpl += `<div :style="getTdStyle(tdElement)">\n`;
+    tmpl += `
+    <template v-for="childSchema in tdElement.children" :key="childSchema.field">
+        <SimpleFormItem v-model:value="formModel[childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
+    </template>
+    `;
+    tmpl += `</div>\n`;
+    tmpl += `        </div>\n`;
+    tmpl += `    </template>\n`;
+    tmpl += `</TableLayoutPreview>\n`;
+}
+
+function appendCardTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    tmpl += `<CollapseContainer :bordered="false" :hasLeftBorder="true" title="${prop.componentProps.title}">\n`;
+    prop.children[0].list.forEach((lChild) => {
+        appendTmpl(lChild);
+    });
+    tmpl += `</CollapseContainer>\n`;
+    if (components.indexOf('CollapseContainer') < 0) {
+        components.push('CollapseContainer');
+        importList.push(`import { CollapseContainer } from '/@/components/Container';`);
+    }
+}
+
+const fullVue = `
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
+          ${tmpl}
+           <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+</template>
+
+<script>
+    // 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+    import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+    import { Col, Form, Row } from 'ant-design-vue';
+    import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
+    import { ref } from 'vue';
+    import { CheckCircleOutlined } from '@ant-design/icons-vue';
+    ${importList.join('\n')}
+
+    const FormItem = Form.Item;
+
+    export default {
+        components: { 
+            CheckCircleOutlined, 
+            Form, 
+            Col, 
+            SimpleFormItem, 
+            Row, 
+            FormItem
+            ${components.length ? (',' + components.join(',\n')) : ''} 
+        },
+        mixins: [SimpleFormSetup],
+        setup(props, ctx) {
+            const ret = SimpleFormSetup.setup(props, ctx);
+            const expose = ctx.expose;
+            ${refList.join('\n')}
+            
+            return {
+                ${refExportList.length ? refExportList.join(',\n') + ',' : ''}
+                ...ret
+            };
+        },
+        computed: {
+            // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
+            schemaMap() {
+                const schemaMap = {};
+                this.getSchemas.forEach((schema) => {
+                    schemaMap[schema.key] = schema;
+                    if(schema.children) {
+                        schema.children.forEach(sChild=>{
+                           if(sChild.list){
+                               sChild.list.forEach(lChild=>{
+                                   schemaMap[lChild.key] = lChild;
+                               });
+                           } 
+                        });
+                    }
+                });
+                return schemaMap;
+            }
+        },
+        methods: {
+            getIfShow2: function (key) {
+                return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getIsShow2: function (key) {
+                return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getTabProps(key) {
+                const schema = this.schemaMap[key];
+                return {
+                    size: schema.componentProps.tabSize,
+                    tabPosition: schema.componentProps.tabPosition,
+                    type: schema.componentProps.type
+                }
+            },
+            
+            getTdStyle(tdElement) {
+                return {
+                    height: tdElement.height ? tdElement.height + 'px' : '',
+                    minHeight: (tdElement.height || '42') + 'px',
+                    overflow: 'hidden',
+                    padding: '10px'
+                }
+            }
+        }
+    };
+</script>
+`;
+
+fs.writeFile('./CustomDevForm.vue', fullVue, (err) => {
+    if (err) throw err;
+    console.log('The file has been saved!');
+});
--- a/dev_tools/templates.js
+++ b/dev_tools/templates.js
@ -0,0 +1,167 @@
+const subFormTmpl = `
+<template>
+    <div class="form-detail-table">
+        <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
+            <template #summary>
+                <a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
+                    <a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
+                        <a-typography-text v-if="column.componentProps?.subTotal" keyboard> {{ t('合计：') }} {{ sum(data.map((x) => x[column.dataIndex])) }}</a-typography-text>
+                    </a-table-summary-cell>
+                </a-table-summary-row>
+            </template>
+            <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key !== 'action'">
+                    <template v-if="column.key === 'index'">
+                        {{ index + 1 }}
+                    </template>
+                    <FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
+                        <!---如果是checked一类的组件-->
+                        <template v-if="checkedValueComponents.includes(column.componentType)">
+                            <component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
+                        </template>
+                        <!---如果是RangePicker组件-->
+                        <template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
+                            <component
+                                :is="componentMap.get(column.componentType)"
+                                v-model:endField="column.dataIndex.split(',')[1]"
+                                v-model:startField="column.dataIndex.split(',')[0]"
+                                v-model:value="record[column.dataIndex]"
+                                :bordered="showComponentBorder"
+                                :mainKey="mainKey"
+                                :tableIndex="index"
+                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
+                                @change="handleRangePickerChange(record, column.dataIndex)"
+                            />
+                        </template>
+
+                        <!---如果是渲染函数组件-->
+                        <template v-else-if="column.componentType === 'Render'">
+                            <component
+                                :is="
+                                    column.render({
+                                        model: record,
+                                        field: column.dataIndex,
+                                        rules: column.rules,
+                                        componentProps: getComponentsProps(column.componentProps, column.dataIndex, record, index)
+                                    })
+                                "
+                                :bordered="showComponentBorder"
+                            />
+                        </template>
+
+                        <template v-else-if="column.key !== 'index'">
+                            <component
+                                :is="componentMap.get(column.componentType)"
+                                v-model:value="record[column.dataIndex]"
+                                :bordered="showComponentBorder"
+                                :index="index"
+                                :mainKey="mainKey"
+                                :key="column.dataIndex + record['_key_']"
+                                :row="record"
+                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
+                                @blur="onFieldBlur(column, record, index)"
+                                @change="onFieldChange(column, record, index)"
+                            />
+                        </template>
+                    </FormItem>
+                </template>
+                <template v-if="column.key === 'action' && !disabled">
+                    <MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
+                </template>
+            </template>
+        </a-table>
+
+        <div class="tbl-toolbar">
+            <a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
+                {{ buttonName }}
+            </a-button>
+            <a-button v-if="!disabled && !disableAddRow && useAddButton" type="primary" @click="add">
+                <PlusOutlined />
+                {{ t('新增') }}
+            </a-button>
+        </div>
+
+        <FormItemRest>
+            <MultipleSelect
+                ref="MultipleSelectRef"
+                v-model:multipleDialog="multipleDialog"
+                :apiConfig="apiConfig"
+                :datasourceType="preloadType"
+                :dicOptions="dicOptions"
+                :isSubFormUse="true"
+                :params="{ itemId }"
+                popupType="preload"
+                @submit="renderSubFormList"
+            />
+        </FormItemRest>
+    </div>
+</template>
+
+<script>
+    import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
+    import { Form } from 'ant-design-vue';
+    const FormItem = Form.Item;
+    const FormItemRest = Form.ItemRest;
+
+    export default {
+        extends: SubFormV2Setup,
+        components: {
+            FormItem,
+            Form,
+            FormItemRest
+        },
+        setup(props, ctx) {
+            const ret = SubFormV2Setup.setup(props, ctx);
+            return {
+                ...ret
+            };
+        }
+    };
+</script>
+`;
+
+const subFormItem = `
+<template>
+    <!-- formitem的标题一般不用，如果不需要控制明细表的权限显隐，这个formitem可以去掉，或者用div代替 -->
+    <FormItem
+        v-if="getShow(schema)"
+        v-show="getIsShow(schema)"
+        :key="schema.key"
+        :label="getComponentsProps.showLabel ? schema.label : ''"
+        :label-col="labelCol"
+        :labelAlign="formProps?.labelAlign"
+        :name="schema.field"
+        :wrapperCol="itemLabelWidthProp.wrapperCol"
+    >
+        <!-- 这里原先是component is写法，现在需要换成你自己的明细表 -->
+        <!-- 也可以根据v-if渲染不同表格，这样就不需要定义很多次FormItem了 -->
+        <custom-dev-sub-form v-model:value="formModel[schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
+    </FormItem>
+</template>
+
+<script>
+    import SimpleFormItemSetup from '/@/components/SimpleForm/src/components/SimpleFormItemSetup.vue';
+    import CustomDevSubForm from './CustomDevSubForm[count].vue';
+    import { Form } from 'ant-design-vue';
+    const FormItem = Form.Item;
+
+    export default {
+        extends: SimpleFormItemSetup,
+        components: {
+            CustomDevSubForm,
+            FormItem
+        },
+        setup(props, ctx) {
+            const ret = SimpleFormItemSetup.setup(props, ctx);
+            return {
+                ...ret
+            };
+        }
+    };
+</script>
+`;
+
+module.exports = {
+    subFormTmpl,
+    subFormItem
+}
--- a/docker/50x.html
+++ b/docker/50x.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Error</title>
+<style>
+html { color-scheme: light dark; }
+body { width: 35em; margin: 0 auto;
+font-family: Tahoma, Verdana, Arial, sans-serif; }
+</style>
+</head>
+<body>
+<h1>An error occurred.</h1>
+<p>Sorry, the page you are looking for is currently unavailable.<br/>
+Please try again later.</p>
+<p>If you are the system administrator of this resource then you should check
+the error log for details.</p>
+<p><em>Faithfully yours, nginx.</em></p>
+</body>
+</html>
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@ -0,0 +1,13 @@
+FROM --platform=linux/arm64 docker.xuanyuan.run/library/nginx:1.29.0
+
+COPY ./nginx.conf /etc/nginx/nginx.conf
+COPY ./50x.html /usr/share/nginx/html/50x.html
+COPY ./dist/ /usr/share/nginx/html/
+
+EXPOSE 8080
+
+CMD ["nginx","-g","daemon off;"]
+
+#  docker build -t pcitc/itc-web:1.0.0 .
+
+
--- a/docker/Dockerfile-node
+++ b/docker/Dockerfile-node
@ -0,0 +1,30 @@
+FROM --platform=linux/arm64 docker.xuanyuan.run/library/node:20.15.1-slim
+
+
+# 设置工作目录
+WORKDIR /app
+
+
+
+# 安装依赖（http-server和http-proxy-middleware）
+RUN npm install http-server http-proxy-middleware --production
+
+# 复制自定义服务器脚本server.js
+COPY ./server.js /app/
+
+
+# 复制静态文件到工作目录（根据实际项目调整，如dist目录）
+# 假设静态文件在当前目录的dist文件夹下
+RUN mkdir -p /app/html
+
+COPY index.html /app/html/index.html
+
+# 暴露端口（与server.js中配置的port一致）
+EXPOSE 8080
+
+# 启动命令：通过node运行server.js
+CMD ["node", "server.js"]
+
+# docker build -f Dockerfile-node -t node-http-server:1.0.3 .
+
+
--- a/docker/Dockerfile-vue
+++ b/docker/Dockerfile-vue
@ -0,0 +1,13 @@
+FROM --platform=linux/arm64 node-vue:1.0.0
+
+WORKDIR /app
+
+COPY . .
+
+EXPOSE 8080
+
+CMD ["npm","run","prod"]
+
+#  docker build -f Dockerfile-vue -t pcitc/itc-web:1.0.2 .
+
+
--- a/docker/build-docker-1.bat
+++ b/docker/build-docker-1.bat
@ -0,0 +1,67 @@
+@echo off
+chcp 65001 >nul 2>&1  :: <20><><EFBFBD><EFBFBD>UTF-8<><38><EFBFBD>룬<EFBFBD><EBA3AC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+setlocal enabledelayedexpansion
+
+:: <20><><EFBFBD><EFBFBD>·<EFBFBD><C2B7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ŀ¼ΪdockerĿ¼<C4BF><C2BC><EFBFBD><EFBFBD>һ<EFBFBD><D2BB><EFBFBD><EFBFBD>
+set "ROOT_DIR=../"
+set "DIST_DIR=%ROOT_DIR%dist"
+set "DOCKER_DIR=%~dp0"
+echo ======================
+echo <20><>Ŀ¼ %ROOT_DIR%
+echo <20><><EFBFBD><EFBFBD>Ŀ¼ %DIST_DIR%
+echo DockerĿ¼ %DOCKER_DIR%
+echo ======================
+
+if not exist "%DIST_DIR%" (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>δ<EFBFBD><CEB4><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʧ<EFBFBD><CAA7>
+    pause
+    exit /b 1
+)
+
+:: <20><><EFBFBD><EFBFBD>2<EFBFBD><32><EFBFBD><EFBFBD><EFBFBD><EFBFBD>dist<73><74>dockerĿ¼
+echo ======================
+echo <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC>dockerĿ¼...
+echo ======================
+
+if exist "%DOCKER_DIR%dist" (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD>ɵ<EFBFBD>distĿ¼...
+    rd /s /q "%DOCKER_DIR%dist" || (
+        echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD>ɾ<EFBFBD><C9BE><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC><EFBFBD><EFBFBD><EFBFBD>ر<EFBFBD>ռ<EFBFBD>õĳ<C3B5><C4B3><EFBFBD>
+        pause
+        exit /b 1
+    )
+)
+
+
+xcopy "%DIST_DIR%" "%DOCKER_DIR%dist" /e /i /h /r /y || (
+    echo <20><><EFBFBD>󣺸<EFBFBD><F3A3BAB8><EFBFBD>distĿ¼ʧ<C2BC><CAA7>
+    pause
+    exit /b 1
+)
+
+:: <20><><EFBFBD><EFBFBD>3<EFBFBD><33><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Docker<65><72><EFBFBD><EFBFBD>
+echo ======================
+echo <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>Docker<65><72><EFBFBD><EFBFBD>...
+echo ======================
+cd /d "%DOCKER_DIR%" || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD><DEB7><EFBFBD><EFBFBD><EFBFBD>dockerĿ¼ %DOCKER_DIR%
+    pause
+    exit /b 1
+)
+
+where docker >nul 2>nul || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>δ<EFBFBD>ҵ<EFBFBD>docker<65><72><EFBFBD>밲װ<EBB0B2><D7B0><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Docker
+    pause
+    exit /b 1
+)
+
+docker build -t pcitc/itc-web:1.0.1 . || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>docker build ִ<><D6B4>ʧ<EFBFBD><CAA7>
+    pause
+    exit /b 1
+)
+
+echo ======================
+echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɣ<EFBFBD><C9A3><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>pcitc/itc-web:1.0.1
+echo ======================
+pause
--- a/docker/build-docker.bat
+++ b/docker/build-docker.bat
@ -0,0 +1,130 @@
+@echo off
+chcp 65001 >nul 2>&1  :: <20><><EFBFBD><EFBFBD>UTF-8<><38><EFBFBD>룬<EFBFBD><EBA3AC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+setlocal enabledelayedexpansion
+
+:: <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>־<EFBFBD>ļ<EFBFBD>·<EFBFBD><C2B7>
+set "LOG_FILE=%~dp0docker_build.log"
+
+:: <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>־<EFBFBD>ļ<EFBFBD>
+echo ============================================== > "%LOG_FILE%"
+echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʼʱ<CABC><CAB1>: %date% %time% >> "%LOG_FILE%"
+echo ============================================== >> "%LOG_FILE%"
+
+:: <20><><EFBFBD><EFBFBD>Ŀ¼<C4BF><C2BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ǰĿ¼ΪdockerĿ¼<C4BF><C2BC><EFBFBD><EFBFBD>һ<EFBFBD><D2BB>
+set "ROOT_DIR=../"
+set "DIST_DIR=%ROOT_DIR%dist"
+set "DOCKER_DIR=%~dp0"
+
+:: <20><><EFBFBD><EFBFBD>Ŀ¼<C4BF><C2BC>Ϣ<EFBFBD><CFA2>д<EFBFBD><D0B4><EFBFBD><EFBFBD>־
+echo ======================
+echo <20><>Ŀ¼ %ROOT_DIR%
+echo <20><><EFBFBD><EFBFBD>Ŀ¼ %DIST_DIR%
+echo DockerĿ¼ %DOCKER_DIR%
+echo ----------------------
+echo ====================== >> "%LOG_FILE%"
+echo <20><>Ŀ¼ %ROOT_DIR% >> "%LOG_FILE%"
+echo <20><><EFBFBD><EFBFBD>Ŀ¼ %DIST_DIR% >> "%LOG_FILE%"
+echo DockerĿ¼ %DOCKER_DIR% >> "%LOG_FILE%"
+echo ---------------------- >> "%LOG_FILE%"
+
+:: <20><><EFBFBD><EFBFBD>1:<3A>ڸ<EFBFBD>Ŀ¼ִ<C2BC><D6B4>npm run build
+echo ======================
+echo <20><>ʼִ<CABC><D6B4>npm run build...
+echo ======================
+echo ====================== >> "%LOG_FILE%"
+echo %date% %time% <20><>ʼִ<CABC><D6B4>npm run build... >> "%LOG_FILE%"
+echo ====================== >> "%LOG_FILE%"
+
+cd /d "%ROOT_DIR%" || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD><DEB7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ŀ¼ %ROOT_DIR%
+    echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD><DEB7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ŀ¼ %ROOT_DIR% >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+
+where npm >nul 2>nul || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>δ<EFBFBD>ҵ<EFBFBD>npm<70><6D><EFBFBD>밲װNode.js<6A><73><EFBFBD><EFBFBD><EFBFBD>û<EFBFBD><C3BB><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+    echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>δ<EFBFBD>ҵ<EFBFBD>npm<70><6D><EFBFBD>밲װNode.js<6A><73><EFBFBD><EFBFBD><EFBFBD>û<EFBFBD><C3BB><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+
+npm run build || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>npm run build ִ<><D6B4>ʧ<EFBFBD><CAA7>
+    echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>npm run build ִ<><D6B4>ʧ<EFBFBD><CAA7> >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+
+echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> >> "%LOG_FILE%"
+pause
+
+:: <20><><EFBFBD><EFBFBD>2:<3A><><EFBFBD><EFBFBD>dist<73><74>dockerĿ¼
+echo ======================
+echo <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC>dockerĿ¼...
+echo ======================
+echo ====================== >> "%LOG_FILE%"
+echo %date% %time% <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC>dockerĿ¼... >> "%LOG_FILE%"
+echo ====================== >> "%LOG_FILE%"
+
+if exist "%DOCKER_DIR%dist" (
+    echo <20>Ƴ<EFBFBD><C6B3>Ѵ<EFBFBD><D1B4>ڵ<EFBFBD>distĿ¼...
+    echo %date% %time% <20>Ƴ<EFBFBD><C6B3>Ѵ<EFBFBD><D1B4>ڵ<EFBFBD>distĿ¼... >> "%LOG_FILE%"
+    rd /s /q "%DOCKER_DIR%dist" || (
+        echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD>ɾ<EFBFBD><C9BE><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƿ<EFBFBD><C7B7><EFBFBD>ռ<EFBFBD><D5BC>
+        echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD>ɾ<EFBFBD><C9BE><EFBFBD><EFBFBD>distĿ¼<C4BF><C2BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƿ<EFBFBD><C7B7><EFBFBD>ռ<EFBFBD><D5BC> >> "%LOG_FILE%"
+        pause
+        exit /b 1
+    )
+)
+
+pause
+
+xcopy "%DIST_DIR%" "%DOCKER_DIR%dist" /e /i /h /r /y || (
+    echo <20><><EFBFBD>󣺸<EFBFBD><F3A3BAB8><EFBFBD>distĿ¼ʧ<C2BC><CAA7>
+    echo %date% %time% <20><><EFBFBD>󣺸<EFBFBD><F3A3BAB8><EFBFBD>distĿ¼ʧ<C2BC><CAA7> >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+echo %date% %time% distĿ¼<C4BF><C2BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> >> "%LOG_FILE%"
+
+:: <20><><EFBFBD><EFBFBD>3:<3A><><EFBFBD><EFBFBD>Docker<65><72><EFBFBD><EFBFBD>
+echo ======================
+echo <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>Docker<65><72><EFBFBD><EFBFBD>...
+echo ======================
+echo ====================== >> "%LOG_FILE%"
+echo %date% %time% <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>Docker<65><72><EFBFBD><EFBFBD>... >> "%LOG_FILE%"
+echo ====================== >> "%LOG_FILE%"
+
+cd /d "%DOCKER_DIR%" || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD><DEB7><EFBFBD><EFBFBD><EFBFBD>dockerĿ¼ %DOCKER_DIR%
+    echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>޷<EFBFBD><DEB7><EFBFBD><EFBFBD><EFBFBD>dockerĿ¼ %DOCKER_DIR% >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+
+where docker >nul 2>&1 || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>δ<EFBFBD>ҵ<EFBFBD>docker<65><72><EFBFBD>밲װ<EBB0B2><D7B0><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Docker
+    echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>δ<EFBFBD>ҵ<EFBFBD>docker<65><72><EFBFBD>밲װ<EBB0B2><D7B0><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Docker >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+
+docker build -t pcitc/itc-web:1.0.0 . || (
+    echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>docker build ִ<><D6B4>ʧ<EFBFBD><CAA7>
+    echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>docker build ִ<><D6B4>ʧ<EFBFBD><CAA7> >> "%LOG_FILE%"
+    pause
+    exit /b 1
+)
+
+echo ======================
+echo <20><><EFBFBD><EFBFBD><EFBFBD>ɹ<EFBFBD><C9B9><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϊpcitc/itc-web:1.0.0
+echo ======================
+echo ====================== >> "%LOG_FILE%"
+echo %date% %time% <20><><EFBFBD><EFBFBD><EFBFBD>ɹ<EFBFBD><C9B9><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϊpcitc/itc-web:1.0.0 >> "%LOG_FILE%"
+echo ====================== >> "%LOG_FILE%"
+echo <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʱ<EFBFBD><CAB1>: %date% %time% >> "%LOG_FILE%"
+echo ============================================== >> "%LOG_FILE%"
+
+pause
--- a/docker/docker-itc-web.sh
+++ b/docker/docker-itc-web.sh
@ -0,0 +1,135 @@
+#!/bin/bash
+
+# 定义变量
+CONTAINER_NAME="itc-web"
+IMAGE_NAME="pcitc/itc-web"
+IMAGE_VERSION="1.0.0"
+IMAGE_FULL="$IMAGE_NAME:$IMAGE_VERSION"
+PORT=80  # 服务暴露端口
+CONTAINER_PORT=8080  # 服务暴露端口
+HTML_DIR="/docker-data/nginx/html"  # 服务暴露端口
+CONF_DIR="/docker-data/nginx/conf"  # 服务暴露端口
+TZ="Asia/Shanghai"  # 时区设置
+
+# 显示帮助信息
+show_help() {
+    echo "使用方法: $0 [操作类型]"
+    echo "操作类型:"
+    echo "  deploy   - 部署并启动服务容器"
+    echo "  remove   - 停止并删除容器及数据/日志目录"
+    echo "  restart  - 重启容器"   
+    echo "  logs     - 查看容器日志"
+    echo "  help     - 显示帮助信息"
+}
+
+
+
+# 部署服务
+deploy_service() {
+    # 创建数据和日志目录
+    if [ ! -d "$HTML_DIR" ]; then
+        echo "创建html数据目录: $HTML_DIR"
+        mkdir -p "$HTML_DIR"
+        chmod 777 "$HTML_DIR"
+    fi
+    
+    # 创建数据和日志目录
+    if [ ! -d "$CONF_DIR" ]; then
+        echo "创建配置数据目录: $CONF_DIR"
+        mkdir -p "$CONF_DIR"
+        chmod 777 "$CONF_DIR"
+    fi
+
+    echo "部署镜像【$IMAGE_FULL】"
+    # 检查容器是否已存在，存在则停止并删除
+    if [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
+        echo "停止并删除现有容器: $CONTAINER_NAME"
+        docker stop $CONTAINER_NAME >/dev/null
+        docker rm $CONTAINER_NAME >/dev/null
+    fi
+
+    # 启动服务容器
+    echo "启动服务容器..."
+    docker run -d --privileged --restart always \
+        --name $CONTAINER_NAME \
+        -p $PORT:$CONTAINER_PORT \
+        -v $HTML_DIR:/usr/share/nginx/html \
+        -v $CONF_DIR:/etc/nginx \
+        $IMAGE_FULL
+
+    # 检查启动状态
+    if [ "$(docker ps -aq -f name=$CONTAINER_NAME -f status=running)" ]; then
+        echo "服务启动成功！"
+        echo "容器名称: $CONTAINER_NAME"
+        echo "访问地址: http://localhost:$PORT"
+        echo "数据目录: $HTML_DIR"
+        echo "配置目录: $CONF_DIR"
+    else
+        echo "服务启动失败，日志如下："
+        docker logs $CONTAINER_NAME
+        exit 1
+    fi
+}
+
+# 删除服务
+remove_service() {
+    # 检查容器是否存在
+    if [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
+        echo "停止容器: $CONTAINER_NAME"
+        docker stop $CONTAINER_NAME >/dev/null
+        
+        echo "删除容器: $CONTAINER_NAME"
+        docker rm $CONTAINER_NAME >/dev/null
+    else
+        echo "容器 $CONTAINER_NAME 不存在"
+    fi
+}
+
+# 启动服务
+restart_service() { 
+  if [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
+        echo "重启容器: $CONTAINER_NAME"
+        docker restart $CONTAINER_NAME >/dev/null
+    else
+        echo "容器 $CONTAINER_NAME 不存在"
+    fi
+}
+
+# 查看日志
+show_logs() {
+    if [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
+        echo "查看 $CONTAINER_NAME 容器日志 (按 Ctrl+C 退出)..."
+        docker logs -f --tail 100 $CONTAINER_NAME
+    else
+        echo "容器 $CONTAINER_NAME 不存在"
+    fi
+}
+
+# 主逻辑
+if [ $# -lt 1 ]; then
+    show_help
+    exit 1
+fi
+
+case "$1" in
+    deploy)
+        deploy_service
+        ;;
+    remove)
+        remove_service
+        ;;
+    restart)
+        restart_service
+        ;;
+    logs)
+        show_logs
+        ;;
+    help)
+        show_help
+        ;;
+    *)
+        echo "无效的操作类型: $1"
+        show_help
+        exit 1
+        ;;
+esac
--- a/docker/docker_build.log
+++ b/docker/docker_build.log
@ -0,0 +1,11 @@
+============================================== 
+<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʼʱ<EFBFBD><EFBFBD>: 2025/08/07 <20><><EFBFBD><EFBFBD> 14:09:46.88 
+============================================== 
+====================== 
+<EFBFBD><EFBFBD>Ŀ¼ ../ 
+<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ŀ¼ ../dist 
+DockerĿ¼ F:\<5C><><EFBFBD>ݹ<EFBFBD>Ӧ<EFBFBD><D3A6>\code\study\itc-framework-front\docker\ 
+---------------------- 
+====================== 
+2025/08/07 <20><><EFBFBD><EFBFBD> 14:09:47.02 <20><>ʼִ<CABC><D6B4>npm run build... 
+====================== 
--- a/docker/index.html
+++ b/docker/index.html
@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>静态服务器首页</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#64748b',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .text-shadow {
+                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .card-hover {
+                transition: all 0.3s ease;
+            }
+            .card-hover:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <header class="bg-gradient-to-r from-primary to-blue-700 text-white py-16 px-4">
+        <div class="container mx-auto max-w-4xl">
+            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-shadow mb-4">
+                静态服务器
+            </h1>
+            <p class="text-xl opacity-90 max-w-2xl">
+                已成功启动，可访问静态文件和通过代理接口与后端交互
+            </p>
+        </div>
+    </header>
+
+    <main class="container mx-auto max-w-4xl px-4 py-12">
+        <div class="grid md:grid-cols-2 gap-8">
+            <!-- 静态文件测试卡片 -->
+            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
+                <div class="text-primary text-3xl mb-4">
+                    <i class="fa fa-file-text-o" aria-hidden="true"></i>
+                </div>
+                <h2 class="text-xl font-semibold mb-3">静态文件服务</h2>
+                <p class="text-gray-600 mb-4">
+                    该服务器可提供静态文件访问，当前根目录为 <code class="bg-gray-100 px-2 py-1 rounded">./html</code>
+                </p>
+                <div class="flex flex-wrap gap-2">
+                    <a href="/" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
+                        <i class="fa fa-home mr-2"></i>当前首页
+                    </a>
+                    <a href="/test.txt" class="inline-flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
+                        <i class="fa fa-file-text mr-2"></i>测试文件
+                    </a>
+                </div>
+            </div>
+
+            <!-- 代理接口测试卡片 -->
+            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
+                <div class="text-green-500 text-3xl mb-4">
+                    <i class="fa fa-exchange" aria-hidden="true"></i>
+                </div>
+                <h2 class="text-xl font-semibold mb-3">API代理服务</h2>
+                <p class="text-gray-600 mb-4">
+                    所有 <code class="bg-gray-100 px-2 py-1 rounded">/api</code> 前缀的请求将代理到:
+                    <br>
+                    <code class="bg-gray-100 px-2 py-1 rounded">http://10.4.126.116:23000</code>
+                </p>
+                <button id="testApiBtn" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition">
+                    <i class="fa fa-play-circle mr-2"></i>测试API连接
+                </button>
+                <div id="apiTestResult" class="mt-4 hidden"></div>
+            </div>
+        </div>
+
+        <div class="mt-12 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fa fa-info-circle text-primary mr-2"></i>
+                服务器信息
+            </h2>
+            <ul class="space-y-2 text-gray-700">
+                <li class="flex">
+                    <span class="w-32 font-medium">服务器地址:</span>
+                    <span>http://localhost:8080</span>
+                </li>
+                <li class="flex">
+                    <span class="w-32 font-medium">启动时间:</span>
+                    <span id="startTime"></span>
+                </li>
+                <li class="flex">
+                    <span class="w-32 font-medium">静态文件目录:</span>
+                    <span>./html</span>
+                </li>
+                <li class="flex">
+                    <span class="w-32 font-medium">代理目标:</span>
+                    <span>http://10.4.126.116:23000</span>
+                </li>
+            </ul>
+        </div>
+    </main>
+
+    <footer class="bg-gray-800 text-white py-8 mt-16">
+        <div class="container mx-auto max-w-4xl px-4 text-center">
+            <p>&copy; <span id="year"></span> 静态服务器 | 基于Node.js构建</p>
+        </div>
+    </footer>
+
+    <script>
+        // 设置当前年份
+        document.getElementById('year').textContent = new Date().getFullYear();
+        
+        // 设置启动时间
+        document.getElementById('startTime').textContent = new Date().toLocaleString();
+        
+        // API测试功能
+        document.getElementById('testApiBtn').addEventListener('click', async () => {
+            const resultEl = document.getElementById('apiTestResult');
+            const btn = document.getElementById('testApiBtn');
+            
+            // 显示加载状态
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>测试中...';
+            resultEl.className = 'mt-4 text-blue-600';
+            resultEl.innerHTML = '正在发送请求到 /api ...';
+            
+            try {
+                // 发送测试请求（根据实际API调整路径）
+                const response = await fetch('/api/system/generator/generator-code/code-first', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ test: 'api-check' }),
+                    timeout: 5000
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    resultEl.className = 'mt-4 text-green-600 p-3 bg-green-50 rounded-md';
+                    resultEl.innerHTML = `
+                        <div class="font-medium mb-1">API代理成功!</div>
+                        <pre class="text-sm overflow-x-auto">${JSON.stringify(data, null, 2)}</pre>
+                    `;
+                } else {
+                    resultEl.className = 'mt-4 text-yellow-600 p-3 bg-yellow-50 rounded-md';
+                    resultEl.innerHTML = `
+                        <div class="font-medium mb-1">API返回非成功状态 (${response.status})</div>
+                        <pre class="text-sm overflow-x-auto">${JSON.stringify(data, null, 2)}</pre>
+                    `;
+                }
+            } catch (error) {
+                resultEl.className = 'mt-4 text-red-600 p-3 bg-red-50 rounded-md';
+                resultEl.innerHTML = `
+                    <div class="font-medium mb-1">API请求失败</div>
+                    <div class="text-sm">${error.message}</div>
+                `;
+            } finally {
+                // 恢复按钮状态
+                btn.disabled = false;
+                btn.innerHTML = '<i class="fa fa-play-circle mr-2"></i>测试API连接';
+            }
+        });
+    </script>
+</body>
+</html>
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@ -0,0 +1,153 @@
+
+#user  nobody;
+
+# 工作进程数：自动匹配CPU核心数（比固定值更灵活）
+worker_processes  auto;
+# 绑定CPU核心（减少进程切换开销，0,1,2,3对应4核CPU）
+worker_cpu_affinity 0001 0010 0100 1000;
+
+# 错误日志：开启并按级别分离（方便问题定位）
+error_log  /var/log/nginx/error.log notice;
+pid  /run/nginx.pid;
+
+# 全局资源限制（避免文件描述符不足）
+worker_rlimit_nofile 65535;
+
+events {
+    # 每个工作进程最大连接数（结合系统ulimit调整）
+    worker_connections  8192;
+    # 高效事件模型（Linux推荐epoll，FreeBSD用kqueue）
+    use epoll;
+    # 一次性接受所有新连接（提高连接处理效率）
+    multi_accept on;
+}
+
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    # 日志格式优化：增加响应时间和 upstream 信息（便于性能分析）
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for" '
+                      '$request_time $upstream_response_time';
+    # 访问日志：开启（生产环境可按需关闭或调整路径）
+    access_log  /var/log/nginx/access.log  main;
+
+    # 高效文件传输
+    sendfile        on;
+    # 静态文件传输优化（配合sendfile使用，减少TCP包数量）
+    tcp_nopush      on;
+    # 动态内容优化（减少网络延迟）
+    tcp_nodelay     on;
+
+    # 长连接设置
+    keepalive_timeout  65;          # 连接超时时间
+    keepalive_requests 1000;        # 每个连接最大请求数（防止长连接占用）
+    keepalive_disable msie6;        # 对老旧IE禁用长连接
+
+    # 客户端请求限制（防攻击）
+    client_max_body_size 100m;       # 缩小上传限制（1024m过大，按需调整）
+    client_body_buffer_size 1m;     # 客户端请求体缓冲区（原1024k保留，单位统一）
+    client_body_timeout 120s;        # 客户端发送请求体超时
+    client_header_timeout 120s;      # 客户端发送请求头超时
+
+
+    # Gzip压缩优化
+    gzip  on;
+    gzip_min_length 1k;             # 最小压缩尺寸
+    gzip_comp_level 5;              # 压缩级别（平衡CPU和带宽）
+    gzip_types 
+    text/plain text/css text/xml application/json application/javascript application/x-javascript text/javascript application/xml application/xml+rss text/rss;  # 明确需要压缩的类型
+    gzip_disable "MSIE [1-6]\.";    # 禁用老旧IE压缩
+    gzip_vary on;                   # 告诉代理服务器缓存压缩和非压缩版本
+    gzip_buffers 16 8k;             # 压缩缓冲区（默认值优化）
+    gzip_http_version 1.1;          # 仅对HTTP/1.1及以上启用（避免兼容问题）
+    gzip_proxied any;               # 对代理请求也启用压缩
+
+    # 隐藏nginx版本号（安全加固）
+    server_tokens off;
+
+    # 通用安全响应头（全局生效）
+    add_header X-Frame-Options "SAMEORIGIN";         # 防止点击劫持
+    add_header X-XSS-Protection "1; mode=block";     # 防XSS攻击
+    add_header X-Content-Type-Options "nosniff";     # 防止MIME类型嗅探
+
+    # 反向代理配置 http://10.4.126.112:23000
+    upstream upstream_name{
+      server 172.20.0.2:8090;
+      keepalive 32;          # 长连接池大小，减少连接建立开销
+      keepalive_timeout 60s;
+      keepalive_requests 1000;
+    }
+
+    # 虚拟主机配置
+    server {
+        listen       8080;
+        listen  [::]:8080;
+        # 建议替换为实际域名（如example.com），避免用localhost
+        server_name  10.4.126.116;
+
+        # 网站根目录
+        root /usr/share/nginx/html;
+        # 默认索引文件
+        index index.html;
+
+        # API接口代理配置（优化版）
+        location ^~/api/ {
+             # 代理目标地址
+            proxy_pass http://upstream_name/;
+            
+            # 增强头信息转发
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+
+            gzip off;  # 禁用该接口的 gzip 压缩
+            proxy_set_header Accept-Encoding "";  # 清除传给后端的 Accept-Encoding 头
+            
+            # 超时设置（API专用，可根据业务调整）
+			proxy_connect_timeout 300s;
+			proxy_send_timeout 300s;
+			proxy_read_timeout 300s;
+
+
+        }
+
+        # 主路径匹配
+        location / {
+            try_files $uri $uri/ /index.html;  # 适合SPA应用（如Vue/React）
+            # 缓存控制：动态内容不缓存
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+        }
+
+        # 静态资源缓存优化（比原配置更精细）
+        location ~* \.(gif|jpg|jpeg|png|ico|svg|js|css|json|txt)$ {
+            # 缓存1天（可根据资源更新频率调整，如图片可设30d）
+            expires 1d;
+            add_header Cache-Control "public, max-age=86400";
+            # 防盗链：只允许指定域名引用资源（替换为实际域名）
+            # valid_referers none blocked localhost example.com *.example.com;
+            # if ($invalid_referer) {
+            #     return 403;
+            # }
+        }
+
+        # 错误页面配置
+        error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
+            # 显式指定root（避免继承外层可能的变更）
+            root /usr/share/nginx/html;
+        }
+
+        # 禁止访问隐藏文件（如.git .env等）
+        location ~ /\. {
+            deny all;
+            access_log off;
+            log_not_found off;
+        }
+    }
+}
--- a/docker/server.js
+++ b/docker/server.js
@ -0,0 +1,179 @@
+const http = require('http');
+const httpServer = require('http-server');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const path = require('path');
+const fs = require('fs');
+const { PassThrough } = require('stream');
+
+const staticRoot = './html';
+const log = (message) => {
+  const timestamp = new Date().toISOString();
+  console.log(`[${timestamp}] ${message}`);
+};
+
+const staticServer = httpServer.createServer({
+  root: staticRoot,
+  showDir: false,
+  cors: true,
+  autoIndex: false
+});
+
+const proxyConfig = {
+  path: "/api",
+  target: "http://172.20.0.2:8090"
+};
+
+// 跟踪响应是否已处理
+const responseHandled = new WeakMap();
+
+const apiProxy = createProxyMiddleware({
+  target: proxyConfig.target,
+  changeOrigin: true,
+  pathRewrite: {'^/api': '' },
+  logLevel: 'silent',
+  timeout: 120000,
+  // 禁用内置的分块处理，手动控制
+  selfHandleResponse: true,
+  onTimeout: (req, res) => {
+    if (!responseHandled.has(res)) {
+      responseHandled.set(res, true);
+      res.writeHead(504, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: 'Proxy timeout' }));
+    }
+  },
+  on: {
+    proxyReq: (proxyReq, req, res) => {
+      const forwardedUrl = `${proxyReq.protocol}//${proxyReq.host}:${proxyReq.port}${proxyReq.path}`;
+      log(`转发请求到: ${proxyReq.method} ${forwardedUrl}`);
+      log(`请求头: ${JSON.stringify(req.headers, null, 2)}`);
+      
+      const contentType = req.headers['content-type'] || '';
+      if (contentType.includes('application/json')) {
+        let requestBody = '';
+        req.on('data', (chunk) => { requestBody += chunk.toString(); });
+        req.on('end', () => { log(`请求体: ${requestBody}`); });
+      }
+    },
+
+    proxyRes: (proxyRes, req, res) => {
+      if (responseHandled.has(res)) {
+        log(`已处理响应，跳过重复处理: ${req.url}`);
+        return;
+      }
+      responseHandled.set(res, false);
+      
+      log(`后端响应: ${proxyRes.statusCode} (${req.url})`);
+      log(`响应头: ${JSON.stringify(proxyRes.headers, null, 2)}`);
+      
+      const contentType = proxyRes.headers['content-type'] || '';
+      const isChunked = proxyRes.headers['transfer-encoding'] === 'chunked';
+      
+      // 复制响应头（排除可能引起冲突的头）
+      if (!res.headersSent) {
+        res.statusCode = proxyRes.statusCode;
+        Object.keys(proxyRes.headers).forEach(key => {
+          // 排除分块传输和连接控制头，由Node.js自动处理
+          if (!['transfer-encoding', 'connection', 'content-length'].includes(key)) {
+            res.setHeader(key, proxyRes.headers[key]);
+          }
+        });
+      }
+      
+      // 处理JSON响应
+      if (contentType.includes('application/json')) {
+        let responseBody = '';
+        const logStream = new PassThrough();
+        
+        // 收集数据用于日志
+        logStream.on('data', (chunk) => {
+          responseBody += chunk.toString();
+        });
+        
+        logStream.on('end', () => {
+          log(`响应体: ${responseBody}`);
+        });
+        
+        // 分块传输处理
+        if (isChunked) {
+          // 直接通过流转发，保留分块特性
+          proxyRes.pipe(logStream).pipe(res);
+        } else {
+          // 非分块传输，收集完再发送
+          proxyRes.on('data', (chunk) => {
+            responseBody += chunk.toString();
+          });
+          proxyRes.on('end', () => {
+            if (!responseHandled.get(res)) {
+              responseHandled.set(res, true);
+              log(`响应体: ${responseBody}`);
+              res.end(responseBody);
+            }
+          });
+        }
+      } else {
+        // 非JSON响应直接转发
+        proxyRes.pipe(res);
+      }
+      
+      // 监听响应结束
+      proxyRes.on('end', () => {
+        responseHandled.set(res, true);
+      });
+      
+      proxyRes.on('error', (err) => {
+        if (!responseHandled.get(res)) {
+          responseHandled.set(res, true);
+          log(`响应错误: ${err.message}`);
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: '响应处理错误' }));
+        }
+      });
+    },
+
+    error: (err, req, res) => {
+      if (!responseHandled.has(res) || !responseHandled.get(res)) {
+        responseHandled.set(res, true);
+        log(`代理错误 [${err.code}]: ${err.message} (请求: ${req.url})`);
+        if (!res.headersSent) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+        }
+        res.end(JSON.stringify({
+          error: '代理服务错误',
+          message: err.message
+        }));
+      }
+    }
+  }
+});
+
+const server = http.createServer((req, res) => {
+  if (req.url.startsWith(proxyConfig.path)) {
+    log(`收到代理请求: ${req.method} ${req.url}`);
+    return apiProxy(req, res);
+  } 
+  else if (req.url === '' || req.url === '/' || req.url.endsWith('/')) {
+    log(`访问根路径，返回index.html: ${req.url}`);
+    const indexPath = path.join(staticRoot, 'index.html');
+    
+    if (fs.existsSync(indexPath)) {
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      fs.createReadStream(indexPath).pipe(res);
+    } else {
+      log(`警告: index.html不存在于 ${staticRoot}`);
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('index.html not found');
+    }
+  } 
+  else {
+    log(`处理静态文件请求: ${req.url}`);
+    staticServer.server.emit('request', req, res);
+  }
+});
+
+const port = 8080;
+server.listen(port, () => {
+  log(`静态服务器已启动，监听端口 ${port}`);
+  log(`静态文件目录: ${path.resolve(staticRoot)}`);
+  log(`API代理目标: ${proxyConfig.target}`);
+  log(`访问地址: http://localhost:${port}`);
+});
--- a/docs/404.html
+++ b/docs/404.html
@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="generator" content="VuePress 2.0.0-rc.20" />
+    <style>
+      :root {
+        --vp-c-bg: #fff;
+      }
+
+      [data-theme='dark'] {
+        --vp-c-bg: #1b1b1f;
+      }
+
+      html,
+      body {
+        background-color: var(--vp-c-bg);
+      }
+    </style>
+    <script>
+      const useChoice = localStorage.getItem('vuepress-color-scheme')
+      const systemStatus =
+        'matchMedia' in window
+          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          : false
+
+      if (useChoice === 'light') {
+        document.documentElement.dataset.theme = 'light'
+      } else if (useChoice === 'dark' || systemStatus) {
+        document.documentElement.dataset.theme = 'dark'
+      }
+    </script>
+    <title>全代码框架文档</title><meta name="description" content="">
+    <link rel="preload" href="assets/style-CQp7YV5d.css" as="style"><link rel="stylesheet" href="assets/style-CQp7YV5d.css">
+    <link rel="modulepreload" href="assets/app-CDlLWk6N.js"><link rel="modulepreload" href="assets/404.html-urOlE4ef.js">
+    <link rel="prefetch" href="assets/index.html-ByXOdSON.js" as="script"><link rel="prefetch" href="assets/components.html-CbpbsXEn.js" as="script"><link rel="prefetch" href="assets/field_events.html-C6V_tkoR.js" as="script"><link rel="prefetch" href="assets/form_logic.html-CA8-U3gW.js" as="script"><link rel="prefetch" href="assets/index.html-xafVSSBu.js" as="script"><link rel="prefetch" href="assets/pass_value.html-CFBEHlue.js" as="script"><link rel="prefetch" href="assets/show_and_hide.html-Bai-A-AK.js" as="script"><link rel="prefetch" href="assets/index.html-BfpfzkA1.js" as="script"><link rel="prefetch" href="assets/custom_field.html-CEs-XIt2.js" as="script"><link rel="prefetch" href="assets/custom_page.html-DIr-Sgm-.js" as="script"><link rel="prefetch" href="assets/dialog.html-fkmzKy_f.js" as="script"><link rel="prefetch" href="assets/form.html-B4704WRj.js" as="script"><link rel="prefetch" href="assets/table.html-BrzZNtYJ.js" as="script"><link rel="prefetch" href="assets/add_field.html-Lpe0HY5a.js" as="script"><link rel="prefetch" href="assets/ajax.html-CDfrJfFy.js" as="script"><link rel="prefetch" href="assets/change_value.html-CS5TpMC0.js" as="script"><link rel="prefetch" href="assets/computed.html-9QOs6N7a.js" as="script"><link rel="prefetch" href="assets/teleport.html-BIP5te2y.js" as="script"><link rel="prefetch" href="assets/validation.html-B_JW048n.js" as="script">
+  </head>
+  <body>
+    <div id="app"><!--[--><div class="vp-theme-container" vp-container data-v-ec9917b8><main class="page" data-v-ec9917b8><div vp-content data-v-ec9917b8><h1 data-v-ec9917b8>404</h1><blockquote data-v-ec9917b8>How did we get here?</blockquote><a class="route-link" href data-v-ec9917b8>Take me home</a></div></main></div><!--[--><!----><!--]--><!--]--></div>
+    <script type="module" src="assets/app-CDlLWk6N.js" defer></script>
+  </body>
+</html>
--- a/docs/assets/404.html-urOlE4ef.js
+++ b/docs/assets/404.html-urOlE4ef.js
@ -0,0 +1 @@
+import{_ as e,c as o,b as n,o as a}from"./app-CDlLWk6N.js";const l={};function r(s,t){return a(),o("div",null,t[0]||(t[0]=[n("p",null,"404 Not Found",-1)]))}const _=e(l,[["render",r]]),d=JSON.parse('{"path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{_ as comp,d as data};
--- a/docs/assets/add_field.html-Lpe0HY5a.js
+++ b/docs/assets/add_field.html-Lpe0HY5a.js
@ -0,0 +1,54 @@
+import{_ as n,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t=""+new URL("base_set_new-D7W3Zm7h.png",import.meta.url).href,o={};function l(r,s){return e(),a("div",null,s[0]||(s[0]=[p(`<h1 id="为表单添加新字段" tabindex="-1"><a class="header-anchor" href="#为表单添加新字段"><span>为表单添加新字段</span></a></h1><p>添加新字段有两种方式，一种是重新生成代码，另一种是直接修改代码。如果已经修改表单生成的源码很多次，建议直接修改代码。</p><p>这里仅提供修改代码添加表单的方式，步骤如下：</p><ol><li>在config.ts文件中，找到formProps对象，按照格式在其中添加新的字段，其中key值与field值必须与其他项不同，均为唯一项。</li></ol><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
+<span class="line">      <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;9e85022cc6ba44bdb8312bca957cad0a1&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">field</span><span class="token operator">:</span> <span class="token string">&#39;auditContentId&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;关联内容ID&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;input&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">colProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">span</span><span class="token operator">:</span> <span class="token number">24</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">componentProps</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;100%&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">span</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">labelWidthMode</span><span class="token operator">:</span> <span class="token string">&#39;fix&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">labelFixWidth</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">responsive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">respNewRow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">&#39;请输入问题定性&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">suffix</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">addonBefore</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">addonAfter</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">allowClear</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">showLabel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">isSave</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">scan</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">&#39;100%&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>在CustomDevForm.vue文件中，添加新的formItem项，注意修改key值与config中相同。格式如下</li></ol><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line">    <span class="token operator">&lt;</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;getIfShow2(&#39;e6a64e2b22c049e1abb65804b565d759&#39;)&quot;</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;getIsShow2(&#39;e6a64e2b22c049e1abb65804b565d759&#39;)&quot;</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">&quot;getColWidth(schemaMap[&#39;e6a64e2b22c049e1abb65804b565d759&#39;])&quot;</span><span class="token operator">&gt;</span></span>
+<span class="line">        <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;showComponent(schemaMap[&#39;e6a64e2b22c049e1abb65804b565d759&#39;])&quot;</span><span class="token operator">&gt;</span></span>
+<span class="line">            <span class="token operator">&lt;</span>SimpleFormItem v<span class="token operator">-</span>model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;formModel[schemaMap[&#39;e6a64e2b22c049e1abb65804b565d759&#39;].field]&quot;</span> <span class="token operator">:</span>form<span class="token operator">-</span>api<span class="token operator">=</span><span class="token string">&quot;formApi&quot;</span> <span class="token operator">:</span>isWorkFlow<span class="token operator">=</span><span class="token string">&quot;isWorkFlow&quot;</span> <span class="token operator">:</span>refreshFieldObj<span class="token operator">=</span><span class="token string">&quot;refreshFieldObj&quot;</span> <span class="token operator">:</span>schema<span class="token operator">=</span><span class="token string">&quot;schemaMap[&#39;e6a64e2b22c049e1abb65804b565d759&#39;]&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span></span>
+<span class="line">        <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span></span>
+<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>在代码生成的workflowPermission.ts文件中，添加新的字段权限。格式如下：</li></ol><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">view</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">edit</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">isSaveTable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">tableName</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">&#39;问题定性&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">fieldId</span><span class="token operator">:</span> <span class="token string">&#39;problemQualitative&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">isSubTable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">showChildren</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;input&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;xxxxx&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意key值和fieldId值必须与config.ts文件中相同。</p><ol start="4"><li>在系统管理的工作流程模块的流程设计页面中，找到对应要修改的流程编辑，在弹窗中点击更新表单 <img src="`+t+'" alt="流程编辑"> 更新成功点击确定。需要注意的是每个流程节点都需要修改字段的权限，字段初始的默认权限是查看编辑并必填。当设置成功后点击右上角保存模版即可。</li></ol><p>需要注意的是，添加新字段后，需要重新创建流程才会生效，旧流程会遵循历史的权限。</p>',12)]))}const i=n(o,[["render",l]]),k=JSON.parse('{"path":"/front_dev/base/add_field.html","title":"为表单添加新字段","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"}]},"filePathRelative":"front_dev/base/add_field.md"}');export{i as comp,k as data};
--- a/docs/assets/ajax.html-CDfrJfFy.js
+++ b/docs/assets/ajax.html-CDfrJfFy.js
@ -0,0 +1,34 @@
+import{_ as n,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function l(o,s){return e(),a("div",null,s[0]||(s[0]=[p(`<h1 id="使用远程数据源" tabindex="-1"><a class="header-anchor" href="#使用远程数据源"><span>使用远程数据源</span></a></h1><p>如果有些组件（联想弹层、下拉框等）的显示数据不想使用预设的数据源或者magicAPI，也可以使用自写的接口。</p><p>如下代码所示，可以在config.ts文件中通过修改对应组件项中的componentProps中的apiCconfig属性来使用自写的接口，datasourceType的属性值应为api。apiParams则为对应的接口请求参数，其中也可以使用当前表单中的参数来充当请求接口的参数，如例子所示。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token literal-property property">datasourceType</span><span class="token operator">:</span> <span class="token string">&#39;api&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">itemId</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">apiConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;CodeGeneration/selection&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">apiId</span><span class="token operator">:</span> <span class="token string">&#39;93d735dcb7364a0f8102188ec4d77ac7&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">apiParams</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
+<span class="line">            <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Query Params&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">tableInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
+<span class="line">            <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;projectId&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 参数名称</span></span>
+<span class="line">                <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;{&quot;bindField&quot;:&quot;selectProjectId&quot;,&quot;fieldKey&quot;:&quot;xxxxxxxxxxxx&quot;}&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token comment">// bindField是表单中的字段名即field，fieldKey是的key值，这两个值需要和表单中的值对应。</span></span>
+<span class="line">                <span class="token comment">// 当绑定的表单字段值发生变化时，会自动用新参数重新请求接口。</span></span>
+<span class="line">                <span class="token comment">// value 也可以是一个固定值，写为正常的字符串即可。</span></span>
+<span class="line">                <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">dataType</span><span class="token operator">:</span> <span class="token string">&#39;String&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">validateType</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">expression</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">bindType</span><span class="token operator">:</span> <span class="token string">&#39;data&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">            <span class="token comment">//多个参数时，只需要在数组中添加即可。</span></span>
+<span class="line">            <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">            <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Header&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">tableInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">            <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;3&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Body&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4)]))}const c=n(t,[["render",l]]),i=JSON.parse('{"path":"/front_dev/base/ajax.html","title":"使用远程数据源","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744278865000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"a3e2cde9db0dbccdbce661749aef03650a6b701f","time":1744278865000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 二开文档优化"},{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat:  值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/ajax.md"}');export{c as comp,i as data};
--- a/docs/assets/app-CDlLWk6N.js
+++ b/docs/assets/app-CDlLWk6N.js
--- a/docs/assets/base_set_new-D7W3Zm7h.png
+++ b/docs/assets/base_set_new-D7W3Zm7h.png
--- a/docs/assets/base_teleport-vbaCZqqF.png
+++ b/docs/assets/base_teleport-vbaCZqqF.png
--- a/docs/assets/change_value.html-CS5TpMC0.js
+++ b/docs/assets/change_value.html-CS5TpMC0.js
@ -0,0 +1 @@
+import{_ as t,c as n,b as e,o as l}from"./app-CDlLWk6N.js";const o={};function r(s,a){return l(),n("div",null,a[0]||(a[0]=[e("h1",{id:"修改组件值",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#修改组件值"},[e("span",null,"修改组件值")])],-1),e("p",null,"正常修改组件显示值的话通过修改formModel中相应的值即可，本身框架封装的组件有做处理，双向绑定机制即可保证数据能够正常回显。",-1),e("p",null,"但是当使用非框架封装组件时，有一些情况下，无法通过直接修改formModel来实现组件的回填显示，使用时需要注意进行一些特殊的转换。",-1),e("p",null,"比如Ant-design-vue的时间/日期组件。该组件的双向绑定值为一个Dayjs对象，而数据库存储一般为‘2025-01-01 00:00:00’的字符串格式，所以无论保存还是插入值需要进行类型的转换才能正常进行存储和显示。",-1),e("p",null,"这里只是举一个例子，具体需要根据组件的实际情况进行处理。",-1)]))}const m=t(o,[["render",r]]),d=JSON.parse('{"path":"/front_dev/base/change_value.html","title":"修改组件值","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744192947000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat:  值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/change_value.md"}');export{m as comp,d as data};
--- a/docs/assets/components.html-CbpbsXEn.js
+++ b/docs/assets/components.html-CbpbsXEn.js
@ -0,0 +1,24 @@
+import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(l,a){return p(),s("div",null,a[0]||(a[0]=[t(`<h1 id="表单封装" tabindex="-1"><a class="header-anchor" href="#表单封装"><span>表单封装</span></a></h1><p>其实，在前端框架中，所有的表单页面，都是基于SimpleForm的封装，无论是主表还是明细表，最外层封装都是SimpleForm（二开使用的是可以复用的SimpleFormSetup），如果需要实现多个子表单的效果，只需要在对应位置插入标题或者布局组件即可。</p><p>默认情况下，SimpleForm是对第一层元素循环，同时处理显隐、响应式布局以及响应式布局的换行，对于非slot组件，都是将属性传给SimpleFormItem</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.labelCol<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:labelAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.labelAlign<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.layout<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:wrapper-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.wrapperCol<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keypress.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleEnterPress<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema in getSchemas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema.field<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth(schema)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema?.componentProps.respBreakLine<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showComponent(schema) &amp;&amp; schema.type !== &#39;slot&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel[schema.field]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formApi<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isWorkFlow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshFieldObj<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema.type === &#39;slot&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token comment">&lt;!-- 无关代码省略 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ textAlign: getProps.buttonLocation }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!-- 表单可以配置显示提交和清空按钮 也可以在前后添加按钮 --&gt;</span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttonBefore<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps.showSubmitButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ t(&#39;提交&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!-- 无关代码省略 --&gt;</span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttonAfter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>对于完全使用useForm或者SimpleForm构建表单的，封装也提供了提交和清除按钮，但是页面形式的表单或者审批页面不用这2个按钮，而是用的工具栏里的封装。</p>`,5)]))}const u=n(e,[["render",o]]),i=JSON.parse('{"path":"/front_dev/components.html","title":"表单封装","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743940801000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2}],"changelog":[{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"}]},"filePathRelative":"front_dev/components.md"}');export{u as comp,i as data};
--- a/docs/assets/computed.html-9QOs6N7a.js
+++ b/docs/assets/computed.html-9QOs6N7a.js
@ -0,0 +1,69 @@
+import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function c(l,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="值计算" tabindex="-1"><a class="header-anchor" href="#值计算"><span>值计算</span></a></h1><blockquote><p>该章节仅叙述实现思路，具体实现需要根据实际情况进行调整，且PC端与移动端实现基本相同，便不做区分。</p></blockquote><h2 id="一、根据表单的值计算" tabindex="-1"><a class="header-anchor" href="#一、根据表单的值计算"><span>一、根据表单的值计算</span></a></h2><p>如有标题或合计等需要根据其他字段的值进行显示的场景，监听formModel变化并进行相应变更的方法有几种：</p><h3 id="_1-computed计算属性" tabindex="-1"><a class="header-anchor" href="#_1-computed计算属性"><span>1. computed计算属性</span></a></h3><p>推荐在拆分后的组件中使用computed计算属性与模板字符串。可以不在表单生成与存储新的字段，减少前后端开销，但是只能执行同步方法。</p><h3 id="_2-组件事件触发-change-blur" tabindex="-1"><a class="header-anchor" href="#_2-组件事件触发-change-blur"><span>2. 组件事件触发 change/blur</span></a></h3><p>表单组件一般有统一的change/blur事件触发，然后在事件处理函数中计算新的值并存储到其他的字段中。缺陷只适用于需监听字段较少的情况下，且每个需要考虑到的变量都需要绑定响应函数。</p><h3 id="_3-watch监听" tabindex="-1"><a class="header-anchor" href="#_3-watch监听"><span>3. watch监听</span></a></h3><p>在拆分后的组件中使用watch监听formModel变化，根据需要计算新的值并存储到其他的字段中。该方法可以进行异步操作，从后端获取数据。缺陷是开销较大，需要在每次formModel变化时重新计算。watch事件尽量避免使用，后期维护的时候容易察觉不到数据修改源头。</p><h2 id="二、在操作表单前处理数据" tabindex="-1"><a class="header-anchor" href="#二、在操作表单前处理数据"><span>二、在操作表单前处理数据</span></a></h2><p>如从后端获取的表单数据需要处理后才可以在表单中正常显示，那么可以在生成的form组件的onMounted生命周期中的所有判断之后进行formModel的获取与修改操作，然后将处理后的数据使用setFieldsValue函数存储到表单中。（适用于未拆分的组件）</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">  <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>fromPage <span class="token operator">==</span> FromPageType<span class="token punctuation">.</span><span class="token constant">MENU</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token function">setMenuPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">      <span class="token comment">// 表单处理部分 略过</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
+<span class="line">    <span class="token comment">// 获取及修改表单数据的逻辑</span></span>
+<span class="line">    <span class="token function">setFieldsValue</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span></span>
+<span class="line">    <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;form-mounted&#39;</span><span class="token punctuation">,</span> formProps<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line"></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">// 辅助设置表单数据</span></span>
+<span class="line"><span class="token keyword">function</span> <span class="token function">setFieldsValue</span><span class="token punctuation">(</span><span class="token parameter">record</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">  systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFieldsValue</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或是在拆分后的CustomDevForm组件中直接修改formModel。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">	<span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">.</span>xxx <span class="token operator">=</span> <span class="token string">&#39;xxx&#39;</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>移动端则可以在生成的form组件的loadForm函数中进行处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">	<span class="token keyword">let</span> id <span class="token operator">=</span> val<span class="token punctuation">[</span>rowKey<span class="token punctuation">]</span></span>
+<span class="line">  formConfig<span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span></span>
+<span class="line">  <span class="token keyword">const</span> <span class="token punctuation">{</span></span>
+<span class="line">    data</span>
+<span class="line">  <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getAppFormSplit</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">  <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token comment">// 在这里处理表单数据</span></span>
+<span class="line">    <span class="token keyword">await</span> formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFormData</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> <span class="token operator">...</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="三、在提交表单前处理数据" tabindex="-1"><a class="header-anchor" href="#三、在提交表单前处理数据"><span>三、在提交表单前处理数据</span></a></h2><p>在PC端，流程的提交和表单的提交都会触发基础表单的提交事件并且会重新查询并回填数据，因此可以在生成表单的add及update事件中进行处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 新增api表单数据</span></span>
+<span class="line">  <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">      state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> values<span class="token punctuation">;</span></span>
+<span class="line">      <span class="token comment">// 可以在这里处理表单数据</span></span>
+<span class="line">      <span class="token keyword">let</span> saveVal <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">addAppFormSplit</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">      <span class="token keyword">await</span> <span class="token function">submitFormEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span></span>
+<span class="line">        systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>
+<span class="line">        formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：提交表单</span></span>
+<span class="line">      <span class="token keyword">return</span> saveVal<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 更新api表单数据</span></span>
+<span class="line">  <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> values<span class="token punctuation">,</span> rowId <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">      values<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span> <span class="token operator">=</span> rowId<span class="token punctuation">;</span></span>
+<span class="line">      state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> values<span class="token punctuation">;</span></span>
+<span class="line">      <span class="token comment">// 可以在这里处理表单数据</span></span>
+<span class="line">      <span class="token keyword">let</span> saveVal <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">updateAppFormSplit</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">      <span class="token keyword">await</span> <span class="token function">submitFormEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span></span>
+<span class="line">        systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>
+<span class="line">        formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：提交表单</span></span>
+<span class="line">      <span class="token keyword">return</span> saveVal<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但是流程表单数据的提交现阶段还是取表单的校验后的值，因此如果想修改流程表单的提交数据，则需要在生成的form组件中添加函数并用defineExpose函数暴露</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getFormModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token comment">// 处理逻辑</span></span>
+<span class="line">    <span class="token keyword">return</span> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>formModel</span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后对/SystemForm/src/Form.vue中的getFormModels方法进行修改，将获取表单数据的逻辑替换为调用暴露的函数。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">(</span>SystemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span>getFormModel <span class="token operator">&amp;&amp;</span> SystemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">getFormModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">await</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">      console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样即可在提交流程表单时直接获取表单数据并进行修改</p>`,26)]))}const i=s(t,[["render",c]]),u=JSON.parse('{"path":"/front_dev/base/computed.html","title":"值计算","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"一、根据表单的值计算","slug":"一、根据表单的值计算","link":"#一、根据表单的值计算","children":[{"level":3,"title":"1. computed计算属性","slug":"_1-computed计算属性","link":"#_1-computed计算属性","children":[]},{"level":3,"title":"2. 组件事件触发 change/blur","slug":"_2-组件事件触发-change-blur","link":"#_2-组件事件触发-change-blur","children":[]},{"level":3,"title":"3. watch监听","slug":"_3-watch监听","link":"#_3-watch监听","children":[]}]},{"level":2,"title":"二、在操作表单前处理数据","slug":"二、在操作表单前处理数据","link":"#二、在操作表单前处理数据","children":[]},{"level":2,"title":"三、在提交表单前处理数据","slug":"三、在提交表单前处理数据","link":"#三、在提交表单前处理数据","children":[]}],"git":{"updatedTime":1744251107000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat:  值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/computed.md"}');export{i as comp,u as data};
--- a/docs/assets/custom_field.html-CEs-XIt2.js
+++ b/docs/assets/custom_field.html-CEs-XIt2.js
@ -0,0 +1,101 @@
+import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(l,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="自定义字段" tabindex="-1"><a class="header-anchor" href="#自定义字段"><span>自定义字段</span></a></h1><p>当表单设计里面的组件无法满足业务需求时，可以自己添加字段组件。 这里用评分组件为例，评分组件需要传入一个评分值，但是表单设计里面没有这个组件，所以需要自己添加一个评分组件。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formWrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.labelCol<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:labelAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.labelAlign<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.layout<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:wrapper-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.wrapperCol<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keypress.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleEnterPress<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">          <span class="token comment">&lt;!-- 单行文本  --&gt;</span></span>
+<span class="line"></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIfShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIsShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;])<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showComponent(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;])<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel[schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;].field]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formApi<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isWorkFlow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshFieldObj<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!-- 评分组件添加  --&gt;</span></span>
+<span class="line"></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> </span>
+<span class="line">                <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIfShow2(&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;)<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIsShow2(&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;)<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth(schemaMap[&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;])<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showComponent(schemaMap[&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;])<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span></span>
+<span class="line">                        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>系统评分<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rate<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                        <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: &#39;请选择评分&#39; }]<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                        <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schemaMap[&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;]).labelCol<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                        <span class="token attr-name">:wrapperCol</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemLabelWidthProp.wrapperCol<span class="token punctuation">&quot;</span></span></span>
+<span class="line">                    <span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-rate</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.rate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line">    <span class="token comment">// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本</span></span>
+<span class="line">    <span class="token keyword">import</span> SimpleFormSetup <span class="token keyword">from</span> <span class="token string">&#39;/@/components/SimpleForm/src/SimpleFormSetup.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> Col<span class="token punctuation">,</span> Form<span class="token punctuation">,</span> Row <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">import</span> SimpleFormItem <span class="token keyword">from</span> <span class="token string">&#39;/@/components/SimpleForm/src/components/SimpleFormItem.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> CheckCircleOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@ant-design/icons-vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">import</span> CustomDevTableItem1 <span class="token keyword">from</span> <span class="token string">&#39;./CustomDevTableItem1.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> TabPane<span class="token punctuation">,</span> Tabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> useItemLabelWidth <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/src/hooks/useLabelWidth&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">//根据labelwidth 生成labelCol</span></span>
+<span class="line">    <span class="token keyword">const</span> formProps <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">&#39;formProps&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">const</span> itemLabelWidthProp <span class="token operator">=</span> <span class="token function">useItemLabelWidth</span><span class="token punctuation">(</span>schemaMap<span class="token punctuation">[</span><span class="token string">&#39;9a8db2186edb49879f59162ae2660b21&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> formProps<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>
+<span class="line">            CheckCircleOutlined<span class="token punctuation">,</span> </span>
+<span class="line">            Form<span class="token punctuation">,</span> </span>
+<span class="line">            Col<span class="token punctuation">,</span> </span>
+<span class="line">            SimpleFormItem<span class="token punctuation">,</span> </span>
+<span class="line">            Row<span class="token punctuation">,</span> </span>
+<span class="line">            FormItem<span class="token punctuation">,</span></span>
+<span class="line">            CustomDevTableItem1</span>
+<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>SimpleFormSetup<span class="token punctuation">]</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">const</span> ret <span class="token operator">=</span> SimpleFormSetup<span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">const</span> expose <span class="token operator">=</span> ctx<span class="token punctuation">.</span>expose<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">const</span> activeKey1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            </span>
+<span class="line">            <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
+<span class="line">                activeKey1<span class="token punctuation">,</span></span>
+<span class="line">                <span class="token operator">...</span>ret</span>
+<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token comment">// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效</span></span>
+<span class="line">            <span class="token function">schemaMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">const</span> schemaMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">                <span class="token keyword">this</span><span class="token punctuation">.</span>getSchemas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">                    schemaMap<span class="token punctuation">[</span>schema<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
+<span class="line">                    <span class="token keyword">if</span><span class="token punctuation">(</span>schema<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                        schema<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">sChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
+<span class="line">                           <span class="token keyword">if</span><span class="token punctuation">(</span>sChild<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">                               sChild<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
+<span class="line">                                   schemaMap<span class="token punctuation">[</span>lChild<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> lChild<span class="token punctuation">;</span></span>
+<span class="line">                               <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                           <span class="token punctuation">}</span> </span>
+<span class="line">                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                    <span class="token punctuation">}</span></span>
+<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                <span class="token keyword">return</span> schemaMap<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token function-variable function">getIfShow2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getIfShow</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>field<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"></span>
+<span class="line">            <span class="token function-variable function">getIsShow2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getIsShow</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>field<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意例子中添加了几个引用，具体可以查看源码。</p>`,4)]))}const u=s(e,[["render",o]]),i=JSON.parse('{"path":"/front_dev/adv/custom_field.html","title":"自定义字段","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744966438000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"64eedad72a7ab401fe654369ea7dcc37fbbe836e","time":1744966438000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化"},{"hash":"a0f722b8cfdbd98f98edf701d250f0318870372b","time":1744964300000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段编写"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"}]},"filePathRelative":"front_dev/adv/custom_field.md"}');export{u as comp,i as data};
--- a/docs/assets/custom_page.html-DIr-Sgm-.js
+++ b/docs/assets/custom_page.html-DIr-Sgm-.js
--- a/docs/assets/custom_page_app_1-7IYO8Eyo.png
+++ b/docs/assets/custom_page_app_1-7IYO8Eyo.png
--- a/docs/assets/custom_page_app_2-BSYSeOjb.png
+++ b/docs/assets/custom_page_app_2-BSYSeOjb.png
--- a/docs/assets/custom_page_app_3-B3tOwhE2.png
+++ b/docs/assets/custom_page_app_3-B3tOwhE2.png
--- a/docs/assets/custom_page_app_4-2qED3-kx.png
+++ b/docs/assets/custom_page_app_4-2qED3-kx.png
--- a/docs/assets/custom_page_app_5-DVBTSAZJ.png
+++ b/docs/assets/custom_page_app_5-DVBTSAZJ.png
--- a/docs/assets/custom_page_pc_1-CXjVoBOn.png
+++ b/docs/assets/custom_page_pc_1-CXjVoBOn.png
--- a/docs/assets/custom_page_pc_2-8e_g1uGT.png
+++ b/docs/assets/custom_page_pc_2-8e_g1uGT.png
--- a/docs/assets/custom_page_pc_3-PVAgZmk6.png
+++ b/docs/assets/custom_page_pc_3-PVAgZmk6.png
--- a/docs/assets/custom_page_pc_4-BJ6TU5rW.png
+++ b/docs/assets/custom_page_pc_4-BJ6TU5rW.png
--- a/docs/assets/custom_page_pc_5-67hJreQO.png
+++ b/docs/assets/custom_page_pc_5-67hJreQO.png
--- a/docs/assets/custom_page_pc_6-D0qmIZZb.png
+++ b/docs/assets/custom_page_pc_6-D0qmIZZb.png
--- a/docs/assets/custom_searchform-C_-nGOSW.png
+++ b/docs/assets/custom_searchform-C_-nGOSW.png
--- a/docs/assets/dialog.html-fkmzKy_f.js
+++ b/docs/assets/dialog.html-fkmzKy_f.js
@ -0,0 +1,39 @@
+import{_ as a,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function l(c,n){return p(),s("div",null,n[0]||(n[0]=[t(`<h1 id="弹窗" tabindex="-1"><a class="header-anchor" href="#弹窗"><span>弹窗</span></a></h1><h3 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h3><p>框架提供了一个弹窗组件的封装BasicModal，该组件封装内容较为繁杂，实际使用不需要过多的功能，直接使用ant-design-vue的<a href="https://3x.antdv.com/components/modal-cn/#Modal-" target="_blank" rel="noopener noreferrer">modal对话框</a>组件即可。 下面是一个简单的弹窗组件示例，具体配置项可以点击上方链接查看文档：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-modal</span></span>
+<span class="line">        <span class="token attr-name">:closable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span></span>
+<span class="line">        <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span></span>
+<span class="line">        <span class="token attr-name">centered</span></span>
+<span class="line">        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>弹窗<span class="token punctuation">&quot;</span></span></span>
+<span class="line">        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>800px<span class="token punctuation">&quot;</span></span></span>
+<span class="line">        <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span>
+<span class="line">        <span class="token comment">&lt;!-- 弹窗正文内容 --&gt;</span></span>
+<span class="line"></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!-- 弹窗底部按钮内容，有默认，如果需自定义就这么写 --&gt;</span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>保存<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>关闭<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-modal</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 弹窗是否显示</span></span>
+<span class="line"><span class="token keyword">const</span> approveType <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 审批类型</span></span>
+<span class="line">fuinction <span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 关闭弹窗</span></span>
+<span class="line">    visible<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"><span class="token keyword">function</span> <span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 保存</span></span>
+<span class="line">    <span class="token comment">// 提交逻辑</span></span>
+<span class="line">    visible<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>移动端弹窗使用uni-popup弹出层组件，组件源码也在系统中，具体参数配置可以看源码。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uni-popup</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>finishRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dialog<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uni-popup-dialog</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputClose<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>base<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>提示<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>确定终止流程吗？<span class="token punctuation">&quot;</span></span></span>
+<span class="line">            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入内容<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flowFinishConfirm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!--弹窗内容--&gt;</span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>uni-popup-dialog</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>uni-popup</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7)]))}const u=a(e,[["render",l]]),i=JSON.parse('{"path":"/front_dev/adv/dialog.html","title":"弹窗","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"PC端","slug":"pc端","link":"#pc端","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}],"git":{"updatedTime":1744948341000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/dialog.md"}');export{u as comp,i as data};
--- a/docs/assets/field_events.html-C6V_tkoR.js
+++ b/docs/assets/field_events.html-C6V_tkoR.js
@ -0,0 +1,51 @@
+import{_ as s,c as a,a as p,o as t}from"./app-CDlLWk6N.js";const e={};function o(l,n){return t(),a("div",null,n[0]||(n[0]=[p(`<h1 id="字段事件" tabindex="-1"><a class="header-anchor" href="#字段事件"><span>字段事件</span></a></h1><p>此处PC端和移动端的字段事件整体逻辑是一致的。 在未进行拆分之前，字段事件的逻辑可以写在代码生成的config.ts文件中。具体是在每个字段的componentProps下的events属性中编写。能够接收的事件类型随组件不同而有所差异，如input组件中可以接收onChange、onBlur事件，select组件中可以接收onChange、onOptionsChange事件等，具体能够抛出的事件需要在组件中查看。在events中编写的事件会在simpleFormItem.vue文件中被收集解析并触发。（PC与移动端逻辑相同）</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span>componentProps<span class="token punctuation">[</span><span class="token string">&#39;events&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> eventKey <span class="token keyword">in</span> componentProps<span class="token punctuation">[</span><span class="token string">&#39;events&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">const</span> fun <span class="token operator">=</span> componentProps<span class="token punctuation">[</span><span class="token string">&#39;events&#39;</span><span class="token punctuation">]</span><span class="token punctuation">[</span>eventKey<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">let</span> event<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> fun <span class="token operator">===</span> <span class="token string">&#39;string&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                event <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token string">&#39;schema&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;formModel&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;formActionType&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;extParams&#39;</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>fun<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> fun <span class="token operator">===</span> <span class="token string">&#39;function&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                event <span class="token operator">=</span> fun<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">            componentProps<span class="token punctuation">[</span><span class="token string">&#39;on&#39;</span> <span class="token operator">+</span> <span class="token function">upperFirst</span><span class="token punctuation">(</span>eventKey<span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">let</span> cloneFormModel <span class="token operator">=</span> <span class="token function">cloneDeep</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">in</span> cloneFormModel<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                    <span class="token keyword">let</span> field <span class="token operator">=</span> <span class="token function">camelCaseString</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                    <span class="token keyword">if</span> <span class="token punctuation">(</span>field<span class="token punctuation">)</span> cloneFormModel<span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> cloneFormModel<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
+<span class="line">                <span class="token punctuation">}</span></span>
+<span class="line">                <span class="token function">event</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>schema<span class="token punctuation">,</span> isCamelCase <span class="token operator">?</span> cloneFormModel <span class="token operator">:</span> formModel<span class="token punctuation">,</span> props<span class="token punctuation">.</span>formApi<span class="token punctuation">,</span> <span class="token punctuation">{</span> formData<span class="token punctuation">,</span> value<span class="token punctuation">,</span> selectedOptions <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line">                <span class="token keyword">if</span> <span class="token punctuation">(</span>isCamelCase<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">in</span> formModel<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                        <span class="token keyword">let</span> field <span class="token operator">=</span> <span class="token function">camelCaseString</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                        <span class="token keyword">if</span> <span class="token punctuation">(</span>cloneFormModel <span class="token operator">&amp;&amp;</span> field <span class="token operator">&amp;&amp;</span> cloneFormModel<span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                            formModel<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> cloneFormModel<span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
+<span class="line">                        <span class="token punctuation">}</span></span>
+<span class="line">                    <span class="token punctuation">}</span></span>
+<span class="line">                <span class="token punctuation">}</span></span>
+<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;error&#39;</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            notification<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
+<span class="line">                <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;Tip&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;触发事件填写有误！&#39;</span></span>
+<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但是这样会导致代码生成的config.ts文件中会出现大量的事件函数，导致代码可读性降低，且修改表单值及其他变量很是不方便，因此在拆分后不推荐这种方式。</p><p>拆分表单后，可以直接将公共组件暴露出来，写在生成的CustomDevForm.vue文件中，所有的事件显隐等都可以自己进行控制。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span></span>
+<span class="line">    <span class="token operator">&lt;</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;getIfShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)&quot;</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;getIsShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)&quot;</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">&quot;getColWidth(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;])&quot;</span><span class="token operator">&gt;</span></span>
+<span class="line">        <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;showComponent(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;])&quot;</span><span class="token operator">&gt;</span></span>
+<span class="line">            <span class="token operator">&lt;</span>FormItem</span>
+<span class="line">                <span class="token operator">:</span>label<span class="token operator">=</span><span class="token string">&quot;&#39;审计内容&#39;&quot;</span></span>
+<span class="line">                <span class="token operator">:</span>rules<span class="token operator">=</span><span class="token string">&quot;schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;].rules&quot;</span></span>
+<span class="line">                name<span class="token operator">=</span><span class="token string">&quot;title&quot;</span></span>
+<span class="line">                <span class="token operator">:</span>required<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></span>
+<span class="line">            <span class="token operator">&gt;</span></span>
+<span class="line">                <span class="token operator">&lt;</span>a<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;formModel[schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;].field]&quot;</span> @blur<span class="token operator">=</span><span class="token string">&quot;blurInput&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></span>
+<span class="line">            <span class="token operator">&lt;</span><span class="token operator">/</span>FormItem<span class="token operator">&gt;</span></span>
+<span class="line">        <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span></span>
+<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">&gt;</span></span>
+<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果嫌这样麻烦，并且只是想监听字段变化并进行相应修改的话，也可以在代码生成的form层或者CustomDevForm对formModal的相应表单值进行监听，字段有变化后进行相应修改。</p>`,7)]))}const i=s(e,[["render",o]]),u=JSON.parse('{"path":"/front_dev/field_events.html","title":"字段事件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744964300000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"a0f722b8cfdbd98f98edf701d250f0318870372b","time":1744964300000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段编写"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/field_events.md"}');export{i as comp,u as data};
--- a/docs/assets/form.html-B4704WRj.js
+++ b/docs/assets/form.html-B4704WRj.js
@ -0,0 +1,138 @@
+import{_ as s,c as a,a as p,o as t}from"./app-CDlLWk6N.js";const e={};function l(c,n){return t(),a("div",null,n[0]||(n[0]=[p(`<h1 id="自定义表单" tabindex="-1"><a class="header-anchor" href="#自定义表单"><span>自定义表单</span></a></h1><blockquote><p>提示：完整的流程审批表单因为流程权限等过于复杂所以不建议手写，最好还是用系统生成及拆分的代码进行二开，以下叙述的场景仅限于简单表单或者是对原表单的扩展。</p></blockquote><h3 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h3><p>项目引入了ant-design-vue的表单组件，具体文档<a href="https://3x.antdv.com/components/form-cn/#Form-" target="_blank" rel="noopener noreferrer">点击查看</a> 简单的并且可复用的表单，可以使用和框架表单一样的形式，编写一个公共组件，通过config.ts来编写表单配置，然后使用公共组件simpleFormItem来渲染表单各个字段的组件。这样可以做到表单的复用，减少代码量。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>record<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema in config.schemas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema.field<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth(schema)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema[schema.field]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshFieldObj<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> onMounted<span class="token punctuation">,</span> ref<span class="token punctuation">,</span>unref<span class="token punctuation">,</span> defineProps<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> provide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">import</span> SimpleFormItem <span class="token keyword">from</span> <span class="token string">&#39;/@/components/SimpleForm/src/components/SimpleFormItem.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token literal-property property">record</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token literal-property property">type</span><span class="token operator">:</span> Object</span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token literal-property property">type</span><span class="token operator">:</span> Object</span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">&#39;formModel&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">.</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">&#39;formProps&#39;</span><span class="token punctuation">,</span> <span class="token function">ref</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>config<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> refreshFieldObj <span class="token operator">=</span> ref<span class="token operator">&lt;</span>object<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">refreshAPI</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">field</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>field<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>field<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> wrapWidth <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1080</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">function</span> <span class="token function">getColWidth</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">const</span> compProps <span class="token operator">=</span> schema<span class="token punctuation">.</span>componentProps<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span>compProps<span class="token operator">?.</span>responsive<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>compProps<span class="token punctuation">.</span>respNewRow<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">return</span> <span class="token number">24</span><span class="token punctuation">;</span> <span class="token comment">// 响应式布局下独立成行</span></span>
+<span class="line">        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">const</span> wrapValue <span class="token operator">=</span> wrapWidth<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span>wrapValue <span class="token operator">&gt;</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_RESP_LG_WIDTH</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">return</span> <span class="token number">8</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>wrapValue <span class="token operator">&gt;</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_RESP_MD_WIDTH</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">return</span> <span class="token number">12</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">return</span> <span class="token number">24</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token keyword">return</span> schema<span class="token punctuation">.</span>colProps<span class="token operator">?.</span>span<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
+<span class="line"><span class="token selector">.views-item</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token property">margin-top</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token property">height</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token property">overflow-y</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"><span class="token selector">:deep(.ant-input-disabled)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line"><span class="token selector">:deep(.ant-form-item-label &gt; label)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
+<span class="line"><span class="token selector">.ant-input-affix-wrapper-disabled</span><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"><span class="token selector">.ant-select-disabled</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token selector">.ant-select-selector</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token property">border</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token property">padding-left</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token selector">.ant-select-selection-item</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 0 0 / 85%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token selector">.ant-select-arrow</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然如果个性化差异比较大，也可以自己写手写表单的各个组件。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>views-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>record<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>责任类型<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>responsibilityType<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: &#39;请选择责任类型&#39; }]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>record.responsibilityType<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>responsibilityTypeOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择责任类型<span class="token punctuation">&quot;</span></span> <span class="token attr-name">allowClear</span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token comment">&lt;!--以下不一一列举--&gt;</span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
+<span class="line">    <span class="token selector">:deep(.ant-form-item-label &gt; label)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
+<span class="line">    <span class="token selector">.ant-select-disabled</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token selector">.ant-select-selector</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token property">border</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token property">padding-left</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line">        <span class="token selector">.ant-select-selection-item</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 0 0 / 85%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line">        <span class="token selector">.ant-select-arrow</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想主动进行表单校验，可以使用ref来获取表单实例，然后调用validate方法进行校验。这里校验的返回值是一个Promise，需要使用await进行等待。resolve的值是一个对象，如果校验成功则为表单包含数据，如果校验失败则为失败信息。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">const</span> formRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 表单实例</span></span>
+<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">validate</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 表单校验</span></span>
+<span class="line">    <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">unref</span><span class="token punctuation">(</span>formRef<span class="token punctuation">)</span><span class="token operator">?.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 表单校验</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也可以使用相同方法触发重置表单（resetFields）、移除校验结果（clearValidate）等操作。</p><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>项目使用了uniapp的组件，组件源码均在路径@/uni_module下，表单组件在@/uni_module/uni-forms/components下，配置项和PC端类似。参照实际情况即可，可以自己编写也可以直接使用。</p>`,12)]))}const i=s(e,[["render",l]]),u=JSON.parse('{"path":"/front_dev/adv/form.html","title":"自定义表单","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"PC端","slug":"pc端","link":"#pc端","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}],"git":{"updatedTime":1744962112000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"},{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/form.md"}');export{i as comp,u as data};
--- a/docs/assets/form_load_approveflow-BxWaWX9p.png
+++ b/docs/assets/form_load_approveflow-BxWaWX9p.png
--- a/docs/assets/form_load_form-BQvUCUn9.png
+++ b/docs/assets/form_load_form-BQvUCUn9.png
--- a/docs/assets/form_load_forminformation-fiSfvJc2.png
+++ b/docs/assets/form_load_forminformation-fiSfvJc2.png
--- a/docs/assets/form_logic.html-CA8-U3gW.js
+++ b/docs/assets/form_logic.html-CA8-U3gW.js
@ -0,0 +1,9 @@
+import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const o=""+new URL("form_load_approveflow-BxWaWX9p.png",import.meta.url).href,e=""+new URL("form_load_forminformation-fiSfvJc2.png",import.meta.url).href,l=""+new URL("form_load_form-BQvUCUn9.png",import.meta.url).href,c=""+new URL("vite_readme-BQgKo4m1.png",import.meta.url).href,u=""+new URL("form_logic_approval-W5mFAqfy.png",import.meta.url).href,r=""+new URL("form_logic_flowInfo-DaD_tsW8.png",import.meta.url).href,i=""+new URL("form_logic_system_form-cg_dlB6-.png",import.meta.url).href,m=""+new URL("form_logic_easycom-BG7WxKMV.png",import.meta.url).href,k=""+new URL("form_logic_system_form1-XuFq0MM-.png",import.meta.url).href,f=""+new URL("form_logic_system_form2-DnTonMCc.png",import.meta.url).href,d={};function g(_,a){return p(),s("div",null,a[0]||(a[0]=[t('<h1 id="表单的页面封装逻辑-pc端" tabindex="-1"><a class="header-anchor" href="#表单的页面封装逻辑-pc端"><span>表单的页面封装逻辑（PC端）</span></a></h1><p>如果是流程相关的页面，入口页面在secondDev目录下，以审批流程为例，第一个调用的是FormInformation组件。 <img src="'+o+`" alt="入口页面"></p><p>接下来进入到FormInformation，根据template部分可以得知，表单分为两种，其中低开模式会加载SimpleForm，也就是真实的表单，通过JSON渲染，其他模式，无论是数据优先，还是页面优先，都加载SystemForm。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token comment">&lt;!-- 表单信息 无关代码省略--&gt;</span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>activeIndex == index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token comment">&lt;!-- 如果是生成文件模式 formType = 0，也就是FormType.SYSTEM，会加载对应项目的Form.vue--&gt;</span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SystemForm</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.formType == FormType.SYSTEM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setItemRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isViewProcess</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>props.disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:systemComponent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.systemComponent<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:workflowConfig</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-box<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SimpleForm</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.formType == FormType.CUSTOM<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setItemRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.formProps<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-box<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>SystemForm的参数最重要的就是图中部分，这里包括表单的JSON配置，模块名和功能名（共同组成文件路径）： <img src="`+e+'" alt="入口页面"></p><p>SystemForm是一个hooks，核心代码是根据上面提供的路径，动态加载表单文件： <img src="'+l+'" alt="入口页面"></p><p>这里利用了两点：</p><p>（1）Vite/Webpack这类打包工具，在没进行混淆时，是用模块路径作为文件名的。</p><p>（2）Vite和defineAsyncComponent搭配时，会自动完成目录扫描、分卷、懒加载等功能，这点和Webpack不同，正如官网文档所说：</p><p><img src="'+c+'" alt="入口页面"></p><h1 id="表单的页面封装逻辑-移动端" tabindex="-1"><a class="header-anchor" href="#表单的页面封装逻辑-移动端"><span>表单的页面封装逻辑（移动端）</span></a></h1><p>移动端的表单加载逻辑与组件结构和PC端类似，入口页面在pages/workflow目录下。不过它将流程表单部分单独封装了一个组件，即FlowInfo，在发起流程（launch）和流程审批（approval）两个组件中复用。 <img src="'+u+'" alt="流程页面"></p><p>在flowInfo组件中，和PC端一致，第一个调用的也是FormInformation组件。</p><p><img src="'+r+'" alt="flowInfo组件"></p><p>下面的组件结构和PC端基本一致，不过表单组件的加载方式不同。移动端在生成代码时会将表单的组件直接写死到system-form/index组件中。</p><p><img src="'+i+'" alt="flowInfo组件"></p><p>这里使用了uni-app的<a href="https://uniapp.dcloud.net.cn/collocation/pages.html#easycom" target="_blank" rel="noopener noreferrer">easycom</a>，是一种组件自动注册机制。在pages.json中配置后，在页面中可以直接使用组件名，从而不需要手动引入。</p><p><img src="'+m+'" alt="flowInfo组件"></p><p>在判断加载哪一个form组件的逻辑上，参数的获取是和PC端一致的，判断逻辑则是在computed中用获取的参数拼凑出组件名与组件上写死的组件名相比较。</p><p><img src="'+k+'" alt="flowInfo组件"><img src="'+f+'" alt="flowInfo组件"></p>',20)]))}const v=n(d,[["render",g]]),h=JSON.parse('{"path":"/front_dev/form_logic.html","title":"表单的页面封装逻辑（PC端）","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744169755000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"02f57d762a90a2fa7144c0ab769a773211d71110","time":1743502134000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端部分的目录"},{"hash":"6b00dc3b796584764f267778542e4e208f169201","time":1743251097000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新表单封装说明"}]},"filePathRelative":"front_dev/form_logic.md"}');export{v as comp,h as data};
--- a/docs/assets/form_logic_approval-W5mFAqfy.png
+++ b/docs/assets/form_logic_approval-W5mFAqfy.png
--- a/docs/assets/form_logic_easycom-BG7WxKMV.png
+++ b/docs/assets/form_logic_easycom-BG7WxKMV.png
--- a/docs/assets/form_logic_flowInfo-DaD_tsW8.png
+++ b/docs/assets/form_logic_flowInfo-DaD_tsW8.png
--- a/docs/assets/form_logic_system_form-cg_dlB6-.png
+++ b/docs/assets/form_logic_system_form-cg_dlB6-.png
--- a/docs/assets/form_logic_system_form1-XuFq0MM-.png
+++ b/docs/assets/form_logic_system_form1-XuFq0MM-.png
--- a/docs/assets/form_logic_system_form2-DnTonMCc.png
+++ b/docs/assets/form_logic_system_form2-DnTonMCc.png
--- a/docs/assets/index.html-BfpfzkA1.js
+++ b/docs/assets/index.html-BfpfzkA1.js
@ -0,0 +1 @@
+import{_ as o,c as t,b as n,o as a}from"./app-CDlLWk6N.js";const c={};function i(m,e){return a(),t("div",null,e[0]||(e[0]=[n("p",null,"hello front docs",-1)]))}const s=o(c,[["render",i]]),d=JSON.parse('{"path":"/front_components/","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743218718000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"front_components/index.md"}');export{s as comp,d as data};
--- a/docs/assets/index.html-ByXOdSON.js
+++ b/docs/assets/index.html-ByXOdSON.js
@ -0,0 +1 @@
+import{_ as e,c as i,a as t,o as n}from"./app-CDlLWk6N.js";const o={};function r(s,a){return n(),i("div",null,a[0]||(a[0]=[t('<h1 id="关于全代码框架" tabindex="-1"><a class="header-anchor" href="#关于全代码框架"><span>关于全代码框架</span></a></h1><h1 id="注意事项" tabindex="-1"><a class="header-anchor" href="#注意事项"><span>注意事项</span></a></h1><p>由于表单拆分脚本的限制，为了方便后续的二开，在表单设计时需要遵守一些原则：</p><ul><li>避免在表单设计器里直接拖拽grid布局，系统提供了响应式布局（根据屏幕大小切换2/3列表单）的支持，无需手动绘制grid，如果需要grid或者flex布局，需要在表单拆分后进行。</li><li>避免在表单设计器里使用嵌套布局，目前脚本只支持<strong>非嵌套</strong>的Card、Tab布局和SubForm（明细表/子表）拆分。</li><li>在二开之前，不建议对config.ts文件进行格式化，否则可能会导致数据解析失败。因此，表单拆分应该在<strong>表单字段明确后立刻进行</strong>，越复杂的改动和配置拆分失败的概率越大。</li></ul><p>需要注意的是，表单拆分后依然使用config.ts文件，因此你可以生成新表单后，根据本文档对应章节提供的方法，手动补充缺失的字段，或者修改配置项。</p>',5)]))}const c=e(o,[["render",r]]),l=JSON.parse('{"path":"/","title":"关于全代码框架","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743498223000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2}],"changelog":[{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"},{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"index.md"}');export{c as comp,l as data};
--- a/docs/assets/index.html-xafVSSBu.js
+++ b/docs/assets/index.html-xafVSSBu.js
@ -0,0 +1,37 @@
+import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(c,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="二开说明" tabindex="-1"><a class="header-anchor" href="#二开说明"><span>二开说明</span></a></h1><p>全代码框架提供了全部的前端源码，因此你可以使用任何已有的前端知识去解决问题，本文档只是提供了一个推荐的思路。</p><p>类似的，如果你觉得封装组件过于繁琐，在保证功能和界面一致的前提下，可以使用antdesign-vue提供的原始组件，如数据表格、对话框等。</p><h1 id="二开准备" tabindex="-1"><a class="header-anchor" href="#二开准备"><span>二开准备</span></a></h1><p>本文档所有二开都是基于使用脚本将<strong>表单拆分</strong>后进行。为了封装的一致性，以及低开模式的实现，表单的主体是一个比较复杂的封装，通过JSON的配置数据实现字段渲染，虽然配置数据提供了校验、事件的接口，由于JSON文件和表单的主要文件在不同位置，在函数调用、值传递等方面有很多不便。因此我们提供了一个脚本，可以将JSON的配置文件拆分为若干个FormItem，以方便二开。</p><h1 id="pc端表单拆分" tabindex="-1"><a class="header-anchor" href="#pc端表单拆分"><span>PC端表单拆分</span></a></h1><p>脚本位于dev_tools目录，进入页面的components目录，如src/views/jianyi/test1/components，执行：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code><span class="line"><span class="token function">node</span> <span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span>dev_tools<span class="token punctuation">\\</span>template_extend.js</span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>如果是目录层级不一样，需要调整相对路径的层级。如果提示文件解析失败，需要调整配置代码，保证export const formProps: FormProps这一段定义的表单主体文件，必须为纯JS，而且不能有任何外部模块的引入（代码只是使用eval的方式读取表单的ID等信息，并不会真的使用这些模块）。</p><p>可以参考二开脚本中的对应代码，临时定义一些虚假的模块使文件能顺利解析：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;total rows: &#39;</span> <span class="token operator">+</span> confArr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> funStr <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string"></span>
+<span class="line">    const uploadApi = &#39;&#39;; // 修复文件上传引用的API</span>
+<span class="line">    return </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>confArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;\\n&#39;</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></span>
+<span class="line"></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">const</span> fun <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span>funStr<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">formProps <span class="token operator">=</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>拆分成功后，目录里会多出CustomDevForm、CustomDevSumForm、CustomDevTableItem这些文件，如果有多个表格，也会有1、2这样的序号附加。</p><p>找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CustomDevForm</span></span>
+<span class="line">    <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>systemFormRef<span class="token punctuation">&quot;</span></span></span>
+<span class="line">    <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data.formDataProps<span class="token punctuation">&quot;</span></span></span>
+<span class="line">    <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{}<span class="token punctuation">&quot;</span></span></span>
+<span class="line">    <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>props.fromPage!=FromPageType.MENU<span class="token punctuation">&quot;</span></span></span>
+<span class="line">  <span class="token punctuation">/&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> formProps<span class="token punctuation">,</span> formEventConfigs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./config&#39;</span><span class="token punctuation">;</span></span>
+<span class="line">  <span class="token comment">//注释掉原来的引入</span></span>
+<span class="line">  <span class="token comment">//import SimpleForm from &#39;/@/components/SimpleForm/src/SimpleForm.vue&#39;;</span></span>
+<span class="line">  <span class="token comment">//引入二开拆分后的文件，注意template部分也要换掉</span></span>
+<span class="line">  <span class="token keyword">import</span> CustomDevForm <span class="token keyword">from</span> <span class="token string">&quot;/@/views/jianyi/devgaofirst/components/CustomDevForm.vue&quot;</span><span class="token punctuation">;</span></span>
+<span class="line"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果模块没有经过定制，此时除了界面略有差别，应该和原有功能一致。</p><h1 id="移动端表单拆分" tabindex="-1"><a class="header-anchor" href="#移动端表单拆分"><span>移动端表单拆分</span></a></h1><p>移动端表单拆分的执行逻辑大体和PC端一致，脚本位于common/tools目录，进入页面的components目录，如pages/jianyi/test1/components，执行：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code><span class="line"><span class="token function">node</span> <span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span>common<span class="token punctuation">\\</span>tools<span class="token punctuation">\\</span>template_extend.js</span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>如果目录层级难以确定，需要调整相对路径的层级。最简单的方法是直接将脚本文件复制到对应目录下，然后在文件目录的层级下执行脚本。 需要注意的是，移动端表单生成的config/index.js文件中的formProps参数被压缩成为一行，在执行脚本前需将其格式化为标准的Object格式。 同样的，找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-fixed<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CustomDevForm</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>renderKey<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formConfig.formProps<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">:control</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formConfig.type<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CustomDevForm</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span>onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">import</span> SimpleForm <span class="token keyword">from</span> <span class="token string">&#39;@/components/simple-form/SimpleForm.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token keyword">import</span> CustomDevForm <span class="token keyword">from</span> <span class="token string">&#39;./CustomDevForm.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,20)]))}const i=s(e,[["render",o]]),u=JSON.parse('{"path":"/front_dev/","title":"二开说明","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"front_dev/index.md"}');export{i as comp,u as data};
--- a/docs/assets/pass_value.html-CFBEHlue.js
+++ b/docs/assets/pass_value.html-CFBEHlue.js
@ -0,0 +1,141 @@
+import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t=""+new URL("vmodel_demo--x0CSlwt.png",import.meta.url).href,o={};function l(c,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="pc端逻辑" tabindex="-1"><a class="header-anchor" href="#pc端逻辑"><span>PC端逻辑</span></a></h1><p>未绑定流程的表单和带流程的标配单赋值逻辑基本一致，在原始框架中，带流程的表单详情取值实际上取得是流程保存的一份冗余数据，而列表读取的是原始表单的数据，这样会导致数据不一致。在后续版本中，这个问题已经被修复。</p><h2 id="赋值过程-表单初始化" tabindex="-1"><a class="header-anchor" href="#赋值过程-表单初始化"><span>赋值过程（表单初始化）</span></a></h2><p>以流程表单为例，入口页面为SystemForm/src/Form，异步组件加载完成之后，会调用loadingCompleted函数。这个函数会调用ref的setWorkFlowForm，函数定义位于生成代码的components/Form.vue中。</p><p>对于非新建场景，id（就是默认的rowKey）存在，因此会调用setFormDataFromId，重新查一次表单数据，避免数据不一致问题，此时formModel实际上是有值的，但是值来自流程冗余，因此因此会调用setFormDataFromId会重新覆盖formModel的值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">setWorkFlowForm</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">let</span> flowData <span class="token operator">=</span> <span class="token function">changeWorkFlowForm</span><span class="token punctuation">(</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>formProps<span class="token punctuation">)</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">let</span> <span class="token punctuation">{</span>buildOptionJson<span class="token punctuation">,</span> uploadComponentIds<span class="token punctuation">,</span> formModels<span class="token punctuation">,</span> isViewProcess<span class="token punctuation">}</span> <span class="token operator">=</span> flowData<span class="token punctuation">;</span></span>
+<span class="line">        data<span class="token punctuation">.</span>formDataProps <span class="token operator">=</span> buildOptionJson<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;changeUploadComponentIds&#39;</span><span class="token punctuation">,</span> uploadComponentIds<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//工作流中必须保存上传组件id【附件汇总需要】</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>isViewProcess<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token function">setDisabledForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//查看</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">        state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> formModels<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>formModels<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token function">setFormDataFromId</span><span class="token punctuation">(</span>formModels<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最后，这个函数会调用SimpleForm/SimpleFormSetup的setFieldsValue函数完成表单赋值，因此，最上面template里formModel的定义仅仅是为了防止初值没有报错。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">setFormDataFromId</span><span class="token punctuation">(</span><span class="token parameter">rowId<span class="token punctuation">,</span> skipUpdate</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">const</span> record <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDevgaofirst</span><span class="token punctuation">(</span>rowId<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>skipUpdate<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">return</span> record<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token function">setFieldsValue</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> record<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">await</span> <span class="token function">getFormDataEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：获取表单数据</span></span>
+<span class="line">        <span class="token keyword">return</span> record<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="取值过程-表单提交" tabindex="-1"><a class="header-anchor" href="#取值过程-表单提交"><span>取值过程（表单提交）</span></a></h2><p>表单提交时调用的实际上是表单的校验函数，这个函数会返回表单的值：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">saveLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    data<span class="token punctuation">.</span>submitLoading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line">    loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">let</span> validateForms <span class="token operator">=</span> <span class="token keyword">await</span> formInformation<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>validateForms<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line"></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token comment">// 后面代码省略</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意的是，这个函数的返回值必须表单中有效的antd-vue表单字段，而且字段必须渲染出来（可以v-show不能v-if，隐藏字段会自动处理）。因此修改提交值可以在模块生成的form.vue中找到validate函数：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">          values <span class="token operator">=</span> <span class="token keyword">await</span> systemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">          <span class="token comment">//可以修改values，加入需要额外提交给后端的值</span></span>
+<span class="line">          <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>formDataProps<span class="token punctuation">.</span>hiddenComponent<span class="token operator">?.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token comment">// 其他代码省略</span></span>
+<span class="line">          <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token keyword">return</span> values<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单值绑定-v-model" tabindex="-1"><a class="header-anchor" href="#表单值绑定-v-model"><span>表单值绑定（v-model）</span></a></h2><p>在拆分后的CustomDevForm中，formModel为响应式的，下面是一个例子，直接利用formModel拼接字符串，同时保持表单样式（提交时不传值）：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token comment">&lt;!-- 其余代码省略 --&gt;</span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth({responsive: true})<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vmodel演示<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            {{formModel.danXingWenBen5090 + &#39;/&#39; + formModel.danXingWenBen23227}}</span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下： <img src="`+t+`" alt="演示"></p><h1 id="移动端逻辑" tabindex="-1"><a class="header-anchor" href="#移动端逻辑"><span>移动端逻辑</span></a></h1><p>表述与PC端基本一致，不再赘述。流程表单赋值也修改为从原始表单获取而非流程表单。</p><h2 id="赋值过程-表单初始化-1" tabindex="-1"><a class="header-anchor" href="#赋值过程-表单初始化-1"><span>赋值过程（表单初始化）</span></a></h2><p>移动端赋值过程相对PC端简化很多，在流程层获取到流程数据后，向下传递，在FormInformation.vue层存贮到公共文件userFormInfo.js文件中。然后接着通过loadForm方法向下层组件传递。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// FormInformation.vue</span></span>
+<span class="line"><span class="token keyword">function</span> <span class="token function">setFormModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">  <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">if</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>platform<span class="token operator">==</span><span class="token string">&#39;wx&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">// 无关代码省略</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
+<span class="line">      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator">&lt;</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">          <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>forms<span class="token punctuation">.</span>formModels<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">!=</span><span class="token string">&quot;{}&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">            <span class="token comment">//这里放入流程表单数据</span></span>
+<span class="line">            itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">loadForm</span><span class="token punctuation">(</span>forms<span class="token punctuation">.</span>formModels<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">          <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
+<span class="line">            itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">          <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">      <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line"></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>system-form层同样触发下层form的loadForm方法。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// system-form层</span></span>
+<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">formModel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">	<span class="token keyword">await</span> systemRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">loadForm</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在生成的表单文件form.vue中，通过传递过来的formModel的rowKey值查询一遍原始表单数据，最后赋值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// form.vue</span></span>
+<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">	<span class="token keyword">let</span> id <span class="token operator">=</span> val<span class="token punctuation">[</span>rowKey<span class="token punctuation">]</span></span>
+<span class="line">  formConfig<span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span></span>
+<span class="line">  <span class="token keyword">const</span> <span class="token punctuation">{</span></span>
+<span class="line">    data</span>
+<span class="line">  <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getxxx</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">  <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">await</span> formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFormData</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> <span class="token operator">...</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="取值过程-表单提交-1" tabindex="-1"><a class="header-anchor" href="#取值过程-表单提交-1"><span>取值过程（表单提交）</span></a></h2><p>移动端与PC端不同的是，在提交表单的时候校验函数和获取表单值的函数是分别进行的，validate函数并没有返回表单的值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 流程提交参数</span></span>
+<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">saveLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">        uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token comment">// 校验表单</span></span>
+<span class="line">        <span class="token keyword">let</span> validateForms <span class="token operator">=</span> <span class="token keyword">await</span> flowInfoRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>validateForms<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">let</span> successValidate <span class="token operator">=</span> validateForms<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">return</span> ele<span class="token punctuation">.</span>validate<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span>successValidate<span class="token punctuation">.</span>length <span class="token operator">==</span> validateForms<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token comment">// 获取表单值</span></span>
+<span class="line">                mainFormModels<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> flowInfoRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                <span class="token comment">// 其他代码省略</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token comment">// 其他代码省略</span></span>
+<span class="line">                </span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里获取表单值的函数的最底层是在simpleForm.vue公共组件，在这里getFormData函数返回与表单双向绑定的formModelRef的值，然后每一层都有一个getFormData函数向外暴露，以方便在最外层获取表单的值。在FormInformation.vue中，因为原始框架支持多表单，所以对多个表单值进行了合并处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">let</span> formModes <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">if</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>platform<span class="token operator">==</span><span class="token string">&#39;wx&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">// 无关代码省略</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator">&lt;</span> forms<span class="token punctuation">.</span>configs<span class="token punctuation">.</span>length<span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">                    <span class="token keyword">let</span> formModel <span class="token operator">=</span>  <span class="token keyword">await</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">getFormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                    <span class="token keyword">if</span><span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>formType<span class="token operator">==</span>FormType<span class="token punctuation">.</span><span class="token constant">SYSTEM</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">                        <span class="token keyword">let</span> formModelIdVal <span class="token operator">=</span> <span class="token keyword">await</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                        formModel <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>formModel<span class="token punctuation">,</span><span class="token operator">...</span>formModelIdVal<span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">                    <span class="token punctuation">}</span></span>
+<span class="line">                    formModes<span class="token punctuation">[</span>forms<span class="token punctuation">.</span>configs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>formKey<span class="token punctuation">]</span> <span class="token operator">=</span> formModel<span class="token punctuation">;</span></span>
+<span class="line">                <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token punctuation">}</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token comment">// 无关代码省略</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单值绑定-v-model-1" tabindex="-1"><a class="header-anchor" href="#表单值绑定-v-model-1"><span>表单值绑定（v-model）</span></a></h2><p>该部分逻辑基本与PC端一致，不再赘述。</p>`,33)]))}const u=s(o,[["render",l]]),r=JSON.parse('{"path":"/front_dev/pass_value.html","title":"PC端逻辑","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"赋值过程（表单初始化）","slug":"赋值过程-表单初始化","link":"#赋值过程-表单初始化","children":[]},{"level":2,"title":"取值过程（表单提交）","slug":"取值过程-表单提交","link":"#取值过程-表单提交","children":[]},{"level":2,"title":"表单值绑定（v-model）","slug":"表单值绑定-v-model","link":"#表单值绑定-v-model","children":[]},{"level":2,"title":"赋值过程（表单初始化）","slug":"赋值过程-表单初始化-1","link":"#赋值过程-表单初始化-1","children":[]},{"level":2,"title":"取值过程（表单提交）","slug":"取值过程-表单提交-1","link":"#取值过程-表单提交-1","children":[]},{"level":2,"title":"表单值绑定（v-model）","slug":"表单值绑定-v-model-1","link":"#表单值绑定-v-model-1","children":[]}],"git":{"updatedTime":1744251107000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":3},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"},{"hash":"6b00dc3b796584764f267778542e4e208f169201","time":1743251097000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新表单封装说明"}]},"filePathRelative":"front_dev/pass_value.md"}');export{u as comp,r as data};
--- a/docs/assets/show_and_hide.html-Bai-A-AK.js
+++ b/docs/assets/show_and_hide.html-Bai-A-AK.js
@ -0,0 +1,57 @@
+import{_ as n,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function o(l,s){return e(),a("div",null,s[0]||(s[0]=[p(`<h1 id="pc端设计" tabindex="-1"><a class="header-anchor" href="#pc端设计"><span>PC端设计</span></a></h1><h2 id="默认情况下的显示-隐藏设计" tabindex="-1"><a class="header-anchor" href="#默认情况下的显示-隐藏设计"><span>默认情况下的显示/隐藏设计</span></a></h2><p>以默认的组件封装为例，我们可以看到3个控制显隐的部分</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth(schema)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showComponent(schema) &amp;&amp; schema.type !== &#39;slot&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel[schema.field]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formApi<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isWorkFlow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshFieldObj<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>showComponent是某些特殊组件的显隐控制，和组件类型有关，目前只有2个用到该值，一个是隐藏字段，一个是在非流程中隐藏审批意见字段。</p><p>而getIfShow和getIsShow的逻辑完全相同，都是判断ifShow和isShow（读的是show）的值，这两个值可以是bool也可以是函数，区别是：</p><ul><li>isShow是直接控制表单字段显隐的属性，无需流程绑定，可以在表单编辑器配置，也可以在config.ts里修改</li><li>ifShow是用于框架内部逻辑，是的，全开的内置页面（包括系统设置、权限管理等）也使用同样的封装逻辑，假如内置页面需要某些字段在特定时候才能修改，就会使用ifShow字段</li></ul><p>对于流程绑定的显隐是show字段，这个字段由useWorkflowForm将流程节点配置的view参数转化得到，这里你也可以看到，流程通过dynamicDisabled字段控制只读编辑：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getSchemePermissionItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span>permissionConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">//查看</span></span>
+<span class="line">        schema<span class="token punctuation">.</span>show <span class="token operator">=</span> permissionConfig<span class="token punctuation">.</span>view<span class="token punctuation">;</span></span>
+<span class="line">        <span class="token comment">// 无用代码省略</span></span>
+<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span>isViewProcess<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            schema<span class="token punctuation">.</span>dynamicDisabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
+<span class="line">        schema<span class="token punctuation">.</span>show <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
+<span class="line">        schema<span class="token punctuation">.</span>dynamicDisabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在SimpleFormItem里会读取这个show参数：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getShow</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">schema</span><span class="token operator">:</span> FormSchema</span><span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">const</span> <span class="token punctuation">{</span> show <span class="token punctuation">}</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">let</span> isIfShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isBoolean</span><span class="token punctuation">(</span>show<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        isIfShow <span class="token operator">=</span> show<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token keyword">return</span> isIfShow<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意show的优先级大于isShow，这点从代码可以看出来，getIsShow函数中，如果show有值会覆盖掉isShow的值。</p><h2 id="二开控制显隐" tabindex="-1"><a class="header-anchor" href="#二开控制显隐"><span>二开控制显隐</span></a></h2><p>对于拆分后的代码，所有字段都是Col和SimpleFormItem，因此直接使用v-show控制显隐即可。对于非拆分的字段，可以复写配置的ifShow，注意以配置文件复写的ifShow在外层，和key同级：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 无关属性省略</span></span>
+<span class="line"><span class="token keyword">const</span> field <span class="token operator">=</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;044e8bc1f9c345e0afa024ed7f21fe50&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">field</span><span class="token operator">:</span> <span class="token string">&#39;duoXingWenBen3343&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;多行文本&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;textarea&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token comment">// 四个参数分别为当前字段值、整个页面的model、当前字段配置、当前字段名</span></span>
+<span class="line">    <span class="token function-variable function">ifShow</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>values<span class="token punctuation">,</span> model<span class="token punctuation">,</span> schema<span class="token punctuation">,</span> field<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">return</span> model<span class="token punctuation">.</span>danXingWenBen23227<span class="token operator">?.</span>length <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果被控制的组件位于tab、grid等嵌套组件内，我们建议直接拆分后二开，对于非拆分二开，这里提供个思路：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getIsShow</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">schema</span><span class="token operator">:</span> FormSchema</span><span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token keyword">const</span> <span class="token punctuation">{</span> componentProps<span class="token punctuation">,</span> show <span class="token punctuation">}</span> <span class="token operator">=</span> schema <span class="token keyword">as</span> any<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">let</span> isShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isBoolean</span><span class="token punctuation">(</span>componentProps<span class="token operator">?.</span>isShow<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        isShow <span class="token operator">=</span> componentProps<span class="token punctuation">.</span>isShow<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> componentProps<span class="token operator">?.</span>isShow <span class="token operator">===</span> <span class="token string">&#39;function&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">// 支持isShow的函数格式，这里的formModel为响应式，可以拿到表单的动态值</span></span>
+<span class="line">        isShow <span class="token operator">=</span> componentProps<span class="token punctuation">.</span><span class="token function">isShow</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isBoolean</span><span class="token punctuation">(</span>show<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">// 要求show和isShow同时为真才显示</span></span>
+<span class="line">        isShow <span class="token operator">=</span> show <span class="token operator">&amp;&amp;</span> isShow<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token keyword">return</span> isShow<span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样就可以将isShow改为函数，动态计算显隐状态。</p><h1 id="移动端设计" tabindex="-1"><a class="header-anchor" href="#移动端设计"><span>移动端设计</span></a></h1><p>移动端组件显隐逻辑基本与PC端一致，不再赘述。</p>`,20)]))}const i=n(t,[["render",o]]),u=JSON.parse('{"path":"/front_dev/show_and_hide.html","title":"PC端设计","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"默认情况下的显示/隐藏设计","slug":"默认情况下的显示-隐藏设计","link":"#默认情况下的显示-隐藏设计","children":[]},{"level":2,"title":"二开控制显隐","slug":"二开控制显隐","link":"#二开控制显隐","children":[]}],"git":{"updatedTime":1747389721000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":3},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"188cbc46624542e1a9abf959efad3722b26c8754","time":1747389721000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新grid等嵌套组件的显隐控制方法"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"}]},"filePathRelative":"front_dev/show_and_hide.md"}');export{i as comp,u as data};
--- a/docs/assets/style-CQp7YV5d.css
+++ b/docs/assets/style-CQp7YV5d.css
--- a/docs/assets/table.html-BrzZNtYJ.js
+++ b/docs/assets/table.html-BrzZNtYJ.js
@ -0,0 +1,225 @@
+import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e=""+new URL("custom_searchform-C_-nGOSW.png",import.meta.url).href,l=""+new URL("table_1-Dc0vlV5m.png",import.meta.url).href,c=""+new URL("table_2-BfgKP28D.png",import.meta.url).href,o=""+new URL("table_3-DJgiqMOC.png",import.meta.url).href,i={};function u(r,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="表格" tabindex="-1"><a class="header-anchor" href="#表格"><span>表格</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><h3 id="自定义表格搜索功能" tabindex="-1"><a class="header-anchor" href="#自定义表格搜索功能"><span>自定义表格搜索功能</span></a></h3><p>在某些场景，如级联、表单联动，则需要自定义搜索功能，首先，我们需要取消全开框架生成的搜索功能，需要在生成的模块中找到<strong>index.vue</strong>文件，找到<strong>useTable</strong>并<strong>schemas</strong>属性给删掉，并在需要添加<strong>showSubmitButton: false</strong>，此属性是取消原来搜索功能的搜索按钮，将<strong>showResetButton</strong>设置为false，隐藏原来搜索功能的重置按钮，经过以上操作就会发现表格自带的搜索功能消失不见。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token comment">// 前面代码省略</span></span>
+<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">,</span> <span class="token punctuation">{</span> reload<span class="token punctuation">,</span>   <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">(</span>formName <span class="token operator">+</span> <span class="token string">&#39;列表&#39;</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">api</span><span class="token operator">:</span> getTestTablePage<span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">rowKey</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">columns</span><span class="token operator">:</span> filterColumns<span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">formConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token literal-property property">rowProps</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token literal-property property">gutter</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">schemas</span><span class="token operator">:</span> searchFormSchema<span class="token punctuation">,</span> <span class="token comment">// 原始表单显示的表单项的配置</span></span>
+<span class="line">        <span class="token literal-property property">fieldMapToTime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
+<span class="line">        <span class="token literal-property property">showResetButton</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制原始表单的重置功能，一般为“重置”按钮</span></span>
+<span class="line">        <span class="token literal-property property">showSubmitButton</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制原始表单触发搜索的按钮的显隐，一般为“搜索”按钮</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token function-variable function">beforeFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>params<span class="token punctuation">,</span> <span class="token literal-property property">FormId</span><span class="token operator">:</span> formIdComputedRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token constant">PK</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token function-variable function">afterFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">      tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setToolBarWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">useSearchForm</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否使用搜索表单</span></span>
+<span class="line">    <span class="token literal-property property">showTableSetting</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token literal-property property">striped</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">actionColumn</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;操作&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> <span class="token string">&#39;action&#39;</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">slots</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">customRender</span><span class="token operator">:</span> <span class="token string">&#39;action&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token literal-property property">tableSetting</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">setting</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"></span>
+<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">// 后面省略代码</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，自定义搜索表单，可以用ant-design-vue中的a-form，特别注意的，自定义搜索表单的字段必须存在表格已经定义的字段里面，若不存在的话，可能会导致该字段搜索无效，具体字段可以查看<strong>index.vue</strong>所在目录下的<strong>components</strong>对应的<strong>config.ts</strong>的<strong>searchFormSchema</strong>中的<strong>field</strong>，如下：</p><p>config.ts</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line">/** 省略代码 **/</span>
+<span class="line">export const searchFormSchema: FormSchema[] = [</span>
+<span class="line">    {</span>
+<span class="line">        field: &#39;mingZi8847&#39;,</span>
+<span class="line">        label: &#39;名字&#39;,</span>
+<span class="line">        component: &#39;Input&#39;,</span>
+<span class="line">    },</span>
+<span class="line">    {</span>
+<span class="line">        field: &#39;zhi4547&#39;,</span>
+<span class="line">        label: &#39;值&#39;,</span>
+<span class="line">        component: &#39;Input&#39;,</span>
+<span class="line">    },</span>
+<span class="line">];</span>
+<span class="line">/** 省略代码 **/</span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接下来就是重写搜索功能，全开框架的<strong>BasicTable</strong>组件预留了一个<strong>headerContent</strong>的插槽，自定义的搜索功能就是写在这个插槽里面，而<strong>BasicTable</strong>组件提供了一个搜索表格方法<strong>beforeSearchInfoChange</strong>，我们只需要把搜索的字段和对应的值传入这个方法，接口实现与表格的联动，如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form</span></span>
+<span class="line">            <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inline<span class="token punctuation">&quot;</span></span></span>
+<span class="line">            <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customHandleSubmit<span class="token punctuation">&quot;</span></span></span>
+<span class="line">        <span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>名字<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customSearchForm.mingZi8847<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">html-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">     <span class="token comment">&lt;!-- 其余代码省略 --&gt;</span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token comment">// 前面代码省略</span></span>
+<span class="line"><span class="token keyword">const</span> customSearchForm <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token literal-property property">mingZi8847</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
+<span class="line"></span>
+<span class="line"><span class="token keyword">function</span> <span class="token function">customHandleSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">    tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">beforeSearchInfoChange</span><span class="token punctuation">(</span>customSearchForm<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"><span class="token comment">// 后面省略代码</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>特别注意</strong>：</p><p>1、在比较早的全开框架版本中，<strong>BasicTable</strong>组件的<strong>beforeSearchInfoChange</strong>并没有导出，最新版本则已经导出；若没有，则需要自己找到<strong>BasicTable</strong>组件手动导出，如下：</p><p>BasicTable.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token comment">// 前面代码省略</span></span>
+<span class="line"><span class="token keyword">function</span> <span class="token function">beforeSearchInfoChange</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token function">setSearchFormData</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token function">handleSearchInfoChange</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"><span class="token comment">// 中间代码省略</span></span>
+<span class="line"><span class="token function">expose</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>tableAction<span class="token punctuation">,</span> beforeSearchInfoChange<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">// 后面省略代码</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2、全开框架的<strong>BasicTable</strong>组件预留了一个<strong>headerContent</strong>的插槽默认是在最右侧，若需让它靠左的话，可在<strong>index.vue</strong>中添加以下样式。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
+<span class="line">  <span class="token selector">// 前面代码省略</span>
+<span class="line">  :deep(.ant-table-title)</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token selector">.items-center</span> <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">  <span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="带有展开功能的搜索二开" tabindex="-1"><a class="header-anchor" href="#带有展开功能的搜索二开"><span>带有展开功能的搜索二开</span></a></h3><p>如果你的搜索条件比较多，而且需要保持原有的样式，可以按照下面的方式进行二开。这里隐藏了原始代码，只给出template和样式的修改部分，事件绑定可以参考源文件里的组件定义。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!-- 默认form-item有下边距，这里写死高度，因为展开的时候还要保持下边距 --&gt;</span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 32px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vben-basic-form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token comment">&lt;!-- suspensionRow样式默认带了弹出效果 但是必须和vben-basic-form连用 --&gt;</span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-row</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ suspensionRow: isAdv }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token comment">&lt;!-- 注意这里的层级，row部分是搜索表单，col里面的action是搜索按钮 --&gt;</span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token comment">&lt;!-- 不展开的时候其余的字段隐藏 注意默认样式col-8在搜索中定死了宽度280px --&gt;</span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{display: isAdv ? &#39;block&#39; : &#39;none&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{display: isAdv ? &#39;block&#39; : &#39;none&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{display: isAdv ? &#39;block&#39; : &#39;none&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                            <span class="token comment">&lt;!-- 只要绑定事件就行 默认就开启了搜索、重置、展开这3个按钮 --&gt;</span></span>
+<span class="line">                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form-action</span> <span class="token attr-name">:is-advanced</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isAdv<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@toggle-advanced</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleAdv<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form-action</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-row</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line">    <span class="token keyword">import</span> FormAction <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/src/components/FormAction.vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token keyword">const</span> isAdv <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token keyword">function</span> <span class="token function">toggleAdv</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">// 注意form-action的展开状态不是自己保存的 需要外部状态控制</span></span>
+<span class="line">        isAdv<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token operator">!</span>isAdv<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
+<span class="line">    <span class="token comment">/*隐藏原来表单的区域 否则中间会被占满*/</span></span>
+<span class="line">    <span class="token selector">:deep(.ant-table-title .items-center)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span>
+<span class="line">    <span class="token comment">/* 让展开时的搜索按钮和表单左右显示 */</span></span>
+<span class="line">    <span class="token selector">:deep(.ant-row.suspensionRow)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下 <img src="`+e+`" alt="搜索二开效果"></p><h3 id="自定义表格列" tabindex="-1"><a class="header-anchor" href="#自定义表格列"><span>自定义表格列</span></a></h3><p>在某些场景，我们需要对表格的某些列进行定制化开发，例如显示进度条，tag标签等，可在<strong>BasicTable</strong>的<strong>bodyCell</strong>插槽里面添加，在<strong>bodyCell</strong>插槽里面尽量使用<strong>v-if/v-else-if</strong>，防止匹配多列的情况，其中：<strong>column</strong>为列的配置，<strong>record</strong>为数据源。<strong>特别注意</strong>：自定义表格列会覆盖原有的列，示例代码如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token comment">&lt;!-- 前面代码省略 --&gt;</span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#bodyCell</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ column, record }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token comment">&lt;!-- 前面代码省略 --&gt;</span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>column.dataIndex === &#39;zhi4547&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-progress</span> <span class="token attr-name">:percent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>record[column.dataIndex]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果：</p><p><img src="`+l+`" alt="自定义表格列效果"></p><h3 id="修改分页" tabindex="-1"><a class="header-anchor" href="#修改分页"><span>修改分页</span></a></h3><p>若你不需要分页，可以在<strong>BasicTable</strong>组件上，将<strong>pagination</strong>置为<strong>false</strong>即可取消分页，如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token comment">&lt;!-- 前面代码省略 --&gt;</span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token comment">&lt;!-- 中间代码省略 --&gt;</span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token comment">&lt;!-- 后面代码省略 --&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>修改分页，若需要调整分页的样式，<strong>BasicTable</strong>组件提供了获取分页配置接口<strong>getPaginationRef</strong>和设置分页配置接口<strong>setPagination</strong>，分页配置里面具体的参数可以参考<strong>Ant-Design-Vue</strong>的分页<strong>Pagination</strong>，修改分页配置生命周期<strong>onMounted</strong>修改，如下：我将分页修改成简单分页以及每页只展示1条数据。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line">// 前面代码省略</span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">// 中间代码省略</span></span>
+<span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token comment">// 中间代码省略</span></span>
+<span class="line">    <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">const</span> pagination <span class="token operator">=</span> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">getPaginationRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        pagination<span class="token punctuation">.</span>simple <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
+<span class="line">        pagination<span class="token punctuation">.</span>pageSize <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span></span>
+<span class="line">        tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">setPagination</span><span class="token punctuation">(</span>pagination<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">// 后面代码省略</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下：</p><p><img src="`+c+`" alt="修改表格分页效果"></p><h3 id="表格的其他功能" tabindex="-1"><a class="header-anchor" href="#表格的其他功能"><span>表格的其他功能</span></a></h3><p><strong>BasicTable</strong>组件还提供了其他功能，如<strong>useTable</strong>中提供了<strong>beforeFetch</strong>和<strong>afterFetch</strong>方法，<strong>beforeFetch</strong>是表格发送请求前的拦截，可以在这里对参数进行处理；<strong>afterFetch</strong>是表格请求后返回的数据，可以在这里对返回的数据进行格式处理等，若你在<strong>afterFetch</strong>对数据进行处理，你必须把处理完的结果<strong>return</strong>回去，否则无法生效，如：我对表格返回的数据中的<strong>zhi4547</strong>全部设置为100。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
+<span class="line"><span class="token comment">// 前面代码省略</span></span>
+<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">,</span> <span class="token punctuation">{</span> reload<span class="token punctuation">,</span>   <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
+<span class="line">    <span class="token comment">// 中间代码省略</span></span>
+<span class="line">    <span class="token function-variable function">beforeFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token comment">// 可以对筛选的参数params进行处理</span></span>
+<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>params<span class="token punctuation">,</span> <span class="token literal-property property">FormId</span><span class="token operator">:</span> formIdComputedRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token constant">PK</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token function-variable function">afterFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">const</span> newRes <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
+<span class="line">                <span class="token operator">...</span>item<span class="token punctuation">,</span></span>
+<span class="line">                <span class="token literal-property property">zhi4547</span><span class="token operator">:</span> <span class="token number">100</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
+<span class="line">        tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setToolBarWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">return</span> newRes<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">    <span class="token comment">// 中间代码省略</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line"><span class="token comment">// 后面代码省略</span></span>
+<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下：表格zhi4547字段所在的列（表格列名为：值）进度都为100%。</p><p><img src="`+o+'" alt="拦截表格请求"></p><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>移动端暂不支持表格组件，移动端的子表展示形式是多组表单的形式，这里不多赘述。</p>',46)]))}const d=s(i,[["render",u]]),v=JSON.parse('{"path":"/front_dev/adv/table.html","title":"表格","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[{"level":3,"title":"自定义表格搜索功能","slug":"自定义表格搜索功能","link":"#自定义表格搜索功能","children":[]},{"level":3,"title":"带有展开功能的搜索二开","slug":"带有展开功能的搜索二开","link":"#带有展开功能的搜索二开","children":[]},{"level":3,"title":"自定义表格列","slug":"自定义表格列","link":"#自定义表格列","children":[]},{"level":3,"title":"修改分页","slug":"修改分页","link":"#修改分页","children":[]},{"level":3,"title":"表格的其他功能","slug":"表格的其他功能","link":"#表格的其他功能","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}]}],"git":{"updatedTime":1748592359000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3},{"name":"Chen_Jie_Wen","username":"","email":"chen_junior@163.com","commits":5},{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"59b422a86f2f849b8c6b350ebbee8d78762110e1","time":1748592359000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"docs: 更新高级搜索的二开介绍"},{"hash":"dc0d515ab82a6e8e8bba217158197b368453eff7","time":1748426738000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-表格其他功能"},{"hash":"1cd0de4d9c53c6e980cce3a5d661a68e82d399ad","time":1748403560000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-修改分页"},{"hash":"4af82936ff5b6445d26bbb2e9d4a24bf28f96f16","time":1748339132000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档自定义表格列"},{"hash":"262bfff5fb69dad24a8cd9532291de38cca325c1","time":1748329306000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 调整自定义表格搜索功能文档"},{"hash":"412c2a8d273e8041c74673e5a1585dcaf6d120d1","time":1748314623000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 重写table文档之自定义表格搜索功能"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"},{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/table.md"}');export{d as comp,v as data};
--- a/docs/assets/table_1-Dc0vlV5m.png
+++ b/docs/assets/table_1-Dc0vlV5m.png
--- a/docs/assets/table_2-BfgKP28D.png
+++ b/docs/assets/table_2-BfgKP28D.png
--- a/docs/assets/table_3-DJgiqMOC.png
+++ b/docs/assets/table_3-DJgiqMOC.png
--- a/docs/assets/teleport.html-BIP5te2y.js
+++ b/docs/assets/teleport.html-BIP5te2y.js
@ -0,0 +1,46 @@
+import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e=""+new URL("base_teleport-vbaCZqqF.png",import.meta.url).href,l={};function o(c,a){return p(),s("div",null,a[0]||(a[0]=[t(`<h1 id="为工具栏添加按钮" tabindex="-1"><a class="header-anchor" href="#为工具栏添加按钮"><span>为工具栏添加按钮</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><p>关于表单头部工具栏添加新的自定义按钮，可以使用vue的teleport组件。首先在需要添加按钮的元素上添加一个任意Id。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page-bg-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-spin</span> <span class="token attr-name">:spinning</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">tip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>加载中...<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>geg-flow-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-toolbar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token comment">&lt;!-- 在a-space上添加id approveExtendButton --&gt;</span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-space</span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">wrap</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>approveExtendButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>second-dev-space<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token comment">&lt;!-- 这里是原本的按钮 省略 --&gt;</span></span>
+<span class="line">                        </span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-space</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flow-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormInformation</span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>randKey<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formInformation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formAssignmentData</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data.formAssignmentData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formInfos</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data.formInfos<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:opinions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data.opinions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:opinionsComponents</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data.opinionsComponents<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
+<span class="line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            <span class="token comment">&lt;!-- 无用代码省略 --&gt;</span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-spin</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后可以在生成的form.vue文件中或者拆分的CustomDevForm.vue文件中添加teleport组件</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Teleport</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#approveExtendButton<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reInquiry<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            重新查询</span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>endInquiry<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            结束查询</span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Teleport</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意的是，teleport组件的to属性必须是一个存在的元素的id。不然会报错导致渲染失效。</p><p><img src="`+e+`" alt="teleport报错"></p><p>如果可以判断目标元素不存在，可以用:disabled或者v-if来禁止teleport的使用以避免报错。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Teleport</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#approveExtendButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>!isExist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reInquiry<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            重新查询</span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>endInquiry<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">            结束查询</span>
+<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Teleport</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>按钮默认添加位置是在原按钮之后，如果想在特殊位置添加按钮，比如原有按钮之前，可以在按钮前添加id特殊的一个元素如span，然后再用teleport组件添加相应按钮。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-space</span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">wrap</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>approveExtendButton<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>approveExtendButtonLeft<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line">                        <span class="token comment">&lt;!-- 原按钮位置 --&gt;</span></span>
+<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-space</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果有特殊需求比如不使用原按钮，也是可以的。这里举例一种方法：定义一个参数控制原按钮块的显隐，新写一个按钮块区域显隐逻辑与原按钮块相反，然后定义一个函数变化这个参数，并将这个函数使用provide传递给孙子组件；在form或者CustomDevForm组件中接收控制原按钮块隐藏，然后将新的teleport组件内容传送到新按钮块中。这里仅仅说明思路仅供参考，具体实现可以根据实际需求进行调整。</p><p>移动端暂不支持添加按钮</p>`,14)]))}const i=n(l,[["render",o]]),k=JSON.parse('{"path":"/front_dev/base/teleport.html","title":"为工具栏添加按钮","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[]}],"git":{"updatedTime":1744278865000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"a3e2cde9db0dbccdbce661749aef03650a6b701f","time":1744278865000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 二开文档优化"},{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat:  值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/teleport.md"}');export{i as comp,k as data};
--- a/docs/assets/validation.html-B_JW048n.js
+++ b/docs/assets/validation.html-B_JW048n.js
@ -0,0 +1,47 @@
+import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function c(l,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="自定义校验" tabindex="-1"><a class="header-anchor" href="#自定义校验"><span>自定义校验</span></a></h1><p>如果为常规的校验（如是否填写，常规正则校验），可以直接将校验规则提那家在表单生成的config.ts文件中相应字段的rules属性中。如果校验逻辑比较复杂，不想在config.ts文件中写，可以在拆分出的CustomDevForm.vue文件中的schemaMap中添加相应的校验。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
+<span class="line">    <span class="token comment">// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效</span></span>
+<span class="line">    <span class="token function">schemaMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">const</span> schemaMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>getSchemas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token comment">// 在这里修改</span></span>
+<span class="line">            schemaMap<span class="token punctuation">[</span>schema<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
+<span class="line">            <span class="token keyword">if</span><span class="token punctuation">(</span>schema<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">                schema<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">sChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
+<span class="line">                    <span class="token keyword">if</span><span class="token punctuation">(</span>sChild<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
+<span class="line">                        sChild<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
+<span class="line">                            <span class="token comment">// tab等结构的子元素在这里</span></span>
+<span class="line">                            schemaMap<span class="token punctuation">[</span>lChild<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> lChild<span class="token punctuation">;</span></span>
+<span class="line">                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">                    <span class="token punctuation">}</span> </span>
+<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">            <span class="token punctuation">}</span></span>
+<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token keyword">return</span> schemaMap<span class="token punctuation">;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以使用remote远程校验，也可以使用regex校验函数。不过一般的form表单组件都自带对pattern的正则解析，所以一般不需要使用regex校验函数。具体rules的格式可查看<a href="https://3x.antdv.com/components/form-cn/#Form-" target="_blank" rel="noopener noreferrer">ant-design-vue Form</a>的文档或者APP端<a href="https://uniapp.dcloud.net.cn/component/form.html#form" target="_blank" rel="noopener noreferrer">uni-app Form</a>的文档。 这里只举一个远程校验的例子：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
+<span class="line">  <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
+<span class="line">    <span class="token punctuation">{</span> </span>
+<span class="line">      <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> </span>
+<span class="line">      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请输入用户名&#39;</span><span class="token punctuation">,</span> </span>
+<span class="line">      <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> </span>
+<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">    <span class="token punctuation">{</span></span>
+<span class="line">      <span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
+<span class="line">        <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
+<span class="line">          <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/api/user/check&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> value <span class="token punctuation">}</span></span>
+<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">          <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>exists<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&#39;该用户名已被使用&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">          <span class="token punctuation">}</span></span>
+<span class="line">          <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<span class="line">          <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&#39;验证服务不可用&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+<span class="line">        <span class="token punctuation">}</span></span>
+<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
+<span class="line">      <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span></span>
+<span class="line">    <span class="token punctuation">}</span></span>
+<span class="line">  <span class="token punctuation">]</span></span>
+<span class="line"><span class="token punctuation">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,5)]))}const i=s(t,[["render",c]]),u=JSON.parse('{"path":"/front_dev/base/validation.html","title":"自定义校验","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat:  值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/validation.md"}');export{i as comp,u as data};
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`import{_ as e,c as o,b as n,o as a}from"./app-CDlLWk6N.js";const l={};function r(s,t){return a(),o("div",null,t[0]\|\|(t[0]=[n("p",null,"404 Not Found",-1)]))}const _=e(l,[["render",r]]),d=JSON.parse('{"path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{_ as comp,d as data};`
				`@ -0,0 +1 @@`
				import{_ as t,c as n,b as e,o as l}from"./app-CDlLWk6N.js";const o={};function r(s,a){return l(),n("div",null,a[0]\|\|(a[0]=[e("h1",{id:"修改组件值",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#修改组件值"},[e("span",null,"修改组件值")])],-1),e("p",null,"正常修改组件显示值的话通过修改formModel中相应的值即可，本身框架封装的组件有做处理，双向绑定机制即可保证数据能够正常回显。",-1),e("p",null,"但是当使用非框架封装组件时，有一些情况下，无法通过直接修改formModel来实现组件的回填显示，使用时需要注意进行一些特殊的转换。",-1),e("p",null,"比如Ant-design-vue的时间/日期组件。该组件的双向绑定值为一个Dayjs对象，而数据库存储一般为‘2025-01-01 00:00:00’的字符串格式，所以无论保存还是插入值需要进行类型的转换才能正常进行存储和显示。",-1),e("p",null,"这里只是举一个例子，具体需要根据组件的实际情况进行处理。",-1)]))}const m=t(o,[["render",r]]),d=JSON.parse('{"path":"/front_dev/base/change_value.html","title":"修改组件值","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744192947000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/change_value.md"}');export{m as comp,d as data};
				`@ -0,0 +1 @@`
				import{_ as o,c as t,b as n,o as a}from"./app-CDlLWk6N.js";const c={};function i(m,e){return a(),t("div",null,e[0]\|\|(e[0]=[n("p",null,"hello front docs",-1)]))}const s=o(c,[["render",i]]),d=JSON.parse('{"path":"/front_components/","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743218718000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"front_components/index.md"}');export{s as comp,d as data};
				`@ -0,0 +1 @@`
				import{_ as e,c as i,a as t,o as n}from"./app-CDlLWk6N.js";const o={};function r(s,a){return n(),i("div",null,a[0]\|\|(a[0]=[t('<h1 id="关于全代码框架" tabindex="-1"><a class="header-anchor" href="#关于全代码框架"><span>关于全代码框架</span></a></h1><h1 id="注意事项" tabindex="-1"><a class="header-anchor" href="#注意事项"><span>注意事项</span></a></h1><p>由于表单拆分脚本的限制，为了方便后续的二开，在表单设计时需要遵守一些原则：</p><ul><li>避免在表单设计器里直接拖拽grid布局，系统提供了响应式布局（根据屏幕大小切换2/3列表单）的支持，无需手动绘制grid，如果需要grid或者flex布局，需要在表单拆分后进行。</li><li>避免在表单设计器里使用嵌套布局，目前脚本只支持<strong>非嵌套</strong>的Card、Tab布局和SubForm（明细表/子表）拆分。</li><li>在二开之前，不建议对config.ts文件进行格式化，否则可能会导致数据解析失败。因此，表单拆分应该在<strong>表单字段明确后立刻进行</strong>，越复杂的改动和配置拆分失败的概率越大。</li></ul><p>需要注意的是，表单拆分后依然使用config.ts文件，因此你可以生成新表单后，根据本文档对应章节提供的方法，手动补充缺失的字段，或者修改配置项。</p>',5)]))}const c=e(o,[["render",r]]),l=JSON.parse('{"path":"/","title":"关于全代码框架","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743498223000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2}],"changelog":[{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"},{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"index.md"}');export{c as comp,l as data};