650 lines
18 KiB
Vue
650 lines
18 KiB
Vue
<template>
|
||
<div class="card-renewal-container">
|
||
<!-- 标题栏 -->
|
||
<div class="title-bar">
|
||
<h2>换卡处理</h2>
|
||
</div>
|
||
|
||
<!-- 按钮栏 - 修改为水平排放 -->
|
||
<div class="button-bar">
|
||
<el-button
|
||
type="primary"
|
||
size="large"
|
||
@click="handlePatientSearch"
|
||
:loading="loading"
|
||
icon="el-icon-search"
|
||
style="min-width: 140px;"
|
||
>
|
||
病人查询(Q)
|
||
</el-button>
|
||
|
||
<el-button
|
||
type="success"
|
||
size="large"
|
||
@click="handleConfirm"
|
||
:loading="loading"
|
||
:disabled="!patientInfo"
|
||
style="min-width: 140px;"
|
||
>
|
||
确定 (O)
|
||
</el-button>
|
||
|
||
<el-button
|
||
type="danger"
|
||
size="large"
|
||
@click="handleClose"
|
||
:disabled="loading"
|
||
style="min-width: 140px;"
|
||
>
|
||
关闭 (C)
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 查询条件 -->
|
||
<div class="search-section">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<div class="input-item">
|
||
<label>病人姓名:</label>
|
||
<el-input
|
||
v-model="searchForm.patientName"
|
||
placeholder="请输入"
|
||
@keyup.enter="handlePatientSearch"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="input-item">
|
||
<label>身份证号码:</label>
|
||
<el-input
|
||
v-model="searchForm.idCard"
|
||
placeholder="请输入"
|
||
@keyup.enter="handlePatientSearch"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="input-item">
|
||
<label>手机号码:</label>
|
||
<el-input
|
||
v-model="searchForm.phoneNumber"
|
||
placeholder="请输入"
|
||
@keyup.enter="handlePatientSearch"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<!-- 患者信息显示 -->
|
||
<div class="patient-info-section">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<label>门诊号码</label>
|
||
<div class="info-value">{{ patientInfo?.outpatientNo || '' }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<label>病人姓名</label>
|
||
<div class="info-value">{{ patientInfo?.patientName || '' }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<label>身份证号码</label>
|
||
<div class="info-value">{{ patientInfo?.idCard || '' }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" style="margin-top: 15px;">
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<label>手机号码</label>
|
||
<div class="info-value">{{ patientInfo?.phoneNumber || '' }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<label>性别</label>
|
||
<div class="info-value">{{ patientInfo?.gender || '' }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<label>年龄</label>
|
||
<div class="info-value">{{ patientInfo?.age || '' }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<!-- 新门诊号码输入 -->
|
||
<div class="new-number-section">
|
||
<div class="input-item">
|
||
<label>新门诊号码:</label>
|
||
<el-input
|
||
v-model="renewalForm.newOutpatientNo"
|
||
placeholder="请输入新门诊号码"
|
||
@keyup.enter="handleConfirm"
|
||
style="width: 250px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按钮区域已移除 -->
|
||
|
||
<!-- 患者列表对话框 -->
|
||
<el-dialog
|
||
v-model="showPatientList"
|
||
title="患者列表"
|
||
width="800px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-table
|
||
:data="patientList"
|
||
style="width: 100%"
|
||
@row-click="selectPatient"
|
||
highlight-current-row
|
||
>
|
||
<el-table-column label="序号" width="60" type="index">
|
||
</el-table-column>
|
||
<el-table-column label="病人姓名" width="120">
|
||
<template #default="scope">
|
||
{{ scope.row.patientName || scope.row.name || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="门诊号码" width="120">
|
||
<template #default="scope">
|
||
{{ scope.row.identifierNo || scope.row.cardNo || scope.row.card_number || scope.row.就诊卡号 || scope.row.outpatientNumber || scope.row.outpatientNo || scope.row.门诊号码 || scope.row.卡号 || scope.row.card || scope.row.patientNo || scope.row.patient_id || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="身份证号码" width="200">
|
||
<template #default="scope">
|
||
{{ scope.row.idCard || scope.row.id_card || scope.row.idNo || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="手机号码" width="120">
|
||
<template #default="scope">
|
||
{{ scope.row.phoneNumber || scope.row.phone || scope.row.mobile || scope.row.mobilePhone || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="性别" width="80">
|
||
<template #default="scope">
|
||
{{ scope.row.genderEnum_enumText || scope.row.gender || scope.row.sex || scope.row.性别 || scope.row.xb || scope.row.sexCode || scope.row.GENDER || scope.row.SEX || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="年龄" width="80">
|
||
<template #default="scope">
|
||
{{ scope.row.age || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="出生年月" width="120">
|
||
<template #default="scope">
|
||
{{ formatDate(scope.row.birthDate || scope.row.birthday || scope.row.出生日期) || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页组件 -->
|
||
<div style="margin-top: 15px; display: flex; justify-content: flex-end;">
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="showPatientList = false">取消</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 换卡成功提示 -->
|
||
<el-dialog
|
||
v-model="renewalSuccessVisible"
|
||
title="换卡成功"
|
||
width="400px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div style="text-align: center; padding: 20px;">
|
||
<div class="success-icon">✓</div>
|
||
<p style="margin-top: 15px; font-size: 16px;">患者换卡操作已成功完成！</p>
|
||
<p style="margin-top: 10px;">新门诊号码：{{ renewalForm.newOutpatientNo }}</p>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="renewalSuccessVisible = false; resetForm">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { doCardRenewal, getPatientList } from './components/api.js';
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({
|
||
patientName: '',
|
||
idCard: '',
|
||
phoneNumber: ''
|
||
})
|
||
|
||
// 患者信息
|
||
const patientInfo = ref(null)
|
||
|
||
// 患者列表
|
||
const patientList = ref([])
|
||
const showPatientList = ref(false)
|
||
// 分页相关状态
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(10)
|
||
const total = ref(0)
|
||
|
||
// 换卡表单
|
||
const renewalForm = reactive({
|
||
newOutpatientNo: ''
|
||
})
|
||
|
||
// 加载状态
|
||
const loading = ref(false)
|
||
|
||
// 成功弹窗显示状态
|
||
const renewalSuccessVisible = ref(false)
|
||
|
||
// 分页大小变化处理
|
||
const handleSizeChange = (newSize) => {
|
||
pageSize.value = newSize
|
||
currentPage.value = 1 // 重置为第一页
|
||
if (showPatientList.value) {
|
||
handlePatientSearch() // 重新查询
|
||
}
|
||
}
|
||
|
||
// 当前页码变化处理
|
||
const handleCurrentChange = (newPage) => {
|
||
currentPage.value = newPage
|
||
if (showPatientList.value) {
|
||
handlePatientSearch() // 重新查询
|
||
}
|
||
}
|
||
|
||
// 查询患者信息
|
||
const handlePatientSearch = async () => {
|
||
// 检查是否至少填写了一个查询条件
|
||
if (!searchForm.patientName && !searchForm.idCard && !searchForm.phoneNumber) {
|
||
ElMessage.warning('请至少输入一个查询条件')
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
try {
|
||
// 构建查询参数，包含分页信息
|
||
const queryParams = {
|
||
patientName: searchForm.patientName || '',
|
||
idCard: searchForm.idCard || '',
|
||
phoneNumber: searchForm.phoneNumber || '',
|
||
pageNo: currentPage.value,
|
||
pageSize: pageSize.value
|
||
}
|
||
|
||
// 调用复用的门诊挂号API获取患者列表
|
||
const response = await getPatientList(queryParams)
|
||
|
||
if (response && response.code === 200) {
|
||
// 检查是否有查询结果
|
||
if (response.data && response.data.records && response.data.records.length > 0) {
|
||
// 更新总条数
|
||
total.value = response.data.total || 0
|
||
|
||
// 如果只有一条记录且是第一页，直接显示
|
||
if (response.data.records.length === 1 && currentPage.value === 1) {
|
||
const patient = response.data.records[0]
|
||
|
||
// 获取门诊号码，优先使用identifierNo或patientId
|
||
const outpatientNo = patient.identifierNo || patient.cardNo || patient.card_number || patient.就诊卡号 || patient.outpatientNumber || patient.outpatientNo || patient.门诊号码 || patient.卡号 || patient.card || patient.patientNo || patient.patient_id;
|
||
// 获取性别，优先使用genderEnum_enumText
|
||
const gender = patient.genderEnum_enumText || patient.gender || patient.sex || patient.性别 || patient.xb || patient.sexCode || patient.GENDER || patient.SEX;
|
||
|
||
patientInfo.value = {
|
||
outpatientNo: outpatientNo,
|
||
patientName: patient.patientName || patient.name,
|
||
idCard: patient.idCard || patient.id_card || patient.idNo,
|
||
phoneNumber: patient.phoneNumber || patient.phone || patient.mobile || patient.mobilePhone,
|
||
gender: gender,
|
||
age: patient.age,
|
||
patientId: patient.patientId || outpatientNo
|
||
}
|
||
} else {
|
||
// 如果有多条记录或不是第一页，显示患者列表供选择
|
||
patientList.value = response.data.records
|
||
showPatientList.value = true
|
||
}
|
||
} else {
|
||
// 无数据时重置总条数
|
||
total.value = 0
|
||
ElMessage.warning('未查询到患者信息')
|
||
}
|
||
} else {
|
||
ElMessage.error('查询失败：' + (response?.msg || '未知错误'))
|
||
}
|
||
|
||
} catch (error) {
|
||
ElMessage.error('查询失败，请稍后重试')
|
||
// 可以在这里添加错误监控或日志记录
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 确定换卡
|
||
const handleConfirm = async () => {
|
||
if (!patientInfo.value) {
|
||
ElMessage.warning('请先查询患者信息')
|
||
return
|
||
}
|
||
|
||
if (!renewalForm.newOutpatientNo) {
|
||
ElMessage.warning('请输入新门诊号码')
|
||
return
|
||
}
|
||
|
||
if (renewalForm.newOutpatientNo === patientInfo.value.outpatientNo) {
|
||
ElMessage.warning('新门诊号码不能与原号码相同')
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
try {
|
||
// 构建换卡请求参数，注意参数名称与API接口保持一致
|
||
const params = {
|
||
oldCardNo: patientInfo.value.outpatientNo,
|
||
newCardNo: renewalForm.newOutpatientNo,
|
||
patientId: patientInfo.value.patientId,
|
||
reason: '患者换卡',
|
||
remark: `从${patientInfo.value.outpatientNo}更换到${renewalForm.newOutpatientNo}`
|
||
}
|
||
|
||
// 调用真实的换卡接口
|
||
const res = await doCardRenewal(params)
|
||
|
||
if (res && res.code === 200) {
|
||
renewalSuccessVisible.value = true
|
||
ElMessage.success('换卡成功！')
|
||
} else {
|
||
ElMessage.error('换卡失败：' + (res?.msg || '未知错误'))
|
||
}
|
||
|
||
} catch (error) {
|
||
ElMessage.error('换卡失败，请稍后重试')
|
||
// 可以在这里添加错误监控或日志记录
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 关闭窗口
|
||
const handleClose = () => {
|
||
if (confirm('确定要关闭换卡窗口吗？')) {
|
||
resetForm()
|
||
// 如果是在弹窗中打开的，可以添加关闭弹窗的逻辑
|
||
// 否则可以导航回上一页
|
||
// this.$router.back()
|
||
}
|
||
}
|
||
|
||
// 键盘事件处理
|
||
const handleKeydown = (event) => {
|
||
// Alt + Q 查询
|
||
if (event.altKey && event.key.toLowerCase() === 'q') {
|
||
event.preventDefault()
|
||
handlePatientSearch()
|
||
}
|
||
// Alt + O 确定
|
||
if (event.altKey && event.key.toLowerCase() === 'o') {
|
||
event.preventDefault()
|
||
handleConfirm()
|
||
}
|
||
// Alt + C 关闭
|
||
if (event.altKey && event.key.toLowerCase() === 'c') {
|
||
event.preventDefault()
|
||
handleClose()
|
||
}
|
||
}
|
||
|
||
// 组件挂载时添加键盘事件监听
|
||
onMounted(() => {
|
||
document.addEventListener('keydown', handleKeydown)
|
||
})
|
||
|
||
// 组件卸载时移除键盘事件监听
|
||
onUnmounted(() => {
|
||
document.removeEventListener('keydown', handleKeydown)
|
||
})
|
||
|
||
// 移除了调试功能
|
||
|
||
// 选择患者
|
||
const selectPatient = (row) => {
|
||
// 获取门诊号码，优先使用identifierNo
|
||
const outpatientNo = row.identifierNo || row.cardNo || row.card_number || row.就诊卡号 || row.outpatientNumber || row.outpatientNo || row.门诊号码 || row.卡号 || row.card || row.patientNo || row.patient_id;
|
||
// 获取性别，优先使用genderEnum_enumText
|
||
const gender = row.genderEnum_enumText || row.gender || row.sex || row.性别 || row.xb || row.sexCode || row.GENDER || row.SEX;
|
||
|
||
patientInfo.value = {
|
||
outpatientNo: outpatientNo,
|
||
patientName: row.patientName || row.name,
|
||
idCard: row.idCard || row.id_card || row.idNo,
|
||
phoneNumber: row.phoneNumber || row.phone || row.mobile || row.mobilePhone,
|
||
gender: gender,
|
||
age: row.age,
|
||
patientId: row.patientId || outpatientNo
|
||
}
|
||
showPatientList.value = false
|
||
ElMessage.success('已选择患者：' + (row.patientName || row.name))
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
searchForm.patientName = ''
|
||
searchForm.idCard = ''
|
||
searchForm.phoneNumber = ''
|
||
patientInfo.value = null
|
||
patientList.value = []
|
||
showPatientList.value = false
|
||
renewalForm.newOutpatientNo = ''
|
||
// 重置分页状态
|
||
currentPage.value = 1
|
||
pageSize.value = 10
|
||
total.value = 0
|
||
}
|
||
|
||
// 格式化日期为YYYY-MM-DD格式
|
||
const formatDate = (date) => {
|
||
if (!date) return ''
|
||
// 如果已经是YYYY-MM-DD格式，直接返回
|
||
if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
|
||
return date
|
||
}
|
||
// 处理日期对象或其他格式
|
||
const d = new Date(date)
|
||
if (isNaN(d.getTime())) return ''
|
||
const year = d.getFullYear()
|
||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||
const day = String(d.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 对话框标题样式 */
|
||
.el-dialog__header {
|
||
background-color: #fff;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
margin: 0;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
font-size: 16px;
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 15px 20px;
|
||
background-color: #fff;
|
||
border-top: 1px solid #ebeef5;
|
||
}
|
||
|
||
.dialog-footer .el-button {
|
||
min-width: 80px;
|
||
background-color: #f56c6c;
|
||
border-color: #f56c6c;
|
||
color: white;
|
||
}
|
||
|
||
/* 表格样式 */
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.el-table {
|
||
margin: 0;
|
||
}
|
||
|
||
.el-table th {
|
||
background-color: #f5f7fa;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.el-table td {
|
||
text-align: left;
|
||
}
|
||
|
||
/* 恢复默认表格样式 */
|
||
.el-table tr:hover > td {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.el-table--striped .el-table__body tr:nth-child(2n) {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.card-renewal-container {
|
||
width: 100%;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 10px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
}
|
||
|
||
.title-bar {
|
||
background: #409eff;
|
||
color: white;
|
||
padding: 10px 15px;
|
||
margin: -10px -10px 15px -10px;
|
||
border-top-left-radius: 4px;
|
||
border-top-right-radius: 4px;
|
||
}
|
||
|
||
.title-bar h2 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.button-bar {
|
||
display: flex;
|
||
gap: 15px;
|
||
padding: 15px;
|
||
background-color: #f5f7fa;
|
||
border: 1px solid #ebeef5;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.button-bar .el-button {
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.button-bar .el-button:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.search-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.input-item {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.input-item label {
|
||
display: inline-block;
|
||
width: 100px;
|
||
text-align: right;
|
||
margin-right: 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.patient-info-section {
|
||
background: #f5f7fa;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-item label {
|
||
display: block;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.info-value {
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.new-number-section {
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #ebeef5;
|
||
}
|
||
|
||
.success-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: #67c23a;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
margin: 0 auto;
|
||
}
|
||
</style> |