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);
     }
@@ -74,22 +75,22 @@ function appendTmpl(prop) {
     `;
 }
 
-function appendSubFormTmpl(prop){
+function appendSubFormTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
     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}`);
 }
 
-function createSubFormFile(){
+function createSubFormFile() {
     const subFormStr = templates.subFormTmpl;
     fs.writeFile(`./CustomDevSubForm${tableCount}.vue`, subFormStr, (err) => {
         if (err) throw err;
@@ -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) => {
-        tmpl += `<TabPane :forceRender="true" tab="${tabChild.name}">\n`;
+    prop.children.forEach((tabChild, index) => {
+        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) => {
-        lChild.children.forEach((child) => {
-            appendTmpl(child);
-        });
-    });
+    tmpl += `
+    <template v-for="childSchema in tdElement.children" :key="childSchema.field">
+        <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,
-            ${components.join('\n')} 
+            FormItem
+            ${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);