⚡ 完善流程

src/api/work/process.js

@@ -2,14 +2,12 @@ import request from '@/router/axios';
 
 // =====================参数===========================
 
-export const historyFlowList = (current, size, params) => {
+export const historyFlowList = (processInstanceId) => {
   return request({
     url: '/api/blade-flow/process/history-flow-list',
     method: 'get',
     params: {
-      ...params,
-      current,
-      size,
+      processInstanceId
     }
   })
 }
@@ -25,10 +23,12 @@ export const leaveProcess = (data) => {
   })
 }
 
-export const leaveDetail = (params) => {
+export const leaveDetail = (businessId) => {
   return request({
     url: '/api/blade-desk/process/leave/detail',
     method: 'get',
-    params
+    params: {
+      businessId
+    }
   })
 }

src/api/work/work.js

@@ -61,11 +61,13 @@ export const doneList = (current, size, params) => {
   })
 }
 
-export const claimTask = (params) => {
+export const claimTask = (taskId) => {
   return request({
     url: '/api/blade-flow/work/claim-task',
     method: 'post',
-    params
+    params: {
+      taskId
+    }
   })
 }
 

src/page/login/userlogin.vue

@@ -72,7 +72,7 @@ export default {
         ],
         password: [
           { required: true, message: "请输入密码", trigger: "blur" },
-          { min: 5, message: "密码长度最少为6位", trigger: "blur" }
+          { min: 1, message: "密码长度最少为6位", trigger: "blur" }
         ]
       },
       passwordType: "password"

src/util/date.js

@@ -1,50 +1,51 @@
 export const calcDate = (date1, date2) => {
-    var date3 = date2 - date1;
+  let date3 = date2 - date1;
 
-    var days = Math.floor(date3 / (24 * 3600 * 1000))
+  let days = Math.floor(date3 / (24 * 3600 * 1000))
 
-    var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数  
-    var hours = Math.floor(leave1 / (3600 * 1000))
+  let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+  let hours = Math.floor(leave1 / (3600 * 1000))
 
-    var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数  
-    var minutes = Math.floor(leave2 / (60 * 1000))
+  let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+  let minutes = Math.floor(leave2 / (60 * 1000))
 
-    var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数  
-    var seconds = Math.round(date3 / 1000)
-    return {
-        leave1,
-        leave2,
-        leave3,
-        days: days,
-        hours: hours,
-        minutes: minutes,
-        seconds: seconds,
-    }
+  let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+  let seconds = Math.round(date3 / 1000)
+  return {
+    leave1,
+    leave2,
+    leave3,
+    days: days,
+    hours: hours,
+    minutes: minutes,
+    seconds: seconds,
+  }
 }
+
 /**
  * 日期格式化
  */
-export function dateFormat(date) {
-    let format = 'yyyy-MM-dd hh:mm:ss';
-    if (date != 'Invalid Date') {
-        var o = {
-            "M+": date.getMonth() + 1, //month
-            "d+": date.getDate(), //day
-            "h+": date.getHours(), //hour
-            "m+": date.getMinutes(), //minute
-            "s+": date.getSeconds(), //second
-            "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
-            "S": date.getMilliseconds() //millisecond
-        }
-        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
-            (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-        for (var k in o)
-            if (new RegExp("(" + k + ")").test(format))
-                format = format.replace(RegExp.$1,
-                    RegExp.$1.length == 1 ? o[k] :
-                        ("00" + o[k]).substr(("" + o[k]).length));
-        return format;
+export function dateFormat(date, format) {
+  format = format || 'yyyy-MM-dd hh:mm:ss';
+  if (date !== 'Invalid Date') {
+    let o = {
+      "M+": date.getMonth() + 1, //month
+      "d+": date.getDate(), //day
+      "h+": date.getHours(), //hour
+      "m+": date.getMinutes(), //minute
+      "s+": date.getSeconds(), //second
+      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
+      "S": date.getMilliseconds() //millisecond
     }
-    return '';
+    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (let k in o)
+      if (new RegExp("(" + k + ")").test(format))
+        format = format.replace(RegExp.$1,
+          RegExp.$1.length === 1 ? o[k] :
+            ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+  }
+  return '';
 
 }

src/views/flow/follow.vue

@@ -17,7 +17,7 @@
                width="20%">
       <el-form :model="form"
                ref="form"
-               label-width="20px">
+               label-width="80px">
         <el-form-item label="删除理由">
           <el-input v-model="deleteReason"
                     placeholder="请输入删除理由"></el-input>

src/views/work/claim.vue

@@ -62,7 +62,7 @@
 
 <script>
   import {mapGetters} from "vuex";
-  import {claimList} from "@/api/work/work";
+  import {claimList, claimTask} from "@/api/work/work";
   import {getFlowRoute} from "@/util/func";
 
   export default {
@@ -148,10 +148,24 @@
         this.selectionList = list;
       },
       handleClaim(row) {
-
+        this.$confirm("确定签收此任务?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return claimTask(row.taskId);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
       },
       handleDetail(row) {
-        this.$router.push({ path: `/work/process/${getFlowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
+        this.$router.push({path: `/work/process/${getFlowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`});
       },
       handleImage(row) {
         this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;

src/views/work/process/leave/detail.vue

@@ -1,64 +1,110 @@
 <template>
   <basic-container>
-    <avue-form :option="option" v-model="form" :upload-before="uploadBefore" :upload-after="uploadAfter"></avue-form>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-row type="flex" class="row-bg" justify="end">
+        <el-form-item>
+          <el-button @click="handleCancel">关闭</el-button>
+        </el-form-item>
+      </el-row>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>审批信息</span>
+        </div>
+        <el-form-item label="申请人">
+          <el-input :disabled="true" v-model="form.flow.assigneeName"></el-input>
+        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="开始时间">
+              <el-input :disabled="true" v-model="form.startTime"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="结束时间">
+              <el-input :disabled="true" v-model="form.endTime"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="请假理由">
+          <el-input :disabled="true" type="textarea" v-model="form.reason"></el-input>
+        </el-form-item>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>流程信息</span>
+        </div>
+        <el-row type="flex" class="row-bg">
+          <avue-timeline pending time :time-width="200">
+            <avue-timeline-item v-for="flow in flowList">
+              <div slot="time">
+                <p>{{flow.createTime}}</p>
+              </div>
+              <div slot="content">
+                <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
+                <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
+                <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
+                <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
+              </div>
+            </avue-timeline-item>
+          </avue-timeline>
+        </el-row>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>流程跟踪</span>
+        </div>
+        <el-row type="flex" class="row-bg">
+          <img :src="src" alt="design">
+        </el-row>
+      </el-card>
+    </el-form>
   </basic-container>
 </template>
 
 <script>
+  import {historyFlowList, leaveDetail} from "@/api/work/process";
+
   export default {
     data() {
       return {
+        businessId: '',
+        processInstanceId: '',
+        src: '',
+        flowList: [],
         form: {
-          imgUrl: [],
-        },
-        option: {
-          labelWidth: 120,
-          column: [
-            {
-              label: '流程类型',
-              prop: 'flowCategory',
-              type: 'select',
-              dicUrl: `/api/blade-system/dict/dictionary?code=flow`,
-              props: {
-                label: "dictValue",
-                value: "dictKey"
-              },
-              rules: [
-                {
-                  required: true,
-                  message: '请选择流程类型',
-                  trigger: 'blur'
-                }
-              ]
-            },
-            {
-              label: '附件上传',
-              prop: 'imgUrl',
-              type: 'upload',
-              loadText: '附件上传中，请稍等',
-              span: 24,
-              propsHttp: {
-                res: 'data.0'
-              },
-              tip: '请上传 bpmn20.xml 标准格式文件',
-            },
-          ]
+          flow:{
+            assigneeName:'',
+          },
+          startTime: '',
+          endTime: '',
+          reason: '',
         }
       }
     },
+    created() {
+      this.init();
+    },
     methods: {
-      uploadBefore(file, done, loading) {
-        console.log(file)
-        done()
-        this.$message.success('上传前的方法')
-      },
-      uploadAfter(res, done, loading) {
-        console.log(res)
-        done()
-        this.$message.success('上传后的方法')
+      init() {
+        this.processInstanceId = this.$route.params.processInstanceId;
+        this.businessId = this.$route.params.businessId;
+        this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}`;
+        historyFlowList(this.processInstanceId).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.flowList = data.data;
+          }
+        })
+        leaveDetail(this.businessId).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.form = data.data;
+          }
+        })
       },
-      submit() {
-        this.$message.success('当前数据' + JSON.stringify(this.form))
+      handleCancel() {
+        this.$router.$avueRouter.closeTag();
+        this.$router.push({path: `/work/start`});
       }
     }
   }

src/views/work/process/leave/handle.vue

@@ -1,64 +1,162 @@
 <template>
   <basic-container>
-    <avue-form :option="option" v-model="form" :upload-before="uploadBefore" :upload-after="uploadAfter"></avue-form>
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-row type="flex" class="row-bg" justify="end">
+        <el-form-item>
+          <el-button type="primary" @click="handleAgree">同意</el-button>
+          <el-button type="danger" @click="handleDisagree">驳回</el-button>
+          <el-button @click="handleCancel">关闭</el-button>
+        </el-form-item>
+      </el-row>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>审批信息</span>
+        </div>
+        <el-form-item label="申请人">
+          <el-input :disabled="true" v-model="form.flow.assigneeName"></el-input>
+        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="开始时间">
+              <el-input :disabled="true" v-model="form.startTime"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="结束时间">
+              <el-input :disabled="true" v-model="form.endTime"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="请假理由">
+          <el-input :disabled="true" type="textarea" v-model="form.reason"></el-input>
+        </el-form-item>
+        <el-form-item label="批复意见">
+          <el-input type="textarea" v-model="form.comment"></el-input>
+        </el-form-item>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>流程信息</span>
+        </div>
+        <el-row type="flex" class="row-bg">
+          <avue-timeline pending time :time-width="200">
+            <avue-timeline-item v-for="flow in flowList">
+              <div slot="time">
+                <p>{{flow.createTime}}</p>
+              </div>
+              <div slot="content">
+                <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
+                <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
+                <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
+                <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
+              </div>
+            </avue-timeline-item>
+          </avue-timeline>
+        </el-row>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>流程跟踪</span>
+        </div>
+        <el-row type="flex" class="row-bg">
+          <img :src="src" alt="design">
+        </el-row>
+      </el-card>
+    </el-form>
   </basic-container>
 </template>
 
 <script>
+  import {historyFlowList, leaveDetail} from "@/api/work/process";
+  import {completeTask} from "@/api/work/work";
+
   export default {
     data() {
       return {
+        taskId: '',
+        businessId: '',
+        processInstanceId: '',
+        src: '',
+        flowList: [],
         form: {
-          imgUrl: [],
+          flow: {
+            assigneeName: '',
+          },
+          startTime: '',
+          endTime: '',
+          reason: '',
+          comment: '',
         },
-        option: {
-          labelWidth: 120,
-          column: [
-            {
-              label: '流程类型',
-              prop: 'flowCategory',
-              type: 'select',
-              dicUrl: `/api/blade-system/dict/dictionary?code=flow`,
-              props: {
-                label: "dictValue",
-                value: "dictKey"
-              },
-              rules: [
-                {
-                  required: true,
-                  message: '请选择流程类型',
-                  trigger: 'blur'
-                }
-              ]
-            },
-            {
-              label: '附件上传',
-              prop: 'imgUrl',
-              type: 'upload',
-              loadText: '附件上传中，请稍等',
-              span: 24,
-              propsHttp: {
-                res: 'data.0'
-              },
-              tip: '请上传 bpmn20.xml 标准格式文件',
-            },
-          ]
-        }
       }
     },
+    created() {
+      this.init();
+    },
     methods: {
-      uploadBefore(file, done, loading) {
-        console.log(file)
-        done()
-        this.$message.success('上传前的方法')
+      init() {
+        this.taskId = this.$route.params.taskId;
+        this.processInstanceId = this.$route.params.processInstanceId;
+        this.businessId = this.$route.params.businessId;
+        this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}`;
+        historyFlowList(this.processInstanceId).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.flowList = data.data;
+          }
+        })
+        leaveDetail(this.businessId).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.form = data.data;
+          }
+        })
       },
-      uploadAfter(res, done, loading) {
-        console.log(res)
-        done()
-        this.$message.success('上传后的方法')
+      handleAgree() {
+        if (!this.form.comment) {
+          this.$message.warning('请先填写批复意见');
+          return;
+        }
+        const params = {
+          taskId: this.taskId,
+          processInstanceId: this.processInstanceId,
+          flag: 'ok',
+          comment: this.form.comment,
+        };
+        completeTask(params).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.$message.success(data.msg);
+            this.$router.$avueRouter.closeTag();
+            this.$router.push({path: `/work/start`});
+          } else {
+            this.$message.error(data.msg || '提交失败');
+          }
+        })
+      },
+      handleDisagree() {
+        if (!this.form.comment) {
+          this.$message.warning('请先填写批复意见');
+          return;
+        }
+        const params = {
+          taskId: this.taskId,
+          processInstanceId: this.processInstanceId,
+          comment: this.form.comment,
+        };
+        completeTask(params).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.$message.success(data.msg);
+            this.$router.$avueRouter.closeTag();
+            this.$router.push({path: `/work/start`});
+          } else {
+            this.$message.error(data.msg || '提交失败');
+          }
+        })
       },
-      submit() {
-        this.$message.success('当前数据' + JSON.stringify(this.form))
+      handleCancel() {
+        this.$router.$avueRouter.closeTag();
+        this.$router.push({path: `/work/start`});
       }
     }
   }

src/views/work/todo.vue

@@ -148,7 +148,7 @@
         this.selectionList = list;
       },
       handleWork(row) {
-
+        this.$router.push({ path: `/work/process/${getFlowRoute(this.flowRoutes, row.category)}/handle/${row.taskId}/${row.processInstanceId}/${row.businessId}` });
       },
       handleDetail(row) {
         this.$router.push({ path: `/work/process/${getFlowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });