361 lines
8.6 KiB
Vue
361 lines
8.6 KiB
Vue
<template>
|
|
<Panel title="收费队列">
|
|
<template #tools>
|
|
<div @click="setDate" class="date-btn">
|
|
<span>筛选</span>
|
|
<el-icon style="margin-left: 21px">
|
|
<Calendar/>
|
|
</el-icon>
|
|
</div>
|
|
<el-date-picker
|
|
v-model="selectedDate"
|
|
type="daterange"
|
|
@change="dateChangeHandler"
|
|
placeholder="选择日期"
|
|
ref="datePickerRef"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
</template>
|
|
<template #default>
|
|
<div class="container" style="display: flex;flex-direction: column;height: 100%">
|
|
<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">
|
|
<div class="search-input">
|
|
<el-input
|
|
v-model="query.keyword"
|
|
style="height: 100%;width: 100%"
|
|
placeholder="根据姓名搜索"
|
|
@input="searchInput"
|
|
>
|
|
<template #prefix>
|
|
<el-icon>
|
|
<Search/>
|
|
</el-icon>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
<div class="add" @click="addChargeOrder" @mousemove="selected=true" @mouseleave="selected=false">
|
|
<el-icon style="margin-right: 7px">
|
|
<template #default>
|
|
<img style="width: 26px ;height: 22px" src="/static/images/charge/1-active.png" alt="" srcset="">
|
|
</template>
|
|
</el-icon>
|
|
新增患者
|
|
</div>
|
|
<!-- <el-button type="success" @click="addChargeOrder" size="small">+收费</el-button>-->
|
|
</div>
|
|
<div class="list" v-loading="loading">
|
|
<ul style="height: 100%">
|
|
<el-scrollbar style="height: 100%">
|
|
<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>
|
|
</el-scrollbar>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Panel>
|
|
<Edit ref="editRef" @close="init"></Edit>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {nextTick, 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 {Search, Calendar} from "@element-plus/icons-vue";
|
|
import {apiConfig} from "@/assets/config/apiConfig.ts";
|
|
import Edit from "@/components/registration/Edit.vue";
|
|
|
|
const curItem = ref<any>({});
|
|
const emit = defineEmits(['clickItem', 'getStatus'])
|
|
const clickItem = (item: any) => {
|
|
curItem.value = item
|
|
emit('clickItem', item, query.value.status);
|
|
}
|
|
const loading = ref(false)
|
|
const ChargeQueueList = ref<any>([]);
|
|
|
|
const editRef = ref()
|
|
const addChargeOrder = () => {
|
|
nextTick(() => {
|
|
editRef.value?.init(null, null)
|
|
})
|
|
}
|
|
const clickFirst = () => {
|
|
clickItem(ChargeQueueList.value[0])
|
|
}
|
|
const selectedDate: any = ref()
|
|
const query = ref({
|
|
pageSize: 20,
|
|
pageNum: 1,
|
|
keyword: "",
|
|
status: 0,
|
|
beginTime: "",
|
|
endTime: ""
|
|
})
|
|
const init = async () => {
|
|
query.value.beginTime = selectedDate.value[0]
|
|
query.value.endTime = getEndOfDay(selectedDate.value[1])
|
|
loading.value = true
|
|
try {
|
|
let data: any = await post(apiConfig.RecordGetChargeQueue, {query: query.value}, {catch_error: true})
|
|
ChargeQueueList.value = data.list
|
|
} catch {
|
|
ChargeQueueList.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
getTipCount()
|
|
}
|
|
const delDraft = () => {
|
|
ChargeQueueList.value.shift();
|
|
clickFirst()
|
|
}
|
|
defineExpose({delDraft, init})
|
|
onMounted(() => {
|
|
let today = getToday()
|
|
selectedDate.value = [today.start, getEndOfDay(today.end)]
|
|
init()
|
|
})
|
|
const statusList = ref([
|
|
{
|
|
label: '待收',
|
|
num: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
label: '已收',
|
|
num: 0,
|
|
value: 1
|
|
},
|
|
{
|
|
label: '已退',
|
|
num: 0,
|
|
value: 2
|
|
}
|
|
])
|
|
const tab = (item: any) => {
|
|
query.value.status = item.value
|
|
curItem.value = {}
|
|
emit('getStatus', item.value)
|
|
init()
|
|
}
|
|
const getTipCount = () => {
|
|
post('statistics/getTipCount', {
|
|
beginTime: query.value.beginTime,
|
|
endTime: query.value.endTime
|
|
}).then((res: any) => {
|
|
statusList.value[0].num = res.unchargedCount
|
|
statusList.value[1].num = res.chargedCount
|
|
statusList.value[2].num = res.refundedCount
|
|
})
|
|
}
|
|
|
|
const datePickerRef = ref()
|
|
const setDate = function () {
|
|
if (datePickerRef.value) {
|
|
datePickerRef.value.handleOpen()
|
|
}
|
|
}
|
|
const dateChangeHandler = (seDate: any) => {
|
|
let date = formatListTime(seDate);
|
|
query.value.beginTime = date[0]
|
|
query.value.endTime = getEndOfDay(seDate)
|
|
init()
|
|
}
|
|
const searchInput = (v: any) => {
|
|
query.value.keyword = v
|
|
init()
|
|
}
|
|
const selected = ref(false)
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column; // 确保子元素垂直排列
|
|
width: 320px;
|
|
|
|
.search {
|
|
padding: 16px;
|
|
height: 74px;
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.add {
|
|
width: 128px;
|
|
height: 42px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #4D6DE4;
|
|
border-radius: 6px;
|
|
margin-left: 16px;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background: rgba(#4D6DE4, 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 18px;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabs-item {
|
|
border-bottom: 2px solid #4D6DE4;
|
|
color: #4D6DE4;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.date-btn {
|
|
width: 98px;
|
|
height: 32px;
|
|
background: #FFFFFF;
|
|
border-radius: 6px;
|
|
border: 1px solid #EAEAEC;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
:deep(.el-date-editor) {
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50px;
|
|
}
|
|
</style> |