Web_TracerMethodology/pages/creatingSituations/components/person.vue

<template>
	<view class="person">
		<view class="title">请指定查核人</view>
		
		<view class="searchBar" >
			<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>
		
		<view class="list">
			<view class="item" v-for="(item,index) in copiedDepList">
				<view class="itemInner">
					<text>{{item.empName}}</text>
					<text>{{item.empId}}</text>
					<text>{{item.departmentName}}</text>
				</view>
				<view class="icon" @click="checkedHandle($event, item)">
					<image
						:src="`../../static/check-${ checkPerson.checkedItems&&(checkPerson.checkedItems.findIndex(val=>val.empId == item.empId)) != -1 ? 'checkbox' : 'no'}.png`">
					</image>
				</view>
			</view>
		</view>
		<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}`}}
					</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";
	import {
		arrFilter
	} from "../../../utils/arrFilter.js";
	import {
		arrayEquality
	} from "./utils.js";

	export default {
		data() {
			return {
				openItems: [],
				keyword: '',
				depList:[],
				selectables:[
					{
						name: '全部单位',
						id: 0
					}
				],
				ifclearSearch:false,
				copiedDepList: [], //筛选后结果
				//筛选条件
				filter: {
					keyword: '',
					status: [{
						name: '全部单位',
						id: 0
					}]
				},
			}
		},
		computed: {
			...mapState({
				checkPerson: state => state.creatingSituations.checkPerson,
				checkRent: state => state.creatingSituations.checkRent,
				condition: state => state.creatingSituations.condition,
				needReload: state => state.creatingSituations.needReload,
				editConfig: state => state.creatingSituations.editConfig
			}),
			selectedStr() {
				const {
					status
				} = this.filter;
				return (status.map(t => t.name)).join(',')
			},
		},
		watch: {
			// filter(val, oldVal) {
				
			// 	if (val.keyword.length == 0) {
			// 		this.searchHandle();
			// 	}
			// }
		},
		created: function() {
			// 编辑的时候不用获取数据
			if (this.editConfig && arrayEquality(this.checkPerson, this.editConfig.checkPerson) && this.editConfig
				.checkPerson) {
				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'checkPerson',
					data: this.editConfig.checkPerson
				});
			} else if (this.needReload) { // 点击上一步不用获取数据
				this.getData();
			}
		},
		methods: {
			/**
			 * @param {string} val
			 */

			searchInputHandle(val) {
				this.filter = {
					...this.filter,
					keyword: val
				};
			},
			searchHandle() {

				const {keyword,status} = this.filter;
				
				if(keyword.length == 0){
					  let results = this.checkPerson.list.filter(item=>item.departmentName.indexOf(status[0].name) != -1 );
					  this.copiedDepList = results;
				}
				
				const filtedList = this.copiedDepList.filter(t => t.empName.indexOf(keyword) != -1);
			
				this.copiedDepList = filtedList;
				
				// if (checkedItem.id) { // 如果选中过，要去更新数据
				// 	let obj = filtedList.find(({
				// 		id
				// 	}) => id === checkedItem.id);
				// 	this.myCommit('checkedItem', obj ? obj : {
				// 		id: null
				// 	});
				// }
			},
			/**
			 * @param {boolean} flag true确定按钮点击，false取消按钮
			 */
			btnGroupClickHandle(flag) {
				this.$refs.popup.close();
				const {status} = this.filter;
				
				if(flag){
					if(status[0].id == 0){
						this.copiedDepList = this.checkPerson.list;
					}else{
						let results = this.checkPerson.list.filter(item=>item.departmentName.indexOf(status[0].name) != -1 );
						this.copiedDepList = results;
					}
				}else{
					//清空搜索
					this.filter = {
						...this.filter,
						keyword: ''
					}
				}
			},
			selecterHandle() {
				this.$refs.popup.open();
			},
			getClass(id) {
				const ids = this.filter.status.map(item => item.id);
				if (ids.indexOf(id) != -1) {
					return "list on"
				}
				return "list"
			},
			/**
			 * @param {string} searchKey
			 */
			getData() {
				this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key: 'getCheckPersonLists',
					data: {
						'filterList': this.condition.conditionIds,
						'situationId':Number(this.checkPerson.situationId)
					}
				}).then((data) => {
					console.log({data})
					if (data) {
						this.myCommit('list', data);
						this.copiedDepList = data;
						let nodedup_depList = data.map((item,index)=>item.departmentName);
						let depList = Array.from(new Set(nodedup_depList));
						let _depList = depList.map((item,index)=>({name:item,id:index+1}));
					
						this.depList = [...this.depList,..._depList];
						this.selectables = [...this.selectables,..._depList];
						
						// const {checkedItem} = this.checkPerson;
						// if(checkedItem.id) { // 如果选中过，要去更新数据
						// 	let obj = data.find(({id})=>id === checkedItem.id);
						// 	this.myCommit('checkPerson', obj?obj:{id:null});
						// }
					}
				});
			},
			listClickHandle(item) {
				this.filter = {
					...this.filter,
					status: [
						item
					]
				};
			},
			openItemHandle: function(key) {
				this.openItems = arrFilter(key, this.openItems);
			},
			checkedHandle: function(e, item) {
				_stopPropagation(e);
				let _checkedPersons = this.checkPerson.checkedItems;
				console.log('this.checkPerson',this.checkPerson)
				const index = this.checkPerson.checkedItems.findIndex(val => val.empId == item.empId);
				if (index != -1) {
					//取消选中
					_checkedPersons.splice(index, 1);
				} else {
					//选中

					_checkedPersons.push(item);
				}
				this.myCommit('checkedItems', _checkedPersons);
			},
			/**
			 * 更新condition数据
			 * @param {Object} key 要更新的属性
			 * @param {Object} value 值
			 */
			myCommit: function(key, value) {
				let data = {
					...this.checkPerson
				};
				data[key] = value;
				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'checkPerson',
					data
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.person {
		// padding: 15rpx;
		.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: 100%%;
			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;
					}
				}
			}
		}

		.list {
			.empty {
				display: flex;
				height: 500rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&>image {
					width: 175rpx;
					height: 190rpx;
					margin-bottom: 40rpx;
				}

				&>text {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #828899;
				}
			}

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 87.5rpx;
				padding: 0 25rpx;
				background: #FFFFFF;

				.itemInner {
					&>text {
						font-size: 22.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
						padding-right: 20rpx;
					}
				}

				.icon {
					// 图标样式，用view包裹img防止挤压变形
					display: flex;
					justify-content: center;
					align-items: center;
					height: inherit;

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
		}
	}
</style>