Web_TracerMethodology/pages/checkList/checkList.vue

<template>
	<view :class="[showModal?'check-map-list-page preventScroll':'check-map-list-page']">
		<tm-top-menu>
			<view class="top-menu" @click="showModalHandle(!showModal)">
				<text>{{createTitle}}</text>
				<image :src="`../../static/${showModal?'open':'close'}-icon.png`"></image>
			</view>
		</tm-top-menu>

		<view class="searchBar" v-if="depList.length>0">
			<view class="filter">
				<view class="selecter" @click="selecterHandle">
					<text>{{selectedStr}}</text>
					<image src="../../static/fillBlackArrow.png" mode=""></image>
				</view>
				<view class="searchBar">
					<image class="serachIcon" src="../../static/searchIcon.png" mode=""></image>
					<tm-input class="searchVal" :clear="ifclearSearch" @onChange="searchInputHandle"
						placeholder="请输入单位名称"></tm-input>
					<view class="searchBtn" @click="searchHandle">搜索</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="check-map-list">
			<view class="item" v-for="(item, index) in copiedDepList" @click="gotoCheckMainPointsPage(item)"
				:key="index">
				<view class="title-wrap">
					<text>{{item.deptName}}</text>
					<view>
						<image src="../../static/icon-map.png"></image>
						<text>{{item.deptClassName}}</text>
					</view>
					<view class="scoreAndStatus">
						<text
							v-if="item.scoreInfo">{{item.scoreInfo&&((item.scoreInfo.split('/')).map(t=>Number(t).toFixed(1))).join('/')}}</text>
						<view :class="getStatus(item.completeDes)">{{item.completeDes}}</view>
					</view>
				</view>
				<view class="content">
					<text>{{item.decs}}</text>
					<text>
						要点概览：{{item.checkPointNames}}
					</text>
				</view>
				<view class="footer">
					<text>查核人：{{item.empName}}</text>
					<text v-if="item.startDate && item.endDate">
						{{item.startDate}}~{{item.endDate}}
					</text>
				</view>
				<view class="icon-wrap" v-if="Number(item.completeStatus) === 2 || Number(item.completeStatus) === 3">
					<image :src="`../../static/${Number(item.completeStatus) === 2 ?'hight-bg':'top-img'}.png`"></image>
					<text>{{item.completeDes}}</text>
				</view>
			</view>
		</scroll-view>
		<tm-no-data v-if="depList.length === 0||copiedDepList.length==0" :textArr="['暂时没有内容可以展示哦', '请返回上一页面或尝试刷新页面']" />
		<tm-modal v-show="showModal" v-on:click="showModalHandle(false)">
			<scroll-view scroll-y="true" class="content-list">
				<view class="list-item" v-for="(item, index) in planList" :class="{active: checkId === item.id}"
					@click="checkItem($event, item.id)" :key="index">
					<view>
						<text>{{item.name}}（{{item.startDate}} ~ {{item.endDate}}）</text>
						<view class="item-icon" :class="{icon2: Number(item.status) === 2}"
							v-if="Number(item.status) !== 1">
							{{Number(item.status) === 2 ? '进行中' : '已完成'}}
						</view>
					</view>
					<image class="check-img" v-if="checkId === item.id" src="../../static/checkStatus.png"></image>
				</view>
			</scroll-view>
		</tm-modal>
		<tm-callback-listpage />

		<uni-popup ref="popup" type="bottom" :maskClick="true">
			<view class="selectableList">
				<scroll-view scroll-y="true" class="listWrap">
					<view :class="getClass(v.id)" v-for="(v,i) in selectables" @click="listClickHandle(v)">
						{{`${v.name}(${v.count})`}}
					</view>
				</scroll-view>
				<view class="btnGroup">
					<view class="cancelBtn btn" @click="btnGroupClickHandle(false)">取消</view>
					<view class="confirmBtn btn" @click="btnGroupClickHandle(true)">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		_stopPropagation
	} from "../../utils/compatible.js";

	export default {
		data() {
			return {
				showModal: false,
				planList: [],
				checkId: '',
				depList: [],
				copiedDepList: [], //筛选后结果
				//筛选条件
				filter: {
					keyword: '',
					status: [{
						name: '全部',
						id: 0
					}]
				},
				ifSearchMod: false,
				ifclearSearch: false,
				selectables: [{
						id: 0,
						name: '全部',
						count: 0
					},
					{
						id: 1,
						name: '进行中',
						count: 0
					},
					{
						id: 2,
						name: '已完成',
						count: 0
					}
				]

			};
		},
		computed: {
			...mapState({
				ifReloadPageData: state => {
					return state.checkList.ifReloadPageData
				},
			}),
			createTitle: function() {
				let item = this.planList.find((item) => item.id === this.checkId);
				if (item) {
					let name = item.name;
					return name.slice(0, name.length - 3) + `/${this.planList.length}` + name.slice(-3);
				} else {
					return '';
				}
			},
			selectedStr() {
				const {
					status
				} = this.filter;
				return (status.map(t => t.name)).join(',')
			},
		},
		watch: {
			/**
			 * @param {Boolen} newVal
			 */
			ifReloadPageData: function(newVal) {
				if (newVal) {
					this.getPageList(this.checkId);
				}
			},
			filter(val, oldVal) {
				if (val.keyword.length == 0) {
					this.searchHandle();
				}
			}
		},
		onLoad: function({
			situationId,
			situationType
		}) {
			this.situationType = situationType;
			this.situationId = situationId;
			this.getPageList();
		},
		onHide() {
			this.$store.commit('checkList/comChangeState', {
				key: 'ifReloadPageData',
				data: false
			});
		},
		onUnload() {
			this.$store.commit('checkList/comChangeState', {
				key: 'ifReloadPageData',
				data: false
			});
		},
		methods: {
			getClass(id) {
				const ids = this.filter.status.map(item => item.id);
				if (ids.indexOf(id) != -1) {
					return "list on"
				}
				return "list"
			},
			/**
			 * @param {boolean} flag true确定按钮点击，false取消按钮
			 */
			btnGroupClickHandle(flag) {
				this.$refs.popup.close();
				//清空搜索
				this.filter = {
					...this.filter,
					keyword: ''
				}
			},
			listClickHandle(item) {
				const _filter = this.filter;
				const {
					status
				} = _filter;
				const index = _filter.status.findIndex(t => t.id == item.id);

				if (item.id == 0) {
					//全部
					this.filter = {
						...this.filter,
						status: [{
							name: '全部',
							id: 0
						}]
					};
					return;
				}
				//去除全部选项选中
				status.splice(_filter.status.findIndex(t => t.id == 0), 1);

				if (index != -1) {
					status.splice(index, 1)
				} else {
					status.push({
						name: item.name,
						id: item.id
					})
				}
				this.filter = _filter;
			},
			selecterHandle() {
				this.$refs.popup.open();
			},
			searchInputHandle(val) {
				this.filter = {
					...this.filter,
					keyword: val
				};
			},
			searchHandle() {
				let tempArr = this.depList;

				if (this.filter.status[0].id == 2) {
					//进行中
					tempArr = this.depList.filter(item => item.completeDes == '进行中');
				}

				if (this.filter.status[0].id == 1) {
					//已完成
					tempArr = this.depList.filter(item => item.completeDes == '已完成');
				}

				this.copiedDepList = tempArr.filter(item => item.deptName.indexOf(this.filter.keyword) != -1);
			},
			getPageList: function(checkId) {
				this.dispatch('planList', {
					situationId: this.situationId
				}).then((data) => {
					if (data && data.length > 0) {
						this.planList = data;
						let checkArr = data.filter((item) => Number(item.status) === 2).sort((a, b) => a
							.createTime - b.createTime);
							
						if(!checkId){
							this.checkId = checkArr ? checkArr[checkArr.length - 1].id :
								data.length > 0 ? data[0].id : '';
						}
						
						this.getDepList();
					}
				});
			},
			/**
			 * @str string [noStart,checking,completed]
			 */
			getStatus: function(str) { //设置状态颜色
				switch (str) {
					case '未分配':
						return 'status noStart'
						break;
					case '进行中':
						return 'status checking'
						break;
					case '已完成':
						return 'status completed'
						break;
				}
			},
			checkItem: function(e, id) {
				_stopPropagation(e);
				if (this.checkId === id) return;
				this.checkId = id;
				this.getDepList();
			},
			getDepList: function() {
				this.dispatch('depList', {
					checkId: this.checkId,
					situationType: this.situationType
				}).then((data) => {
					if (data) {
						const list = data.sort((a, b) => {
							if (a.sort && b.sort) return a.sort - b.sort;
						});
						this.depList = list;
						this.copiedDepList = list;
						this.showModalHandle(false);

						let onloading = list.filter(item => item.completeDes == '进行中'); //进行中
						let completed = list.filter(item => item.completeDes == '已完成'); //已完成

						const arr = [{
								id: 0,
								name: '全部',
								count: list.length
							},
							{
								id: 1,
								name: '已完成',
								count: completed.length
							},
							{
								id: 2,
								name: '进行中',
								count: onloading.length
							}
						];
						this.selectables = [...arr]
					}
				});
			},
			showModalHandle: function(showModal) {
				this.showModal = showModal;
			},
			gotoCheckMainPointsPage({
				checkId,
				deptId,
				finishedStatus,
				pageTemplateId,
			}) {
				//跳转到查核要点
				uni.navigateTo({
					url: `/pages/checkMainPoints/checkMainPoints?checkId=${checkId}&deptId=${deptId}&finishedStatus=${finishedStatus}&situationType=${this.situationType}&pageTemplateId=${pageTemplateId}`
				});
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({
					type: 'checkList/commActions',
					key,
					data
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.check-map-list-page {
		position: relative;
		padding-top: 30rpx;

		.tm-top-menu {
			width: 93%;
			margin: 0 auto;
		}

		.top-menu {
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			margin-bottom: 20rpx;

			image {
				margin-left: 9.37rpx;
				width: 12.5rpx;
				height: 12.5rpx;
			}
		}

		.selectableList {
			display: flex;
			width: 100%;
			flex-direction: column;
			height: 50vh;
			padding-top: 50rpx;
			box-sizing: border-box;
			border-radius: 25rpx 25rpx 0px 0px;
			background-color: #FFFFFF;

			.listWrap {
				height: calc(50vh - 75rpx);
				overflow-y: scroll;

				.list {
					height: 87.5rpx;
					line-height: 87.5rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #8A8F99;

					&.on {
						font-weight: 500;
						color: #3377FF;
					}
				}
			}

			.btnGroup {
				display: flex;
				width: 100%;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.btn {
					width: 50%;
					height: 75rpx;
					line-height: 75rpx;
					text-align: center;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #3377FF;
				}

				.cancelBtn {
					border-top: 0.62rpx solid #DADEE6;
				}

				.confirmBtn {
					color: #FFFFFF;
					background: #3377FF;
				}
			}
		}

		.searchBar {
			width: 93%;
			margin: 0 auto;

			.filter {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15rpx;
				padding: 0 25rpx;
				background: #FFFFFF;

				.selecter {
					display: flex;
					width: 25%;
					height: 70rpx;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding-right: 25rpx;
					border-right: 0.62rpx solid #DADEE6;

					&>text {
						width: 112.5rpx;
						font-size: 25rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #292C33;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;

					}

					&>image {
						width: 11.25rpx;
						height: 7.5rpx;
					}
				}

				.searchBar {
					display: flex;
					width: 75%;
					flex-direction: row;
					align-items: center;
					height: 70rpx;
					padding-left: 25rpx;

					.serachIcon {
						width: 25rpx;
						height: 25rpx;
					}

					.searchVal {
						width: 79%;
						padding-left: 25rpx;
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
					}

					.searchBtn {
						padding-left: 25rpx;
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #3377FF;
						white-space: nowrap;
						border-left: 1rpx solid #DADEE6;
					}
				}
			}
		}

		&.preventScroll {
			position: fixed;
		}
	}

	.check-map-list {
		height: 100%;

		.item {
			position: relative;

			.title-wrap {
				.scoreAndStatus {
					position: absolute;
					right: 20rpx;

					.status {
						display: flex;
						justify-content: center;
						width: 150rpx;
						height: 35rpx;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 20rpx;

						&.noStart {
							background-color: #eee;
						}

						&.checking {
							background-color: #FFCC66;
						}

						&.completed {
							background-color: #29CC96;
						}
					}
				}
			}
		}

		.icon-wrap {
			position: absolute;
			top: 0;
			right: 0;
			width: 100rpx;
			height: 35rpx;

			image {
				width: 100%;
				height: 100%;
			}

			text {
				position: absolute;
				left: 28.75rpx;
				line-height: 35rpx;
				font-size: 17.5rpx;
				color: #fff;
			}
		}

		.footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 0 25rpx 16.87rpx;
			border-top: 1px solid #DADEE6;
			padding-top: 16.25rpx;
			font-size: 17.5rpx;
			line-height: 26.25rpx;
			color: #666E80;
		}
	}

	.content-list {
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		width: 100%;
		height: 70vh;
		overflow-y: scroll;
		box-sizing: border-box;
		background-color: #fff;

		.list-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #DADEE6;
			padding: 0 25rpx;
			width: 100%;
			height: 87.5rpx;
			font-size: 22.5rpx;
			line-height: 33.75rpx;
			color: #292C33;

			.check-img {
				float: right;
				width: 19.37rpx;
				height: 14.37rpx;
			}

			>view {
				display: flex;
				flex-direction: row;

				.item-icon {
					border-radius: 5rpx;
					padding: 6.25rpx 11.25rpx;
					line-height: 26.25rpx;
					color: #29CC96;
					background-color: #e9f9f4;

					&.icon2 {
						color: #FFAA00;
						background-color: #fff9ef;
					}
				}
			}

			&.active {
				color: #3377FF;
			}
		}
	}
</style>