geg-gas-web/docs/assets/index.html-xafVSSBu.js

import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(c,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="二开说明" tabindex="-1"><a class="header-anchor" href="#二开说明"><span>二开说明</span></a></h1><p>全代码框架提供了全部的前端源码，因此你可以使用任何已有的前端知识去解决问题，本文档只是提供了一个推荐的思路。</p><p>类似的，如果你觉得封装组件过于繁琐，在保证功能和界面一致的前提下，可以使用antdesign-vue提供的原始组件，如数据表格、对话框等。</p><h1 id="二开准备" tabindex="-1"><a class="header-anchor" href="#二开准备"><span>二开准备</span></a></h1><p>本文档所有二开都是基于使用脚本将<strong>表单拆分</strong>后进行。为了封装的一致性，以及低开模式的实现，表单的主体是一个比较复杂的封装，通过JSON的配置数据实现字段渲染，虽然配置数据提供了校验、事件的接口，由于JSON文件和表单的主要文件在不同位置，在函数调用、值传递等方面有很多不便。因此我们提供了一个脚本，可以将JSON的配置文件拆分为若干个FormItem，以方便二开。</p><h1 id="pc端表单拆分" tabindex="-1"><a class="header-anchor" href="#pc端表单拆分"><span>PC端表单拆分</span></a></h1><p>脚本位于dev_tools目录，进入页面的components目录，如src/views/jianyi/test1/components，执行：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code><span class="line"><span class="token function">node</span> <span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span>dev_tools<span class="token punctuation">\\</span>template_extend.js</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>如果是目录层级不一样，需要调整相对路径的层级。如果提示文件解析失败，需要调整配置代码，保证export const formProps: FormProps这一段定义的表单主体文件，必须为纯JS，而且不能有任何外部模块的引入（代码只是使用eval的方式读取表单的ID等信息，并不会真的使用这些模块）。</p><p>可以参考二开脚本中的对应代码，临时定义一些虚假的模块使文件能顺利解析：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;total rows: &#39;</span> <span class="token operator">+</span> confArr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> funStr <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string"></span>
<span class="line">    const uploadApi = &#39;&#39;; // 修复文件上传引用的API</span>
<span class="line">    return </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>confArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;\\n&#39;</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></span>
<span class="line"></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> fun <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span>funStr<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">formProps <span class="token operator">=</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>拆分成功后，目录里会多出CustomDevForm、CustomDevSumForm、CustomDevTableItem这些文件，如果有多个表格，也会有1、2这样的序号附加。</p><p>找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</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>CustomDevForm</span></span>
<span class="line">    <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>systemFormRef<span class="token punctuation">&quot;</span></span></span>
<span class="line">    <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data.formDataProps<span class="token punctuation">&quot;</span></span></span>
<span class="line">    <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{}<span class="token punctuation">&quot;</span></span></span>
<span class="line">    <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>props.fromPage!=FromPageType.MENU<span class="token punctuation">&quot;</span></span></span>
<span class="line">  <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 class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line">  <span class="token keyword">import</span> <span class="token punctuation">{</span> formProps<span class="token punctuation">,</span> formEventConfigs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./config&#39;</span><span class="token punctuation">;</span></span>
<span class="line">  <span class="token comment">//注释掉原来的引入</span></span>
<span class="line">  <span class="token comment">//import SimpleForm from &#39;/@/components/SimpleForm/src/SimpleForm.vue&#39;;</span></span>
<span class="line">  <span class="token comment">//引入二开拆分后的文件，注意template部分也要换掉</span></span>
<span class="line">  <span class="token keyword">import</span> CustomDevForm <span class="token keyword">from</span> <span class="token string">&quot;/@/views/jianyi/devgaofirst/components/CustomDevForm.vue&quot;</span><span class="token punctuation">;</span></span>
<span class="line"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果模块没有经过定制，此时除了界面略有差别，应该和原有功能一致。</p><h1 id="移动端表单拆分" tabindex="-1"><a class="header-anchor" href="#移动端表单拆分"><span>移动端表单拆分</span></a></h1><p>移动端表单拆分的执行逻辑大体和PC端一致，脚本位于common/tools目录，进入页面的components目录，如pages/jianyi/test1/components，执行：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code><span class="line"><span class="token function">node</span> <span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span>common<span class="token punctuation">\\</span>tools<span class="token punctuation">\\</span>template_extend.js</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>如果目录层级难以确定，需要调整相对路径的层级。最简单的方法是直接将脚本文件复制到对应目录下，然后在文件目录的层级下执行脚本。 需要注意的是，移动端表单生成的config/index.js文件中的formProps参数被压缩成为一行，在执行脚本前需将其格式化为标准的Object格式。 同样的，找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</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>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-fixed<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>CustomDevForm</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</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">&quot;</span>renderKey<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formConfig.formProps<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">:control</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formConfig.type<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CustomDevForm</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>view</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>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span>onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> SimpleForm <span class="token keyword">from</span> <span class="token string">&#39;@/components/simple-form/SimpleForm.vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> CustomDevForm <span class="token keyword">from</span> <span class="token string">&#39;./CustomDevForm.vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,20)]))}const i=s(e,[["render",o]]),u=JSON.parse('{"path":"/front_dev/","title":"二开说明","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"front_dev/index.md"}');export{i as comp,u as data};