legacy.pda.deploy-review/pages/index/index.vue

<template>
	<view class="main">
		<NavBar :user-info="userInfo" @update-user="updateUser" />
		<view class="body">
			<view class="tab-box">
				<view class="tab-bar">
					<view class="tab_item" v-for="(tab, index) in tabList" :key="index"
						:class="{'active':tabActive==index}" @click="checkIndex(index)">
						<text class="text">{{tab.title}}{{index===0?"("+orderList.length+")":""}}</text>
					</view>
				</view>
				<view class="search-bar">
					<view v-if="tabActive === 0" class="today">
						<view class="search">
							<uni-easyinput prefixIcon="search" v-model="searchVal" placeholder="请输入姓名" />
						</view>
						<button type="primary" @click="handleSearch" class="search-button">搜索</button>
						<button type="primary" :disabled="userInfo.workStatus==='1'?false:true" @click="handleRefresh" class="refresh">一键释放</button>
					</view>
					<view v-else class="history">
						<view class="searchchoice">
							<view class="row1">
								<view class="timequan">
									<text class="time_t">时间区间：</text>
									<uni-datetime-picker v-model="searchTime" type="datetimerange" :hide-second="true" rangeSeparator=" - " />
								</view>
								<view class="office">
									<view class="uni-list-cell-left office_t">
										科室：
									</view>
									<picker @change="handleGetOffice" :value="officeIndex" :range="officeArr">
										<view class="uni-input">{{officeArr[officeIndex]}}</view>
									</picker>
								</view>
							</view>
							<view class="row2">
								<view class="presid">
									<picker @change="handleGetType" :value="typeIndex" :range="typeArr">
										<view class="uni-input">{{typeArr[typeIndex]}}</view>
									</picker>
								</view>
								<view v-if="typeIndex === 0" class="search">
									<uni-easyinput prefixIcon="search" v-model="searchName" placeholder="请输入姓名" />
								</view>
								<view v-else class="search">
									<uni-easyinput prefixIcon="search" v-model="searchPreNo" placeholder="请输入处方号" />
								</view>
								<button type="primary" @click="handleSearch" class="search-button">搜索</button>
							</view>
							<view class="row3">
								<view class="tag-view" v-for="(v, i) in tags" :key="i">
									<uni-tag :circle="true" :inverted="!searchTags.includes(v)" :text=v type="primary" @click="handleGetTags(v)" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tab-content">
				<view class="order-list">
					<scroll-view v-if="orderList.length > 0" class="order-list-wrap" scroll-y="true" :scroll-top="50">
						<template v-for="(v,i) in orderList" :key="i">
							<orderCard v-if="v" :v="v" :index="i" :c=tabActive class="order-card"
								@update-list="updateList"
							/>
						</template>
					</scroll-view>
					<view v-else class="text">-- 没有更多数据 --</view>
				</view>
				<view v-if="isBottom" class="order-bottom">
					<view class="text">-- 没有更多数据 --</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import NavBar from "@/components/nav-bar/nav-bar.vue"
import OrderCard from "@/components/order-card/order-card.vue"
import { onMounted,ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import {receiveOrderList } from "@/static/js/api.js"


const userInfo = ref({})
const searchVal = ref('')
const tabList = ref([
	{title:"今日待完成", status: 0},
	{title:"历史处方", status: 1},
])

const currentStatus = ref('0')

const tabActive = ref(0) // 当前tab Index
const tabName = ref('今日待完成') // 当前tab Name

// const tags = ref([])
const orderList = ref([
	{id:1,prescriptionTime:'2023-07-06 14:54', faceurl:'/static/hz.png',name:'张三三',sex: '女',age: 23,disName:'胃脘痛病',symName:'脾胃虚寒证',deployState:'调配',preNo:10230516091026,department:'中医内科',dosageForm:'汤剂',number:3,prescriptionSum:135.62,preMzZy:'1'},
	{id:2,prescriptionTime:'2023-07-06 14:54', faceurl:'/static/hz.png',name:'张三三',sex: '女',age: 23,disName:'胃脘痛病',symName:'脾胃虚寒证',deployState:'调配',preNo:10230516091026,department:'中医内科',dosageForm:'汤剂',number:3,prescriptionSum:135.62,preMzZy:'1'},
	{id:3,prescriptionTime:'2023-07-06 14:54', faceurl:'/static/hz.png',name:'张三三',sex: '女',age: 23,disName:'胃脘痛病',symName:'脾胃虚寒证',deployState:'调配',preNo:10230516091026,department:'中医内科',dosageForm:'汤剂',number:3,prescriptionSum:135.62,preMzZy:'2'},
	{id:4,prescriptionTime:'2023-07-06 14:54', faceurl:'/static/hz.png',name:'张三三',sex: '女',age: 23,disName:'胃脘痛病',symName:'脾胃虚寒证',deployState:'调配',preNo:10230516091026,department:'中医内科',dosageForm:'汤剂',number:3,prescriptionSum:135.62,preMzZy:'1'},
	{id:5,prescriptionTime:'2023-07-06 14:54', faceurl:'/static/hz.png',name:'张三三',sex: '女',age: 23,disName:'胃脘痛病',symName:'脾胃虚寒证',deployState:'调配',preNo:10230516091026,department:'中医内科',dosageForm:'汤剂',number:3,prescriptionSum:135.62,preMzZy:'2'}
])

const isBottom = ref(false) // 是否触底


const officeArr = ref(['全部','中医骨伤科门诊一','中医内科门诊一','中医儿科门诊'])
const officeIndex = ref(0)

const typeArr = ref(['姓名：','处方号：'])
const typeIndex = ref(0)

const searchTime =ref([])
const searchDepartment = ref('')
const searchName = ref('')
const searchPreNo = ref('')
const searchSex = ref('')
const searchPreMzZy = ref('')
const searchStatus = ref('')

const searchTags = ref([])
const tags = ref(['全部','门诊','住院','男','女','煎煮','发药'])


const page = ref(0)
const total = ref(0)
const pageSize = ref(10)

onMounted(() => {
	
})

onLoad(async () => {
	const token = uni.getStorageSync('token')
	const userId = uni.getStorageSync('userId')
	userInfo.value.name = uni.getStorageSync('username')
	userInfo.value.workStatus = '0'
	const params = {
		token: token,
		data:{
			status: '0',
			currentUserId: userId,
			// page: page.value,
			// pageSize: pageSize.value,
		}
	}
	
	const {data:res} = await receiveOrderList(params)
	if (res.code === 200) {
		total.value = res.total
		orderList.value = res.rows
	}
})

// 子传父，更新userInfo
const updateUser = (v)=>{
	console.log('updateUserStatus', v)
	userInfo.value.workStatus = v
}

const updateList = (v)=>{
	console.log('updateList', v)
}

const handleSearch = async()=>{
	const token = uni.getStorageSync('token')
	console.log('handleSearch searchVal', searchVal.value)
	searchVal.value = searchVal.value.trim()
	if(currentStatus.value ==='0' && searchVal.value) {
		const params = {
			token: token,
			data: {
				status: currentStatus.value,
				name: searchVal.value,
				page: page.value,
				pageSize: pageSize.value,
			}
		}
		const {data:res} = await receiveOrderList(params)
		if (res.code === 200) {
			total.value = res.total
			orderList.value = res.rows
		}
	}
	if(currentStatus.value==='1'){
		// searchTime.value = []
		// searchDepartment.value = ''
		// searchName.value = ''
		// searchPreNo.value = ''
		// searchSex.value = ''
		// searchPreMzZy.value = ''
		// searchStatus.value = ''
		const params = {
			token: token,
			data: {
				startTime: searchTime.value[0] || '',
				endTime:  searchTime.value[1] || '',
				status: currentStatus.value || '',
				name: searchVal.value || '',
				preNo: searchPreNo.value || '',
				prescriptionStatus: searchStatus.value || '',
				sex: searchSex.value || '',
				preMzZy: searchPreMzZy.value || '',
				
				page: page.value,
				pageSize: pageSize.value,
			}
		}
		console.log('params',params)
		const {data:res} = await receiveOrderList(params)
		if (res.code === 200) {
			total.value = res.total
			orderList.value = res.rows
		}
	}
}

const handleRefresh = async()=>{
	
	let ids = orderList.value.map((v)=>{ return v.id }).join(',')
	
	const params = {
		token: token,
		data:{
			ids:ids
		}
	}
	const {data:res} = await releaseOrder(params)
	if (res.code === 200) {
		total.value = res.total
		orderList.value = []
	}
}

const handleGetOffice = (e)=>{
	console.log('handleGetOffice', e.detail.value)
	console.log('officeIndex', officeIndex)
	console.log('officeIndex', officeIndex)
	officeIndex.value = e.detail.value
}

const handleGetType = (e)=>{
	console.log('handleGetType', e.detail.value)
	console.log('typeIndex', typeIndex)
	console.log('typeArr', typeIndex)
	typeIndex.value = e.detail.value
	if(typeIndex.value ===1 ){
		searchName.value = ''
	} else {
		searchPreNo.value = ''
	}
}

const handleGetTags = (v)=>{
	console.log('handleGetTags', v)
	if(!searchTags.value.includes(v)) {
		searchTags.value.push(v)
	} else {
		searchTags.value.splice(searchTags.value.indexOf(v), 1)
	}
	switch (v) {
		case '全部':
			if(searchTags.value.includes(v)){
				searchTags.value = ['全部']
				searchTime.value = []
				searchDepartment.value = ''
				searchName.value = ''
				searchPreNo.value = ''
				searchSex.value = ''
				searchPreMzZy.value = ''
				searchStatus.value = ''
			}
			break
		case '门诊':
			if(searchTags.value.includes(v) && searchTags.value.includes('住院')){
				searchTags.value.splice(searchTags.value.indexOf('住院'), 1)
			}
			if(searchTags.value.includes('全部')){
				searchTags.value.splice(searchTags.value.indexOf('全部'), 1)
			}
			searchPreMzZy.value = '1'
			break
		case '住院':
			if(searchTags.value.includes(v) && searchTags.value.includes('门诊')){
				searchTags.value.splice(searchTags.value.indexOf('门诊'), 1)
			}
			if(searchTags.value.includes('全部')){
				searchTags.value.splice(searchTags.value.indexOf('全部'), 1)
			}
			searchPreMzZy.value = '2'
			break
		case '男':
			if(searchTags.value.includes(v) && searchTags.value.includes('女')){
				searchTags.value.splice(searchTags.value.indexOf('女'), 1)
			}
			if(searchTags.value.includes('全部')){
				searchTags.value.splice(searchTags.value.indexOf('全部'), 1)
			}
			searchSex.value = '男'
			break
		case '女':
			if(searchTags.value.includes(v) && searchTags.value.includes('男')){
				searchTags.value.splice(searchTags.value.indexOf('男'), 1)
			}
			if(searchTags.value.includes('全部')){
				searchTags.value.splice(searchTags.value.indexOf('全部'), 1)
			}
			searchSex.value = '女'
			break
		case '煎煮':
			if(searchTags.value.includes(v) && searchTags.value.includes('发药')){
				searchTags.value.splice(searchTags.value.indexOf('发药'), 1)
			}
			if(searchTags.value.includes('全部')){
				searchTags.value.splice(searchTags.value.indexOf('全部'), 1)
			}
			searchStatus.value = '煎煮'
			break
		case '发药':
			if(searchTags.value.includes(v) && searchTags.value.includes('煎煮')){
				searchTags.value.splice(searchTags.value.indexOf('煎煮'), 1)
			}
			if(searchTags.value.includes('全部')){
				searchTags.value.splice(searchTags.value.indexOf('全部'), 1)
			}
			searchStatus.value = '发药'
			break
		default:
			searchTags.value = ['全部']
	}
}

// 更新处方列表
const checkIndex = async(index) => {
	tabActive.value = index
	tabName.value = tabList.value[index].title
	currentStatus.value = parseInt(tabList.value[index].status)
	const token = uni.getStorageSync('token')
	const params = {
		token: token,
		data: {
			status: currentStatus.value,
			page: page.value,
			pageSize: pageSize.value,
		}
	}
	console.log('checkIndex params',params)
	const {data:res} = await receiveOrderList(params)
	if (res.code === 200) {
		total.value = res.total
		orderList.value = res.rows
	}
}


</script>

<style lang="scss">
.main {
	display: flex;
	flex-direction:column;
	justify-content:flex-start;
	height: 2000px;
	width: 1200px;
	.nav{
		display: flex;
		height:140px;
		width: 1200px;
    // position: sticky;
    // top: 0;
	}
	.body{
		display: flex;
		height:calc(100% - 100px);
		flex-direction:column;
		justify-content:flex-start;
		.tab-box {
			display: flex;
			position: sticky;
			flex-direction:column;
			.tab-bar{
				height: 78px;
				display: flex;
				justify-content:center;
				width: 100%;
				// border: 1px solid #000;
				.tab_item{
					display: flex;
					flex:1;
					justify-content:center;
					align-items: center;
					font-size: 30px;
					background-color: #fff;
					color: #000;
				}
				.active{
					// background-color: #fff!important;
					border-bottom: 5px solid #18C7B0;
					// color:#000!important;
				}
			}
			.search-bar{
				display: flex;
				background-color: #fff;
				margin: 8px 10px;
				border-radius: 4px;
				width: calc(100% - 20px);
				.today{
					width: 100%;
					display: flex;
					flex-direction:row;
					justify-content: flex-start;
					.search{
						width: 100%;
						margin: 8px 12px;
					}
					.search-button{
						width:100px;
						margin: 8px 12px;
						font-size: 18px;
						background-color: #18C7B0;
					}
					.refresh {
						width:200px;
						margin: 8px 12px;
						font-size: 18px;
						background-color: #18C7B0;
					}
				}
				.history{
					display: flex;
					width: 100%;
					.searchchoice{
						padding: 0 20px;
						display: flex;
						width: 100%;
						flex-direction:column;
						font-size: 24px;
						.row1{
							display: flex;
							width: 100%;
							justify-content:flex-start;
							align-items: center;
							margin: 10px 0 10px;
							// height: 80px;
							.timequan{
								
								display: flex;
								justify-content:center;
								align-items: center;
								width:70%;
								.time_t{}
							}
							.office{
								display: flex;
								margin-left: 60px;
								justify-content:center;
								align-items: center;
								.uni-input{
									display: flex;
									justify-content:center;
									align-items: center;
									border:1px solid #e1e5f1;
									font-size: 18px;
									width:190px;
									height: 40px;
									border-radius: 5px;
									background-color: #e1e5f1;
									margin-right: 10px;
								}
							}
						}
						.row2{
							display: flex;
							width: 100%;
							justify-content:flex-start;
							align-items: center;
							margin: 0 0 10px;
							.uni-input{
								display: flex;
								justify-content:center;
								align-items: center;
								border:1px solid #e1e5f1;
								font-size: 18px;
								width:100px;
								height: 40px;
								border-radius: 5px;
								background-color: #e1e5f1;
								margin-right: 10px;
							}
							.search{
								width: 77%;
							}
							.search-button{
								width:120px;
								margin: 8px 12px;
								font-size: 16px;
							}
						}
						.row3{
							display: flex;
							width: 100%;
							justify-content:flex-start;
							align-items: center;
							margin: 0 0 18px;
							.tag-view:deep(.uni-tag){
								display: inline;
								font-size: 20px;
								margin-right: 40px;
								// height: 40px;
								width: 120px;
								padding: 6px 20px;
							}
						}
						
					}
					
				}
			}
		}
		.tab-content{
			display: flex;
			margin: 8px 10px;
			border-radius: 4px;
			background-color: #fff;
			width: calc(100% - 20px);
			height: 100%;
			.order-list{
				padding: 8px;
				display: flex;
				width: 100%;
				// height: 100%;
				.order-list-wrap{
					display: flex;
					.order-card{
						display: flex;
						width: 100%;
						border-bottom: 1px solid #e6e8ee;;
					}
				}
			}
		}
	}
	
}
</style>