Web_TracerMethodology/pages/creatingSituations/components/checkRent.vue

<template>
	<view class="check-rent">
		<view class="title">请指定负责查核的查核组</view>
		<view class="list">
			<view class="item" 
				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 v-for="(point, c) in item.points" :key="c">
									{{point.name}}；
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import {_stopPropagation} from "../../../utils/compatible.js";
	import {arrFilter} from "../../../utils/arrFilter.js";
	
	export default {
		data() {
			return {
				openItems: []
			}
		},
		computed: {
			...mapState({
				checkRent: state => state.creatingSituations.checkRent,
				condition: state => state.creatingSituations.condition,
				needReload: state => state.creatingSituations.needReload,
			})
		},
		created:function(){
			if(this.needReload) { // 点击上一步不用获取数据
				this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key: 'checkGroupList',
					data: { conditionIds: this.condition.conditionIds}
				}).then((data)=> {
					if(data) this.myCommit('list', data);
				});
			}
		},
		methods: {
			openItemHandle: function(key) {
				this.openItems = arrFilter(key, this.openItems);
			},
			checkedHandle: function(e, item) {
				_stopPropagation(e);
				let _list = [...this.checkRent.list].map((ntem)=>{
					return {
						...ntem,
						selectFlag: ntem.id === item.id ? true : false
					}
				});
				this.myCommit('checkedItem', item);
				this.myCommit('list', _list);
			},
			/**
			 * 更新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 {
		.list {
			.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>