docs: 修正二开文档关于自定义字段的部分，补充onchange事件
This commit is contained in:
gaoyunqi
@ -20,7 +20,23 @@
|
|||||||
|
|
||||||
两种方法表单设计器支持内容一致，也都支持流程，差别只是UI方面。建议在设计业务模块优先使用代码模版。
|
两种方法表单设计器支持内容一致，也都支持流程，差别只是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页跳转，或者升级旧版框架的页面，可以参考下面步骤：
|
如果你需要自己编程实现Tab页跳转，或者升级旧版框架的页面，可以参考下面步骤：
|
||||||
```typescript
|
```typescript
|
||||||
const { currentRoute } = useRouter();
|
const { currentRoute } = useRouter();
|
||||||
@ -82,7 +98,7 @@ onMounted(async () => {
|
|||||||
emits('form-mounted', formProps); // 补上这一句
|
emits('form-mounted', formProps); // 补上这一句
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
## 如何修改选项卡标题
|
### 如何修改选项卡标题
|
||||||
```javascript
|
```javascript
|
||||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
@ -97,7 +113,7 @@ tabStore.changeTitle(fullPath, `选项卡标题`);
|
|||||||
tabStore.closeTab(currentRoute, router);
|
tabStore.closeTab(currentRoute, router);
|
||||||
```
|
```
|
||||||
|
|
||||||
## 如何在表单二开中自定义布局
|
### 如何在表单二开中自定义布局
|
||||||
```vue
|
```vue
|
||||||
<Col v-if="getIfShow2('d7fxx515')" v-show="getIsShow2('d7f2xx515')" :span="getColWidth(schemaMap['d7fxx515'])">
|
<Col v-if="getIfShow2('d7fxx515')" v-show="getIsShow2('d7f2xx515')" :span="getColWidth(schemaMap['d7fxx515'])">
|
||||||
</Col>
|
</Col>
|
||||||
@ -109,7 +125,7 @@ tabStore.closeTab(currentRoute, router);
|
|||||||
<div style="width: 100%"></div>
|
<div style="width: 100%"></div>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 如何添加自定义校验
|
### 如何添加自定义校验
|
||||||
可以在config.ts中定义，componentProps里默认有空的rules数组，可以自己添加，antd vue所有支持的校验都可以在这里使用。
|
可以在config.ts中定义，componentProps里默认有空的rules数组，可以自己添加，antd vue所有支持的校验都可以在这里使用。
|
||||||
```javascript
|
```javascript
|
||||||
{
|
{
|
||||||
@ -122,84 +138,12 @@ tabStore.closeTab(currentRoute, router);
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
## 如何设置字段联动
|
### 如何设置数据源字段联动
|
||||||
编辑器中选择Api即可配置字段联动，只要在magic-api配置参数即可，参数值可以直接选择表单或者明细表字段。
|
编辑器中选择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