YiJiYuYue-NanShanFuYou/YiJi-admin/src/views/AppointmentMngr/TimePeriodMngr.vue

<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.department_id" placeholder="选择科室"
						 >
						<el-option v-for="(item,index) in EnableDepartmentList" :key="index"
							:label="item.department_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-button   @click="GetList()" style="margin-left: 10px;">搜索</el-button>
				<el-button type="primary" @click="Add()" style="margin-left: 10px;">添加</el-button>
			</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="department_name" label="科室名称" />
			<el-table-column prop="period_name" label="时间段名称" />
			<el-table-column prop="period_begin_time" label="开始时间" />
			<el-table-column prop="period_end_time" label="结束时间" />
			<el-table-column prop="period_deadline" label="预约截止时间" />
			<el-table-column prop="period_status" label="状态" >
				<template #default="scope">
					 <el-tag v-if="scope.row.period_status==1"  class="ml-2" type="success">正常</el-tag>
					 <el-tag v-if="scope.row.period_status==0"  class="ml-2" type="danger">关闭</el-tag>
				</template>
			</el-table-column>
		 
			<el-table-column prop="" label="操作">
				<template #default="scope">
					 <el-button type="primary" @click="Edit(scope.row)" size="small" style="margin-left: 10px;">修改</el-button>
					 <el-button type="danger" @click="Del(scope.row.id)" size="small" style="margin-left: 10px;">删除</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>
		<el-dialog v-model="dialogVisible" title="时间段" width="40%">
			<el-form :model="PeriodInfo" label-width="100px" v-loading="loading" style="padding-right: 40px;">
				<el-form-item label="时间段名称:">
					<el-input v-model="PeriodInfo.period_name" />
				</el-form-item>
				<el-form-item label="时间段:">
				<el-time-picker v-model="PeriodInfo.timeRange" value-format='HH:mm:ss' is-range range-separator="至"
					start-placeholder="开始时间" end-placeholder="结束时间" @change="changeTimeRange()" />
				</el-form-item>
				<el-form-item label="预约截止时间:">
					<el-time-picker v-model="PeriodInfo.period_deadline" value-format='HH:mm:ss' placeholder="预约截止时间" />
				</el-form-item>
				<el-form-item label="状态:">
					<el-switch v-model="PeriodInfo.period_status" size="large" active-text="正常" inactive-text="关闭"
						active-value="1" inactive-value="0" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="Save">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		 TimePeriodSave,TimePeriodGetList,GetEnableDepartmentList,TimePeriodDel
	} from '@/api/api.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	
	let loading=ref(false);
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let EnableDepartmentList = ref([]);
	const GetDepartmentEnableList = () => {
		loading.value = true
		GetEnableDepartmentList({}).then(res => {
			loading.value = false
			if (res.status) {
				EnableDepartmentList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}
	
		})
	}
 
	let dialogVisible=ref(false);
	const GetList=()=>{
		TimePeriodGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo:searchInfo.value
			}).then(res => {
			tableData.value=res.data.list
      total=res.data.count;
		})
	}
	
	const Save=()=>{
		if(PeriodInfo.value.timeRange.length!==2){
			ElMessage.error("请选择时间段")
			return false
		}
		if(PeriodInfo.value.period_name==''){
			ElMessage.error("请输入名称")
			return false
		}
		if(PeriodInfo.value.period_deadline==''){
			ElMessage.error("请输入截止时间")
			return false
		}
		PeriodInfo.value.period_begin_time=PeriodInfo.value.timeRange[0]
		PeriodInfo.value.period_end_time=PeriodInfo.value.timeRange[1]
		
		loading.value = true
		TimePeriodSave({PeriodInfo:PeriodInfo.value}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value=false
			 GetList()
			} else {
				ElMessage.error(res.msg)
			}
		
		})
	}
	let searchInfo=ref({
		department_id:null
	})
	let PeriodInfo=ref({
		id:0,
		period_name:'',
		period_begin_time:'',
		period_end_time:'',
		period_deadline:'',
		period_status:"1",
		timeRange:[]
	});
	const Edit=(row)=>{
		let data=row
		
		dialogVisible.value=true
		PeriodInfo.value=data
		PeriodInfo.value.timeRange=[PeriodInfo.value.period_begin_time,PeriodInfo.value.period_end_time]
		PeriodInfo.value.period_status=data.period_status.toString()
		console.log(PeriodInfo.value)
	}
	const Add=()=>{
		dialogVisible.value=true
		PeriodInfo.value={
			id:0,
			period_name:'',
			period_begin_time:'',
			period_end_time:'',
			period_deadline:'',
			period_status:"1",
			timeRange:[]
		}
 
	}
	const Del = (id) => {
		ElMessageBox.confirm(
				'确定删除吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				loading.value = true
				TimePeriodDel({
					id: id,
				}).then(res => {
					loading.value = false
					if (res.status) {
						dialogVisible.value = false
						GetList()
					} else {
						ElMessage.error(res.msg)
					}
	
				})
			})
	
	}
	//选定时间范围
	const changeTimeRange=()=>{
		
		 PeriodInfo.value.period_deadline=PeriodInfo.value.timeRange[1]
			 
	 
	}
	onMounted(()=>{
		GetList()
		GetDepartmentEnableList()
	})
</script>

<style>
</style>