feat：工作流 - 前端进度 90%

app/Http/Controllers/Api/WorkflowController.php

@@ -653,6 +653,7 @@ class WorkflowController extends AbstractController
     public function workflowMsg($type, $dialog, $botUser, $toUser, $process, $action = null)
     {
         $data = [
+            'id' => $process['id'],
             'nickname' => User::userid2nickname($type == 'workflow_submitter' ? $toUser['userid'] : $process['start_user_id']),
             'proc_def_name' => $process['proc_def_name'],
             'department' => $process['department'],

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -497,6 +497,11 @@
                 </div>
             </div>
         </DrawerOverlay>
+
+        <!--审批详情-->
+        <DrawerOverlay v-model="approveDetailsShow"  placement="right" :size="600">
+            <ReviewDetails v-if="approveDetailsShow" :data="approveDetails" style="height: 100%;border-radius: 10px;"></ReviewDetails>
+        </DrawerOverlay>
     </div>
 </template>
 
@@ -516,6 +521,8 @@ import DialogSelect from "./DialogSelect";
 import ImgUpload from "../../../components/ImgUpload.vue";
 import {choiceEmojiOne} from "./ChatInput/one";
 
+import ReviewDetails from "../../../pages/manage/review/details.vue";
+
 export default {
     name: "DialogWrapper",
     components: {
@@ -528,7 +535,8 @@ export default {
         DialogGroupInfo,
         DrawerOverlay,
         UserInput,
-        DialogUpload
+        DialogUpload,
+        ReviewDetails
     },
 
     props: {
@@ -639,6 +647,9 @@ export default {
             scrollTmp: 0,
 
             positionLoad: 0,
+
+            approveDetails:{id: 0},
+            approveDetailsShow: false
         }
     },
 
@@ -2358,6 +2369,22 @@ export default {
             if (this.operateVisible) {
                 return
             }
+
+            // 打开审批详情
+            let domAudits = $(target).parents(".open-review-details")
+            if( domAudits.length > 0 ){
+                let dataId = domAudits[0].getAttribute("data-id")
+                if( window.innerWidth < 425 ){
+                    this.goForward({name: 'manage-review-details', query: { id: domAudits[0].getAttribute("data-id") } });
+                }else{
+                    this.approveDetailsShow = true;
+                    this.$nextTick(()=>{
+                        this.approveDetails = {id:dataId};
+                    })
+                }
+                return;
+            }
+
             switch (target.nodeName) {
                 case "IMG":
                     if (target.classList.contains('browse')) {
@@ -2372,6 +2399,7 @@ export default {
                         this.$store.dispatch("openTask", $A.runNum(target.getAttribute("data-id")));
                     }
                     break;
+                
             }
         },
 

resources/assets/js/pages/manage/review/details.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="review-details">
+    <div class="review-details" :style="{'z-index':modalTransferIndex}">
         <div class="review-details-box">
             <h2 class="review-details-title">
                 <span>{{datas.proc_def_name}}</span>
@@ -26,7 +26,7 @@
             </div>
             <div class="review-details-text">
                 <h4>{{ $L('时长') }}（{{getTimeDifference(datas.var?.start_time,datas.var?.end_time)['unit']}}）</h4>
-                <p>{{ getTimeDifference(datas.var?.start_time,datas.var?.end_time)['time'] }}</p>
+                <p>{{ datas.var?.start_time ? getTimeDifference(datas.var?.start_time,datas.var?.end_time)['time'] : 0 }}</p>
             </div>
             <div class="review-details-text">
                 <h4>{{$L('请假事由')}}</h4>
@@ -130,14 +130,21 @@ export default {
 
     data() {
         return {
+            modalTransferIndex:window.modalTransferIndex,
             datas:{
 
             }
         }
     },
     watch: {
+        '$route' (to, from) {
+            if(to.name == 'manage-review-details'){
+                this.init()
+            }
+        },
         data: {
             handler(newValue,oldValue) {
+                console.log(newValue)
                 if(newValue.id){
                     this.getInfo()
                 }
@@ -146,12 +153,16 @@ export default {
         },
     },
     mounted() {
-        if(this.$route.query.id){
+        this.init()
-            this.data.id = this.$route.query.id;
-            this.getInfo()
-        }
     },
     methods:{
+        init(){
+            this.modalTransferIndex = window.modalTransferIndex = window.modalTransferIndex + 1
+            if(this.$route.query.id){
+                this.data.id = this.$route.query.id;
+                this.getInfo()
+            }
+        },
         // 把时间转成几小时前
         getTimeAgo(time,type) {
             const currentTime = new Date();

resources/assets/js/pages/manage/review/index.vue

@@ -177,7 +177,6 @@ export default {
             searchState:"all",
             searchStateList:[
                 {value:"all",label:"全部状态"},
-                {value:0,label:"待审批"},
                 {value:1,label:"审批中"},
                 {value:2,label:"已通过"},
                 {value:3,label:"已拒绝"},
@@ -206,7 +205,7 @@ export default {
                 endTime:{ type: 'string',required: true, message: this.$L('请选择结束时间！'), trigger: 'change' },
                 description:{ type: 'string',required: true, message: this.$L('请选择结束时间！'), trigger: 'change' },
             },
-            selectTypes:["年假","事假","病假","调休","产假","陪产假","婚假","例假","丧假","哺乳假"]
+            selectTypes:["年假","事假","病假","调休","产假","陪产假","婚假","丧假","哺乳假"]
         }
     },
     mounted() {
@@ -423,5 +422,7 @@ export default {
 </script>
 
 <style scoped>
-
+    .review-details{
+        border-radius: 8px;
+    }
 </style>

resources/assets/js/pages/manage/review/list.vue

@@ -8,12 +8,12 @@
             <Tag v-if="data.state == 3" color="red">{{$L('已拒绝')}}</Tag>
             <Tag v-if="data.state == 4" color="red">{{$L('已撤回')}}</Tag>
         </h2>
-        <p>{{$L('假期类型')}}：<span>{{data.var?.type}}</span></p>
+        <p v-if="data.var?.type">{{$L('假期类型')}}：<span>{{data.var?.type}}</span></p>
         <p>{{$L('开始时间')}}：<span>{{data.var?.start_time}}</span></p>
         <p>{{$L('结束时间')}}：<span>{{data.var?.end_time}}</span></p>
         <div class="list-member">
             <span>
-                <Avatar :src="data.userimg" size="18"/>
+                <Avatar :src="data.userimg" size="20"/>
                 {{ data.start_user_name }}
             </span>
             <span>

resources/assets/sass/pages/page-review.scss

@@ -95,7 +95,7 @@
                             display: flex;
                             align-items: center;
                             justify-content: space-between;
-                            margin-top: 8px;
+                            margin-top: 10px;
                             > span {
                                 display: flex;
                                 align-items: center;
@@ -136,7 +136,6 @@
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    border-radius: 8px;
     border: 1px solid #eeeeee;
     background: #fff;
     .review-details-box{
@@ -194,40 +193,6 @@
         .review-details-text:nth-last-child(1){
             margin-bottom: 0;
         }
-        .review-details-process{
-            display: flex;
-            flex-direction: column;
-            margin-top: 16px;
-            position: relative;
-            .review-details-line{
-                position: absolute;
-                left: 23px;
-                top: 5px;
-                bottom: 5px;
-                width: 3px;
-                background: #19be6b;
-                z-index: 1;
-            }
-            .review-process{
-                display: flex;
-                justify-content: space-between;
-                position: relative;
-                z-index: 2;
-                margin-bottom: 32px;
-                .review-process-left{
-                    display: flex;
-                    align-items: center;
-                    .review-process-text{
-                        display: flex;
-                        flex-direction: column;
-                        margin-left: 8px;
-                    }
-                }
-            }
-            .review-process:nth-last-child(1){
-                margin-bottom: 0;
-            }
-        }
         .review-copy{
             margin-top: 8px;
             display: flex;

resources/views/push/bot.blade.php

@@ -109,48 +109,50 @@
 @elseif ($type === 'notice')
     {{$notice}}
 @elseif ($type === 'workflow_reviewer')
-<b>{{$data->nickname}}提交的「{{$data->proc_def_name}}」待你审批</b>
+    <span class="open-review-details" data-id="{{$data->id}}"><b style="border-bottom: 1px solid #e3e3e3;padding-bottom: 10px;">{{$data->nickname}}提交的「{{$data->proc_def_name}}」待你审批</b>
-
+    <div style="border-bottom: 1px solid #e3e3e3;padding: 10px 0;"><span style="display: inline-block;padding:15px 0;">申请人：<span style="color:#84c56a">{{'@'}}{{$data->nickname}}</span> {{$data->department}}</span>
-申请人：<span style="color:#84c56a">{{$data->nickname}} {{$data->department}}</span>
+        <b>审批事由</b>
-
+        @if ($data->type)
-<b>审批事由</b>
+        <span>假期类型：{{$data->type}}</span>
-假期类型：<span style="color:#84c56a">{{$data->type}}</span>
+        @endif
-开始时间：<span style="color:#84c56a">{{$data->start_time}}</span>
+        <span>开始时间：{{$data->start_time}}</span>
-结束时间：<span style="color:#84c56a">{{$data->end_time}}</span>
+        <span>结束时间：{{$data->end_time}}</span>
-
+    </div><div style="display: flex;text-align: center;gap: 10px;padding: 10px 0 5px 0;">
-    @if ($action === 'pass')
+        @if ($action === 'pass')
-        <span style="color:#84c56a">已同意</span>
+            <Button type="button" class="ivu-btn ivu-btn-small" style="flex: 1;">已同意</Button>
-    @elseif ($action === 'refuse')
+        @elseif ($action === 'refuse')
-        <span style="color:#84c56a">已拒绝</span>
+            <Button type="button" class="ivu-btn ivu-btn-small" style="flex: 1;">已拒绝</Button>
-    @elseif ($action === 'withdraw')
+        @elseif ($action === 'withdraw')
-        <span style="color:#84c56a">已撤销</span>
+            <Button type="button" class="ivu-btn ivu-btn-small" style="flex: 1;">已撤销</Button>
-    @else
+        @else
-        <span style="color:#84c56a">同意</span>
+            <Button type="button" class="ivu-btn ivu-btn-primary ivu-btn-small" style="flex: 1;">同意</Button>
-        <span style="color:#84c56a">拒绝</span>
+            <Button type="button" class="ivu-btn ivu-btn-error ivu-btn-small" style="flex: 1;">拒绝</Button>
-    @endif
+        @endif
-
+    </div></span>
 @elseif ($type === 'workflow_notifier')
-<b>抄送{{$data->nickname}}提交的「{{$data->proc_def_name}}」记录</b>
+    <span class="open-review-details" data-id="{{$data->id}}"><b style="border-bottom: 1px solid #e3e3e3;padding-bottom: 10px;">抄送{{$data->nickname}}提交的「{{$data->proc_def_name}}」记录</b>
-
+    <div style="border-bottom: 1px solid #e3e3e3;padding: 10px 0;"><span style="display: inline-block;padding:15px 0;">申请人：<span style="color:#84c56a">{{'@'}}{{$data->nickname}}</span> {{$data->department}}</span>
-申请人：<span style="color:#84c56a">{{$data->nickname}} {{$data->department}}</span>
+        <b>审批事由</b>
-
+        @if ($data->type)
-<b>审批事由</b>
+        <span>假期类型：{{$data->type}}</span>
-假期类型：<span style="color:#84c56a">{{$data->type}}</span>
+        @endif
-开始时间：<span style="color:#84c56a">{{$data->start_time}}</span>
+        <span>开始时间：{{$data->start_time}}</span>
-结束时间：<span style="color:#84c56a">{{$data->end_time}}</span>
+        <span>结束时间：{{$data->end_time}}</span>
-<span style="color:#84c56a">查看详情</span>
+    </div><div style="display: flex;text-align: center;gap: 10px;padding: 10px 0 5px 0;">
+        <Button type="button" class="ivu-btn ivu-btn-primary ivu-btn-small" style="flex: 1;">查看详情</Button>
+    </div></span>
 @elseif ($type === 'workflow_submitter')
-    @if ($action === 'pass')
+    <span class="open-review-details" data-id="{{$data->id}}"><b style="border-bottom: 1px solid #e3e3e3;padding-bottom: 10px;"> @if ($action === 'pass')您发起的「{{$data->proc_def_name}}」已通过 @else您发起的「{{$data->proc_def_name}}」被{{$data->nickname}}拒绝 @endif</b>
-        <b>您发起的「{{$data->proc_def_name}}」已通过</b>
+    <div style="border-bottom: 1px solid #e3e3e3;padding: 10px 0;"><span style="display: inline-block;padding:15px 0;">申请人：<span style="color:#84c56a">{{'@'}}{{$data->nickname}}</span> {{$data->department}}</span>
-    @else
+        <b>审批事由</b>
-        <b>您发起的「{{$data->proc_def_name}}」被{{$data->nickname}}拒绝</b>
+        @if ($data->type)
-    @endif
+        <span>假期类型：{{$data->type}}</span>
-
+        @endif
-<b>审批事由</b>
+        <span>开始时间：{{$data->start_time}}</span>
-假期类型：<span style="color:#84c56a">{{$data->type}}</span>
+        <span>结束时间：{{$data->end_time}}</span>
-开始时间：<span style="color:#84c56a">{{$data->start_time}}</span>
+    </div><div style="display: flex;text-align: center;gap: 10px;padding: 10px 0 5px 0;">
-结束时间：<span style="color:#84c56a">{{$data->end_time}}</span>
+        <Button type="button" class="ivu-btn ivu-btn-primary ivu-btn-small" style="flex: 1;">查看详情</Button>
-<span style="color:#84c56a">查看详情</span>
+    </div></span>
 @else
     你好，我是你的机器人助理，你可以发送 <span style="color:#84c56a">/help</span> 查看帮助菜单。
 @endif