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!');
});

253
docs/dev_readme.md
View File

@ -76,83 +76,6 @@ onMounted(async () => {
emits('form-mounted', formProps); // 补上这一句
});
```
## 如何自定义表单字段
一般情况下，字段会和权限绑定，假设你已经解决了字段的权限问题（对于简单的数据结构，可以建一个纯文本字段，然后在前端换成自定义渲染的）。
首先我们定义一个组件，这里为了简单起见只用了一个文本框，一般情况下，你要实现v-model，同时接收disabled参数以处理只读模式。注意vue<3.4的版本并不支持defineModel。
```vue
<template>
<div class="custom-input">
<input style="width: 100%" v-if="!disabled" :value="props.modelValue" @change="onChange($event)" />
<span v-else style="color: #cc0000">{{ props.modelValue }}</span>
</div>
</template>
<style scoped>
input {
width: 100%;
border: 1px solid #cc0000;
line-height: 30px;
}
</style>
<script setup>
import {defineProps} from 'vue';
const props = defineProps(['modelValue', 'disabled'])
const emit = defineEmits(['update:modelValue'])
function onChange(event) {
emit('update:modelValue', event.target.value);
}
</script>
```
然后在表单页面Form.vue中引入该字段
```vue
<SimpleForm>
<template v-slot:addr="scope">
<FormItem :label-col="{style: {width: '120px'}}" label="出差地点">
<custom-field :disabled="scope.schema.dynamicDisabled" v-model="scope.formModel.chuChaDiDian3876"></custom-field>
</FormItem>
</template>
</SimpleForm>
```
这里需要注意的是，自定义字段中需要自行实现label部分，所以外层用了一个FormItem，如果你需要在表单中间独立成行，也可以去掉FormItem这层。
最后在config.ts中换掉字段的类型：
```javascript
export const formProps: FormProps = {
labelCol: { span: 3, offset: 0 },
labelAlign: 'right',
layout: 'horizontal',
size: 'default',
schemas: [
{
key: '783e504378024a2c9db35b9e741eb5c3',
field: 'chuChaDiDian3876',
label: '出差地点',
type: 'slot', // type和slotName需要换掉
slotName: 'addr' // 和template中的插槽名字对应
}
]
};
```
## 如何自定义列表页字段
列表页的字段定义比较简单，首先在columns中补充需要的列（或者替换已有的列），然后再bodyCell插槽里替换所需的部分接即可。
```vue
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<TableAction :actions="getActions(record)" />
</template>
<!-- 下面是要定制的列 --->
<template v-if="column.dataIndex === 'chuChaDiDian3876'">
<span style="color: #f00">{{record.chuChaDiDian3876}}</span>
</template>
</template>
```
注意，根据antd-vue的文档，bodyCell里除了要修改的列，不能写其他内容，否则会将内容覆盖到所有列上。
## 如何在按钮栏中刚增加按钮
## 如何修改选项卡标题
```javascript
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
@ -167,3 +90,179 @@ tabStore.changeTitle(fullPath, `选项卡标题`);
// 顺便tabStore也支持关闭选项卡
tabStore.closeTab(currentRoute, router);
```
## 如何进行表单二开
首先，打开项目dev_tools/formprops.js，将其中的内容替换为模块config，注意nodejs不加参数必须用module.exports不能用export default写法。
然后执行template_extend.js，会在同目录生成template.txt，这个文件就是将config文件在第一层展开的模版内容。
接下来找到要二开的表单，在components目录里定义新建一个vue文件，然后用下面的内容初始化，这个文件实际上就是SimpleForm的继承，我们要用自己的模版覆盖掉原来的循环。由于不是每个字段都有dataIndex（如布局类、标题），使用数组展开在二次修改后会比较混乱，此处定义了映射表，可以通过key找到组件，同时简化了原来的两个函数。
```vue
<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">
<Row>
<!-- 把刚才template.txt的内容放到这里 -->
</Row>
<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>
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { Col, Form, Row } from 'ant-design-vue';
import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
const FormItem = Form.Item;
export default {
components: { Form, Col, SimpleFormItem, Row, FormItem },
mixins: [SimpleForm],
setup(props, ctx) {
const ret = SimpleForm.setup(props, ctx);
const schemaMap = {};
ret.getSchemas._value.forEach((schema) => {
schemaMap[schema.key] = schema;
});
return {
schemaMap,
...ret
};
},
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]);
}
}
};
</script>
```
找到components目录下的Form.vue，用我们自己的表单替换掉原来的SimpleForm（假设我们的文件为CascadeDemoForm.vue）：
```vue
<template>
<CascadedemoForm
ref="systemFormRef"
:formProps="data.formDataProps"
:formModel="{}"
:isWorkFlow="props.fromPage!=FromPageType.MENU"
/>
</template>
```
展开后的文件和原有表单一致，每个字段都已经拆开，因此可以自由使用v-if/v-show等进行显隐控制，以及在字段之间插入内容、做自动计算等。
**注：该展开方法不能用Grid、Tab等布局嵌套，如果需要，建议自行写代码套容器，不要用编辑器自带的布局组件。**
## 如何在表单二开中自定义布局
```vue
<Col v-if="getIfShow2('d7fxx515')" v-show="getIsShow2('d7f2xx515')" :span="getColWidth(schemaMap['d7fxx515'])">
</Col>
```
这段代码上的span就是控制字段占位的，满宽度位24，1/3为8，1/4为6，以此类推，我们强烈大家使用响应式布局，以免在屏幕过窄时影响显示效果。同样，响应式布局在编辑器里支持换行、独立成行。
如果在二开里要换行，可以用div包裹，也可以加一个空div强制换行
```html
<div style="width: 100%"></div>
```
## 如何添加自定义校验
可以在config.ts中定义，componentProps里默认有空的rules数组，可以自己添加，antd vue所有支持的校验都可以在这里使用。
```javascript
{
rules: [
{
min: 10,
max: 30,
message: '这个长度在10-30之间'
}
]
}
```
## 如何设置字段联动
编辑器中选择Api即可配置字段联动，只要在magic-api配置参数即可，参数值可以直接选择表单或者明细表字段。
选择字典没有效果。
## 如何在表单二开中定义字段
下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
```vue
<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
<a-input v-model:value="formModel.jiLianBenTi7352" style="display: none"/>
<!-- 当一个formitem里有多个表单字段时，不需要取值的用form-item-rest包起来 -->
<a-form-item-rest>
<a-cascader v-model:value="cascadeValue" :load-data="onCascadeLoad" :options="cascadeData" placeholder="请选择" @change="onCascadeChange">
<a href="#">{{ formModel.jiLianWenZi5194 || '请选择' }}</a>
</a-cascader>
</a-form-item-rest>
</FormItem>
```
这里特别注意下，因为cascade的值为数组，而数组在数据库是不能存储的，所以这里cascadeValue为数组值，a-input里存储的为逗号分开的id。
特别注意，FormItem在本框架里获取值依靠form的validate方法，因此FormItem里必须有**antd vue的表单元素**，如果为纯手动开发的组件，建议用一个a-input储存表单值。
脚本部分
```vue
<script>
export default {
setup(props, ctx) {
const ret = SimpleForm.setup(props, ctx);
const schemaMap = {};
const cascadeData = ref([]);
const cascadeValue = ref([]);
ret.getSchemas._value.forEach((schema) => {
schemaMap[schema.key] = schema;
});
return {
schemaMap,
cascadeData,
cascadeValue,
...ret
};
},
mounted() {
this.getCascadeData();
},
methods: {
getCascadeData: function (parent = {}) {
defHttp
.get({
url: '/system/dev-demo/cascade-data',
params: {
level: parent.level
}
})
.then((data) => {
if (!parent.level) {
this.cascadeData = data;
} else {
parent.children = data;
}
});
},
onCascadeChange: function (value, selectedOptions) {
this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
},
onCascadeLoad: function (selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1];
this.getCascadeData(targetOption);
}
}
};
</script>
```

8
src/components/Designer/src/components/componentProperty/PropertyOption.vue
View File

@ -59,6 +59,10 @@
<a-switch v-model:checked="data.options.showPagination" />
</a-form-item>
<a-form-item v-if="data.type === 'form' && data.options.showPagination" label="每页大小">
<a-input v-model:value="data.options.pageSize" placeholder="默认每页10条" />
</a-form-item>
<template v-if="data.options.useSelectButton">
<a-form-item :label="t('按钮名称')">
<a-input v-model:value="data.options.buttonName" :placeholder="t('请填写按钮名称')" />
@ -439,6 +443,10 @@
<a-switch v-model:checked="data.options.respNewRow" />
</a-form-item>
<a-form-item v-if="data.options.responsive" label="此组件换行">
<a-switch v-model:checked="data.options.respBreakLine" />
</a-form-item>
<a-form-item v-if="hasKey('labelWidthMode')" label="宽度模式">
<a-radio-group v-model:value="data.options.labelWidthMode" button-style="solid" size="small">
<a-radio-button value="flex">{{ t('百分比') }}</a-radio-button>

3
src/components/SimpleForm/src/SimpleForm.vue
View File

@ -4,11 +4,12 @@
<Row v-bind="getRow">
<template v-for="schema in getSchemas" :key="schema.field">
<Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
<div v-if="schema?.componentProps.respBreakLine" style="width: 100%; height: 1px"></div>
<template v-if="showComponent(schema) && schema.type !== 'slot'">
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
</template>
<template v-if="schema.type === 'slot'">
<slot :name="schema.slotName" :schema="schema" :formModel="formModel"></slot>
<slot :formModel="formModel" :name="schema.slotName" :schema="schema"></slot>
</template>
</Col>
</template>