184 lines
50 KiB
HTML
184 lines
50 KiB
HTML
|
<!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>PC端逻辑 | 全代码框架文档</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/pass_value.html-CFBEHlue.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/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"><link rel="prefetch" href="assets/404.html-urOlE4ef.js" as="script">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app"><!--[--><div class="vp-theme-container external-link-icon" vp-container><!--[--><header class="vp-navbar" vp-navbar><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href><!----><span class="vp-site-name" aria-hidden="true">全代码框架文档</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="tutorial/" aria-label="快速上手"><!--[--><!--[--><!--]--><!--]-->快速上手<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="front_components/" aria-label="前端组件"><!--[--><!--[--><!--]--><!--]-->前端组件<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="front_dev/" aria-label="前端二开"><!--[--><!--[--><!--]--><!--]-->前端二开<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button type="button" class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar" vp-sidebar><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="tutorial/" aria-label="快速上手"><!--[--><!--[--><!--]--><!--]-->快速上手<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="front_components/" aria-label="前端组件"><!--[--><!--[--><!--]--><!--]-->前端组件<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="front_dev/" aria-label="前端二开"><!--[--><!--[--><!--]--><!--]-->前端二开<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><a class="route-link route-link-active auto-link vp-sidebar-item vp-sidebar-heading" href="front_dev/" aria-label="二开前准备"><!--[--><!--[--><!--]--><!--]-->二开前准备<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item vp-sidebar-heading" href="front_dev/mobile_app.html" aria-label="对接移动办公"><!--[--><!--[--><!--]--><!--]-->对接移动办
|
|||
|
|
<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="/assets/vmodel_demo--x0CSlwt.png" 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></div><!--[--><!--]--></div><footer class="vp-page-meta"><!----><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated:: </span><time class="meta-item-info" datetime="2025-04-10T02:11:47.000Z" data-allow-mismatch>4/10/25, 10:11 AM</time></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: gaoyunqi@gdyd.com">gaoyunqi</span><!--[-->, <!--]--><!--]--><!--[--><span class="contributor" title="email: 1140589958@qq.com">DESKTOP-45LLIKH\11405</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="front_dev/form_logic.html" aria-label="表单封装逻辑"><!--[--><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span class="external-link">表单封装逻辑</span></div><!--]--></a><a class="route-link auto-link next" href="front_dev/components.html" aria-label="组件的封装"><!--[--><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span class="external-link">组件的封装</span></div><!--]--></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!--]--><!--]--></div>
|
|||
|
|
<script type="module" src="assets/app-CDlLWk6N.js" defer></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|