181 lines
50 KiB
HTML
181 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>自定义表单 | 全代码框架文档</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/form.html-B4704WRj.js">
|
||
<link rel="prefetch" href="assets/index.html-ByXOdSON.js" as="script"><link rel="prefetch" href="assets/components.html-CbpbsXEn.js" as="script"><link rel="prefetch" href="assets/field_events.html-C6V_tkoR.js" as="script"><link rel="prefetch" href="assets/form_logic.html-CA8-U3gW.js" as="script"><link rel="prefetch" href="assets/index.html-xafVSSBu.js" as="script"><link rel="prefetch" href="assets/pass_value.html-CFBEHlue.js" as="script"><link rel="prefetch" href="assets/show_and_hide.html-Bai-A-AK.js" as="script"><link rel="prefetch" href="assets/index.html-BfpfzkA1.js" as="script"><link rel="prefetch" href="assets/custom_field.html-CEs-XIt2.js" as="script"><link rel="prefetch" href="assets/custom_page.html-DIr-Sgm-.js" as="script"><link rel="prefetch" href="assets/dialog.html-fkmzKy_f.js" as="script"><link rel="prefetch" href="assets/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">表单介绍 <!----></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 auto-link vp-sidebar-item" 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 active">高级二开 <!----></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 route-link-active auto-link vp-sidebar-item active" 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="自定义表单" tabindex="-1"><a class="header-anchor" href="#自定义表单"><span>自定义表单</span></a></h1><blockquote><p>提示：完整的流程审批表单因为流程权限等过于复杂所以不建议手写，最好还是用系统生成及拆分的代码进行二开，以下叙述的场景仅限于简单表单或者是对原表单的扩展。</p></blockquote><h3 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h3><p>项目引入了ant-design-vue的表单组件，具体文档<a href="https://3x.antdv.com/components/form-cn/#Form-" target="_blank" rel="noopener noreferrer">点击查看</a> 简单的并且可复用的表单，可以使用和框架表单一样的形式，编写一个公共组件，通过config.ts来编写表单配置，然后使用公共组件simpleFormItem来渲染表单各个字段的组件。这样可以做到表单的复用，减少代码量。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema in config.schemas<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema.field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema[schema.field]<span class="token punctuation">"</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema<span class="token punctuation">"</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refreshFieldObj<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> onMounted<span class="token punctuation">,</span> ref<span class="token punctuation">,</span>unref<span class="token punctuation">,</span> defineProps<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> provide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">import</span> SimpleFormItem <span class="token keyword">from</span> <span class="token string">'/@/components/SimpleForm/src/components/SimpleFormItem.vue'</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token literal-property property">record</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Object</span>
|
||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||
<span class="line"> <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Object</span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'formModel'</span><span class="token punctuation">,</span> props<span class="token punctuation">.</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'formProps'</span><span class="token punctuation">,</span> <span class="token function">ref</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>config<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">const</span> refreshFieldObj <span class="token operator">=</span> ref<span class="token operator"><</span>object<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">refreshAPI</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">field</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>field<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>field<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"> <span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">const</span> wrapWidth <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1080</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token keyword">function</span> <span class="token function">getColWidth</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">const</span> compProps <span class="token operator">=</span> schema<span class="token punctuation">.</span>componentProps<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>compProps<span class="token operator">?.</span>responsive<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>compProps<span class="token punctuation">.</span>respNewRow<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">return</span> <span class="token number">24</span><span class="token punctuation">;</span> <span class="token comment">// 响应式布局下独立成行</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">const</span> wrapValue <span class="token operator">=</span> wrapWidth<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>wrapValue <span class="token operator">></span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_RESP_LG_WIDTH</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">return</span> <span class="token number">8</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>wrapValue <span class="token operator">></span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_RESP_MD_WIDTH</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">return</span> <span class="token number">12</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token keyword">return</span> <span class="token number">24</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"> <span class="token keyword">return</span> schema<span class="token punctuation">.</span>colProps<span class="token operator">?.</span>span<span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||
<span class="line"><span class="token selector">.views-item</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">margin-top</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">overflow-y</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"><span class="token selector">:deep(.ant-input-disabled)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span class="token selector">:deep(.ant-form-item-label > label)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||
<span class="line"><span class="token selector">.ant-input-affix-wrapper-disabled</span><span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"><span class="token selector">.ant-select-disabled</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token selector">.ant-select-selector</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"> <span class="token selector">.ant-select-selection-item</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 0 0 / 85%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"> <span class="token selector">.ant-select-arrow</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然如果个性化差异比较大，也可以自己写手写表单的各个组件。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>views-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>责任类型<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>responsibilityType<span class="token punctuation">"</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[{ required: true, message: '请选择责任类型' }]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record.responsibilityType<span class="token punctuation">"</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>responsibilityTypeOptions<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择责任类型<span class="token punctuation">"</span></span> <span class="token attr-name">allowClear</span> <span class="token punctuation">/></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token comment"><!--以下不一一列举--></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||
<span class="line"> <span class="token selector">:deep(.ant-form-item-label > label)</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||
<span class="line"> <span class="token selector">.ant-select-disabled</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token selector">.ant-select-selector</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"> <span class="token selector">.ant-select-selection-item</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 0 0 / 85%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"> <span class="token selector">.ant-select-arrow</span> <span class="token punctuation">{</span></span>
|
||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"> <span class="token punctuation">}</span></span>
|
||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想主动进行表单校验，可以使用ref来获取表单实例，然后调用validate方法进行校验。这里校验的返回值是一个Promise，需要使用await进行等待。resolve的值是一个对象，如果校验成功则为表单包含数据，如果校验失败则为失败信息。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">const</span> formRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 表单实例</span></span>
|
||
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">validate</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 表单校验</span></span>
|
||
<span class="line"> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">unref</span><span class="token punctuation">(</span>formRef<span class="token punctuation">)</span><span class="token operator">?.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 表单校验</span></span>
|
||
<span class="line"><span class="token punctuation">}</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也可以使用相同方法触发重置表单（resetFields）、移除校验结果（clearValidate）等操作。</p><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>项目使用了uniapp的组件，组件源码均在路径@/uni_module下，表单组件在@/uni_module/uni-forms/components下，配置项和PC端类似。参照实际情况即可，可以自己编写也可以直接使用。</p></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-18T07:41:52.000Z" data-allow-mismatch>4/18/25, 3:41 PM</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: 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/adv/dialog.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/adv/table.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>
|