版本更新
This commit is contained in:
Zhang.WH
@@ -0,0 +1,337 @@
|
||||
<!--
|
||||
* @Author: hezhibo@bjgoodwill.com
|
||||
* @Date: 2025-03-10 17:21:55
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="hospitalizationSettlementCancel-container">
|
||||
<div class="operate-container">
|
||||
<el-space>
|
||||
<el-input v-model="queryForm.searchValue" style="width: 304px" placeholder="请输入" class="searchValue"
|
||||
@keyup.enter="queryPatient" clearable>
|
||||
<template #prepend>
|
||||
<el-select v-model="queryForm.searchType" placeholder="" style="width: 115px">
|
||||
<el-option label="发票号" value="receipt" />
|
||||
<el-option label="住院号" value="inpatientCode" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button style="margin-right: 0px" @click="queryPatient">查询</el-button>
|
||||
</el-space>
|
||||
<el-space>
|
||||
<el-button style="margin-right: 0px" @click="goSettleCancel"
|
||||
:disabled="!currentPatient?.visitCode">取消结算</el-button>
|
||||
</el-space>
|
||||
</div>
|
||||
<!-- // TODO 患者信息 -->
|
||||
<div>患者信息</div>
|
||||
<div class="billData-container">
|
||||
<el-table :data="queryPpatientList" height="186px" show-overflow-tooltip :style="{ height: '100%' }">
|
||||
<el-table-column prop="name" label="姓名" min-width="131" />
|
||||
<el-table-column prop="inpatientCode" label="住院号" width="167" />
|
||||
<el-table-column prop="settleNo" label="发票号" min-width="210" />
|
||||
|
||||
<el-table-column prop="feeTypeName" label="类别" min-width="155" />
|
||||
<el-table-column prop="settleTypeName" label="结算类型" min-width="174" />
|
||||
<el-table-column prop="createdStaffName" label="结算人" min-width="145" />
|
||||
<template v-slot:empty>
|
||||
<div>
|
||||
<div class="empty-text-sty">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pay-container">
|
||||
<div class="payList-container">
|
||||
<div class="totals">
|
||||
<el-space class="costcollect" :size="32">
|
||||
<span>费用总额: <span class="costValue">{{ econDetailsInfo.totalAmount }}</span></span>
|
||||
<span>预缴金: <span class="costValue">{{ econDetailsInfo.prepayAmount }}</span></span>
|
||||
<span>已补收: <span class="costValue">{{ econDetailsInfo.payAmount }}</span></span>
|
||||
</el-space>
|
||||
</div>
|
||||
<div class="payListData-container">
|
||||
<div>
|
||||
<el-table :data="econDetailsInfo.bpubTypeList" height="186px" show-overflow-tooltip
|
||||
:style="{ height: '100%' }">
|
||||
<el-table-column prop="nameLeft" label="缴费方式" width="165" />
|
||||
<el-table-column prop="costRight" label="金额" width="159" align="right" header-align="left" />
|
||||
<template v-slot:empty>
|
||||
<div>
|
||||
<div class="empty-text-sty">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="econDetailsInfo.econIpdSettlePayAsToList" height="186px" show-overflow-tooltip
|
||||
:style="{ height: '100%' }">
|
||||
<el-table-column prop="paywayName" label="缴费方式" width="165" />
|
||||
<el-table-column prop="amount" label="金额" min-width="159" align="right" header-align="left" />
|
||||
<el-table-column prop="returnWay" label="返还方式" min-width="145">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.returnWay" placeholder="返还方式" style="width: 100%">
|
||||
<el-option label="转押金" value="1" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-slot:empty>
|
||||
<div>
|
||||
<div class="empty-text-sty">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="currentbill-container">
|
||||
<div class="totals">
|
||||
<span class="countTitle">退还金额: <span class="countValue">1500.00</span></span>
|
||||
</div>
|
||||
<div class="eceivableDetails">
|
||||
<div>
|
||||
<span>转押金：</span>
|
||||
<span>2490.00</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>微信：</span>
|
||||
<span>200.00</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>支付宝：</span>
|
||||
<span>1500.00</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>银行卡：</span>
|
||||
<span>2000.00</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>现金：</span>
|
||||
<span>-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup >
|
||||
import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import dayjs from 'dayjs'
|
||||
import { round } from 'lodash-es'
|
||||
const emits = defineEmits([])
|
||||
const props = defineProps({})
|
||||
const state = reactive({})
|
||||
/* 查询患者 */
|
||||
const queryForm = reactive({
|
||||
searchValue: '',
|
||||
ward: '',
|
||||
inPatientId: '',
|
||||
searchType: 'receipt',
|
||||
})
|
||||
const patientsBarRef = ref()
|
||||
// const queryPpatientList = ref<Array<any>>([])
|
||||
// const currentPatient = ref<Partial<any>>() // 当前
|
||||
/* 查询患者 */
|
||||
const queryPatient = () => {
|
||||
// TODO 查询患者接口
|
||||
//1. 根据输入精确匹配，根据主索引查找患者时，如果有多条住院记录，弹出患者选择控件
|
||||
|
||||
}
|
||||
|
||||
/* 患者费用信息 */
|
||||
// const econDetailsInfo = ref<{
|
||||
// bpubTypeList: []
|
||||
// econIpdSettlePayAsToList: Array<any>
|
||||
// payAmount: 0
|
||||
// prepayAmount: 0
|
||||
// totalAmount: 0
|
||||
// }>({
|
||||
// bpubTypeList: [],
|
||||
// econIpdSettlePayAsToList: [],
|
||||
// payAmount: 0,
|
||||
// prepayAmount: 0,
|
||||
// totalAmount: 0,
|
||||
// })
|
||||
const getEconDetails = () => {
|
||||
if (currentPatient.value && currentPatient.value.settleId) {
|
||||
|
||||
}
|
||||
}
|
||||
/* 弹窗 */
|
||||
/* 患者列表，弹窗 */
|
||||
const patientListDialogVisible = ref(false)
|
||||
/* 结算取消 */
|
||||
|
||||
const goSettleCancel = () => {
|
||||
if (currentPatient.value?.visitCode) {
|
||||
ElMessage({
|
||||
message: '结算取消成功！',
|
||||
type: 'success',
|
||||
grouping: true,
|
||||
showClose: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
// onBeforeMount(() => {
|
||||
|
||||
// })
|
||||
// onMounted(() => {
|
||||
|
||||
// })
|
||||
defineExpose({ state })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.hospitalizationSettlementCancel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: '思源黑体 CN';
|
||||
font-weight: 400;
|
||||
|
||||
.operate-container {
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #e9f3f9;
|
||||
flex: none;
|
||||
|
||||
:deep(.el-input) {
|
||||
.el-input-group__prepend {
|
||||
div.el-select {
|
||||
.el-select__wrapper {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.patientBar {
|
||||
box-shadow: 0px 2px 2px 0px rgba(199, 224, 240, 0.4);
|
||||
background: #ffffff;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.billData-container {
|
||||
height: 154px;
|
||||
padding: 16px;
|
||||
border-bottom: 8px solid #f1faff;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.pay-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
height: 100px;
|
||||
|
||||
.totals {
|
||||
height: 56px;
|
||||
border-bottom: 2px solid #f1faff;
|
||||
box-shadow: 0px 1px 1px 0px rgba(181.05, 210.63, 255, 0.25);
|
||||
line-height: 56px;
|
||||
padding: 0 16px;
|
||||
|
||||
.costcollect {
|
||||
span {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.costValue {
|
||||
color: #ff8616 !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.countTitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.countValue {
|
||||
font-size: 32px;
|
||||
color: #e95657;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.payList-container {
|
||||
flex: auto;
|
||||
width: 100px;
|
||||
|
||||
.payListData-container {
|
||||
width: calc(100% - 32px);
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
height: calc(100% - 74px);
|
||||
|
||||
>div:first-child {
|
||||
width: 324px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
>div:nth-child(2) {
|
||||
width: calc(100% - 340px);
|
||||
margin-left: 16px;
|
||||
flex: auto;
|
||||
|
||||
.el-table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currentbill-container {
|
||||
border-left: 8px solid #f1faff;
|
||||
width: 380px;
|
||||
flex: none;
|
||||
|
||||
// border: 1px solid #DDDDDD;
|
||||
.eceivableDetails {
|
||||
padding-top: 29px;
|
||||
|
||||
>div {
|
||||
border-bottom: 2px solid #eeeeee;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 24px;
|
||||
font-size: 22px;
|
||||
|
||||
span:first-child {
|
||||
width: 138px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
// span:nth-child(2) {
|
||||
// color: #333333;
|
||||
// }
|
||||
span {
|
||||
&:nth-child(2) {
|
||||
color: #333333;
|
||||
min-width: 120px;
|
||||
text-align: right;
|
||||
// border: 1px solid red
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user