381 lines
10 KiB
Vue
381 lines
10 KiB
Vue
<template>
|
|
<div class="container-wrapper">
|
|
<div class="content">
|
|
<div class="left">
|
|
<div class="left-top">
|
|
<Panel title="日历">
|
|
<Calendar @date-click="selectDate"></Calendar>
|
|
</Panel>
|
|
</div>
|
|
<div class="left-bottom">
|
|
<Panel title="医生列表">
|
|
<div class="panel-content" style="display: flex;flex-direction: column;height: 100%">
|
|
<div class="search" style="display: flex">
|
|
<el-input style="height: 100%" v-model="keyword" placeholder="搜索医生姓名"
|
|
@keydown.enter="initDoctor" :prefix-icon="Search"></el-input>
|
|
<span class="default-btn" @click="allList">全部</span>
|
|
</div>
|
|
<div class="content_list" style="padding: 0 24px">
|
|
<ul class="role_list">
|
|
<el-scrollbar style="height: 100%">
|
|
<li :class="{active:isShowNum==-1}" @click="changeRole(null,-1)">全部</li>
|
|
<li v-for="(item, index) in roleList" :key="index"
|
|
:class="{active:isShowNum==index}" @click="changeRole(item,index)">
|
|
<span class="name">{{ item.name }}</span>
|
|
<span class="section_name">{{ item.sectionNames }}</span>
|
|
<span v-if="dateName" class="btn" @click="openDialog(item,index)"
|
|
@mouseover="isShow = index"
|
|
@mouseleave="isShow = -1">
|
|
<img v-if="isShow==index" src="/static/images/registration/3-active.png"
|
|
style="width: 15px;height: 14px;margin-right: 8px" alt="">
|
|
<img v-else src="/static/images/registration/3.png" alt=""
|
|
style="width: 15px;height: 14px;margin-right: 8px">
|
|
|
|
{{ dateName ? dateName : '挂号' }}
|
|
</span>
|
|
</li>
|
|
</el-scrollbar>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<Panel title="挂号列表">
|
|
<div class="right-content">
|
|
<div class="top">
|
|
<div class="date">
|
|
<el-date-picker
|
|
v-model="selectedDate"
|
|
type="daterange"
|
|
range-separator="-"
|
|
@change="handleDateChange"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="middle">
|
|
<List :patientList="patientList" @rowClick="rowClick"></List>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="page_btn_list">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:page-size="size"
|
|
:current-page="page"
|
|
:total="total"
|
|
@current-change="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
<Edit v-model="dateName" ref="editRef" @close="getPatientList"></Edit>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {nextTick, onMounted, ref} from 'vue'
|
|
import Picker from "@/components/Picker.vue";
|
|
import Mask from "@/components/common/Mask.vue";
|
|
import Edit from "@/components/registration/Edit.vue";
|
|
import List from "@/components/registration/List.vue";
|
|
import {post} from "@/utils/request";
|
|
import {getEndOfDay, getToday, formatDateArray, getPrevious30Days} from "@/utils/dateUtils.ts";
|
|
import Calendar from "@/components/common/Calendar.vue";
|
|
import Panel from "@/components/common/Panel.vue";
|
|
import {apiConfig} from "@/assets/config/apiConfig.ts";
|
|
import {Search} from "@element-plus/icons-vue";
|
|
|
|
const dateName = ref<any>('挂号')
|
|
const selectDate = (date: any) => {
|
|
console.log(date, 'date')
|
|
dateName.value = getActionText(date)
|
|
}
|
|
const getActionText = (date: string) => {
|
|
const today = new Date();
|
|
const selectedDate = new Date(date);
|
|
//如果是昨天及以前,返回空
|
|
if (
|
|
selectedDate.getFullYear() < today.getFullYear() ||
|
|
selectedDate.getMonth() < today.getMonth() ||
|
|
selectedDate.getDate() < today.getDate()
|
|
) {
|
|
return ''
|
|
} else if (
|
|
selectedDate.getFullYear() === today.getFullYear() &&
|
|
selectedDate.getMonth() === today.getMonth() &&
|
|
selectedDate.getDate() === today.getDate()
|
|
) {
|
|
return '挂号'; // 如果是今天
|
|
} else {
|
|
return '预约'; // 如果是明天及以后
|
|
}
|
|
};
|
|
const isShowNum = ref(-1)
|
|
const roleList = ref<any>([])
|
|
|
|
onMounted(() => {
|
|
selectedDate.value = [getPrevious30Days(), getToday().end]
|
|
initDoctor()
|
|
getPatientList()
|
|
doctorId.value = null
|
|
})
|
|
const keyword = ref<any>('');
|
|
|
|
const initDoctor = () => {
|
|
let query = {
|
|
keyword: keyword.value,
|
|
role: 1
|
|
}
|
|
post(apiConfig.OrganizationMemberSearch, {query: query}).then((res: any) => {
|
|
roleList.value = res
|
|
})
|
|
}
|
|
const patientList = ref<any>([])
|
|
const selectedDate = ref<any>([])
|
|
const handleDateChange = (date: any[]) => {
|
|
selectedDate.value = formatDateArray(date)
|
|
if (selectedDate.value[0] == selectedDate.value[1]) {
|
|
selectedDate.value[1] = getEndOfDay(selectedDate.value[1]); // 输出今天 23:59
|
|
}
|
|
getPatientList()
|
|
}
|
|
const getPatientList = () => {
|
|
id.value = null
|
|
post('registration/list', {
|
|
page: page.value,
|
|
size: size.value,
|
|
startDate: selectedDate.value[0],
|
|
endDate: selectedDate.value[1],
|
|
doctorId: doctorId.value,
|
|
}).then((res: any) => {
|
|
patientList.value = res.list
|
|
total.value = res.total_count
|
|
})
|
|
}
|
|
const total = ref(0)
|
|
const size = ref(20)
|
|
const page = ref(1)
|
|
const changePage = (value: any) => {
|
|
page.value = value
|
|
getPatientList()
|
|
}
|
|
const id = ref<any>('')
|
|
const rowClick = (row: any) => {
|
|
id.value = row.id
|
|
nextTick(() => {
|
|
editRef.value?.init(row.organizationDoctorId, row.id)
|
|
})
|
|
}
|
|
const isShow = ref(-1)
|
|
const editRef = ref<any>('')
|
|
const openDialog = (item: any, index: any) => {
|
|
isShow.value = index
|
|
nextTick(() => {
|
|
editRef.value?.init(item.id)
|
|
})
|
|
}
|
|
const close = () => {
|
|
id.value = null
|
|
getPatientList()
|
|
}
|
|
const reset = () => {
|
|
keyword.value = ''
|
|
getPatientList()
|
|
}
|
|
const doctorId = ref(null)
|
|
const changeRole = (item: any, index: any) => {
|
|
isShowNum.value = index
|
|
doctorId.value = item.id
|
|
getPatientList()
|
|
}
|
|
const allList = () => {
|
|
selectedDate.value = [getPrevious30Days(), getToday().end]
|
|
isShowNum.value = -1
|
|
doctorId.value = null
|
|
getPatientList()
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.container-wrapper {
|
|
background: none;
|
|
height: 100%;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.content {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.left {
|
|
height: 100%;
|
|
width: 382px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.left-top {
|
|
height: 399px;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.left-bottom {
|
|
flex: 1;
|
|
min-height: 0;
|
|
margin-top: 20px;
|
|
|
|
.panel-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.search {
|
|
padding: 0 24px;
|
|
height: 42px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.content_list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
margin-top: 10px;
|
|
|
|
.role_list {
|
|
height: 100%;
|
|
|
|
li {
|
|
height: 50px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
padding: 0 10px;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: rgba(#4D6DE4, 0.3);
|
|
}
|
|
|
|
.name {
|
|
color: #999;
|
|
width: 100px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.section_name {
|
|
flex: 1;
|
|
color: #999;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
width: 78px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #4D6DE4;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #4D6DE4;
|
|
font-style: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
background: #4D6DE4;
|
|
color: #FFF;
|
|
border: 1px solid #fff;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.active {
|
|
background: #4D6DE4 !important;
|
|
|
|
.name {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.section_name {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: 20px;
|
|
flex: 1;
|
|
height: 100%;
|
|
min-width: 0;
|
|
|
|
.right-content {
|
|
padding-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.top {
|
|
padding-right: 24px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.middle {
|
|
flex: 1;
|
|
min-height: 0;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.date {
|
|
margin: 30px auto 0;
|
|
height: 60px;
|
|
}
|
|
|
|
.list {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: #FFF;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
position: relative;
|
|
border-top: 1px solid #EEE;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.default-btn {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
</style> |