流程详情页 30% - 表单信息的展示

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/BpmTaskController.java

@@ -57,12 +57,12 @@ public class BpmTaskController {
         return success(true);
     }
 
-    @GetMapping("/list-by-process-instance-id")
+    @GetMapping("/historic-list-by-process-instance-id")
     @ApiOperation(value = "获得指定流程实例的任务列表", notes = "包括完成的、未完成的")
     @ApiImplicitParam(name = "processInstanceId", value = "流程实例的编号", required = true, dataTypeClass = String.class)
-    public CommonResult<List<BpmTaskRespVO>> getTaskListByProcessInstanceId(
+    public CommonResult<List<BpmTaskRespVO>> getHistoricTaskListByProcessInstanceId(
             @RequestParam("processInstanceId") String processInstanceId) {
-        return success(taskService.getTaskListByProcessInstanceId(processInstanceId));
+        return success(taskService.getHistoricTaskListByProcessInstanceId(processInstanceId));
     }
 
     /**

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/task/BpmProcessInstanceConvert.java

@@ -64,6 +64,7 @@ public interface BpmProcessInstanceConvert {
 
     @Mappings({
             @Mapping(source = "id", target = "processInstanceId"),
+            @Mapping(source = "id", target = "id", ignore = true),
             @Mapping(source = "startDate", target = "createTime"),
             @Mapping(source = "initiator", target = "startUserId"),
             @Mapping(source = "status", target = "status", ignore = true)

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/service/task/BpmTaskService.java

@@ -31,7 +31,7 @@ public interface BpmTaskService {
      * @param processInstanceId 流程实例的编号
      * @return 流程任务列表
      */
-    List<BpmTaskRespVO> getTaskListByProcessInstanceId(String processInstanceId);
+    List<BpmTaskRespVO> getHistoricTaskListByProcessInstanceId(String processInstanceId);
 
     /**
      * 获得流程任务列表

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/service/task/impl/BpmTaskServiceImpl.java

@@ -91,7 +91,7 @@ public class BpmTaskServiceImpl implements BpmTaskService {
     }
 
     @Override
-    public List<BpmTaskRespVO> getTaskListByProcessInstanceId(String processInstanceId) {
+    public List<BpmTaskRespVO> getHistoricTaskListByProcessInstanceId(String processInstanceId) {
         // 获得任务列表
         List<HistoricTaskInstance> tasks = historyService.createHistoricTaskInstanceQuery()
                 .processInstanceId(processInstanceId)

yudao-admin-ui/src/api/bpm/processInstance.js

@@ -27,7 +27,7 @@ export function cancelProcessInstance(id, reason) {
   })
 }
 
-export function getMyProcessInstance(id) {
+export function getProcessInstance(id) {
   return request({
     url: '/bpm/process-instance/get?id=' + id,
     method: 'get',

yudao-admin-ui/src/api/bpm/task.js

@@ -40,3 +40,9 @@ export function rejectTask(data) {
   })
 }
 
+export function getHistoricTaskListByProcessInstanceId(processInstanceId) {
+  return request({
+    url: '/bpm/task/historic-list-by-process-instance-id?processInstanceId=' + processInstanceId,
+    method: 'get',
+  })
+}

yudao-admin-ui/src/router/index.js

@@ -198,6 +198,12 @@ export const constantRoutes = [
         component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
         name: '发起流程',
         meta: { title: '发起流程' }
+      },
+      {
+        path: 'process-instance/detail',
+        component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
+        name: '流程详情',
+        meta: { title: '流程详情' }
       }
     ]
   },

yudao-admin-ui/src/views/bpm/processInstance/create.vue

@@ -70,8 +70,6 @@ export default {
     return {
       // 遮罩层
       loading: true,
-      // 总条数
-      total: 0,
       // 表格数据
       list: [],
 

yudao-admin-ui/src/views/bpm/processInstance/detail.vue

@@ -1,54 +1,25 @@
 <template>
   <div class="app-container">
-    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+    <!-- TODO 审批信息 -->
-    <div v-if="!selectProcessInstance">
+    <!-- 申请信息 -->
-      <el-table v-loading="loading" :data="list">
+    <el-card class="box-card" v-loading="processInstanceLoading">
-        <el-table-column label="流程名称" align="center" prop="name" width="200">
+      <div slot="header" class="clearfix">
-          <template slot-scope="scope">
+        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
-            <el-button type="text" @click="handleBpmnDetail(scope.row)">
+      </div>
-              <span>{{ scope.row.name }}</span>
+      <el-col :span="16" :offset="6">
-            </el-button>
+        <div>
-          </template>
+          <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
-        </el-table-column>
-        <el-table-column label="流程分类" align="center" prop="category" width="100">
-          <template slot-scope="scope">
-            <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
-          <template slot-scope="scope">
-            <el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="流程描述" align="center" prop="description" width="300" show-overflow-tooltip />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(scope.row)">选择</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!-- 第二步，填写表单，进行流程的提交 -->
-    <div v-else>
-      <el-card class="box-card" >
-        <div slot="header" class="clearfix">
-          <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
-          <el-button style="float: right;" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button>
         </div>
-        <el-col :span="16" :offset="6">
+      </el-col>
-          <div>
+    </el-card>
-            <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
+    <!-- TODO 审批记录 -->
-          </div>
+    <!-- TODO 流程图 -->
-        </el-col>
+    <el-card class="box-card" v-loading="processInstanceLoading">
-      </el-card>
+      <div slot="header" class="clearfix">
-      <el-card class="box-card">
+        <span class="el-icon-picture-outline">流程图</span>
-        <div slot="header" class="clearfix">
+      </div>
-          <span class="el-icon-picture-outline">流程图</span>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
-        </div>
+    </el-card>
-        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
-      </el-card>
-    </div>
-
   </div>
 </template>
 
@@ -58,7 +29,8 @@ import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import {getForm} from "@/api/bpm/form";
 import {decodeFields} from "@/utils/formGenerator";
 import Parser from '@/components/parser/Parser'
-import {createProcessInstance, getMyProcessInstancePage} from "@/api/bpm/processInstance";
+import {createProcessInstance, getMyProcessInstancePage, getProcessInstance} from "@/api/bpm/processInstance";
+import {getHistoricTaskListByProcessInstanceId} from "@/api/bpm/task";
 
 // 流程实例的详情页，可用于审批
 export default {
@@ -69,11 +41,10 @@ export default {
   data() {
     return {
       // 遮罩层
-      loading: true,
+      processInstanceLoading: true,
-      // 总条数
+      // 流程实例
-      total: 0,
+      id: undefined, // 流程实例的编号
-      // 表格数据
+      processInstance: {},
-      list: [],
 
       // 流程表单详情
       detailForm: {
@@ -86,27 +57,65 @@ export default {
         prefix: "activiti"
       },
 
-      // 流程表单
+      // 审批记录
-      selectProcessInstance: undefined, // 选择的流程实例
+      historicTasksLoad: true,
+      historicTasks: [],
 
       // 数据字典
       categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
     };
   },
   created() {
-    this.getList();
+    this.id = this.$route.query.id;
+    if (!this.id) {
+      this.$message.error('未传递 id 参数，无法查看流程信息');
+      return;
+    }
+    this.getDetail();
   },
   methods: {
-    /** 查询流程定义列表 */
+    /** 获得流程实例 */
-    getList() {
+    getDetail() {
-      this.loading = true;
+      // 获得流程实例相关
-      getProcessDefinitionList({
+      this.processInstanceLoading = true;
-        suspensionState: 1
+      getProcessInstance(this.id).then(response => {
-      }).then(response => {
+        if (!response.data) {
-          this.list = response.data
+          this.$message.error('查询不到流程信息！');
-          this.loading = false
+          return;
         }
-      );
+        // 设置流程信息
+        this.processInstance = response.data;
+
+        // 设置表单信息
+        this.detailForm = {
+          ...JSON.parse(this.processInstance.processDefinition.formConf),
+          disabled: true, // 表单禁用
+          formBtns: false, // 按钮隐藏
+          fields: decodeFields(this.processInstance.processDefinition.formFields)
+        }
+        // 设置表单的值
+        this.detailForm.fields.forEach(item => {
+          const val = this.processInstance.formVariables[item.__vModel__]
+          if (val) {
+            item.__config__.defaultValue = val
+          }
+        })
+
+        // 加载流程图
+        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
+          this.bpmnXML = response.data
+        })
+
+        // 取消加载中
+        this.processInstanceLoading = false;
+      });
+
+      // 获得流程任务列表（审批记录）
+      this.historicTasksLoad = true;
+      getHistoricTaskListByProcessInstanceId(this.id).then(response => {
+        this.historicTasks = response.data;
+        this.historicTasksLoad = true;
+      });
     },
     /** 处理选择流程的按钮操作 **/
     handleSelect(row) {
@@ -121,10 +130,7 @@ export default {
           fields: decodeFields(row.formFields)
         }
 
-        // 加载流程图
+
-        getProcessDefinitionBpmnXML(row.id).then(response => {
-          this.bpmnXML = response.data
-        })
       } else if (row.formCustomCreatePath) {
         this.$router.push({ path: row.formCustomCreatePath});
         // 这里暂时无需加载流程图，因为跳出到另外个 Tab；

yudao-admin-ui/src/views/bpm/task/todo.vue

@@ -36,7 +36,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <!-- TODO 权限、颜色 -->
-          <el-button size="mini" type="text" icon="el-icon-edit">审批</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)">审批</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="audit(scope.row, true)">通过</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit"  @click="audit(scope.row, false)">不通过</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.suspensionState === 2">激活</el-button>
@@ -104,6 +104,10 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    /** 处理审批按钮 */
+    handleAudit(row) {
+      this.$router.push({ path: "/bpm/process-instance/detail", query: { id: row.processInstance.id}});
+    },
     audit(row, pass) {
       if (pass) {
         approveTask({