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

docs: 二开自动拆分脚本支持明细表

Browse Source
This commit is contained in:
gaoyunqi
2024-06-13 18:42:34 +08:00
parent 1ed4b6f5d4
commit a9d3fe6943
3 changed files with 220 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
dev_tools/formprops.js
View File

@ -1,391 +0,0 @@
module.exports = {
labelCol: { span: 3, offset: 0 },
labelAlign: 'right',
layout: 'horizontal',
size: 'default',
schemas: [
{
key: '95b6f464a9604b238ef8722db5d4878c',
field: 'ziDuan16563',
label: '字段1',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: true,
respNewRow: false,
placeholder: '请输入字段1',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
style: { width: '100%' },
},
},
{
key: 'd7f295f12d2a4ec7863099d875b95515',
field: 'ziDuan28273',
label: '字段2',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: true,
respNewRow: false,
placeholder: '请输入字段2',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
style: { width: '100%' },
},
},
{
key: '37d86747f1e64aae874f13f29a5697f3',
field: 'ziDuan35193',
label: '字段3',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: true,
respNewRow: false,
placeholder: '请输入字段3',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
respBreakLine: true,
style: { width: '100%' },
},
},
{
key: 'fa04ee3d955a4659be18331be1819601',
field: 'ziDuan45516',
label: '字段4',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: true,
respNewRow: false,
placeholder: '请输入字段4',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
style: { width: '100%' },
},
},
{
key: '9dcd8c7ac1e54acd8cee285274b82b0d',
field: 'ziDuan55031',
label: '字段5',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
respNewRow: false,
placeholder: '请输入字段5',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
style: { width: '100%' },
},
},
{
key: 'a4b8975a9b2f4fda84dbc88cdd2bcfb7',
field: 'jiLianBenTi7352',
label: '级联本体',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: true,
respNewRow: false,
placeholder: '请输入级联本体',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
style: { width: '100%' },
},
},
{
key: 'a2e8519113f844c3a0ae489b2c8a09d0',
field: 'jiLianWenZi5194',
label: '级联文字',
type: 'input',
component: 'Input',
colProps: { span: 24 },
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
respNewRow: false,
placeholder: '请输入级联文字',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
style: { width: '100%' },
},
},
{
key: '506f9008790c4e72843910da7c36b2d8',
field: '',
label: '标题',
type: 'title',
component: 'Title',
colProps: { span: 24 },
defaultValue: '明细表',
componentProps: {
defaultValue: '明细表',
color: '',
align: 'left',
fontSize: 18,
isShow: true,
style: {},
},
},
{
key: '25a93adbfba647b2a5398221d2a35952',
label: '表格组件',
field: 'cascadeDemoChild5561List',
type: 'form',
component: 'SubForm',
required: true,
colProps: { span: 24 },
componentProps: {
mainKey: 'cascadeDemoChild5561List',
columns: [
{
key: 'af2057f5fa774ec29f91b2114c4af4f7',
title: '列1',
dataIndex: 'lie19747',
componentType: 'Input',
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
respNewRow: false,
placeholder: '请输入列1',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
},
},
{
key: 'd02e0e1df55249e6a42964143f2d2b48',
title: '级联本体',
dataIndex: 'jiLianBenTi9627',
componentType: 'Input',
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
respNewRow: false,
placeholder: '请输入级联本体',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
},
},
{
key: '07ea250f2eb84680a01692b078e1d1cc',
title: '级联文字',
dataIndex: 'jiLianWenZi9294',
componentType: 'Input',
defaultValue: '',
componentProps: {
width: '100%',
span: '',
defaultValue: '',
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
respNewRow: false,
placeholder: '请输入级联文字',
maxlength: null,
prefix: '',
suffix: '',
addonBefore: '',
addonAfter: '',
disabled: false,
allowClear: false,
showLabel: true,
required: false,
rules: [],
events: {},
isSave: false,
isShow: true,
scan: false,
},
},
{ title: '操作', key: 'action', fixed: 'right', width: '50px' },
],
span: '24',
preloadType: 'api',
apiConfig: {},
itemId: '',
dicOptions: [],
useSelectButton: false,
buttonName: '选择数据',
showLabel: false,
showComponentBorder: true,
showFormBorder: true,
showIndex: false,
isShow: true,
multipleHeads: [],
},
},
],
showActionButtonGroup: false,
buttonLocation: 'center',
actionColOptions: { span: 24 },
showResetButton: false,
showSubmitButton: false,
hiddenComponent: [],
};

82
dev_tools/template_extend.js
View File

@ -1,6 +1,10 @@
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');
@ -31,7 +35,10 @@ if (fs.existsSync(filePath)) {
let tmpl = '';
let tabCount = 0;
let tableCount = 0;
const refList = [];
const importList = [];
const components = [];
// 用于将config的表单格式展开成字段，以便二开
formProps.schemas.forEach((prop) => {
@ -41,6 +48,7 @@ formProps.schemas.forEach((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) => {
@ -54,9 +62,10 @@ function appendTmpl(prop) {
appendTableLayoutTmpl(prop);
} else if (prop.component == 'Card') {
appendCardTmpl(prop);
} else if (prop.component == 'SubForm') {
return appendSubFormTmpl(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}" />
@ -65,6 +74,34 @@ function appendTmpl(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})">
<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;
@ -82,28 +119,28 @@ function appendTabTmpl(prop) {
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 += `<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 += `</div>`;
tmpl += ` </div>`;
tmpl += ` </template>`;
tmpl += `</TableLayoutPreview>`;
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}">`;
tmpl += `<CollapseContainer :bordered="false" :hasLeftBorder="true" title="${prop.componentProps.title}">\n`;
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}" />`;
appendTmpl(lChild);
});
tmpl += `</CollapseContainer>`;
tmpl += `</CollapseContainer>\n`;
}
const fullVue = `
@ -132,11 +169,20 @@ const fullVue = `
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: {
CheckCircleOutlined,
Form,
Col,
SimpleFormItem,
Row,
FormItem,
${components.join('\n')}
},
mixins: [SimpleFormSetup],
setup(props, ctx) {
const ret = SimpleFormSetup.setup(props, ctx);
@ -200,7 +246,7 @@ const fullVue = `
</script>
`;
fs.writeFile('./template.vue', fullVue, (err) => {
fs.writeFile('./CustomDevForm.vue', fullVue, (err) => {
if (err) throw err;
console.log('The file has been saved!');
});

156
dev_tools/templates.js Normal file
View File

@ -0,0 +1,156 @@
const subFormTmpl = `
<template>
<div class="form-detail-table">
<a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
<template #summary>
<a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
<a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
<a-typography-text v-if="column.componentProps?.subTotal" keyboard> {{ t('合计：') }} {{ sum(data.map((x) => x[column.dataIndex])) }}</a-typography-text>
</a-table-summary-cell>
</a-table-summary-row>
</template>
<template #bodyCell="{ column, record, index }">
<template v-if="column.key !== 'action'">
<template v-if="column.key === 'index'">
{{ index + 1 }}
</template>
<FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
<!---如果是checked一类的组件-->
<template v-if="checkedValueComponents.includes(column.componentType)">
<component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
</template>
<!---如果是RangePicker组件-->
<template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
<component
:is="componentMap.get(column.componentType)"
v-model:endField="column.dataIndex.split(',')[1]"
v-model:startField="column.dataIndex.split(',')[0]"
v-model:value="record[column.dataIndex]"
:bordered="showComponentBorder"
:mainKey="mainKey"
:tableIndex="index"
v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
@change="handleRangePickerChange(record, column.dataIndex)"
/>
</template>
<!---如果是渲染函数组件-->
<template v-else-if="column.componentType === 'Render'">
<component
:is="
column.render({
model: record,
field: column.dataIndex,
rules: column.rules,
componentProps: getComponentsProps(column.componentProps, column.dataIndex, record, index)
})
"
:bordered="showComponentBorder"
/>
</template>
<template v-else-if="column.key !== 'index'">
<component
:is="componentMap.get(column.componentType)"
v-model:value="record[column.dataIndex]"
:bordered="showComponentBorder"
:index="index"
:mainKey="mainKey"
:key="column.dataIndex + record['_key_']"
:row="record"
v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
@blur="onFieldBlur(column, record, index)"
@change="onFieldChange(column, record, index)"
/>
</template>
</FormItem>
</template>
<template v-if="column.key === 'action' && !disabled">
<MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
</template>
</template>
</a-table>
<div class="tbl-toolbar">
<a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
{{ buttonName }}
</a-button>
<a-button v-if="!disabled && !disableAddRow && useAddButton" type="primary" @click="add">
<PlusOutlined />
{{ t('新增') }}
</a-button>
</div>
<FormItemRest>
<MultipleSelect
ref="MultipleSelectRef"
v-model:multipleDialog="multipleDialog"
:apiConfig="apiConfig"
:datasourceType="preloadType"
:dicOptions="dicOptions"
:isSubFormUse="true"
:params="{ itemId }"
popupType="preload"
@submit="renderSubFormList"
/>
</FormItemRest>
</div>
</template>
<script>
import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
export default {
extends: SubFormV2Setup,
setup(props, ctx) {
const ret = SubFormV2Setup.setup(props, ctx);
return {
...ret
};
}
};
</script>
`;
const subFormItem = `
<template>
<!-- formitem的标题一般不用，如果不需要控制明细表的权限显隐，这个formitem可以去掉，或者用div代替 -->
<FormItem
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:labelAlign="formProps?.labelAlign"
:name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<!-- 这里原先是component is写法，现在需要换成你自己的明细表 -->
<!-- 也可以根据v-if渲染不同表格，这样就不需要定义很多次FormItem了 -->
<custom-dev-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';
export default {
extends: SimpleFormItemSetup,
components: {
CustomDevSubForm
},
setup(props, ctx) {
const ret = SimpleFormItemSetup.setup(props, ctx);
return {
...ret
};
}
};
</script>
`;
module.exports = {
subFormTmpl,
subFormItem
}