feat: 响应式布局支持字段换行
docs: 增加表单二开说明
This commit is contained in:
gaoyunqi
@ -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>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user