client-trace-v5/src/trace/Personage.vue

<template>
    <div>
        <Navbar :title='"团队——"+userName'
                :isGoBack="true"></Navbar>
        <div class="container-fluid"
             id="trace-content">
            <div class="boxes">
                <div class="col-sm-4">
                    <a class="box">
                        <span>&nbsp;</span>
                        <span class="box__statistics box__statistics--upcoming2">
                            <span>{{userName.substr(userName.length-1,userName.length)}}</span>
                        </span>
                        <p class="box__title">{{userName}}</p>
                    </a>
                </div>
            </div>
        </div>
        <hr>
        <b style="font-size:20px">任务({{pagination.total}})</b>
        <hr>
        <button @click="finished(userId)"
                type="button"
                class="btn btn-link"
                style="color:green;margin-left:90%">
            查看已完成的任务</button>

        <div v-for="trace in traces"
             :key="trace.id"
             style="margin-top: 5px; cursor: pointer;">
            <div class="panel panel-default"
                 style="margin-bottom: 0px;">
                <div class="panel-body">
                    <span>
                        <Checkbox :id="'trace-finish-' + trace.id"
                                  class-name="terms"
                                  v-model="trace.finished"
                                  class="trace-checkbox"
                                  @input="updateTracefinished(trace)"
                                  style=""></Checkbox>
                    </span>
                    <span @click="openLine(trace)">
                        <span v-html="trace.summary"
                              class="trace-summary"
                              :class="{'font-color': trace.timeLineCompletion==true}">
                        </span>
                        <span class="glyphicon glyphicon-option-vertical trace-icon"
                              aria-hidden="true"></span>
                        <span class="label trace-user"
                              :class="{'label-danger' : trace.overdue == true, 'label-primary' : trace.overdue != true}">
                            <span v-html="trace.receiveUserName"></span>
                            <span>{{formatDate(trace.planFinishedDate)}}</span>
                        </span>
                        <span class="badge">
                            <span>{{trace.projectName}}</span>
                        </span>
                    </span>
                </div>
            </div>
        </div>
		<Pagination :pagination="pagination"
                    :callback="initData"
                    
                    v-if="traces.length">
		</Pagination>
        <p class="bg-danger"
           style="padding: 15px;"
           v-if="flag">未安排任何任务~</p>

    </div>

</template>

<script>
var Common = require("../common/Common.js");
var Uuid = require("pc-client-component").Uuid;
var Navbar = require("pc-client-component").Navbar;
import TraceCommon from "./TraceCommon.js";
var Checkbox = require("pc-client-component").Checkbox;
import TraceResource from "./TraceResource.js";
var Pagination = require("vue-bootstrap-pagination").default;

export default {
    data: function () {
        return {
            uuid: Uuid.createUUID(),
            userId: '',
            userName: '',
            traces: [],
            flag: false,
			formatDate: TraceCommon.formatDate,
			pagination: {
                total: 0,
                per_page: 10,    // 每页10条信息
                current_page: 1, // 当前页码
                last_page: 10,    // 最后页码
                from: 1,
                to: 10           // required
            },
        }
    },
    components: {
        Common, Uuid, Navbar, TraceCommon, TraceResource, Checkbox, Pagination
    },
    methods: {

        /**
         * 打开明细
         * @author ZhangTeng 2019131
         */
        openLine: function (obj) {
            this.$router.push({ 
                path: '/trace/trace/' + obj.id 
            });
        },
        /**
         * 初始化人员
         */
        initData: function () {
			var _self = this;
			_self.traces.splice(0, _self.traces.length);
            var uuid = _self.$route.params.uuid;
            var dataStr = localStorage.getItem(uuid);
            var user = JSON.parse(dataStr);
            _self.userId = user.userId;
			_self.userName = user.userName;
            $.ajax({
                url: Common.getApiURL('TraceResource/userNotFinishedTrace'),
                type: 'get',
                dataType: 'json',
                contentType: "application/json",
                data: { 
						"receiveUserId": user.userId,
						"currentPage": _self.pagination.current_page,
                        "pageSize": _self.pagination.per_page,
					  },
                beforeSend: function (request) {
                    Common.addTokenToRequest(request);
                },
                success: function (data) {

                    if (data == '') {
                        _self.flag = true
                    }
                    // for (var index = 0; index < data.length; index++) {
                    //     _self.$set(_self.traces, index, data[index]);
					// }
					_self.pagination.total = data.totalSize;
                    _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
                    _self.traces = data.traceDtos
                },
            });
        },
        /**
		* 修改追踪单的状态
		* @author YangZhiJie 20171201
		*/
        updateTracefinished: function (trace) {
            var _self = this;
            TraceResource.updateTraceFinished(trace.id).then(successData => {
                _self.initData();
            }, errorData => {
                Common.processException(errorData);
			});
        },

        finished: function (userId) {
            var obj = {
                userId: this.userId,
                userName: this.userName
            }
            localStorage.setItem(this.uuid, JSON.stringify(obj))
            this.$router.push("/trace/finished/" + this.uuid);
        },
	},
	
    mounted: function () {
        this.initData();

    }
}
</script>

<style scoped>
.boxes .box {
    display: block;
    width: 288px;
    height: 235px;
    border-radius: 4px;
    text-align: center;
    color: #000;
}
.boxes .box__statistics {
    display: block;
    width: 90px;
    height: 90px;
    padding: 10px;
    margin: 15px auto 0;
    border-radius: 50%;
    color: #fff;
    font-size: 46px;
}
.boxes .box__statistics--upcoming2 {
    background-color: #f6aa39;
}
a {
    text-decoration: none;
    margin: 10px;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.boxes .box__title {
    margin-top: 25px;
    font-size: 24px;
}
.boxes .box__title__weeks {
    font-size: 18px;
}
.box:hover {
    background-color: ghostwhite;
    width: 288px;
    height: 235px;
}
.row {
    height: 200px;
    margin-bottom: 10px;
}
.dashboard-header {
    cursor: pointer;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-weight: bold;
    font-size: 1.1em;
}
.trace-summary {
    font-size: large;
    margin-left: 5px;
    margin-right: 5px;
}

.trace-icon {
    opacity: 0.5;
}

.trace-user {
    font-size: 100%;
}
.trace-checkbox {
    display: inline;
    font-size: large;
}
</style>