docs: 修正二开文档关于自定义字段的部分，补充onchange事件
This commit is contained in:
gaoyunqi
@ -20,7 +20,23 @@
|
||||
|
||||
两种方法表单设计器支持内容一致，也都支持流程，差别只是UI方面。建议在设计业务模块优先使用代码模版。
|
||||
|
||||
## 在Tab页中打开表单/流程
|
||||
### 如何定义onChange/blur事件
|
||||
|
||||
所有的事件都在字段的events中，如change、blur，没有on，主表单的函数定义为
|
||||
```javascript
|
||||
function change(schema, formModel, formApi, { formData }) {
|
||||
|
||||
}
|
||||
```
|
||||
明细表的函数参数定义为
|
||||
```javascript
|
||||
function change({ column, row, rowIndex, formModel }) {
|
||||
|
||||
}
|
||||
```
|
||||
这两个定义的formModel都可以取到全部表单的值，也可以赋值做修改。
|
||||
|
||||
### 如何在Tab页中打开表单/流程
|
||||
如果你需要自己编程实现Tab页跳转，或者升级旧版框架的页面，可以参考下面步骤：
|
||||
```typescript
|
||||
const { currentRoute } = useRouter();
|
||||
@ -82,7 +98,7 @@ onMounted(async () => {
|
||||
emits('form-mounted', formProps); // 补上这一句
|
||||
});
|
||||
```
|
||||
## 如何修改选项卡标题
|
||||
### 如何修改选项卡标题
|
||||
```javascript
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||
import { useRouter } from 'vue-router';
|
||||
@ -97,7 +113,7 @@ tabStore.changeTitle(fullPath, `选项卡标题`);
|
||||
tabStore.closeTab(currentRoute, router);
|
||||
```
|
||||
|
||||
## 如何在表单二开中自定义布局
|
||||
### 如何在表单二开中自定义布局
|
||||
```vue
|
||||
<Col v-if="getIfShow2('d7fxx515')" v-show="getIsShow2('d7f2xx515')" :span="getColWidth(schemaMap['d7fxx515'])">
|
||||
</Col>
|
||||
@ -109,7 +125,7 @@ tabStore.closeTab(currentRoute, router);
|
||||
<div style="width: 100%"></div>
|
||||
```
|
||||
|
||||
## 如何添加自定义校验
|
||||
### 如何添加自定义校验
|
||||
可以在config.ts中定义，componentProps里默认有空的rules数组，可以自己添加，antd vue所有支持的校验都可以在这里使用。
|
||||
```javascript
|
||||
{
|
||||
@ -122,84 +138,12 @@ tabStore.closeTab(currentRoute, router);
|
||||
]
|
||||
}
|
||||
```
|
||||
## 如何设置字段联动
|
||||
### 如何设置数据源字段联动
|
||||
编辑器中选择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 = SimpleFormSetup.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) {
|
||||
// 将级联选择器的文字和值分别赋值到2个字段保存
|
||||
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>
|
||||
```
|
||||
|
||||
## 如何在新建流程时，从其他表单带数据过来
|
||||
### 如何在新建流程时，从其他表单带数据过来
|
||||
这里的例子是从列表创建单据，其余的场景可以参考此修改。
|
||||
|
||||
首先在模版里加入新建单据的按钮：
|
||||
|
||||
66
docs/表单二开/5_自定义表单字段.md
Normal file
66
docs/表单二开/5_自定义表单字段.md
Normal file
@ -0,0 +1,66 @@
|
||||
# 如何在表单二开中定义字段
|
||||
首先，需要按照文档**1_拆分表单**将表单拆开，分解成独立字段。
|
||||
|
||||
下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
|
||||
```vue
|
||||
<!-- 非SimpleFormItem的组件需要自己包一层FormItem才有标准表单样式 -->
|
||||
<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
|
||||
<!-- 实际存储值的是a-input，因为取值是校验方法的返回值，非antd表单组件无法取到值 -->
|
||||
<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) {
|
||||
// 参考表单拆分，这里省略
|
||||
},
|
||||
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) {
|
||||
// 将级联选择器的文字和值分别赋值到2个字段保存
|
||||
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