From 1ed4b6f5d45a3785798df42a425341f6e337cbaf Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Thu, 13 Jun 2024 13:47:01 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=8B=86=E5=88=86=E7=BB=84=E4=BB=B6=E5=92=8C=E4=BA=8C=E5=BC=80?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=20fix:=20=E4=BF=AE=E5=A4=8D=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E6=8D=A2=E8=A1=8C=E5=A4=B1=E6=95=88=E7=9A=84?=
 =?UTF-8?q?bug=20fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8B=E6=8B=89=E6=A1=86stati?=
 =?UTF-8?q?cOptions=E4=BC=9A=E7=94=9F=E6=88=90=E6=97=A0=E7=94=A8=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dev_tools/template_extend.js                 | 192 ++++++++++++++++++-
 docs/表单二开/1_拆分表单.md                  |   9 +
 src/components/Designer/src/Designer.vue     |   2 +-
 src/components/Select/src/Select.vue         |   1 -
 src/components/SimpleForm/src/SimpleForm.vue |   2 +-
 5 files changed, 198 insertions(+), 8 deletions(-)

diff --git a/dev_tools/template_extend.js b/dev_tools/template_extend.js
index 7a0f556..d46841a 100644
--- a/dev_tools/template_extend.js
+++ b/dev_tools/template_extend.js
@@ -1,10 +1,60 @@
-const formProps = require('./formProps');
+const fs = require('fs');
+const path = require('path');
+const filePath = path.join(process.cwd(), 'config.ts');
+if (fs.existsSync(filePath)) {
+    console.log('Reading ' + filePath);
+    const file = fs.readFileSync(filePath, 'utf-8');
+    const fileArr = file.split('\n');
+    const confArr = [];
+    let parseStart = false;
+
+    fileArr.forEach((row) => {
+        if (!parseStart && row.indexOf('export const formProps: FormProps =') >= 0) {
+            parseStart = true;
+            confArr.push('{');
+            return;
+        }
+        if (parseStart) {
+            if (row.indexOf('};') === 0) {
+                confArr.push('}');
+                parseStart = false;
+                return;
+            }
+            confArr.push(row);
+        }
+    });
+    console.log('total rows: ' + confArr.length);
+    formProps = eval('(' + confArr.join('\n') + ')');
+} else {
+    process.exit(0);
+}
 
 let tmpl = '';
+let tabCount = 0;
+const refList = [];
 
 // 用于将config的表单格式展开成字段，以便二开
 formProps.schemas.forEach((prop) => {
+    appendTmpl(prop);
+});
+
+function appendTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
+    // 栅格布局
+    if (prop.component == 'Grid') {
+        prop.children.forEach((child) => {
+            child.list.forEach((listChild) => {
+                appendTmpl(listChild);
+            });
+        });
+        return;
+    } else if (prop.component == 'Tab') {
+        appendTabTmpl(prop);
+    } else if (prop.component == 'TableLayout') {
+        appendTableLayoutTmpl(prop);
+    } else if (prop.component == 'Card') {
+        appendCardTmpl(prop);
+    }
     tmpl += `
     <!-- ${prop.label || prop.field || prop.component}  -->
     <Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
@@ -13,12 +63,144 @@ formProps.schemas.forEach((prop) => {
         </template>
     </Col>
     `;
-});
+}
 
-//write to file
-const fs = require('fs');
+function appendTabTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    tabCount += 1;
+    refList.push(`const activeKey${tabCount} = ref(0);`);
+    tmpl += `<Tabs v-model:activeKey="activeKey${tabCount}" v-bind="getTabProps('${prop.key}')">\n`;
+    prop.children.forEach((tabChild) => {
+        tmpl += `<TabPane :forceRender="true" tab="${tabChild.name}">\n`;
+        tabChild.list.forEach((listChild) => {
+            appendTmpl(listChild);
+        });
+        tmpl += `</TabPane>\n`;
+    });
+    tmpl += `</Tabs>\n`;
+}
 
-fs.writeFile('./template.txt', tmpl, (err) => {
+function appendTableLayoutTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    tmpl += `<TableLayoutPreview :element="${schema}">`;
+    tmpl += `   <template #tdElement="{ tdElement }">`;
+    tmpl += `        <div class="h-full">`;
+    tmpl += `<div style="getTdStyle(tdElement)">`;
+    prop.children.forEach((child) => {
+        let childSchema = `schemaMap['${child.key}']`;
+        tmpl += `<SimpleFormItem v-if="getIfShow2(${childSchema})" v-show="getIsShow2(${childSchema})" v-model:value="formModel[${childSchema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${childSchema}" />`;
+    });
+    tmpl += `</div>`;
+    tmpl += `        </div>`;
+    tmpl += `    </template>`;
+    tmpl += `</TableLayoutPreview>`;
+}
+
+function appendCardTmpl(prop) {
+    let schema = `schemaMap['${prop.key}']`;
+    tmpl += `<CollapseContainer :bordered="false" :hasLeftBorder="true" title="${prop.componentProps.title}">`;
+    prop.children[0].list.forEach((lChild) => {
+        const childSchema = `schemaMap['${lChild.key}']`;
+        tmpl += ` <SimpleFormItem v-model:value="formModel[${childSchema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${childSchema}" />`;
+    });
+    tmpl += `</CollapseContainer>`;
+}
+
+const fullVue = `
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
+          ${tmpl}
+           <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+</template>
+
+<script>
+    // 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+    import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+    import { Col, Form, Row } from 'ant-design-vue';
+    import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
+    import { ref } from 'vue';
+    import { CheckCircleOutlined } from '@ant-design/icons-vue';
+
+    const FormItem = Form.Item;
+
+    export default {
+        components: { CheckCircleOutlined, Form, Col, SimpleFormItem, Row, FormItem },
+        mixins: [SimpleFormSetup],
+        setup(props, ctx) {
+            const ret = SimpleFormSetup.setup(props, ctx);
+            const expose = ctx.expose;
+            ${refList.join('\n')}
+            expose({
+                ...ret.formApi,
+            });
+
+            return {
+                ...ret
+            };
+        },
+        computed: {
+            // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
+            schemaMap() {
+                const schemaMap = {};
+                this.getSchemas.forEach((schema) => {
+                    schemaMap[schema.key] = schema;
+                    if(schema.children) {
+                        schema.children.forEach(sChild=>{
+                           if(sChild.list){
+                               sChild.list.forEach(lChild=>{
+                                   schemaMap[lChild.key] = lChild;
+                               });
+                           } 
+                        });
+                    }
+                });
+                return schemaMap;
+            }
+        },
+        methods: {
+            getIfShow2: function (key) {
+                return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getIsShow2: function (key) {
+                return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getTabProps(key) {
+                const schema = this.schemaMap[key];
+                return {
+                    size: schema.componentProps.tabSize,
+                    tabPosition: schema.componentProps.tabPosition,
+                    type: schema.componentProps.type
+                }
+            },
+            
+            getTdStyle(tdElement) {
+                return {
+                    height: tdElement.height ? tdElement.height + 'px' : '',
+                    minHeight: (tdElement.height || '42') + 'px',
+                    overflow: 'hidden',
+                    padding: '10px'
+                }
+            }
+        }
+    };
+</script>
+`;
+
+fs.writeFile('./template.vue', fullVue, (err) => {
     if (err) throw err;
     console.log('The file has been saved!');
 });
diff --git a/docs/表单二开/1_拆分表单.md b/docs/表单二开/1_拆分表单.md
index 7dcf22e..b9f1930 100644
--- a/docs/表单二开/1_拆分表单.md
+++ b/docs/表单二开/1_拆分表单.md
@@ -2,6 +2,15 @@
 
 **注意：框架的部分模版部分用了非空断言，如formModel![xxx]，编译器报错可以去掉叹号，或者在script上加上lang="ts"**
 
+---
+如果你使用了最新版的代码，可以直接生成拆分后的表单文件，进入页面的components目录，执行
+```bash
+node ..\..\..\..\..\dev_tools\template_extend.js
+```
+目录下生成的template.vue就是可以二开的表单。自动拆分目前对于Tab、TableLayout等组件的显隐并不完善，需要自己补充。
+
+---
+
 默认情况下，生成的表单以JSON存储，每个字段都是由循环产生，因此在二开之前需要将每个字段拆开，以便进行二开。
 
 首先，打开项目dev_tools/formprops.js，将其中的内容替换为
diff --git a/src/components/Designer/src/Designer.vue b/src/components/Designer/src/Designer.vue
index 00100a4..65fd450 100644
--- a/src/components/Designer/src/Designer.vue
+++ b/src/components/Designer/src/Designer.vue
@@ -194,7 +194,7 @@
       </a-modal>
       <a-modal v-model:visible="showCompReadme" title="注意事项" @ok="closeCompReadme">
         <div class="comp-readme-content">
-            因为组件封装的限制，当使用表格布局、选项卡、卡片布局、栅格布局时，会带来一些问题，包括二开嵌套问题、移动端生成代码无法适配等。<br/>
+            因为组件封装的限制，当使用表格布局、选项卡、卡片布局、栅格布局时，会带来一些问题，包括二开拆分不完全、移动端生成代码无法适配等。<br/>
             无特殊需求时，应该优先使用设计器提供的响应式布局，或者进行源码二开。<br/>
             源码二开可以复用设计器生成的代码，调整布局、显隐、权限更加方便。
         </div>
diff --git a/src/components/Select/src/Select.vue b/src/components/Select/src/Select.vue
index 7c5f7bb..da94df7 100644
--- a/src/components/Select/src/Select.vue
+++ b/src/components/Select/src/Select.vue
@@ -200,7 +200,6 @@
                     }
                     if (props.datasourceType === 'api') {
                         options.value = await apiConfigFunc(props.apiConfig, isCamelCase, formModel, props.index);
-                        props.staticOptions.splice(0, props.staticOptions.length, options.value);
                     }
                 } else {
                     api = props.api;
diff --git a/src/components/SimpleForm/src/SimpleForm.vue b/src/components/SimpleForm/src/SimpleForm.vue
index 74e3b8d..93fb6a7 100644
--- a/src/components/SimpleForm/src/SimpleForm.vue
+++ b/src/components/SimpleForm/src/SimpleForm.vue
@@ -3,8 +3,8 @@
         <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
             <Row v-bind="getRow">
                 <template v-for="schema in getSchemas" :key="schema.field">
+                    <div v-if="schema?.componentProps.respBreakLine" style="width: 100%; height: 1px"></div>
                     <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
-                        <div v-if="schema?.componentProps.respBreakLine" style="width: 100%; height: 1px"></div>
                         <template v-if="showComponent(schema) && schema.type !== 'slot'">
                             <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
                         </template>