feat: 流程设计模块更新用户类型

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysExpressionController.java

@@ -0,0 +1,104 @@
+package com.ruoyi.web.controller.system;
+
+import java.util.List;
+import javax.servlet.http.HttpServletResponse;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.system.domain.SysExpression;
+import com.ruoyi.system.service.ISysExpressionService;
+import com.ruoyi.common.utils.poi.ExcelUtil;
+import com.ruoyi.common.core.page.TableDataInfo;
+
+/**
+ * 流程达式Controller
+ * 
+ * @author ruoyi
+ * @date 2022-12-12
+ */
+@RestController
+@RequestMapping("/system/expression")
+public class SysExpressionController extends BaseController
+{
+    @Autowired
+    private ISysExpressionService sysExpressionService;
+
+    /**
+     * 查询流程达式列表
+     */
+    @PreAuthorize("@ss.hasPermi('system:expression:list')")
+    @GetMapping("/list")
+    public TableDataInfo list(SysExpression sysExpression)
+    {
+        startPage();
+        List<SysExpression> list = sysExpressionService.selectSysExpressionList(sysExpression);
+        return getDataTable(list);
+    }
+
+    /**
+     * 导出流程达式列表
+     */
+    @PreAuthorize("@ss.hasPermi('system:expression:export')")
+    @Log(title = "流程达式", businessType = BusinessType.EXPORT)
+    @PostMapping("/export")
+    public void export(HttpServletResponse response, SysExpression sysExpression)
+    {
+        List<SysExpression> list = sysExpressionService.selectSysExpressionList(sysExpression);
+        ExcelUtil<SysExpression> util = new ExcelUtil<SysExpression>(SysExpression.class);
+        util.exportExcel(response, list, "流程达式数据");
+    }
+
+    /**
+     * 获取流程达式详细信息
+     */
+    @PreAuthorize("@ss.hasPermi('system:expression:query')")
+    @GetMapping(value = "/{id}")
+    public AjaxResult getInfo(@PathVariable("id") Long id)
+    {
+        return success(sysExpressionService.selectSysExpressionById(id));
+    }
+
+    /**
+     * 新增流程达式
+     */
+    @PreAuthorize("@ss.hasPermi('system:expression:add')")
+    @Log(title = "流程达式", businessType = BusinessType.INSERT)
+    @PostMapping
+    public AjaxResult add(@RequestBody SysExpression sysExpression)
+    {
+        return toAjax(sysExpressionService.insertSysExpression(sysExpression));
+    }
+
+    /**
+     * 修改流程达式
+     */
+    @PreAuthorize("@ss.hasPermi('system:expression:edit')")
+    @Log(title = "流程达式", businessType = BusinessType.UPDATE)
+    @PutMapping
+    public AjaxResult edit(@RequestBody SysExpression sysExpression)
+    {
+        return toAjax(sysExpressionService.updateSysExpression(sysExpression));
+    }
+
+    /**
+     * 删除流程达式
+     */
+    @PreAuthorize("@ss.hasPermi('system:expression:remove')")
+    @Log(title = "流程达式", businessType = BusinessType.DELETE)
+	@DeleteMapping("/{ids}")
+    public AjaxResult remove(@PathVariable Long[] ids)
+    {
+        return toAjax(sysExpressionService.deleteSysExpressionByIds(ids));
+    }
+}

ruoyi-flowable/src/main/java/com/ruoyi/flowable/controller/FlowDefinitionController.java

@@ -3,9 +3,12 @@ package com.ruoyi.flowable.controller;
 import com.ruoyi.common.core.domain.AjaxResult;
 import com.ruoyi.common.core.domain.entity.SysRole;
 import com.ruoyi.common.core.domain.entity.SysUser;
+import com.ruoyi.common.core.page.TableDataInfo;
 import com.ruoyi.system.domain.FlowProcDefDto;
 import com.ruoyi.flowable.domain.dto.FlowSaveXmlVo;
 import com.ruoyi.flowable.service.IFlowDefinitionService;
+import com.ruoyi.system.domain.SysExpression;
+import com.ruoyi.system.service.ISysExpressionService;
 import com.ruoyi.system.service.ISysRoleService;
 import com.ruoyi.system.service.ISysUserService;
 import io.swagger.annotations.Api;
@@ -13,6 +16,7 @@ import io.swagger.annotations.ApiOperation;
 import io.swagger.annotations.ApiParam;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
@@ -50,14 +54,15 @@ public class FlowDefinitionController {
 
     @Resource
     private ISysRoleService sysRoleService;
-
+    @Resource
+    private ISysExpressionService sysExpressionService;
 
     @GetMapping(value = "/list")
     @ApiOperation(value = "流程定义列表", response = FlowProcDefDto.class)
     public AjaxResult list(@ApiParam(value = "当前页码", required = true) @RequestParam Integer pageNum,
                            @ApiParam(value = "每页条数", required = true) @RequestParam Integer pageSize,
                            @ApiParam(value = "流程名称", required = false) @RequestParam(required = false) String name) {
-        return AjaxResult.success(flowDefinitionService.list(name,pageNum, pageSize));
+        return AjaxResult.success(flowDefinitionService.list(name, pageNum, pageSize));
     }
 
 
@@ -189,4 +194,11 @@ public class FlowDefinitionController {
         return AjaxResult.success(list);
     }
 
+    @ApiOperation(value = "指定流程达式列表")
+    @GetMapping("/expList")
+    public AjaxResult expList(SysExpression sysExpression) {
+        List<SysExpression> list = sysExpressionService.selectSysExpressionList(sysExpression);
+        return AjaxResult.success(list);
+    }
+
 }

ruoyi-system/src/main/java/com/ruoyi/system/domain/SysExpression.java

@@ -0,0 +1,83 @@
+package com.ruoyi.system.domain;
+
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+import com.ruoyi.common.annotation.Excel;
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * 流程达式对象 sys_expression
+ * 
+ * @author ruoyi
+ * @date 2022-12-12
+ */
+public class SysExpression extends BaseEntity
+{
+    private static final long serialVersionUID = 1L;
+
+    /** 表单主键 */
+    private Long id;
+
+    /** 表达式名称 */
+    @Excel(name = "表达式名称")
+    private String name;
+
+    /** 表达式内容 */
+    @Excel(name = "表达式内容")
+    private String expression;
+
+    /** 状态 */
+    private Integer status;
+
+    public void setId(Long id) 
+    {
+        this.id = id;
+    }
+
+    public Long getId() 
+    {
+        return id;
+    }
+    public void setName(String name) 
+    {
+        this.name = name;
+    }
+
+    public String getName() 
+    {
+        return name;
+    }
+    public void setExpression(String expression) 
+    {
+        this.expression = expression;
+    }
+
+    public String getExpression() 
+    {
+        return expression;
+    }
+    public void setStatus(Integer status) 
+    {
+        this.status = status;
+    }
+
+    public Integer getStatus() 
+    {
+        return status;
+    }
+
+    @Override
+    public String toString() {
+        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
+            .append("id", getId())
+            .append("name", getName())
+            .append("expression", getExpression())
+            .append("createTime", getCreateTime())
+            .append("updateTime", getUpdateTime())
+            .append("createBy", getCreateBy())
+            .append("updateBy", getUpdateBy())
+            .append("status", getStatus())
+            .append("remark", getRemark())
+            .toString();
+    }
+}

ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysExpressionMapper.java

@@ -0,0 +1,61 @@
+package com.ruoyi.system.mapper;
+
+import java.util.List;
+import com.ruoyi.system.domain.SysExpression;
+
+/**
+ * 流程达式Mapper接口
+ * 
+ * @author ruoyi
+ * @date 2022-12-12
+ */
+public interface SysExpressionMapper 
+{
+    /**
+     * 查询流程达式
+     * 
+     * @param id 流程达式主键
+     * @return 流程达式
+     */
+    public SysExpression selectSysExpressionById(Long id);
+
+    /**
+     * 查询流程达式列表
+     * 
+     * @param sysExpression 流程达式
+     * @return 流程达式集合
+     */
+    public List<SysExpression> selectSysExpressionList(SysExpression sysExpression);
+
+    /**
+     * 新增流程达式
+     * 
+     * @param sysExpression 流程达式
+     * @return 结果
+     */
+    public int insertSysExpression(SysExpression sysExpression);
+
+    /**
+     * 修改流程达式
+     * 
+     * @param sysExpression 流程达式
+     * @return 结果
+     */
+    public int updateSysExpression(SysExpression sysExpression);
+
+    /**
+     * 删除流程达式
+     * 
+     * @param id 流程达式主键
+     * @return 结果
+     */
+    public int deleteSysExpressionById(Long id);
+
+    /**
+     * 批量删除流程达式
+     * 
+     * @param ids 需要删除的数据主键集合
+     * @return 结果
+     */
+    public int deleteSysExpressionByIds(Long[] ids);
+}

ruoyi-system/src/main/java/com/ruoyi/system/service/ISysExpressionService.java

@@ -0,0 +1,61 @@
+package com.ruoyi.system.service;
+
+import java.util.List;
+import com.ruoyi.system.domain.SysExpression;
+
+/**
+ * 流程达式Service接口
+ * 
+ * @author ruoyi
+ * @date 2022-12-12
+ */
+public interface ISysExpressionService 
+{
+    /**
+     * 查询流程达式
+     * 
+     * @param id 流程达式主键
+     * @return 流程达式
+     */
+    public SysExpression selectSysExpressionById(Long id);
+
+    /**
+     * 查询流程达式列表
+     * 
+     * @param sysExpression 流程达式
+     * @return 流程达式集合
+     */
+    public List<SysExpression> selectSysExpressionList(SysExpression sysExpression);
+
+    /**
+     * 新增流程达式
+     * 
+     * @param sysExpression 流程达式
+     * @return 结果
+     */
+    public int insertSysExpression(SysExpression sysExpression);
+
+    /**
+     * 修改流程达式
+     * 
+     * @param sysExpression 流程达式
+     * @return 结果
+     */
+    public int updateSysExpression(SysExpression sysExpression);
+
+    /**
+     * 批量删除流程达式
+     * 
+     * @param ids 需要删除的流程达式主键集合
+     * @return 结果
+     */
+    public int deleteSysExpressionByIds(Long[] ids);
+
+    /**
+     * 删除流程达式信息
+     * 
+     * @param id 流程达式主键
+     * @return 结果
+     */
+    public int deleteSysExpressionById(Long id);
+}

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysExpressionServiceImpl.java

@@ -0,0 +1,96 @@
+package com.ruoyi.system.service.impl;
+
+import java.util.List;
+import com.ruoyi.common.utils.DateUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.ruoyi.system.mapper.SysExpressionMapper;
+import com.ruoyi.system.domain.SysExpression;
+import com.ruoyi.system.service.ISysExpressionService;
+
+/**
+ * 流程达式Service业务层处理
+ * 
+ * @author ruoyi
+ * @date 2022-12-12
+ */
+@Service
+public class SysExpressionServiceImpl implements ISysExpressionService 
+{
+    @Autowired
+    private SysExpressionMapper sysExpressionMapper;
+
+    /**
+     * 查询流程达式
+     * 
+     * @param id 流程达式主键
+     * @return 流程达式
+     */
+    @Override
+    public SysExpression selectSysExpressionById(Long id)
+    {
+        return sysExpressionMapper.selectSysExpressionById(id);
+    }
+
+    /**
+     * 查询流程达式列表
+     * 
+     * @param sysExpression 流程达式
+     * @return 流程达式
+     */
+    @Override
+    public List<SysExpression> selectSysExpressionList(SysExpression sysExpression)
+    {
+        return sysExpressionMapper.selectSysExpressionList(sysExpression);
+    }
+
+    /**
+     * 新增流程达式
+     * 
+     * @param sysExpression 流程达式
+     * @return 结果
+     */
+    @Override
+    public int insertSysExpression(SysExpression sysExpression)
+    {
+        sysExpression.setCreateTime(DateUtils.getNowDate());
+        return sysExpressionMapper.insertSysExpression(sysExpression);
+    }
+
+    /**
+     * 修改流程达式
+     * 
+     * @param sysExpression 流程达式
+     * @return 结果
+     */
+    @Override
+    public int updateSysExpression(SysExpression sysExpression)
+    {
+        sysExpression.setUpdateTime(DateUtils.getNowDate());
+        return sysExpressionMapper.updateSysExpression(sysExpression);
+    }
+
+    /**
+     * 批量删除流程达式
+     * 
+     * @param ids 需要删除的流程达式主键
+     * @return 结果
+     */
+    @Override
+    public int deleteSysExpressionByIds(Long[] ids)
+    {
+        return sysExpressionMapper.deleteSysExpressionByIds(ids);
+    }
+
+    /**
+     * 删除流程达式信息
+     * 
+     * @param id 流程达式主键
+     * @return 结果
+     */
+    @Override
+    public int deleteSysExpressionById(Long id)
+    {
+        return sysExpressionMapper.deleteSysExpressionById(id);
+    }
+}

ruoyi-system/src/main/resources/mapper/system/SysExpressionMapper.xml

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.system.mapper.SysExpressionMapper">
+    
+    <resultMap type="SysExpression" id="SysExpressionResult">
+        <result property="id"    column="id"    />
+        <result property="name"    column="name"    />
+        <result property="expression"    column="expression"    />
+        <result property="createTime"    column="create_time"    />
+        <result property="updateTime"    column="update_time"    />
+        <result property="createBy"    column="create_by"    />
+        <result property="updateBy"    column="update_by"    />
+        <result property="status"    column="status"    />
+        <result property="remark"    column="remark"    />
+    </resultMap>
+
+    <sql id="selectSysExpressionVo">
+        select id, name, expression, create_time, update_time, create_by, update_by, status, remark from sys_expression
+    </sql>
+
+    <select id="selectSysExpressionList" parameterType="SysExpression" resultMap="SysExpressionResult">
+        <include refid="selectSysExpressionVo"/>
+        <where>  
+            <if test="name != null  and name != ''"> and name like concat('%', #{name}, '%')</if>
+            <if test="expression != null  and expression != ''"> and expression = #{expression}</if>
+            <if test="status != null "> and status = #{status}</if>
+        </where>
+    </select>
+    
+    <select id="selectSysExpressionById" parameterType="Long" resultMap="SysExpressionResult">
+        <include refid="selectSysExpressionVo"/>
+        where id = #{id}
+    </select>
+        
+    <insert id="insertSysExpression" parameterType="SysExpression" useGeneratedKeys="true" keyProperty="id">
+        insert into sys_expression
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="name != null">name,</if>
+            <if test="expression != null">expression,</if>
+            <if test="createTime != null">create_time,</if>
+            <if test="updateTime != null">update_time,</if>
+            <if test="createBy != null">create_by,</if>
+            <if test="updateBy != null">update_by,</if>
+            <if test="status != null">status,</if>
+            <if test="remark != null">remark,</if>
+         </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="name != null">#{name},</if>
+            <if test="expression != null">#{expression},</if>
+            <if test="createTime != null">#{createTime},</if>
+            <if test="updateTime != null">#{updateTime},</if>
+            <if test="createBy != null">#{createBy},</if>
+            <if test="updateBy != null">#{updateBy},</if>
+            <if test="status != null">#{status},</if>
+            <if test="remark != null">#{remark},</if>
+         </trim>
+    </insert>
+
+    <update id="updateSysExpression" parameterType="SysExpression">
+        update sys_expression
+        <trim prefix="SET" suffixOverrides=",">
+            <if test="name != null">name = #{name},</if>
+            <if test="expression != null">expression = #{expression},</if>
+            <if test="createTime != null">create_time = #{createTime},</if>
+            <if test="updateTime != null">update_time = #{updateTime},</if>
+            <if test="createBy != null">create_by = #{createBy},</if>
+            <if test="updateBy != null">update_by = #{updateBy},</if>
+            <if test="status != null">status = #{status},</if>
+            <if test="remark != null">remark = #{remark},</if>
+        </trim>
+        where id = #{id}
+    </update>
+
+    <delete id="deleteSysExpressionById" parameterType="Long">
+        delete from sys_expression where id = #{id}
+    </delete>
+
+    <delete id="deleteSysExpressionByIds" parameterType="String">
+        delete from sys_expression where id in 
+        <foreach item="id" collection="array" open="(" separator="," close=")">
+            #{id}
+        </foreach>
+    </delete>
+</mapper>

ruoyi-ui/src/api/flowable/definition.js

@@ -53,6 +53,15 @@ export function roleList(query) {
   })
 }
 
+// 指定流程表达式
+export function expList(query) {
+  return request({
+    url: '/flowable/definition/expList',
+    method: 'get',
+    params: query
+  })
+}
+
 // 读取xml文件
 export function readXml(deployId) {
   return request({

ruoyi-ui/src/api/system/expression.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询流程达式列表
+export function listExpression(query) {
+  return request({
+    url: '/system/expression/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询流程达式详细
+export function getExpression(id) {
+  return request({
+    url: '/system/expression/' + id,
+    method: 'get'
+  })
+}
+
+// 新增流程达式
+export function addExpression(data) {
+  return request({
+    url: '/system/expression',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改流程达式
+export function updateExpression(data) {
+  return request({
+    url: '/system/expression',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除流程达式
+export function delExpression(id) {
+  return request({
+    url: '/system/expression/' + id,
+    method: 'delete'
+  })
+}

ruoyi-ui/src/components/Process/PropertyPanel.vue

@@ -8,6 +8,7 @@
       :modeler="modeler"
       :users="users"
       :groups="groups"
+      :exps="exps"
       :categorys="categorys"
       @dataType="dataType"
     />
@@ -38,6 +39,10 @@ export default {
       type: Array,
       required: true
     },
+    exps: {
+      type: Array,
+      default: () => []
+    },
     modeler: {
       type: Object,
       required: true

ruoyi-ui/src/components/Process/common/parseElement.js

@@ -41,10 +41,19 @@ export function userTaskParse(obj) {
   for (const key in obj) {
     if (key === 'candidateUsers') {
       obj.userType = 'candidateUsers'
-      obj[key] = obj[key]?.split(',') || []
+      // if (obj[key].toString().indexOf(",") !== -1) {
+      //
+      // }else {
+      //   obj[key] = obj[key].toString()?.split(',') || []
+      // }
     } else if (key === 'candidateGroups') {
       obj.userType = 'candidateGroups'
       obj[key] = obj[key]?.split(',') || []
+      // if (obj[key].toString().indexOf(",") !== -1) {
+      //
+      // }else {
+      //   obj[key] = obj[key].toString()?.split(',') || []
+      // }
     } else if (key === 'assignee') {
       obj.userType = 'assignee'
     }

ruoyi-ui/src/components/Process/components/nodePanel/task.vue

@@ -16,6 +16,32 @@
           <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
         </el-badge>
       </template>
+      <template #checkSingleUser>
+          <el-input placeholder="请选择人员" class="input-with-select" v-model="checkValues">
+            <!--指定用户-->
+            <el-button slot="append" size="mini" icon="el-icon-user" @click="singleUserCheck"></el-button>
+            <el-divider direction="vertical"></el-divider>
+            <!--选择表达式-->
+            <el-button slot="append" size="mini" icon="el-icon-tickets" @click="singleExpCheck('assignee')"></el-button>
+          </el-input>
+      </template>
+      <template #checkMultipleUser>
+          <el-input placeholder="请选择候选用户" class="input-with-select" v-model="checkValues">
+            <!--候选用户-->
+            <el-button slot="append" size="mini" icon="el-icon-user" @click="multipleUserCheck"></el-button>
+            <el-divider direction="vertical"></el-divider>
+            <!--选择表达式-->
+            <el-button slot="append" size="mini" icon="el-icon-tickets" @click="singleExpCheck('candidateUsers')"></el-button>
+          </el-input>
+      </template>
+      <template #checkRole>
+        <el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">
+          <!--候选角色-->
+<!--          <el-button slot="append" size="mini" icon="el-icon-user" @click="singleRoleCheck"></el-button>-->
+<!--          <el-divider direction="vertical"></el-divider>-->
+          <el-button slot="append" size="mini" icon="el-icon-tickets" @click="multipleRoleCheck"></el-button>
+        </el-input>
+      </template>
     </x-form>
     <executionListenerDialog
       v-if="dialogName === 'executionListenerDialog'"
@@ -35,6 +61,48 @@
       :modeler="modeler"
       @close="finishMultiInstance"
     />
+    <!--选择人员-->
+    <el-dialog
+      title="选择人员"
+      :visible.sync="userVisible"
+      width="60%"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+    <flow-user :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="userVisible = false">取 消</el-button>
+      <el-button type="primary" @click="checkUserComplete">确 定</el-button>
+    </span>
+    </el-dialog>
+    <!--选择表达式-->
+    <el-dialog
+      title="选择表达式"
+      :visible.sync="expVisible"
+      width="60%"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <flow-exp @handleSingleExpSelect="handleSingleExpSelect"></flow-exp>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="expVisible = false">取 消</el-button>
+      <el-button type="primary" @click="checkExpComplete">确 定</el-button>
+    </span>
+    </el-dialog>
+    <!--选择角色-->
+    <el-dialog
+      title="选择候选角色"
+      :visible.sync="roleVisible"
+      width="60%"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <flow-role :checkType="checkType" @handleRoleSelect="handleRoleSelect"></flow-role>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="roleVisible = false">取 消</el-button>
+      <el-button type="primary" @click="checkRoleComplete">确 定</el-button>
+    </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -44,11 +112,19 @@ import executionListenerDialog from './property/executionListener'
 import taskListenerDialog from './property/taskListener'
 import multiInstanceDialog from './property/multiInstance'
 import { commonParse, userTaskParse } from '../../common/parseElement'
+import FlowUser from '@/components/flow/User'
+import FlowRole from '@/components/flow/Role'
+import FlowExp from '@/components/flow/Expression'
+import log from "@/views/monitor/job/log";
+
 export default {
   components: {
     executionListenerDialog,
     taskListenerDialog,
-    multiInstanceDialog
+    multiInstanceDialog,
+    FlowUser,
+    FlowRole,
+    FlowExp,
   },
   mixins: [mixinPanel],
   props: {
@@ -59,6 +135,10 @@ export default {
     groups: {
       type: Array,
       required: true
+    },
+    exps: {
+      type: Array,
+      required: true
     }
   },
   data() {
@@ -66,7 +146,7 @@ export default {
       userTypeOption: [
         { label: '指定人员', value: 'assignee' },
         { label: '候选人员', value: 'candidateUsers' },
-        { label: '候选组', value: 'candidateGroups' }
+        { label: '候选角色', value: 'candidateGroups' }
       ],
       dataTypeOption: [
         { label: '固定', value: 'fixed' },
@@ -76,7 +156,23 @@ export default {
       executionListenerLength: 0,
       taskListenerLength: 0,
       hasMultiInstance: false,
-      formData: {}
+      userVisible: false,
+      roleVisible: false,
+      expVisible: false,
+      formData: {},
+      assignee: null,
+      candidateUsers: "",
+      candidateGroups: null,
+      // 选类型
+      checkType: 'single',
+      // 选中的值
+      checkValues: null,
+      // 用户列表
+      userList: this.users,
+      groupList: this.groups,
+      expList: this.exps,
+      // 表达式类型
+      expType: null,
     }
   },
   computed: {
@@ -116,63 +212,65 @@ export default {
           {
             xType: 'select',
             name: 'userType',
-            label: '人员类型',
+            label: '用户类型',
             dic: _this.userTypeOption,
             show: !!_this.showConfig.userType
           },
-          {
-            xType: 'radio',
-            name: 'dataType',
-            label: '指定方式',
-            dic: _this.dataTypeOption,
-            show: !!_this.showConfig.dataType,
-            rules: [{ required: true, message: '请指定方式' }]
-          },
           // {
-          //   xType: 'input',
+          //   xType: 'radio',
-          //   name: 'assigneeFixed',
+          //   name: 'dataType',
-          //   label: '指定人(表达式)',
+          //   label: '指定方式',
-          //   show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
+          //   dic: _this.dataTypeOption,
+          //   show: !!_this.showConfig.dataType,
+          //   rules: [{ required: true, message: '请指定方式' }]
           // },
           // {
-          //   xType: 'input',
+          //   xType: 'select',
-          //   name: 'candidateUsersFixed',
+          //   name: 'assignee',
-          //   label: '候选人(表达式)',
+          //   label: '指定人员',
-          //   show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
+          //   allowCreate: true,
+          //   filterable: true,
+          //   dic: { data: _this.users, label: 'nickName', value: 'userId' },
+          //   show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
           // },
           // {
-          //   xType: 'input',
+          //   xType: 'select',
-          //   name: 'candidateGroupsFixed',
+          //   name: 'candidateUsers',
-          //   label: '候选组(表达式)',
+          //   label: '候选人员',
-          //   show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
+          //   multiple: true,
+          //   allowCreate: true,
+          //   filterable: true,
+          //   dic: { data: _this.users, label: 'nickName', value: 'userId' },
+          //   show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
+          // },
+          // {
+          //   xType: 'select',
+          //   name: 'candidateGroups',
+          //   label: '候选组',
+          //   multiple: true,
+          //   allowCreate: true,
+          //   filterable: true,
+          //   dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
+          //   show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
           // },
           {
-            xType: 'select',
+            xType: 'slot',
-            name: 'assignee',
+            name: 'checkSingleUser',
             label: '指定人员',
-            allowCreate: true,
+            // rules: [{ required: true, message: '指定人员不能为空' }],
-            filterable: true,
+            // dic: { data: _this.users, label: 'nickName', value: 'userId' },
-            dic: { data: _this.users, label: 'nickName', value: 'userId' },
             show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
           },
           {
-            xType: 'select',
+            xType: 'slot',
-            name: 'candidateUsers',
+            name: 'checkMultipleUser',
             label: '候选人员',
-            multiple: true,
-            allowCreate: true,
-            filterable: true,
-            dic: { data: _this.users, label: 'nickName', value: 'userId' },
             show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
           },
           {
-            xType: 'select',
+            xType: 'slot',
-            name: 'candidateGroups',
+            name: 'checkRole',
-            label: '候选组',
+            label: '候选角色',
-            multiple: true,
-            allowCreate: true,
-            filterable: true,
-            dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
             show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
           },
           {
@@ -280,50 +378,51 @@ export default {
         types.forEach(type => {
           delete this.element.businessObject.$attrs[`flowable:${type}`]
           delete this.formData[type]
+          this.updateProperties({'flowable:userType': type})
         })
       }
     },
-    // 动态选择流程执行人
+    // // 动态选择流程执行人
-    'formData.dataType': function(val) {
+    // 'formData.dataType': function(val) {
-      const that = this
+    //   const that = this
-      this.updateProperties({'flowable:dataType': val})
+    //   this.updateProperties({'flowable:dataType': val})
-      if (val === 'dynamic') {
+    //   if (val === 'dynamic') {
-        this.updateProperties({'flowable:userType': that.formData.userType})
+    //     this.updateProperties({'flowable:userType': that.formData.userType})
-      }
+    //   }
-      // 切换时 删除之前选中的值
+    //   // 切换时 删除之前选中的值
-      const types = ['assignee', 'candidateUsers', 'candidateGroups']
+    //   const types = ['assignee', 'candidateUsers', 'candidateGroups']
-      types.forEach(type => {
+    //   types.forEach(type => {
-        delete this.element.businessObject.$attrs[`flowable:${type}`]
+    //     delete this.element.businessObject.$attrs[`flowable:${type}`]
-        delete this.formData[type]
+    //     delete this.formData[type]
-      })
+    //   })
-      // 传值到父组件
+    //   // 传值到父组件
-      const params = {
+    //   const params = {
-        dataType: val,
+    //     dataType: val,
-        userType: this.formData.userType
+    //     userType: this.formData.userType
-      }
+    //   }
-      this.$emit('dataType', params)
+    //   this.$emit('dataType', params)
-    },
+    // },
-    'formData.assignee': function(val) {
+    // 'formData.assignee': function(val) {
-        if (this.formData.userType !== 'assignee') {
+    //     if (this.formData.userType !== 'assignee') {
-          delete this.element.businessObject.$attrs[`flowable:assignee`]
+    //       delete this.element.businessObject.$attrs[`flowable:assignee`]
-          return
+    //       return
-        }
+    //     }
-        this.updateProperties({'flowable:assignee': val})
+    //     this.updateProperties({'flowable:assignee': val})
-    },
+    // },
-    'formData.candidateUsers': function(val) {
+    // 'formData.candidateUsers': function(val) {
-        if (this.formData.userType !== 'candidateUsers') {
+    //     if (this.formData.userType !== 'candidateUsers') {
-          delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
+    //       delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
-          return
+    //       return
-        }
+    //     }
-        this.updateProperties({'flowable:candidateUsers': val?.join(',')})
+    //     this.updateProperties({'flowable:candidateUsers': val?.join(',')})
-    },
+    // },
-    'formData.candidateGroups': function(val) {
+    // 'formData.candidateGroups': function(val) {
-        if (this.formData.userType !== 'candidateGroups') {
+    //     if (this.formData.userType !== 'candidateGroups') {
-          delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
+    //       delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
-          return
+    //       return
-        }
+    //     }
-        this.updateProperties({'flowable:candidateGroups': val?.join(',')})
+    //     this.updateProperties({'flowable:candidateGroups': val?.join(',')})
-    },
+    // },
     'formData.async': function(val) {
       if (val === '') val = null
       this.updateProperties({ 'flowable:async': val })
@@ -384,6 +483,7 @@ export default {
     this.computedExecutionListenerLength()
     this.computedTaskListenerLength()
     this.computedHasMultiInstance()
+    this.getCheckValues()
   },
   methods: {
     computedExecutionListenerLength() {
@@ -401,6 +501,81 @@ export default {
         this.hasMultiInstance = false
       }
     },
+    // 数据回显
+    getCheckValues(){
+      const that = this;
+      console.log(that.element.businessObject,"this.element.businessObject")
+      const attrs = that.element.businessObject.$attrs;
+      const businessObject = that.element.businessObject;
+      // 指定用户
+      if (attrs.hasOwnProperty("flowable:assignee")){
+        const val = attrs["flowable:assignee"];
+        // 查找是否动态指定人员(选中流程表达式)
+        if (attrs["flowable:dataType"] === "dynamic"){
+          this.checkValues =  that.expList.find(item => item.id == val).name;
+        }else {
+          this.checkValues = that.userList.find(item => item.userId == val).nickName;
+        }
+        // 候选用户
+      } else if (attrs.hasOwnProperty("flowable:candidateUsers")) {
+        const val = attrs["flowable:candidateUsers"];
+        if (attrs["flowable:dataType"] === "dynamic") {
+          this.checkValues = that.expList.find(item => item.id == val).name;
+        } else {
+          const array = [];
+          const vals = val.split(',');
+          vals.forEach(key => {
+            const user = that.userList.find(item => item.userId == key)
+            if (user) {
+              array.push(user.nickName);
+            }
+          })
+          this.checkValues = array.join(',');
+      }
+        // if (val.indexOf(",") !== -1) {
+        //   const vals = val.split(',');
+        //   vals.forEach(key => {
+        //     const user = that.userList.find(item => item.userId == key)
+        //     if (user) {
+        //       array.push(user.nickName);
+        //     }
+        //   })
+        //   this.checkValues = array.join(',');
+        // }else {
+        //   const user = that.userList.find(item => item.userId == val);
+        //   this.checkValues = user.nickName;
+        // }
+      } else if (businessObject.hasOwnProperty("candidateGroups")){
+        // 候选角色信息
+        const val = businessObject["candidateGroups"];
+        if (attrs["flowable:dataType"] === "dynamic") {
+          this.checkValues = that.expList.find(item => item.id == val).name;
+        } else {
+          const array = [];
+          const vals = val.split(',');
+          vals.forEach(key => {
+            const role = that.groupList.find(item => item.roleId == key)
+            if (role) {
+              array.push(role.roleName);
+            }
+          })
+          this.checkValues = array.join(',');
+        }
+        // if (val.indexOf(",") !== -1) {
+        //   const vals = val.split(',');
+        //   vals.forEach(key => {
+        //     const role = that.groupList.find(item => item.roleId == key)
+        //     if (role) {
+        //       array.push(role.roleName);
+        //     }
+        //   })
+        //   this.checkValues = array.join(',');
+        // }else {
+        //   const role = that.groupList.find(item => item.roleId == val);
+        //   this.checkValues = role.roleName;
+        // }
+      }
+    },
     finishExecutionListener() {
       if (this.dialogName === 'executionListenerDialog') {
         this.computedExecutionListenerLength()
@@ -418,6 +593,93 @@ export default {
         this.computedHasMultiInstance()
       }
       this.dialogName = ''
+    },
+    /*单选人员*/
+    singleUserCheck(){
+      this.userVisible = true;
+      this.checkType = "single";
+    },
+    /*多选人员*/
+    multipleUserCheck(){
+      this.userVisible = true;
+      this.checkType = "multiple";
+    },
+    /*单选角色*/
+    singleRoleCheck(){
+      this.roleVisible = true;
+      this.checkType = "single";
+    },
+    /*多选角色*/
+    multipleRoleCheck(){
+      this.roleVisible = true;
+      this.checkType = "multiple";
+    },
+    /*单选表达式*/
+    singleExpCheck(expType){
+      this.expVisible = true;
+      this.expType = expType;
+    },
+    // 选中表达式
+    handleSingleExpSelect(selection){
+      this.deleteFlowAttar();
+      console.log(this.element.businessObject,"element.businessObject")
+      this.updateProperties({'flowable:dataType': 'dynamic'})
+      if ("assignee" === this.expType){
+        this.updateProperties({'flowable:assignee': selection.id.toString()});
+      }else if ("candidateUsers" === this.expType) {
+        this.updateProperties({'flowable:candidateUsers': selection.id.toString()});
+      }
+      this.checkValues = selection.name;
+      this.expType = null;
+    },
+    // 用户选中数据
+    handleUserSelect(selection) {
+      console.log(selection,"handleUserSelect")
+      const that = this;
+      if (selection) {
+        that.deleteFlowAttar();
+        this.updateProperties({'flowable:dataType': 'fixed'})
+        if (selection instanceof Array){
+          const userIds = selection.map(item => item.userId);
+          const nickName = selection.map(item => item.nickName);
+          that.updateProperties({'flowable:candidateUsers': userIds.join(',')})
+          that.checkValues = nickName.join(',');
+        }else {
+          that.updateProperties({'flowable:assignee': selection.userId})
+          that.checkValues = selection.nickName;
+        }
+      }
+    },
+    // 角色选中数据
+    handleRoleSelect(selection,name) {
+      const that = this;
+      if (selection && name) {
+        that.deleteFlowAttar();
+        this.updateProperties({'flowable:dataType': 'fixed'})
+        that.updateProperties({'flowable:candidateGroups': selection});
+        that.checkValues = name;
+      }
+    },
+    /*用户选中赋值*/
+    checkUserComplete(){
+      this.userVisible = false;
+      this.checkType = "";
+    },
+    /*候选角色选中赋值*/
+    checkRoleComplete(){
+      this.roleVisible = false;
+      this.checkType = "";
+      },
+    /*表达式选中赋值*/
+    checkExpComplete(){
+      this.expVisible = false;
+    },
+    // 删除节点
+    deleteFlowAttar(){
+      delete this.element.businessObject.$attrs[`flowable:dataType`]
+      delete this.element.businessObject.$attrs[`flowable:assignee`]
+      delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
+      delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
     }
   }
 }

ruoyi-ui/src/components/Process/index.vue

@@ -41,7 +41,7 @@
           <div ref="canvas" class="canvas" />
         </el-main>
         <el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
-          <panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" />
+          <panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" @dataType="dataType" />
         </el-aside>
       </el-container>
     </el-container>
@@ -79,6 +79,10 @@ export default {
       type: Array,
       default: () => []
     },
+    exps: {
+      type: Array,
+      default: () => []
+    },
     isView: {
       type: Boolean,
       default: false

ruoyi-ui/src/components/flow/Expression/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表达式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="expressionList" @current-change="handleSingleExpSelect">
+      <el-table-column  width="55" align="center" >
+        <template slot-scope="scope">
+          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+          <el-radio v-model="radioSelected" :label="scope.row.id">&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="表达式内容" align="center" prop="expression" />
+      <el-table-column label="备注" align="center" prop="remark" />
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listExpression, getExpression, delExpression, addExpression, updateExpression } from "@/api/system/expression";
+
+export default {
+  name: "Expression",
+  dicts: ['sys_common_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程达式表格数据
+      expressionList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        expression: null,
+        status: null,
+      },
+      radioSelected:null
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程达式列表 */
+    getList() {
+      this.loading = true;
+      listExpression(this.queryParams).then(response => {
+        this.expressionList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 单选框选中数据
+    handleSingleExpSelect(selection) {
+      this.radioSelected = selection.id;//点击当前行时,radio同样有选中效果
+      // console.log( this.radioSelected ,"handleSingleExpSelect");
+      this.$emit('handleSingleExpSelect',selection);
+    },
+  }
+};
+</script>

ruoyi-ui/src/components/flow/Role/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          placeholder="请输入角色名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table  v-if="selectType === 'multiple'" v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table v-else v-loading="loading" :data="roleList" @current-change="handleSingleRoleSelect">
+      <el-table-column  width="55" align="center" >
+        <template slot-scope="scope">
+          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+          <el-radio v-model="radioSelected" :label="scope.row.roleId">&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
+import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+
+export default {
+  name: "FlowRole",
+  dicts: ['sys_normal_disable'],
+  // 接受父组件的值
+  props: {
+    checkType: String,
+    default: 'multiple',
+    required: false
+  },
+  data() {
+    return {
+      selectType: this.checkType,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 日期范围
+      dateRange: [],
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: "1",
+          label: "全部数据权限"
+        },
+        {
+          value: "2",
+          label: "自定数据权限"
+        },
+        {
+          value: "3",
+          label: "本部门数据权限"
+        },
+        {
+          value: "4",
+          label: "本部门及以下数据权限"
+        },
+        {
+          value: "5",
+          label: "仅本人数据权限"
+        }
+      ],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      radioSelected:''
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 多选框选中数据
+    handleRoleSelect(selection) {
+      // this.ids = selection.map(item => item.userId);
+      this.radioSelected = selection.roleId;//点击当前行时,radio同样有选中效果
+      console.log(selection,"handleRoleSelect");
+      this.$emit('handleRoleSelect', selection);
+
+    },
+    // 多选框选中数据
+    handleMultipleRoleSelect(selection) {
+      this.ids = selection.map(item => item.roleId);
+      const nameList = selection.map(item => item.roleName);
+      console.log( this.ids,"handleRoleSelect");
+      this.$emit('handleRoleSelect',this.ids.join(','),nameList.join(','));
+    },
+    // 单选框选中数据
+    handleSingleRoleSelect(selection) {
+      this.radioSelected = selection.roleId;//点击当前行时,radio同样有选中效果
+      const name = selection.roleName;//点击当前行时,radio同样有选中效果
+      console.log(this.radioSelected.toString() ,"handleRoleSelect");
+      this.$emit('handleRoleSelect',this.radioSelected.toString(),name);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.handleQuery();
+    },
+  }
+};
+</script>
+<style>
+/*隐藏radio展示的label及本身自带的样式*/
+.el-radio__label{
+  display:none;
+}
+</style>

ruoyi-ui/src/components/flow/User/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="6" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            placeholder="请输入部门名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="18" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="phonenumber">
+            <el-input
+              v-model="queryParams.phonenumber"
+              placeholder="请输入手机号码"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table v-if="selectType === 'multiple'" v-loading="loading" :data="userList" @selection-change="handleMultipleUserSelect">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+        </el-table>
+        <el-table v-else v-loading="loading" :data="userList" @current-change="handleSingleUserSelect">
+          <el-table-column  width="55" align="center" >
+            <template slot-scope="scope">
+              <el-radio v-model="radioSelected" :label="scope.row.userId">&nbsp;</el-radio>
+            </template>
+          </el-table-column>
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+        </el-table>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page-sizes="[5,10]"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listUser, deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "FlowUser",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: { Treeselect },
+  // 接受父组件的值
+  props: {
+    checkType: String,
+    default: 'multiple',
+    required: false
+  },
+  data() {
+    return {
+      selectType: this.checkType,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      initPassword: undefined,
+      // 日期范围
+      dateRange: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+      radioSelected:null
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+    this.getConfigKey("sys.user.initPassword").then(response => {
+      this.initPassword = response.msg;
+    });
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleMultipleUserSelect(selection) {
+      this.$emit('handleUserSelect', selection);
+    },
+    // 单选框选中数据
+    handleSingleUserSelect(selection) {
+      this.radioSelected = selection.userId;//点击当前行时,radio同样有选中效果
+      this.$emit('handleUserSelect', selection.toString());
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.queryParams.deptId = undefined;
+      this.$refs.tree.setCurrentKey(null);
+      this.handleQuery();
+    },
+  }
+};
+</script>
+<style>
+/*隐藏radio展示的label及本身自带的样式*/
+.el-radio__label{
+  display:none;
+}
+</style>

ruoyi-ui/src/views/flowable/definition/model.vue

@@ -6,6 +6,7 @@
       :users="users"
       :groups="groups"
       :categorys="categorys"
+      :exps="exps"
       :is-view="false"
       @save="save"
       @showXML="showXML"
@@ -24,7 +25,7 @@
   </div>
 </template>
 <script>
-import {readXml, roleList, saveXml, userList} from "@/api/flowable/definition";
+import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
 import bpmnModeler from '@/components/Process/index'
 import vkbeautify from 'vkbeautify'
 import Hljs from 'highlight.js'
@@ -55,6 +56,7 @@ export default {
       users: [],
       groups: [],
       categorys: [],
+      exps: [],
 
     };
   },
@@ -112,12 +114,14 @@ export default {
         })
         this.groups = res.data;
       });
+      expList().then(res =>{
+        this.exps = res.data;
+      });
     },
     /** 展示xml */
     showXML(data){
       this.xmlTitle = 'xml查看';
       this.xmlOpen = true;
-      debugger
       this.xmlContent = vkbeautify.xml(data);
     },
     /** 获取数据类型 */

ruoyi-ui/src/views/flowable/task/finished/detail/flowview.vue

@@ -157,10 +157,6 @@ export default {
 };
 </script>
 <style lang="scss">
-  @import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
   .bjs-powered-by {
     display: none;
   }

ruoyi-ui/src/views/flowable/task/finished/detail/index.vue

@@ -75,20 +75,16 @@
 <script>
 import {flowRecord} from "@/api/flowable/finished";
 import Parser from '@/components/parser/Parser'
-import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
+import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
-import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
 import flow from '@/views/flowable/task/record/flow'
-import {treeselect} from "@/api/system/dept";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import Treeselect from "@riophae/vue-treeselect";
-import {listUser} from "@/api/system/user";
 
 export default {
   name: "Record",
   components: {
     Parser,
     flow,
-    Treeselect
   },
   props: {},
   data() {

ruoyi-ui/src/views/flowable/task/myProcess/detail/flowview.vue

@@ -157,10 +157,6 @@ export default {
 };
 </script>
 <style lang="scss">
-  @import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
   .bjs-powered-by {
     display: none;
   }

ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue

@@ -157,10 +157,6 @@ export default {
 };
 </script>
 <style lang="scss">
-  @import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
   .bjs-powered-by {
     display: none;
   }

ruoyi-ui/src/views/flowable/task/record/flowview.vue

@@ -157,10 +157,6 @@ export default {
 };
 </script>
 <style lang="scss">
-  @import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
   .bjs-powered-by {
     display: none;
   }

ruoyi-ui/src/views/flowable/task/todo/detail/flowview.vue

@@ -157,10 +157,6 @@ export default {
 };
 </script>
 <style lang="scss">
-  @import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
-  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
   .bjs-powered-by {
     display: none;
   }

ruoyi-ui/src/views/flowable/task/todo/detail/index.vue

@@ -5,7 +5,6 @@
           <span class="el-icon-document">基础信息</span>
           <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
         </div>
-
       <!--流程处理表单模块-->
       <el-col :span="16" :offset="6">
           <div>
@@ -65,12 +64,6 @@
                         {{item.comment.comment}}
                       </el-descriptions-item>
                     </el-descriptions>
-
-<!--                    <p  v-if="item.comment">-->
-<!--                      <el-tag type="success" v-if="item.comment.type === '1'">  {{item.comment.comment}}</el-tag>-->
-<!--                      <el-tag type="warning" v-if="item.comment.type === '2'">  {{item.comment.comment}}</el-tag>-->
-<!--                      <el-tag type="danger" v-if="item.comment.type === '3'">  {{item.comment.comment}}</el-tag>-->
-<!--                    </p>-->
                   </el-card>
                 </el-timeline-item>
               </el-timeline>
@@ -86,60 +79,62 @@
 
     <!--审批正常流程-->
     <el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
-      <el-form ref="taskForm" :model="taskForm" label-width="80px" >
+      <el-form ref="taskForm" :model="taskForm">
-        <el-form-item  v-if="checkSendUser" prop="targetKey">
+        <el-form-item v-if="checkSendUser" prop="targetKey">
-          <el-row :gutter="20">
+          <el-row :gutter="24">
-            <!--部门数据-->
+<!--            <flow-user @handleUserSelect="handleUserSelect"></flow-user>-->
-            <el-col :span="6" :xs="24">
+            <flow-role @handleRoleSelect="handleRoleSelect"></flow-role>
-              <h6>部门列表</h6>
+<!--            &lt;!&ndash;部门数据&ndash;&gt;-->
-              <div class="head-container">
+<!--            <el-col :span="6" :xs="24">-->
-                <el-input
+<!--              <h6>部门列表</h6>-->
-                  v-model="deptName"
+<!--              <div class="head-container">-->
-                  placeholder="请输入部门名称"
+<!--                <el-input-->
-                  clearable
+<!--                  v-model="deptName"-->
-                  size="small"
+<!--                  placeholder="请输入部门名称"-->
-                  prefix-icon="el-icon-search"
+<!--                  clearable-->
-                  style="margin-bottom: 20px"
+<!--                  size="small"-->
-                />
+<!--                  prefix-icon="el-icon-search"-->
-              </div>
+<!--                  style="margin-bottom: 20px"-->
-              <div class="head-container">
+<!--                />-->
-                <el-tree
+<!--              </div>-->
-                  :data="deptOptions"
+<!--              <div class="head-container">-->
-                  :props="defaultProps"
+<!--                <el-tree-->
-                  :expand-on-click-node="false"
+<!--                  :data="deptOptions"-->
-                  :filter-node-method="filterNode"
+<!--                  :props="defaultProps"-->
-                  ref="tree"
+<!--                  :expand-on-click-node="false"-->
-                  default-expand-all
+<!--                  :filter-node-method="filterNode"-->
-                  @node-click="handleNodeClick"
+<!--                  ref="tree"-->
-                />
+<!--                  default-expand-all-->
-              </div>
+<!--                  @node-click="handleNodeClick"-->
-            </el-col>
+<!--                />-->
-            <el-col :span="10" :xs="24">
+<!--              </div>-->
-              <h6>待选人员</h6>
+<!--            </el-col>-->
-              <el-table
+<!--            <el-col :span="10" :xs="24">-->
-                ref="singleTable"
+<!--              <h6>待选人员</h6>-->
-                :data="userList"
+<!--              <el-table-->
-                border
+<!--                ref="singleTable"-->
-                style="width: 100%"
+<!--                :data="userList"-->
-                @selection-change="handleSelectionChange">
+<!--                border-->
-                <el-table-column type="selection" width="50" align="center" />
+<!--                style="width: 100%"-->
-                <el-table-column label="用户名" align="center" prop="nickName" />
+<!--                @selection-change="handleSelectionChange">-->
-                <el-table-column label="部门" align="center" prop="dept.deptName" />
+<!--                <el-table-column type="selection" width="50" align="center" />-->
-              </el-table>
+<!--                <el-table-column label="用户名" align="center" prop="nickName" />-->
-            </el-col>
+<!--                <el-table-column label="部门" align="center" prop="dept.deptName" />-->
-            <el-col :span="8" :xs="24">
+<!--              </el-table>-->
-              <h6>已选人员</h6>
+<!--            </el-col>-->
-              <el-tag
+<!--            <el-col :span="8" :xs="24">-->
-                v-for="(user,index) in userData"
+<!--              <h6>已选人员</h6>-->
-                :key="index"
+<!--              <el-tag-->
-                closable
+<!--                v-for="(user,index) in userData"-->
-                @close="handleClose(user)">
+<!--                :key="index"-->
-                {{user.nickName}} {{user.dept.deptName}}
+<!--                closable-->
-              </el-tag>
+<!--                @close="handleClose(user)">-->
-            </el-col>
+<!--                {{user.nickName}} {{user.dept.deptName}}-->
+<!--              </el-tag>-->
+<!--            </el-col>-->
           </el-row>
         </el-form-item>
-        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
+        <el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
           <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
         </el-form-item>
       </el-form>
@@ -188,6 +183,8 @@
 
 <script>
 import {flowRecord} from "@/api/flowable/finished";
+import FlowUser from '@/components/flow/User'
+import FlowRole from '@/components/flow/Role'
 import Parser from '@/components/parser/Parser'
 import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
 import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
@@ -202,7 +199,9 @@ export default {
   components: {
     Parser,
     flow,
-    Treeselect
+    Treeselect,
+    FlowUser,
+    FlowRole,
   },
   props: {},
   data() {
@@ -330,7 +329,25 @@ export default {
       }
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleUserSelect(selection) {
+      console.log(selection,"handleUserSelect")
+      if (selection) {
+        this.userData = selection
+        const selectVal = selection.map(item => item.userId);
+        if (selectVal instanceof Array) {
+          this.taskForm.values = {
+            "approval": selectVal.join(',')
+          }
+        } else {
+          this.taskForm.values = {
+            "approval": selectVal
+          }
+        }
+      }
+    },
+    // 多选框选中数据
+    handleRoleSelect(selection) {
+      console.log(selection,"handleRoleSelect")
       if (selection) {
         this.userData = selection
         const selectVal = selection.map(item => item.userId);
@@ -421,7 +438,7 @@ export default {
     /** 审批任务选择 */
     handleComplete() {
       this.completeOpen = true;
-      this.completeTitle = "审批流程";
+      this.completeTitle = "流程审批";
       this.getTreeselect();
     },
     /** 审批任务 */

ruoyi-ui/src/views/system/expression/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表达式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:expression:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:expression:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:expression:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:expression:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="expressionList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="表达式内容" align="center" prop="expression" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:expression:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:expression:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改流程达式对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入表达式名称" />
+        </el-form-item>
+        <el-form-item label="内容" prop="expression">
+          <el-input v-model="form.expression" placeholder="请输入表达式内容" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_common_status"
+              :key="dict.value"
+              :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listExpression, getExpression, delExpression, addExpression, updateExpression } from "@/api/system/expression";
+
+export default {
+  name: "FlowExp",
+  dicts: ['sys_common_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程达式表格数据
+      expressionList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        expression: null,
+        status: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程达式列表 */
+    getList() {
+      this.loading = true;
+      listExpression(this.queryParams).then(response => {
+        this.expressionList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        expression: null,
+        createTime: null,
+        updateTime: null,
+        createBy: null,
+        updateBy: null,
+        status: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加流程达式";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getExpression(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改流程达式";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateExpression(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addExpression(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项？').then(function() {
+        return delExpression(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/expression/export', {
+        ...this.queryParams
+      }, `expression_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>