@alanwang-merit/meritdata-platform-skill-package 1.0.10 → 1.0.11

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

@@ -1,1443 +0,0 @@
----
-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