docs: 增加从列表新建流程的案例

This commit is contained in:
gaoyunqi
2024-05-28 21:11:13 +08:00
parent 0f1ffa6261
commit 5e85ad2c2f

View File

@ -254,6 +254,7 @@ export default {
},
onCascadeChange: function (value, selectedOptions) {
// 将级联选择器的文字和值分别赋值到2个字段保存
this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
},
@ -266,3 +267,67 @@ export default {
};
</script>
```
## 如何在新建流程时,从其他表单带数据过来
这里的例子是从列表创建单据,其余的场景可以参考此修改。
首先在模版里加入新建单据的按钮:
```vue
<template #toolbar>
<template v-for="button in tableButtonConfig" :key="button.code">
<!-- 无关代码隐藏 -->
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
</a-button>
<a-button v-else type="primary">
</a-button>
</template>
<a-button @click="goCreateFlow()"> 创建入库单 </a-button>
</template>
```
你也可以通过修改buttonConfigs和actionButtons代码里是互补关系不在行动作actionButtons里的就在顶部动作条实现但是我认为没必要自定义开发直接改模版是最简单最快的。
然后修改useTable的参数
```javascript
const [registerTable, { reload, getSelectRows }] = useTable({
rowSelection: {
type: 'radio' //check为多选具体选项可以参考antd vue文档
}
});
```
然后补完goCreateFlow的内容
```javascript
function goCreateFlow() {
const selectedRows = getSelectRows();
if (!selectedRows.length) {
return createMessage.error('请选择用于发起入库的单据');
}
// 这里当然可以把整行的数据放到localStorage但是为了外链以及通用性最好还是把id通过路由传过去表单那边再查
router.push({
path: '/flow/1782662600422658049/0/createFlow',
query: {
fromIds: selectedRows.map((row) => row.id).join(',')
}
});
}
```
最后在目标表单的Form.vue中补充赋值操作
```javascript
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(async () => {
try {
// 无关代码已经隐藏如果你是用localStorage获取数据别忘了取值后清掉内容
const fromIds = router.currentRoute.value.query?.fromIds;
if(fromIds){
// 假装是在加载数据
setTimeout(()=>{
setFieldsValue({
yuanYin6568: fromIds
})
}, 1000)
}
emits('form-mounted', formProps);
} catch (error) {}
});
```