docs: 调整拆分表单的文档
This commit is contained in:
@ -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
|
||||
|
||||
Reference in New Issue
Block a user