action-timeline.vue 5.9 KB
Newer Older
Mosher's avatar
Mosher committed
1 2
<template>
    <div class="action-timeline">
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
        <table class="action-timeline-table">
            <thead class="action-timeline-thead">
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody class="action-timeline-tbody">
                <template v-for="(usertask, usertaskIndex) in data.usertasks">
                    <tr :key='usertaskIndex'>
                        <td align="right" valign="top">
                            <div class='date'>
                                <div class='usertaskname'>{{ usertask.userTaskName }}</div>
                                <div class='arrow' @click="changeExpand(usertask)">
                                    <i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class='timeline'>
                                <template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
                                    {{$t('components.appWFApproval.wait')}}
                                    <strong>
                                        <template v-for="(identitylink, len) in usertask.identitylinks">
                                            <template v-if="identitylink.displayname">
                                            {{ identitylink.displayname }}
                                            <template v-if="len != usertask.identitylinks.length - 1">

                                            </template>
                                            </template>
                                        </template>  
                                    </strong>  
                                    {{$t('components.appWFApproval.handle')}}
Mosher's avatar
Mosher committed
36 37
                                </template>
                                <template v-else>
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
                                    <ul class="action-timeline-wrapper">
                                        <template v-if="!usertask.isShow">
                                            <li v-if="usertask.comments && usertask.comments.length > 0" class="action-timeline-item">
                                                <div class='timeline-time'>
                                                    {{ 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 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日 HH:mm')}} &nbsp;{{ comment.authorName }}
                                                    </div>
                                                    <div class='timeline-content'>
                                                        {{ comment.type }}&nbsp;{{ comment.fullMessage }}
                                                    </div>
                                                </li>
                                            </template>
                                        </template>
                                    </ul>
Mosher's avatar
Mosher committed
62
                                </template>
63 64 65 66 67 68
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
Mosher's avatar
Mosher committed
69 70 71 72
    </div>
</template>

<script lang="ts">
Mosher's avatar
Mosher committed
73
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
Mosher's avatar
Mosher committed
74 75 76 77 78 79
import moment from 'moment';

@Component({
})
export default class ActionTimeline extends Vue {

Mosher's avatar
Mosher committed
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
    /**
     * 数据
     * 
     *  @memberof ActionTimeline
     */
    public data:any = {};

        /**
     *  初始化memo
     * 
     *  @memberof ActionTimeline
     */
    public initmemo:string = "";

    /**
     * 传入数据服务
     * 
     *  @memberof ActionTimeline
     */
    @Prop() public service:any;
Mosher's avatar
Mosher committed
100

Mosher's avatar
Mosher committed
101 102 103 104 105 106
    /**
     *  上下文
     * 
     *  @memberof ActionTimeline
     */
    @Prop() public context:any;
Mosher's avatar
Mosher committed
107

Mosher's avatar
Mosher committed
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
    /**
     *  视图参数
     * 
     *  @memberof ActionTimeline
     */
    @Prop() public viewparams:any;

    /**
     * 初始化数据
     * 
     *  @memberof ActionTimeline
     */
    public created(){
        if(this.service){
            this.service.GetWFHistory(this.context).then((res:any) =>{
                if(res && (res.status === 200)){
                    this.data = res.data;
125
                    this.initUIStateData();
Mosher's avatar
Mosher committed
126 127 128
                }
            })
        }
Mosher's avatar
Mosher committed
129 130
    }

Mosher's avatar
Mosher committed
131
    /**
132
     * 初始化数据添加标记
Mosher's avatar
Mosher committed
133 134 135
     * 
     *  @memberof ActionTimeline
     */
136
    public initUIStateData() {
Mosher's avatar
Mosher committed
137
        if(this.data && this.data.usertasks) {
138
            this.data.usertasks.forEach((item: any) => {
Mosher's avatar
Mosher committed
139 140 141
                item.isShow = true;
            })
        } 
Mosher's avatar
Mosher committed
142 143
    }

Mosher's avatar
Mosher committed
144 145 146 147 148
    /**
     * 时间转换
     * 
     *  @memberof ActionTimeline
     */
Mosher's avatar
Mosher committed
149 150 151 152
    public formatDate(date: string, format: string) {
        return moment(date).format(format);
    }

Mosher's avatar
Mosher committed
153 154 155 156 157 158 159 160
    /**
     * 点击事件
     * 
     *  @memberof ActionTimeline
     */
    public changeExpand(usertask:any) {
        usertask.isShow = !usertask.isShow;
        this.$forceUpdate();    
Mosher's avatar
Mosher committed
161 162 163 164 165
    }

}
</script>

RedPig97's avatar
RedPig97 committed
166 167
<style lang='scss'>
@import './action-timeline.scss';
Mosher's avatar
Mosher committed
168
</style>