docs: 增加从列表新建流程的案例
This commit is contained in:
@ -254,6 +254,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onCascadeChange: function (value, selectedOptions) {
|
onCascadeChange: function (value, selectedOptions) {
|
||||||
|
// 将级联选择器的文字和值分别赋值到2个字段保存
|
||||||
this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
|
this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
|
||||||
this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
|
this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
|
||||||
},
|
},
|
||||||
@ -266,3 +267,67 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</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) {}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user