DaXingTiJian/el-admin/src/views/AppointmentMngr/AppointmentList.vue

<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-right: 20px;">机构名称</el-tag>
					<el-select filterable v-model="searchInfo.orgId" placeholder="请选择体检机构">
						<el-option v-for="(item, index) in org_list" :key="index" :label="item.org_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					  <el-input   v-model="searchInfo.userinfo"   placeholder="姓名/身份证"/>
				</el-form-item>
				<el-form-item>
					<el-tag class="ml-2" type="success" style=" margin-left: 20px;margin-right: 20px;">时间段</el-tag>
					<div>
						<el-date-picker v-model="searchInfo.dateRange" value-format="YYYY-MM-DD" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
					</div>
				</el-form-item>
			 
				<!-- <el-form-item>
					<el-tag class="ml-2" type="success" style=" margin-right: 20px;">体检状态</el-tag>
					<el-radio-group v-model="searchInfo.status">
						<el-radio :label="1">待检</el-radio>
						<el-radio :label="2">已检</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item>
				 
					<el-button type="primary" style="margin-left: 20px;" @click="GetList">搜索</el-button>
				</el-form-item>
		
			</el-row>
			 
		</div>
		<el-table  :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="100" />
			<el-table-column prop="org_name" label="体检机构名称" >
				<template #default="scope">
					 <span v-if="scope.row.org_name">{{scope.row.org_name}}</span>
					 <span v-else style="color: #ccc;">暂无</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="体检人姓名" />
			<el-table-column prop="id_card_num" label="证件号" />
			<el-table-column prop="type" label="体检类型">
			<template #default="scope">
				 <el-tag v-if="scope.row.type==1" class="ml-2" type="success">健康证</el-tag>
				 <el-tag v-if="scope.row.type==2"  class="ml-2" type="warning">老年人</el-tag>
			</template>
			</el-table-column>
			<el-table-column prop="status" label="预约状态" width="100">
			<template #default="scope">
				 <el-tag v-if="scope.row.status==0" class="ml-2" type="info">取消</el-tag>
				 <el-tag v-if="scope.row.status==1"  class="ml-2" type="success">待检</el-tag>
				 <el-tag v-if="scope.row.status==2"  class="ml-2" type="warning">已体检</el-tag>
			</template>
			</el-table-column>
			<el-table-column prop="fee_type" label="收费状态" width="100">
			<template #default="scope">
				 <el-tag v-if="scope.row.fee_type==0" class="ml-2" type="success">免费</el-tag>
				 <el-tag v-if="scope.row.fee_type==1"  class="ml-2" type="info">收费</el-tag>
			</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button type="primary" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage,ElMessageBox
	} from 'element-plus'
	import {
		GetHealthOrganizationEnableList,
		 GetAppointmentList,DelAppointment
	} from '@/api/api.js'
	import { useRoute } from 'vue-router'
	const route = useRoute()
	const calendarId = route.query.calendarId  //预约的体检日历id

	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let searchInfo = ref({
		dateRange: [],
		orgId: '',
		status:'',
		userinfo:'',
		calendarId:calendarId?calendarId:''
	})
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	
	//获取列表
	const GetList=()=>{
		loading.value = true
		GetAppointmentList({
		page: currentPage.value,
		pageSize: pageSize.value,
		searchInfo: searchInfo.value,
	}).then(res => {
		loading.value = false
			if (res.status) {
				 tableData.value = res.data.list
				 total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}
		
		})
	}
	let org_list = ref([]) //机构列表
	const getHealthOrganizationEnableList = () => {
		GetHealthOrganizationEnableList().then(res => {
			if (res.status) {
				org_list.value = res.data
				if (res.data.length == 1) {
					searchInfo.value.orgId = res.data[0].id
				}
			} else {
				ElMessage.error(res.msg)
			}
	
		})
	}
	const del=(id)=>{
		ElMessageBox.confirm('确认删除此记录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				loading.value = true
				DelAppointment({id:id}).then(res => {
					loading.value = false
					if (res.status) {
					 GetList()
					} else {
						ElMessage.error(res.msg)
					}
					
				})
			})
		
	}
	onMounted(() => {
		getHealthOrganizationEnableList()
		GetList()
	})
</script>

<style scoped>
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>