From ce7fe94be2f80da27d7e05e6eb6739e92a581bf1 Mon Sep 17 00:00:00 2001
From: lxd <1004405501@qq.com>
Date: Mon, 14 Jul 2025 15:49:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=82=A3=E8=80=85=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E4=BF=A1=E6=81=AF=E7=95=8C=E9=9D=A2=E5=92=8C=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/patientinfo/index.vue           | 660 +++++++++++++++-------
 src/views/patientinfo/patientinfoForm.vue | 397 ++++++++++---
 2 files changed, 776 insertions(+), 281 deletions(-)

diff --git a/src/views/patientinfo/index.vue b/src/views/patientinfo/index.vue
index 02d6cbf..68a0014 100644
--- a/src/views/patientinfo/index.vue
+++ b/src/views/patientinfo/index.vue
@@ -1,208 +1,210 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="患者姓名" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入患者姓名"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <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"
-        >
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </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-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['system:patientinfo:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
+    <el-card class="search-card" shadow="never">
+      <el-form
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        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="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="search-input"
+              >
+                <template #prefix>
+                  <Icon icon="ep:document" />
+                </template>
+              </el-input>
+            </el-form-item>
+          </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="warning"
+                @click="handleExport"
+                :loading="exportLoading"
+                :icon="Download"
+              >
+                导出数据
+              </el-button>
+            </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">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['system:patientinfo:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['system:patientinfo:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <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
+                type="primary"
+                size="small"
+                @click="openForm('update', scope.row.id)"
+                :icon="Edit"
+                class="action-btn edit-btn"
+              >
+                编辑
+              </el-button>
+              <el-button
+                type="danger"
+                size="small"
+                @click="handleDelete(scope.row.id)"
+                :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>
diff --git a/src/views/patientinfo/patientinfoForm.vue b/src/views/patientinfo/patientinfoForm.vue
index 344e154..deb97c4 100644
--- a/src/views/patientinfo/patientinfoForm.vue
+++ b/src/views/patientinfo/patientinfoForm.vue
@@ -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-form-item label="患者姓名" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入患者姓名" />
-      </el-form-item>
-      <el-form-item label="身份证号" prop="idcard">
-        <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
-      </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-form-item>
-      <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-form-item>
-      <el-form-item label="出生日期" prop="birthdate">
-        <el-date-picker
-          v-model="formData.birthdate"
-          type="date"
-          value-format="x"
-          placeholder="选择出生日期"
-        />
-      </el-form-item>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="患者姓名" prop="name">
+            <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="请输入身份证号"
+              clearable
+              maxlength="18"
+            >
+              <template #prefix>
+                <Icon icon="ep:document" />
+              </template>
+            </el-input>
+          </el-form-item>
+        </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="请输入手机号" 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="YYYY-MM-DD"
+              placeholder="选择出生日期"
+              class="w-full"
+              :disabled-date="disabledDate"
+            />
+          </el-form-item>
+        </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-col>
+      </el-row>
+
       <el-form-item label="地址" prop="address">
-        <el-input v-model="formData.address" placeholder="请输入地址" />
+        <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="状态：0-禁用，1-启用" prop="status">
+
+      <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>