hospital-accompaniment-wechat/pages/workbench/caregiverManage.vue

<template>
	<view class="container">
		<view class="top-box">
			<view class="select-item" @click="showSelect(1)">
				<span class="name">{{params.hospitalId ? hospitalName : '全部医院'}}</span>
				<image src="/static/下箭头.png" mode="aspectFill"></image>
			</view>
			<view class="select-item" @click="showSelect(2)">
				<span class="name">{{params.sex ? sexName : '性别'}}</span>
				<image src="/static/下箭头.png" mode="aspectFill"></image>
			</view>
			<view class="select-item" @click="showSelect(3)">
				<span class="name">年龄</span>
				<image src="/static/sort2.png" mode="aspectFill"></image>
			</view>
			<view class="select-item" @click="showSelect(4)">
				<span class="name">服务中</span>
				<image src="/static/sort2.png" mode="aspectFill"></image>
			</view>
		</view>

		<view class="list-box">
			<view class="item-box" v-for="item,index in list" :key="index">
				<u-image :src="item.photographUrl" width="196rpx" height="256rpx" :lazy-load="true"></u-image>
				<view class="info-box">
					<view class=" item-txt">{{item.name}}</view>
					<view class="info-item age-box">
						<view class="box-l">
							<view class="item-txt">{{item.sex == '2' ? '女' : '男'}}</view>
							<view class="item-txt age">{{item.age || '0'}}岁</view>
						</view>
						<span class="btn" @click="toDetails(item.id)">去查看></span>
					</view>
					<view class="info-item item-txt">工作年限：{{item.workYears || 0}}年</view>
					<view class="info-item service-box">
						<span class="item-txt">服务中：{{item.inProgressCount || 0}}</span>
						<span class="item-txt total">服务总数： {{item.finishCount || 0}}</span>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer-box" v-if="type == 'guanli'">
			<view class="btn-box">
				<view class="submit-btn" @click="addCaregiver">新增护工</view>
			</view>
		</view>


		<u-action-sheet :show="showAction" :actions="hospitalList" title="请选择" @close="showAction = false"
			@select="actionSelect">
		</u-action-sheet>



		<u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="showSex = false" @select="sexSelect"
			safeAreaInsetBottom>
		</u-action-sheet>


	</view>
</template>

<script>
	import {
		dictData
	} from "@/api/home.js"
	import {
		getNurseList,
		getHospitalListByManage
	} from '@/api/hospital.js'
	export default {
		data() {
			return {
				showSex: false,
				showAction: false,
				list: [],
				params: {
					hospitalId: '',
					sex: '',
					sortFiled: 'age', //排序字段 年龄-age 服务中(数量)-serviceCount
					sortMethod: 'asc', //排序方式 正序-asc 倒序-desc
				},
				hospitalList: [],
				hospitalName: '',

				sexList: [],
				sexName: '',

				type: 'guanli',
				orderNo: '',
			}
		},
		onLoad(option) {
			this.getNurseList()
			this.getHospitalList()
			this.getSexList()
			if (option.type) {
				this.type = option.type
			}
			if (option.orderNo) {
				this.orderNo = option.orderNo
				this.params.hospitalId = option.hospitalId
				this.hospitalName = option.hospitalName
			}
		},
		methods: {
			getNurseList() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});

				getNurseList(this.params).then(res => {
						if (res.code == 200) {
							let data = res.data;
							this.list = data;
						}

					})
					.catch((err) => {
						console.log(err);
					}).finally(() => {
						uni.hideLoading();
					});
			},
			//获取于老师关联的医院
			getHospitalList() {
				let that = this;
				getHospitalListByManage().then(res => {
						if (res.code == 200) {
							let data = res.data;
							data.unshift({
								id: '',
								name: '全部',
							})
							this.hospitalList = data;
						}

					})
					.catch((err) => {
						console.log(err);
					})
			},

			//去查看详情
			toDetails(id) {
				uni.navigateTo({
					url: '/pages/workbench/caregiverDetails?id=' + id + '&type=' + this.type + '&orderNo=' + this.orderNo

				})
			},

			//获取性别字典
			getSexList() {
				let that = this;
				dictData('sys_user_sex').then(res => {
					let data = res.data;
					data.forEach(item => {
						item.name = item.dictLabel
					})
					data.unshift({
						dictValue: '',
						name: '全部',
					})
					that.sexList = data;
					// if (that.InfoId) {
					// 	that.formData.genderName = that.sexList.find(item => item.dictValue == that.formData
					// 		.gender).name
					// }
				}, err => {
					console.log(err);
				}).finally(() => {

				});
			},


			showSelect(val) {
				if(this.type != 'guanli') return
				switch (val) {
					case 1:
						this.showAction = true;
						break;
					case 2:
						this.showSex = true;
						break;
					case 3:
						this.params.sortFiled = 'age';
						this.params.sortMethod = this.params.sortMethod == 'asc' ? 'desc' : 'asc';
						this.getNurseList();
						break;
					case 4:
						this.params.sortFiled = 'serviceCount';
						this.params.sortMethod = this.params.sortMethod == 'asc' ? 'desc' : 'asc';
						this.getNurseList();
						break;
				}
			},
			actionSelect(e) {
				console.log(e);
				this.showAction = false;
				this.params.hospitalId = e.id
				this.hospitalName = e.name
				this.getNurseList()
			},

			sexSelect(e) {
				console.log(e);
				this.showAction = false;
				this.params.sex = e.dictValue
				this.sexName = e.name
				this.getNurseList()
			},

			addCaregiver() {
				uni.navigateTo({
					url: '/pages/workbench/caregiverForm?type=add',
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 20rpx 200rpx;

		.top-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.select-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin-right: 10rpx;


				&:first-child {
					width: 250rpx;

					.name {
						font-size: 24rpx;
						margin-right: 10rpx;
						//一行省略
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 200rpx;
					}
				}

				&:last-child {
					margin-right: 0;

				}

				.name {
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.list-box {
			display: flex;
			flex-direction: column;

			.item-box {
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 10rpx;
				margin-top: 20rpx;
				padding: 20rpx;

				.info-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					flex: 1;

					.info-item {
						margin-top: 30rpx;
					}

					.item-txt {
						font-size: 28rpx;
						color: #1a1a1a;
					}

					.age-box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.box-l {
							display: flex;
							align-items: center;

							.age {
								margin-left: 30rpx;
							}
						}

						.btn {
							font-size: 28rpx;
							color: #4B91D1;
						}
					}

					.service-box {

						display: flex;
						align-items: center;
						justify-content: space-between;

						.total {}
					}
				}
			}
		}


		.footer-box {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 30rpx #c5c5c53a;

			.btn-box {
				width: 100%;

				.submit-btn {
					display: block;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					background-color: #026EB7;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>