207 lines
7.4 KiB
JavaScript
207 lines
7.4 KiB
JavaScript
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})">
|
||
<template v-if="showComponent(${schema})">
|
||
<SimpleFormItem v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
|
||
</template>
|
||
</Col>
|
||
`;
|
||
}
|
||
|
||
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`;
|
||
}
|
||
|
||
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!');
|
||
});
|