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

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

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