npm - @alanwang-merit/meritdata-platform-skill-package - Versions diffs - 1.0.9 → 1.0.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (546) hide show

package/skills/{meritdata-dev-docs-file-finder/references/dev-docs/.bak//345/272/224/347/224/250/345/274/200/345/217/221/345/271/263/345/217/260-/346/265/201/347/250/213/347/256/241/347/220/206-/344/275/277/347/224/250/346/224/273/347/225/245/357/274/210/344/272/214/357/274/211/357/274/232/345/267/245/344/275/234/346/265/201/347/250/213/345/272/224/347/224/250/345/274/200/345/217/221.md → meritdata-platform-bpm/references/workflow-dev.md} RENAMED Viewed

@@ -1,66 +1,45 @@
----
-title: 应用开发平台流程管理使用攻略（二）：工作流程应用开发
-date: 2025.05.27
-categories:
-  - 开发攻略
-  - 6.13.2
----
-# 应用开发平台流程管理使用攻略（二）：工作流程应用开发
-查看应用开发平台系统运行环境是否正常；环境搭建参考《应用开发平台使用攻略（一）：系统环境搭建》
+<!-- ⚠️ 业务实体根包待确认：TravelExpense 不应在 com.meritdata.cloud.entity 下，应为 com.<公司>.<项目>.entity -->
 ## 样例说明
+本文件保留历史差旅报销样例的结构，不是可直接部署的模板。先用目标项目的 BOM、JDK、网关、Nacos、认证与前端构建配置替换全部占位项；历史截图、默认账号和环境地址已移除。
 - <b>案例：</b> 差旅费报销功能的开发案例
 - <b>场景说明</b>
   - 员工填写差旅费报销单，包括出差地，出差时间，出差费用等，将差旅费报销单提交给部门领导。
   - 部门领导审批，如果审批结束（批准或者不批准），流程结束。如果需要员工修改申请，退回去给员工进行修改。
-- <b>流程应用后端工程：</b>business-bpm-demo
+- <b>流程应用后端工程：</b>`<business-service>`
   - 功能简介：
     - 1.根据条件查找差旅费
     - 2.删除差旅费
     - 3.修改差旅费
     - 4.保存差旅费
-- <b>流程应用前端工程：</b>business-bpm-expense
+- <b>流程应用前端工程：</b>`<frontend-app>`
   - 功能简介：
     - 1.引入流程按钮
     - 2.查看差旅费表单界面
     - 3.编辑/新增差旅费表单界面
 - <b>参考文档</b>
   《二次开发--流程接口》
   **以下为手动搭建方案，另一种方案直接利用代码生成工具生成流程前后端应用，具体生成指导见代码生成工具文档**。
-## 1. 后端工程创建
+## 目录
-### 1.1 操作场景
+- [样例说明](#样例说明)
+- [1. 后端工程创建](#1-后端工程创建)
+- [2. 后端工程配置](#2-后端工程配置)
+- [3. 后端工程业务类创建](#3-后端工程业务类创建)
+- [4. 启动后端应用工程](#4-启动后端应用工程)
+- [5. 流程应用前端开发](#5-流程应用前端开发)
+## 1. 后端工程创建
+### 1.1 操作场景
 使用 IntelliJ IDEA 新建一个 Maven 工程；按照工程创建操作步骤，生成后端工程；修改相关配置信息；加载依赖包，启动工程，nacos 中查看。
 ### 1.2 操作步骤
 根据《应用开发平台使用攻略(一)：系统环境搭建》 的后端工程创建，进行后端工程搭建。
-创建 business-bpm-demo 工程应用
-生成的目录结构如下图所示：
-![](./imgs/流程应用开发/1-6.jpg)
+创建目标业务服务工程。
+按目标项目的模块约定创建目录结构。
 ## 2. 后端工程配置
 ### 2.1 修改 pom.xml 文件
 引入流程 jar 包，${cloud-system-bpm.version}、${cloud-starter-core.version}、${cloud-starter-dbinit.version}、${cloud-system-bpm-module-core.version}版本信息根据需要自适配。
 ```xml
     <parent>
         <artifactId>cloud-system-bpm</artifactId>
@@ -68,9 +47,7 @@ categories:
         <version>${cloud-system-bpm.version}</version>
     </parent>
 ```
 完整配置信息如下:
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
@@ -83,7 +60,7 @@ categories:
     </parent>
     <modelVersion>4.0.0</modelVersion>
-    <artifactId>business-bpm-demo</artifactId>
+    <artifactId>${business.service.artifact-id}</artifactId>
     <dependencies>
         <dependency>
@@ -231,62 +208,36 @@ categories:
     </build>
 </project>
 ```
 ### 2.2 修改 bootstrap.properties 文件
 在 src 目录->resources 目录-> bootstrap.properties 文件
-修改 server.port = 8099
-防止端口冲突
-完整配置信息如下:
+不要复制历史端口、Nacos 地址、命名空间或产品名。将这些值放在目标环境的部署配置中，以下仅展示变量引用方式。
 ```properties
-#启动端口
-server.port=8099
-#nacos的启动地址，在nacos的启动日志中查看
-meritdata.cloud.nacos-addr=127.0.0.1:8848
+#由部署环境提供
+server.port=${SERVER_PORT}
+meritdata.cloud.nacos-addr=${NACOS_ADDR}
 spring.cloud.nacos.config.server-addr=${meritdata.cloud.nacos-addr}
 spring.cloud.nacos.discovery.server-addr=${meritdata.cloud.nacos-addr}
-#程序加载的配置文件
-#服务启动的时候会读取 prefix.properties 和 prefix-profiles.properties 文件下的配置项
-spring.profiles.include=server,cache,freemarker,datasource,sentinel,oauth2,cloud-system-cas,@project.artifactId@
+#按目标平台基线配置
+spring.profiles.include=<profile-placeholder>,@project.artifactId@
 spring.cloud.nacos.config.prefix=common
-#nacos 创建的namespace的标识码
-#spring.cloud.nacos.config.namespace=b62f9c4c-ab77-4de6-b6c5-8e8b8c45f79a
-#nacos的配置的命名空间，默认为空
-spring.cloud.nacos.config.namespace=
-#系统的程序名，在创建工程的时候确定，挂载到nacos中的名称
+spring.cloud.nacos.config.namespace=${NACOS_NAMESPACE:}
 spring.application.name=@project.artifactId@
-meritdata.cloud.product-name=cloud-system-framework
-spring.main.allow-bean-definition-overriding=true
-#日志文件最长保存添加
+meritdata.cloud.product-name=${PRODUCT_NAME}
 logfile-max-history=30
-#应用日志级别
 logging-level=info
 ```
 ## 3. 后端工程业务类创建
 - 点击 com.meritdata.cloud ——>鼠标右键——> 点击 New ——> 选择 Package
-  ![](./imgs/流程应用开发/1-31.jpg)
   在"New Package"界面 分别创建 controller,entity,repository,service 包
-  ![](./imgs/流程应用开发/1-9.jpg)
-- 添加完包后，按照下图创建对应的 java 文件，
+- 添加完包后，创建对应的 Java 文件：
   点击包名 ——>鼠标右键 ——>点击 New ——> 选择 java class
-  ![](./imgs/流程应用开发/1-10.jpg)
 ### 3.1 实体类
 | 类名          | 类型  | 父类                    | 说明                                                                                          |
 | ------------- | ----- | ----------------------- | --------------------------------------------------------------------------------------------- |
 | TravelExpense | class | 继承 CloudBaseEntity 类 | CloudBaseEntity 属于系统基础实体类，维护多租户标识 添加创建时间，更新时间，作者和更新人员信息 |
 完整代码如下:
 ```java
-package com.meritdata.cloud.entity;
+package com.meritdata.cloud.cets.entity;
 import com.meritdata.cloud.base.entity.CloudBaseEntity;
 import lombok.Data;
 import org.hibernate.annotations.GenericGenerator;
@@ -355,23 +306,18 @@ public class TravelExpense extends CloudBaseEntity {
 }
 ```
 ### 3.2 持久层
 系统持久层框架使用 JPA+QueryDsl。JPA 主要负责数据库的新增、修改、删除。QueryDsl 主要负责对数据库的查询操作。
 | 类名 | 类型 | 父类 | 说明|
 | ------------- | ----- | ----------------------- |-----|
 | TravelExpenseRepository | interface | 分别继承 JpaRepository 类，QuerydslPredicateExecutor 类 | JpaRepository 提供了默认的保存查找等方法，QuerydslPredicateExecutor 接口是为了使用 QueryDsl|
 JpaRepository 的使用和 QueryDsl 的使用
 查看《二次开发：业务应用》 附件 1
 完整代码如下:
 ```java
 package com.meritdata.cloud.repository;
-import com.meritdata.cloud.entity.TravelExpense;
+import com.meritdata.cloud.cets.entity.TravelExpense;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.querydsl.QuerydslPredicateExecutor;
@@ -382,21 +328,16 @@ public interface TravelExpenseRepository extends JpaRepository<TravelExpense, St
 }
 ```
 ### 3.3 服务层
 #### 3.3.1 服务层接口
 | 类名                  | 类型      |
 | --------------------- | --------- |
 | ITravelExpenseService | interface |
 完整代码如下:
 ```java
 package com.meritdata.cloud.service;
 import com.meritdata.cloud.base.mvc.entity.GridView;
-import com.meritdata.cloud.entity.TravelExpense;
+import com.meritdata.cloud.cets.entity.TravelExpense;
 import javax.validation.constraints.NotNull;
 import java.util.List;
 import java.util.Map;
@@ -445,15 +386,11 @@ public interface ITravelExpenseService {
 }
 ```
 #### 3.3.2 服务层实现
 | 类名              | 类型  | 父类                          |
 | ----------------- | ----- | ----------------------------- |
 | TravelExpenseImpl | class | 实现 ITravelExpenseService 类 |
 完整代码如下:
 ```java
 package com.meritdata.cloud.service.impl;
@@ -462,8 +399,8 @@ import com.google.common.collect.Lists;
 import com.meritdata.cloud.base.mvc.entity.GridView;
 import com.meritdata.cloud.bpm.base.dto.MainFormQueryDTO;
 import com.meritdata.cloud.bpm.core.BpmEngine;
-import com.meritdata.cloud.entity.QTravelExpense;
-import com.meritdata.cloud.entity.TravelExpense;
+import com.meritdata.cloud.cets.entity.QTravelExpense;
+import com.meritdata.cloud.cets.entity.TravelExpense;
 import com.meritdata.cloud.repository.TravelExpenseRepository;
 import com.meritdata.cloud.resultmodel.ResultBody;
 import com.meritdata.cloud.service.ITravelExpenseService;
@@ -656,25 +593,19 @@ public class TravelExpenseImpl implements ITravelExpenseService {
         }
 }
 ```
 注意：添加完 TravelExpenseImpl 类中代码后，编译工程，maven->compile
-![image](./imgs/流程应用开发/1-48.jpg)
 ### 3.4 控制层
 | 类名                    | 类型  |
 | ----------------------- | ----- |
 | TravelExpenseController | class |
 完整代码如下:
 ```java
 package com.meritdata.cloud.controller;
 import cn.hutool.core.util.StrUtil;
 import com.meritdata.cloud.base.mvc.entity.GridView;
 import com.meritdata.cloud.bpm.base.utils.StringUtils;
-import com.meritdata.cloud.entity.TravelExpense;
+import com.meritdata.cloud.cets.entity.TravelExpense;
 import com.meritdata.cloud.resultmodel.ResultBody;
 import com.meritdata.cloud.service.ITravelExpenseService;
 import io.swagger.annotations.Api;
@@ -791,64 +722,27 @@ public class TravelExpenseController {
 }
 ```
 ## 4. 启动后端应用工程
 ### 4.1 启动后端工程服务
-配置启动 key 文件
-![](./imgs/流程应用开发/1-44.jpg)
-在 VM options 中配置 key 文件,key 文件在 merit_cloud 文件夹下的 key 文件夹下
+从目标环境的密钥和认证管理系统取得启动配置；不要将密钥文件或认证信息提交到工程、文档或 VM options 历史记录中。
 ```
-  -DCLOUD_HOME= key路径
+  -DCLOUD_HOME=<home-placeholder>
 ```
-本案例中 key 路径为：C:/work/soft/run/merit_cloud
-再添加认证参数和允许循环依赖
+认证配置由目标环境提供，例如：
 -Dmeritdata.cloud.authentication-server-url=${CLOUD_HOME}/key
--Dspring.main.allow-circular-references=true
-如下图所示：
-![image-20220614093829639](.\imgs\流程应用开发\image-20220614093829639.png)
-![](./imgs/流程应用开发/1-43.jpg)
+不要通过 `allow-circular-references` 掩盖依赖循环，应拆分或重构循环依赖。
 启动后端应用
-选择 CloudBaseDemoProjectApplication,右键,选择 Run "CloudBaseDemoProjectApplication"
-![](./imgs/流程应用开发/1-11.jpg)
+选择 <ApplicationClass>,右键,选择 Run "<ApplicationClass>"
 启动成功
-![](./imgs/流程应用开发/1-12.jpg)
 ### 4.2 检查后端工程服务
-查看后端工程服务是否注册到 Nacos 中。
-nacos 地址：
-url:http://localhost:8848/nacos/#/serviceManagement?dataId=&group=&appName=&namespace=
-账号：admin
-密码：BigData.2018v6
-![](./imgs/流程应用开发/1-13.jpg)
+在目标环境提供的 Nacos 控制台确认服务已注册。使用受管账号或 SSO 登录；不要记录、猜测或复用默认账号与密码。
 ## 5. 流程应用前端开发
 ### 5.1 前置条件
 根据《应用开发平台使用攻略(一)：系统环境搭建》 的前端工程创建，进行前端工程搭建。
-创建 business-bpm-expense 工程应用
+创建 `<frontend-app>` 工程应用。
 ### 5.2 前端工程配置
 #### 5.2.1 删除文件
-下图：是根据《应用开发平台使用攻略(一)：系统环境搭建》 的前端工程创建，所创建的 business-bpm-expense 工程应用
-![image](./imgs/流程应用开发/1-35.jpg)
+按目标前端基线创建 `<frontend-app>` 工程应用。
 - 删除的文件如下：
   - 1.删除 node_modules 文件夹
   - 2.删除 src 文件夹下面的所有内容
@@ -856,24 +750,17 @@ url:http://localhost:8848/nacos/#/serviceManagement?dataId=&group=&appName=&name
   - 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",
+  "name": "<frontend-app>",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -930,44 +817,22 @@ package.json 文件是对项目或者模块包的描述，里面包含许多元
   "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)
+安装后检查锁文件和实际解析版本，确保与目标 BPM 版本兼容。
 安装 cloud-module-bpm
-平台组将流程的工具类进行封装至 cloud-module-bpm 插件，安装插件如果是公网环境需要将 npm 仓库切换至美林 npm 私服后进行插件的安装
+平台将流程工具封装在 `cloud-module-bpm`。依赖应从组织批准的 npm registry 安装，registry 由 `.npmrc`、环境变量或 CI 凭据管理，不写入示例。
 ```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
@@ -991,7 +856,6 @@ nmp 命令
       - main.js
       - router.js
 - vue.config.js
 | 文件名        | 文件说明                                                  |
 | ------------- | --------------------------------------------------------- |
 | httpConfig    | http 配置文件目录                                         |
@@ -1000,14 +864,9 @@ nmp 命令
 | main.js       | 引入相关依赖，注入到 vue 全局和服务访问路径               |
 | router.js     | 路由跳转。配置跳转界面                                    |
 | vue.config.js | 程序编译打包信息配置 多页面管理、编译路径、后端代理配置等 |
 完整的目录结构如下：
-![](./imgs/流程应用开发/1-32.jpg)
 ### 5.5 业务代码
 包含以下目录的完整代码
 - src
   - components
     - common-header.vue
@@ -1031,11 +890,8 @@ nmp 命令
       - 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';
@@ -1043,9 +899,7 @@ nmp 命令
    Vue.use(base);
    Vue.use(bpm);
 ```
 - main.js 完整代码如下：
 ```js
 import Vue from 'vue';
 import ElementUI from 'element-ui'; // 引入element-ui
@@ -1071,11 +925,8 @@ new Vue({
   render: h => h(App)
 }).$mount('#app');
 ```
 #### 5.5.2 Index.vue 文件
 - 主页面 Index.vue 完整代码如下:
 ```html
 <template>
   <el-container class="el-root-container">
@@ -1116,14 +967,10 @@ new Vue({
   }
 </style>
 ```
 #### 5.5.3 router.js 文件
 router.js 完整代码如下：
 - 说明
   路由的跳转，跳转界面配置
 ```js
 import Vue from 'vue';
 import Router from 'vue-router';
@@ -1157,11 +1004,8 @@ export default new Router({
   ]
 });
 ```
 #### 5.5.4 App.vue 文件
 完整代码如下:
 ```html
 <template>
   <div id="app">
@@ -1183,26 +1027,19 @@ export default new Router({
   }
 </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 = {
@@ -1254,13 +1091,9 @@ import en_USLocale from 'cloud-module-bpm/packages/i18n/langs/en_US';
   };
   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 = {
@@ -1318,7 +1151,6 @@ import en_USLocale from 'cloud-module-bpm/packages/i18n/langs/en_US';
   };
   export default zh_CN;
   ```
 - langs->index.js 完整代码如下：
   ```js
   import en_US from './en_US';
@@ -1329,7 +1161,6 @@ import en_USLocale from 'cloud-module-bpm/packages/i18n/langs/en_US';
   };
   ```
 - i18n.js 完整代码如下：
   ```js
   import Vue from 'vue';
   import locale from 'element-ui/lib/locale'; //elementUI的国际化
@@ -1342,59 +1173,49 @@ import en_USLocale from 'cloud-module-bpm/packages/i18n/langs/en_US';
     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 后端应用
+  <business-service> 和 <system-service> 后端应用
   完整代码如下:
 ```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'
+  '<business-service-client>': '/<business-service>',
+  '<system-service-client>': '/<system-service>'
 };
 export default {
-  'cloud-system-bpm-travel': {
+  '<business-service-client>': {
     post: (url, params) => {
-      return Axios.post('/gateway' + appPath['cloud-system-bpm-travel'] + url, params).then(res => res);
+      return Axios.post('/gateway' + appPath['<business-service-client>'] + url, params).then(res => res);
     },
     get: (url, params) => {
-      return Axios.get('/gateway' + appPath['cloud-system-bpm-travel'] + url, {
+      return Axios.get('/gateway' + appPath['<business-service-client>'] + url, {
         params: params
       }).then(res => res);
     }
   },
-  'system-manager': {
+  '<system-service-client>': {
     post: (url, params) => {
-      return Axios.post('/gateway' + appPath['system-manager'] + url, params).then(res => res);
+      return Axios.post('/gateway' + appPath['<system-service-client>'] + url, params).then(res => res);
     },
     get: (url, params) => {
-      return Axios.get('/gateway' + appPath['system-manager'] + url, {
+      return Axios.get('/gateway' + appPath['<system-service-client>'] + url, {
         params: params
       }).then(res => res);
     }
   }
 };
 ```
 #### 5.5.7 components 文件夹
 - common-header.vue
 完整代码如下:
 ```html
 <template>
   <el-breadcrumb separator="/">
@@ -1472,11 +1293,8 @@ export default {
   }
 </style>
 ```
 - no-access.vue
 完整代码如下:
 ```html
 <template>
   <div class="context">
@@ -1485,14 +1303,10 @@ export default {
   </div>
 </template>
 ```
 #### 5.5.8 vue.config.js 文件
 vue.config.js 完整代码如下：
 - 说明
   程序编译打包信息配置、多页面管理、编译路径、后端代理配置等
 ```js
 var path = require('path');
 const resolve = function(dir) {
@@ -1511,15 +1325,15 @@ module.exports = {
     // 输出文件会默认的推断为 subpage.html
     //subpage: 'src/subpage/main.js'
   },
-  publicPath: '/bpm-expense/',
+  publicPath: '/<frontend-app>/',
   //打包输出路径
-  outputDir: 'bpm-expense',
+  outputDir: '<frontend-app>',
   lintOnSave: false,
   //后端代理服务器
   devServer: {
     proxy: {
       '/gateway/': {
-        target: 'http://localhost:8081',
+        target: process.env.GATEWAY_ORIGIN,
         changeOrigin: true,
         pathRewrite: {
           '^/gateway/': ''
@@ -1551,37 +1365,25 @@ module.exports = {
   }
 };
 ```
 #### 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 不显示 |
+  | 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                                                     |
@@ -1589,19 +1391,8 @@ module.exports = {
 | 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 {
@@ -1612,11 +1403,8 @@ module.exports = {
     }
   };
   ```
   使用 MeritBPM.open()方法打开流程
   Grid.vue 完整代码如下：
   ```html
   <template>
     <el-container>
@@ -1738,7 +1526,7 @@ module.exports = {
           })
             .then(() => {
               let ids = _this.selectedData.join(',');
-            _this.axios['cloud-system-bpm-travel']
+            _this.axios['<business-service-client>']
                 .post(this.HOST + '/deleteTravel/batch', {
                   ids: ids
                 })
@@ -1766,7 +1554,7 @@ module.exports = {
         //理想化查询
         queryIdealData() {
           var _this = this;
-          _this.axios['cloud-system-bpm-travel']
+          _this.axios['<business-service-client>']
           .post(this.HOST + '/page/ideal', {
               pageNumber: _this.currentPage,
               pageSize: _this.pageSize,
@@ -1840,25 +1628,16 @@ module.exports = {
     }
   </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;">
@@ -1866,7 +1645,7 @@ module.exports = {
       <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>
@@ -1962,7 +1741,7 @@ module.exports = {
         return {
           //流程ID
           procDefKey: 'travel_expense',
           //业务相关
           expense: {
             project: '',
@@ -1987,7 +1766,7 @@ module.exports = {
         };
       },
       computed: {},
       methods: {
         blurAmount() {
           let that = this;
@@ -2006,9 +1785,9 @@ module.exports = {
             params.callback(this.expense); //流程中的回调函数
             return;
           }
           // 初始化数据
-          _this.axios['cloud-system-bpm-travel']
+          _this.axios['<business-service-client>']
             .post(this.HOST + '/get-travel-expense', {
               id: params.id
             })
@@ -2023,7 +1802,7 @@ module.exports = {
         // 初始化部门，姓名，标题
         initUserInfo() {
           let _this = this;
-          this.axios['system-manager']
+          this.axios['<system-service-client>']
             .get('/api/ou/user/session')
             .then(result => {
               if (result) {
@@ -2044,7 +1823,7 @@ module.exports = {
           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) {
+          _this.axios['<business-service-client>'].post(this.HOST + '/save', _this.expense).then(function(res) {
             //流程相关
             // 保存成功,saveTravel返回expense对象的目的是：获取id,用于保存回调方法。
             //如果不返回expense对象，则获取不到id，保存回调方法失败
@@ -2064,23 +1843,15 @@ module.exports = {
     }
   </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;">
@@ -2214,7 +1985,7 @@ module.exports = {
         };
       },
       computed: {},
       methods: {
         init(params) {
           let _this = this;
@@ -2222,9 +1993,9 @@ module.exports = {
             params.callback(this.expense);
             return;
           }
           // 初始化数据
-          _this.axios['cloud-system-bpm-travel']
+          _this.axios['<business-service-client>']
             .post(this.HOST + '/get-travel-expense', {
               id: params.id
             })
@@ -2236,13 +2007,13 @@ module.exports = {
               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) {
+          _this.axios['<business-service-client>'].post(this.HOST + '/save', _this.expense).then(function(res) {
             Object.assign(_this.expense, res.data);
             _this.expense['bpmSubject'] = res.data.project;
             _this.expense['bpmUrgent'] = '普通';
@@ -2261,169 +2032,6 @@ module.exports = {
     }
   </style>
   ```
 只读表单(form-edit.vue)和编辑表单(form-read.vue)区别：
 相同点：流程部分相同，方法相同
 不同点：业务部分，不能做任何编辑，只能读，加上 disabled
-## 6. 启动前端应用工程
-### 6.1 npm 启动
-打开终端 ： Ctrl+Shift+`
-![image](./imgs/流程应用开发/1-37.jpg)
-在终端输入:npm run serve 命令, 按 "Enter" 执行命令
-```shell
-#工程启动
-npm run serve
-```
-启动成功
-![](./image/../imgs/流程应用开发/1-15.jpg)
-### 6.2 Nacos 配置
-在 nacos 中——>配置管理——>配置列表——>common-cloud-system-manage.properties 文件点击编辑
-添加如下内容，然后点击发布
-```
-meritdata.cloud.dev-web-prefix[1].applicationName=business-bpm-demo
-meritdata.cloud.dev-web-prefix[1].url=http://127.0.0.1:8087
-```
-![](./image/../imgs/流程应用开发/1-16.jpg)
-因为服务启动的端口为 8087,所以 nacos 配置中端口为 8087
-注意：meritdata.cloud.dev-web-prefix[1] 中 [1]，
-由于配置文件中已存在 meritdata.cloud.dev-web-prefix[0]。如果不存在则从[0]开始，逐渐累加。
-添加完配置后,点击发布
-### 6.3 查看结果
-先启动 cloud-system-bpm-engine,cloud-system-manage,
-cloud-system-gateway
-![](./image/../imgs/流程应用开发/1-42.jpg)
-先请求地址
-http://127.0.0.1/portal/#/login
-使用分配流程功能的用户登录
-账号：test1 密码：123456
-如果没有账户分配流程功能，请先给账户配置流程功能
-![](D:\文档区\6.9\imgs\流程模块介绍\Snipaste_2022-11-29_19-41-13.jpg)
-配置完账户后，使用账户登录
-登录之后再请求下面的访问地址
-差旅费访问地址
-访问地址: http://127.0.0.1: + 启动的前端端口 +/bpm-expense/expense/index.html#/
-本案例启动的前端端口为:8087
-先按照步骤 7 创建流程设计
-访问地址 URL :http://127.0.0.1:8087/bpm-expense/expense/index.html#/
-![](./image/../imgs/流程应用开发/1-27.jpg)
-## 7 流程设计
-### 7.1 添加流程表单
-![image-20211211110618542](./imgs\流程应用开发\image-20211211110618542.png)
-```
-表单链接地址 /bpm-expense/expense/index.html#/formEdit?id=businessId
-```
-![image-20211211110816246](./imgs\流程应用开发\image-20211211110816246.png)
-```
-表单链接地址 /bpm-expense/expense/index.html#/formRead?id=businessId
-```
-### 7.2 创建流程设计
-新建流程设计
-流程 ID: travel_expense
-![](./image/../imgs/流程应用开发/1-17.jpg)
-点击设计
-![](./image/../imgs/流程应用开发/1-18.jpg)
-点击右上角的设置按钮,对照填写数据
-如下图所示：
-```
-  表单链接地址 /bpm-expense/expense/index.html#/formRead?id=businessId
-```
-![](./image/../imgs/流程应用开发/1-19.jpg)
-说明：默认选择默认模式
-|门户模式| 说明|
-|---|---|
-|默认模式|无需配置，自动获取|
-|固定模式|开发时使用，设置固定 ip+端口|
-|门户模式|线上使用|
-进行设计流程
-![](./image/../imgs/流程应用开发/1-20.jpg)
-双击提交流程，对照图片添加配置
-- 基础配置
-  ![image-20211211111017796](./imgs\流程应用开发\image-20211211111017796.png)
-  ```
-  表单链接地址 /bpm-expense/expense/index.html#/formEdit?id=businessId
-  ```
-- 审批配置
-  ![](./image/../imgs/流程应用开发/1-22.jpg)
-- 人员配置
-  ![](./image/../imgs/流程应用开发/1-23.jpg)
-- 点击确认
-点击总监审批，对照图片添加配置
-- 基础配置
-  ![](./image/../imgs/流程应用开发/1-24.jpg)
-  ```
-  表单链接地址 /bpm-expense/expense/index.html#/formRead?id=businessId
-  ```
-- 审批配置
-  ![](./image/../imgs/流程应用开发/1-22.jpg)
-- 人员配置
-  ![](./image/../imgs/流程应用开发/1-25.jpg)
-- 点击确认
-### 7.3 发布流程
-- 点击发布，发布该流程实例
-  ![](./image/../imgs/流程应用开发/1-26.jpg)
-- 查看发布
-  ![](./image/../imgs/流程应用开发/1-33.jpg)
-### 7.4 创建流程实例
-- 创建流程实例，点击新建
-  ![](./image/../imgs/流程应用开发/1-27.jpg)
-- 进行填写数据，点击送审
-  ![](./image/../imgs/流程应用开发/1-28.jpg)