com.kasite.client.uniapp.patient/pagesCrm/business/home/home.vue

<template>
	<view class="container">
		<view class="filtration_scroll_wrapper ptb-12 plr-16">
			<view class="filtration--item" :class="{ actived: !deptId }" @click="selectedDept()">
				全部
			</view>
			<view
				v-for="item in deptList"
				:key="item.DeptId"
				class="filtration--item"
				:class="{ actived: deptId == item.DeptId }"
				@click="selectedDept(item)"
			>
				{{ item.DeptName }}
			</view>
		</view>

		<view class="timer-list">
			<scroll-view
				v-if="dateline.length"
				scroll-y
				lower-threshold="100"
				bindscrolltolower="getPatientGroupPlanList"
			>
				<view class="timer" v-for="item in dateline">
					<view class="date">
						<text>{{ item.year }}</text>
						<text class="divider">/</text>
						<text>{{ item.mouth }}</text>
						<text class="divider">/</text>
						<text>{{ item.day }}</text>
					</view>

					<view class="list">
						<view
							v-for="(data, index) in datelineData[item.date]"
							:key="data.PlanUuid"
							class="wrapper"
							:class="{ unread: !data.IsRead }"
							@click="toSchemeDetail(data, data.TempType, index)"
						>
							<view>
								<view class="dept">{{ data.DeptName }}</view>
								<view class="desc">{{ schemeTypeEnum[data.TempType] }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<noData wx:else value="暂无数据"></noData>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, nextTick, ref } from 'vue';
import { useStore } from 'vuex';
import { useOnLoad } from '@/hook';
import { mapState, mapGetters, mapMutations } from '@kasite/uni-app-base/store';
import { common } from '@kasite/uni-app-base';
import { schemeTypeEnum } from '../../static/schemeDetail';
import { lastMsgContentExtract } from '../../static/chatRoom';
import { GetPatientExecPlanDeptList, GetPatientExecPlanList } from '../../service';

const { proxy } = getCurrentInstance();
const store = useStore();

const cardInfo = ref({} as any);
const deptList = ref([]);
const deptId = ref('');
const dateline = ref([]);
const datelineData = ref({});
const pIndex = ref(1);
const noMore = ref(false);

const { memberList, currentUser = {} } = mapState({
	memberList: 'memberList',
	currentUser: 'currentUser',
});
const { setCurrentUser } = mapMutations({
	setCurrentUser: 'setCurrentUser',
});

const main = (options) => {
	/**默认查全部记录 */
	refresh(options);
};
/** 刷新 */
const refresh = async (options: any = {}) => {
	if (!currentUser.value) {
		let [user = {}] = memberList.value.filter((item) => {
			if (options.memberId) {
				return item.memberId == options.memberId;
			} else {
				return !!item.userMemberList[0].isDefaultMember;
			}
		});
		if (common.isEmpty(user)) user = memberList.value[0];
		setCurrentUser(user);
		cardInfo.value = user;
		console.log(user);
	} else {
		cardInfo.value = currentUser.value;
	}

	noMore.value = false;
	getPatientExecPlanDeptList();
	// getMemberChatList()
	await getPatientExecPlanList();
	uni.stopPullDownRefresh();
};
/** 查询患者执行计划科室列表 */
const getPatientExecPlanDeptList = async () => {
	if (!cardInfo.value.memberId) return;
	const resp = await GetPatientExecPlanDeptList({
		MemberId: cardInfo.value.memberId,
	});
	deptList.value = resp;
};
/** 查询患者组内执行计划列表 */
const getPatientExecPlanList = async (e = undefined) => {
	if (!cardInfo.value.memberId) return;
	if (noMore.value) return;
	let PIndex = pIndex.value;
	if (!e) {
		PIndex = 1;
	} else {
		PIndex++;
	}
	const resp = await GetPatientExecPlanList({
		MemberId: cardInfo.value.memberId,
		DeptId: deptId.value,
		Page: {
			PIndex,
			PSize: 10,
		},
	});
	let data = e ? datelineData.value : {};
	let line = e
		? dateline.value.map((item) => item.date).concat(resp.map((item) => item.ExecDate))
		: resp.map((item) => item.ExecDate);
	resp.map((item) => {
		if (!data[item.ExecDate]) {
			data[item.ExecDate] = [item];
		} else {
			data[item.ExecDate].push(item);
		}
	});
	line = Array.from(new Set(line))
		.sort((a, b) => {
			return new Date(b) - new Date(a);
		})
		.map((item: string) => {
			const [year, mouth, day] = item.split('-');
			return {
				date: item,
				year,
				mouth,
				day,
			};
		});
	pIndex.value = PIndex;
	noMore.value = !resp.length;
	dateline.value = line;
	datelineData.value = data;
};
/** 选择科室 */
const selectedDept = (item: any = {}) => {
	const { DeptCode, DeptId = '' } = item;
	deptId.value = DeptId;
	noMore.value = false;
	nextTick(() => getPatientExecPlanList());
};
/** 查看方案详情 */
const toSchemeDetail = (item, type, index) => {
	const path = `/pagesCrm/business/schemeDetail/schemeDetail?type=${type}&planuuid=${item.PlanUuid}&date=${item.ExecDate}&index=${index}&id=${item.Id}`;
	common.goToUrl(path);
};
const changeItemReadStatus = (date, index, status) => {
	datelineData.value[date][index].IsRead = status;
};

useOnLoad((options) => {
	main(options);
	// 兜底：监听事件总线的状态更新
	uni.$on('changeItemReadStatus', ({ date, index, status }) => {
		if (datelineData.value[date] && datelineData.value[date][index]) {
			datelineData.value[date][index].IsRead = status;
		}
	});
});

defineExpose({
	changeItemReadStatus,
});
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.filtration {
	padding: 0 20rpx;
}

.filtration_scroll_wrapper {
	display: flex;
	overflow: auto;
}

.filtration--item {
	padding: 20rpx 40rpx;
	background-color: #d3d3d3;
	border-radius: 8rpx;
	word-break: keep-all;
	display: flex;
	justify-content: center;
	align-items: center;
}

.filtration--item + .filtration--item {
	margin-left: 20rpx;
}

.filtration--item.actived {
	background-color: var(--uni-color-primary);
	color: #fff;
	font-weight: bold;
}

.timer-list {
	height: 100%;
	overflow: auto;
}

.timer + .timer {
	margin-top: 20rpx;
}

.date {
	--height: 46rpx;
	margin: 20rpx;
	padding: 0 20rpx 0 56rpx;
	position: relative;
	font-weight: bold;
	height: var(--height);
	align-items: center;
	background-color: #e8e8e8;
	border-radius: var(--height);
	display: inline-flex;
}

.date::before {
	content: '';
	height: 12rpx;
	width: 12rpx;
	border-radius: 100%;
	border: 16rpx solid #b7bbca;
	position: absolute;
	left: 0;
	z-index: 1;
}

.date::after {
	content: '';
	width: 1rpx;
	height: calc(100% + 20rpx);
	position: absolute;
	left: 20rpx;
	bottom: -100%;
	background-color: #dee0e9;
}

.date .divider {
	color: var(--uni-color-primary);
	margin: 0 8rpx;
}

.timer .wrapper {
	padding: 24rpx 24rpx 24rpx 76rpx;
	position: relative;
	align-items: center;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
}

.wrapper::before {
	content: '';
	height: 18rpx;
	width: 18rpx;
	border-radius: 100%;
	background-color: #dee0e9;
	position: absolute;
	left: 32rpx;
}

.wrapper::after {
	content: '';
	width: 1rpx;
	height: calc(100% + 20rpx);
	position: absolute;
	left: calc(32rpx + 8rpx);
	top: 0;
	background-color: #dee0e9;
}

.wrapper:last-child::after {
	height: 50%;
}

.wrapper + .wrapper {
	margin-top: 20rpx;
}

.arrow_right {
	width: 30rpx;
	height: 30rpx;
}

.dept {
	color: #909399;
	margin-bottom: 24rpx;
	font-size: 26rpx;
	position: relative;
	display: inline-block;
}

.unread .dept::before {
	content: '';
	height: 14rpx;
	width: 14rpx;
	border-radius: 100%;
	position: absolute;
	right: -20rpx;
	top: -5rpx;
	background-color: #fa4844;
}
</style>