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

<template>
    <div>
        <Navbar :title='projectName'
                :isGoBack="true">
            <button @click="goPersonList()"
                    type="button"
                    class="btn btn-link"
                    style="padding: 0px;">
                编辑人员({{projectUsers.length}})
            </button>
        </Navbar>

        <h4>
            已完成的任务({{pagination2.total}})
            <div class="pull-right">
            	<button class="btn btn-link"
                        style="padding: 0px;"
                        @click="projectManagement(projectId)">项目任务</button>
                <button class="btn btn-link"
                        style="padding: 0px;"
                        @click="projectArchive(projectId)">项目归档</button>
                <button class="btn btn-link"
                        style="padding: 0px;"
                        @click="addTrace(projectId)">添加任务</button>
            </div>
        </h4>
		<div class="input-group">
			<input type="text" class="form-control" v-model="content" placeholder="任务名称、任务内容" @blur="listFinishedTask" @keyup.enter="listFinishedTask">
			<span class="input-group-btn">
	        <button style="width:100%;background-color: #007aff;color: white;"  @click="listFinishedTask()" type="button" class="btn btn-blue search-button">
				查询
			</button>
	      </span>
		</div>
        <div>
            <div class="panel panel-default"
                 style="margin-bottom: 10px;margin-top: 10px;">
                <div class="panel-body">
					<vuedraggable class="wrapper" v-model="finishedTraces" @change="end">
						<transition-group>
							<div v-for="trace in finishedTraces"
							     :key="trace.id"
							     style="margin-top: 5px; cursor: pointer;">
							    <span>
							        <span>
							            <Checkbox :id="'trace-finish-' + trace.id"
							                      class-name="terms"
							                      v-model="trace.finished"
							                      @input="updateTracefinished(trace)"
							                      class="trace-checkbox">
							            </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 label-primary trace-user">
							                <span v-html="trace.receiveUserName"></span>
							                <span>{{formatDate(trace.planFinishedDate)}}</span>
							            </span>
							            <span class="badge">
							                <span>完成时间:{{formatDate(trace.finishedDate)}}</span>
							            </span>
							        </span>
							    </span>
							</div>
						</transition-group>
					</vuedraggable>  
                </div>

            </div>
			<div class="row" v-if="finishedTraces.length">
				<div class="pull-left">
					<span>第{{(pagination2.current_page-1)*pagination2.per_page+1}}-{{pagination2.current_page*pagination2.per_page}}条,共计{{pagination2.total}}条,每页显示</span>
					<PageSizeSelect  v-on:pageSizeChanged="gridSizeSelect"></PageSizeSelect>
					<span>条</span>
				</div>
			
				<div class="pull-right">
					<Pagination :pagination="pagination2" :callback="listFinishedTask"></Pagination>
				</div>
			</div>
        </div>

    </div>
</template>

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

export default {
    data: function () {
        return {
            finishedTraces: [], //已完成的任务
            isFinished: true, //显示 完成/未完成的任务
            projectUsers: [],
            obj: null,
            projectName: '',
            projectId: '',
            pagination2: {
                total: 0,
                per_page: 50,    // 每页10条信息
                current_page: 1, // 当前页码
                last_page: 10,    // 最后页码
            },
            formatDate: TraceCommon.formatDate,
            content:undefined
        }
    },
    components: {
        Navbar, Pagination, Checkbox,vuedraggable,PageSizeSelect
    },
    methods: {
		gridSizeSelect: function(newPageSize) {
			this.pagination2.per_page = newPageSize;
			this.pagination2.current_page = 1;
			// 刷新界面
			this.listFinishedTask();
		},
		end(evt) {
			var _self = this;
			$.ajax({
				url: Common.getApiURL('TraceResource/sortFinished'),
				type: 'get',
				dataType: 'json',
				contentType: "application/json",
				data: {
					"id": evt.moved.element.id,
					"projectId": _self.projectId,
					"oldIndex": evt.moved.oldIndex,
					"newIndex": evt.moved.newIndex,
					"currentPage": _self.pagination2.current_page,
					"pageSize": _self.pagination2.per_page,
					"content": _self.content
				},
				beforeSend: function(request) {
					Common.addTokenToRequest(request);
				},
				success: function(data) {
					_self.listFinishedTask();
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					Common.processException(XMLHttpRequest, textStatus, errorThrown);
				}
			})
		},
        /**
         * 编辑
         */
        edit: function (trace) {
            var _self = this;
            this.$router.push("/trace/traceUpdate/" + trace.id);
        },

        /**
         * 初始化项目
         */
        listFinishedTask: function () {
            var _self = this;
            _self.finishedTraces.splice(0, _self.finishedTraces.length);
            TraceResource.listFinishedByProjectId(_self.projectId, _self.pagination2, _self.content).then(data => {
                if (data == null) {
                    return;
                }
                _self.pagination2.total = data.totalSize;
                _self.pagination2.last_page = Math.ceil(_self.pagination2.total / _self.pagination2.per_page);
                _self.finishedTraces = data.traceDtos
            }, error => {
                Common.processException(error);
            })
        },



        /**
         * 初始化接收该项目的人数
         * @author ZhangTeng 20190212
         */
        personNumber: function () {
            var _self = this;
            _self.projectUsers.splice(0, _self.projectUsers.length);

            $.ajax({
                url: Common.getApiURL('TraceResource/listByProjectId'),
                type: 'get',
                dataType: 'json',
                contentType: "application/json",
                data: {
                    "projectId": _self.projectId
                },
                beforeSend: function (request) {
                    Common.addTokenToRequest(request);
                },
                success: function (data) {
                    if (data == null) {
                        return;
                    }
                    for (var index = 0; index < data.length; index++) {
                        _self.$set(_self.projectUsers, index, data[index]);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    Common.processException(XMLHttpRequest, textStatus, errorThrown);
                }
            })
        },

        /**
         * 打开明细
         * @author ZhangTeng 20190131
         */
        openLine: function (obj) {
            this.$router.push({
                path: '/trace/trace/' + obj.id
            });
        },

        /**
         * 添加任务
         * @author ZhangTeng 20190201
         */
        addTrace: function (projectId) {
            this.$router.push("/trace/traceCreate/" + projectId);
        },

		/**
		 * 项目归档
		 * @param {Object} projectId
		 * @author GuoZhiBo 20190926
		 */
        projectArchive: function (projectId) {
            var _self = this;
            this.$router.push({
                path: '/trace/projectArchive/' + projectId,
                query:
                {
                    projectName: _self.projectName
                }
            });
        },
        /**
		 * 项目任务
		 * @param {Object} projectId
		 * @author GuoZhiBo 20190926
		 */
		projectManagement: function (projectId) {
			var _self = this;
            this.$router.push({
                    path: '/trace/projectManagement/' + projectId,
                    query:
                    {
                        projectName: _self.projectName
                    }                
                });
        },
        /**
         *  跳转到人员界面
         *  @author ZhangTeng 20190212
         */
        goPersonList: function () {
            var _self = this;
            this.$router.push({
                path: "/trace/projectUserList/" + _self.projectId,
                query: {
                    projectName: _self.projectName,
                },
            });
        },

        /**
         * 修改追踪单的状态
         * @author YangZhiJie 20171201
         */
        updateTracefinished: function (trace) {
            var _self = this;
            TraceResource.updateTraceFinished(trace.id).then(successData => {
                _self.listFinishedTask();
            }, errorData => {
                Common.processException(errorData);
            });
        },

    },

    mounted: function () {
        var _self = this;
        this.projectId = _self.$route.params.projectId;
        this.projectName = _self.$route.query.projectName;
        this.personNumber();
        this.listFinishedTask();
    }
}
</script>

<style scoped>
.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>