Web_TracerMethodology/pages/creatingSituations/components/checkRent.vue

<template>
	<view class="check-rent">
		<view class="title">请指定负责查核的查核组</view>
		<view class="searchBar">
			<image class="serachIcon" src="../../../static/searchIcon.png" mode=""></image>
			<tm-input class="searchVal" @onChange="searchInputHandle" placeholder="搜索查核组名称" ></tm-input>
			<view class="searchBtn" @click="searchHandle">搜索</view>
		</view>
		<view class="list">
			<view class="item" 
			    v-if="checkRent.list.length>0"
				v-for="(item, index) in checkRent.list" 
				:key="index"
				@click="openItemHandle(item.id)">
				<view class="img-wrap">
					<image :src="`../../static/list-${openItems.includes(item.id)
						?'close':'open'}.png`"></image>
				</view>
				<view class="content">
					<view class="info">
						<view class="text">
							<view>{{item.name}}</view>
							<view>组长：{{item.groupManagerName}}</view>
						</view>
						<view class="icon" @click="checkedHandle($event, item)">
							<image :src="`../../static/check-${checkRent.checkedItem.id === item.id ? 'radio' : 'no'}.png`"></image>
						</view>
					</view>
					<view class="chidren" v-if="openItems.includes(item.id)">
						<view class="chid-item"> 
							<view>小组成员</view>
							<view>{{item.members.join('、')}}</view>
						</view>
						<view class="chid-item"> 
							<view>负责要点</view>
							<view>
								<text>{{item.allPoints}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-if="checkRent.list.length==0">
			    <image src="../../../static/no-data.png" mode=""></image>
				<text>暂无内容</text>
			</view>
		</view>
	</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:''
			}
		},
		computed: {
			...mapState({
				checkRent: state => state.creatingSituations.checkRent,
				condition: state => state.creatingSituations.condition,
				needReload: state => state.creatingSituations.needReload,
				editConfig: state => state.creatingSituations.editConfig
			})
		},
		watch:{
			keyword(val,oldVal){
				  if(val.length == 0){
					 this.getData();
				  }
			}
		},
		created:function(){
			// 编辑的时候不用获取数据
			if(this.editConfig && arrayEquality(this.condition.conditionIds, this.editConfig.condition.conditionIds) && this.editConfig.checkRent) {
				this.$store.commit({
					type: 'creatingSituations/comChangeState', 
					key: 'checkRent', 
					data: this.editConfig.checkRent
				});
			} else if(this.needReload) { // 点击上一步不用获取数据
				  this.getData();
			}
		},
		methods: {
			/**
			 * @param {string} val
			 */
			searchInputHandle(val){
				  this.keyword = val;
			},
			searchHandle(){
				  const {list,checkedItem} = this.checkRent;
				  const filtedList = list.filter(t=>t.name.indexOf(this.keyword) != -1);
				  
				  this.myCommit('list', filtedList);
				  if(checkedItem.id) { // 如果选中过，要去更新数据
				  	let obj = filtedList.find(({id})=>id === checkedItem.id);
				  	this.myCommit('checkedItem', obj?obj:{id:null});
				  }  
			},
			/**
			 * @param {string} searchKey
			 */
			getData(){
				 this.$store.dispatch({
				 	type: 'creatingSituations/commActions',
				 	key: 'checkGroupList',
				 	data:this.condition.conditionIds
				 }).then((data)=> {
				 	if(data) {
				 		this.myCommit('list', data);
				 		const {checkedItem} = this.checkRent;
				 		if(checkedItem.id) { // 如果选中过，要去更新数据
				 			let obj = data.find(({id})=>id === checkedItem.id);
				 			this.myCommit('checkedItem', obj?obj:{id:null});
				 		}
				 	} 
				 });
			},
			openItemHandle: function(key) {
				this.openItems = arrFilter(key, this.openItems);
			},
			checkedHandle: function(e, item) {
				_stopPropagation(e);
				this.myCommit('checkedItem', item);
			},
			/**
			 * 更新condition数据
			 * @param {Object} key 要更新的属性
			 * @param {Object} value 值
			 */
			myCommit: function(key, value) {
				let data = {...this.checkRent};
				data[key] = value;
				this.$store.commit({
					type: 'creatingSituations/comChangeState', 
					key: 'checkRent', 
					data
				});
			}
		}
	}
</script>

<style lang="less">
	.check-rent {
		.searchBar {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 87.5rpx;
			padding: 0 25rpx;
			margin-bottom: 15rpx;
			background: #FFFFFF;
			.serachIcon {
				width: 30rpx;
				height:30rpx;
			}
			.searchVal {
				width:85%;
				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;
				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;
				margin-bottom: 15rpx;
				padding: 25rpx;
				padding-right: 0;
				width: 100%;
				background-color: #fff;
				
				.img-wrap {
					width: 36.25rpx;
					image {
						width: 21.25rpx;
						height: 12.5rpx;
					}
				}
				.content {
					width: calc(100% - 36.25rpx);
					font-size: 20rpx;
					line-height: 30rpx;
					color: #666E80;
					.info {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: -25rpx;
						.text {
							padding-top: 25rpx;
							view:first-child {
								margin-bottom: 25rpx;
								font-size: 25rpx;
								line-height: 37.5rpx;
								color: #292C33;
							}
						}
						.icon { // 图标样式，用view包裹img防止挤压变形
							padding-top: 25rpx;
							padding-left: 25rpx;
							width: 75rpx;
							height: inherit;
							image {
								width: 25rpx;
								height: 25rpx;
							}
						}
					}
					.chidren {
						margin-top: 25rpx;
						border-top: 1px solid #DADEE6;
						width: 100%;
						.chid-item {
							padding-top: 25rpx;
							padding-right: 25rpx;
							view {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								&:first-child {
									padding-bottom: 15rpx;
									font-weight: bold;
									color: #292C33;
								}
							}
						}
					}
				}
			}
		}
	}
</style>