@alanwang-merit/meritdata-platform-skill-package 1.0.0

package/skills/meritdata-dev-docs-file-finder/references/dev-docs//346/224/273/347/225/245-02-/345/267/245/344/275/234/346/265/201/347/250/213-/347/253/240/350/212/20206_/346/265/201/347/250/213/345/272/224/347/224/250/345/211/215/347/253/257/345/274/200/345/217/221.md

@@ -0,0 +1,1443 @@
+---
+name: 攻略-02-工作流程-章节06_流程应用前端开发
+description: 流程应用前端开发 — 美林平台 BPM 工作流程应用开发完整教程（工程创建 / 配置 / 业务类）
+keywords: [BPM, 工作流程, 开发教程, 工程创建, pom.xml, bootstrap.properties, 二开, 流程应用前端开发]
+use-cases: [从零创建 BPM 二开工程, 配置 nacos, 编写流程业务类]
+source-section: 5. 流程应用前端开发
+source-file: 应用开发平台-流程管理-使用攻略（二）：工作流程应用开发.md
+---
+
+# 5. 流程应用前端开发
+
+### 5.1 前置条件
+
+根据《应用开发平台使用攻略(一)：系统环境搭建》 的前端工程创建，进行前端工程搭建。
+
+创建 business-bpm-expense 工程应用
+
+### 5.2 前端工程配置
+
+#### 5.2.1 删除文件
+
+下图：是根据《应用开发平台使用攻略(一)：系统环境搭建》 的前端工程创建，所创建的 business-bpm-expense 工程应用
+
+![image](./imgs/流程应用开发/1-35.jpg)
+
+- 删除的文件如下：
+  - 1.删除 node_modules 文件夹
+  - 2.删除 src 文件夹下面的所有内容
+  - 3.删除.browserslistrc 文件
+  - 4.删除.eslintrc 文件
+  - 5.删除 package-lock.json 文件
+    注意：为避免出现不知名的错误,所以删除这些文件；在删除时，根据以上内容，没有找到某个文件，可以忽略此文件
+
+删除后的目录结构：
+
+![image](./imgs/流程应用开发/1-36.jpg)
+
+#### 5.2.2 修改 package.json 文件
+
+说明：
+package.json 文件是对项目或者模块包的描述，里面包含许多元信息，比如项目名称，项目版本，项目执行入口文件等。
+
+分别替换 package.json 文件中"dependencies" 和 "devDependencies" 内容
+添加："eslintConfig" 和 "browserslist"
+"dependencies"表示：生产环境下，项目运行所需依赖
+"devDependencies"表示：开发环境下，项目所需依赖
+
+```json
+{
+  "name": "business-bpm-expense",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "0.19.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-remove-strict-mode": "0.0.2",
+    "bpmn-js": "^6.4.0",
+    "cloud-module-bpm": "6.9.0",
+    "codemirror": "^5.52.2",
+    "core-js": "^3.4.4",
+    "css-loader": "^3.4.1",
+    "element-ui": "^2.13.2",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "moment": "^2.24.0",
+    "qs": "^6.9.1",
+    "vue": "^2.6.10",
+    "vue-axios": "^2.1.5",
+    "vue-i18n": "^8.15.3",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.2",
+    "webpack": "^4.41.5",
+    "webpack-chain": "^6.3.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": ["plugin:vue/essential", "eslint:recommended"],
+    "rules": {
+      "no-console": "off",
+      "no-": "off",
+      "no-undef": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": ["> 1%", "last 2 versions"]
+}
+```
+
+### 5.3 安装依赖
+
+打开终端 ： Ctrl+Shift+`
+
+![image](./imgs/流程应用开发/1-37.jpg)
+
+在终端输入:npm install 命令, 按 "Enter" 执行命令
+
+![image](./imgs/流程应用开发/1-38.jpg)
+
+注意：在项目根目录下执行 npm install
+
+nmp 命令
+
+```shell
+  npm install
+```
+
+安装成功后如下图：
+![image](./imgs/流程应用开发/1-39.jpg)
+
+安装 cloud-module-bpm
+
+平台组将流程的工具类进行封装至 cloud-module-bpm 插件，安装插件如果是公网环境需要将 npm 仓库切换至美林 npm 私服后进行插件的安装
+
+```shell
+   // 只有公网开发执行下面命令
+   npm config set registry http://123.139.156.125:8088/nexus/content/groups/npm-group/
+   
+   
+   npm install cloud-module-bpm@6.13.2
+```
+
+### 5.4 前端工程创建
+
+需要创建目录结构如下
+
+- src
+  - components
+    - common-header.vue
+    - no-access.vue
+  - httpConfig
+    - http.js
+  - pages
+    - expense
+      - i18n
+        - langs
+          - en_US.js
+          - index.js
+          - zh_CN.js
+        - i18n.js
+      - view
+        - form-edit.vue
+        - form-read.vue
+        - Grid.vue
+      - App.vue
+      - Index.vue
+      - main.js
+      - router.js
+- vue.config.js
+
+| 文件名        | 文件说明                                                  |
+| ------------- | --------------------------------------------------------- |
+| httpConfig    | http 配置文件目录                                         |
+| i18n          | 国际化配置目录                                            |
+| view          | 业务表单目录包括(form-edit.vue/form-read.vue/Grid.vue)    |
+| main.js       | 引入相关依赖，注入到 vue 全局和服务访问路径               |
+| router.js     | 路由跳转。配置跳转界面                                    |
+| vue.config.js | 程序编译打包信息配置 多页面管理、编译路径、后端代理配置等 |
+
+完整的目录结构如下：
+![](./imgs/流程应用开发/1-32.jpg)
+
+### 5.5 业务代码
+
+包含以下目录的完整代码
+
+- src
+  - components
+    - common-header.vue
+    - no-access.vue
+  - httpConfig
+    - http.js
+  - pages
+    - expense
+      - i18n
+        - langs
+          - en_US.js
+          - index.js
+          - zh_CN.js
+        - i18n.js
+      - view
+        - form-edit.vue
+        - form-read.vue
+        - Grid.vue
+      - App.vue
+      - Index.vue
+      - main.js
+      - router.js
+- vue.config.js
+
+#### 5.5.1 main.js 文件
+
+- main.js 中引入流程引擎
+
+```
+   import base from 'cloud-module-base';
+   import bpm from 'cloud-module-bpm';
+
+   Vue.use(base);
+   Vue.use(bpm);
+```
+
+- main.js 完整代码如下：
+
+```js
+import Vue from 'vue';
+import ElementUI from 'element-ui'; // 引入element-ui
+import i18n from './i18n/i18n'; // 引入国际化
+import 'cloud-module-base/static/theme/default/index.css';
+import 'cloud-module-base/static/theme/default/tempo.css';
+import App from './App.vue'; // 引入首页
+import router from './router'; // 引入路由
+import axios from '@/httpConfig/http'; // 引入http配置
+import VueAxios from 'vue-axios'; // 引入 axios
+import base from 'cloud-module-base'; // 引入基础的cloud-module-base相关依赖
+import bpm from 'cloud-module-bpm'; // 引入流程相关依赖
+// 使用Vue.use 加载到全局
+Vue.use(ElementUI);
+Vue.use(VueAxios, axios);
+Vue.use(base);
+Vue.use(bpm);
+Vue.prototype.HOST = '/api/travel-expense'; //服务访问路径
+Vue.prototype.EventBus = new Vue();
+new Vue({
+  router,
+  i18n,
+  render: h => h(App)
+}).$mount('#app');
+```
+
+#### 5.5.2 Index.vue 文件
+
+- 主页面 Index.vue 完整代码如下:
+
+```html
+<template>
+  <el-container class="el-root-container">
+    <el-header height="50px">
+      <v-header></v-header>
+    </el-header>
+    <el-container class="el-main-container">
+      <v-grid />
+    </el-container>
+  </el-container>
+</template>
+<script>
+  import grid from './view/Grid';
+  import header from '@/components/common-header';
+  export default {
+    data() {
+      return {
+        isCollapse: false,
+        containerStyle: {
+          height: '100%'
+        }
+      };
+    },
+    components: {
+      'v-grid': grid,
+      'v-header': header
+    },
+    created() {
+      this.containerStyle.height = window.innerHeight - 30 + 'px';
+    },
+    mounted() {},
+    methods: {}
+  };
+</script>
+<style scoped>
+  .el-aside {
+    width: 250px !important;
+  }
+</style>
+```
+
+#### 5.5.3 router.js 文件
+
+router.js 完整代码如下：
+
+- 说明
+  路由的跳转，跳转界面配置
+
+```js
+import Vue from 'vue';
+import Router from 'vue-router';
+import Index from './Index.vue';
+import FormEdit from './view/form-edit';
+import FormRead from './view/form-read';
+Vue.use(Router);
+//路由
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Index',
+      component: Index,
+      meta: {
+        keepAlive: true, // 需要缓存
+        savedPosition: 0,
+        title: 'exp.travlExpenselManagement'
+      }
+    },
+    {
+      path: '/formEdit',
+      name: 'formEdit',
+      component: FormEdit
+    },
+    {
+      path: '/formRead',
+      name: 'formRead',
+      component: FormRead
+    }
+  ]
+});
+```
+
+#### 5.5.4 App.vue 文件
+
+完整代码如下:
+
+```html
+<template>
+  <div id="app">
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'App'
+  };
+</script>
+<style lang="less">
+  html,
+  body {
+    height: 100%;
+  }
+</style>
+```
+
+#### 5.5.5 i18n 文件夹
+
+说明:
+在 il8n->langs->en_US.js 和 zh_CN.js 中修改 impot 路径为
+目的是加载流程相关的 zh_CN.js 和 en_US.js
+
+```js
+在zh_CN.js中;
+import zh_CNLocale from 'cloud-module-bpm/packages/i18n/langs/zh_CN';
+在en_US.js中;
+import en_USLocale from 'cloud-module-bpm/packages/i18n/langs/en_US';
+```
+
+- en_US.js 文件
+
+  il8n 目录->langs 目录->en_US.js
+
+  完整代码如下:
+
+  ```js
+  import en_USLocale from 'cloud-module-bpm/packages/i18n/langs/en_US';
+  const en = {
+    exp: {
+      id: 'id',
+      project: 'title',
+      name: 'name',
+      flowAuthorNames: 'Outstanding pepople',
+      procDealStatus: 'Processing state',
+      nodeNames: 'Processing nodes',
+      belong_depart: 'Subordinate departments',
+
+      type: 'Type',
+      amount: 'Amount',
+      destination: 'Destination',
+      travel_time: 'Travel Time',
+      travel_remark: 'Travel Reason',
+
+      enter_the_amout: 'Enter the amout',
+
+      travlExpenselManagement: 'TravlExpenselManagement'
+    },
+    select: {
+      selectOpinion: 'Please select a',
+      IdealizedQuery: 'Idealized Query',
+      pageQuery: 'Page Query'
+    },
+    statusColor: {
+      draft: 'warning',
+      track: '',
+      over: 'success'
+    },
+    status: {
+      draft: 'draft',
+      track: 'tracking',
+      over: 'over'
+    },
+    comm: {
+      message_info_delete: 'delete',
+      message_error_delete: 'Delete failed',
+      messagee_success_delete: 'Delete the success',
+      tooltip: 'tooltip',
+      del: 'are you sure delete ？',
+      message_action: 'please select at last one action!',
+      confirm: 'confirm',
+      cancel: 'cancel'
+    },
+    ...en_USLocale
+  };
+  export default en;
+  ```
+
+- zh_CN.js 文件
+
+  il8n 目录->langs 目录->zh_CN.js
+
+  完整代码如下:
+
+  ```js
+  import zh_CNLocale from 'cloud-module-bpm/packages/i18n/langs/zh_CN';
+  const zh_CN = {
+    exp: {
+      id: '编号',
+      project: '标题',
+      name: '姓名',
+      flowAuthorNames: '未处理人',
+      procDealStatus: '处理状态',
+      nodeNames: '处理节点',
+      belong_depart: '所属部门',
+
+      type: '出差类型',
+      amount: '金额',
+      destination: '出差目的地',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      travel_remark: '出差事由',
+      travel_time: '出差时间',
+      remark: '出差事由',
+      enter_the_amout: '输入金额',
+      travlExpenselManagement: '差旅费管理'
+    },
+    status: {
+      draft: '草稿',
+      track: '跟踪',
+      over: '办结'
+    },
+    statusColor: {
+      draft: 'warning',
+      track: '',
+      over: 'success'
+    },
+    select: {
+      selectOpinion: '请选择',
+      IdealizedQuery: '理想化查询'
+    },
+    apiType: {
+      ideal: {
+        name: '理想化查询',
+        explain: '不含其他查询条件下的查询,每次按照分页条件,服务间只做有效数据查询.'
+      }
+    },
+    comm: {
+      message_info_delete: '取消删除',
+      message_error_delete: '删除失败',
+      messagee_success_delete: '删除成功',
+      tooltip: '提示',
+      del: '确定删除吗？',
+      message_action: '请至少选择一条记录进行操作!',
+      confirm: '确认',
+      cancel: '取消'
+    },
+    ...zh_CNLocale
+  };
+  export default zh_CN;
+  ```
+
+- langs->index.js 完整代码如下：
+  ```js
+  import en_US from './en_US';
+  import zh_CN from './zh_CN';
+  export default {
+    zh: zh_CN,
+    en: en_US
+  };
+  ```
+- i18n.js 完整代码如下：
+
+  ```js
+  import Vue from 'vue';
+  import locale from 'element-ui/lib/locale'; //elementUI的国际化
+  import VueI18n from 'vue-i18n';
+  import messages from './langs';
+  Vue.use(VueI18n);
+  const i18n = new VueI18n({
+    //从localStorage中取，没有就默认的中文
+    locale: window.localStorage.getItem('qinLang') || 'zh',
+    messages
+  });
+  locale.i18n((key, value) => i18n.t(key, value)); //elementui多语言切换
+
+  export default i18n;
+  ```
+
+#### 5.5.6 httpConfig 文件夹
+
+说明：
+该文件夹主要配置了 http 请求相关配置
+
+- http.js 文件
+
+  设置请求后端应用的相关配置，get(),post()请求
+  以下配置了访问 2 个后端应用的 get().post() 请求
+  business-bpm-demo 和 cloud-system-manage 后端应用
+
+  完整代码如下:
+
+```js
+import Axios from 'cloud-module-base/packages/httpConfig/http-plugin';
+const appPath = {
+  'cloud-system-bpm-travel': '/business-bpm-demo',
+  'system-manager': '/cloud-system-manage'
+};
+export default {
+  'cloud-system-bpm-travel': {
+    post: (url, params) => {
+      return Axios.post('/gateway' + appPath['cloud-system-bpm-travel'] + url, params).then(res => res);
+    },
+    get: (url, params) => {
+      return Axios.get('/gateway' + appPath['cloud-system-bpm-travel'] + url, {
+        params: params
+      }).then(res => res);
+    }
+  },
+  'system-manager': {
+    post: (url, params) => {
+      return Axios.post('/gateway' + appPath['system-manager'] + url, params).then(res => res);
+    },
+    get: (url, params) => {
+      return Axios.get('/gateway' + appPath['system-manager'] + url, {
+        params: params
+      }).then(res => res);
+    }
+  }
+};
+```
+
+#### 5.5.7 components 文件夹
+
+- common-header.vue
+
+完整代码如下:
+
+```html
+<template>
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item v-for="item in routerItems" :key="item.path" :to="{ path: item.path }"
+      >{{ $t(item.meta.title) }}</el-breadcrumb-item
+    >
+  </el-breadcrumb>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        routerItems: []
+      };
+    },
+    props: {
+      modelName: {
+        type: String,
+        required: false
+      }
+    },
+    computed: {},
+    watch: {
+      $route() {
+        this.getBreadcrumb();
+      }
+    },
+    methods: {
+      getBreadcrumb() {
+        let matched = this.$route.matched.filter(item => item.name);
+        const first = matched[0];
+        if (first && first.name.trim().toLocaleLowerCase() !== 'index'.toLocaleLowerCase()) {
+          matched = [
+            {
+              path: '/',
+              meta: {
+                title: this.modelName !== undefined ? this.modelName : '首页'
+              }
+            }
+          ].concat(matched);
+        }
+        this.routerItems = matched;
+      }
+    },
+    created() {
+      this.getBreadcrumb();
+    }
+  };
+</script>
+<style scoped>
+  .el-breadcrumb {
+    width: 100%;
+    height: 100%;
+    line-height: 50px;
+    text-align: start;
+    cursor: pointer;
+  }
+  .logInfo {
+    top: 0px;
+    position: relative;
+    display: inline;
+  }
+  .tempo-api-right-menu-login-icon {
+    display: inline-block;
+    background-position: 0px -33px;
+    margin-right: 20px;
+    margin-top: 18px;
+    width: 24px;
+    height: 25px;
+    margin-left: 10px;
+  }
+  .el-popover {
+    padding: 0px;
+  }
+</style>
+```
+
+- no-access.vue
+
+完整代码如下:
+
+```html
+<template>
+  <div class="context">
+    <img src="../assets/images/not_found.png" />
+    <h2><font color="#DB1260">无访问权限！</font></h2>
+  </div>
+</template>
+```
+
+#### 5.5.8 vue.config.js 文件
+
+vue.config.js 完整代码如下：
+
+- 说明
+  程序编译打包信息配置、多页面管理、编译路径、后端代理配置等
+
+```js
+var path = require('path');
+const resolve = function(dir) {
+  return path.join(__dirname, dir);
+};
+module.exports = {
+  pages: {
+    //流程
+    expense: {
+      entry: 'src/pages/expense/main.js',
+      template: '/bpm/expense/view',
+      filename: 'expense/index.html'
+    }
+
+    // template 默认会去找 public/subpage.html 页面，如果找不到会使用 public/index.html 文件
+    // 输出文件会默认的推断为 subpage.html
+    //subpage: 'src/subpage/main.js'
+  },
+  publicPath: '/bpm-expense/',
+  //打包输出路径
+  outputDir: 'bpm-expense',
+  lintOnSave: false,
+  //后端代理服务器
+  devServer: {
+    proxy: {
+      '/gateway/': {
+        target: 'http://localhost:8081',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/gateway/': ''
+        }
+      }
+    }
+  },
+  chainWebpack: config => {
+    config.module
+      .rule('compile')
+      .test(/\.js$/)
+      .include.add(resolve('src'))
+      .add(resolve('node_modules/cloud-module-base/packages'))
+      .add(resolve('node_modules/cloud-module-base/static'))
+      .add(resolve('node_modules/cloud-module-bpm/packages'))
+      .end()
+      .use('babel')
+      .loader('babel-loader')
+      .options({
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              modules: false
+            }
+          ]
+        ]
+      });
+  }
+};
+```
+
+#### 5.5.9 view 文件夹
+
+- Grid.vue
+
+  说明:
+  引入 bpm-grid-buttons 流程新建，查询按钮
+
+  ```html
+  <bpm-grid-buttons :procDefKey="procDefKey" :isShowButton="true" @bpm-query="queryExample" @bpm-delete="deleteRow"></bpm-grid-buttons>
+  ```
+
+  | 名称                | 说明                                                      |
+  | ------------------- | --------------------------------------------------------- |
+  | procDefKey          | 流程 key                                                  |
+  | queryExample        | 查询方法                                                  |
+  | deleteRow           | 删除方法                                                  |
+| isShowButton        | 是否显示：我的工作,所有工作    true 显示     false 不显示 |
+  | isDisabledAddButton | 是否禁用新建按钮， true 禁用，false 不禁用                |
+  
+
+效果图如下:
+  ![image](./imgs/流程应用开发/1-40.jpg)
+
+
+另外一种：
+
+  ```vue
+  <bpm-grid-buttons-new :procDefKey="procDefKey" :isShowButton="false" @bpm-query="queryExample" @bpm-delete="deleteRow"></bpm-grid-buttons-new>
+  ```
+
+| 名称                | 说明                                                         |
+| ------------------- | ------------------------------------------------------------ |
+| procDefKey          | 流程 key                                                     |
+| queryExample        | 查询方法                                                     |
+| deleteRow           | 删除方法                                                     |
+| isShowButton        | 是否显示：我的工作,所有工作，我的审批按钮     true 显示     false 不显示 |
+| isDisabledAddButton | 是否禁用新建按钮， true 禁用，false 不禁用                   |
+
+![image-20211211095441659](./imgs/流程应用开发/image-20211211095441659.png)
+
+
+
+  
+
+  不显示效果：
+
+  ![image-20211211100147754](./imgs/流程应用开发/image-20211211100147754.png)
+
+  引入可以调用流程的方法的工具
+
+  ```js
+  import { MeritBPM } from 'cloud-module-bpm/packages/utils/merit-bpm';
+  export default {
+    data() {
+      return {
+        MeritBPM
+      };
+    }
+  };
+  ```
+
+  使用 MeritBPM.open()方法打开流程
+
+  Grid.vue 完整代码如下：
+
+  ```html
+  <template>
+    <el-container>
+      <el-main style="padding: 8px 12px;height:auto">
+        <el-row justify="space-between" type="flex" style="margin-bottom: 10px;">
+          <el-col :span="7">
+            <bpm-grid-buttons :procDefKey="procDefKey" @bpm-query="queryExample" @bpm-delete="deleteRow"></bpm-grid-buttons>
+          </el-col>
+  
+          <div class="tooltipI">
+            <el-tooltip placement="bottom">
+              <div slot="content" v-for="typeEnum in queryTypeEnums" :key="typeEnum" style="margin-top: 8px;">
+                {{ typeEnum }} : {{ $t(typeEnumLabel(typeEnum, "name")) }}
+                <br />
+                {{ $t(typeEnumLabel(typeEnum, "explain")) }}
+                <br />
+              </div>
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </div>
+          <el-col :span="7">
+            <el-input class="input-with-select" size="mini" v-model="keyword">
+              <el-select v-model="queryType" slot="prepend" style="width: 125px" :placeholder="$t('select.selectOpinion')">
+                <el-option :label="$t('select.IdealizedQuery')" value="ideal"></el-option>
+              </el-select>
+              <el-button slot="append" size="mini" icon="el-icon-search" @click="queryKeyword()"></el-button>
+            </el-input>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-table :data="tableData" :height="tableHeight" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column fixed type="index" :label="$t('exp.id')" align="left" :index="customIndex"></el-table-column>
+            <el-table-column prop="name" :label="$t('exp.name')" align="left"></el-table-column>
+            <el-table-column prop="project" :label="$t('exp.project')" align="left"></el-table-column>
+            <el-table-column prop="flowAuthorNames" :label="$t('exp.flowAuthorNames')" align="left"></el-table-column>
+            <el-table-column prop="procDealStatus" :label="$t('exp.procDealStatus')" align="left">
+              <template slot-scope="scope">
+                <el-tag :type="$t(statusColorLabel(scope.row.procDealStatus))">{{ $t(statusLabel(scope.row.procDealStatus)) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="nodeNames" :label="$t('exp.nodeNames')" align="left"></el-table-column>
+            <el-table-column :label="$t('base.table.action')" width="100">
+              <template slot-scope="scope">
+                <el-button style="border: none;" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"> </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            background
+          ></el-pagination>
+        </el-row>
+      </el-main>
+    </el-container>
+  </template>
+  <script>
+    import { MeritBPM } from 'cloud-module-bpm/packages/utils/merit-bpm';
+    export default {
+      data() {
+        return {
+          MeritBPM,
+          myStatusValue: 'my',
+        allStatusValue: 'all',
+          lastStatusValue: 'all', //查询状态
+          procDefKey: 'travel_expense', //流程id
+  
+          currentPage: 1,
+          pageSize: 10,
+          total: 10,
+          tableData: [],
+          queryTypeEnums: ['ideal'],
+          keyword: '',
+          queryType: 'ideal',
+          tableHeight: window.innerHeight - 160,
+          selectedData: []
+        };
+      },
+      //方法
+      methods: {
+        //获取所选中的id
+        handleSelectionChange(rows) {
+          this.selectedData = [];
+          rows.forEach(arry => {
+            this.selectedData.push(arry.id);
+          });
+        },
+  
+        queryExample(type) {
+          this.lastStatusValue = type;
+          if (type.indexOf('all') != -1) {
+            this.allStatusValue = type;
+          } else {
+            this.myStatusValue = type;
+          }
+          this.queryKeyword();
+        },
+        // 删除操作
+        deleteRow() {
+          let _this = this;
+          let message = _this.$i18n.t('comm.del');
+          if (_this.selectedData.length == 0) {
+            return _this.$message({
+              message: _this.$i18n.t('comm.message_action'),
+              type: 'error'
+            });
+          }
+          //提示框
+          this.$confirm(message, _this.$i18n.t('comm.tooltip'), {
+            confirmButtonText: _this.$i18n.t('comm.confirm'),
+            cancelButtonText: _this.$i18n.t('comm.cancel'),
+            type: 'warning'
+          })
+            .then(() => {
+              let ids = _this.selectedData.join(',');
+            _this.axios['cloud-system-bpm-travel']
+                .post(this.HOST + '/deleteTravel/batch', {
+                  ids: ids
+                })
+                .then(function(res) {
+                  if (res.status == '1') {
+                    _this.$message.success(_this.$i18n.t('comm.messagee_success_delete'));
+                  } else {
+                    _this.$message.error(_this.$i18n.t('comm.message_error_delete'));
+                  }
+                  _this.selectedData = [];
+                  _this.requestGridData();
+                });
+            })
+            .catch(() => {
+              this.$message.info(_this.$i18n.t('comm.message_info_delete'));
+            });
+        },
+        // 按照查询条件查询
+        queryKeyword() {
+          if (this.queryType == 'ideal') {
+            this.queryIdealData();
+          }
+      },
+  
+        //理想化查询
+        queryIdealData() {
+          var _this = this;
+          _this.axios['cloud-system-bpm-travel']
+          .post(this.HOST + '/page/ideal', {
+              pageNumber: _this.currentPage,
+              pageSize: _this.pageSize,
+              procDefKey: _this.procDefKey,
+              bpmStatus: _this.lastStatusValue
+            })
+            .then(function(res) {
+              if (res.status == '1') {
+                _this.tableData = res.data.rows;
+                _this.total = res.data.total;
+              } else {
+                console.log(res.stackmessage);
+              }
+            })
+            .catch(function(err) {
+              console.log(err);
+            });
+        },
+  
+        //编辑
+        handleEdit(index, row) {
+          // 打开流程
+          MeritBPM.open(this, { businessId: row.id }, {});
+        },
+  
+        //请求数据
+        requestGridData() {
+          //理想化查询
+          this.queryIdealData();
+        },
+      statusColorLabel(status) {
+          let color = 'statusColor.' + status;
+          return color;
+        },
+        statusLabel(status) {
+          return 'status.' + status;
+      },
+        customIndex(index) {
+          return index + 1 + (this.currentPage - 1) * this.pageSize;
+        },
+        //每页显示数据个数变化时调用
+        handleSizeChange(val) {
+          this.pageSize = val;
+          this.requestGridData();
+        },
+        //页码变化时调用
+        handleCurrentChange(val) {
+          this.currentPage = val;
+          this.requestGridData();
+        },
+        typeEnumLabel(type, param) {
+          return 'apiType.' + type + '.' + param;
+        }
+      },
+  
+      mounted() {
+        this.requestGridData();
+      }
+    };
+  </script>
+  
+  <style scoped>
+    .el-col-7 {
+      width: auto !important;
+    }
+    .tooltipI {
+      margin-top: 6px;
+      flex: auto;
+      text-align: right;
+      margin-right: 10px;
+    }
+  </style>
+  ```
+
+如上 html 中流程引入的相关参数说明，请参考《流程应用模块相关接口》中业务模块--主页部分
+
+- form-edit.vue
+
+  说明：
+  在主页 Grid.vue 中的 handleEdit()方法中调用了 MeritBPM.open 就是打开流程的方法
+
+  引入流程操作按钮
+
+  ```html
+  <bpm-form-tools :procDefKey="procDefKey" @init="init" @save="save" ref="bpmformtools"></bpm-form-tools>
+  ```
+
+  效果图如下:
+  ![image](./imgs/流程应用开发/1-41.jpg)
+
+  form-edit.vue 完整代码如下：
+
+  ```html
+  <template>
+    <el-form :model="expense" label-width="80px" style="padding: 16px;width:850px;margin:20px auto;border:1px solid #cecece;">
+      <!--引入流程操作按钮-->
+      <el-row type="flex" style="margin:20px 0 10px 0;">
+        <bpm-form-tools :procDefKey="procDefKey" @init="init" @save="save" ref="bpmformtools"></bpm-form-tools>
+      </el-row>
+
+      <!--业务相关-->
+      <el-row type="flex" style="margin:10px 0 10px 0;">
+        <el-col style="font-size:24px;font-weight:bold" align="center">出差费用报销单</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item :label="$t('exp.project')" prop="project">
+            <el-input v-model="expense.project" :maxlength="100" show-word-limit size="mini" style="width:100%"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.belong_depart')" prop="belongDept">
+            <el-input
+              v-model="expense.belongDept"
+              readonly="readonly"
+              :maxlength="100"
+              show-word-limit
+              size="mini"
+              style="width:100%"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.name')" prop="name">
+            <el-input v-model="expense.name" readonly="readonly" :maxlength="100" show-word-limit size="mini" style="width:100%"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.type')" prop="type">
+            <el-select v-model="expense.type" placeholder="请选择" style="width:100%;">
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.amount')" prop="amount">
+            <el-input-number
+              v-model="expense.amount"
+              style="width:100%;"
+              :min="0"
+              :max="100000"
+              size="mini"
+              :precision="2"
+              @blur="blurAmount"
+            ></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item :label="$t('exp.destination')" prop="destination">
+            <el-input v-model="expense.destination" :maxlength="50" show-word-limit size="mini" style="width:100%"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item :label="$t('exp.travel_time')" prop="time">
+            <el-date-picker
+              v-model="expense.time"
+              value-format="timestamp"
+              style="width:100%;"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item :label="$t('exp.travel_remark')" prop="remark">
+            <el-input
+              v-model="expense.remark"
+              type="textarea"
+              :maxlength="300"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 4 }"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </template>
+  <script>
+    import dateFormat from 'cloud-module-base/static/js/utils/dataFormat.js';
+    export default {
+      data() {
+        return {
+          //流程ID
+          procDefKey: 'travel_expense',
+
+          //业务相关
+          expense: {
+            project: '',
+            belongDept: '',
+            name: '',
+            destination: '',
+            amount: 0,
+            type: '',
+            time: [],
+            remark: ''
+          },
+          typeOptions: [
+            {
+              value: 'options1',
+              label: '项目支持'
+            },
+            {
+              value: 'options2',
+              label: '售前支撑'
+            }
+          ]
+        };
+      },
+      computed: {},
+
+      methods: {
+        blurAmount() {
+          let that = this;
+          Object.assign(that.$refs.bpmformtools.ruleEngine, that.example);
+          if (that.example.id == null) {
+            that.$refs.bpmformtools.MeritBPM.initRuleEngine(that.$refs.bpmformtools);
+          } else {
+            that.$refs.bpmformtools.MeritBPM.runRuleEngine(that.$refs.bpmformtools, {}, {});
+          }
+        },
+        // 业务数据初始化表单
+        init(params) {
+          let _this = this;
+          if (params.id == '') {
+            this.initUserInfo(); // 业务代码
+            params.callback(this.expense); //流程中的回调函数
+            return;
+          }
+
+          // 初始化数据
+          _this.axios['cloud-system-bpm-travel']
+            .post(this.HOST + '/get-travel-expense', {
+              id: params.id
+            })
+            .then(function(res) {
+              Object.assign(_this.expense, res.data);
+              if (_this.expense.startTime != null) {
+                _this.expense.time = [_this.expense.startTime, _this.expense.endTime];
+              }
+              params.callback(_this.expense); //流程中的回调函数
+            });
+        },
+        // 初始化部门，姓名，标题
+        initUserInfo() {
+          let _this = this;
+          this.axios['system-manager']
+            .get('/api/ou/user/session')
+            .then(result => {
+              if (result) {
+                if (_this.expense.project == '') {
+                  _this.expense.name = result.name;
+                  _this.expense.belongDept = result.deptName;
+                  _this.expense.project = result.name + '_' + dateFormat(new Date()) + '_出差报销';
+                }
+              }
+            })
+            .catch(err => {
+              console.log(err);
+            });
+        },
+        // 业务数据保存方法
+        save(bpmSaveAfter) {
+          let _this = this;
+          if (_this.expense.time != undefined && _this.expense.time.length >= 2) {
+            (_this.expense.startTime = _this.expense.time[0]), (_this.expense.endTime = _this.expense.time[1]);
+          }
+          _this.axios['cloud-system-bpm-travel'].post(this.HOST + '/save', _this.expense).then(function(res) {
+            //流程相关
+            // 保存成功,saveTravel返回expense对象的目的是：获取id,用于保存回调方法。
+            //如果不返回expense对象，则获取不到id，保存回调方法失败
+            Object.assign(_this.expense, res.data);
+            _this.expense['bpmSubject'] = res.data.project;
+            _this.expense['bpmUrgent'] = '普通';
+            _this.expense['bpmSecret'] = '高级';
+            bpmSaveAfter(_this.expense); //流程中的回调函数
+          });
+        }
+      }
+    };
+  </script>
+  <style>
+    .el-range-editor.el-input__inner {
+      padding: 0 10px;
+    }
+  </style>
+  ```
+
+如上 html 中流程引入的相关参数说明，请参考《流程应用模块相关接口》中业务模块--表单
+
+- form-read.vue
+
+  说明：
+  引入流程操作按钮
+
+  ```html
+  <bpm-form-tools :procDefKey="procDefKey" @init="init" @save="save" ref="bpmformtools"></bpm-form-tools>
+  ```
+
+  效果图如下:
+  ![image](./imgs/流程应用开发/1-46.jpg)
+
+  完整代码如下：
+
+  ```html
+  <template>
+    <el-form :model="expense" label-width="80px" style="padding: 16px;width:700px;margin:20px auto;border:1px solid #cecece;">
+      <el-row type="flex" style="margin:20px 0 10px 0;">
+        <bpm-form-tools :procDefKey="procDefKey" @init="init" @save="save" ref="bpmformtools"></bpm-form-tools>
+      </el-row>
+      <el-row type="flex" style="margin:10px 0 10px 0;">
+        <el-col style="font-size:24px;font-weight:bold" align="center">出差费用报销单</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item :label="$t('exp.project')" prop="project">
+            <el-input v-model="expense.project" disabled :maxlength="100" show-word-limit size="mini" style="width:100%"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.belong_depart')" prop="belongDept">
+            <el-input
+              v-model="expense.belongDept"
+              disabled
+              readonly="readonly"
+              :maxlength="100"
+              show-word-limit
+              size="mini"
+              style="width:100%"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.name')" prop="name">
+            <el-input
+              v-model="expense.name"
+              disabled
+              readonly="readonly"
+              :maxlength="100"
+              show-word-limit
+              size="mini"
+              style="width:100%"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.type')" prop="type">
+            <el-select v-model="expense.type" disabled placeholder="请选择" style="width:100%;">
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('exp.amount')" prop="amount">
+            <el-input-number
+              v-model="expense.amount"
+              disabled
+              :min="0"
+              :max="100000"
+              size="mini"
+              :precision="2"
+              style="width:100%"
+            ></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item :label="$t('exp.destination')" prop="destination">
+            <el-input v-model="expense.destination" disabled :maxlength="50" show-word-limit size="mini" style="width:100%"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item :label="$t('exp.travel_time')" prop="time">
+            <el-date-picker
+              disabled
+              v-model="expense.time"
+              style="width:100%;"
+              type="daterange"
+              value-format="timestamp"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item :label="$t('exp.travel_remark')" prop="remark">
+            <el-input
+              v-model="expense.remark"
+              type="textarea"
+              disabled
+              :maxlength="300"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 4 }"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </template>
+  <script>
+    import dateFormat from 'cloud-module-base/static/js/utils/dataFormat.js';
+    export default {
+      data() {
+        return {
+          procDefKey: 'travel_expense',
+          expense: {
+            project: '',
+            belongDept: '',
+            name: '',
+            destination: '',
+            amount: 0,
+            type: '',
+            time: [],
+            remark: ''
+          },
+          typeOptions: [
+            {
+              value: 'options1',
+              label: '项目支持'
+            },
+            {
+              value: 'options2',
+              label: '售前支撑'
+            }
+          ]
+        };
+      },
+      computed: {},
+
+      methods: {
+        init(params) {
+          let _this = this;
+          if (params.id == '') {
+            params.callback(this.expense);
+            return;
+          }
+
+          // 初始化数据
+          _this.axios['cloud-system-bpm-travel']
+            .post(this.HOST + '/get-travel-expense', {
+              id: params.id
+            })
+            .then(function(res) {
+              Object.assign(_this.expense, res.data);
+              if (_this.expense.startTime != null) {
+                _this.expense.time = [_this.expense.startTime, _this.expense.endTime];
+              }
+              params.callback(_this.expense);
+            });
+        },
+
+        save(bpmSaveAfter) {
+          let _this = this;
+          if (_this.expense.time != undefined && _this.expense.time.length == 2) {
+            (_this.expense.startTime = _this.expense.time[0]), (_this.expense.endTime = _this.expense.time[1]);
+          }
+          _this.axios['cloud-system-bpm-travel'].post(this.HOST + '/save', _this.expense).then(function(res) {
+            Object.assign(_this.expense, res.data);
+            _this.expense['bpmSubject'] = res.data.project;
+            _this.expense['bpmUrgent'] = '普通';
+            _this.expense['bpmSecret'] = '高级';
+            bpmSaveAfter(_this.expense);
+          });
+        }
+      }
+    };
+  </script>
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 98%;
+    }
+  </style>
+  ```
+
+只读表单(form-edit.vue)和编辑表单(form-read.vue)区别：
+
+相同点：流程部分相同，方法相同
+
+不同点：业务部分，不能做任何编辑，只能读，加上 disabled