special/pages/subpack/pages/application/list.vue

<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" empty-view-text="~ 暂无数据 ~">
			<template #top>
				<u-navbar class="u-navbar-box" :title="handleTitle" placeholder bgColor="transparent" autoBack />
				<view class="bg-white">
					<u-tabs :list="tabList" :current="tabIndex" lineWidth="80rpx" :itemStyle="itemStyle"
						:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="handleTabs" />
				</view>
			</template>
			<template #default>
				<view class="apply-list">
					<applyItem v-for="(item, index) in dataList" :item="item" :key="index" @tapItem="tapItemHandle" />
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		onMounted
	} from 'vue';
	//import { onLoad } from '@dcloudio/uni-app'
	import applyItem from '../../components/apply/apply-item.vue';

	import {
		useStore
	} from 'vuex';
	import {
		getCareList,
		getAppClockList,
		getAssignList
	} from '@/common/config/application-api.js'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	const store = useStore();
	const user = store.state.vuex_user;

	const {
		proxy
	} = getCurrentInstance();
	//当前是tabs样式
	const itemStyle = reactive({
		width: '187.5rpx',
		padding: '20rpx 0'
	})
	const activeStyle = reactive({
		color: '#39A1FF',
		fontSize: '32rpx',
		fontWeight: 'bold'
	})
	const inactiveStyle = reactive({
		color: '#888888',
		fontSize: '32rpx',
		fontWeight: 'bold'
	})

	const props = defineProps({
		// 是否是工作 - 判断当前tab是否显示
		isWork: {
			type: Boolean,
			default: false
		}
	})

	const tabData = {
		common: [{
			name: '进行中',
			query: {
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		admin: [{
			name: '进行中',
			query: {
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		village: [{
			name: '未送审',
			query: {
				status: 'no_check,disagree'
			}
		}, {
			name: '进行中',
			query: {
				status: 'wait_assign_nurse,wait_check,agree,wait_assign_company,assigned',
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		area: [{
			name: '待处理',
			query: {
				status: 'wait_check,wait_assign_company'
			}
		}, {
			name: '进行中',
			query: {
				status: 'wait_assign_nurse,agree,wait_assign_company,assigned',
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}, {
			name: '已拒绝',
			query: {
				status: 'disagree'
			}
		}],
		company: [{
			name: '待分配',
			query: {
				status: 'wait_assign_nurse'
			}
		}, {
			name: '进行中',
			query: {
				status: 'care_apply_status',
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		nurse: [{
			name: '护理任务',
			query: {
				status: 'assigned',
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				status: 'assigned',
				dealStatus: 'complete'
			}
		}],
	}
	const tabList = ref([])

	let roles = user.roles ?? [];
	roles.map(r => {
		if (tabData.hasOwnProperty(r) && tabList.value.length === 0) tabList.value = tabData[r];
	})
	if (tabList.value.length === 0) tabList.value = tabData.common;


	//根据tab计算有多少宽度
	itemStyle.width = 750 / tabList.value.length < 150 ? '150rpx' : `${750 / tabList.value.length}rpx`;


	const tabIndex = ref(0)

	function handleTabs({
		index,
		name
	}) {
		if (index === tabIndex.value) return;
		tabIndex.value = index;
		proxy.$refs.paging.reload();
	}
	
	const handleTitle = computed(() => {
		if(roles.includes('area')) return '护理审核';
		if(roles.includes('village')) return '护理申请';
		if(roles.includes('company')) return '护理指派';
		else return '护理打卡';
	})
	

	const dataList = ref([])
	const paging = ref(null)

	function queryList(pageNo, pageSize) {
		let params = {
			pageNum: pageNo,
			pageSize
		}
		if (tabList.value.length > tabIndex.value) {
			let query = tabList.value[tabIndex.value].query;
			params = {
				...params,
				...query
			}
		}
		if(roles.includes('company')){
			getListIsCompany(params);
		}else if(roles.includes('nurse')) {
			getListIsNurse(params);
		}else {
			getList(params);
		}
		
	}
	
	function getList(params) {
		getCareList({
			params
		}).then(data => {
			paging.value.complete(data);
		})
	}
	
	// -护理公司护理列表查询
	function getListIsCompany(query) {
		let params = {
			...query,
			pageNumAssign: query.pageNum??1,
			pageSizeAssign: query.pageSize??10
		}
		getAssignList({
			params
		}).then(data=>{
			paging.value.complete(data);
		})
	}
	
	// -护理人员护理列表查询
	function getListIsNurse(query) {
		let params = {
			...query
		}
		getAppClockList({
			params
		}).then(data=>{
			paging.value.complete(data);
		})
	}


	function tapItemHandle(item) {
		// console.log('tapItemHandle=>', item);
		if (!item.applyId) return false;
		uni.$u.route('/pages/subpack/pages/application/info', {
			id: item.applyId
		})
	}
	onLoad(() => {
		uni.$on('renderApplyList', () => {
			proxy.$refs.paging.reload();
		})
	})

	onUnload(() => {
		uni.$off('renderApplyList')
	})
</script>
<style>
	page {
		background-color: #F6F8FD;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-navbar__content__title) {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>