hospital-accompaniment-wechat/pages/workbench/managementDept.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.departmentId ? deptName : '全部科室'}}</span>
				<image src="/static/下箭头.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="main-info">
			<view class="title">
				订单汇总信息
			</view>
			<view class="num-box ">
				<view class="num-item flex-box-cloum">
					<span class="num">{{statisticsInfo.inProgressCount || 0}}</span>
					<span class="name">服务中</span>
				</view>
				<view class="num-item flex-box-cloum">
					<span class="num">{{statisticsInfo.finishCount || 0}}</span>
					<span class="name">已完成</span>
				</view>
				<view class="num-item flex-box-cloum">
					<span class="num">{{statisticsInfo.orderCount || 0}}</span>
					<span class="name">累计订单数</span>
				</view>
			</view>
		</view>
		<view class="hospital-list">
			<view class="hospital-item" v-for="item,index in deptList" :key="index">
				<view class="title-box">
					<u-icon name="calendar" color="#2979ff" size="28"></u-icon>
					<span class="name">{{item.hospitalName || ''}}-{{item.departmentName || ''}}</span>
				</view>
				<view class="num-box">
					<view class="num-item flex-box-cloum">
						<span class="num">{{item.inProgressCount || 0}}</span>
						<span class="name">服务中</span>
					</view>
					<view class="num-item flex-box-cloum">
						<span class="num">{{item.finishCount || 0}}</span>
						<span class="name">已完成</span>
					</view>
					<view class="num-item flex-box-cloum">
						<span class="num">{{item.orderCount || 0}}</span>
						<span class="name">累计订单数</span>
					</view>
				</view>
			</view>
		</view>

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


		<u-action-sheet :show="showDept" :actions="deptActions" title="请选择" @close="showDept = false"
			:closeOnClickOverlay="true" :closeOnClickAction="true" @select="deptSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		getDepartmentList,
		getHospitalListByManage,
		getDepartmentListByManage,
		getDepartmentOrderCount
	} from '@/api/hospital.js'
	export default {
		data() {
			return {
				showAction: false,
				hospitalId: undefined,
				actions: [],
				hospitalList: [],

				hospitalName: '',
				deptList: [],

				departmentId: '',

				showDept: false,
				deptActions: [],
				deptName: '',

				statisticsInfo: null,

				params: {
					hospitalId: undefined,
					departmentId: undefined
				},
			}
		},
		onLoad() {
			this.getHospitalList();
			this.getDepartmentOrderCount()
		},
		methods: {
			//获取于老师关联的医院
			getHospitalList() {
				let that = this;
				getHospitalListByManage().then(res => {
						if (res.code == 200) {
							let data = res.data;
							data.unshift({
								id: '',
								name: '全部医院',
							})
							that.hospitalList = data;
						}

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

			//获取管理老师关联的科室订单统计
			getDepartmentOrderCount() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				getDepartmentOrderCount(that.params).then(res => {
					if (res.code == 200) {
						if (res.data) {
							that.statisticsInfo = res.data;
							that.deptList = res.data.departmentOrderCountList
						}
					}
				}).catch((err) => {
					console.log(err);

				}).finally(() => {
					uni.hideLoading();

				})
			},

			//获取科室列表
			getDepartmentList() {
				let that = this;
				let param = {
					hospitalId: that.params.hospitalId
				};
				getDepartmentListByManage(param).then(res => {
					if (res.code == 200) {
						// this.actions = res.data
						let data = res.data
						data.unshift({
							id: '',
							name: '全部科室',
						})
						this.deptActions = data
					}
				})
			},
			showSelect(type) {
				switch (type) {
					case 1:
						this.showAction = true;
						break;
					case 2:
						this.showDept = true;
						break;

				}
			},
			deptSelect(e) {
				console.log(e);
				this.showDept = false;
				this.params.departmentId = e.id
				this.deptName = e.name
				this.getDepartmentOrderCount()
			},
			actionSelect(e) {
				console.log(e);
				this.showAction = false;
				this.params.hospitalId = e.id
				this.hospitalName = e.name
				this.getDepartmentList();
				this.getDepartmentOrderCount()
			},



		}
	}
</script>

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

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

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

				&:first-child {
					margin-right: 20rpx;
				}

				.name {
					font-size: 30rpx;
				}

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

		.main-info {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-top: 20rpx;

			.title {
				width: 100%;
				padding: 0 20rpx;
				text-align: center;
			}

		}

		.hospital-list {

			.hospital-item {
				padding: 20rpx;
				margin-top: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.title-box {
					display: flex;
					align-items: center;
					padding: 0 20rpx;
				}
			}
		}

		.num-box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;

			.num-item {

				.num {
					font-size: 32rpx;
					font-weight: bold;
				}

				.name {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #666666;

				}
			}
		}
	}
</style>