docs: 调整拆分表单的文档

This commit is contained in:
gaoyunqi
2024-06-08 10:22:20 +08:00
parent c45680c2ac
commit 7f8f232e28
3 changed files with 103 additions and 76 deletions

View File

@ -90,82 +90,6 @@ 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>
// 注意这里继承的是SimpleFormSetup使用sciprt setup写法的组件无法继承必须使用特别的版本
import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.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: [SimpleFormSetup],
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