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

<template>
	<div>
		<Navbar :title='projectName' :isGoBack="true">
			<button v-if="adminUserShow" @click="goAdminPersonList()" type="button" class="btn btn-link" style="padding: 5px;">
				编辑项目管理员({{projectAdminUsers.length}})
			</button>
			<button v-if="userShow" @click="goPersonList()" type="button" class="btn btn-link" style="padding: 5px;">
				编辑项目人员({{projectUsers.length}})
			</button>
		</Navbar>

		<h4>
			未完成的任务({{pagination.total}})
			<div class="pull-right">
				<button v-if="timeShow" 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="m-container">
			<div class="input-group">
				<input type="text" class="form-control" v-model="content" placeholder="任务名称、任务内容" @blur="listNotFinishedTask" @keyup.enter="listNotFinishedTask">
				<span class="input-group-btn">
		        <button style="width:100%;background-color: #007aff;color: white;"  @click="listNotFinishedTask()" 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="noFinishedTraces" @change="end" :delay="500" :delayOnTouchOnly="true">
					<transition-group>
						<div v-for="trace in noFinishedTraces" :key="trace.id" style="margin-top: 5px; cursor: pointer;">
							<span>
								<span>
									<span>
										<Checkbox :id="'trace-finish-' + trace.id" class-name="terms" v-model="trace.finished" class="trace-checkbox"
										 @input="updateTracefinished(trace)">
										</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>
							</span>
							<a class="fa-pull-right" @click="edit(trace)" style="color: blue;">编辑</a>
							</span>
						</div>
					</transition-group>
				</vuedraggable>
			</div>
		</div>
		<div class="row" v-if="noFinishedTraces.length" style="margin-left:0px; margin-right: 0px;">
			<div class="pull-left">
				<span>第{{(pagination.current_page-1)*pagination.per_page+1}}-{{pagination.current_page*pagination.per_page}}条,共计{{pagination.total}}条,每页显示</span>
				<PageSizeSelect v-on:pageSizeChanged="gridSizeSelect"></PageSizeSelect>
				<span>条</span>
			</div>

			<div class="pull-right">
				<Pagination :pagination="pagination" :callback="listNotFinishedTask" ></Pagination>
			</div>
		</div>
		<!-- <Pagination :pagination="pagination" :callback="listNotFinishedTask"  v-if="noFinishedTraces.length"></Pagination> -->
		<hr>

		<button @click="openFinishedProjectTraces" type="button" class="btn btn-link" style="color:green">
			查看已完成的任务</button>
	</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: [], //已完成的任务
				projectUsers: [],
				projectAdminUsers: [],
				projectName: '',
				projectId: '',
				noFinishedTraces: [], //未完成的任务
				pagination: {
					total: 0,
					per_page: 50, // 每页50条信息
					current_page: 1, // 当前页码
					last_page: 10, // 最后页码
				},
				formatDate: TraceCommon.formatDate,
				adminUserShow: false,
				userShow: false,
				timeShow: false,
				content: undefined
			}
		},
		components: {
			Navbar,
			Pagination,
			Checkbox,
			vuedraggable,
			PageSizeSelect
		},
		methods: {
			gridSizeSelect: function(newPageSize) {
				this.pagination.per_page = newPageSize;
				this.pagination.current_page = 1;
				// 刷新界面
				this.listNotFinishedTask();
			},
			end(evt) {
				var _self = this;
				$.ajax({
					url: Common.getApiURL('TraceResource/sortNotFinished'),
					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.pagination.current_page,
						"pageSize": _self.pagination.per_page,
						"content": _self.content
					},
					beforeSend: function(request) {
						Common.addTokenToRequest(request);
					},
					success: function(data) {
						_self.listNotFinishedTask();
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						Common.processException(XMLHttpRequest, textStatus, errorThrown);
					}
				})
			},
			/**
			 * 编辑
			 */
			edit: function(trace) {
				var _self = this;
				this.$router.push("/trace/traceUpdate/" + trace.id);
			},

			/**
			 * 打开已完成的项目任务
			 */
			openFinishedProjectTraces: function() {
				var _self = this;
				this.$router.push("/trace/finishedProjectTraces/" + _self.projectId + "?projectName=" + _self.projectName);
			},

			listNotFinishedTask: function() {
				var _self = this;
				_self.noFinishedTraces.splice(0, _self.noFinishedTraces.length);
				$.ajax({
					url: Common.getApiURL('TraceResource/listNotFinishedByProjectId'),
					type: 'get',
					dataType: 'json',
					contentType: "application/json",
					data: {
						"projectId": _self.projectId,
						"currentPage": _self.pagination.current_page,
						"pageSize": _self.pagination.per_page,
						"content": _self.content
					},
					beforeSend: function(request) {
						Common.addTokenToRequest(request);
					},
					success: function(data) {
						if(data == null) {
							return;
						}
						_self.pagination.total = data.totalSize;
						_self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
						_self.noFinishedTraces = data.traceDtos
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						Common.processException(XMLHttpRequest, textStatus, errorThrown);
					}
				})
			},
			//查询登录用户权限
			personnelJurisdictionSet: function() {
				var _self = this;
				$.ajax({
					url: Common.getApiURL('TraceResource/queryPersonnelJurisdiction'),
					type: 'get',
					dataType: 'json',
					contentType: "application/json",
					data: {
						"projectId": _self.projectId
					},
					beforeSend: function(request) {
						Common.addTokenToRequest(request);
					},
					success: function(data) {
						if(data == null) {
							return;
						}
						if(data.levelOfPerson == 1) {
							_self.timeShow = true
							return;
						}
						if(data.levelOfPerson == 2) {
							_self.timeShow = true,
								_self.adminUserShow = false,
								_self.userShow = true
						}
						if(data.levelOfPerson == 3) {
							_self.timeShow = true,
								_self.adminUserShow = true,
								_self.userShow = true
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						Common.processException(XMLHttpRequest, textStatus, errorThrown);
					}
				})
			},

			/**
			 * 初始化接收该项目的人数
			 * @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 TangWenXiang 20191009
			 */
			adminPersonNumber: function() {
				var _self = this;
				_self.projectAdminUsers.splice(0, _self.projectUsers.length);

				$.ajax({
					url: Common.getApiURL('TraceResource/listAdminByProjectId'),
					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.projectAdminUsers, 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 ZhangTeng 20190212
			 */
			goAdminPersonList: function() {
				var _self = this;
				this.$router.push({
					path: "/trace/projectAdminUserList/" + _self.projectId,
					query: {
						projectName: _self.projectName,
					},
				});
			},

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

			/**
			 * 项目归档
			 * @param {Object} projectId
			 * @author GuoZhiBo 20190926
			 */
			projectManagement: function(projectId) {
				var _self = this;
				this.$router.push({
					path: '/trace/projectManagement/' + projectId,
					query: {
						projectName: _self.projectName
					}
				});
			},

		},

		mounted: function() {
			var _self = this;
			this.projectId = _self.$route.params.projectId;
			this.projectName = _self.$route.query.projectName;
			this.personNumber();
			this.adminPersonNumber();
			this.listNotFinishedTask();
			this.personnelJurisdictionSet();
		}
	}
</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>