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

<template>
	<div>
		<TraceHeader :type="'traceList'"></TraceHeader>
		<div>
			<div>
				<ul class="nav nav-tabs">
					<li @click="param.traceUserStatus='I_LAUNCH'" :class="{'active' : param.traceUserStatus == 'I_LAUNCH'}"><a>我负责的</a></li>
					<li @click="param.traceUserStatus='I_ATTEND_PROJECT_ALL'" :class="{'active' : param.traceUserStatus == 'I_ATTEND_PROJECT_ALL'}"><a>我参与项目的</a></li>
					<li @click="param.traceUserStatus='I_RESPONSE'" :class="{'active' : param.traceUserStatus == 'I_RESPONSE'}"><a>我发起的</a></li>
				</ul>
			</div>
			<br />
			<div class="form-group">
				<label for="exampleInputEmail2">选择任务状态</label>
				<select v-model="param.traceStatus" class="form-control">
					<option value="RUNNING">追踪中</option>
					<option value="FINISHED">完成的</option>
				</select>
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">查询条件</label>
				<QueryWidget ref="queryWidget" @search="getDatas()" @valueChanged="getDatas()"></QueryWidget>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<vuedraggable class="wrapper" v-model="traceDtos" @change="end">
					<transition-group>
						<div v-for="item in traceDtos" :key="item.id" style="margin-top: 5px; cursor: pointer;">
							<span>
								<span>
									<Checkbox :id="'trace-finish-' + item.id" class-name="terms" v-model="item.finished" class="trace-checkbox"
									 @input="updateTracefinished(item)">
									</Checkbox>
								</span>
								<span @click="openLine(item)">
									<span v-html="item.summary" class="trace-summary" :class="{'font-color': item.timeLineCompletion==true}">
									</span>
									<span class="glyphicon glyphicon-option-vertical trace-icon" aria-hidden="true"></span>
									<span class="label trace-user" :class="{'label-danger' : item.overdue == true, 'label-primary' : item.overdue != true}">
										<span v-html="item.receiveUserName"></span>
										<span>{{formatDate(item.planFinishedDate)}}</span>
									</span>
								</span>
								<a class="fa-pull-right" @click="edit(item)" style="color: blue;">编辑</a>
							</span>
						</div>
					</transition-group>
				</vuedraggable>
			</div>
		</div>

		<div >
			<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="getDatas" ></Pagination>
			</div>
		</div>

<!-- 		<div>
			<Pagination :pagination="pagination" :callback="getDatas" ></Pagination>
		</div> -->
		<h3>&nbsp;</h3>
	</div>
</template>

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

	export default {
		data: function() {
			return {
				"param": {
					"condition": "",
					"traceStatus": "RUNNING",
					"traceUserStatus": "I_ATTEND_PROJECT_ALL",
					"range": {
						start: 0,
						length: 20
					},
				},
				"totalSize": 1,
				"traceDtos": [],
				pagination: {
					total: 0,
					per_page: 20, // required
					current_page: 1, // required
					last_page: 10, // required
				},
				formatDate: TraceCommon.formatDate,
			}
		},
		components: {
			QueryWidget,
			Pagination,
			Navbar,
			TraceHeader,
			TraceResource,
			Checkbox,
			vuedraggable,
			PageSizeSelect
		},
		methods: {
			gridSizeSelect: function(newPageSize) {
				this.pagination.per_page = newPageSize;
				this.pagination.current_page = 1;
				// 刷新界面
				this.getDatas();
			},
			end(evt) {
				var _self = this;
				_self.param.condition = _self.$refs.queryWidget.getSearchText();
				_self.param.id = evt.moved.element.id;
				_self.param.oldIndex = evt.moved.oldIndex;
				_self.param.newIndex = evt.moved.newIndex;
				_self.param.range = {
					start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
					length: _self.pagination.per_page,
				};
				$.ajax({
					url: Common.getApiURL('TraceResource/sortTraceByTraceQueryParamDto'),
					type: 'post',
					dataType: 'json',
					contentType: "application/json",
					data: JSON.stringify(_self.param),
					beforeSend: function(request) {
						Common.addTokenToRequest(request);
					},
					success: function(data) {
						_self.getDatas();
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						Common.processException(XMLHttpRequest, textStatus, errorThrown);
					}
				})
			},
			/**
			 * 查询数据
			 * @author GuoZhiBo 20180226
			 */
			getDatas: function() {
				var _self = this;
				_self.param.condition = _self.$refs.queryWidget.getSearchText();
				_self.param.range = {
					start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
					length: _self.pagination.per_page,
				};
				$.ajax({
					url: Common.getApiURL('TraceResource/listByTraceQueryParamDto'),
					type: 'post',
					dataType: 'json',
					contentType: "application/json",
					data: JSON.stringify(_self.param),
					beforeSend: function(request) {
						Common.addTokenToRequest(request);
					},
					success: function(data) {
						if (data != null && data.dataList != null) {
							_self.traceDtos = data.dataList;
						}
						_self.pagination.total = data.totalSize;
						_self.pagination.last_page = Math.ceil(data.totalSize / data.range.length);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						Common.processException(XMLHttpRequest, textStatus, errorThrown);
					}
				});
			},




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


			/**
			 * 编辑
			 */
			edit: function(item) {
				var _self = this;
				this.$router.push("/trace/traceUpdate/" + item.id);
			},

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

				}, errorData => {
					Common.processException(errorData);
				});
			},


		},

		mounted: function() {
			TraceResource.getImg();
			this.param.traceUserStatus = this.$route.params.traceState;
			this.getDatas();
		},

		watch: {
			"param.traceStatus": function(val) {
				this.getDatas();
			},
			"param.traceUserStatus": function(val) {
				this.$router.push("/trace/traceList/" + val);
				this.param.traceUserStatus = this.$route.params.traceState;
				this.pagination.total = 0;
				this.pagination.per_page = Common.pageSize;
				this.pagination.current_page = 1;
				this.pagination.last_page = 10;
				this.pagination.from = 1;
				this.pagination.to = 10;
				this.getDatas();
			}
		}
	}
</script>

<style scoped>
	.active-div {
		background-color: #007aff;
		color: white !important;
	}

	.div-btn {
		float: left;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #007aff;
	}

	.mid-div {
		border-left: 1px solid #007aff;
		border-right: 1px solid #007aff;
	}

	.font-color {
		color: red;
	}

	.divrow {
		border: 1px solid #007aff;
		height: 40px;
	}

	.select select {
		width: 100%;
		height: 30px;
	}

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