feat: 增加流程表单集成说明文档

流程系统集成/流程表单集成说明文档.md

+# 流程表单集成说明文档
+
+
+
+## 脚手架应用中集成说明
+
+提交表单集成代码示例
+
+```vue
+<script>
+import BpmCtrl from '@/mixins/BpmCtrl'
+export default {
+    mixins: [BpmCtrl],
+    data() {
+        return {
+            bpm: {
+                // 当前表单支持的流程表单状态
+                matchFormStatus: ['BPM_SUBMIT']
+            }
+        }
+    },
+    methods: {
+        // 定义流程执行方法
+        bpmSubmit(callback) {
+            this.submit(callback)
+        },
+        // 业务数据提交方法
+        submit(callback) {
+            let data = {}
+            this.$http.post(url, data)
+            .then(res => {
+                if (res.success) {
+                    // 成功需要提交数据返回的id
+                    callback(res.data)
+                    return
+                } else {
+                    // 失败返回一个对象， 对象中如果存在error则表示接口出错
+                    callback({
+                        error: res.message
+                    })
+                }
+                // 
+            }).catch(error => {
+                callback({ error })
+            })
+        }
+    }
+}
+<script>
+```
+
+
+
+编辑表单集成代码示例
+
+```vue
+<script>
+import BpmCtrl from '@/mixins/BpmCtrl'
+export default {
+    mixins: [BpmCtrl],
+    data() {
+        return {
+            id: '',
+            bpm: {
+                // 当前表单支持的流程表单状态
+                matchFormStatus: ['BPM_EDIT']
+            }
+        }
+    },
+    created() {
+        // bpm系统默认会通过url传递id参数。
+        // this.id = this.$route.query.id
+        // ...
+    },
+    methods: {
+        /**
+        * 定义流程执行方法 可以直接使用返回Promise， 则不需要业务代码中做其他loading和返回处理
+        * Promise 成功接收数据格式如下
+        * {
+        *   success: true, // 返回表示成功
+        *   data: 'id' // 返回id的数据
+        * }
+        */
+        bpmSubmit(callback) {
+            const data = this.getSubmitData()
+            return this.$http.post(url, data)
+        },
+        // 获取提交数据
+        getSubmitData() {
+            const data = {}
+            // ...处理数据
+            return data
+        }
+    }
+}
+<script>
+```
+
+
+
+详情表单集成代码示例
+
+```vue
+<script>
+import BpmCtrl from '@/mixins/BpmCtrl'
+export default {
+    mixins: [BpmCtrl],
+    data() {
+        return {
+            id: '',
+            bpm: {
+                // 当前表单支持的流程表单状态
+                matchFormStatus: ['BPM_DETAIL']
+            }
+        }
+    },
+    created() {
+        // 需要接收id参数来获取表单数据
+        // this.id = this.$route.query.id
+    },
+    methods: {
+        // 详情模式只是查看数据，不需要定义方法
+    }
+}
+<script>
+```
+
+
+
+结合表单代码示例
+
+```vue
+<script>
+import BpmCtrl from '@/mixins/BpmCtrl'
+export default {
+    mixins: [BpmCtrl],
+    data() {
+        return {
+            bpm: {
+                // 当前表单支持的流程表单状态
+                BPM_SUBMIT: {
+                    submitFun: 'submitAdd',
+                },
+                BPM_EDIT: {
+                    submitFun: 'submitEdit'
+                },
+                BPM_DETAIL: {
+                    
+                },
+                matchFormStatus: ['BPM_SUBMIT', 'BPM_EDIT', 'BPM_DETAIL']
+            }
+        }
+    },
+    methods: {
+        getSubmitData() {
+            const data = {}
+            // ... 获取数据
+            return data
+        },
+        // 定义提交表单方法
+        submitAdd() {
+            const data = this.getSubmitData()
+            return this.$http.post(url, data)
+        },
+        // 定义编辑表单方法
+        submitEidt() {
+            const data = this.getSubmitData()
+            return this.$http.post(url, data)
+        },
+    }
+}
+<script>
+```
+
+
+
+表单配置模式示例
+
+集成状态说明
+
+- 支持 `BPM_SUBMIT`  `BPM_DETAIL`  `BPM_EDIT`  三种模式
+- `includeFormStatus` 表示当前页面支持那种模式表单， 如果不支持的话则默认全部禁用， 按钮隐藏。
+- 状态说明
+  1. 提交状态默认隐藏按钮 (隐藏规则根据类名'el-button')
+  2. 编辑状态默认隐藏按钮 (隐藏规则根据类名'el-button')
+  3. 详情状态默认禁用当前页面(**当前页面不能点击**)  隐藏按钮 设置部分`el-input el-select `等控件禁用状态
+
+```vue
+<template>
+ 	<el-form>
+     	<!-- ... -->
+        <span calss="btn-hidden" @click="openDlg">打开对话框<span>
+        <el-button calss="btn-show" @click="lookView">查看视图</el-button>
+    </el-form>
+</template>
+<script>
+/**
+* bpm 状态对象中各种状态内的属性说明
+* hidden： 需要隐藏的类名
+* disabled： 需要禁用的类名
+* excludeClassName: 默认隐藏或者禁用中排除掉元素的类名
+**/
+import BpmCtrl from '@/mixins/BpmCtrl'
+export default {
+    mixins: [BpmCtrl],
+    data() {
+        return {
+            bpm: {
+                // 当前表单支持的流程表单状态
+                BPM_SUBMIT: {
+                    // 在提交模式下隐藏指定
+                    hidden: 'btn-hidden',
+                    // 在提交模式下默认隐藏按钮和禁用的控件中排除指定类名的元素
+                    excludeClassName: 'btn-show',
+                    // 自定义提交的方法。 当bpm状态为提交时候则自动触发此方法。
+                    submitFun: 'submitAdd',
+                },
+            }
+        }
+    },
+    created() {
+    },
+    methods: {
+        // 打开一个对话框
+        openDlg() {
+             
+        },
+        // 查看某个数据
+        lookView() {
+ 
+        },
+        getSubmitData() {
+            const data = {}
+            // ... 获取数据
+            return data
+        },
+        // 定义提交表单方法
+        submitAdd() {
+            const data = this.getSubmitData()
+            return this.$http.post(url, data)
+        }
+    }
+}
+<script>
+```
+
+自定义集成方案
+
+> 当使用自定义模式时候, 将不会默认禁用和隐藏元素，
+>
+> 需要根据`formStatus` 状态来自动处理元素
+
+```vue
+<script>
+    import BpmCtrl from '@/mixins/BpmCtrl' 
+    export defult() {
+        mixins: [BpmCtrl],
+		data() {
+            return {
+                bpm: {
+                    mode: 'custom'
+                }
+            }
+        },
+        methods: {
+            /**
+            * 引入BpmCtrl后会自动设置当前表单状态formStatus
+            * 通过this.formStatus 来判断状态来处理页面显示逻辑
+            **/
+            init() {
+                // ... this.formStatus
+                if (this.formStatus === 'BPM_SUBMIT') {
+                    // ...提交表单的处理
+                } else if (this.formStatus === 'BPM_EDIT') {
+                    // ... 编辑表单的处理
+                } else if (this.formStatus === 'BPM_DETAIL') {
+                    // ... 详情表单的处理
+                }
+            },
+            bpmSubmit() {
+                // ... 实现提交方法，进行接口数据操作
+            }
+        }
+    }
+</script>
+
+```
+
+
+
+## bpm流程系统集成配置说明
+
+### 创建应用
+
+进入应用管理页面，创建应用
+
+![1612505975821](./images/01进入应用管理页面.png)
+
+ 点击新增
+
+>前端应用名:  配置别名
+>
+>前端应用路径: 集成应用的路径地址， 例如显示应用地址访问为`http:xxx.com/demo` 那么路径地址就需要配置成demo,
+
+![1612506169033](./images/02创建应用.png)
+
+### 新建表单
+
+进入到表单管理页面
+
+![1612506766789](./images/03进入表单管理页面.png)
+
+创建绑定
+
+![1612506968167](./images/04新增表单.png)
+
+![1612507030908](C:\code\ldp-docs\流程系统集成\images\05新增表单(提交表单).png)
+
+![1612507062998](./images/06新增表单(编辑详情表单).png)
+
+表单新增完成
+
+![1612507116968](./images/07新增表单完成.png)
+
+### 绑定表单
+
+进入到流程定义页面
+
+![1612507242398](./images/08进入流程定义页面.png)
+
+ 在需要设置的流程定义上绑定表单
+
+![1612507288751](./images/09绑定表单.png)
+
+选择对应的表单确认绑定表单
+
+![1612507397313](./images/10绑定表单(确认选择).png)
+
+
+