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

feat: 响应式布局支持字段换行

Browse Source 
docs: 增加表单二开说明
This commit is contained in:
gaoyunqi
2024-05-27 21:42:48 +08:00
parent 631995de04
commit 4abd06c2a6
5 changed files with 601 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
dev_tools/formprops.js Normal file
View File

@ -0,0 +1,391 @@
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: [],
};

24
dev_tools/template_extend.js Normal file
View File

@ -0,0 +1,24 @@
const formProps = require('./formProps');
let tmpl = '';
// 用于将config的表单格式展开成字段，以便二开
formProps.schemas.forEach((prop) => {
let schema = `schemaMap['${prop.key}']`;
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>
`;
});
//write to file
const fs = require('fs');
fs.writeFile('./template.txt', tmpl, (err) => {
if (err) throw err;
console.log('The file has been saved!');
});