geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
gaoyunqi
2024-06-13 21:17:31 +08:00
parent a9d3fe6943
commit 8a6a02699d
3 changed files with 49 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
dev_tools/template_extend.js
View File

@ -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
};
},

17
dev_tools/templates.js
View File

@ -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);

10
src/components/Form/src/components/SubFormV2Setup.vue
View File

@ -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
}
}
}