init

src/views/workflow/business/BusinessAdd.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button v-hasPerm="['workflow:business:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="业务编码" prop="businessCode">
+          <el-select v-model="form.businessCode" clearable filterable placeholder="请输入业务编码" @change="changeValue($event)">
+            <el-option
+              v-for="item in menuOptions"
+              :key="item.menuCode"
+              :label="item.menuCode"
+              :value="item.menuCode"
+            >
+              <span style="float: left">{{ '业务名称:' + item.menuName + '-业务编码:' + item.menuCode }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="业务审核用户组">
+          <el-select v-model="form.businessAuditGroup" placeholder="请选择审核用户组">
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.roleName"
+              :value="item.id"
+              :disabled="item.status === '0'"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程定义ID" prop="processDefinitionId">
+          <el-input v-model="form.processDefinitionId" placeholder="请输入流程定义ID" />
+        </el-form-item>
+        <el-form-item label="消息模板" prop="businessTempalte">
+          <el-input v-model="form.businessTempalte" type="textarea" placeholder="请输入消息模板,模板字段{nickname、datetime、businessName、businessKey}" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.id"
+              :label="dict.itemText"
+            >{{ dict.itemValue }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { addBusiness } from '@/api/workflow/business'
+import { listMenuForFlow } from '@/api/system/menu'
+import { listRole } from '@/api/system/role'
+
+export default {
+  name: 'BusinessAdd',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '业务流程配置新增',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {
+        status: '1'
+      },
+      // 表单校验
+      rules: {
+        businessCode: [
+          { required: true, message: '业务编码不能为空', trigger: 'blur' }
+        ],
+        processDefinitionId: [
+          { required: true, message: '流程定义ID不能为空', trigger: 'blur' }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      menuOptions: [],
+      roleOptions: []
+    }
+  },
+  created() {
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getMenuOptions()
+    this.getRoleList()
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    getMenuOptions() {
+      listMenuForFlow().then(response => {
+        if (response.success) {
+          this.menuOptions = response.data
+        }
+      })
+    },
+    getRoleList() {
+      listRole().then(response => {
+        if (response.success) {
+          this.roleOptions = response.data
+        }
+      })
+    },
+    changeValue(value) {
+      const obj = this.menuOptions.find(function(item) {
+        return item.menuCode === value
+      })
+      this.form.businessName = obj.menuName
+      this.form.businessComponent = obj.menuComponent
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          addBusiness(this.form).then(response => {
+            if (response.success) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(() => {
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+}
+</style>

src/views/workflow/business/BusinessDetail.vue

@@ -0,0 +1,140 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" label-width="80px" disabled>
+        <el-form-item label="业务编码" prop="businessCode">
+          <el-select v-model="form.businessCode" placeholder="请输入业务编码">
+            <el-option
+              v-for="item in menuOptions"
+              :key="item.menuCode"
+              :label="item.menuCode"
+              :value="item.menuCode"
+            >
+              <span style="float: left">{{ '业务名称:' + item.menuName + '-业务编码:' + item.menuCode }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="业务审核用户组">
+          <el-select v-model="form.businessAuditGroup" placeholder="请选择审核用户组">
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.roleName"
+              :value="item.id"
+              :disabled="item.status === '0'"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程定义ID" prop="processDefinitionId">
+          <el-input v-model="form.processDefinitionId" placeholder="请输入流程定义ID" />
+        </el-form-item>
+        <el-form-item label="消息模板" prop="businessTempalte">
+          <el-input v-model="form.businessTempalte" type="textarea" placeholder="请输入消息模板" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.id"
+              :label="dict.itemText"
+            >{{ dict.itemValue }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { getBusiness } from '@/api/workflow/business'
+import { listMenuForFlow } from '@/api/system/menu'
+import { listRole } from '@/api/system/role'
+
+export default {
+  name: 'BusinessDetail',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '业务流程配置详情',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 状态数据字典
+      statusOptions: [],
+      menuOptions: [],
+      roleOptions: []
+    }
+  },
+  created() {
+    console.log('id:' + this.data.id)
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getMenuOptions()
+    this.getRoleList()
+  },
+  mounted() {
+    this.getBusiness(this.data.id)
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    getBusiness: function(id) {
+      getBusiness(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+        }
+      })
+    },
+    getMenuOptions() {
+      listMenuForFlow().then(response => {
+        if (response.success) {
+          const { data } = response
+          this.menuOptions = data
+        }
+      })
+    },
+    getRoleList() {
+      listRole().then(response => {
+        if (response.success) {
+          this.roleOptions = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+}
+</style>

src/views/workflow/business/BusinessEdit.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button v-hasPerm="['workflow:business:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="业务编码" prop="businessCode">
+          <el-select v-model="form.businessCode" clearable filterable placeholder="请输入业务编码" @change="changeValue($event)">
+            <el-option
+              v-for="item in menuOptions"
+              :key="item.menuCode"
+              :label="item.menuCode"
+              :value="item.menuCode"
+            >
+              <span style="float: left">{{ '业务名称:' + item.menuName + '-业务编码:' + item.menuCode }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="业务审核用户组">
+          <el-select v-model="form.businessAuditGroup" placeholder="请选择审核用户组">
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.roleName"
+              :value="item.id"
+              :disabled="item.status === '0'"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程定义ID" prop="processDefinitionId">
+          <el-input v-model="form.processDefinitionId" placeholder="请输入流程定义ID" />
+        </el-form-item>
+        <el-form-item label="消息模板" prop="businessTempalte">
+          <el-input v-model="form.businessTempalte" type="textarea" placeholder="请输入消息模板,模板字段{nickname、datetime、businessName、businessKey}" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.id"
+              :label="dict.itemText"
+            >{{ dict.itemValue }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { getBusiness, updateBusiness } from '@/api/workflow/business'
+import { listMenuForFlow } from '@/api/system/menu'
+import { listRole } from '@/api/system/role'
+
+export default {
+  name: 'BusinessEdit',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '业务流程配置编辑',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        businessCode: [
+          { required: true, message: '业务编码不能为空', trigger: 'blur' }
+        ],
+        processDefinitionId: [
+          { required: true, message: '流程定义ID不能为空', trigger: 'blur' }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      menuOptions: [],
+      roleOptions: []
+    }
+  },
+  created() {
+    console.log('id:' + this.data.id)
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getMenuOptions()
+    this.getRoleList()
+  },
+  mounted() {
+    this.getBusiness(this.data.id)
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    getBusiness: function(id) {
+      getBusiness(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+        }
+      })
+    },
+    getMenuOptions() {
+      listMenuForFlow().then(response => {
+        if (response.success) {
+          const { data } = response
+          this.menuOptions = data
+        }
+      })
+    },
+    getRoleList() {
+      listRole().then(response => {
+        if (response.success) {
+          this.roleOptions = response.data
+        }
+      })
+    },
+    changeValue(value) {
+      const obj = this.menuOptions.find(function(item) {
+        return item.menuCode === value
+      })
+      this.form.businessName = obj.menuName
+      this.form.businessComponent = obj.menuComponent
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          updateBusiness(this.form).then(response => {
+            if (response.success) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(() => {
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+}
+</style>

src/views/workflow/business/BusinessList.vue

@@ -0,0 +1,336 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="业务编码" prop="businessCode">
+        <el-input
+          v-model="queryParams.businessCode"
+          placeholder="请输入业务编码"
+          clearable
+          size="small"
+          @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-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <el-button-group>
+          <el-button
+            v-hasPerm="['workflow:business:add']"
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+          >新增</el-button>
+          <el-button
+            v-hasPerm="['workflow:business:refresh']"
+            type="warning"
+            icon="el-icon-refresh"
+            size="mini"
+            @click="handleCacheRefresh"
+          >刷新缓存</el-button>
+        </el-button-group>
+      </el-col>
+      <el-col :span="12">
+        <div class="right-toolbar">
+          <el-tooltip content="密度" effect="dark" placement="top">
+            <el-dropdown trigger="click" @command="handleCommand">
+              <el-button circle size="mini">
+                <svg-icon class-name="size-icon" icon-class="colum-height" />
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="medium">正常</el-dropdown-item>
+                <el-dropdown-item command="small">中等</el-dropdown-item>
+                <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-tooltip content="刷新" effect="dark" placement="top">
+            <el-button circle size="mini" @click="handleRefresh">
+              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="列设置" effect="dark" placement="top">
+            <el-popover placement="bottom" width="100" trigger="click">
+              <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                <el-checkbox
+                  v-for="(item, index) in tableColumns"
+                  :key="index"
+                  :label="item.prop"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+              <span slot="reference">
+                <el-button circle size="mini">
+                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                </el-button>
+              </span>
+            </el-popover>
+          </el-tooltip>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :size="tableSize"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-popover
+            placement="left"
+            trigger="click"
+          >
+            <el-button
+              v-hasPerm="['workflow:business:edit']"
+              size="mini"
+              type="text"
+              icon="el-icon-edit-outline"
+              @click="handleEdit(scope.row)"
+            >修改</el-button>
+            <el-button
+              v-hasPerm="['workflow:business:detail']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+            >详情</el-button>
+            <el-button
+              v-hasPerm="['workflow:business:remove']"
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+            >删除</el-button>
+            <el-button slot="reference">操作</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+</template>
+
+<script>
+import { pageBusiness, delBusiness, refreshBusiness } from '@/api/workflow/business'
+
+export default {
+  name: 'BusinessList',
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'businessCode', label: '业务编码', show: true },
+        { prop: 'businessName', label: '业务名称', show: true },
+        { prop: 'processDefinitionId', label: '流程定义ID', show: true },
+        {
+          prop: 'status',
+          label: '状态',
+          show: true,
+          formatter: this.statusFormatter
+        },
+        { prop: 'createTime', label: '创建时间', show: true }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        businessCode: ''
+      },
+      // 状态数据字典
+      statusOptions: []
+    }
+  },
+  created() {
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getList()
+  },
+  mounted() {
+    this.initCols()
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true
+      pageBusiness(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    initCols() {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange(val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand(command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        businessCode: ''
+      }
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh() {
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.showOptions.data = {}
+      this.showOptions.showList = false
+      this.showOptions.showAdd = true
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = true
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = true
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delBusiness(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    /** 刷新缓存 */
+    handleCacheRefresh() {
+      refreshBusiness().then(response => {
+        if (response.success) {
+          this.$message.success('刷新缓存成功')
+        } else {
+          this.$message.error('刷新缓存失败')
+        }
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    statusFormatter(row, column, cellValue, index) {
+      const dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
+      if (cellValue === '1') {
+        return <el-tag type='success'>{dictLabel}</el-tag>
+      } else {
+        return <el-tag type='warning'>{dictLabel}</el-tag>
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/workflow/business/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <business-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <business-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <business-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <business-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import BusinessList from './BusinessList'
+import BusinessAdd from './BusinessAdd'
+import BusinessEdit from './BusinessEdit'
+import BusinessDetail from './BusinessDetail'
+
+export default {
+  name: 'Business',
+  components: { BusinessList, BusinessAdd, BusinessEdit, BusinessDetail },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/definition/DefinitionList.vue

@@ -0,0 +1,470 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <el-card class="box-card tree-wrapper" shadow="always">
+        <div class="body-wrapper">
+          <el-tree
+            ref="category"
+            :data="categoryOptions"
+            node-key="id"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+            default-expand-all
+            highlight-current
+            :expand-on-click-node="false"
+            @node-click="handleNodeClick"
+          >
+            <template slot-scope="{ node, data }">
+              <span class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
+                <span><i v-if="node.level === 1" class="iconfont icon-zuzhi tree-folder" />{{ node.label }}</span>
+                <span class="tree-bts">
+                  <i v-show="!data.id && data.show" v-hasPerm="['workflow:definition:type:add']" class="el-icon-circle-plus-outline bt-add" @click="() => handleAddCategory()" />
+                  <i v-show="data.id && data.show" v-hasPerm="['workflow:definition:type:edit']" class="el-icon-edit-outline bt-edit" @click="() => handleEditCategory(data)" />
+                  <i v-show="data.id && data.show" v-hasPerm="['workflow:definition:type:remove']" class="el-icon-delete bt-delete" @click="() => handleDelCategory(data)" />
+                </span>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="18">
+      <el-card class="box-card" shadow="always">
+        <el-form ref="queryForm" :model="queryParams" :inline="true">
+          <el-form-item label="流程定义名称" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入流程定义名称"
+              clearable
+              size="small"
+              @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-row type="flex" justify="space-between">
+          <el-col :span="12">
+            <el-button-group>
+              <el-button
+                v-hasPerm="['workflow:definition:import']"
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleImport"
+              >导入</el-button>
+            </el-button-group>
+          </el-col>
+          <el-col :span="12">
+            <div class="right-toolbar">
+              <el-tooltip content="密度" effect="dark" placement="top">
+                <el-dropdown trigger="click" @command="handleCommand">
+                  <el-button circle size="mini">
+                    <svg-icon class-name="size-icon" icon-class="colum-height" />
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="medium">正常</el-dropdown-item>
+                    <el-dropdown-item command="small">中等</el-dropdown-item>
+                    <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-tooltip>
+              <el-tooltip content="刷新" effect="dark" placement="top">
+                <el-button circle size="mini" @click="handleRefresh">
+                  <svg-icon class-name="size-icon" icon-class="shuaxin" />
+                </el-button>
+              </el-tooltip>
+              <el-tooltip content="列设置" effect="dark" placement="top">
+                <el-popover placement="bottom" width="100" trigger="click">
+                  <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                    <el-checkbox
+                      v-for="(item, index) in tableColumns"
+                      :key="index"
+                      :label="item.prop"
+                    >{{ item.label }}</el-checkbox>
+                  </el-checkbox-group>
+                  <span slot="reference">
+                    <el-button circle size="mini">
+                      <svg-icon class-name="size-icon" icon-class="shezhi" />
+                    </el-button>
+                  </span>
+                </el-popover>
+              </el-tooltip>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-table
+          v-loading="loading"
+          :data="tableDataList"
+          border
+          tooltip-effect="dark"
+          :size="tableSize"
+          :height="tableHeight"
+          style="width: 100%;margin: 15px 0;"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="序号" width="55" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.$index +1 }}</span>
+            </template>
+          </el-table-column>
+          <template v-for="(item, index) in tableColumns">
+            <el-table-column
+              v-if="item.show"
+              :key="index"
+              :prop="item.prop"
+              :label="item.label"
+              :formatter="item.formatter"
+              align="center"
+              show-overflow-tooltip
+            />
+          </template>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-popover
+                placement="left"
+                trigger="click"
+              >
+                <el-button
+                  v-hasPerm="['workflow:definition:resource']"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleResource(scope.row)"
+                >流程图</el-button>
+                <el-button
+                  v-if="scope.row.suspensionState === 2"
+                  v-hasPerm="['workflow:definition:activate']"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleActivate(scope.row)"
+                >激活</el-button>
+                <el-button
+                  v-if="scope.row.suspensionState === 1"
+                  v-hasPerm="['workflow:definition:suspend']"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleSuspend(scope.row)"
+                >挂起</el-button>
+                <el-button
+                  v-hasPerm="['workflow:definition:remove']"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                >删除</el-button>
+                <el-button slot="reference">操作</el-button>
+              </el-popover>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page.sync="queryParams.pageNum"
+          :page-size.sync="queryParams.pageSize"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-card>
+    </el-col>
+
+    <!-- 流程分类对话框 -->
+    <flow-category v-if="dialogFlowCategoryVisible" :visible.sync="dialogFlowCategoryVisible" :data="currentCategory" @handleFlowCategoryFinished="getTree" />
+    <!-- 流程定义对话框 -->
+    <flow-definition v-if="dialogFlowDefinitionVisible" :visible.sync="dialogFlowDefinitionVisible" :category="queryParams.categoryId" @handleFlowDefinitionFinished="getList" />
+    <!-- 流程资源对话框 -->
+    <flow-resource v-if="dialogFlowResourceVisible" :visible.sync="dialogFlowResourceVisible" :process-definition-id="currentProcessDefinitionId" />
+  </el-row>
+</template>
+
+<script>
+import { listCategory, delCategory, pageDefinition, delDefinition, activateDefinition, suspendDefinition } from '@/api/workflow/definition'
+import FlowResource from './components/FlowResource'
+import FlowCategory from './components/FlowCategory'
+import FlowDefinition from './components/FlowDefinition'
+
+export default {
+  name: 'DefinitionList',
+  components: { FlowResource, FlowCategory, FlowDefinition },
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'id', label: '流程定义ID', show: true },
+        { prop: 'name', label: '流程名称', show: true },
+        { prop: 'version', label: '版本', show: true },
+        {
+          prop: 'suspensionState',
+          label: '状态',
+          show: true,
+          formatter: this.statusFormatter
+        }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        name: '',
+        categoryId: ''
+      },
+      // 左侧树
+      categoryOptions: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      // 流程图
+      dialogFlowResourceVisible: false,
+      currentProcessDefinitionId: '',
+      // 流程分类
+      dialogFlowCategoryVisible: false,
+      currentCategory: {},
+      // 流程定义
+      dialogFlowDefinitionVisible: false
+    }
+  },
+  created() {
+    this.getTree()
+    this.getList()
+  },
+  mounted() {
+    this.initCols()
+  },
+  methods: {
+    getTree() {
+      listCategory().then(response => {
+        if (response.success) {
+          const { data } = response
+          const tree = {}
+          tree.name = '流程分类'
+          tree.children = data
+          this.categoryOptions = []
+          this.categoryOptions.push(tree)
+        }
+      })
+    },
+    /** 节点单击事件 */
+    handleNodeClick(data) {
+      if (data.id) {
+        this.queryParams.categoryId = data.id
+        this.getList()
+      }
+    },
+    /** 树节点鼠标移入移出 */
+    mouseenter(data) {
+      this.$set(data, 'show', true)
+    },
+    mouseleave(data) {
+      this.$set(data, 'show', false)
+    },
+    handleAddCategory() {
+      this.dialogFlowCategoryVisible = true
+      this.currentCategory = {}
+    },
+    handleEditCategory(data) {
+      this.dialogFlowCategoryVisible = true
+      this.currentCategory = Object.assign({}, data)
+    },
+    handleDelCategory(data) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delCategory(data.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getTree()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleImport() {
+      if (this.queryParams.categoryId) {
+        this.dialogFlowDefinitionVisible = true
+      } else {
+        this.$message.warning('请先选择流程分类')
+      }
+    },
+    /** 查询数据源列表 */
+    getList() {
+      this.loading = true
+      pageDefinition(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    initCols() {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange(val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand(command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        name: '',
+        categoryId: ''
+      }
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh() {
+      this.getList()
+    },
+    handleResource(row) {
+      this.currentProcessDefinitionId = row.id
+      this.dialogFlowResourceVisible = true
+    },
+    handleActivate(row) {
+      this.$confirm('激活流程定义？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        activateDefinition(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSuspend(row) {
+      this.$confirm('挂起流程定义？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        suspendDefinition(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delDefinition(row.deploymentId).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    statusFormatter(row, column, cellValue, index) {
+      if (cellValue === 1) {
+        return <el-tag type='success'>激活</el-tag>
+      } else if (cellValue === 2) {
+        return <el-tag type='warning'>挂起</el-tag>
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+.tree-wrapper {
+  overflow-y: auto;
+  .body-wrapper {
+    margin: -10px;
+    ::v-deep .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      .tree-folder {
+        margin-right: 5px;
+        color: #f6cf07;
+      }
+      .tree-bts {
+        .bt-add {
+          color: #409eff;
+        }
+        .bt-edit {
+          color: #67c23a;
+        }
+        .bt-delete {
+          color: #f56c6c;
+        }
+        i {
+          margin-right: 10px;
+          padding: 0px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/workflow/definition/components/FlowCategory.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-dialog title="流程分类" width="50%" :visible.sync="dialogVisible">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="分类名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入分类名称" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确定</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addCategory, updateCategory } from '@/api/workflow/definition'
+
+export default {
+  name: 'FlowCategory',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: '分类名称不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+    console.log(this.data)
+    this.form = Object.assign({}, this.data)
+  },
+  methods: {
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id) {
+            updateCategory(this.form).then(response => {
+              if (response.success) {
+                this.$message.success('保存成功')
+                this.dialogVisible = false
+                this.$emit('handleFlowCategoryFinished')
+              }
+            }).catch(error => {
+              this.$message.error(error.msg || '保存失败')
+            })
+          } else {
+            addCategory(this.form).then(response => {
+              if (response.success) {
+                this.$message.success('保存成功')
+                this.dialogVisible = false
+                this.$emit('handleFlowCategoryFinished')
+              }
+            }).catch(error => {
+              this.$message.error(error.msg || '保存失败')
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/definition/components/FlowDefinition.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dialog title="流程定义" width="50%" :visible.sync="dialogVisible">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="模板名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入模板名称" />
+      </el-form-item>
+      <el-form-item label="模板文件">
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          action=""
+          :limit="1"
+          :on-change="handleChange"
+          :on-remove="handleRemove"
+          :auto-upload="false"
+          accept="text/xml"
+        >
+          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传.bpmn20.xml结尾的文件</div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确定</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deployDefinition } from '@/api/workflow/definition'
+
+export default {
+  name: 'FlowDefinition',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    category: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: '模板名称不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    handleRemove(file) {
+      this.form.file = undefined
+    },
+    handleChange(file) {
+      this.form.file = file.raw
+    },
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          const formData = new FormData()
+          formData.append('category', this.category)
+          formData.append('name', this.form.name)
+          formData.append('file', this.form.file)
+          deployDefinition(formData).then(response => {
+            if (response.success) {
+              this.$message.success('部署成功')
+              this.dialogVisible = false
+              this.$emit('handleFlowDefinitionFinished')
+            }
+          }).catch(error => {
+            this.$message.error(error.msg || '部署失败')
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/definition/components/FlowResource.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-dialog title="流程资源" width="50%" :visible.sync="dialogVisible">
+    <el-image :src="flowSrc">
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline" />
+      </div>
+    </el-image>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { flowResource } from '@/api/workflow/definition'
+
+export default {
+  name: 'FlowResource',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    processDefinitionId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      flowSrc: ''
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      flowResource(this.processDefinitionId).then(response => {
+        const blob = new Blob([response])
+        this.flowSrc = window.URL.createObjectURL(blob)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/definition/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <definition-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import DefinitionList from './DefinitionList'
+
+export default {
+  name: 'Definition',
+  components: { DefinitionList },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="app-container">
+    Workflow
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Workflow'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/instance/components/FlowImage.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-dialog title="流程图" width="50%" :visible.sync="dialogVisible">
+    <el-image :src="flowSrc">
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline" />
+      </div>
+    </el-image>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { flowTrack } from '@/api/workflow/instance'
+
+export default {
+  name: 'FlowImage',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    processInstanceId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      flowSrc: ''
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      flowTrack(this.processInstanceId).then(response => {
+        const blob = new Blob([response])
+        this.flowSrc = window.URL.createObjectURL(blob)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/instance/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/views/workflow/instance/myinvolved/MyInvolvedInstanceList.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="流程实例名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程实例名称"
+          clearable
+          size="small"
+          @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-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-popover
+            placement="left"
+            trigger="click"
+          >
+            <el-button
+              v-hasPerm="['workflow:instance:track']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleTrack(scope.row)"
+            >流程追踪</el-button>
+            <el-button slot="reference">操作</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+    <!-- 流程图对话框 -->
+    <flow-image v-if="dialogFlowImageVisible" :visible.sync="dialogFlowImageVisible" :process-instance-id="currentProcessInstanceId" />
+  </el-card>
+</template>
+
+<script>
+import { pageMyInvolvedInstance } from '@/api/workflow/instance'
+import FlowImage from '../components/FlowImage'
+import { formatDuration } from '@/utils'
+
+export default {
+  name: 'MyInvolvedInstanceList',
+  components: { FlowImage },
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'processDefinitionId', label: '流程定义ID', show: true },
+        { prop: 'processDefinitionName', label: '流程定义名称', show: true },
+        { prop: 'name', label: '流程实列名称', show: true },
+        { prop: 'startTime', label: '开始时间', show: true },
+        { prop: 'endTime', label: '结束时间', show: true },
+        { prop: 'durationInMillis', label: '耗时', show: true, formatter: this.durationFormatter }
+      ],
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        name: ''
+      },
+      // 流程图
+      dialogFlowImageVisible: false,
+      currentProcessInstanceId: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询数据集列表 */
+    getList() {
+      this.loading = true
+      pageMyInvolvedInstance(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        name: ''
+      }
+      this.handleQuery()
+    },
+    handleTrack(row) {
+      this.currentProcessInstanceId = row.id
+      this.dialogFlowImageVisible = true
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    durationFormatter(row, column, cellValue, index) {
+      return formatDuration(cellValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/workflow/instance/myinvolved/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <my-involved-instance-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import MyInvolvedInstanceList from './MyInvolvedInstanceList'
+
+export default {
+  name: 'MyInvolvedInstance',
+  components: { MyInvolvedInstanceList },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/instance/mystarted/MyStartedInstanceList.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="流程实例名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程实例名称"
+          clearable
+          size="small"
+          @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-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-popover
+            placement="left"
+            trigger="click"
+          >
+            <el-button
+              v-hasPerm="['workflow:instance:track']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleTrack(scope.row)"
+            >流程追踪</el-button>
+            <el-button slot="reference">操作</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+    <!-- 流程图对话框 -->
+    <flow-image v-if="dialogFlowImageVisible" :visible.sync="dialogFlowImageVisible" :process-instance-id="currentProcessInstanceId" />
+  </el-card>
+</template>
+
+<script>
+import { pageMyStartedInstance } from '@/api/workflow/instance'
+import FlowImage from '../components/FlowImage'
+import { formatDuration } from '@/utils'
+
+export default {
+  name: 'MyStartedInstanceList',
+  components: { FlowImage },
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'processDefinitionId', label: '流程定义ID', show: true },
+        { prop: 'processDefinitionName', label: '流程定义名称', show: true },
+        { prop: 'name', label: '流程实列名称', show: true },
+        { prop: 'startTime', label: '开始时间', show: true },
+        { prop: 'endTime', label: '结束时间', show: true },
+        { prop: 'durationInMillis', label: '耗时', show: true, formatter: this.durationFormatter }
+      ],
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        name: ''
+      },
+      // 流程图
+      dialogFlowImageVisible: false,
+      currentProcessInstanceId: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询数据集列表 */
+    getList() {
+      this.loading = true
+      pageMyStartedInstance(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        name: ''
+      }
+      this.handleQuery()
+    },
+    handleTrack(row) {
+      this.currentProcessInstanceId = row.id
+      this.dialogFlowImageVisible = true
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    durationFormatter(row, column, cellValue, index) {
+      return formatDuration(cellValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/workflow/instance/mystarted/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <my-started-instance-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import MyStartedInstanceList from './MyStartedInstanceList'
+
+export default {
+  name: 'MyStartedInstance',
+  components: { MyStartedInstanceList },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/instance/running/RunningInstanceList.vue

@@ -0,0 +1,255 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="流程实例名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程实例名称"
+          clearable
+          size="small"
+          @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-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-popover
+            placement="left"
+            trigger="click"
+          >
+            <el-button
+              v-hasPerm="['workflow:instance:track']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleTrack(scope.row)"
+            >流程追踪</el-button>
+            <el-button
+              v-if="scope.row.suspensionState === 2"
+              v-hasPerm="['workflow:instance:running:activate']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleActivate(scope.row)"
+            >激活</el-button>
+            <el-button
+              v-if="scope.row.suspensionState === 1"
+              v-hasPerm="['workflow:instance:running:suspend']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleSuspend(scope.row)"
+            >挂起</el-button>
+            <el-button
+              v-hasPerm="['workflow:instance:running:remove']"
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+            >删除</el-button>
+            <el-button slot="reference">操作</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+    <!-- 流程图对话框 -->
+    <flow-image v-if="dialogFlowImageVisible" :visible.sync="dialogFlowImageVisible" :process-instance-id="currentProcessInstanceId" />
+  </el-card>
+</template>
+
+<script>
+import { pageRunningInstance, delInstance, activateInstance, suspendInstance } from '@/api/workflow/instance'
+import FlowImage from '../components/FlowImage'
+
+export default {
+  name: 'InstanceList',
+  components: { FlowImage },
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'processDefinitionId', label: '流程定义ID', show: true },
+        { prop: 'processDefinitionName', label: '流程定义名称', show: true },
+        { prop: 'name', label: '流程实列名称', show: true },
+        {
+          prop: 'suspensionState',
+          label: '状态',
+          show: true,
+          formatter: this.statusFormatter
+        },
+        { prop: 'startTime', label: '创建时间', show: true }
+      ],
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        name: ''
+      },
+      // 流程图
+      dialogFlowImageVisible: false,
+      currentProcessInstanceId: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询数据集列表 */
+    getList() {
+      this.loading = true
+      pageRunningInstance(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        name: ''
+      }
+      this.handleQuery()
+    },
+    handleTrack(row) {
+      this.currentProcessInstanceId = row.id
+      this.dialogFlowImageVisible = true
+    },
+    handleActivate(row) {
+      this.$confirm('激活流程实例？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        activateInstance(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('激活流程实例成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSuspend(row) {
+      this.$confirm('挂起流程实例？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        suspendInstance(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('挂起流程实例成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delInstance(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    statusFormatter(row, column, cellValue, index) {
+      if (cellValue === 1) {
+        return <el-tag type='success'>激活</el-tag>
+      } else if (cellValue === 2) {
+        return <el-tag type='warning'>挂起</el-tag>
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/workflow/instance/running/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <running-instance-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import RunningInstanceList from './RunningInstanceList'
+
+export default {
+  name: 'RunningInstance',
+  components: { RunningInstanceList },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/task/components/HandleTask.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-dialog title="任务审核" width="50%" :visible.sync="dialogVisible">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="意审核见" prop="message">
+        <el-input
+          v-model="form.message"
+          :autosize="{ minRows: 2, maxRows: 3}"
+          type="textarea"
+          placeholder="请输入审核意见"
+          maxlength="100"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doComplete(true)">同意</el-button>
+      <el-button type="primary" @click="doComplete(false)">不同意</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { executeTask } from '@/api/workflow/task'
+
+export default {
+  name: 'HandleTask',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    task: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: { message: '' },
+      rules: {
+        message: [
+          { required: true, message: '审核意见不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    doComplete(approved) {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          const data = {
+            action: this.task.isDelegation ? 'resolve' : 'complete',
+            processInstanceId: this.task.processInstanceId,
+            taskId: this.task.id,
+            userId: '',
+            message: this.form.message,
+            variables: { approved: approved }
+          }
+          executeTask(data).then(response => {
+            if (response.success) {
+              this.$message.success('任务审核成功')
+              this.dialogVisible = false
+              this.$emit('handleTaskFinished')
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/task/components/HandleUser.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-dialog title="审核人选择" width="50%" :visible.sync="dialogVisible">
+    <el-transfer
+      v-model="value"
+      :data="data"
+      :props="{
+        key: 'id',
+        label: 'username'
+      }"
+      @left-check-change="leftCheckChange($event)"
+      @change="change($event)"
+    >
+      <span slot-scope="{ option }">{{ option.username }}({{ option.nickname }})</span>
+    </el-transfer>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submit">确认</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getAuditUsers } from '@/api/system/user'
+import { executeTask } from '@/api/workflow/task'
+
+export default {
+  name: 'HandleUser',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    task: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    action: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      data: [],
+      value: []
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getAuditUsers().then(response => {
+        if (response.success) {
+          this.data = response.data
+          console.log(this.data)
+        }
+      })
+    },
+    leftCheckChange(e) {
+      if (e.length === 0) {
+        this.data.forEach((item, index) => {
+          delete item['disabled']
+        })
+      }
+      if (e.length === 1) {
+        this.data.forEach((item, index) => {
+          if (e[0] !== item.id) {
+            item['disabled'] = true
+          }
+        })
+      }
+    },
+    change(e) {
+      if (this.value.length === 0) {
+        this.data.forEach((item, index) => {
+          delete item['disabled']
+        })
+      }
+    },
+    submit() {
+      if (this.value.length === 0) {
+        this.$message.warning('请先选择审核人员')
+        return false
+      }
+      this.$confirm('确认选择该审核人员, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          action: this.action,
+          processInstanceId: this.task.processInstanceId,
+          taskId: this.task.id,
+          userId: this.value[0],
+          message: ''
+        }
+        executeTask(data).then(response => {
+          if (response.success) {
+            this.$message.success('审核人员设置成功')
+            this.dialogVisible = false
+            this.$emit('handleTaskUserFinished')
+          }
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-transfer ::v-deep .el-transfer-panel__header {
+  display: none;
+}
+</style>

src/views/workflow/task/done/TaskDoneList.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="业务类型" prop="businessCode">
+        <el-input
+          v-model="queryParams.businessCode"
+          placeholder="请输入业务类型"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="业务名称" prop="businessName">
+        <el-input
+          v-model="queryParams.businessName"
+          placeholder="请输入业务名称"
+          clearable
+          size="small"
+          @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-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+</template>
+
+<script>
+import { pageDoneTask } from '@/api/workflow/task'
+import { formatDuration } from '@/utils'
+
+export default {
+  name: 'TaskDoneList',
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'name', label: '节点名称', show: true },
+        { prop: 'businessName', label: '业务名称', show: true },
+        { prop: 'createTime', label: '开始时间', show: true },
+        { prop: 'endTime', label: '结束时间', show: true },
+        { prop: 'durationInMillis', label: '耗时', show: true, formatter: this.durationFormatter }
+      ],
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        businessCode: '',
+        businessName: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询数据集列表 */
+    getList() {
+      this.loading = true
+      pageDoneTask(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        businessCode: '',
+        businessName: ''
+      }
+      this.handleQuery()
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    durationFormatter(row, column, cellValue, index) {
+      return formatDuration(cellValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/workflow/task/done/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <task-done-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import TaskDoneList from './TaskDoneList'
+
+export default {
+  name: 'TaskDone',
+  components: { TaskDoneList },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workflow/task/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/views/workflow/task/todo/TaskTodoList.vue

@@ -0,0 +1,281 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="业务类型" prop="businessCode">
+        <el-input
+          v-model="queryParams.businessCode"
+          placeholder="请输入业务类型"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="业务名称" prop="businessName">
+        <el-input
+          v-model="queryParams.businessName"
+          placeholder="请输入业务名称"
+          clearable
+          size="small"
+          @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-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-popover
+            placement="left"
+            trigger="click"
+          >
+            <el-button
+              v-if="scope.row.assignee === undefined || scope.row.assignee === null || scope.row.assignee === ''"
+              v-hasPerm="['workflow:task:caim']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleClaim(scope.row)"
+            >签收</el-button>
+            <el-button
+              v-if="scope.row.assignee && scope.row.assignee === user.id"
+              v-hasPerm="['workflow:task:unclaim']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleUnClaim(scope.row)"
+            >反签收</el-button>
+            <el-button
+              v-if="scope.row.assignee && scope.row.assignee === user.id"
+              v-hasPerm="['workflow:task:delegate']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDelegate(scope.row)"
+            >委派</el-button>
+            <el-button
+              v-if="scope.row.assignee && scope.row.assignee === user.id"
+              v-hasPerm="['workflow:task:assignee']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleAssignee(scope.row)"
+            >转办</el-button>
+            <el-button
+              v-if="scope.row.assignee && scope.row.assignee === user.id"
+              v-hasPerm="['workflow:task:exam']"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleTask(scope.row)"
+            >审核</el-button>
+            <el-button slot="reference">操作</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+    <!-- 任务审核对话框 -->
+    <handle-task v-if="dialogHandleTaskVisible" :visible.sync="dialogHandleTaskVisible" :task="currentTask" @handleTaskFinished="getList" />
+    <handle-user v-if="dialogHandleUserVisible" :visible.sync="dialogHandleUserVisible" :task="currentTask" :action="taskAction" @handleTaskUserFinished="getList" />
+  </el-card>
+</template>
+
+<script>
+import { pageTodoTask, executeTask } from '@/api/workflow/task'
+import { mapGetters } from 'vuex'
+import HandleTask from '../components/HandleTask'
+import HandleUser from '../components/HandleUser'
+
+export default {
+  name: 'TaskTodoList',
+  components: { HandleTask, HandleUser },
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'name', label: '节点名称', show: true },
+        { prop: 'businessName', label: '业务名称', show: true },
+        { prop: 'createTime', label: '创建时间', show: true }
+      ],
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        businessCode: '',
+        businessName: ''
+      },
+      dialogHandleTaskVisible: false,
+      currentTask: {},
+      dialogHandleUserVisible: false,
+      taskAction: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
+  methods: {
+    /** 查询数据集列表 */
+    getList() {
+      this.loading = true
+      pageTodoTask(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        businessCode: '',
+        businessName: ''
+      }
+      this.handleQuery()
+    },
+    handleClaim(row) {
+      this.$confirm('签收任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          action: 'claim',
+          processInstanceId: row.processInstanceId,
+          taskId: row.id,
+          userId: '',
+          message: '',
+          variables: { approved: true }
+        }
+        executeTask(data).then(response => {
+          if (response.success) {
+            this.$message.success('任务签收成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleUnClaim(row) {
+      this.$confirm('反签收任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          action: 'unclaim',
+          processInstanceId: row.processInstanceId,
+          taskId: row.id,
+          userId: '',
+          message: '',
+          variables: { approved: true }
+        }
+        executeTask(data).then(response => {
+          if (response.success) {
+            this.$message.success('任务反签收成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleDelegate(row) {
+      this.taskAction = 'delegate'
+      this.currentTask = Object.assign({}, row)
+      this.dialogHandleUserVisible = true
+    },
+    handleAssignee(row) {
+      this.taskAction = 'assignee'
+      this.currentTask = Object.assign({}, row)
+      this.dialogHandleUserVisible = true
+    },
+    handleTask(row) {
+      this.currentTask = Object.assign({}, row)
+      this.dialogHandleTaskVisible = true
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/workflow/task/todo/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <task-todo-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import TaskTodoList from './TaskTodoList'
+
+export default {
+  name: 'TaskTodo',
+  components: { TaskTodoList },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>