Web_TracerMethodology/pages/creatingSituations/components/condition.vue

<template>
	<view class="condition">
		<view class="title">请选择追踪条件（可多选）</view>
		<view class="select-btn">
			<text>选择门诊或急诊</text>
			<view>
				<button :class="{active: condition.depType === 1}" 
					@click="selectBtnHandle(1)">门诊</button>
				<button :class="{active: condition.depType === 2}" 
					@click="selectBtnHandle(2)">急诊</button>
			</view>
		</view>
		<tm-trees :options="condition.options"
		 :defaultOpen="condition.defaultOpen" 
		 :defaultChecked="condition.conditionIds"
		 v-on:checked-keys="checkedHandle"></tm-trees>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	export default {
		computed: {
			...mapState({
				condition: state => state.creatingSituations.condition,
				needReload: state => state.creatingSituations.needReload,
				theme: state => state.creatingSituations.theme
			})
		},
		created: function(){
			if(this.needReload) // 点击上一步不用获取数据
				this.getOptions(this.condition.depType);
		},
		methods: {
			checkedHandle: function(keys) {
				this.myCommit('conditionIds', keys);
				let _options = this.optionsHandle2([...this.condition.options], keys);
				this.myCommit('options', _options);
			},
			selectBtnHandle: function(depType) {
				this.myCommit('depType', depType);
				this.getOptions(depType);
			},
			/**
			 * 获取树形节点数据
			 */
			getOptions: function(depType) {
				this.checkedHandle([]); // 切换后清空选中
				const {id} = this.theme;
				if(id || id === 0) {
					this.$store.dispatch({
						type: 'creatingSituations/commActions',
						key: 'conditions',
						data: { depType, type: id }
					}).then((data)=> {
						if(data) {
							if(data.length > 0) {
								this.myCommit('defaultOpen', [data[0].id]);
							}
							this.myCommit('options', this.optionsHandle(data));
						} 
					});
				} else {
					uni.showModal({
					  title: '温馨提示',
					  content: '请先选择主题！',
					  showCancel: false
					});
				}
			},
			/**
			 * 增加树形数据字段，以适配公共组件
			 * @param {Object} data
			 */
			optionsHandle: function(data) {
				let options = data.map((item)=>{
					return {
						...item,
						key: item.id,
						label: item.name,
						children: this.optionsHandle(item.child)
					}
				});
				return options;
			},
			optionsHandle2: function(data, keys) {
				let options = data.map((item)=>{
					return {
						...item,
						selectFlag: this.condition.conditionIds.includes(item.id),
						child: this.optionsHandle2(item.child, keys)
					}
				});
				return options;
			},
			/**
			 * 更新condition数据
			 * @param {Object} key 要更新的属性
			 * @param {Object} value 值
			 */
			myCommit: function(key, value) {
				let data = {...this.condition};
				data[key] = value;
				this.$store.commit({
					type: 'creatingSituations/comChangeState', 
					key: 'condition', 
					data
				});
			}
		}
	}
</script>

<style lang="less">
	.select-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 0 25rpx;
		width: 100%;
		height: 87.5rpx;
		font-size: 22.5rpx;
		line-height: 33.75rpx;
		color: #525866;
		background-color: #fff;
		
		view {
			display: flex;
			flex-direction: row;
			
			button {
				border: 0;
				border-radius: 25rpx;
				padding: 0 46.25rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #292C33;
				background-color: #EBEFF7;
				
				&:first-child {
					margin-right: 20rpx;
				}
				&::after {
					border: 0;
				}
				&.active {
					color: #fff;
					background-color: #3377FF;
				}
			}
		}
	}
</style>