From 734c1db3029fa2086427bcec7131e7332bf02e90 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Tue, 2 Apr 2024 18:10:48 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E6=97=A7=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=94=B9=E4=B8=BAtab=E9=A1=B5=E6=89=93=E5=BC=80?=
 =?UTF-8?q?=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md          |  4 ++-
 docs/dev_readme.md | 72 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 docs/dev_readme.md

diff --git a/README.md b/README.md
index 088e3b7..299bc1e 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/docs/dev_readme.md b/docs/dev_readme.md
new file mode 100644
index 0000000..90f0e63
--- /dev/null
+++ b/docs/dev_readme.md
@@ -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); // 补上这一句
+});
+```