25 lines
14 KiB
JavaScript
25 lines
14 KiB
JavaScript
|
import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(l,a){return p(),s("div",null,a[0]||(a[0]=[t(`<h1 id="表单封装" tabindex="-1"><a class="header-anchor" href="#表单封装"><span>表单封装</span></a></h1><p>其实，在前端框架中，所有的表单页面，都是基于SimpleForm的封装，无论是主表还是明细表，最外层封装都是SimpleForm（二开使用的是可以复用的SimpleFormSetup），如果需要实现多个子表单的效果，只需要在对应位置插入标题或者布局组件即可。</p><p>默认情况下，SimpleForm是对第一层元素循环，同时处理显隐、响应式布局以及响应式布局的换行，对于非slot组件，都是将属性传给SimpleFormItem</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.labelCol<span class="token punctuation">"</span></span> <span class="token attr-name">:labelAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.labelAlign<span class="token punctuation">"</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.layout<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:wrapper-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.wrapperCol<span class="token punctuation">"</span></span> <span class="token attr-name">@keypress.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleEnterPress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema in getSchemas<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema.field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">"</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">"</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema?.componentProps.respBreakLine<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showComponent(schema) && schema.type !== 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel[schema.field]<span class="token punctuation">"</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formApi<span class="token punctuation">"</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isWorkFlow<span class="token punctuation">"</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refreshFieldObj<span class="token punctuation">"</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema.type === 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- 无关代码省略 --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ textAlign: getProps.buttonLocation }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token comment"><!-- 表单可以配置显示提交和清空按钮 也可以在前后添加按钮 --></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttonBefore<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps.showSubmitButton<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleSubmit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ t('提交') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token comment"><!-- 无关代码省略 --></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttonAfter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
|||
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>对于完全使用useForm或者SimpleForm构建表单的，封装也提供了提交和清除按钮，但是页面形式的表单或者审批页面不用这2个按钮，而是用的工具栏里的封装。</p>`,5)]))}const u=n(e,[["render",o]]),i=JSON.parse('{"path":"/front_dev/components.html","title":"表单封装","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743940801000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2}],"changelog":[{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"}]},"filePathRelative":"front_dev/components.md"}');export{u as comp,i as data};
|