From f4bdceb42aef38f1cd9431ae5addd37bec4cf60b Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 28 十一月 2024 06:07:21 +0800
Subject: [PATCH] 新的流程页面对接自带的流程页面,查询表单使用同一个接口,其接口内部做判定、流程推进详情页面

---
 src/views/flowable/task/myProcess/send/index.vue   |   60 ++++-
 src/views/projectProcess/components/RunProcess.vue |    8 
 src/api/flowable/process.js                        |    9 
 src/api/projectProcess/projectProcess.js           |   17 +
 src/views/projectProcess/detail/index.vue          |  251 ++++++++++++++++++++++
 src/views/flowable/task/myProcess/send/index1.vue  |  249 ++++++++++++++++++++++
 src/views/projectProcess/index.vue                 |   24 +
 7 files changed, 592 insertions(+), 26 deletions(-)

diff --git a/src/api/flowable/process.js b/src/api/flowable/process.js
index c5d1121..d756ebf 100644
--- a/src/api/flowable/process.js
+++ b/src/api/flowable/process.js
@@ -35,6 +35,15 @@
   })
 }
 
+// 瀹屾垚琛ㄥ崟鎻愪氦浠诲姟/鏅�氭彁浜や换鍔�
+export function completeSubmitFormTask(taskId, data) {
+  return request({
+    url: '/flowable/task/complete/form/' + taskId,
+    method: 'post',
+    data: data
+  })
+}
+
 // 鍙栨秷鐢宠
 export function stopProcess(data) {
   return request({
diff --git a/src/api/projectProcess/projectProcess.js b/src/api/projectProcess/projectProcess.js
index 1ebada4..9aa64e0 100644
--- a/src/api/projectProcess/projectProcess.js
+++ b/src/api/projectProcess/projectProcess.js
@@ -17,3 +17,20 @@
     data: data
   })
 }
+
+
+// 鑾峰彇椤圭洰娴佺▼璇︽儏鏁版嵁
+export const getProjectProcessDetail = (projectId, processId) => {
+  return request({
+    url: "/project-process/detail/" + projectId + "/" + processId,
+    method: "GET"
+  })
+}
+
+// 鍚姩娴佺▼
+export const startProcess = (projectId, processId) => {
+  return request({
+    url: "/project-process/start/" + projectId + "/" + processId,
+    method: "POST"
+  })
+}
diff --git a/src/views/flowable/task/myProcess/send/index.vue b/src/views/flowable/task/myProcess/send/index.vue
index 46eb4be..3f23f26 100644
--- a/src/views/flowable/task/myProcess/send/index.vue
+++ b/src/views/flowable/task/myProcess/send/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-card class="box-card" >
       <div slot="header" class="clearfix">
-        <span class="el-icon-document">鍙戣捣浠诲姟</span>
+        <span class="el-icon-document">{{`娴佺▼澶勭悊锛歚 + processName}}</span>
         <el-button style="float: right;" size="mini" type="danger" @click="goBack">鍏抽棴</el-button>
       </div>
       <el-tabs  tab-position="top" v-model="activeName"  @tab-click="handleClick">
@@ -38,7 +38,8 @@
 <script>
 import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
 import BpmnViewer from '@/components/Process/viewer';
-import {flowFormData} from "@/api/flowable/process";
+import {completeSubmitFormTask} from "@/api/flowable/process";
+import { flowTaskForm } from "@/api/flowable/todo";
 import {getNextFlowNodeByStart} from "@/api/flowable/todo";
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
@@ -53,6 +54,8 @@
   props: {},
   data() {
     return {
+      taskId: '',
+      processName: '',
       // 妯″瀷xml鏁版嵁
       flowData: {},
       activeName: '1', // 鍒囨崲tab鏍囩
@@ -78,11 +81,13 @@
     };
   },
   created() {
+    this.processName = this.$route.query && this.$route.query.processName;
     this.deployId = this.$route.query && this.$route.query.deployId;
+    this.taskId = this.$route.query && this.$route.query.taskId;
     // 鍒濆鍖栬〃鍗�
     this.procDefId  = this.$route.query && this.$route.query.procDefId;
     // this.getNextFlowNodeByStart(this.deployId);
-    this.getFlowFormData(this.deployId);
+    this.getFlowFormData(this.taskId);
   },
   methods: {
     handleClick(tab, event) {
@@ -93,15 +98,28 @@
       }
     },
     /** 娴佺▼琛ㄥ崟鏁版嵁 */
-    getFlowFormData(deployId) {
-      const params = {deployId: deployId}
-      flowFormData(params).then(res => {
-        // 娴佺▼杩囩▼涓笉瀛樺湪鍒濆鍖栬〃鍗� 鐩存帴璇诲彇鐨勬祦绋嬪彉閲忎腑瀛樺偍鐨勮〃鍗曞��
-        this.$nextTick(() => {
-          // 鍥炴樉鏁版嵁
-          this.$refs.vFormRef.setFormJson(res.data);
-          this.formJson = res.data;
-        })
+    getFlowFormData(taskId) {
+      const params = {taskId: taskId}
+      flowTaskForm(params).then(res => {
+        if (res.data.formJson) {
+          // 鍥炴樉琛ㄥ崟
+          this.$refs.vFormRef.setFormJson(res.data.formJson);
+          this.formJson = res.data.formJson;
+          this.$nextTick(() => {
+            // 鍔犺浇琛ㄥ崟濉啓鐨勬暟鎹�
+            this.$refs.vFormRef.setFormData(res.data);
+            // this.$nextTick(() => {
+            //   // 琛ㄥ崟绂佺敤
+            //   this.$refs.vFormRef.disableForm();
+            // })
+          })
+        } else {
+          this.$nextTick(() => {
+            // 鍥炴樉鏁版嵁
+            this.$refs.vFormRef.setFormJson(res.data);
+            this.formJson = res.data;
+          })
+        }
       }).catch(res => {
         this.goBack();
       })
@@ -144,11 +162,16 @@
                 }
                 // 澶嶅埗瀵硅薄鐨勫睘鎬у�肩粰鏂扮殑瀵硅薄
                 Object.assign(param, formData);
-                // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺
-                definitionStart(this.procDefId, param).then(res => {
+                // 瀹屾垚浠诲姟
+                completeSubmitFormTask(this.taskId, param).then(res => {
                   this.$modal.msgSuccess(res.msg);
                   this.goBack();
                 })
+                // // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺
+                // definitionStart(this.procDefId, param).then(res => {
+                //   this.$modal.msgSuccess(res.msg);
+                //   this.goBack();
+                // })
               }
             }
           }
@@ -182,11 +205,16 @@
         } else {
           this.$set(param, "approval", this.checkValues);
         }
-        // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺
-        definitionStart(this.procDefId, param).then(res => {
+        // 瀹屾垚浠诲姟
+        completeSubmitFormTask(this.taskId, param).then(res => {
           this.$modal.msgSuccess(res.msg);
           this.goBack();
         })
+        // // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺
+        // definitionStart(this.procDefId, param).then(res => {
+        //   this.$modal.msgSuccess(res.msg);
+        //   this.goBack();
+        // })
       }
     },
     // 鐢ㄦ埛淇℃伅閫変腑鏁版嵁
diff --git a/src/views/flowable/task/myProcess/send/index1.vue b/src/views/flowable/task/myProcess/send/index1.vue
new file mode 100644
index 0000000..46eb4be
--- /dev/null
+++ b/src/views/flowable/task/myProcess/send/index1.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" >
+      <div slot="header" class="clearfix">
+        <span class="el-icon-document">鍙戣捣浠诲姟</span>
+        <el-button style="float: right;" size="mini" type="danger" @click="goBack">鍏抽棴</el-button>
+      </div>
+      <el-tabs  tab-position="top" v-model="activeName"  @tab-click="handleClick">
+        <!--琛ㄥ崟淇℃伅-->
+        <el-tab-pane label="琛ㄥ崟淇℃伅" name="1">
+          <!--鍒濆鍖栨祦绋嬪姞杞借〃鍗曚俊鎭�-->
+          <el-col :span="16" :offset="4">
+            <v-form-render :form-data="formRenderData" ref="vFormRef"/>
+            <div style="margin-left:15%;margin-bottom: 20px;font-size: 14px;">
+              <el-button type="primary" @click="submitForm">鎻� 浜�</el-button>
+              <el-button type="primary" @click="resetForm">閲� 缃�</el-button>
+            </div>
+          </el-col>
+        </el-tab-pane>
+        <!--娴佺▼鍥�-->
+        <el-tab-pane label="娴佺▼鍥�" name="2">
+          <bpmn-viewer :flowData="flowData"/>
+        </el-tab-pane>
+      </el-tabs>
+      <!--閫夋嫨娴佺▼鎺ユ敹浜�-->
+      <el-dialog :title="taskTitle" :visible.sync="taskOpen" width="65%" append-to-body>
+        <flow-user v-if="checkSendUser" :checkType="checkType"  @handleUserSelect="handleUserSelect"/>
+        <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"/>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="taskOpen = false">鍙� 娑�</el-button>
+          <el-button type="primary" @click="submitTask">鎻� 浜�</el-button>
+        </span>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
+import BpmnViewer from '@/components/Process/viewer';
+import {flowFormData} from "@/api/flowable/process";
+import {getNextFlowNodeByStart} from "@/api/flowable/todo";
+import FlowUser from '@/components/flow/User'
+import FlowRole from '@/components/flow/Role'
+
+export default {
+  name: "Record",
+  components: {
+    BpmnViewer,
+    FlowUser,
+    FlowRole,
+  },
+  props: {},
+  data() {
+    return {
+      // 妯″瀷xml鏁版嵁
+      flowData: {},
+      activeName: '1', // 鍒囨崲tab鏍囩
+      // 鏌ヨ鍙傛暟
+      queryParams: {
+        deptId: undefined
+      },
+      // 閬僵灞�
+      loading: true,
+      deployId: "",  // 娴佺▼瀹氫箟缂栧彿
+      procDefId: "",  // 娴佺▼瀹炰緥缂栧彿
+      formRenderData: {},
+      variables: [], // 娴佺▼鍙橀噺鏁版嵁
+      taskTitle: null,
+      taskOpen: false,
+      checkSendUser: false, // 鏄惁灞曠ず浜哄憳閫夋嫨妯″潡
+      checkSendRole: false,// 鏄惁灞曠ず瑙掕壊閫夋嫨妯″潡
+      checkType: '', // 閫夋嫨绫诲瀷
+      checkValues: null, // 閫変腑浠诲姟鎺ユ敹浜哄憳鏁版嵁
+      formData: {}, // 濉啓鐨勮〃鍗曟暟鎹�,
+      multiInstanceVars: '', // 浼氱鑺傜偣
+      formJson: {} // 琛ㄥ崟json
+    };
+  },
+  created() {
+    this.deployId = this.$route.query && this.$route.query.deployId;
+    // 鍒濆鍖栬〃鍗�
+    this.procDefId  = this.$route.query && this.$route.query.procDefId;
+    // this.getNextFlowNodeByStart(this.deployId);
+    this.getFlowFormData(this.deployId);
+  },
+  methods: {
+    handleClick(tab, event) {
+      if (tab.name === '2'){
+        flowXmlAndNode({deployId:this.deployId}).then(res => {
+          this.flowData = res.data;
+        })
+      }
+    },
+    /** 娴佺▼琛ㄥ崟鏁版嵁 */
+    getFlowFormData(deployId) {
+      const params = {deployId: deployId}
+      flowFormData(params).then(res => {
+        // 娴佺▼杩囩▼涓笉瀛樺湪鍒濆鍖栬〃鍗� 鐩存帴璇诲彇鐨勬祦绋嬪彉閲忎腑瀛樺偍鐨勮〃鍗曞��
+        this.$nextTick(() => {
+          // 鍥炴樉鏁版嵁
+          this.$refs.vFormRef.setFormJson(res.data);
+          this.formJson = res.data;
+        })
+      }).catch(res => {
+        this.goBack();
+      })
+    },
+    /** 杩斿洖椤甸潰 */
+    goBack() {
+      // 鍏抽棴褰撳墠鏍囩椤靛苟杩斿洖涓婁釜椤甸潰
+      const obj = { path: "/task/process", query: { t: Date.now()} };
+      this.$tab.closeOpenPage(obj);
+    },
+    /** 鐢宠娴佺▼琛ㄥ崟鏁版嵁鎻愪氦 */
+    submitForm() {
+      this.$refs.vFormRef.getFormData().then(formData => {
+        // 鏍规嵁褰撳墠浠诲姟鎴栬�呮祦绋嬭璁¢厤缃殑涓嬩竴姝ヨ妭鐐� todo 鏆傛椂鏈秹鍙婂埌鑰冭檻缃戝叧銆佽〃杈惧紡鍜屽鑺傜偣鎯呭喌
+        getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => {
+          const data = res.data;
+          if (data) {
+            this.formData = formData;
+            if (data.dataType === 'dynamic') {
+              if (data.type === 'assignee') { // 鎸囧畾浜哄憳
+                this.checkSendUser = true;
+                this.checkType = "single";
+              } else if (data.type === 'candidateUsers') {  // 鍊欓�変汉鍛�(澶氫釜)
+                this.checkSendUser = true;
+                this.checkType = "multiple";
+              } else if (data.type === 'candidateGroups') { // 鎸囧畾缁�(鎵�灞炶鑹叉帴鏀朵换鍔�)
+                this.checkSendRole = true;
+              } else { // 浼氱
+                // 娴佺▼璁捐鎸囧畾鐨� elementVariable 浣滀负浼氱浜哄憳鍒楄〃
+                this.multiInstanceVars = data.vars;
+                this.checkSendUser = true;
+                this.checkType = "multiple";
+              }
+              this.taskOpen = true;
+              this.taskTitle = "閫夋嫨浠诲姟鎺ユ敹";
+            } else {
+              if (this.procDefId) {
+                const param = {
+                  formJson:  this.formJson,
+                }
+                // 澶嶅埗瀵硅薄鐨勫睘鎬у�肩粰鏂扮殑瀵硅薄
+                Object.assign(param, formData);
+                // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺
+                definitionStart(this.procDefId, param).then(res => {
+                  this.$modal.msgSuccess(res.msg);
+                  this.goBack();
+                })
+              }
+            }
+          }
+        })
+      }).catch(error => {
+        // this.$modal.msgError(error)
+      })
+    },
+    /** 閲嶇疆琛ㄥ崟 */
+    resetForm() {
+      this.$refs.vFormRef.resetForm();
+    },
+    /** 鎻愪氦娴佺▼ */
+    submitTask() {
+      if (!this.checkValues && this.checkSendUser){
+        this.$modal.msgError("璇烽�夋嫨浠诲姟鎺ユ敹!");
+        return;
+      }
+      if (!this.checkValues && this.checkSendRole){
+        this.$modal.msgError("璇烽�夋嫨娴佺▼鎺ユ敹瑙掕壊缁�!");
+        return;
+      }
+      if (this.formData) {
+        const param = {
+          formJson:  this.formJson,
+        }
+        // 澶嶅埗瀵硅薄鐨勫睘鎬у�肩粰鏂扮殑瀵硅薄
+        Object.assign(param, this.formData);
+        if (this.multiInstanceVars) {
+          this.$set(param, this.multiInstanceVars, this.checkValues);
+        } else {
+          this.$set(param, "approval", this.checkValues);
+        }
+        // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺
+        definitionStart(this.procDefId, param).then(res => {
+          this.$modal.msgSuccess(res.msg);
+          this.goBack();
+        })
+      }
+    },
+    // 鐢ㄦ埛淇℃伅閫変腑鏁版嵁
+    handleUserSelect(selection) {
+      if (selection) {
+        if (selection instanceof Array) {
+          const selectVal = selection.map(item => item.userId);
+          if (this.multiInstanceVars) {
+            this.checkValues = selectVal;
+          } else {
+            this.checkValues = selectVal.join(',');
+          }
+        } else {
+          this.checkValues = selection.userId;
+        }
+      }
+    },
+    // 瑙掕壊淇℃伅閫変腑鏁版嵁
+    handleRoleSelect(selection) {
+      if (selection) {
+        if (selection instanceof Array) {
+          const selectVal = selection.map(item => item.roleId);
+          this.checkValues = selectVal.join(',')
+        } else {
+          this.checkValues = selection;
+        }
+      }
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.test-form {
+  margin: 15px auto;
+  width: 800px;
+  padding: 15px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+
+.my-label {
+  background: #E1F3D8;
+}
+</style>
diff --git a/src/views/projectProcess/components/RunProcess.vue b/src/views/projectProcess/components/RunProcess.vue
index 94d5327..ce9d718 100644
--- a/src/views/projectProcess/components/RunProcess.vue
+++ b/src/views/projectProcess/components/RunProcess.vue
@@ -74,7 +74,7 @@
         </el-table>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="danger" @click="startProcess">鍚姩</el-button>
+        <el-button type="danger" @click="startProcess" :disable="!this.selectProcessId">鍚姩娴佺▼</el-button>
         <el-button type="primary" @click="changeProcess">鍙樻洿</el-button>
       </span>
     </el-dialog>
@@ -82,7 +82,7 @@
 </template>
 
 <script>
-import {projectSetProcess} from "@/api/projectProcess/projectProcess";
+import {projectSetProcess, startProcess} from "@/api/projectProcess/projectProcess";
 
 export default {
   dicts: ['sys_project_type', 'sys_funding_type', 'sys_investment_type', 'sys_key_categories'],
@@ -148,7 +148,9 @@
     },
     // 鍚姩娴佺▼
     startProcess() {
-
+      startProcess(this.projectInfo.projectId, this.selectProcessId).then(res => {
+        this.$message.success(res.msg);
+      })
     },
     // 鍙樻洿娴佺▼
     changeProcess() {
diff --git a/src/views/projectProcess/detail/index.vue b/src/views/projectProcess/detail/index.vue
new file mode 100644
index 0000000..1b1b5f0
--- /dev/null
+++ b/src/views/projectProcess/detail/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="app-container">
+    <div class="top">
+      <div class="project-title">
+        <h2>椤圭洰鍚嶇О锛歿{detailData.projectName}}</h2>
+      </div>
+      <div class="project-info">
+        <div class="project-info-item"></div>
+        <div class="project-info-item">椤圭洰浠g爜锛歿{detailData.projectCode}}</div>
+        <div class="project-info-item">
+          <div style="color: black">
+            <div>涓璧勯噾</div>
+            <div>甯傞噸鐐归」鐩�</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="search-warp">
+      <div @click="changeTab(1, 'all')" :class="{'item-warm': true, 'all-color': true, 'active': 1 === selectTabId}">鍏ㄩ儴浜嬮」锛坽{detailData.statistics.totalTaskNum}}锛�</div>
+      <div @click="changeTab(2, 'todo')" :class="{'item-warm': true, 'all-color': true, 'active': 2 === selectTabId}">浠e姙浜嬮」锛坽{detailData.statistics.todoTaskNum}}锛�</div>
+      <div @click="changeTab(3, 'current')" :class="{'item-warm': true, 'current-color': true, 'active': 3 === selectTabId}">褰撳墠鐜妭</div>
+      <div @click="changeTab(4, 'remaining')" :class="{'item-warm': true, 'remaining-color': true, 'active': 4 === selectTabId}">鍓╀綑浜嬮」锛坽{detailData.statistics.totalTaskNum}}锛�</div>
+      <div @click="changeTab(5, 'timely')" :class="{'item-warm': true, 'timely-color': true, 'active': 5 === selectTabId}">鎸夋椂瀹屾垚锛�0锛�</div>
+      <div @click="changeTab(6, 'overtime')" :class="{'item-warm': true, 'overtime-color': true, 'active': 6 === selectTabId}">瓒呮椂浜嬮」锛�0锛�</div>
+      <div @click="changeTab(7, 'willOvertime')" :class="{'item-warm': true, 'willOvertime-color': true, 'active': 7 === selectTabId}">涓存湡浜嬮」锛�0锛�</div>
+      <div @click="changeTab(8, 'urge')" :class="{'item-warm': true, 'urge-color': true, 'active': 8 === selectTabId}">鐫e姙浜嬮」锛�0锛�</div>
+    </div>
+    <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px">
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="浠诲姟鍚嶇О">
+          <el-input v-model="queryParams.taskName" placeholder="浠诲姟鍚嶇О"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">鏌ヨ</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table">
+      <el-table
+        :data="taskList"
+        border
+        style="width: 100%">
+        <el-table-column
+          prop="taskName"
+          label="浠诲姟鍚嶇О"
+         >
+        </el-table-column>
+        <el-table-column
+          prop="procDefName"
+          label="娴佺▼鍚嶇О"
+         >
+        </el-table-column>
+        <el-table-column
+          prop="startUserName"
+          label="鍙戣捣浜�"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="startDeptName"
+          label="鍙戣捣鍗曚綅"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="assigneeDeptName"
+          label="澶勭悊鍗曚綅"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="assigneeName"
+          label="瀹為檯澶勭悊浜�"
+        >
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="鎿嶄綔"
+          width="100">
+          <template slot-scope="scope">
+            <el-button @click="goToProcessDetail(scope.row)" type="text" size="small">鏌ョ湅</el-button>
+            <el-button @click="goToDo(scope.row)" type="text" size="small">鍔炵悊</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination
+          v-if="total > pageSize"
+          :page-size="pageSize"
+          :current-page="pageNum"
+          :total="total"
+          layout="total, prev, pager, next"
+          @current-change="getList"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getProjectProcessDetail} from "@/api/projectProcess/projectProcess";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      projectId: null,
+      processId: null,
+      detailData: {},
+      selectTabId: 2,
+      taskList: [],
+      total: 0,
+      pageSize: 5,
+      pageNum: 1,
+      queryParams: {
+        taskName: ''
+      }
+    }
+  },
+  mounted() {
+    this.projectId = this.$route.query.projectId
+    this.processId = this.$route.query.processId
+    this.getProjectProcessInfo()
+  },
+  methods: {
+    goToDo(row) {
+      // TODO 杩欓噷鐨勫垽鏂潯浠舵牴鎹疄闄呮儏鍐佃缃�
+      if (this.$auth.hasRole('admin')) {
+        console.log("zhe")
+        this.$router.push({
+          path: '/flowable/task/todo/detail/index',
+          query: {
+            taskName: row.procDefName,
+            startUser: row.startUserName,
+            deployId: row.deployId,
+            taskId: row.taskId,
+            procInsId: row.procInsId,
+            executionId: row.executionId
+          }
+        })
+      } else {
+        this.$router.push({
+          path: '/flowable/task/myProcess/send/index',
+          query: {
+            deployId: row.deployId,
+            procDefId: row.procDefId,
+            processName: row.procDefName,
+            taskId: row.taskId
+          }
+        })
+      }
+    },
+    goToProcessDetail(row) {
+      this.$router.push({ path: '/flowable/task/myProcess/detail/index',
+        query: {
+          procInsId: row.procInsId,
+          deployId: row.deployId,
+          taskId: row.taskId
+        }})
+    },
+    getList() {
+      // 鑾峰彇浠诲姟鍒楄〃
+    },
+    // 鏌ヨ璇︽儏
+    getProjectProcessInfo() {
+      getProjectProcessDetail(this.projectId, this.processId).then(res => {
+        this.detailData = res.data
+        this.taskList = res.taskList
+      })
+    },
+    changeTab(id, event) {
+      this.selectTabId = id
+    }
+  }
+}
+</script>
+
+<style scoped>
+.project-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.project-info {
+  display: flex;
+  color: #a9a8a8;
+}
+.project-info-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-warp {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.item-warm {
+  width: 134px;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  margin: 0 20px;
+  transition: transform 0.3s ease; /* 娣诲姞杩囨浮鏁堟灉 */
+}
+.item-warm:hover {
+  cursor: pointer;
+  transform: translateY(-10px);
+}
+.all-color {
+  background-color: rgb(180, 253, 255);
+}
+
+.current-color {
+  background-color: rgb(127, 131, 247);
+  color: white;
+}
+.remaining-color {
+  background-color: rgb(164, 173, 179);
+  color: white;
+}
+.timely-color {
+  background-color: rgb(204, 247, 131);
+}
+.overtime-color {
+  background-color: rgb(129, 179, 55);
+  color: white;
+}
+.willOvertime-color {
+  background-color: rgb(255, 248, 29);
+}
+.urge-color {
+  background-color: rgb(0, 0, 0);
+  color: white;
+}
+.active {
+  transform: translateY(-10px);
+}
+
+.table {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/src/views/projectProcess/index.vue b/src/views/projectProcess/index.vue
index af37779..cab82e0 100644
--- a/src/views/projectProcess/index.vue
+++ b/src/views/projectProcess/index.vue
@@ -226,13 +226,13 @@
       <!-- 鎿嶄綔鍒� -->
       <el-table-column label="鎿嶄綔" width="140" align="center" >
         <template slot-scope="scope">
-          <!--          <el-button-->
-          <!--            size="medium"-->
-          <!--            type="text"-->
-          <!--            icon="el-icon-view"-->
-          <!--            @click="lookProcessDetail(scope.row)"-->
-          <!--          >-->
-          <!--          </el-button>-->
+                    <el-button
+                      size="medium"
+                      type="text"
+                      icon="el-icon-view"
+                      @click="lookProcessDetail(scope.row)"
+                    >
+                    </el-button>
           <!--          <el-button-->
           <!--            v-if="isReserve"-->
           <!--            size="medium"-->
@@ -387,6 +387,16 @@
     this.getList();
   },
   methods: {
+    // 鏌ョ湅璇︽儏
+    lookProcessDetail(row) {
+      this.$router.push({
+        path: '/projectFlow/detail',
+        query: {
+          projectId: row.id,
+          processId: row.flowableProcessId
+        }
+      })
+    },
     closeRunProcess() {
       this.projectRunFrom = {
         projectId: null,

--
Gitblit v1.8.0