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

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

@@ -0,0 +1,2429 @@
+---
+title: 应用开发平台流程管理使用攻略（二）：工作流程应用开发
+date: 2025.05.27
+categories:
+  - 开发攻略
+  - 6.13.2
+---
+
+# 应用开发平台流程管理使用攻略（二）：工作流程应用开发
+
+查看应用开发平台系统运行环境是否正常；环境搭建参考《应用开发平台使用攻略（一）：系统环境搭建》
+
+## 样例说明
+
+- <b>案例：</b> 差旅费报销功能的开发案例
+
+- <b>场景说明</b>
+
+  - 员工填写差旅费报销单，包括出差地，出差时间，出差费用等，将差旅费报销单提交给部门领导。
+  - 部门领导审批，如果审批结束（批准或者不批准），流程结束。如果需要员工修改申请，退回去给员工进行修改。
+
+- <b>流程应用后端工程：</b>business-bpm-demo
+  
+  - 功能简介：
+    - 1.根据条件查找差旅费
+    - 2.删除差旅费
+    - 3.修改差旅费
+    - 4.保存差旅费
+  
+- <b>流程应用前端工程：</b>business-bpm-expense
+
+  - 功能简介：
+    - 1.引入流程按钮
+    - 2.查看差旅费表单界面
+    - 3.编辑/新增差旅费表单界面
+
+- <b>参考文档</b>
+  《二次开发--流程接口》
+  
+  **以下为手动搭建方案，另一种方案直接利用代码生成工具生成流程前后端应用，具体生成指导见代码生成工具文档**。
+
+## 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>
+        <groupId>com.meritdata.cloud</groupId>
+        <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"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <parent>
+        <artifactId>cloud-system-bpm</artifactId>
+        <groupId>com.meritdata.cloud</groupId>
+        <version>${cloud-system-bpm.version}</version>
+    </parent>
+    <modelVersion>4.0.0</modelVersion>
+
+    <artifactId>business-bpm-demo</artifactId>
+
+    <dependencies>
+        <dependency>
+            <groupId>com.meritdata.cloud</groupId>
+            <artifactId>cloud-starter-core</artifactId>
+            <version>${cloud-starter-core.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.meritdata.cloud</groupId>
+            <artifactId>cloud-starter-dbinit</artifactId>
+            <version>${cloud-starter-dbinit.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+            <optional>true</optional>
+        </dependency>
+        <dependency>
+            <groupId>com.meritdata.cloud</groupId>
+            <artifactId>cloud-system-bpm-module-core</artifactId>
+            <version>${cloud-system-bpm-module-core.version}</version>
+        </dependency>
+        <!--QueryDSL支持-->
+        <dependency>
+            <groupId>com.querydsl</groupId>
+            <artifactId>querydsl-apt</artifactId>
+            <scope>provided</scope>
+            <exclusions>
+                <exclusion>
+                    <groupId>org.javassist</groupId>
+                    <artifactId>javassist</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+        <!--QueryDSL支持-->
+        <dependency>
+            <groupId>com.querydsl</groupId>
+            <artifactId>querydsl-jpa</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+            <version>1.16.10</version>
+            <scope>provided</scope>
+        </dependency>
+    </dependencies>
+    <build>
+        <!--使配置文件可以直接读取pom中的系统参数 -->
+        <resources>
+            <resource>
+                <directory>src/main/resources</directory>
+                <filtering>true</filtering>
+            </resource>
+        </resources>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <configuration>
+                    <!--fork :  如果没有该项配置，肯定devtools不会起作用，即应用不会restart -->
+                    <fork>true</fork>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>net.alchim31.maven</groupId>
+                <artifactId>yuicompressor-maven-plugin</artifactId>
+                <version>1.3.0</version>
+                <executions>
+                    <execution>
+                        <phase>prepare-package</phase>
+                        <goals>
+                            <goal>compress</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                <configuration>
+                    <encoding>UTF-8</encoding>
+                    <jswarn>false</jswarn>
+                    <nosuffix>true</nosuffix>
+                    <linebreakpos>-1</linebreakpos>
+                    <force>true</force>
+                    <includes>
+                        <include>**/*.css</include>
+                        <include>**/*.js</include>
+                    </includes>
+                </configuration>
+            </plugin>
+            <!-- css、js文件打包后添加版本号插件 -->
+            <plugin>
+                <groupId>com.google.code.maven-replacer-plugin</groupId>
+                <artifactId>replacer</artifactId>
+                <version>1.5.3</version>
+                <executions>
+                    <execution>
+                        <phase>prepare-package</phase>
+                        <goals>
+                            <goal>replace</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                <configuration>
+                    <basedir>${build.directory}</basedir>
+                    <includes>
+                        <include>**/*.ftl</include>
+                    </includes>
+                    <replacements>
+                        <replacement>
+                            <token>\.css\"</token>
+                            <value>.css?v=${maven.build.timestamp}\"</value>
+                        </replacement>
+                        <replacement>
+                            <token>\.css\'</token>
+                            <value>.css?v=${maven.build.timestamp}\'</value>
+                        </replacement>
+                        <replacement>
+                            <token>\.js\"</token>
+                            <value>.js?v=${maven.build.timestamp}\"</value>
+                        </replacement>
+                        <replacement>
+                            <token>\.js\'</token>
+                            <value>.js?v=${maven.build.timestamp}\'</value>
+                        </replacement>
+                    </replacements>
+                </configuration>
+            </plugin>
+            <!--因为是类型安全的，所以还需要加上Maven APT plugin，使用 APT 自动生成一些类:-->
+            <plugin>
+                <groupId>com.mysema.maven</groupId>
+                <artifactId>apt-maven-plugin</artifactId>
+                <version>1.1.3</version>
+                <executions>
+                    <execution>
+                        <phase>generate-sources</phase>
+                        <goals>
+                            <goal>process</goal>
+                        </goals>
+                        <configuration>
+                            <outputDirectory>target/generated-sources</outputDirectory>
+                            <processor>com.querydsl.apt.jpa.JPAAnnotationProcessor</processor>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+</project>
+```
+
+### 2.2 修改 bootstrap.properties 文件
+
+在 src 目录->resources 目录-> bootstrap.properties 文件
+
+修改 server.port = 8099
+防止端口冲突
+
+完整配置信息如下:
+
+```properties
+#启动端口
+server.port=8099
+#nacos的启动地址，在nacos的启动日志中查看
+meritdata.cloud.nacos-addr=127.0.0.1:8848
+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.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.application.name=@project.artifactId@
+meritdata.cloud.product-name=cloud-system-framework
+spring.main.allow-bean-definition-overriding=true
+#日志文件最长保存添加
+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 文件，
+  点击包名 ——>鼠标右键 ——>点击 New ——> 选择 java class
+  ![](./imgs/流程应用开发/1-10.jpg)
+
+### 3.1 实体类
+
+| 类名          | 类型  | 父类                    | 说明                                                                                          |
+| ------------- | ----- | ----------------------- | --------------------------------------------------------------------------------------------- |
+| TravelExpense | class | 继承 CloudBaseEntity 类 | CloudBaseEntity 属于系统基础实体类，维护多租户标识 添加创建时间，更新时间，作者和更新人员信息 |
+
+完整代码如下:
+
+```java
+package com.meritdata.cloud.entity;
+import com.meritdata.cloud.base.entity.CloudBaseEntity;
+import lombok.Data;
+import org.hibernate.annotations.GenericGenerator;
+import javax.persistence.*;
+/**
+ * 出差费用报价单
+ */
+@Entity
+@Data
+@Table(name = "pf_bpm_travel_expense")
+@GenericGenerator(name = "jpa-uuid", strategy = "uuid")
+public class TravelExpense extends CloudBaseEntity {
+
+    @Id
+    @GeneratedValue(generator = "jpa-uuid")
+    @Column(name = "[ID]")
+    private String id;
+
+    /**
+     * 标题
+     */
+    @Column(name = "[PROJECT]")
+    private String project;
+
+    /**
+     * 所属部门
+     */
+    @Column(name = "[BELONG_DEPART]")
+    private String belongDepart;
+
+    /**
+     * 申请人
+     */
+    @Column(name = "[NAME]")
+    private String name;
+
+    /**
+     * 出差类型 0.项目支持，1.售前支撑
+     */
+    @Column(name = "[TYPE]")
+    private String type;
+
+    /**
+     * 金额
+     */
+    @Column(name = "[AMOUNT]")
+    private Double amount;
+
+    /**
+     * 出差目的地
+     */
+    @Column(name = "[DESTINATION]")
+    private String destination;
+
+    /**
+     * 出差事由
+     */
+    @Column(name = "[TRAVEL_REMARK]")
+    private String travel_remark;
+
+    /**
+     * 出差时间
+     */
+    @Column(name = "[TRAVEL_TIME]")
+    private Long travel_time;
+}
+
+```
+
+### 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 org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.querydsl.QuerydslPredicateExecutor;
+
+/**
+ * 查看单表
+ */
+public interface TravelExpenseRepository extends JpaRepository<TravelExpense, String>, QuerydslPredicateExecutor<TravelExpense> {
+
+}
+```
+
+### 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 javax.validation.constraints.NotNull;
+import java.util.List;
+import java.util.Map;
+
+public interface ITravelExpenseService {
+
+    /**
+     * 保存差旅费
+     * @return
+     */
+    TravelExpense saveTravelExpense(TravelExpense travelExpense);
+
+    /**
+     * 修改差旅费
+     */
+    TravelExpense updateTravelExpense(TravelExpense travelExpense);
+
+
+    /**
+     * 删除多条差旅费
+     * @param exampleIds
+     * @return
+     */
+    boolean deleteByIds(List<String> exampleIds);
+
+    /**
+     * 根据id查看单条
+     * @param id
+     * @return
+     */
+    TravelExpense getTravelExpense(String id);
+
+    /**
+     * page分页查询
+     * @param procDefKey
+     * @param bpmStatus
+     * @param pageSize
+     * @param pageNumber
+     * @param nextStartResults
+     * @param type
+     * @return
+     */
+    Object pageTravelExpense(@NotNull String procDefKey, @NotNull String bpmStatus, int pageSize, long pageNumber, Long nextStartResults, String type);
+    //理想化查询
+    GridView<Map> pageTravelExpenseIdeal(String procDefKey, String bpmStatus, Integer pageSize, Long pageNumber);
+}
+
+```
+
+#### 3.3.2 服务层实现
+
+| 类名              | 类型  | 父类                          |
+| ----------------- | ----- | ----------------------------- |
+| TravelExpenseImpl | class | 实现 ITravelExpenseService 类 |
+
+完整代码如下:
+
+```java
+package com.meritdata.cloud.service.impl;
+
+import com.alibaba.fastjson.JSON;
+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.repository.TravelExpenseRepository;
+import com.meritdata.cloud.resultmodel.ResultBody;
+import com.meritdata.cloud.service.ITravelExpenseService;
+import com.querydsl.core.types.ExpressionUtils;
+import com.querydsl.core.types.Predicate;
+import com.querydsl.jpa.impl.JPAQueryFactory;
+import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.beans.IntrospectionException;
+import java.beans.PropertyDescriptor;
+import java.lang.reflect.Field;
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+import java.util.*;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional
+public class TravelExpenseImpl implements ITravelExpenseService {
+
+    @Autowired
+     JPAQueryFactory jpaQueryFactory;
+
+    @Autowired
+     TravelExpenseRepository travelExpenseDao;
+
+    //引入流程
+    @Autowired
+    BpmEngine bpmEngine ;
+
+    /**
+     *
+     * @param procDefKey
+     * @param bpmStatus
+     * @param pageSize
+     * @param pageNumber
+     * @param nextStartResults
+     * @param type
+     * @return
+     */
+    @Override
+    public Object pageTravelExpense( String procDefKey,  String bpmStatus, int pageSize, long pageNumber, Long nextStartResults, String type) {
+
+        //流程代码
+        MainFormQueryDTO formQuery = new MainFormQueryDTO();
+        formQuery.setBpmStatus(bpmStatus); //流程状态
+        formQuery.setOrderFields(Lists.newArrayList(formQuery.new Field(MainFormQueryDTO.SORT_BY_UPDATE_TIME, true)));
+
+        //业务代码 ideal理想化查询
+        if ("ideal".equals(type)) {
+            return this.getIdealProcExample(procDefKey, formQuery, pageSize, pageNumber);
+        }
+        return new GridView<>();
+    }
+
+
+    @Override
+    public GridView<Map> pageTravelExpenseIdeal(String procDefKey, String bpmStatus, Integer pageSize, Long pageNumber) {
+        MainFormQueryDTO formQuery = new MainFormQueryDTO();
+        formQuery.setBpmStatus(bpmStatus);
+        formQuery.setOrderFields(Lists.newArrayList(formQuery.new Field(MainFormQueryDTO.SORT_BY_UPDATE_TIME, true)));
+        return getIdealProcExample(procDefKey, formQuery, pageSize, pageNumber);
+
+    }
+
+    @Override
+    public TravelExpense saveTravelExpense(TravelExpense travelExpense) {
+        return travelExpenseDao.save(travelExpense);
+    }
+
+    @Override
+    public TravelExpense updateTravelExpense(TravelExpense travelExpense) {
+        return travelExpenseDao.save(travelExpense) ;
+    }
+
+
+    @Override
+    public boolean deleteByIds(List<String> travelIds) {
+        QTravelExpense travelExpense = QTravelExpense.travelExpense;
+        Predicate predicate = travelExpense.id.in(travelIds);
+        Iterable<TravelExpense> all = travelExpenseDao.findAll(predicate);
+        return this.deleteList(all);
+    }
+
+    @Override
+    public TravelExpense getTravelExpense(String id) {
+        TravelExpense exampleById = travelExpenseDao.findById(id).get();
+        return exampleById;
+    }
+
+    /**
+     *理想化查询
+     * @param procDefKey 流程key
+     * @param formQueryDTO dto
+     * @param pageSize
+     * @param pageNumber
+     * @return
+     */
+    public  GridView<Map> getIdealProcExample(String procDefKey, MainFormQueryDTO formQueryDTO, long pageSize, long pageNumber) {
+
+            long nextStrartIdx =(pageNumber -1) * pageSize;
+            nextStrartIdx = nextStrartIdx < 0 ? 0:nextStrartIdx;
+            long total = 0;
+            // 流程实例获取 根据流程key和流程状态
+            ResultBody<GridView> resultBody = bpmEngine.queryMainForms(JSON.toJSONString(formQueryDTO), procDefKey, nextStrartIdx, pageSize);
+            List<Map> mainForms = new ArrayList<>();
+            if(null != resultBody && resultBody.isSuccess() && null != resultBody.getData()) {
+                    List<Map> rows = resultBody.getData().getRows();
+                    if (CollectionUtils.isNotEmpty(rows)) {
+                        mainForms.addAll(rows);
+                    }
+                    total = resultBody.getData().getTotal();
+            }
+
+            // 获取流程中的businessId(业务Id)
+            Map<String, Map> mainFormMap = new HashMap<String, Map>();
+            List<String> businessIdAll = new ArrayList<>();
+            for (Map map: mainForms) {
+                Object businessIdObj = map.get("businessId"); //获取到其中的业务id
+                if (null != businessIdObj && StringUtils.isNotBlank(businessIdObj.toString())) {
+                    String businessId = businessIdObj.toString();
+                    businessIdAll.add(businessId);
+                    mainFormMap.put(businessId,map);
+                }
+            }
+            //根据获取的业务id 查询业务数据
+            List<Map> result = null;
+            QTravelExpense travelExpense = QTravelExpense.travelExpense;
+            Predicate predicate = null;
+            predicate = ExpressionUtils.and(predicate,travelExpense.id.in(businessIdAll));
+            result = jpaQueryFactory.select(travelExpense)
+                    .from(travelExpense)
+                    .where(predicate)
+                    .orderBy(travelExpense.updateTime.desc())
+                    .fetch()
+                    .stream()
+                    .map(item ->{
+                        return this.covertMainFormToMap(mainFormMap,item);
+                    }).collect(Collectors.toList());
+
+
+        return new GridView<>(result,total);
+    }
+        //获取流程中未处理人，处理状态，处理节点
+    private Map covertMainFormToMap(Map<String, Map> mainFormMap, TravelExpense item)  {
+            Field[] fields=item.getClass().getDeclaredFields();
+            Map map = new HashMap();
+            for (Field field : fields) {
+                try {
+                    PropertyDescriptor pd =new PropertyDescriptor(field.getName(),item.getClass());
+                    Method method = pd.getReadMethod();
+                    map.put(field.getName(),method.invoke(item));
+                } catch (IntrospectionException | IllegalAccessException | InvocationTargetException e) {
+                }
+            }
+            Map mainform = mainFormMap.get(item.getId());
+            if (null != mainform) {
+                map.put("flowAuthorNames", mainform.get("flowAuthorNames"));
+                map.put("flowReaderIds", mainform.get("flowReaderIds"));
+                map.put("nodeNames", mainform.get("nodeNames"));
+                map.put("procDealStatus", mainform.get("procDealStatus"));
+            }
+            return map;
+        }
+
+     // 根据流程实例Ids删除流程实例
+    private  boolean deleteList(Iterable<TravelExpense> all) {
+            if (null != all) {
+                Iterator<TravelExpense> iterator = all.iterator();
+                List<String> businessIds = new ArrayList<>();
+                while (iterator.hasNext()) {
+                    String businessId = iterator.next().getId();
+                    businessIds.add(businessId);
+                }
+                if (CollectionUtils.isNotEmpty(businessIds)) {
+                    // 流程代码
+                    ResultBody<Boolean> resultBody = bpmEngine.deleteProcInsts(businessIds);
+                    if (null != resultBody && resultBody.isSuccess() && resultBody.getData()) {
+                        // 业务代码
+                        travelExpenseDao.deleteAll(all);
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+}
+```
+
+注意：添加完 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.resultmodel.ResultBody;
+import com.meritdata.cloud.service.ITravelExpenseService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import io.swagger.annotations.ApiParam;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.*;
+
+/**
+ * 差旅费报销流程
+ */
+@RestController
+@RequestMapping(value = "/api/travel-expense")
+@Api(value = "TravelExpenseController}", tags = "")
+public class TravelExpenseController {
+
+    @Autowired
+    private ITravelExpenseService travelExpenseService;
+
+    /**
+     * 修改
+     */
+    @PostMapping("/update")
+    @ApiOperation(value = "修改")
+    public ResultBody<TravelExpense> update(@RequestParam TravelExpense travelExpense) {
+        TravelExpense result = null;
+        try {
+            result = travelExpenseService.updateTravelExpense(travelExpense);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResultBody.failure(e.getMessage());
+        }
+        return ResultBody.success(result);
+    }
+
+    /**
+     * 新增
+     */
+    @PostMapping("/save")
+    @ApiOperation(value = "新增")
+    public ResultBody<TravelExpense> save(TravelExpense travelExpense) {
+        TravelExpense result = null;
+        try {
+            result = travelExpenseService.saveTravelExpense(travelExpense);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResultBody.failure(e.getMessage());
+        }
+
+        return ResultBody.success(result);
+    }
+
+
+    /**
+     * 批量删除
+     */
+    @PostMapping("/delete")
+    @ApiOperation(value = "批量删除")
+    public ResultBody<Boolean> remove(String ids) {
+        List<String> idList = Arrays.asList(StrUtil.split(ids, ","));
+        boolean result;
+        try {
+            result = travelExpenseService.deleteByIds(idList);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResultBody.failure(e.getMessage());
+        }
+
+        return ResultBody.success(result);
+    }
+
+    /**
+     * 获取单个差旅费流程
+     *
+     * @param id
+     * @return
+     */
+    @PostMapping("/get-travel-expense")
+    @ApiOperation(value = "获取单个差旅费流程")
+    public ResultBody<TravelExpense> getTravelExpense(String id) {
+        TravelExpense travelExpense = new TravelExpense();
+        try {
+            if (!"".equals(id)) {
+                travelExpense = travelExpenseService.getTravelExpense(id);
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResultBody.failure(e.getMessage());
+        }
+        return ResultBody.success(travelExpense);
+    }
+
+    /**
+     * 理想化查询
+     *
+     * @param procDefKey
+     * @param bpmStatus
+     * @param pageSize
+     * @param pageNumber
+     * @return
+     */
+    @RequestMapping(value = "/page/ideal", method = RequestMethod.POST)
+    public @ResponseBody
+    ResultBody<GridView<Map>> 
+        pageProcExampleIdeal(@RequestParam(name = "procDefKey") String procDefKey,
+                             @RequestParam(name = "bpmStatus") String bpmStatus,
+                             @RequestParam(name = "pageSize", required = false, defaultValue = "10") Integer pageSize,
+                             @RequestParam(name = "pageNumber", required = false, defaultValue = "1") Long pageNumber) {
+        GridView<Map> gridView = travelExpenseService.pageTravelExpenseIdeal(procDefKey, bpmStatus, pageSize, pageNumber);
+        return ResultBody.success(gridView);
+    }
+
+}
+```
+
+## 4. 启动后端应用工程
+
+### 4.1 启动后端工程服务
+
+配置启动 key 文件
+![](./imgs/流程应用开发/1-44.jpg)
+在 VM options 中配置 key 文件,key 文件在 merit_cloud 文件夹下的 key 文件夹下
+
+```
+  -DCLOUD_HOME= key路径
+```
+
+本案例中 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)
+
+启动后端应用
+选择 CloudBaseDemoProjectApplication,右键,选择 Run "CloudBaseDemoProjectApplication"
+![](./imgs/流程应用开发/1-11.jpg)
+启动成功
+![](./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)
+
+## 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
+
+## 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)