更新action-timeline组件

src/components/action-timeline/action-timeline.less

@@ -33,7 +33,7 @@
             width: 7px;
             height: 7px;
             background-color: var(--view-button-background-color);
-            border: 1px solid red;
+            border: 1px solid #515a6e;
             content: ' ';
             border-radius: 50%;
         }
@@ -46,7 +46,7 @@
             z-index: 1;
             display: block;
             content: ' ';
-            border-left: 1px solid red;
+            border-left: 1px solid #515a6e;
         }
     }
 
@@ -63,7 +63,7 @@
                 position: absolute;
                 width: 150px;
                 left: -170px;
-                border: 2px solid red;
+                border: 2px solid #515a6e;
                 font-size: 18px;
                 padding: 16px;
 
@@ -83,12 +83,12 @@
                 top: 30px;
                 height: 2px;
                 width: 20px;
-                background-color: red;
+                background-color: #515a6e;
             }
 
             >.timeline {
                 padding: 16px;
-                border: 2px solid red;
+                border: 2px solid #515a6e;
             }
         }
     }

src/components/action-timeline/action-timeline.vue

 <template>
     <div class="action-timeline">
-        <template v-for="(item, index) in items">
-            <div :key='index' class='action-timeline-group-wrapper'>
-                <template v-for="(usertask, usertaskIndex) in item.usertasks">
+        <div class='action-timeline-group-wrapper'>
+            <template v-for="(usertask, usertaskIndex) in data.usertasks">
                 <div :key='usertaskIndex' class='action-timeline-group expand'>
                     <div class='date'>
                         {{ usertask.userTaskName }}
-                            <div class='arrow'>
-                                <i @click="changeExpand($event)" class="el-icon-arrow-down" />
+                        <div class='arrow' @click="changeExpand(usertask)">
+                            <i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
                         </div>
                     </div>
                     <div class='timeline'>
@@ -26,22 +25,20 @@
                         <template v-else>
                             <ul class="action-timeline-wrapper">
                                 <template v-if="!usertask.isShow">
-                                        <template>
                                     <li class="action-timeline-item">
                                         <div class='timeline-time'>
-                                                    {{ formatDate(usertask.comments[0].time, 'MM月DD日')}} &nbsp;{{ usertask.comments[0].authorName }}
+                                            {{ formatDate(usertask.comments[0].time, 'MM月DD日 HH:mm') }} &nbsp;{{ usertask.comments[0].authorName }}
                                         </div>
                                         <div class='timeline-content'>
                                             {{ usertask.comments[0].type }}&nbsp;{{ usertask.comments[0].fullMessage }}
                                         </div>
                                     </li>
                                 </template>
-                                    </template>
                                 <template v-else>
                                     <template v-for="(comment, commentIndex) in usertask.comments">
                                         <li :key="commentIndex" class="action-timeline-item">
                                             <div class='timeline-time'>
-                                                 {{ formatDate(comment.time, 'MM月DD日')}} &nbsp;{{ comment.authorName }}
+                                                {{ formatDate(comment.time, 'MM月DD日 HH:mm')}} &nbsp;{{ comment.authorName }}
                                             </div>
                                             <div class='timeline-content'>
                                                 {{ comment.type }}&nbsp;{{ comment.fullMessage }}
@@ -55,117 +52,98 @@
                 </div>
             </template>
         </div>
-        </template>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import { ActionTimelineItem } from './action-timeline-interface';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import moment from 'moment';
 
 @Component({
 })
 export default class ActionTimeline extends Vue {
 
-    @Prop() public data!: any;
+    /**
+     * 数据
+     * 
+     *  @memberof ActionTimeline
+     */
+    public data:any = {};
+
+        /**
+     *  初始化memo
+     * 
+     *  @memberof ActionTimeline
+     */
+    public initmemo:string = "";
+
+    /**
+     * 传入数据服务
+     * 
+     *  @memberof ActionTimeline
+     */
+    @Prop() public service:any;
+
+    /**
+     *  上下文
+     * 
+     *  @memberof ActionTimeline
+     */
+    @Prop() public context:any;
 
-    public items: any[] = [{
-    "id": "40833204-9be4-11ea-9c94-0242130d84ce",
-    "name": null,
-    "processDefinitionKey": null,
-    "processDefinitionName": null,
-    "businessKey": "DC20200522022",
-    "startTime": "2020-05-22 12:25:22",
-    "endTime": null,
-    "startUserId": "001-004_0001",
-    "startUserName": "隆俊杰",
-    "usertasks": [{
-        "userTaskId": "tid-1-1f3eda90105907e25e6f2e8c0f82b903",
-        "userTaskName": "管理员审批",
-        "processDefinitionKey": null,
-        "processDefinitionName": null,
-        "identitylinks": [],
-        "comments": [{
-            "id": "44eddf40-9be4-11ea-9c94-0242130d84ce",
-            "author": "001-004_0001",
-            "authorName": "隆俊杰",
-            "fullMessage": "",
-            "time": "2020-05-22 12:25:29",
-            "type": "审批不通过",
-            "taskId": "40844383-9be4-11ea-9c94-0242130d84ce",
-            "processInstanceId": "40833204-9be4-11ea-9c94-0242130d84ce",
-            "processInstanceBusinessKey": "DC20200522022"
-        }, {
-            "id": "b39cfc68-9be4-11ea-9c94-0242130d84ce",
-            "author": "450000-000",
-            "authorName": "ibzadmin",
-            "fullMessage": "",
-            "time": "2020-05-22 12:28:35",
-            "type": "审批不通过",
-            "taskId": "a6c57ad1-9be4-11ea-9c94-0242130d84ce",
-            "processInstanceId": "40833204-9be4-11ea-9c94-0242130d84ce",
-            "processInstanceBusinessKey": "DC20200522022"
-        }]
-    }, {
-        "userTaskId": "tid-2-c60d498abacb47b510e0aa9d64a55e57",
-        "userTaskName": "被驳回",
-        "processDefinitionKey": null,
-        "processDefinitionName": null,
-        "identitylinks": [{
-            "id": "001-004_0001",
-            "firstname": null,
-            "displayname": "隆俊杰"
-        }],
-        "comments": [{
-            "id": "a6c21f6e-9be4-11ea-9c94-0242130d84ce",
-            "author": "001-004_0001",
-            "authorName": "隆俊杰",
-            "fullMessage": "",
-            "time": "2020-05-22 12:28:14",
-            "type": "提交",
-            "taskId": "44f09e63-9be4-11ea-9c94-0242130d84ce",
-            "processInstanceId": "40833204-9be4-11ea-9c94-0242130d84ce",
-            "processInstanceBusinessKey": "DC20200522022"
-        }]
-    }]
-}];
+    /**
+     *  视图参数
+     * 
+     *  @memberof ActionTimeline
+     */
+    @Prop() public viewparams:any;
 
-    public created() {
+    /**
+     * 初始化数据
+     * 
+     *  @memberof ActionTimeline
+     */
+    public created(){
+        if(this.service){
+            this.service.GetWFHistory(this.context).then((res:any) =>{
+                if(res && (res.status === 200)){
+                    this.data = res.data;
+                }
+            })
+        }
         this.handleData();
     }
 
+    /**
+     * 处理数据
+     * 
+     *  @memberof ActionTimeline
+     */
     public handleData() {
-        if(this.data) {
-            this.items = this.data;
+        if(this.data && this.data.usertasks) {
+            this.data.usertasks.array.forEach((item: any) => {
+                item.isShow = true;
+            })
         } 
     }
 
+    /**
+     * 时间转换
+     * 
+     *  @memberof ActionTimeline
+     */
     public formatDate(date: string, format: string) {
         return moment(date).format(format);
     }
 
-    public updown: boolean = false;
-    public changeExpand($event:any) {
-        this.items.forEach((item: any) => {
-            item.usertasks.forEach((usertask: any) => {
-                if(usertask.comments.length > 0) {
-                    usertask.isShow = false;
-                }
-            })
-        })
-    }
-
-    public expands: any;
-    public handleIdentData() {
-        if(this.data) {
-            this.items = this.data;
-            this.items.forEach((item: any) => {
-                item.usertasks.forEach((usertask: any) => {
-                    usertask.isShow = true;
-                })
-            })
-        }
+    /**
+     * 点击事件
+     * 
+     *  @memberof ActionTimeline
+     */
+    public changeExpand(usertask:any) {
+        usertask.isShow = !usertask.isShow;
+        this.$forceUpdate();    
     }
 
 }