修改患者基本信息界面和逻辑
This commit is contained in:
parent
13e25019c7
commit
ce7fe94be2
@ -1,208 +1,210 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="患者姓名" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入患者姓名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
class="search-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:user" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="患者ID" prop="regid">
|
||||
<el-input
|
||||
v-model="queryParams.regid"
|
||||
placeholder="请输入患者ID"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="search-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:key" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="身份证号" prop="idcard">
|
||||
<el-input
|
||||
v-model="queryParams.idcard"
|
||||
placeholder="请输入身份证号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册ID" prop="regid">
|
||||
<el-input
|
||||
v-model="queryParams.regid"
|
||||
placeholder="请输入注册ID"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机构ID" prop="orgid">
|
||||
<el-input
|
||||
v-model="queryParams.orgid"
|
||||
placeholder="请输入机构ID"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机构名称" prop="orgname">
|
||||
<el-input
|
||||
v-model="queryParams.orgname"
|
||||
placeholder="请输入机构名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input
|
||||
v-model="queryParams.phone"
|
||||
placeholder="请输入手机号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别：0-未知，1-男，2-女" prop="gender">
|
||||
<el-input
|
||||
v-model="queryParams.gender"
|
||||
placeholder="请输入性别：0-未知，1-男，2-女"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthdate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.birthdate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-220px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input
|
||||
v-model="queryParams.address"
|
||||
placeholder="请输入地址"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：0-禁用，1-启用" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择状态：0-禁用，1-启用"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
class="search-input"
|
||||
>
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:document" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createtime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createtime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-220px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新时间" prop="updatetime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.updatetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-220px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['system:patientinfo:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="search-buttons-row">
|
||||
<div class="search-buttons-group">
|
||||
<el-button type="primary" @click="handleQuery" :icon="Search"> 搜索 </el-button>
|
||||
<el-button @click="resetQuery" :icon="Refresh"> 重置 </el-button>
|
||||
<el-button type="success" @click="openForm('create')" :icon="Plus">
|
||||
新增患者
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['system:patientinfo:export']"
|
||||
:icon="Download"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
导出数据
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="主键ID，自增" align="center" prop="id" />
|
||||
<el-table-column label="患者姓名" align="center" prop="name" />
|
||||
<el-table-column label="身份证号" align="center" prop="idcard" />
|
||||
<el-table-column label="注册ID" align="center" prop="regid" />
|
||||
<el-table-column label="机构ID" align="center" prop="orgid" />
|
||||
<el-table-column label="机构名称" align="center" prop="orgname" />
|
||||
<el-table-column label="手机号" align="center" prop="phone" />
|
||||
<el-table-column label="性别：0-未知，1-男，2-女" align="center" prop="gender" />
|
||||
<el-table-column label="出生日期" align="center" prop="birthdate" />
|
||||
<el-table-column label="地址" align="center" prop="address" />
|
||||
<el-table-column label="状态：0-禁用，1-启用" align="center" prop="status" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createtime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="更新时间"
|
||||
align="center"
|
||||
prop="updatetime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" min-width="120px">
|
||||
<el-card shadow="never" class="table-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">患者信息列表</span>
|
||||
<div class="card-extra">
|
||||
<el-tag type="info" size="small">共 {{ total }} 条记录</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
class="modern-table"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column label="姓名" align="center" prop="name" min-width="100">
|
||||
<template #default="scope">
|
||||
<div class="patient-name">
|
||||
<el-avatar :size="32" class="mr-2">
|
||||
{{ scope.row.name?.charAt(0) }}
|
||||
</el-avatar>
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="患者ID" align="center" prop="regid" min-width="180">
|
||||
<template #default="scope">
|
||||
<span class="patient-id">{{ scope.row.regid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="性别" align="center" prop="gender" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="
|
||||
scope.row.gender === 1 ? 'primary' : scope.row.gender === 2 ? 'danger' : 'info'
|
||||
"
|
||||
size="small"
|
||||
>
|
||||
{{ scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '未知' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="出生日期" align="center" prop="birthdate" min-width="120">
|
||||
<template #default="scope">
|
||||
<span class="date-text">{{ formatDate(scope.row.birthdate) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="年龄" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<span class="age-text">{{ calculateAge(scope.row.birthdate) }}岁</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="身份证号" align="center" prop="idcard" min-width="180">
|
||||
<template #default="scope">
|
||||
<span class="idcard-text">{{ scope.row.idcard }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="手机号" align="center" prop="phone" min-width="130">
|
||||
<template #default="scope">
|
||||
<span class="phone-text">{{ scope.row.phone }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="地址" align="center" prop="address" min-width="200">
|
||||
<template #default="scope">
|
||||
<el-tooltip :content="scope.row.address" placement="top">
|
||||
<span class="address-text">{{ scope.row.address }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="机构名称" align="center" prop="orgname" min-width="150">
|
||||
<template #default="scope">
|
||||
<el-tooltip :content="scope.row.orgname" placement="top">
|
||||
<span class="org-name">{{ scope.row.orgname }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<template #default="scope">
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['system:patientinfo:update']"
|
||||
:icon="Edit"
|
||||
class="action-btn edit-btn"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['system:patientinfo:delete']"
|
||||
:icon="Delete"
|
||||
class="action-btn delete-btn"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
@ -214,12 +216,15 @@ import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { patientinfoApi, patientinfoVO } from '@/api/patientinfo'
|
||||
import patientinfoForm from './patientinfoForm.vue'
|
||||
import { Search, Refresh, Plus, Download, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
|
||||
|
||||
/** 人员信息表（患者信息表） 列表 */
|
||||
defineOptions({ name: 'Patientinfo' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<patientinfoVO[]>([]) // 列表的数据
|
||||
@ -228,25 +233,46 @@ const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
idcard: undefined,
|
||||
regid: undefined,
|
||||
orgid: undefined,
|
||||
orgname: undefined,
|
||||
phone: undefined,
|
||||
gender: undefined,
|
||||
birthdate: [],
|
||||
address: undefined,
|
||||
status: undefined,
|
||||
createtime: [],
|
||||
updatetime: []
|
||||
examid: undefined,
|
||||
idcard: undefined,
|
||||
orgid: undefined as number | undefined,
|
||||
orgname: undefined as string | undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 计算年龄 */
|
||||
const calculateAge = (birthdate: string) => {
|
||||
if (!birthdate) return '-'
|
||||
const birth = new Date(birthdate)
|
||||
const today = new Date()
|
||||
let age = today.getFullYear() - birth.getFullYear()
|
||||
const monthDiff = today.getMonth() - birth.getMonth()
|
||||
|
||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
||||
age--
|
||||
}
|
||||
|
||||
return age
|
||||
}
|
||||
|
||||
/** 格式化日期 */
|
||||
const formatDate = (date: string) => {
|
||||
if (!date) return '-'
|
||||
const d = new Date(date)
|
||||
const year = d.getFullYear()
|
||||
const month = d.getMonth() + 1
|
||||
const day = d.getDate()
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
queryParams.orgid = Profilevo.value.orgid
|
||||
queryParams.orgname = Profilevo.value.orgname
|
||||
const data = await patientinfoApi.getpatientinfoPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
@ -294,7 +320,7 @@ const handleExport = async () => {
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await patientinfoApi.exportpatientinfo(queryParams)
|
||||
download.excel(data, '人员信息表（患者信息表）.xls')
|
||||
download.excel(data, '患者信息表.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
@ -302,7 +328,221 @@ const handleExport = async () => {
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
Profilevo.value = await getUserProfile()
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
|
||||
.search-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-buttons-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.search-buttons-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
border-radius: 8px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
.patient-id {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
background: #f0f9ff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d1ecf1;
|
||||
}
|
||||
|
||||
.patient-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-avatar {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.age-text {
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.idcard-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
color: #67c23a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.phone-text {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
color: #606266;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.action-btn {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.edit-btn {
|
||||
background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #337ecc 0%, #5daf34 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.delete-btn {
|
||||
background: linear-gradient(135deg, #f56c6c 0%, #e6a23c 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #f78989 0%, #ebb563 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-table__header {
|
||||
background: #f5f7fa;
|
||||
|
||||
th {
|
||||
background: #f5f7fa;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
border-radius: 6px;
|
||||
|
||||
&.el-button--primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--success {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #0f8a7d 0%, #2dd66e 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,81 +1,153 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
class="modern-form"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="患者姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入患者姓名" />
|
||||
<el-input v-model="formData.name" placeholder="请输入患者姓名" clearable>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:user" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="formData.gender" placeholder="请选择性别" clearable class="w-full">
|
||||
<el-option label="男" :value="1" />
|
||||
<el-option label="女" :value="2" />
|
||||
<el-option label="未知" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="身份证号" prop="idcard">
|
||||
<el-input v-model="formData.idcard" placeholder="请输入身份证号" />
|
||||
<el-input
|
||||
v-model="formData.idcard"
|
||||
placeholder="请输入身份证号"
|
||||
clearable
|
||||
maxlength="18"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:document" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册ID" prop="regid">
|
||||
<el-input v-model="formData.regid" placeholder="请输入注册ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="机构ID" prop="orgid">
|
||||
<el-input v-model="formData.orgid" placeholder="请输入机构ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="机构名称" prop="orgname">
|
||||
<el-input v-model="formData.orgname" placeholder="请输入机构名称" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="患者ID" prop="regid">
|
||||
<el-input v-model="formData.regid" placeholder="请输入患者ID" clearable>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:key" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别：0-未知，1-男，2-女" prop="gender">
|
||||
<el-input v-model="formData.gender" placeholder="请输入性别：0-未知，1-男，2-女" />
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机号" clearable maxlength="11">
|
||||
<template #prefix>
|
||||
<Icon icon="ep:phone" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出生日期" prop="birthdate">
|
||||
<el-date-picker
|
||||
v-model="formData.birthdate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择出生日期"
|
||||
class="w-full"
|
||||
:disabled-date="disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入地址" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input
|
||||
:value="calculateAge(formData.birthdate)"
|
||||
placeholder="根据出生日期自动计算"
|
||||
disabled
|
||||
class="age-input"
|
||||
>
|
||||
<template #suffix>岁</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：0-禁用，1-启用" prop="status">
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input
|
||||
v-model="formData.address"
|
||||
placeholder="请输入详细地址"
|
||||
clearable
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:map-location" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio value="1">请选择字典生成</el-radio>
|
||||
<el-radio :value="1">
|
||||
<el-tag type="success" size="small">启用</el-tag>
|
||||
</el-radio>
|
||||
<el-radio :value="0">
|
||||
<el-tag type="danger" size="small">禁用</el-tag>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createtime">
|
||||
<el-date-picker
|
||||
v-model="formData.createtime"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择创建时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新时间" prop="updatetime">
|
||||
<el-date-picker
|
||||
v-model="formData.updatetime"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择更新时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" :icon="Close"> 取 消 </el-button>
|
||||
<el-button
|
||||
@click="submitForm"
|
||||
type="primary"
|
||||
:disabled="formLoading"
|
||||
:icon="Check"
|
||||
:loading="formLoading"
|
||||
>
|
||||
{{ formLoading ? '提交中...' : '确 定' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { patientinfoApi, patientinfoVO } from '@/api/patientinfo'
|
||||
|
||||
import { Check, Close } from '@element-plus/icons-vue'
|
||||
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
|
||||
import { watch } from 'vue'
|
||||
/** 人员信息表（患者信息表） 表单 */
|
||||
defineOptions({ name: 'PatientinfoForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
@ -84,34 +156,70 @@ const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
idcard: undefined,
|
||||
regid: undefined,
|
||||
orgid: undefined,
|
||||
orgname: undefined,
|
||||
regid: undefined as string | undefined,
|
||||
orgid: undefined as number | undefined,
|
||||
orgname: undefined as string | undefined,
|
||||
phone: undefined,
|
||||
gender: undefined,
|
||||
birthdate: undefined,
|
||||
birthdate: undefined as string | undefined,
|
||||
address: undefined,
|
||||
status: undefined,
|
||||
createtime: undefined,
|
||||
updatetime: undefined
|
||||
status: 1
|
||||
})
|
||||
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '患者姓名不能为空', trigger: 'blur' }],
|
||||
idcard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }]
|
||||
name: [
|
||||
{ required: true, message: '患者姓名不能为空', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 计算年龄 */
|
||||
const calculateAge = (birthdate: string | undefined) => {
|
||||
if (!birthdate) return '-'
|
||||
const birth = new Date(birthdate)
|
||||
const today = new Date()
|
||||
let age = today.getFullYear() - birth.getFullYear()
|
||||
const monthDiff = today.getMonth() - birth.getMonth()
|
||||
|
||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
||||
age--
|
||||
}
|
||||
|
||||
return age
|
||||
}
|
||||
|
||||
/** 禁用未来日期 */
|
||||
const disabledDate = (time: Date) => {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
|
||||
/** 由身份证号解析出生日期 */
|
||||
function getBirthFromIdCard(idcard: string): string | undefined {
|
||||
if (!idcard || idcard.length !== 18) return undefined
|
||||
const birth = idcard.substring(6, 14)
|
||||
return `${birth.substring(0, 4)}-${birth.substring(4, 6)}-${birth.substring(6, 8)}`
|
||||
}
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
dialogTitle.value = type === 'create' ? '新增患者' : '编辑患者'
|
||||
formType.value = type
|
||||
resetForm()
|
||||
Profilevo.value = await getUserProfile()
|
||||
formData.value.orgid = Profilevo.value.orgid
|
||||
formData.value.orgname = Profilevo.value.orgname
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await patientinfoApi.getpatientinfo(id)
|
||||
const data = await patientinfoApi.getpatientinfo(id)
|
||||
formData.value = {
|
||||
...data,
|
||||
birthdate: data.birthdate ? new Date(data.birthdate).toISOString().split('T')[0] : undefined
|
||||
}
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
@ -127,13 +235,23 @@ const submitForm = async () => {
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as patientinfoVO
|
||||
// 新增时自动生成患者ID
|
||||
if (formType.value === 'create' && !formData.value.regid) {
|
||||
const now = new Date()
|
||||
const pad = (n: number, l = 2) => n.toString().padStart(l, '0')
|
||||
formData.value.regid = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}${pad(now.getMilliseconds(), 3)}`
|
||||
}
|
||||
const data = {
|
||||
...formData.value,
|
||||
birthdate: formData.value.birthdate
|
||||
} as unknown as patientinfoVO
|
||||
|
||||
if (formType.value === 'create') {
|
||||
await patientinfoApi.createpatientinfo(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
message.success('新增患者成功')
|
||||
} else {
|
||||
await patientinfoApi.updatepatientinfo(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
message.success('更新患者信息成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
@ -149,17 +267,154 @@ const resetForm = () => {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
idcard: undefined,
|
||||
regid: undefined,
|
||||
regid: undefined as string | undefined,
|
||||
orgid: undefined,
|
||||
orgname: undefined,
|
||||
phone: undefined,
|
||||
gender: undefined,
|
||||
birthdate: undefined,
|
||||
address: undefined,
|
||||
status: undefined,
|
||||
createtime: undefined,
|
||||
updatetime: undefined
|
||||
status: 1
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 监听身份证号变化，自动填充出生日期
|
||||
watch(
|
||||
() => formData.value.idcard,
|
||||
(newVal: string | undefined) => {
|
||||
const birth = newVal ? getBirthFromIdCard(newVal) : undefined
|
||||
if (birth) {
|
||||
formData.value.birthdate = birth ? String(birth) : undefined
|
||||
} else if (!newVal) {
|
||||
formData.value.birthdate = undefined
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modern-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea {
|
||||
.el-textarea__inner {
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.age-input {
|
||||
.el-input__wrapper {
|
||||
background-color: #f5f7fa;
|
||||
|
||||
.el-input__inner {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio-group {
|
||||
.el-radio {
|
||||
margin-right: 20px;
|
||||
|
||||
.el-tag {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
border-radius: 6px;
|
||||
padding: 8px 20px;
|
||||
|
||||
&.el-button--primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
|
||||
.el-dialog__title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
.el-dialog__close {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 20px 30px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user