geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f933c7f09f03fb5ce4e9867557238c1aa76a9daa
geg-gas-web/docs/front_dev/pass_value.html

184 lines
50 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="对接移动办公"><!--[--><!--[--><!--]--><!--]-->对接移动办公<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">表单介绍 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/form_logic.html" aria-label="表单封装逻辑"><!--[--><!--[--><!--]--><!--]-->表单封装逻辑<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="front_dev/pass_value.html" aria-label="传值和formModel"><!--[--><!--[--><!--]--><!--]-->传值和formModel<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/components.html" aria-label="组件的封装"><!--[--><!--[--><!--]--><!--]-->组件的封装<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/show_and_hide.html" aria-label="显示隐藏控制"><!--[--><!--[--><!--]--><!--]-->显示隐藏控制<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/field_events.html" aria-label="字段事件"><!--[--><!--[--><!--]--><!--]-->字段事件<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">基础二开 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/computed.html" aria-label="值计算"><!--[--><!--[--><!--]--><!--]-->值计算<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/change_value.html" aria-label="修改组件值"><!--[--><!--[--><!--]--><!--]-->修改组件值<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/validation.html" aria-label="自定义校验"><!--[--><!--[--><!--]--><!--]-->自定义校验<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/ajax.html" aria-label="使用远程数据源"><!--[--><!--[--><!--]--><!--]-->使用远程数据源<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/teleport.html" aria-label="为工具栏添加按钮"><!--[--><!--[--><!--]--><!--]-->为工具栏添加按钮<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/add_field.html" aria-label="为表单添加新字段"><!--[--><!--[--><!--]--><!--]-->为表单添加新字段<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">高级二开 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/custom_field.html" aria-label="自定义字段"><!--[--><!--[--><!--]--><!--]-->自定义字段<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/custom_page.html" aria-label="自定义页面"><!--[--><!--[--><!--]--><!--]-->自定义页面<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/dialog.html" aria-label="弹窗"><!--[--><!--[--><!--]--><!--]-->弹窗<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/form.html" aria-label="表单"><!--[--><!--[--><!--]--><!--]-->表单<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/table.html" aria-label="表格"><!--[--><!--[--><!--]--><!--]-->表格<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div vp-content><!--[--><!--]--><div><h1 id="pc端逻辑" tabindex="-1"><a class="header-anchor" href="#pc端逻辑"><span>PC端逻辑</span></a></h1><p>未绑定流程的表单和带流程的标配单赋值逻辑基本一致，在原始框架中，带流程的表单详情取值实际上取得是流程保存的一份冗余数据，而列表读取的是原始表单的数据，这样会导致数据不一致。在后续版本中，这个问题已经被修复。</p><h2 id="赋值过程-表单初始化" tabindex="-1"><a class="header-anchor" href="#赋值过程-表单初始化"><span>赋值过程（表单初始化）</span></a></h2><p>以流程表单为例，入口页面为SystemForm/src/Form，异步组件加载完成之后，会调用loadingCompleted函数。这个函数会调用ref的setWorkFlowForm，函数定义位于生成代码的components/Form.vue中。</p><p>对于非新建场景，id（就是默认的rowKey）存在，因此会调用setFormDataFromId，重新查一次表单数据，避免数据不一致问题，此时formModel实际上是有值的，但是值来自流程冗余，因此因此会调用setFormDataFromId会重新覆盖formModel的值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">setWorkFlowForm</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> flowData <span class="token operator">=</span> <span class="token function">changeWorkFlowForm</span><span class="token punctuation">(</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>formProps<span class="token punctuation">)</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">let</span> <span class="token punctuation">{</span>buildOptionJson<span class="token punctuation">,</span> uploadComponentIds<span class="token punctuation">,</span> formModels<span class="token punctuation">,</span> isViewProcess<span class="token punctuation">}</span> <span class="token operator">=</span> flowData<span class="token punctuation">;</span></span>
<span class="line"> data<span class="token punctuation">.</span>formDataProps <span class="token operator">=</span> buildOptionJson<span class="token punctuation">;</span></span>
<span class="line"> <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">&#39;changeUploadComponentIds&#39;</span><span class="token punctuation">,</span> uploadComponentIds<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//工作流中必须保存上传组件id【附件汇总需要】</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>isViewProcess<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">setDisabledForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//查看</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> formModels<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>formModels<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">setFormDataFromId</span><span class="token punctuation">(</span>formModels<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最后，这个函数会调用SimpleForm/SimpleFormSetup的setFieldsValue函数完成表单赋值，因此，最上面template里formModel的定义仅仅是为了防止初值没有报错。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">setFormDataFromId</span><span class="token punctuation">(</span><span class="token parameter">rowId<span class="token punctuation">,</span> skipUpdate</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> record <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDevgaofirst</span><span class="token punctuation">(</span>rowId<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>skipUpdate<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> record<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token function">setFieldsValue</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> record<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">await</span> <span class="token function">getFormDataEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：获取表单数据</span></span>
<span class="line"> <span class="token keyword">return</span> record<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="取值过程-表单提交" tabindex="-1"><a class="header-anchor" href="#取值过程-表单提交"><span>取值过程（表单提交）</span></a></h2><p>表单提交时调用的实际上是表单的校验函数，这个函数会返回表单的值：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">saveLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> data<span class="token punctuation">.</span>submitLoading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
<span class="line"> loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> validateForms <span class="token operator">=</span> <span class="token keyword">await</span> formInformation<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>validateForms<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// 后面代码省略</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意的是，这个函数的返回值必须表单中有效的antd-vue表单字段，而且字段必须渲染出来（可以v-show不能v-if，隐藏字段会自动处理）。因此修改提交值可以在模块生成的form.vue中找到validate函数：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> values <span class="token operator">=</span> <span class="token keyword">await</span> systemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">//可以修改values，加入需要额外提交给后端的值</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>formDataProps<span class="token punctuation">.</span>hiddenComponent<span class="token operator">?.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 其他代码省略</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token keyword">return</span> values<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单值绑定-v-model" tabindex="-1"><a class="header-anchor" href="#表单值绑定-v-model"><span>表单值绑定（v-model）</span></a></h2><p>在拆分后的CustomDevForm中，formModel为响应式的，下面是一个例子，直接利用formModel拼接字符串，同时保持表单样式（提交时不传值）：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 其余代码省略 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getColWidth({responsive: true})<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vmodel演示<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> {{formModel.danXingWenBen5090 + &#39;/&#39; + formModel.danXingWenBen23227}}</span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下： <img src="/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">&#39;wx&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 无关代码省略</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator">&lt;</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>forms<span class="token punctuation">.</span>formModels<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">!=</span><span class="token string">&quot;{}&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">//这里放入流程表单数据</span></span>
<span class="line"> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">loadForm</span><span class="token punctuation">(</span>forms<span class="token punctuation">.</span>formModels<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
<span class="line"> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>system-form层同样触发下层form的loadForm方法。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// system-form层</span></span>
<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">formModel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">await</span> systemRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">loadForm</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在生成的表单文件form.vue中，通过传递过来的formModel的rowKey值查询一遍原始表单数据，最后赋值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// form.vue</span></span>
<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> id <span class="token operator">=</span> val<span class="token punctuation">[</span>rowKey<span class="token punctuation">]</span></span>
<span class="line"> formConfig<span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span></span>
<span class="line"> data</span>
<span class="line"> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getxxx</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">await</span> formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFormData</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> <span class="token operator">...</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="取值过程-表单提交-1" tabindex="-1"><a class="header-anchor" href="#取值过程-表单提交-1"><span>取值过程（表单提交）</span></a></h2><p>移动端与PC端不同的是，在提交表单的时候校验函数和获取表单值的函数是分别进行的，validate函数并没有返回表单的值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 流程提交参数</span></span>
<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">saveLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 校验表单</span></span>
<span class="line"> <span class="token keyword">let</span> validateForms <span class="token operator">=</span> <span class="token keyword">await</span> flowInfoRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>validateForms<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> successValidate <span class="token operator">=</span> validateForms<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> ele<span class="token punctuation">.</span>validate<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>successValidate<span class="token punctuation">.</span>length <span class="token operator">==</span> validateForms<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 获取表单值</span></span>
<span class="line"> mainFormModels<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> flowInfoRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 其他代码省略</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// 其他代码省略</span></span>
<span class="line"> </span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里获取表单值的函数的最底层是在simpleForm.vue公共组件，在这里getFormData函数返回与表单双向绑定的formModelRef的值，然后每一层都有一个getFormData函数向外暴露，以方便在最外层获取表单的值。在FormInformation.vue中，因为原始框架支持多表单，所以对多个表单值进行了合并处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> formModes <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>platform<span class="token operator">==</span><span class="token string">&#39;wx&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 无关代码省略</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator">&lt;</span> forms<span class="token punctuation">.</span>configs<span class="token punctuation">.</span>length<span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> formModel <span class="token operator">=</span> <span class="token keyword">await</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">getFormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>formType<span class="token operator">==</span>FormType<span class="token punctuation">.</span><span class="token constant">SYSTEM</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> formModelIdVal <span class="token operator">=</span> <span class="token keyword">await</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> formModel <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>formModel<span class="token punctuation">,</span><span class="token operator">...</span>formModelIdVal<span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> formModes<span class="token punctuation">[</span>forms<span class="token punctuation">.</span>configs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>formKey<span class="token punctuation">]</span> <span class="token operator">=</span> formModel<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// 无关代码省略</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单值绑定-v-model-1" tabindex="-1"><a class="header-anchor" href="#表单值绑定-v-model-1"><span>表单值绑定（v-model）</span></a></h2><p>该部分逻辑基本与PC端一致，不再赘述。</p></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>
Reference in New Issue View Git Blame Copy Permalink