docs: 更新新版二开文档
This commit is contained in:
gaoyunqi
@ -2,7 +2,11 @@
|
|||||||
如果你遇到了下面问题，包括对话框无法关闭、列表错乱/卡住/无法打开等奇怪问题，请检查node_modules/vue的版本，如果是3.4.x，由于antd-vue的要求，需要降级后使用。
|
如果你遇到了下面问题，包括对话框无法关闭、列表错乱/卡住/无法打开等奇怪问题，请检查node_modules/vue的版本，如果是3.4.x，由于antd-vue的要求，需要降级后使用。
|
||||||
或者使用yarn重新安装依赖，项目里的yarn.lock为3.2.40版本。
|
或者使用yarn重新安装依赖，项目里的yarn.lock为3.2.40版本。
|
||||||
|
|
||||||
建议先阅读docs/dev_readme.md下的内容
|
## 二开指南
|
||||||
|
进入项目的docs目录，使用任何http服务器部署文件，如[http-server](https://www.npmjs.com/package/http-server)，即可浏览文档：
|
||||||
|
```vue
|
||||||
|
C:\Users\user\Documents\fcd_framework_pc\docs> http-server
|
||||||
|
```
|
||||||
|
|
||||||
## 路由配置
|
## 路由配置
|
||||||
为了符合UI规范的要求，框架对流程表单页面的布局进行了定制开发，对于新系统需要**手动创建**菜单
|
为了符合UI规范的要求，框架对流程表单页面的布局进行了定制开发，对于新系统需要**手动创建**菜单
|
||||||
|
|||||||
43
docs/404.html
Normal file
43
docs/404.html
Normal file
@ -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>
|
||||||
1
docs/assets/404.html-urOlE4ef.js
Normal file
1
docs/assets/404.html-urOlE4ef.js
Normal file
@ -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};
|
||||||
54
docs/assets/add_field.html-Lpe0HY5a.js
Normal file
54
docs/assets/add_field.html-Lpe0HY5a.js
Normal file
@ -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">'9e85022cc6ba44bdb8312bca957cad0a1'</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">'auditContentId'</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">'关联内容ID'</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">'input'</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">'Input'</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">''</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">'100%'</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">''</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">''</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">'fix'</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">'请输入问题定性'</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">''</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">''</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">''</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">''</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">'100%'</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"><</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"getIfShow2('e6a64e2b22c049e1abb65804b565d759')"</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"getIsShow2('e6a64e2b22c049e1abb65804b565d759')"</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">"getColWidth(schemaMap['e6a64e2b22c049e1abb65804b565d759'])"</span><span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"showComponent(schemaMap['e6a64e2b22c049e1abb65804b565d759'])"</span><span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span>SimpleFormItem v<span class="token operator">-</span>model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">"formModel[schemaMap['e6a64e2b22c049e1abb65804b565d759'].field]"</span> <span class="token operator">:</span>form<span class="token operator">-</span>api<span class="token operator">=</span><span class="token string">"formApi"</span> <span class="token operator">:</span>isWorkFlow<span class="token operator">=</span><span class="token string">"isWorkFlow"</span> <span class="token operator">:</span>refreshFieldObj<span class="token operator">=</span><span class="token string">"refreshFieldObj"</span> <span class="token operator">:</span>schema<span class="token operator">=</span><span class="token string">"schemaMap['e6a64e2b22c049e1abb65804b565d759']"</span> <span class="token operator">/</span><span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Col<span class="token operator">></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">''</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">'问题定性'</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">'problemQualitative'</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">'input'</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">'xxxxx'</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};
|
||||||
34
docs/assets/ajax.html-CDfrJfFy.js
Normal file
34
docs/assets/ajax.html-CDfrJfFy.js
Normal file
@ -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">'api'</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">''</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">'CodeGeneration/selection'</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">'GET'</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">'93d735dcb7364a0f8102188ec4d77ac7'</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">'1'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Query Params'</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">'projectId'</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">'{"bindField":"selectProjectId","fieldKey":"xxxxxxxxxxxx"}'</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">'String'</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">'data'</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">'2'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Header'</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">'3'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Body'</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};
|
||||||
27
docs/assets/app-CDlLWk6N.js
Normal file
27
docs/assets/app-CDlLWk6N.js
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/assets/base_set_new-D7W3Zm7h.png
Normal file
BIN
docs/assets/base_set_new-D7W3Zm7h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
docs/assets/base_teleport-vbaCZqqF.png
Normal file
BIN
docs/assets/base_teleport-vbaCZqqF.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
1
docs/assets/change_value.html-CS5TpMC0.js
Normal file
1
docs/assets/change_value.html-CS5TpMC0.js
Normal file
@ -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};
|
||||||
24
docs/assets/components.html-CbpbsXEn.js
Normal file
24
docs/assets/components.html-CbpbsXEn.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formRef<span class="token punctuation">"</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">"</span>getProps?.labelCol<span class="token punctuation">"</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">"</span>getProps?.labelAlign<span class="token punctuation">"</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">"</span>getProps?.layout<span class="token punctuation">"</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">"</span>formModel<span class="token punctuation">"</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">"</span>getProps?.wrapperCol<span class="token punctuation">"</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">"</span>handleEnterPress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>schema in getSchemas<span class="token punctuation">"</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">"</span>schema.field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">"</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">"</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">"</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">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>schema?.componentProps.respBreakLine<span class="token punctuation">"</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">"</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">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>showComponent(schema) && schema.type !== 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formModel[schema.field]<span class="token punctuation">"</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">"</span>formApi<span class="token punctuation">"</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">"</span>isWorkFlow<span class="token punctuation">"</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">"</span>refreshFieldObj<span class="token punctuation">"</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">"</span>schema<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>schema.type === 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- 无关代码省略 --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>{ textAlign: getProps.buttonLocation }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 表单可以配置显示提交和清空按钮 也可以在前后添加按钮 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>buttonBefore<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getProps.showSubmitButton<span class="token punctuation">"</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">"</span>primary<span class="token punctuation">"</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">"</span>handleSubmit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ t('提交') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 无关代码省略 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>buttonAfter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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};
|
||||||
69
docs/assets/computed.html-9QOs6N7a.js
Normal file
69
docs/assets/computed.html-9QOs6N7a.js
Normal file
@ -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">=></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">'form-mounted'</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">=></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">'xxx'</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">&&</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};
|
||||||
101
docs/assets/custom_field.html-CEs-XIt2.js
Normal file
101
docs/assets/custom_field.html-CEs-XIt2.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formWrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formRef<span class="token punctuation">"</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">"</span>getProps?.labelCol<span class="token punctuation">"</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">"</span>getProps?.labelAlign<span class="token punctuation">"</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">"</span>getProps?.layout<span class="token punctuation">"</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">"</span>formModel<span class="token punctuation">"</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">"</span>getProps?.wrapperCol<span class="token punctuation">"</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">"</span>handleEnterPress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 单行文本 --></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getIfShow2('9a8db2186edb49879f59162ae2660b21')<span class="token punctuation">"</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">"</span>getIsShow2('9a8db2186edb49879f59162ae2660b21')<span class="token punctuation">"</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">"</span>getColWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>showComponent(schemaMap['9a8db2186edb49879f59162ae2660b21'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formModel[schemaMap['9a8db2186edb49879f59162ae2660b21'].field]<span class="token punctuation">"</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">"</span>formApi<span class="token punctuation">"</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">"</span>isWorkFlow<span class="token punctuation">"</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">"</span>refreshFieldObj<span class="token punctuation">"</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">"</span>schemaMap['9a8db2186edb49879f59162ae2660b21']<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 评分组件添加 --></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getIfShow2('d7dfec1ff5254cfe9ab7dfa45753bef7')<span class="token punctuation">"</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">"</span>getIsShow2('d7dfec1ff5254cfe9ab7dfa45753bef7')<span class="token punctuation">"</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">"</span>getColWidth(schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>showComponent(schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>系统评分<span class="token punctuation">"</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">"</span>rate<span class="token punctuation">"</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">"</span>[{ required: true, message: '请选择评分' }]<span class="token punctuation">"</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">"</span>schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7']).labelCol<span class="token punctuation">"</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">"</span>itemLabelWidthProp.wrapperCol<span class="token punctuation">"</span></span></span>
|
||||||
|
<span class="line"> <span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formModel.rate<span class="token punctuation">"</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">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></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">'/@/components/SimpleForm/src/SimpleFormSetup.vue'</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">'ant-design-vue'</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">'/@/components/SimpleForm/src/components/SimpleFormItem.vue'</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">'vue'</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">'@ant-design/icons-vue'</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">'./CustomDevTableItem1.vue'</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">'ant-design-vue'</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">'/@/components/Form/src/hooks/useLabelWidth'</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">'formProps'</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">'9a8db2186edb49879f59162ae2660b21'</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">=></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">=></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">=></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"></</span>script</span><span class="token punctuation">></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};
|
||||||
1
docs/assets/custom_page.html-DIr-Sgm-.js
Normal file
1
docs/assets/custom_page.html-DIr-Sgm-.js
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/assets/custom_page_app_1-7IYO8Eyo.png
Normal file
BIN
docs/assets/custom_page_app_1-7IYO8Eyo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
docs/assets/custom_page_app_2-BSYSeOjb.png
Normal file
BIN
docs/assets/custom_page_app_2-BSYSeOjb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
docs/assets/custom_page_app_3-B3tOwhE2.png
Normal file
BIN
docs/assets/custom_page_app_3-B3tOwhE2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/assets/custom_page_app_4-2qED3-kx.png
Normal file
BIN
docs/assets/custom_page_app_4-2qED3-kx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
docs/assets/custom_page_app_5-DVBTSAZJ.png
Normal file
BIN
docs/assets/custom_page_app_5-DVBTSAZJ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/assets/custom_page_pc_1-CXjVoBOn.png
Normal file
BIN
docs/assets/custom_page_pc_1-CXjVoBOn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
docs/assets/custom_page_pc_2-8e_g1uGT.png
Normal file
BIN
docs/assets/custom_page_pc_2-8e_g1uGT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
docs/assets/custom_page_pc_3-PVAgZmk6.png
Normal file
BIN
docs/assets/custom_page_pc_3-PVAgZmk6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
docs/assets/custom_page_pc_4-BJ6TU5rW.png
Normal file
BIN
docs/assets/custom_page_pc_4-BJ6TU5rW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
docs/assets/custom_page_pc_5-67hJreQO.png
Normal file
BIN
docs/assets/custom_page_pc_5-67hJreQO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
docs/assets/custom_page_pc_6-D0qmIZZb.png
Normal file
BIN
docs/assets/custom_page_pc_6-D0qmIZZb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
docs/assets/custom_searchform-C_-nGOSW.png
Normal file
BIN
docs/assets/custom_searchform-C_-nGOSW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
39
docs/assets/dialog.html-fkmzKy_f.js
Normal file
39
docs/assets/dialog.html-fkmzKy_f.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>false<span class="token punctuation">"</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">"</span>visible<span class="token punctuation">"</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">"</span>弹窗<span class="token punctuation">"</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">"</span>800px<span class="token punctuation">"</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">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 弹窗正文内容 --></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 弹窗底部按钮内容，有默认，如果需自定义就这么写 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>primary<span class="token punctuation">"</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">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>保存<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>primary<span class="token punctuation">"</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">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关闭<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-modal</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'vue'</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">''</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"></</span>script</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>finishRef<span class="token punctuation">"</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">"</span>dialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>inputClose<span class="token punctuation">"</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">"</span>base<span class="token punctuation">"</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">"</span>提示<span class="token punctuation">"</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">"</span>确定终止流程吗？<span class="token punctuation">"</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">"</span>请输入内容<span class="token punctuation">"</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">"</span>flowFinishConfirm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!--弹窗内容--></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>uni-popup-dialog</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>uni-popup</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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};
|
||||||
51
docs/assets/field_events.html-C6V_tkoR.js
Normal file
51
docs/assets/field_events.html-C6V_tkoR.js
Normal file
@ -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">'events'</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">'events'</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">'events'</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">'string'</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">'schema'</span><span class="token punctuation">,</span> <span class="token string">'formModel'</span><span class="token punctuation">,</span> <span class="token string">'formActionType'</span><span class="token punctuation">,</span> <span class="token string">'extParams'</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">'function'</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">'on'</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">&&</span> field <span class="token operator">&&</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">'error'</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">'Tip'</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">'触发事件填写有误！'</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"><</span>template<span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"getIfShow2('9a8db2186edb49879f59162ae2660b21')"</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"getIsShow2('9a8db2186edb49879f59162ae2660b21')"</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">"getColWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'])"</span><span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"showComponent(schemaMap['9a8db2186edb49879f59162ae2660b21'])"</span><span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span>FormItem</span>
|
||||||
|
<span class="line"> <span class="token operator">:</span>label<span class="token operator">=</span><span class="token string">"'审计内容'"</span></span>
|
||||||
|
<span class="line"> <span class="token operator">:</span>rules<span class="token operator">=</span><span class="token string">"schemaMap['9a8db2186edb49879f59162ae2660b21'].rules"</span></span>
|
||||||
|
<span class="line"> name<span class="token operator">=</span><span class="token string">"title"</span></span>
|
||||||
|
<span class="line"> <span class="token operator">:</span>required<span class="token operator">=</span><span class="token string">"true"</span></span>
|
||||||
|
<span class="line"> <span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</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">"formModel[schemaMap['9a8db2186edb49879f59162ae2660b21'].field]"</span> @blur<span class="token operator">=</span><span class="token string">"blurInput"</span><span class="token operator">/</span><span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
|
||||||
|
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Col<span class="token operator">></span></span>
|
||||||
|
<span class="line"><span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></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};
|
||||||
138
docs/assets/form.html-B4704WRj.js
Normal file
138
docs/assets/form.html-B4704WRj.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formRef<span class="token punctuation">"</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">"</span>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>schema in config.schemas<span class="token punctuation">"</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">"</span>schema.field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>schema[schema.field]<span class="token punctuation">"</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">"</span>schema<span class="token punctuation">"</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">"</span>refreshFieldObj<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'vue'</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">'/@/components/SimpleForm/src/components/SimpleFormItem.vue'</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">'ant-design-vue'</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">'formModel'</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">'formProps'</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"><</span>object<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 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">=></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">></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">></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"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></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 > 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"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></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"></</span>style</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>views-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formRef<span class="token punctuation">"</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">"</span>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>责任类型<span class="token punctuation">"</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">"</span>responsibilityType<span class="token punctuation">"</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">"</span>[{ required: true, message: '请选择责任类型' }]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>record.responsibilityType<span class="token punctuation">"</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">"</span>responsibilityTypeOptions<span class="token punctuation">"</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">"</span>请选择责任类型<span class="token punctuation">"</span></span> <span class="token attr-name">allowClear</span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!--以下不一一列举--></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||||
|
<span class="line"> <span class="token selector">:deep(.ant-form-item-label > 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"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></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"></</span>style</span><span class="token punctuation">></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">=></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};
|
||||||
BIN
docs/assets/form_load_approveflow-BxWaWX9p.png
Normal file
BIN
docs/assets/form_load_approveflow-BxWaWX9p.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
docs/assets/form_load_form-BQvUCUn9.png
Normal file
BIN
docs/assets/form_load_form-BQvUCUn9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
docs/assets/form_load_forminformation-fiSfvJc2.png
Normal file
BIN
docs/assets/form_load_forminformation-fiSfvJc2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
9
docs/assets/form_logic.html-CA8-U3gW.js
Normal file
9
docs/assets/form_logic.html-CA8-U3gW.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 表单信息 无关代码省略--></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>activeIndex == index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 如果是生成文件模式 formType = 0，也就是FormType.SYSTEM，会加载对应项目的Form.vue--></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>item.formType == FormType.SYSTEM<span class="token punctuation">"</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">"</span>setItemRef<span class="token punctuation">"</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">"</span>item.formModel<span class="token punctuation">"</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">"</span>props.disabled<span class="token punctuation">"</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">"</span>item.systemComponent<span class="token punctuation">"</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">"</span>item<span class="token punctuation">"</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">"</span>form-box<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>item.formType == FormType.CUSTOM<span class="token punctuation">"</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">"</span>setItemRef<span class="token punctuation">"</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">"</span>item.formModel<span class="token punctuation">"</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">"</span>item.formProps<span class="token punctuation">"</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">"</span>true<span class="token punctuation">"</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">"</span>form-box<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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};
|
||||||
BIN
docs/assets/form_logic_approval-W5mFAqfy.png
Normal file
BIN
docs/assets/form_logic_approval-W5mFAqfy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
docs/assets/form_logic_easycom-BG7WxKMV.png
Normal file
BIN
docs/assets/form_logic_easycom-BG7WxKMV.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
docs/assets/form_logic_flowInfo-DaD_tsW8.png
Normal file
BIN
docs/assets/form_logic_flowInfo-DaD_tsW8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
docs/assets/form_logic_system_form-cg_dlB6-.png
Normal file
BIN
docs/assets/form_logic_system_form-cg_dlB6-.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
docs/assets/form_logic_system_form1-XuFq0MM-.png
Normal file
BIN
docs/assets/form_logic_system_form1-XuFq0MM-.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/assets/form_logic_system_form2-DnTonMCc.png
Normal file
BIN
docs/assets/form_logic_system_form2-DnTonMCc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
1
docs/assets/index.html-BfpfzkA1.js
Normal file
1
docs/assets/index.html-BfpfzkA1.js
Normal file
@ -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};
|
||||||
1
docs/assets/index.html-ByXOdSON.js
Normal file
1
docs/assets/index.html-ByXOdSON.js
Normal file
@ -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};
|
||||||
37
docs/assets/index.html-xafVSSBu.js
Normal file
37
docs/assets/index.html-xafVSSBu.js
Normal file
@ -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">'total rows: '</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 = ''; // 修复文件上传引用的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">'\\n'</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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>systemFormRef<span class="token punctuation">"</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">"</span>data.formDataProps<span class="token punctuation">"</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">"</span>{}<span class="token punctuation">"</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">"</span>props.fromPage!=FromPageType.MENU<span class="token punctuation">"</span></span></span>
|
||||||
|
<span class="line"> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'vue'</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">'./config'</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 '/@/components/SimpleForm/src/SimpleForm.vue';</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">"/@/views/jianyi/devgaofirst/components/CustomDevForm.vue"</span><span class="token punctuation">;</span></span>
|
||||||
|
<span class="line"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>form-fixed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formRef<span class="token punctuation">"</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">"</span>renderKey<span class="token punctuation">"</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">"</span>formConfig.formProps<span class="token punctuation">"</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">"</span>disabled<span class="token punctuation">"</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">"</span>formConfig.type<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>CustomDevForm</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'vue'</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">'@/components/simple-form/SimpleForm.vue'</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">'./CustomDevForm.vue'</span><span class="token punctuation">;</span></span>
|
||||||
|
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></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};
|
||||||
141
docs/assets/pass_value.html-CFBEHlue.js
Normal file
141
docs/assets/pass_value.html-CFBEHlue.js
Normal file
@ -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">'changeUploadComponentIds'</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">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 其余代码省略 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getColWidth({responsive: true})<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>vmodel演示<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> {{formModel.danXingWenBen5090 + '/' + formModel.danXingWenBen23227}}</span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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">'wx'</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"><</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">"{}"</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">></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">=></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">'wx'</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"><</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};
|
||||||
57
docs/assets/show_and_hide.html-Bai-A-AK.js
Normal file
57
docs/assets/show_and_hide.html-Bai-A-AK.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">"</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">"</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">"</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">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>showComponent(schema) && schema.type !== 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>formModel[schema.field]<span class="token punctuation">"</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">"</span>formApi<span class="token punctuation">"</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">"</span>isWorkFlow<span class="token punctuation">"</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">"</span>refreshFieldObj<span class="token punctuation">"</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">"</span>schema<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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">'044e8bc1f9c345e0afa024ed7f21fe50'</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">'duoXingWenBen3343'</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">'多行文本'</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">'textarea'</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">></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">'function'</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">&&</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};
|
||||||
1
docs/assets/style-CQp7YV5d.css
Normal file
1
docs/assets/style-CQp7YV5d.css
Normal file
File diff suppressed because one or more lines are too long
225
docs/assets/table.html-BrzZNtYJ.js
Normal file
225
docs/assets/table.html-BrzZNtYJ.js
Normal file
@ -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"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'列表'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">''</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">'id'</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">=></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">'id'</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">=></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">'操作'</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">'action'</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">'action'</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"></</span>script</span><span class="token punctuation">></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: 'mingZi8847',</span>
|
||||||
|
<span class="line"> label: '名字',</span>
|
||||||
|
<span class="line"> component: 'Input',</span>
|
||||||
|
<span class="line"> },</span>
|
||||||
|
<span class="line"> {</span>
|
||||||
|
<span class="line"> field: 'zhi4547',</span>
|
||||||
|
<span class="line"> label: '值',</span>
|
||||||
|
<span class="line"> component: 'Input',</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"><</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">"</span>registerTable<span class="token punctuation">"</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">"</span>tableRef<span class="token punctuation">"</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">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>inline<span class="token punctuation">"</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">"</span>customHandleSubmit<span class="token punctuation">"</span></span></span>
|
||||||
|
<span class="line"> <span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>名字<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>customSearchForm.mingZi8847<span class="token punctuation">"</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>primary<span class="token punctuation">"</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">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 其余代码省略 --></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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">''</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"></</span>script</span><span class="token punctuation">></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"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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"></</span>script</span><span class="token punctuation">></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"><</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">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></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"></</span>style</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>tableRef<span class="token punctuation">"</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">"</span>registerTable<span class="token punctuation">"</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">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 默认form-item有下边距，这里写死高度，因为展开的时候还要保持下边距 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</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">"</span></span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>vben-basic-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- suspensionRow样式默认带了弹出效果 但是必须和vben-basic-form连用 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>{ suspensionRow: isAdv }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 注意这里的层级，row部分是搜索表单，col里面的action是搜索按钮 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>搜索字段1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>搜索字段2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>搜索字段3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 不展开的时候其余的字段隐藏 注意默认样式col-8在搜索中定死了宽度280px --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>8<span class="token punctuation">"</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">"</span>{display: isAdv ? 'block' : 'none'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>搜索字段4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>8<span class="token punctuation">"</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">"</span>{display: isAdv ? 'block' : 'none'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>搜索字段5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>8<span class="token punctuation">"</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">"</span>{display: isAdv ? 'block' : 'none'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>搜索字段6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 只要绑定事件就行 默认就开启了搜索、重置、展开这3个按钮 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>isAdv<span class="token punctuation">"</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">"</span>toggleAdv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form-action</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-row</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'/@/components/Form/src/components/FormAction.vue'</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"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></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"></</span>style</span><span class="token punctuation">></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"><</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">"</span>registerTable<span class="token punctuation">"</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">"</span>tableRef<span class="token punctuation">"</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">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 前面代码省略 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>{ column, record }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 前面代码省略 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>column.dataIndex === 'zhi4547'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>record[column.dataIndex]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></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"><!-- 前面代码省略 --></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>registerTable<span class="token punctuation">"</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">"</span>tableRef<span class="token punctuation">"</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">"</span>false<span class="token punctuation">"</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">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token comment"><!-- 中间代码省略 --></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token comment"><!-- 后面代码省略 --></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"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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">'vue'</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">=></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">=></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"></</span>script</span><span class="token punctuation">></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"><</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">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></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">=></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">'id'</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">=></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">=></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"></</span>script</span><span class="token punctuation">></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};
|
||||||
BIN
docs/assets/table_1-Dc0vlV5m.png
Normal file
BIN
docs/assets/table_1-Dc0vlV5m.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/assets/table_2-BfgKP28D.png
Normal file
BIN
docs/assets/table_2-BfgKP28D.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/assets/table_3-DJgiqMOC.png
Normal file
BIN
docs/assets/table_3-DJgiqMOC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
46
docs/assets/teleport.html-BIP5te2y.js
Normal file
46
docs/assets/teleport.html-BIP5te2y.js
Normal file
@ -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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>page-bg-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>loading<span class="token punctuation">"</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">"</span>加载中...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>geg-flow-page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>top-toolbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 在a-space上添加id approveExtendButton --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>10<span class="token punctuation">"</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">"</span>approveExtendButton<span class="token punctuation">"</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">"</span>second-dev-space<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 这里是原本的按钮 省略 --></span></span>
|
||||||
|
<span class="line"> </span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-space</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>flow-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>randKey<span class="token punctuation">"</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">"</span>formInformation<span class="token punctuation">"</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">"</span>false<span class="token punctuation">"</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">"</span>data.formAssignmentData<span class="token punctuation">"</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">"</span>data.formInfos<span class="token punctuation">"</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">"</span>data.opinions<span class="token punctuation">"</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">"</span>data.opinionsComponents<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 无用代码省略 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-spin</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>#approveExtendButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</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">"</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">"</span>reInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> 重新查询</span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</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">"</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">"</span>endInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> 结束查询</span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Teleport</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>#approveExtendButton<span class="token punctuation">"</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">"</span>!isExist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</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">"</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">"</span>reInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> 重新查询</span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</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">"</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">"</span>endInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> 结束查询</span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Teleport</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>10<span class="token punctuation">"</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">"</span>approveExtendButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">"</span>approveExtendButtonLeft<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"> <span class="token comment"><!-- 原按钮位置 --></span></span>
|
||||||
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-space</span><span class="token punctuation">></span></span></span>
|
||||||
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></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};
|
||||||
47
docs/assets/validation.html-B_JW048n.js
Normal file
47
docs/assets/validation.html-B_JW048n.js
Normal file
@ -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">=></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">=></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">=></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">'请输入用户名'</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">'blur'</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">=></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">'/api/user/check'</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">'该用户名已被使用'</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">'验证服务不可用'</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">'blur'</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};
|
||||||
BIN
docs/assets/vite_readme-BQgKo4m1.png
Normal file
BIN
docs/assets/vite_readme-BQgKo4m1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
docs/assets/vmodel_demo--x0CSlwt.png
Normal file
BIN
docs/assets/vmodel_demo--x0CSlwt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@ -1,248 +0,0 @@
|
|||||||
## 注意事项
|
|
||||||
### 不要被框架束缚思路
|
|
||||||
框架只是个代码生成器而已，前后端代码都在你手里，只要不影响其他模块，你想怎么实现怎么实现。
|
|
||||||
### 设计相关
|
|
||||||
- 一个表单只能绑定一个流程，一个流程也只能绑定一个表单，虽然框架支持单流程带多表单，但是我们在代码中屏蔽了这部分设计，如果表单内容较多，建议以子流程、tab页、分区等方式合理显示。
|
|
||||||
- 一旦某表单绑定了流程，该表单就只能以绑定流程的方式使用（展示一个流程的纯表单部分无意义，用户一定是想和流程一起查看或者审批）
|
|
||||||
- 流程草稿在单据列表里不会显示（草稿箱中可以找到），这是延续老系统的设计，不属于bug
|
|
||||||
- 因为代码生成器的特殊性，建议在设计的时候尽可能完善，或者预留某些字段，隐藏起来以便需求调整，开发者需要评估重新生成代码与自行添加字段的工作量
|
|
||||||
### 界面与用户体验
|
|
||||||
- 设计器支持响应式布局，因为设计器架构问题，并未默认打开，对于表单内字段，除了附件、多行文本框等占用宽度较大的组件外，都建议开启响应式布局
|
|
||||||
- 表单和表格需要合理调整字段宽度，响应式布局下需要使用定宽模式，一般情况下，字段的宽度取平均字长 + 2个汉字的宽度为宜，不要留太长的label，也要避免出现label换行
|
|
||||||
|
|
||||||
## Q&A
|
|
||||||
|
|
||||||
### 为什么表单所有字段都成了必填
|
|
||||||
默认情况下，绑定流程后，新建节点的所有字段都被设置为必填，需要在流程的开始节点-表单设置中去掉非必填的项。
|
|
||||||
|
|
||||||
### 如何在提交时也提交隐藏字段的值
|
|
||||||
修改Form.vue里的validate方法，将最后的values改为
|
|
||||||
```javascript
|
|
||||||
async function validate() {
|
|
||||||
let values = [];
|
|
||||||
try {
|
|
||||||
values = await systemFormRef.value?.validate();
|
|
||||||
// 省略的代码
|
|
||||||
} finally {
|
|
||||||
}
|
|
||||||
return systemFormRef.value?.getFieldsValue();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
原理是validate方法在校验的同时，会返回**校验成功**字段的值，对于隐藏字段，因为跳过了校验，所以值也不会返回。而getFieldsValue方法会返回整个formModel。
|
|
||||||
|
|
||||||
### 为什么我的页面绑定流程后也没有相关按钮
|
|
||||||
- 如果是可以重做，需要用**代码模版**（界面优先和数据优先都可以），而不是代码生成。
|
|
||||||
- 需要排查菜单接口有没有返回流程定义ID，即system/menu/tree接口，对应菜单项里必须有schemaId这项
|
|
||||||
|
|
||||||
### 表单设计和代码模版有什么区别
|
|
||||||
代码模版生成的本地文件有二开支持，表单符合UI规范，表单设计可以在线发布，像低开一样，不用写代码，但是界面不符合UI规范。
|
|
||||||
|
|
||||||
两种方法表单设计器支持内容一致，也都支持流程，差别只是UI方面。建议在设计业务模块优先使用代码模版。
|
|
||||||
|
|
||||||
### 表单的封装层次是什么
|
|
||||||
```
|
|
||||||
formCreatePage/approveFlowPage/createFlow（二开封装页面，提供标题栏和路由功能）
|
|
||||||
↓
|
|
||||||
FormInformation（最外层表单封装，用于区分是低开模式还是源码模式）
|
|
||||||
↓
|
|
||||||
Form.vue（业务表单，生成的代码，低开没有这层）
|
|
||||||
↓
|
|
||||||
SimpleForm/SimpleFormSetup（主体表单封装）
|
|
||||||
↓
|
|
||||||
SimpleFormItem（表单字段）
|
|
||||||
↓
|
|
||||||
表单组件 / SubFormV2(嵌套明细表)
|
|
||||||
```
|
|
||||||
### 表单提供了什么封装函数
|
|
||||||
在生成的Form.vue中，可以通过systemFormRef.value调用对外提供的函数，这些函数在SimpleForm.vue里可以找到，可以参考formApi或者defineExpose提供的函数，有用的函数如：
|
|
||||||
|
|
||||||
- setFieldsValue 设定字段的值
|
|
||||||
- getFieldsValue 获取表单的值，也就是formModel的非响应式版本
|
|
||||||
- validateFields 手动触发校验
|
|
||||||
|
|
||||||
### 如何定义onChange/blur事件
|
|
||||||
|
|
||||||
所有的事件都在字段的events中，如change、blur，没有on，主表单的函数定义为
|
|
||||||
```javascript
|
|
||||||
function change(schema, formModel, formApi, { formData }) {
|
|
||||||
|
|
||||||
}
|
|
||||||
```
|
|
||||||
明细表的函数参数定义为
|
|
||||||
```javascript
|
|
||||||
function change({ column, row, rowIndex, formModel }) {
|
|
||||||
|
|
||||||
}
|
|
||||||
```
|
|
||||||
这两个定义的formModel都可以取到全部表单的值，也可以赋值做修改。
|
|
||||||
|
|
||||||
### 如何在Tab页中打开表单/流程
|
|
||||||
如果你需要自己编程实现Tab页跳转，或者升级旧版框架的页面，可以参考下面步骤：
|
|
||||||
```typescript
|
|
||||||
const { currentRoute } = useRouter();
|
|
||||||
// 获取表单的绑定的流程 schemaId通过菜单中的路由参数给出
|
|
||||||
const schemaIdComputedRef = computed(() => currentRoute.value.meta.schemaId as string);
|
|
||||||
//处理新增逻辑
|
|
||||||
function handleAdd(){
|
|
||||||
if (schemaIdComputedRef.value) {
|
|
||||||
router.push({
|
|
||||||
path: '/flow/' + schemaIdComputedRef.value + '/0/createFlow'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
router.push({
|
|
||||||
path: '/form/bizoutapply/0/createForm',
|
|
||||||
query: {
|
|
||||||
formPath: 'dev/bizoutapply' //这里是表单的所在目录
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 处理行的双击逻辑，其他地方可以类似处理
|
|
||||||
function dbClickRow(record) {
|
|
||||||
const workflowData = record.workflowData || {};
|
|
||||||
const { processId, taskIds, schemaId } = workflowData;
|
|
||||||
if (schemaId && taskIds) {
|
|
||||||
// 待办
|
|
||||||
router.push({
|
|
||||||
path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
|
|
||||||
query: {
|
|
||||||
taskId: taskIds[0]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else if (schemaId && !taskIds) {
|
|
||||||
// 已审批的单子
|
|
||||||
router.push({
|
|
||||||
path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
|
|
||||||
query: {
|
|
||||||
readonly: 1,
|
|
||||||
taskId: ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 非流程
|
|
||||||
router.push({
|
|
||||||
path: '/form/overtimeapply/' + record.id + '/viewForm',
|
|
||||||
query: {
|
|
||||||
formPath: 'dev/overtimeapply' // 模块路径也要跟着改
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
同时，因为外层封装页面需要表单加载后的元数据，需要在Form.vue中通过事件将表单数据传出。
|
|
||||||
```javascript
|
|
||||||
// 这行是原来有的
|
|
||||||
import { formProps, formEventConfigs } from './config';
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
emits('form-mounted', formProps); // 补上这一句
|
|
||||||
});
|
|
||||||
```
|
|
||||||
### 如何修改选项卡标题
|
|
||||||
```javascript
|
|
||||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
|
|
||||||
const tabStore = useMultipleTabStore();
|
|
||||||
const router = useRouter();
|
|
||||||
const currentRoute = router.currentRoute.value;
|
|
||||||
const fullPath = currentRoute.fullPath;
|
|
||||||
tabStore.changeTitle(fullPath, `选项卡标题`);
|
|
||||||
|
|
||||||
// 顺便tabStore也支持关闭选项卡
|
|
||||||
tabStore.closeTab(currentRoute, router);
|
|
||||||
```
|
|
||||||
|
|
||||||
### 如何在表单二开中自定义布局
|
|
||||||
```vue
|
|
||||||
<Col v-if="getIfShow2('d7fxx515')" v-show="getIsShow2('d7f2xx515')" :span="getColWidth(schemaMap['d7fxx515'])">
|
|
||||||
</Col>
|
|
||||||
```
|
|
||||||
这段代码上的span就是控制字段占位的，满宽度位24，1/3为8，1/4为6，以此类推，我们强烈大家使用响应式布局，以免在屏幕过窄时影响显示效果。同样，响应式布局在编辑器里支持换行、独立成行。
|
|
||||||
|
|
||||||
如果在二开里要换行，可以用div包裹，也可以加一个空div强制换行
|
|
||||||
```html
|
|
||||||
<div style="width: 100%"></div>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 如何添加自定义校验
|
|
||||||
可以在config.ts中定义，componentProps里默认有空的rules数组，可以自己添加，antd vue所有支持的校验都可以在这里使用。
|
|
||||||
```javascript
|
|
||||||
{
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
min: 10,
|
|
||||||
max: 30,
|
|
||||||
message: '这个长度在10-30之间'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
### 如何设置数据源字段联动
|
|
||||||
编辑器中选择Api即可配置字段联动，只要在magic-api配置参数即可，参数值可以直接选择表单或者明细表字段。
|
|
||||||
|
|
||||||
选择字典没有效果。
|
|
||||||
|
|
||||||
### 如何在新建流程时，从其他表单带数据过来
|
|
||||||
这里的例子是从列表创建单据，其余的场景可以参考此修改。
|
|
||||||
|
|
||||||
首先在模版里加入新建单据的按钮：
|
|
||||||
```vue
|
|
||||||
<template #toolbar>
|
|
||||||
<template v-for="button in tableButtonConfig" :key="button.code">
|
|
||||||
<!-- 无关代码隐藏 -->
|
|
||||||
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else type="primary">
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<a-button @click="goCreateFlow()"> 创建入库单 </a-button>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
你也可以通过修改buttonConfigs和actionButtons（代码里是互补关系，不在行动作actionButtons里的就在顶部动作条）实现，但是我认为没必要，自定义开发直接改模版是最简单最快的。
|
|
||||||
|
|
||||||
然后修改useTable的参数：
|
|
||||||
```javascript
|
|
||||||
const [registerTable, { reload, getSelectRows }] = useTable({
|
|
||||||
rowSelection: {
|
|
||||||
type: 'radio' //check为多选，具体选项可以参考antd vue文档
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
然后补完goCreateFlow的内容：
|
|
||||||
```javascript
|
|
||||||
function goCreateFlow() {
|
|
||||||
const selectedRows = getSelectRows();
|
|
||||||
if (!selectedRows.length) {
|
|
||||||
return createMessage.error('请选择用于发起入库的单据');
|
|
||||||
}
|
|
||||||
// 这里当然可以把整行的数据放到localStorage，但是为了外链以及通用性，最好还是把id通过路由传过去，表单那边再查
|
|
||||||
router.push({
|
|
||||||
path: '/flow/1782662600422658049/0/createFlow',
|
|
||||||
query: {
|
|
||||||
fromIds: selectedRows.map((row) => row.id).join(',')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
```
|
|
||||||
最后在目标表单的Form.vue中补充赋值操作：
|
|
||||||
```javascript
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
try {
|
|
||||||
// 无关代码已经隐藏，如果你是用localStorage获取数据，别忘了取值后清掉内容
|
|
||||||
const fromIds = router.currentRoute.value.query?.fromIds;
|
|
||||||
if(fromIds){
|
|
||||||
// 假装是在加载数据
|
|
||||||
setTimeout(()=>{
|
|
||||||
setFieldsValue({
|
|
||||||
yuanYin6568: fromIds
|
|
||||||
})
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
emits('form-mounted', formProps);
|
|
||||||
} catch (error) {}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
43
docs/front_components/index.html
Normal file
43
docs/front_components/index.html
Normal file
File diff suppressed because one or more lines are too long
143
docs/front_dev/adv/custom_field.html
Normal file
143
docs/front_dev/adv/custom_field.html
Normal file
File diff suppressed because one or more lines are too long
43
docs/front_dev/adv/custom_page.html
Normal file
43
docs/front_dev/adv/custom_page.html
Normal file
File diff suppressed because one or more lines are too long
81
docs/front_dev/adv/dialog.html
Normal file
81
docs/front_dev/adv/dialog.html
Normal file
File diff suppressed because one or more lines are too long
180
docs/front_dev/adv/form.html
Normal file
180
docs/front_dev/adv/form.html
Normal file
File diff suppressed because one or more lines are too long
267
docs/front_dev/adv/table.html
Normal file
267
docs/front_dev/adv/table.html
Normal file
File diff suppressed because one or more lines are too long
96
docs/front_dev/base/add_field.html
Normal file
96
docs/front_dev/base/add_field.html
Normal file
File diff suppressed because one or more lines are too long
76
docs/front_dev/base/ajax.html
Normal file
76
docs/front_dev/base/ajax.html
Normal file
File diff suppressed because one or more lines are too long
43
docs/front_dev/base/change_value.html
Normal file
43
docs/front_dev/base/change_value.html
Normal file
File diff suppressed because one or more lines are too long
111
docs/front_dev/base/computed.html
Normal file
111
docs/front_dev/base/computed.html
Normal file
File diff suppressed because one or more lines are too long
88
docs/front_dev/base/teleport.html
Normal file
88
docs/front_dev/base/teleport.html
Normal file
File diff suppressed because one or more lines are too long
89
docs/front_dev/base/validation.html
Normal file
89
docs/front_dev/base/validation.html
Normal file
File diff suppressed because one or more lines are too long
66
docs/front_dev/components.html
Normal file
66
docs/front_dev/components.html
Normal file
File diff suppressed because one or more lines are too long
93
docs/front_dev/field_events.html
Normal file
93
docs/front_dev/field_events.html
Normal file
File diff suppressed because one or more lines are too long
51
docs/front_dev/form_logic.html
Normal file
51
docs/front_dev/form_logic.html
Normal file
File diff suppressed because one or more lines are too long
79
docs/front_dev/index.html
Normal file
79
docs/front_dev/index.html
Normal file
File diff suppressed because one or more lines are too long
183
docs/front_dev/pass_value.html
Normal file
183
docs/front_dev/pass_value.html
Normal file
File diff suppressed because one or more lines are too long
99
docs/front_dev/show_and_hide.html
Normal file
99
docs/front_dev/show_and_hide.html
Normal file
File diff suppressed because one or more lines are too long
43
docs/index.html
Normal file
43
docs/index.html
Normal file
File diff suppressed because one or more lines are too long
@ -1,120 +0,0 @@
|
|||||||
## 如何拆分表单
|
|
||||||
|
|
||||||
**注意：框架的部分模版部分用了非空断言，如formModel![xxx]，编译器报错可以去掉叹号，或者在script上加上lang="ts"**
|
|
||||||
|
|
||||||
---
|
|
||||||
如果你使用了最新版的代码，可以直接生成拆分后的表单文件，进入页面的components目录，执行
|
|
||||||
```bash
|
|
||||||
node ..\..\..\..\..\dev_tools\template_extend.js
|
|
||||||
```
|
|
||||||
目录下生成的template.vue就是可以二开的表单。自动拆分目前对于Tab、TableLayout等组件的显隐并不完善，需要自己补充。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
默认情况下，生成的表单以JSON存储，每个字段都是由循环产生，因此在二开之前需要将每个字段拆开，以便进行二开。
|
|
||||||
|
|
||||||
首先，打开项目dev_tools/formprops.js，将其中的内容替换为
|
|
||||||
```
|
|
||||||
/views/模块类别/模块名/components/config.ts
|
|
||||||
```
|
|
||||||
中的表单配置，注意nodejs不加参数必须用module.exports不能用export default写法，因此formprops只需要替换赋值的对象即可。config.ts中有三部分组成，前两部分为表头搜索定义和列表页定义，不要替换错了。
|
|
||||||
|
|
||||||
然后使用nodejs执行template_extend.js，会在同目录生成template.txt，这个文件就是将config文件在第一层展开的模版内容。生成的文件包含一系列字段，如：
|
|
||||||
```
|
|
||||||
<!-- 附加字段3 -->
|
|
||||||
<Col v-if="getIfShow2('591a8bd0051b4ea2bac87e91f32beca9')" v-show="getIsShow2('591a8bd0051b4ea2bac87e91f32beca9')" :span="getColWidth(schemaMap['591a8bd0051b4ea2bac87e91f32beca9'])">
|
|
||||||
<template v-if="showComponent(schemaMap['591a8bd0051b4ea2bac87e91f32beca9'])">
|
|
||||||
<SimpleFormItem
|
|
||||||
v-model:value="formModel[schemaMap['591a8bd0051b4ea2bac87e91f32beca9'].field]"
|
|
||||||
:form-api="formApi"
|
|
||||||
:isWorkFlow="isWorkFlow"
|
|
||||||
:refreshFieldObj="refreshFieldObj"
|
|
||||||
:schema="schemaMap['591a8bd0051b4ea2bac87e91f32beca9']"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Col>
|
|
||||||
```
|
|
||||||
|
|
||||||
可以看到，每个字段的显隐由三个函数控制，这三个函数为：
|
|
||||||
- showComponent：某些组件只在工作流或者非工作流内展示
|
|
||||||
- getIfShow2，对应原来的getIfShow，读取的是字段的ifShow参数
|
|
||||||
- getIsShow2，对应原来的getIsShow，读取的是字段的show参数，由流程权限控制。字段本身的isShow也会控制显隐，这部分在SimpleFormItem中控制。
|
|
||||||
|
|
||||||
接下来找到要二开的表单，在components目录里定义新建一个vue文件，这个文件用来写二开的表单，假设模块名叫CascadeDemo，这个文件就可以起名CascadeDemoForm.vue，然后用下面的内容初始化。
|
|
||||||
|
|
||||||
这个文件实际上就是SimpleForm的继承，保留了script部分，只修改模板，我们要用自己的模版覆盖掉原来的循环。由于不是每个字段都有dataIndex（如布局类、标题），为了保证生成代码的整洁，此处定义了映射表，可以通过key找到组件，同时简化了原来的两个函数。
|
|
||||||
```vue
|
|
||||||
<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">
|
|
||||||
<Row>
|
|
||||||
<!-- 把刚才template.txt的内容放到这里 -->
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<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';
|
|
||||||
|
|
||||||
const FormItem = Form.Item;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { Form, Col, SimpleFormItem, Row, FormItem },
|
|
||||||
mixins: [SimpleFormSetup],
|
|
||||||
setup(props, ctx) {
|
|
||||||
const ret = SimpleFormSetup.setup(props, ctx);
|
|
||||||
return {
|
|
||||||
...ret
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
|
|
||||||
schemaMap() {
|
|
||||||
const schemaMap = {};
|
|
||||||
this.getSchemas.forEach((schema) => {
|
|
||||||
schemaMap[schema.key] = schema;
|
|
||||||
});
|
|
||||||
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]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm（假设我们的文件为CascadeDemoForm.vue）：
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<CascadedemoForm
|
|
||||||
ref="systemFormRef"
|
|
||||||
:formProps="data.formDataProps"
|
|
||||||
:formModel="{}"
|
|
||||||
:isWorkFlow="props.fromPage!=FromPageType.MENU"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
展开后的文件和原有表单一致，每个字段都已经拆开，因此可以自由使用v-if/v-show等进行显隐控制，以及在字段之间插入内容、做自动计算等。
|
|
||||||
|
|
||||||
**注：该展开方法不能用Grid、Tab等布局嵌套，如果需要，建议自行写代码套容器，不要用编辑器自带的布局组件。**
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
## 如何对表单中的明细表进行二开
|
|
||||||
**注意：框架的部分模版部分用了非空断言，如formModel![xxx]，编译器报错可以去掉叹号，或者在script上加上lang="ts"**
|
|
||||||
|
|
||||||
明细表拆分比较复杂，首先，定义明细表文件，假设文件名为CascadeDetailTable.vue，如果一个表单有多个明细表需要修改，要注意文件名的语义。用下面的代码初始化文件：
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<div class="form-detail-table">
|
|
||||||
<!-- 这里的内容抄SubFormV2.vue，第一层div不需要复制过来 -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
extends: SubFormV2Setup,
|
|
||||||
setup(props, ctx) {
|
|
||||||
const ret = SubFormV2Setup.setup(props, ctx);
|
|
||||||
return {
|
|
||||||
...ret
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
注意这里的div有个class，在继承模式下，scope语义会失效，导致样式无法继承，因此在基类文件的样式改成了传统的css嵌套写法。
|
|
||||||
|
|
||||||
如果认为SubFormV2的模版内容太多，影响开发，可以照着下面的注释进行裁剪，注意**为了文档长度注释中的代码只保留关键部分**，不要直接复制。
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<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>
|
|
||||||
<!-- 求和汇总相关代码 没用到可以裁剪 -->
|
|
||||||
</template>
|
|
||||||
<template #bodyCell="{ column, record, index }">
|
|
||||||
<template v-if="column.key !== 'action'">
|
|
||||||
<template v-if="column.key === 'index'">
|
|
||||||
<!-- 自动行号 建议保留 -->
|
|
||||||
</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>
|
|
||||||
<template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
|
|
||||||
<!-- 没有用范围选择器可以不用，比如时间日期区间 -->
|
|
||||||
</template>
|
|
||||||
<template v-else-if="column.componentType === 'Render'">
|
|
||||||
<!-- 没有自定义render组件可以不用，大多数开发都到不了这层 -->
|
|
||||||
</template>
|
|
||||||
<template v-else-if="column.key !== 'index'">
|
|
||||||
<!-- 这一部分不能裁剪，要不组件就渲染不出来了 -->
|
|
||||||
</template>
|
|
||||||
</FormItem>
|
|
||||||
</template>
|
|
||||||
<template v-if="column.key === 'action' && !disabled">
|
|
||||||
<!-- 行删除 建议保留 如果增加额外的行动作可以写到这里 -->
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
表格二开很简单，就是参照文档在#bodyCell中把对应的列的覆盖，一般用column.dataIndex进行覆盖，如果是对组件进行复写，还要将column.key !== 'index'这个条件下增加排除，因为这里是非特殊组件渲染的位置。
|
|
||||||
|
|
||||||
接下来，定义SimpleFormItem，假设文件名为SimpleTableItem.vue，这个组件不需要定义很多次，你可以根据表格的名称，或者是自定义参数，在一个文件里根据条件渲染多种表格：
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<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了 -->
|
|
||||||
<cascade-detail-table v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
|
|
||||||
</FormItem>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import SimpleFormItemSetup from '/@/components/SimpleForm/src/components/SimpleFormItemSetup.vue';
|
|
||||||
import CascadeDetailTable from '/@/views/test/cascadeDemo/components/CascadeDetailTable.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
extends: SimpleFormItemSetup,
|
|
||||||
components: {
|
|
||||||
CascadeDetailTable
|
|
||||||
},
|
|
||||||
setup(props, ctx) {
|
|
||||||
const ret = SimpleFormItemSetup.setup(props, ctx);
|
|
||||||
return {
|
|
||||||
...ret
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
最后，在表单文件用用自定义的FormItem替换原有的组件。
|
|
||||||
```vue
|
|
||||||
<!-- 表格组件 -->
|
|
||||||
<Col v-if="getIfShow2('25axx52')" v-show="getIsShow2('25a9xx35952')" :span="getColWidth(schemaMap['25a9xx52'])">
|
|
||||||
<template v-if="showComponent(schemaMap['25a93xx5952'])">
|
|
||||||
<!-- 这里原来是SimpleFormItem，注意选项写法所有的组件都需要引入后放到components里 -->
|
|
||||||
<SimpleTableItem
|
|
||||||
v-model:value="formModel[schemaMap['25a93xx52'].field]"
|
|
||||||
:form-api="formApi"
|
|
||||||
:isWorkFlow="isWorkFlow"
|
|
||||||
:refreshFieldObj="refreshFieldObj"
|
|
||||||
:schema="schemaMap['25a9xx952']"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Col>
|
|
||||||
```
|
|
||||||
@ -1,208 +0,0 @@
|
|||||||
# 二开实例：Tab页拆分+样式调整+校验
|
|
||||||
|
|
||||||
首先，我们新建一个具有若干文本框的例子，这里只讲思路，因此不设计其他字段，也不做除了必填的其他校验，我们的要求是，Tab页拆分的内容可以随便切换填写，但是**步骤表示的必须先写当前步骤才能填写后续内容**。
|
|
||||||
|
|
||||||
代码因为篇幅限制，去掉了和思路无关的部分。
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<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">
|
|
||||||
<a-tabs v-model:activeKey="currTab">
|
|
||||||
<a-tab-pane key="0" tab="分组1">
|
|
||||||
<!-- 这里注意Row和Col是配套使用，因为我们按选项开拆开了字段，所以每个选项卡里都有一个Row -->
|
|
||||||
<Row>
|
|
||||||
<!-- 文本框1 后面的字段省略 -->
|
|
||||||
<Col v-if="getIfShow2('efda5xx23')" v-show="getIsShow2('efdxx67e23')" :span="getColWidth(schemaMap['efdxx67e23'])">
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</a-tab-pane>
|
|
||||||
<a-tab-pane key="1" tab="分组2">
|
|
||||||
<Row><!-- 第二个分组的字段 --></Row>
|
|
||||||
</a-tab-pane>
|
|
||||||
<a-tab-pane key="2" tab="分组2">
|
|
||||||
<Row><!-- 第三个分组的字段 --></Row>
|
|
||||||
<div class="step-wrap">
|
|
||||||
<a-steps :current="currStep">
|
|
||||||
<!-- 注意这个版本的antd vue不能使用items赋值数组，只能手动循环 -->
|
|
||||||
<a-step v-for="(item, index) in steps" :title="item.title" @click="onClickStep(index)"></a-step>
|
|
||||||
</a-steps>
|
|
||||||
</div>
|
|
||||||
<Row>
|
|
||||||
<template v-if="currStep == 0">
|
|
||||||
<!-- 步骤1_1 其余步骤字段省略 -->
|
|
||||||
<Col v-if="getIfShow2('810xxd32')" v-show="getIsShow2('8100xx699d32')" :span="getColWidth(schemaMap['8xx2699d32'])">
|
|
||||||
</Col>
|
|
||||||
</template>
|
|
||||||
<template v-if="currStep == 1"><!-- 步骤2字段 --></template>
|
|
||||||
<template v-if="currStep == 2"><!-- 步骤3字段 --></template>
|
|
||||||
</Row>
|
|
||||||
</a-tab-pane>
|
|
||||||
</a-tabs>
|
|
||||||
<!-- 无关内容省略 -->
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.step-wrap {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto 16px auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<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';
|
|
||||||
|
|
||||||
const FormItem = Form.Item;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { CheckCircleOutlined, Form, Col, SimpleFormItem, Row, FormItem },
|
|
||||||
mixins: [SimpleFormSetup],
|
|
||||||
setup(props, ctx) {
|
|
||||||
const ret = SimpleFormSetup.setup(props, ctx);
|
|
||||||
const currStep = ref(0);
|
|
||||||
const currTab = ref('0');
|
|
||||||
const expose = ctx.expose; // 这个是选项的setup写法，不能用defineExpose
|
|
||||||
|
|
||||||
function onClickTab(index){
|
|
||||||
currTab.value = index + '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClickStep(index){
|
|
||||||
currStep.value = index;
|
|
||||||
}
|
|
||||||
|
|
||||||
const steps = ref([
|
|
||||||
{
|
|
||||||
title: '步骤1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '步骤2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '步骤3'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
expose({
|
|
||||||
...ret.formApi, // 特别注意我们需要继承父类的expose，这个写法只对本例子有效
|
|
||||||
onClickStep,
|
|
||||||
onClickTab
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
...ret,
|
|
||||||
currStep,
|
|
||||||
steps,
|
|
||||||
currTab,
|
|
||||||
onClickStep,
|
|
||||||
onClickTab
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
|
|
||||||
schemaMap() {
|
|
||||||
const schemaMap = {};
|
|
||||||
this.getSchemas.forEach((schema) => {
|
|
||||||
schemaMap[schema.key] = schema;
|
|
||||||
});
|
|
||||||
return schemaMap;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//无关内容省略
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
可以看出，在进行二开拆分后，使用v-if、v-show配合响应式变量定义，可以轻松拆分选项卡和步骤条。这里特别注意的是，子类需要继承父类的expose方法，而正常情况下该需求无法实现，这里可以实现的原因是父类的formApi实际上就是expose的全部内容，因此我们在对外暴露的时候，只需要合并formApi就可以，对于其他组件，该方法不成立。
|
|
||||||
|
|
||||||
除了父类的内容外，我们还对外提供了切换选项卡和步骤的方法，以便校验错误的时候跳转到对应选项卡，方便修改。
|
|
||||||
|
|
||||||
接下来要手动修改原有的验证方法，打开components/Form.vue文件，也就是代码自动生成的表单。
|
|
||||||
```javascript
|
|
||||||
// 校验form 通过返回表单数据
|
|
||||||
async function validate() {
|
|
||||||
let values = [];
|
|
||||||
try {
|
|
||||||
/* 这里就是我们的方法，这个返回值很有迷惑性，values在校验失败的时候是false，成功时候为key-value的对象，不是数组 */
|
|
||||||
values = await /*systemFormRef.value?.validate()*/ customValidate();
|
|
||||||
//添加隐藏组件
|
|
||||||
// 无关代码省略
|
|
||||||
} finally {
|
|
||||||
}
|
|
||||||
return values;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
然后手动实现校验过程：
|
|
||||||
```javascript
|
|
||||||
import { useMessage } from '/@/hooks/web/useMessage';
|
|
||||||
const { createMessage } = useMessage();
|
|
||||||
|
|
||||||
function validateField(schema, formValues) {
|
|
||||||
// 这里只考虑了必填校验 如果需要其他校验自己完成
|
|
||||||
if (!schema?.componentProps?.required) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return formValues[schema.field];
|
|
||||||
}
|
|
||||||
|
|
||||||
async function customValidate() {
|
|
||||||
const schemas = data.formDataProps.schemas;
|
|
||||||
// 组件在选项卡的第几页，实际上每个选项卡要校验的不止一个字段
|
|
||||||
const pageMapping = {
|
|
||||||
wenBenKuang17845: 0,
|
|
||||||
wenBenKuang46888: 1,
|
|
||||||
wenBenKuang73214: 2
|
|
||||||
};
|
|
||||||
// 组件在步骤的第几页
|
|
||||||
const stepMapping = {
|
|
||||||
buZhou119202: 0,
|
|
||||||
buZhou212978: 1,
|
|
||||||
buZhou316637: 2
|
|
||||||
};
|
|
||||||
const stepFlag = [1, 1, 1];
|
|
||||||
const formValues = systemFormRef.value.getFieldsValue(); // 这个函数可以取到formModel
|
|
||||||
let pageField = null;
|
|
||||||
// 这种遍历只针对主表有效，如果用了子表还要对子表校验
|
|
||||||
for (let i = 0; i < schemas.length; i++) {
|
|
||||||
let schema = schemas[i];
|
|
||||||
if (validateField(schema, formValues)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const field = schema.field;
|
|
||||||
// 记下来第一个未通过的字段，后面都不需要校验了，因为要跳转过去
|
|
||||||
if (pageMapping[field] !== undefined && pageField === null) {
|
|
||||||
pageField = pageMapping[field];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// 记下来哪些步骤页面没填完
|
|
||||||
if (stepMapping[field] !== undefined) {
|
|
||||||
stepFlag[stepMapping[field]] = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (pageField !== null) {
|
|
||||||
systemFormRef.value.onClickTab(pageField);
|
|
||||||
// 手动触发一次校验函数，让红框显示出来
|
|
||||||
systemFormRef.value.validate();
|
|
||||||
return Promise.reject(false);
|
|
||||||
}
|
|
||||||
const strStepFlag = stepFlag.join('');
|
|
||||||
// 拼接后的步骤标志1表示填完，0表示没填完，如果出现01的序列，如101，表示步骤1填了，步骤2没填，步骤3填了
|
|
||||||
// 按照我们假定的场景，只有1填完才能填2
|
|
||||||
const valResult = strStepFlag.indexOf('01');
|
|
||||||
if (valResult > -1) {
|
|
||||||
// 假设序列为101，那返回值为1，也就是步骤2没填
|
|
||||||
createMessage.warn(`步骤${valResult + 1}完成后才能填写后面内容`);
|
|
||||||
systemFormRef.value.onClickTab(2); // 我们知道哪页有步骤条，所以可以写死
|
|
||||||
systemFormRef.value.onClickStep(valResult);
|
|
||||||
return Promise.reject(false);
|
|
||||||
}
|
|
||||||
return formValues;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
# 如何在表单二开中定义字段
|
|
||||||
首先，需要按照文档**1_拆分表单**将表单拆开，分解成独立字段。
|
|
||||||
|
|
||||||
下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
|
|
||||||
```vue
|
|
||||||
<!-- 非SimpleFormItem的组件需要自己包一层FormItem才有标准表单样式 -->
|
|
||||||
<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
|
|
||||||
<!-- 实际存储值的是a-input，因为取值是校验方法的返回值，非antd表单组件无法取到值 -->
|
|
||||||
<a-input v-model:value="formModel.jiLianBenTi7352" style="display: none"/>
|
|
||||||
<!-- 当一个formitem里有多个表单字段时，不需要取值的用form-item-rest包起来 -->
|
|
||||||
<a-form-item-rest>
|
|
||||||
<a-cascader v-model:value="cascadeValue" :load-data="onCascadeLoad" :options="cascadeData" placeholder="请选择" @change="onCascadeChange">
|
|
||||||
<!-- 这里是选择器的触发链接，如果已经有选择值了，就显示中文结果 -->
|
|
||||||
<!-- 就算是没有加载选项部分，因为文字部分已经存库了，已选内容也不为空 -->
|
|
||||||
<a href="#">{{ formModel.jiLianWenZi5194 || '请选择' }}</a>
|
|
||||||
</a-cascader>
|
|
||||||
</a-form-item-rest>
|
|
||||||
</FormItem>
|
|
||||||
```
|
|
||||||
这里特别注意下，因为cascade的值为数组，而数组在数据库是不能存储的，所以这里cascadeValue为数组值，a-input里存储的为逗号分开的id。
|
|
||||||
|
|
||||||
特别注意，FormItem在本框架里获取值依靠form的validate方法，因此FormItem里必须有**antd vue的表单元素**，如果为纯手动开发的组件，建议用一个a-input储存表单值。
|
|
||||||
|
|
||||||
脚本部分
|
|
||||||
```vue
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
setup(props, ctx) {
|
|
||||||
// 参考表单拆分，这里省略
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getCascadeData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCascadeData: function (parent = {}) {
|
|
||||||
defHttp
|
|
||||||
.get({
|
|
||||||
url: '/system/dev-demo/cascade-data',
|
|
||||||
params: {
|
|
||||||
level: parent.level
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then((data) => {
|
|
||||||
if (!parent.level) {
|
|
||||||
this.cascadeData = data;
|
|
||||||
} else {
|
|
||||||
parent.children = data;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onCascadeChange: function (value, selectedOptions) {
|
|
||||||
// 将级联选择器的文字和值分别赋值到2个字段保存
|
|
||||||
this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
|
|
||||||
this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
|
|
||||||
},
|
|
||||||
|
|
||||||
onCascadeLoad: function (selectedOptions) {
|
|
||||||
// 具体参考官方文档，级联选择器的返回值为一组数组，所以要取最后一级的值，以加载下一层选项
|
|
||||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
|
||||||
this.getCascadeData(targetOption);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
# 如何在二开中只修改脚本不修改模版
|
|
||||||
|
|
||||||
可以在继承SimpleFormSetup时，不指定模版
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script>
|
|
||||||
// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
|
|
||||||
import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
mixins: [SimpleFormSetup],
|
|
||||||
setup(props, ctx) {
|
|
||||||
const ret = SimpleFormSetup.setup(props, ctx);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...ret
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
formModel: {
|
|
||||||
handler: function(oldVal, newVal){
|
|
||||||
console.log('表单被改了！' + Math.random());
|
|
||||||
this.formModel.zheDie17153 = this.formModel.zhaGe15916 + this.formModel.zhaGe22645
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
这里可以通过对formModel的监控和修改完成计算、赋值操作。
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
## 如何实现表单自定义校验
|
|
||||||
|
|
||||||
下面的例子介绍如何为字段增加自定义校验，校验的条件是两个文本框内的数字之和必须大于100。任何多字段的校验都可以参照此进行，日期时间可以借助dayjs库比较。
|
|
||||||
|
|
||||||
首先，在config.ts里加入设置表单用的函数，以便我们在自定义校验中可以拿到全部表单的值。
|
|
||||||
```javascript
|
|
||||||
let formRef = null;
|
|
||||||
export function setFormRef(ref) {
|
|
||||||
formRef = ref;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
然后再Form.vue中，将表单的引用传到config.ts里
|
|
||||||
```javascript
|
|
||||||
// setFormRef要引入进来
|
|
||||||
import { formProps, formEventConfigs, setFormRef } from './config';
|
|
||||||
|
|
||||||
const systemFormRef = ref();
|
|
||||||
setFormRef(systemFormRef); //新加的
|
|
||||||
```
|
|
||||||
|
|
||||||
最后就可以编写校验规则的代码，找到需要触发校验的字段，在rules里增加自定义规则。
|
|
||||||
|
|
||||||
validator可以是异步函数，因此通过接口验证也可以。默认参数为_rule: Rule, value: string，如果是单值校验可以不引入表单引用，直接在校验器拿值。
|
|
||||||
```javascript
|
|
||||||
{
|
|
||||||
rules: [{
|
|
||||||
validator: async function() {
|
|
||||||
const formValues = formRef.value.getFieldsValue();
|
|
||||||
const val1 = formValues.zhaGe15916;
|
|
||||||
const val2 = formValues.zhaGe22645;
|
|
||||||
if (!val1 || !val2) {
|
|
||||||
return Promise.resolve(); // 这里需要搭配必填校验
|
|
||||||
}
|
|
||||||
if ((+val1) + (+val2) != 100) {
|
|
||||||
return Promise.reject('两数之和必须为100');
|
|
||||||
}
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
trigger: 'blur'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
Reference in New Issue
Block a user