323 lines
7.8 KiB
Vue
323 lines
7.8 KiB
Vue
<template>
|
|
<Panel title="收费队列">
|
|
<template #tools>
|
|
<el-button type="primary" plain size="small">新增患者</el-button>
|
|
<el-button type="primary" size="small" plain @click="setDate">
|
|
{{ selectedDateStr }}
|
|
<el-icon class="el-icon--right">
|
|
<CaretBottom/>
|
|
</el-icon>
|
|
</el-button>
|
|
<el-date-picker
|
|
v-model="selectedDate"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
ref="datePickerRef"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
</template>
|
|
<template #default>
|
|
<div class="container">
|
|
<div class="tabs">
|
|
<span v-for="(item,index) in statusList " :key="index" :class="query.status == item.value ? 'tabs-item' : ''"
|
|
@click="tab(item)">{{ item.label }} {{ item.num }}
|
|
</span>
|
|
</div>
|
|
<div class="search">
|
|
<el-input v-model="query.keyword" style="height: 100%;width: 100%" placeholder="根据姓名搜索"/>
|
|
<!-- <el-button type="success" @click="addChargeOrder" size="small">+收费</el-button>-->
|
|
</div>
|
|
<div class="list">
|
|
<el-scrollbar>
|
|
<ul v-loading="loading">
|
|
<li class="list-item" :class="curItem.id == item.id ? 'active' : ''"
|
|
v-for="(item, index) in ChargeQueueList"
|
|
:key="index" @click="clickItem(item)">
|
|
<span>
|
|
<img v-if="item.patientGender=='1'" class="avatar"
|
|
src="/static/images/outpatient/man.png"
|
|
alt="头像"/>
|
|
<img v-if="item.patientGender=='2'" class="avatar"
|
|
src="/static/images/outpatient/women.png"
|
|
alt="头像"/>
|
|
</span>
|
|
<span class="item_name">{{ item.patientName }}</span>
|
|
<span class="item_time">
|
|
{{ formatListTime(item.createTime) || '-' }}
|
|
</span>
|
|
<span :class="[item.status == 0 ?'status-active':'']">{{ item.status == 0 ? '未收' : '已收' }}</span>
|
|
</li>
|
|
</ul>
|
|
</el-scrollbar>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Panel>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {onMounted, ref, watch} from "vue";
|
|
import {post} from "@/utils/request.ts";
|
|
import Panel from "@/components/common/Panel.vue";
|
|
import {formatListTime, getCurrentDate, getEndOfDay, getToday} from "@/utils/dateUtils.ts";
|
|
import {CaretBottom} from "@element-plus/icons-vue";
|
|
import {apiConfig} from "@/assets/config/apiConfig.ts";
|
|
|
|
const curItem = ref<any>({});
|
|
const emit = defineEmits(['clickItem'])
|
|
const clickItem = (item: any) => {
|
|
curItem.value = item
|
|
emit('clickItem', item, query.value.status);
|
|
}
|
|
const loading= ref(false)
|
|
const ChargeQueueList = ref<any>([]);
|
|
|
|
const addChargeOrder = () => {
|
|
const newOrder = {
|
|
id: -1,
|
|
patientName: "匿名患者",
|
|
payType: -1,
|
|
}
|
|
if (ChargeQueueList.value[0]?.id == -1) {
|
|
return
|
|
}
|
|
ChargeQueueList.value.unshift(newOrder)
|
|
clickFirst()
|
|
}
|
|
const clickFirst = () => {
|
|
clickItem(ChargeQueueList.value[0])
|
|
}
|
|
const selectedDate: any = ref('')
|
|
const query = ref({
|
|
pageSize: 20,
|
|
pageNum: 1,
|
|
keyword: "",
|
|
status: 0,
|
|
beginTime: selectedDate.value,
|
|
endTime: getEndOfDay(selectedDate.value)
|
|
})
|
|
const init = async () => {
|
|
selectedDateStr.value = setDateTip()
|
|
query.value.beginTime = selectedDate.value
|
|
query.value.endTime = getEndOfDay(selectedDate.value)
|
|
loading.value = true
|
|
try {
|
|
let data:any = await post(apiConfig.recordGetChargeQueue, {query: query.value}, {catch_error: true})
|
|
ChargeQueueList.value = data.list
|
|
}
|
|
catch {
|
|
}
|
|
finally {
|
|
loading.value = false
|
|
}
|
|
getTipCount()
|
|
|
|
}
|
|
const delDraft = () => {
|
|
ChargeQueueList.value.shift();
|
|
clickFirst()
|
|
}
|
|
defineExpose({delDraft, init})
|
|
onMounted(() => {
|
|
selectedDate.value = getCurrentDate()
|
|
init()
|
|
})
|
|
const statusList = ref([
|
|
{
|
|
label: '待收',
|
|
num: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
label: '已收',
|
|
num: 0,
|
|
value: 1
|
|
},
|
|
])
|
|
const tab = (item: any) => {
|
|
query.value.status = item.value
|
|
init()
|
|
}
|
|
const getTipCount = () => {
|
|
post('statistics/getTipCount', {
|
|
beginTime: selectedDate.value,
|
|
endTime: getEndOfDay(selectedDate.value)
|
|
}).then((res: any) => {
|
|
statusList.value[0].num = res.unchargedCount
|
|
statusList.value[1].num = res.chargedCount
|
|
})
|
|
}
|
|
|
|
const selectedDateStr: any = ref('')
|
|
const datePickerRef = ref()
|
|
const setDate = function () {
|
|
if (datePickerRef.value) {
|
|
datePickerRef.value.handleOpen()
|
|
}
|
|
}
|
|
const setDateTip = () => {
|
|
const seletctedDateObj = new Date(selectedDate.value);
|
|
//如果选择的日期是今天
|
|
if (seletctedDateObj.getFullYear() == new Date().getFullYear() && seletctedDateObj.getMonth() == new Date().getMonth() && seletctedDateObj.getDate() == new Date().getDate()) {
|
|
return '今天'
|
|
}
|
|
if (seletctedDateObj.getFullYear() == new Date().getFullYear() && seletctedDateObj.getMonth() == new Date().getMonth() && seletctedDateObj.getDate() == new Date().getDate() - 1) {
|
|
return '昨天'
|
|
}
|
|
//如果为今年
|
|
if (seletctedDateObj.getFullYear() == new Date().getFullYear()) {
|
|
return `${seletctedDateObj.getMonth() + 1}-${seletctedDateObj.getDate()}`
|
|
}
|
|
return seletctedDateObj.getFullYear();
|
|
|
|
|
|
}
|
|
watch(() => selectedDate.value, (newValue, oldValue) => {
|
|
if (newValue == oldValue) {
|
|
return;
|
|
}
|
|
if (newValue == null) {
|
|
return;
|
|
}
|
|
init()
|
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column; // 确保子元素垂直排列
|
|
width: 320px;
|
|
|
|
.search {
|
|
padding: 16px;
|
|
height: 74px;
|
|
width: 100%;
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
.list-title {
|
|
height: 48px;
|
|
background: #F5FAFF;
|
|
padding: 0 27px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: rgba(34, 42, 57, 0.8);
|
|
font-style: normal;
|
|
|
|
span {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
flex: 1;
|
|
min-height: 0;
|
|
|
|
.list-item {
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 18px;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(34, 42, 57, 0.7);
|
|
font-style: normal;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.avatar {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
|
|
|
|
&:hover {
|
|
background: rgba(#4D6DE4, 0.1);
|
|
}
|
|
|
|
.item_name {
|
|
flex: 1.5;
|
|
white-space: nowrap; // 防止文本换行
|
|
overflow: hidden; // 隐藏溢出的文本
|
|
text-overflow: ellipsis; // 显示省略号
|
|
}
|
|
|
|
.item_time {
|
|
flex: 2;
|
|
white-space: nowrap; // 防止文本换行
|
|
overflow: hidden; // 隐藏溢出的文本
|
|
text-overflow: ellipsis; // 显示省略号
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.status-active {
|
|
font-weight: bold;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.active {
|
|
color: #fff;
|
|
background: #4D6DE4;
|
|
|
|
&:hover {
|
|
background: #4D6DE4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
height: 27px;
|
|
border-bottom: 1px solid #EAEAEC;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
font-style: normal;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 67px;
|
|
|
|
span {
|
|
width: 66px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabs-item {
|
|
border-bottom: 2px solid #4D6DE4;
|
|
color: #4D6DE4;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-input--prefix) {
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50px;
|
|
}
|
|
</style> |