docs: 补充旧表单改为tab页打开的逻辑
This commit is contained in:
@ -2,8 +2,10 @@
|
||||
如果你遇到了下面问题,包括对话框无法关闭、列表错乱/卡住/无法打开等奇怪问题,请检查node_modules/vue的版本,如果是3.4.x,由于antd-vue的要求,需要降级后使用。
|
||||
或者使用yarn重新安装依赖,项目里的yarn.lock为3.2.40版本。
|
||||
|
||||
建议先阅读docs/dev_readme.md下的内容
|
||||
|
||||
## 路由配置
|
||||
为了符合UI规范的要求,框架对流程表单页面的布局进行了定制开发,对于新系统需要手动创建菜单
|
||||
为了符合UI规范的要求,框架对流程表单页面的布局进行了定制开发,对于新系统需要**手动创建**菜单
|
||||
### 待办列表
|
||||
- 组件名称 FlowListPage2
|
||||
- 路由地址 /flowList/todo
|
||||
|
||||
72
docs/dev_readme.md
Normal file
72
docs/dev_readme.md
Normal file
@ -0,0 +1,72 @@
|
||||
## 注意事项
|
||||
### 设计相关
|
||||
- 一个表单只能绑定一个流程,一个流程也只能绑定一个表单,虽然框架支持单流程带多表单,但是我们在代码中屏蔽了这部分设计,如果表单内容较多,建议以子流程、tab页、分区等方式合理显示。
|
||||
- 一旦某表单绑定了流程,该表单就只能以绑定流程的方式使用(展示一个流程的纯表单部分无意义,用户一定是想和流程一起查看或者审批)
|
||||
- 流程草稿在单据列表里不会显示(草稿箱中可以找到),这是延续老系统的设计,不属于bug
|
||||
- 因为代码生成器的特殊性,建议在设计的时候尽可能完善,或者预留某些字段,隐藏起来以便需求调整,开发者需要评估重新生成代码与自行添加字段的工作量
|
||||
### 界面与用户体验
|
||||
- 设计器支持响应式布局,因为设计器架构问题,并未默认打开,对于表单内字段,除了附件、多行文本框等占用宽度较大的组件外,都建议开启响应式布局
|
||||
- 表单和表格需要合理调整字段宽度,响应式布局下需要使用定宽模式,一般情况下,字段的宽度取平均字长 + 2个汉字的宽度为宜,不要留太长的label,也要避免出现label换行
|
||||
|
||||
## 在Tab页中打开表单/流程
|
||||
如果你需要自己编程实现Tab页跳转,或者升级旧版框架的页面,可以参考下面步骤:
|
||||
```typescript
|
||||
const { currentRoute } = useRouter();
|
||||
// 获取表单的绑定的流程 schemaId通过菜单中的路由参数给出
|
||||
const schemaIdComputedRef = computed(() => currentRoute.value.meta.schemaId as string);
|
||||
//处理新增逻辑
|
||||
function handleAdd(){
|
||||
if (schemaIdComputedRef.value) {
|
||||
router.push({
|
||||
path: '/flow/' + schemaIdComputedRef.value + '/0/createFlow'
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
path: '/form/bizoutapply/0/createForm',
|
||||
query: {
|
||||
formPath: 'dev/bizoutapply' //这里是表单的所在目录
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 处理行的双击逻辑,其他地方可以类似处理
|
||||
function dbClickRow(record) {
|
||||
const workflowData = record.workflowData || {};
|
||||
const { processId, taskIds, schemaId } = workflowData;
|
||||
if (schemaId && taskIds) {
|
||||
// 待办
|
||||
router.push({
|
||||
path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
|
||||
query: {
|
||||
taskId: taskIds[0]
|
||||
}
|
||||
});
|
||||
} else if (schemaId && !taskIds) {
|
||||
// 已审批的单子
|
||||
router.push({
|
||||
path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
|
||||
query: {
|
||||
readonly: 1,
|
||||
taskId: ''
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 非流程
|
||||
router.push({
|
||||
path: '/form/overtimeapply/' + record.id + '/viewForm',
|
||||
query: {
|
||||
formPath: 'dev/overtimeapply' // 模块路径也要跟着改
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
同时,因为外层封装页面需要表单加载后的元数据,需要通过事件将表单数据传出。
|
||||
```javascript
|
||||
// 这行是原来有的
|
||||
import { formProps, formEventConfigs } from './config';
|
||||
|
||||
onMounted(async () => {
|
||||
emits('form-mounted', formProps); // 补上这一句
|
||||
});
|
||||
```
|
||||
Reference in New Issue
Block a user