docs: 修复二开自动拆分工具的一些bug

dev_tools/template_extend.js

@@ -37,6 +37,7 @@ let tmpl = '';
 let tabCount = 0;
 let tableCount = 0;
 const refList = [];
+const refExportList = [];
 const importList = [];
 const components = [];
 
@@ -57,11 +58,11 @@ function appendTmpl(prop) {
         });
         return;
     } else if (prop.component == 'Tab') {
-        appendTabTmpl(prop);
+        return appendTabTmpl(prop);
     } else if (prop.component == 'TableLayout') {
-        appendTableLayoutTmpl(prop);
+        return appendTableLayoutTmpl(prop);
     } else if (prop.component == 'Card') {
-        appendCardTmpl(prop);
+        return appendCardTmpl(prop);
     } else if (prop.component == 'SubForm') {
         return appendSubFormTmpl(prop);
     }
@@ -79,12 +80,12 @@ function appendSubFormTmpl(prop){
     tableCount += 1;
     createSubFormFile();
     tmpl += `
-    <Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
+    <Col :span="getColWidth(${schema})">
         <template v-if="showComponent(${schema})">
             <CustomDevTableItem${tableCount} v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
         </template>
     </Col>
-    `
+    `;
     importList.push(`import CustomDevTableItem${tableCount} from './CustomDevTableItem${tableCount}.vue';`);
     components.push(`CustomDevTableItem${tableCount}`);
 }
@@ -106,28 +107,38 @@ function appendTabTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
     tabCount += 1;
     refList.push(`const activeKey${tabCount} = ref(0);`);
+    refExportList.push(`activeKey${tabCount}`);
     tmpl += `<Tabs v-model:activeKey="activeKey${tabCount}" v-bind="getTabProps('${prop.key}')">\n`;
-    prop.children.forEach((tabChild) => {
+    prop.children.forEach((tabChild, index) => {
-        tmpl += `<TabPane :forceRender="true" tab="${tabChild.name}">\n`;
+        tmpl += `<TabPane :forceRender="true" :key="${index}" tab="${tabChild.name}">\n`;
         tabChild.list.forEach((listChild) => {
             appendTmpl(listChild);
         });
         tmpl += `</TabPane>\n`;
     });
     tmpl += `</Tabs>\n`;
+    if(components.indexOf('TabPane') < 0){
+        components.push('TabPane');
+        components.push('Tabs');
+        importList.push(`import { TabPane, Tabs } from 'ant-design-vue';`);
+    }
 }
 
 function appendTableLayoutTmpl(prop) {
+    if (components.indexOf('TableLayoutPreview') < 0) {
+        components.push('TableLayoutPreview');
+        importList.push(`import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';`);
+    }
     let schema = `schemaMap['${prop.key}']`;
     tmpl += `<TableLayoutPreview :element="${schema}">\n`;
     tmpl += `   <template #tdElement="{ tdElement }">\n`;
     tmpl += `        <div class="h-full">\n`;
     tmpl += `<div :style="getTdStyle(tdElement)">\n`;
-    prop.children[0].list.forEach((lChild) => {
+    tmpl += `
-        lChild.children.forEach((child) => {
+    <template v-for="childSchema in tdElement.children" :key="childSchema.field">
-            appendTmpl(child);
+        <SimpleFormItem v-model:value="formModel[childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
-        });
+    </template>
-    });
+    `;
     tmpl += `</div>\n`;
     tmpl += `        </div>\n`;
     tmpl += `    </template>\n`;
@@ -141,6 +152,10 @@ function appendCardTmpl(prop) {
         appendTmpl(lChild);
     });
     tmpl += `</CollapseContainer>\n`;
+    if (components.indexOf('CollapseContainer') < 0) {
+        components.push('CollapseContainer');
+        importList.push(`import { CollapseContainer } from '/@/components/Container';`);
+    }
 }
 
 const fullVue = `
@@ -180,19 +195,17 @@ const fullVue = `
             Col, 
             SimpleFormItem, 
             Row, 
-            FormItem,
+            FormItem
-            ${components.join('\n')} 
+            ${components.length ? (',' + components.join(',\n')) : ''} 
         },
         mixins: [SimpleFormSetup],
         setup(props, ctx) {
             const ret = SimpleFormSetup.setup(props, ctx);
             const expose = ctx.expose;
             ${refList.join('\n')}
-            expose({
-                ...ret.formApi,
-            });
             
             return {
+                ${refExportList.length ? refExportList.join(',\n') + ',' : ''}
                 ...ret
             };
         },

dev_tools/templates.js

@@ -99,9 +99,17 @@ const subFormTmpl = `
 
 <script>
     import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
+    import { Form } from 'ant-design-vue';
+    const FormItem = Form.Item;
+    const FormItemRest = Form.ItemRest;
 
     export default {
         extends: SubFormV2Setup,
+        components: {
+            FormItem,
+            Form,
+            FormItemRest
+        },
         setup(props, ctx) {
             const ret = SubFormV2Setup.setup(props, ctx);
             return {
@@ -127,18 +135,21 @@ const subFormItem = `
     >
         <!-- 这里原先是component is写法，现在需要换成你自己的明细表 -->
         <!-- 也可以根据v-if渲染不同表格，这样就不需要定义很多次FormItem了 -->
-        <custom-dev-form v-model:value="formModel[schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
+        <custom-dev-sub-form v-model:value="formModel[schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
     </FormItem>
 </template>
 
 <script>
     import SimpleFormItemSetup from '/@/components/SimpleForm/src/components/SimpleFormItemSetup.vue';
-    import CustomDevSubForm from '/@/views/test/cascadeDemo/components/CascadeDetailTable[count].vue';
+    import CustomDevSubForm from './CustomDevSubForm[count].vue';
+    import { Form } from 'ant-design-vue';
+    const FormItem = Form.Item;
 
     export default {
         extends: SimpleFormItemSetup,
         components: {
-            CustomDevSubForm
+            CustomDevSubForm,
+            FormItem
         },
         setup(props, ctx) {
             const ret = SimpleFormItemSetup.setup(props, ctx);

src/components/Form/src/components/SubFormV2Setup.vue

@@ -93,7 +93,6 @@
 </style>
 <script lang="ts">
     import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
-    import { Form } from 'ant-design-vue';
     import { inject, onMounted, ref, unref, watch, nextTick } from 'vue';
     import { SubFormColumn } from '../types';
     import { componentMap } from '../componentMap';
@@ -107,6 +106,7 @@
     import { useI18n } from '/@/hooks/web/useI18n';
     import { MutipleHeadInfo } from '/@/components/Designer';
 
+
     export default {
         emits: ['change', 'update:value'],
         components: {
@@ -190,11 +190,6 @@
         setup(props, ctx){
             const { t } = useI18n();
             const emit = ctx.emit;
-            // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
-            // const FormItemRest = Form.ItemRest;
-            const FormItem = Form.Item;
-            const FormItemRest = Form.ItemRest;
-
             const multipleDialog = ref<boolean>(false);
             const data = ref<Recordable[]>([]);
             const cacheMap = new Map<String, number[]>();
@@ -551,7 +546,6 @@
             }
 
             return {
-                FormItem,
                 addDataKey,
                 componentMap,
                 getComponentsProps,
@@ -561,7 +555,6 @@
                 rules,
                 remove,
                 add,
-                FormItemRest,
                 t,
                 multipleDialog,
                 checkedValueComponents,
@@ -569,6 +562,7 @@
                 data,
                 headColums,
                 columns,
+                renderSubFormList
             }
         }
     }