geg-gas-web/dev_tools/template_extend.js

const fs = require('fs');
const path = require('path');
const filePath = path.join(process.cwd(), 'config.ts');
const argv = process.argv;
const fixResponsive = argv.indexOf('fix-responsive') > 0;
const templates = require('./templates');

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);
    const funStr = `
        const uploadApi = ''; // 修复文件上传引用的API
        return ${confArr.join('\n')}
    `;
    const fun = new Function(funStr);
    formProps = fun();
} else {
    process.exit(0);
}

let tmpl = '';
let tabCount = 0;
let tableCount = 0;
const refList = [];
const refExportList = [];
const importList = [];
const components = [];

// 用于将config的表单格式展开成字段，以便二开
formProps.schemas.forEach((prop) => {
    appendTmpl(prop);
});

function appendTmpl(prop) {
    let schema = `schemaMap['${prop.key}']`;
    // 栅格布局
    tmpl += `<!-- ${prop.label || prop.field || prop.component}  -->\n`;
    if (prop.component == 'Grid') {
        prop.children.forEach((child) => {
            child.list.forEach((listChild) => {
                appendTmpl(listChild);
            });
        });
        return;
    } else if (prop.component == 'Tab') {
        return appendTabTmpl(prop);
    } else if (prop.component == 'TableLayout') {
        return appendTableLayoutTmpl(prop);
    } else if (prop.component == 'Card') {
        return appendCardTmpl(prop);
    } else if (prop.component == 'SubForm') {
        return appendSubFormTmpl(prop);
    }
    tmpl += `
    <Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
        <template v-if="showComponent(${schema})">
            <SimpleFormItem v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
        </template>
    </Col>
    `;
}

function appendSubFormTmpl(prop) {
    let schema = `schemaMap['${prop.key}']`;
    tableCount += 1;
    createSubFormFile();
    tmpl += `
    <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() {
    const subFormStr = templates.subFormTmpl;
    fs.writeFile(`./CustomDevSubForm${tableCount}.vue`, subFormStr, (err) => {
        if (err) throw err;
        console.log(`Write SubForm CustomDevSubForm${tabCount}.vue success`);
    });
    const formItemStr = templates.subFormItem.replace('[count]', tableCount);
    fs.writeFile(`./CustomDevTableItem${tableCount}.vue`, formItemStr, (err) => {
        if (err) throw err;
        console.log(`Write FormItem CustomDevTableItem${tabCount}.vue success`);
    });
}

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, 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`;
    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`;
    tmpl += `</TableLayoutPreview>\n`;
}

function appendCardTmpl(prop) {
    let schema = `schemaMap['${prop.key}']`;
    tmpl += `<CollapseContainer :bordered="false" :hasLeftBorder="true" title="${prop.componentProps.title}">\n`;
    prop.children[0].list.forEach((lChild) => {
        appendTmpl(lChild);
    });
    tmpl += `</CollapseContainer>\n`;
    if (components.indexOf('CollapseContainer') < 0) {
        components.push('CollapseContainer');
        importList.push(`import { CollapseContainer } from '/@/components/Container';`);
    }
}

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';
    ${importList.join('\n')}

    const FormItem = Form.Item;

    export default {
        components: { 
            CheckCircleOutlined, 
            Form, 
            Col, 
            SimpleFormItem, 
            Row, 
            FormItem
            ${components.length ? (',' + components.join(',\n')) : ''} 
        },
        mixins: [SimpleFormSetup],
        setup(props, ctx) {
            const ret = SimpleFormSetup.setup(props, ctx);
            const expose = ctx.expose;
            ${refList.join('\n')}
            
            return {
                ${refExportList.length ? refExportList.join(',\n') + ',' : ''}
                ...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('./CustomDevForm.vue', fullVue, (err) => {
    if (err) throw err;
    console.log('The file has been saved!');
});