docs: 二开自动拆分脚本支持明细表
This commit is contained in:
gaoyunqi
@ -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: [],
|
|
||||||
};
|
|
||||||
@ -1,6 +1,10 @@
|
|||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const filePath = path.join(process.cwd(), 'config.ts');
|
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)) {
|
if (fs.existsSync(filePath)) {
|
||||||
console.log('Reading ' + filePath);
|
console.log('Reading ' + filePath);
|
||||||
const file = fs.readFileSync(filePath, 'utf-8');
|
const file = fs.readFileSync(filePath, 'utf-8');
|
||||||
@ -31,7 +35,10 @@ if (fs.existsSync(filePath)) {
|
|||||||
|
|
||||||
let tmpl = '';
|
let tmpl = '';
|
||||||
let tabCount = 0;
|
let tabCount = 0;
|
||||||
|
let tableCount = 0;
|
||||||
const refList = [];
|
const refList = [];
|
||||||
|
const importList = [];
|
||||||
|
const components = [];
|
||||||
|
|
||||||
// 用于将config的表单格式展开成字段，以便二开
|
// 用于将config的表单格式展开成字段，以便二开
|
||||||
formProps.schemas.forEach((prop) => {
|
formProps.schemas.forEach((prop) => {
|
||||||
@ -41,6 +48,7 @@ formProps.schemas.forEach((prop) => {
|
|||||||
function appendTmpl(prop) {
|
function appendTmpl(prop) {
|
||||||
let schema = `schemaMap['${prop.key}']`;
|
let schema = `schemaMap['${prop.key}']`;
|
||||||
// 栅格布局
|
// 栅格布局
|
||||||
|
tmpl += `<!-- ${prop.label || prop.field || prop.component} -->\n`;
|
||||||
if (prop.component == 'Grid') {
|
if (prop.component == 'Grid') {
|
||||||
prop.children.forEach((child) => {
|
prop.children.forEach((child) => {
|
||||||
child.list.forEach((listChild) => {
|
child.list.forEach((listChild) => {
|
||||||
@ -54,9 +62,10 @@ function appendTmpl(prop) {
|
|||||||
appendTableLayoutTmpl(prop);
|
appendTableLayoutTmpl(prop);
|
||||||
} else if (prop.component == 'Card') {
|
} else if (prop.component == 'Card') {
|
||||||
appendCardTmpl(prop);
|
appendCardTmpl(prop);
|
||||||
|
} else if (prop.component == 'SubForm') {
|
||||||
|
return appendSubFormTmpl(prop);
|
||||||
}
|
}
|
||||||
tmpl += `
|
tmpl += `
|
||||||
<!-- ${prop.label || prop.field || prop.component} -->
|
|
||||||
<Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
|
<Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
|
||||||
<template v-if="showComponent(${schema})">
|
<template v-if="showComponent(${schema})">
|
||||||
<SimpleFormItem v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${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) {
|
function appendTabTmpl(prop) {
|
||||||
let schema = `schemaMap['${prop.key}']`;
|
let schema = `schemaMap['${prop.key}']`;
|
||||||
tabCount += 1;
|
tabCount += 1;
|
||||||
@ -82,28 +119,28 @@ function appendTabTmpl(prop) {
|
|||||||
|
|
||||||
function appendTableLayoutTmpl(prop) {
|
function appendTableLayoutTmpl(prop) {
|
||||||
let schema = `schemaMap['${prop.key}']`;
|
let schema = `schemaMap['${prop.key}']`;
|
||||||
tmpl += `<TableLayoutPreview :element="${schema}">`;
|
tmpl += `<TableLayoutPreview :element="${schema}">\n`;
|
||||||
tmpl += ` <template #tdElement="{ tdElement }">`;
|
tmpl += ` <template #tdElement="{ tdElement }">\n`;
|
||||||
tmpl += ` <div class="h-full">`;
|
tmpl += ` <div class="h-full">\n`;
|
||||||
tmpl += `<div style="getTdStyle(tdElement)">`;
|
tmpl += `<div :style="getTdStyle(tdElement)">\n`;
|
||||||
prop.children.forEach((child) => {
|
prop.children[0].list.forEach((lChild) => {
|
||||||
let childSchema = `schemaMap['${child.key}']`;
|
lChild.children.forEach((child) => {
|
||||||
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}" />`;
|
appendTmpl(child);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
tmpl += `</div>`;
|
tmpl += `</div>\n`;
|
||||||
tmpl += ` </div>`;
|
tmpl += ` </div>\n`;
|
||||||
tmpl += ` </template>`;
|
tmpl += ` </template>\n`;
|
||||||
tmpl += `</TableLayoutPreview>`;
|
tmpl += `</TableLayoutPreview>\n`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function appendCardTmpl(prop) {
|
function appendCardTmpl(prop) {
|
||||||
let schema = `schemaMap['${prop.key}']`;
|
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) => {
|
prop.children[0].list.forEach((lChild) => {
|
||||||
const childSchema = `schemaMap['${lChild.key}']`;
|
appendTmpl(lChild);
|
||||||
tmpl += ` <SimpleFormItem v-model:value="formModel[${childSchema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${childSchema}" />`;
|
|
||||||
});
|
});
|
||||||
tmpl += `</CollapseContainer>`;
|
tmpl += `</CollapseContainer>\n`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const fullVue = `
|
const fullVue = `
|
||||||
@ -132,11 +169,20 @@ const fullVue = `
|
|||||||
import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
|
import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { CheckCircleOutlined } from '@ant-design/icons-vue';
|
import { CheckCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
${importList.join('\n')}
|
||||||
|
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { CheckCircleOutlined, Form, Col, SimpleFormItem, Row, FormItem },
|
components: {
|
||||||
|
CheckCircleOutlined,
|
||||||
|
Form,
|
||||||
|
Col,
|
||||||
|
SimpleFormItem,
|
||||||
|
Row,
|
||||||
|
FormItem,
|
||||||
|
${components.join('\n')}
|
||||||
|
},
|
||||||
mixins: [SimpleFormSetup],
|
mixins: [SimpleFormSetup],
|
||||||
setup(props, ctx) {
|
setup(props, ctx) {
|
||||||
const ret = SimpleFormSetup.setup(props, ctx);
|
const ret = SimpleFormSetup.setup(props, ctx);
|
||||||
@ -200,7 +246,7 @@ const fullVue = `
|
|||||||
</script>
|
</script>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
fs.writeFile('./template.vue', fullVue, (err) => {
|
fs.writeFile('./CustomDevForm.vue', fullVue, (err) => {
|
||||||
if (err) throw err;
|
if (err) throw err;
|
||||||
console.log('The file has been saved!');
|
console.log('The file has been saved!');
|
||||||
});
|
});
|
||||||
|
|||||||
156
dev_tools/templates.js
Normal file
156
dev_tools/templates.js
Normal 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
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user