|
|
@@ -1,113 +1,59 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
|
|
-
|
|
|
<!-- 搜索工作栏 -->
|
|
|
<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="processDefinitionId">
|
|
|
- <el-input v-model="queryParams.processDefinitionId" placeholder="请输入流程定义的编号" clearable @keyup.enter.native="handleQuery"/>
|
|
|
+ <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="category">
|
|
|
- <el-select v-model="queryParams.category" placeholder="请选择流程分类" clearable>
|
|
|
- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY)"
|
|
|
- :key="dict.value" :label="dict.label" :value="dict.value"/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="提交时间" prop="createTime">
|
|
|
+
|
|
|
+ <el-form-item label="创建时间" prop="createTime">
|
|
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
|
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
|
|
- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
|
|
|
- :key="dict.value" :label="dict.label" :value="dict.value"/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="结果" prop="result">
|
|
|
- <el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
|
|
|
- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
|
|
|
- :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" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="el-icon-refresh" @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="['bpm:process-instance:query']">发起流程</el-button>
|
|
|
- </el-col>
|
|
|
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
- </el-row>
|
|
|
-
|
|
|
<!-- 列表 -->
|
|
|
- <el-table v-loading="loading" :data="list">
|
|
|
- <el-table-column label="编号" align="center" prop="id" width="320" />
|
|
|
- <el-table-column label="流程名" align="center" prop="name" />
|
|
|
- <el-table-column label="流程分类" align="center" prop="category">
|
|
|
+ <el-table v-loading="loading" :data="list" @row-click="handleAudit">
|
|
|
+ <el-table-column label="任务编号" align="center" prop="id"/>
|
|
|
+ <el-table-column label="流程名称" align="center" prop="name" />
|
|
|
+ <el-table-column label="创建时间" align="center" prop="startTime" width="180">
|
|
|
<template v-slot="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="当前审批任务" align="center" prop="tasks">
|
|
|
- <template v-slot="scope">
|
|
|
- <el-button v-for="task in scope.row.tasks" :key="task.id" type="text"">
|
|
|
- <span>{{ task.name }}</span>
|
|
|
- </el-button>
|
|
|
+ <span>{{ parseTime(scope.row.startTime) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="状态" align="center" prop="status">
|
|
|
<template v-slot="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="结果" align="center" prop="result">
|
|
|
- <template v-slot="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="提交时间" align="center" prop="createTime" width="180">
|
|
|
- <template v-slot="scope">
|
|
|
- <span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="结束时间" align="center" prop="createTime" width="180">
|
|
|
- <template v-slot="scope">
|
|
|
- <span>{{ parseTime(scope.row.endTime) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
- <template v-slot="scope">
|
|
|
- <el-button type="text" size="small" icon="el-icon-delete" v-if="scope.row.result === 1"
|
|
|
- v-hasPermi="['bpm:process-instance:cancel']" @click="handleCancel(scope.row)">取消</el-button>
|
|
|
- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
|
|
|
- v-hasPermi="['bpm:process-instance:query']">详情</el-button>
|
|
|
+ <dict-tag :type="DICT_TYPE.BPM_TASK_AUDIT_STATUS" :value="scope.row.status"/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column label="当前处理人" align="center" prop="currentAuditUser.nickname" />
|
|
|
</el-table>
|
|
|
<!-- 分页组件 -->
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
|
|
@pagination="getList"/>
|
|
|
-
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body v-loading="detailLoading">
|
|
|
+ <async-biz-form-component :id="businessKey"></async-biz-form-component>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getMyProcessInstancePage, cancelProcessInstance } from "@/api/bpm/processInstance";
|
|
|
-
|
|
|
+import Vue from "vue";
|
|
|
export default {
|
|
|
name: "BpmProcessInstance",
|
|
|
components: {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ detailLoading:false,
|
|
|
+ title:'',
|
|
|
+ //详情页面id
|
|
|
+ businessKey:'',
|
|
|
+ open: false,
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 显示搜索条件
|
|
|
@@ -121,10 +67,6 @@ export default {
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
name: null,
|
|
|
- processDefinitionId: null,
|
|
|
- category: null,
|
|
|
- status: null,
|
|
|
- result: null,
|
|
|
createTime: []
|
|
|
}
|
|
|
};
|
|
|
@@ -156,30 +98,19 @@ export default {
|
|
|
this.resetForm("queryForm");
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
- /** 新增按钮操作 **/
|
|
|
- handleAdd() {
|
|
|
- this.$router.push({ name: "BpmProcessInstanceCreate"})
|
|
|
- },
|
|
|
- /** 取消按钮操作 */
|
|
|
- handleCancel(row) {
|
|
|
- const id = row.id;
|
|
|
- this.$prompt('请输入取消原因？', "取消流程", {
|
|
|
- type: 'warning',
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
|
|
- inputErrorMessage: "取消原因不能为空",
|
|
|
- }).then(({ value }) => {
|
|
|
- return cancelProcessInstance(id, value);
|
|
|
- }).then(() => {
|
|
|
- this.getList();
|
|
|
- this.$modal.msgSuccess("取消成功");
|
|
|
- })
|
|
|
- },
|
|
|
- /** 处理详情按钮 */
|
|
|
- handleDetail(row) {
|
|
|
- this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.id}});
|
|
|
- },
|
|
|
+ /** 处理审批按钮 */
|
|
|
+ handleAudit(row) {
|
|
|
+ this.title = row.name;
|
|
|
+ console.log(row);
|
|
|
+ this.businessKey = row.businessKey;
|
|
|
+ //将业务表单，注册为动态组件
|
|
|
+ const path = row.processDefinition.formCustomViewPath;
|
|
|
+ console.log("path:" + path)
|
|
|
+ Vue.component("async-biz-form-component", function (resolve) {
|
|
|
+ require([`@/views${path}`], resolve);
|
|
|
+ });
|
|
|
+ this.open = true;
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
