Web_TracerMethodology/pages/creatingSituations/components/conditionCard.vue

<!-- 个案情境创建时的可选条件 -->
<template>
	<div class="conditionCard">
		<view class="title">请选择追踪条件（可多选）</view>
		<view class="container">
			<view class="card" v-for="(data,index) in list" :key="index">
				<view class="mark">{{`${index+1}/${list.length}`}}</view>	
				<view class="cardInner" v-for="(item,key) in childContainer[index].list" :key="key">
					<view :class="[item.required == 1?'cardTitle required':'cardTitle']">{{item.name?item.name:''}}
					</view>
					<view :class="[item.child.length>2?'tabWrap multi':'tabWrap']">
						<view :class="[selectedIds.includes(val.id)?'tab on':'tab']" v-for="(val,a) in item.child"
						:key="a"
							@click="tabClickHandle(val,index,item.multiple,item.child,item)">
							<image v-if="selectedIds.includes(val.id)&&item.child.length>2"
								src="../../../static/activedGou_white.png" class="bottomMark" mode=""></image>
							{{val.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		computed: {
			...mapState({
				needReload: state => state.creatingSituations.needReload,
				condition: state => state.creatingSituations.condition,
				theme: state => state.creatingSituations.theme,
				editConfig: state => state.creatingSituations.editConfig,
				conditionCard: state => state.creatingSituations.conditionCard
			})
		},
		data() {
			return {
				results: [], //选择结果列表
				requireds: [], //必填项
				list: [],
				childContainer: [],
				selectedIds: [],
				currentActTabGroupId: null,
			}
		},
		watch: {
			childContainer(prev, cur) {

				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'condition',
					data: {
						...this.condition,
						childContainer: prev
					}
				});
			},
			results(prev, cur) {
				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'conditionCard',
					data: {
						...this.conditionCard,
						checkResults: prev
					}
				});
			},
		},
		created: function() {
			// 编辑的时候不用获取数据

			if (this.editConfig && this.editConfig.theme.id === this.theme.id) {

				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'condition',
					data: this.editConfig.condition
				});


			} else if (this.needReload) {
				if (this.theme.id != undefined || this.theme.id != null) {
					this.$store.commit({
						type: 'creatingSituations/comChangeState',
						key: 'condition',
						data: {
							...this.condition,
							options: [],
							conditionIds: [],
							childContainer: []
						}
					});

					this.getData();
				}

			} else {
				this.list = this.condition.options;
				this.selectedIds = this.condition.conditionIds;
				this.childContainer = this.condition.childContainer;
				this.results = this.conditionCard.checkResults;
			}

		},
		methods: {
			sortFunc(arr) {
				return arr.map(item => {

					const arr = item.list;
					arr.sort((cur, next) => {
						return cur.id - next.id
					});

					return {
						...item,
						list: arr
					}
				})
			},
			getData(depType) {
				const {
					id
				} = this.theme;
				this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key: 'getTypeListsInGeanCreate',
					data: {
						depType: 0,
						type: id
					}
				}).then(data => {
					if (data) {
						this.list = data;

						this.childContainer = data.map((item, index) => {

							for (let i = 0; i < item.child.length; i++) {
								if (item.child[i].required == 1) {
									//必填
									this.requireds = [...this.requireds, item.child[i]]
								}
							}
							return {
								index: index,
								list: [item.child[0]]
							}
						});

						this.$store.commit({
							type: 'creatingSituations/comChangeState',
							key: 'condition',
							data: {
								...this.condition,
								options: data
							}
						});
						this.$store.commit({
							type: 'creatingSituations/comChangeState',
							key: 'conditionCard',
							data: {
								...this.conditionCard,
								requireds: this.requireds
							}
						});


					}
				})
			},
			tabClickHandle(item, index, isMulti, parts, parent) {
				// console.log({item, index, isMulti, parts,parent});
				// console.log({results:this.results});
				
				const needCancelActiedItems = parts.filter(a => a.id != item.id);
				const needCancelActiedIds = needCancelActiedItems.map(b => b.id);
				const needCancelActiedcardIds = needCancelActiedItems.map(i => i.subOptionId);

				if (isMulti == 1) {
					//isMulti == 1 单选
					
					const leftActivedIds = this.selectedIds.filter(c => !(needCancelActiedIds.includes(c))); //去除非选中项

					this.selectedIds = [...leftActivedIds, item.id];

					const parentSameIdIndex = this.results.findIndex(item => item.id == parent.id);

					if (parentSameIdIndex != -1) {
						//之前有选过，需要修改
						const _results = this.results.map(a => {
							if (a.id == parent.id) {
								return {
									...a,
									value: item.name,
								}
							} else {
								return a
							}
						})
						this.results = [..._results];

					} else {
						this.results = [...this.results, {
							name: parent.name,
							value: item.name,
							id: parent.id
						}];
					}

					const filtedResults = this.results.filter(i => !(needCancelActiedcardIds.includes(i.id)));

					this.results = [...filtedResults];



				}

				if (isMulti == 2) {
					//isMulti == 2 多选
					const index = this.selectedIds.findIndex(a => a == item.id);

					if (index != -1) {
						//已选中
						this.selectedIds = this.selectedIds.filter(a => a != item.id);
					} else {
						this.selectedIds = [...this.selectedIds, item.id];
					}

					this.results = [...this.results, {
						name: parent.name,
						value: item.name,
						id: parent.id
					}];

				}


				if (item.subOptions) {
					//subOptionId 关联子选项id,subOptions是否有关联子级选项
            
					
					const childs = this.list[index].child.filter(d => d.id == item.subOptionId);
					const needDeleteChilds = parts.filter(e => e.id != item.id); //获取同层级需要取消高亮的tab
					const needDeleteChildIds = needDeleteChilds.map(f => f.id);

					const needCancelActivedTabs = needDeleteChilds.filter(f => f.subOptions);

					const filtedChildContainer = this.childContainer[index].list.filter(g => !(needDeleteChildIds.includes(
						g.id)));
                    
					
					const positionIndex = childs.length>0?filtedChildContainer.findIndex(a => a.id == childs[0].id):-1;

					if (isMulti == 1) {
						//单选
						if (positionIndex == -1) {
							this.childContainer[index].list = [...childs, ...filtedChildContainer]
						}
					}

					if (isMulti == 2) {
						//多选
						if (positionIndex != -1) {
							const _list = this.childContainer[index].list;
							_list.splice(positionIndex, 1);
							this.childContainer[index].list = _list;
						} else {
							this.childContainer[index].list = [...childs, ...filtedChildContainer]
						}


					}


				} else {

					if (isMulti != 2) {
						//单选同一组中
						const needDeleteChilds = parts.filter(e => e.id != item.id); //获取同层级需要取消高亮的tab
						const needDeleteChildIds = needDeleteChilds.map(f => f.subOptionId);


						const filtedChildContainer = this.childContainer[index].list.filter(g => {
							if (needDeleteChildIds.includes(g.id)) {
								const ids = g.child.map(a => a.id);
								const selectedIds = this.selectedIds.filter(f => !(ids.includes(f)));
								this.selectedIds = selectedIds;
							}

							return !(needDeleteChildIds.includes(g.id))
						})

						this.childContainer[index].list = [...filtedChildContainer];
					}

				}

				this.currentActTabGroupId = item.parentId;


				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'condition',
					data: {
						...this.condition,
						conditionIds: this.selectedIds
					}
				});

				this.childContainer = this.sortFunc(this.childContainer);
				
				// console.log('this.childContainer',this.childContainer);
				// console.log('this.results',this.results);


			},
		}
	}
</script>

<style lang="less" scoped>
	.conditionCard {
		.container {
			padding: 25rpx;

			.card {
				position: relative;
				width: 100%;
				padding: 25rpx;
				background: #FFFFFF;
				border-radius: 15rpx;
				margin-bottom: 25rpx;

				.mark {
					display: flex;
					position: absolute;
					justify-content: center;
					align-items: center;
					top: 0;
					left: 0;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
					width: 75rpx;
					height: 45rpx;
					background: linear-gradient(270deg, #66A6FF 0%, #4D88FF 100%);
					border-radius: 15rpx 0px 35rpx 0px;
				}

				.cardInner {
					margin-bottom: 25rpx;

					.cardTitle {
						text-align: center;
						font-size: 22.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #525866;
						margin-bottom: 25rpx;

						&.required {
							&::before {
								position: relative;
								content: '*';
								color: rgba(255, 51, 85, 1);
								left: -3rpx;
							}
						}
					}

					.tabWrap {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.tab {
							width: 48.5%;
							text-align: center;
							font-size: 25rpx;
							margin-bottom: 25rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #525866;
							height: 62.5rpx;
							line-height: 60rpx;
							background: #F5F7FA;
							border-radius: 10rpx;

							&.on {
								color: #3377FF;
								background: #E6EEFF;
							}
						}

						&.multi {
							display: flex;
							flex-wrap: wrap;

							.tab {
								position: relative;
								width: 23%;

								.bottomMark {
									position: absolute;
									width: 25rpx;
									height: 25rpx;
									bottom: 0;
									right: 0;
								}
							}
						}
					}

					&:last-child {
						margin-bottom: 0;
					}
				}

			}
		}
	}
</style>