# 流程表单集成说明文档



## 脚手架应用中集成说明

提交表单集成代码示例

```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)



