提交学生花名册
This commit is contained in:
zlwu committed
1 parent
ba6ee26cbf
commit
13591f1e31
11 files changed
+4412
-1114
No files matched your search
@@ -0,0 +1,202 @@
|
||||
# 学生花名册管理功能实现说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
学生花名册管理界面用于展示和管理学生信息，支持高级复杂检索、导出、查看等操作。
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
web/src/views/xg/xsjcxx/stuRoster/
|
||||
├── index.vue # 主界面文件
|
||||
├── components/ # 组件目录
|
||||
│ ├── AdvancedSearchDialog.vue # 高级检索弹窗
|
||||
│ └── StudentDetailDialog.vue # 学生详情弹窗
|
||||
├── test.vue # 测试页面
|
||||
└── README.md # 说明文档
|
||||
```
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 1. 主界面 (index.vue)
|
||||
|
||||
#### 布局设计
|
||||
- **左右布局模式**：左侧固定宽高的部门树，右侧内容区域
|
||||
- **部门树功能**：
|
||||
- 支持纵向和横向滚动条
|
||||
- 支持多选功能
|
||||
- 支持搜索过滤
|
||||
- 清空选择功能
|
||||
|
||||
#### 检索功能
|
||||
- **基础检索**：学号、学生姓名、手机号码、状态四个检索条件
|
||||
- **高级检索**：弹出专门弹窗配置检索条件
|
||||
- **检索按钮**：搜索、重置、高级检索
|
||||
|
||||
#### 数据展示
|
||||
- **双视图模式**：列表视图和卡片视图
|
||||
- **列表视图**：标准表格展示，支持列显示控制
|
||||
- **卡片视图**：卡片式布局，每行4个卡片
|
||||
- **分页功能**：支持分页显示
|
||||
|
||||
#### 操作功能
|
||||
- **导出数据**：支持数据导出功能
|
||||
- **查看详情**：查看学生完整信息
|
||||
- **列控制**：通过right-toolbar控制列显示
|
||||
|
||||
### 2. 高级检索弹窗 (AdvancedSearchDialog.vue)
|
||||
|
||||
#### 检索字段覆盖
|
||||
支持 `xg_student_msg` 表中所有字段的检索功能：
|
||||
|
||||
**基础信息**
|
||||
- 身份证号、英文姓名、曾用名、性别
|
||||
- 出生日期（时间范围）、民族、籍贯、政治面貌
|
||||
- 户籍所在地、家庭地址、现住址、邮政编码
|
||||
- 电子邮箱、QQ号码、微信号、婚姻状况
|
||||
|
||||
**学籍信息**
|
||||
- 入学年份、入学日期（时间范围）、录取类别
|
||||
- 学制、学历层次、培养方式、年级、户口类型
|
||||
|
||||
**家庭信息**
|
||||
- 父亲信息：姓名、电话、工作单位
|
||||
- 母亲信息：姓名、电话、工作单位
|
||||
- 监护人信息：姓名、电话、关系
|
||||
- 经济信息：家庭年收入、人均收入、收入来源、经济状况、成员数量
|
||||
- 紧急联系人信息
|
||||
|
||||
**特殊标识**
|
||||
- 贫困生、少数民族、残疾、孤儿、留守儿童、独生子女、低保、助学贷款等标识
|
||||
- 宗教信仰、生源地区
|
||||
|
||||
**健康信息**
|
||||
- 身高、体重（数值范围）
|
||||
- 血型、健康状况、特殊体质、病史、过敏史
|
||||
- 残疾类型、残疾等级
|
||||
- 特长爱好、获奖情况、违纪记录、社会活动
|
||||
|
||||
**时间范围**
|
||||
- 创建时间、更新时间（时间范围）
|
||||
|
||||
#### 检索特性
|
||||
- **文本检索**：采用like模式
|
||||
- **下拉选择**：支持多选
|
||||
- **时间范围**：支持开始时间到结束时间的跨度检索
|
||||
- **数值范围**：支持最小值和最大值范围检索
|
||||
- **每行4个**：检索条件每4个放一行
|
||||
|
||||
### 3. 学生详情弹窗 (StudentDetailDialog.vue)
|
||||
|
||||
#### Tab页设计
|
||||
参考 `stuMsgDetailDialog.vue` 结构，分为5个Tab页：
|
||||
|
||||
**基础信息**
|
||||
- 学生照片和基本信息布局
|
||||
- 学号、身份证号、姓名、英文姓名、曾用名、性别
|
||||
- 出生日期、民族、籍贯、政治面貌
|
||||
- 手机号码、电子邮箱、QQ号码、微信号、婚姻状况
|
||||
- 宗教信仰、户籍所在地、家庭地址、现住址、邮政编码
|
||||
- 生源地区、毕业院校、户口类型
|
||||
|
||||
**学籍信息**
|
||||
- 学籍状态、入学年份、入学日期、录取类别
|
||||
- 学制、学历层次、培养方式、年级、是否住校
|
||||
- 学院、专业、班级、辅导员、班主任
|
||||
- 宿舍楼栋、宿舍房间号、银行卡号、开户银行
|
||||
|
||||
**家庭信息**
|
||||
- 父亲信息：姓名、电话、工作单位
|
||||
- 母亲信息：姓名、电话、工作单位
|
||||
- 监护人信息：姓名、电话、关系
|
||||
- 经济信息：家庭年收入、人均收入、收入来源、经济状况、成员数量
|
||||
- 紧急联系人信息
|
||||
|
||||
**特殊标识**
|
||||
- 各种特殊标识的状态展示（使用Tag标签）
|
||||
- 助学贷款金额、残疾类型、残疾等级
|
||||
|
||||
**健康信息**
|
||||
- 身高、体重、血型
|
||||
- 健康状况、特殊体质或疾病、病史、过敏史
|
||||
- 特长爱好、获奖情况、违纪记录、社会活动
|
||||
|
||||
#### 展示特性
|
||||
- **只读模式**：所有字段都是禁用状态，仅用于查看
|
||||
- **状态标签**：使用不同颜色的Tag标签展示状态
|
||||
- **照片展示**：学生照片展示
|
||||
- **加载状态**：数据加载时显示loading状态
|
||||
|
||||
### 4. 测试页面 (test.vue)
|
||||
|
||||
#### 测试功能
|
||||
- **基础功能测试**：查询条件输入和查询功能
|
||||
- **模拟数据展示**：表格形式展示模拟数据
|
||||
- **弹窗测试**：高级检索和详情弹窗的测试
|
||||
- **状态展示**：学生状态的Tag标签展示
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 数据模型
|
||||
基于 `xg_student_msg` 表结构，包含：
|
||||
- 基础信息字段（学号、姓名、性别等）
|
||||
- 学籍信息字段（状态、入学年份等）
|
||||
- 家庭信息字段（父母信息、经济状况等）
|
||||
- 特殊标识字段（贫困生、少数民族等）
|
||||
- 健康信息字段（身高、体重、病史等）
|
||||
|
||||
### 组件设计
|
||||
- **主界面组件**：负责整体布局和主要功能
|
||||
- **高级检索组件**：独立的弹窗组件，负责复杂检索
|
||||
- **详情展示组件**：独立的弹窗组件，负责信息展示
|
||||
- **测试组件**：用于功能测试和验证
|
||||
|
||||
### 状态管理
|
||||
- **查询参数**：基础查询参数和高级查询参数
|
||||
- **视图状态**：列表视图和卡片视图切换
|
||||
- **弹窗状态**：各种弹窗的显示控制
|
||||
- **选择状态**：部门树的多选状态
|
||||
|
||||
### 模拟数据
|
||||
目前使用模拟数据进行展示，包含：
|
||||
- 3个示例学生数据
|
||||
- 完整的字段信息
|
||||
- 不同的状态值
|
||||
|
||||
## 待完善功能
|
||||
|
||||
### API对接
|
||||
- 需要对接真实的学生信息API
|
||||
- 实现数据的增删改查功能
|
||||
- 实现导出功能
|
||||
|
||||
### 权限控制
|
||||
- 根据用户权限控制功能访问
|
||||
- 实现数据权限过滤
|
||||
|
||||
### 性能优化
|
||||
- 大数据量时的分页优化
|
||||
- 检索性能优化
|
||||
- 组件懒加载
|
||||
|
||||
### 用户体验
|
||||
- 更多的交互动画
|
||||
- 响应式布局优化
|
||||
- 移动端适配
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. **访问路径**：`/xg/xsjcxx/stuRoster`
|
||||
2. **测试页面**：`/xg/xsjcxx/stuRoster/test`
|
||||
3. **主要功能**：
|
||||
- 左侧选择部门
|
||||
- 右侧进行检索
|
||||
- 查看学生详情
|
||||
- 导出数据
|
||||
|
||||
## 开发规范
|
||||
|
||||
- 遵循Vue 3 Composition API规范
|
||||
- 使用TypeScript进行类型检查
|
||||
- 遵循Element Plus设计规范
|
||||
- 组件化开发，保持代码可维护性
|
||||
@@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="高级检索" width="1200px" append-to-body @close="handleClose">
|
||||
<el-form ref="advancedFormRef" :model="formData" label-width="120px">
|
||||
<!-- 基础信息 -->
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
<!-- 新增：学号、姓名、手机号码 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="学号" prop="studentNo">
|
||||
<el-input v-model="formData.studentNo" placeholder="请输入学号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机号码" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="身份证号" prop="idCard">
|
||||
<el-input v-model="formData.idCard" placeholder="请输入身份证号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="英文姓名" prop="nameEnglish">
|
||||
<el-input v-model="formData.nameEnglish" placeholder="请输入英文姓名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="曾用名" prop="formerName">
|
||||
<el-input v-model="formData.formerName" placeholder="请输入曾用名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="formData.gender" placeholder="请选择性别" clearable>
|
||||
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="民族" prop="nationality">
|
||||
<el-select v-model="formData.nationality" placeholder="请选择民族" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in xg_nation" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出生日期" prop="birthDateRange">
|
||||
<el-date-picker
|
||||
v-model="formData.birthDateRange"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="籍贯" prop="nativePlace">
|
||||
<el-input v-model="formData.nativePlace" placeholder="请输入籍贯" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="政治面貌" prop="politicalStatus">
|
||||
<el-select v-model="formData.politicalStatus" placeholder="请选择政治面貌" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in xg_political_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="户口类型" prop="householdRegisterType">
|
||||
<el-select v-model="formData.householdRegisterType" placeholder="请选择户口类型" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in house_hold_register_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="生源地区" prop="sourceRegion">
|
||||
<el-input v-model="formData.sourceRegion" placeholder="请输入生源地区" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="宗教信仰" prop="religion">
|
||||
<el-input v-model="formData.religion" placeholder="请输入宗教信仰" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="文化程度" prop="educationLevel">
|
||||
<el-select v-model="formData.educationLevel" placeholder="请选择文化程度" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in wenhuachengdu" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="电子邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="QQ号码" prop="qq">
|
||||
<el-input v-model="formData.qq" placeholder="请输入QQ号码" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="微信号" prop="wechat">
|
||||
<el-input v-model="formData.wechat" placeholder="请输入微信号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="婚姻状况" prop="maritalStatus">
|
||||
<el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in marital_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 移动到最后：户籍所在地、家庭地址、现住址，每个占一行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="户籍所在地" prop="hukouLocation">
|
||||
<el-input v-model="formData.hukouLocation" placeholder="请输入户籍所在地" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="家庭地址" prop="homeAddress">
|
||||
<el-input v-model="formData.homeAddress" placeholder="请输入家庭地址" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="现住址" prop="currentAddress">
|
||||
<el-input v-model="formData.currentAddress" placeholder="请输入现住址" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 学籍信息 -->
|
||||
<el-divider content-position="left">学籍信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="入学年份" prop="enrollmentYear">
|
||||
<el-input v-model="formData.enrollmentYear" placeholder="请输入入学年份" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="入学日期" prop="enrollmentDateRange">
|
||||
<el-date-picker
|
||||
v-model="formData.enrollmentDateRange"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="录取类别" prop="admissionCategory">
|
||||
<el-select v-model="formData.admissionCategory" placeholder="请选择录取类别" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in admission_category" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="学制(年)" prop="schoolSystem">
|
||||
<el-input v-model="formData.schoolSystem" placeholder="请输入学制" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="学历层次" prop="academicLevel">
|
||||
<el-select v-model="formData.academicLevel" placeholder="请选择学历层次" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in zsjy_education_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="培养方式" prop="trainingType">
|
||||
<el-select v-model="formData.trainingType" placeholder="请选择培养方式" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in xg_training_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="年级" prop="grade">
|
||||
<el-input v-model="formData.grade" placeholder="请输入年级" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="毕业院校" prop="graduateSchool">
|
||||
<el-input v-model="formData.graduateSchool" placeholder="请输入毕业院校" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="学籍状态" prop="studentStatus">
|
||||
<el-select v-model="formData.studentStatus" placeholder="请选择学籍状态" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in student_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否住校" prop="isBoarder">
|
||||
<el-select v-model="formData.isBoarder" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="宿舍楼栋" prop="dormitoryBuilding">
|
||||
<el-input v-model="formData.dormitoryBuilding" placeholder="请输入宿舍楼栋" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 家庭信息 -->
|
||||
<el-divider content-position="left">家庭信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="父亲姓名" prop="fatherName">
|
||||
<el-input v-model="formData.fatherName" placeholder="请输入父亲姓名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="父亲电话" prop="fatherPhone">
|
||||
<el-input v-model="formData.fatherPhone" placeholder="请输入父亲电话" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="父亲工作单位" prop="fatherWorkUnit">
|
||||
<el-input v-model="formData.fatherWorkUnit" placeholder="请输入父亲工作单位" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="母亲姓名" prop="motherName">
|
||||
<el-input v-model="formData.motherName" placeholder="请输入母亲姓名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="母亲电话" prop="motherPhone">
|
||||
<el-input v-model="formData.motherPhone" placeholder="请输入母亲电话" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="母亲工作单位" prop="motherWorkUnit">
|
||||
<el-input v-model="formData.motherWorkUnit" placeholder="请输入母亲工作单位" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="监护人姓名" prop="guardianName">
|
||||
<el-input v-model="formData.guardianName" placeholder="请输入监护人姓名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="监护人电话" prop="guardianPhone">
|
||||
<el-input v-model="formData.guardianPhone" placeholder="请输入监护人电话" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="监护人关系" prop="guardianRelation">
|
||||
<el-input v-model="formData.guardianRelation" placeholder="请输入监护人关系" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="家庭年收入(元)" prop="familyIncomeRange">
|
||||
<el-input v-model="formData.familyIncomeRange[0]" placeholder="最小值" style="width: 45%" />
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input v-model="formData.familyIncomeRange[1]" placeholder="最大值" style="width: 45%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="人均收入(元)" prop="perCapitaIncomeRange">
|
||||
<el-input v-model="formData.perCapitaIncomeRange[0]" placeholder="最小值" style="width: 45%" />
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input v-model="formData.perCapitaIncomeRange[1]" placeholder="最大值" style="width: 45%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="收入来源" prop="incomeSource">
|
||||
<el-input v-model="formData.incomeSource" placeholder="请输入收入来源" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="家庭经济状况" prop="familyEconomicStatus">
|
||||
<el-select
|
||||
v-model="formData.familyEconomicStatus"
|
||||
placeholder="请选择家庭经济状况"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
>
|
||||
<el-option v-for="dict in xg_family_economic" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="家庭成员数量" prop="familyMembers">
|
||||
<el-input-number v-model="formData.familyMembers" placeholder="请输入家庭成员数量" :min="1" :max="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="紧急联系人" prop="emergencyContactName">
|
||||
<el-input v-model="formData.emergencyContactName" placeholder="请输入紧急联系人" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
|
||||
<el-input v-model="formData.emergencyContactPhone" placeholder="请输入紧急联系人电话" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 扩展信息 -->
|
||||
<el-divider content-position="left">扩展信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否贫困生" prop="isPoorStudent">
|
||||
<el-select v-model="formData.isPoorStudent" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否少数民族" prop="isMinority">
|
||||
<el-select v-model="formData.isMinority" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否残疾" prop="isDisabled">
|
||||
<el-select v-model="formData.isDisabled" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否孤儿" prop="isOrphan">
|
||||
<el-select v-model="formData.isOrphan" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否留守儿童" prop="isLeftBehindChild">
|
||||
<el-select v-model="formData.isLeftBehindChild" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否独生子女" prop="isSingleChild">
|
||||
<el-select v-model="formData.isSingleChild" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否低保" prop="isLowIncome">
|
||||
<el-select v-model="formData.isLowIncome" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否有助学贷款" prop="hasLoan">
|
||||
<el-select v-model="formData.hasLoan" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="助学贷款金额(元)" prop="loanAmountRange">
|
||||
<el-input v-model="formData.loanAmountRange[0]" placeholder="最小值" style="width: 45%" />
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input v-model="formData.loanAmountRange[1]" placeholder="最大值" style="width: 45%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="特长爱好" prop="specialties">
|
||||
<el-input v-model="formData.specialties" placeholder="请输入特长爱好" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="获奖情况" prop="awards">
|
||||
<el-input v-model="formData.awards" placeholder="请输入获奖情况" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="违纪记录" prop="violations">
|
||||
<el-input v-model="formData.violations" placeholder="请输入违纪记录" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="社会活动" prop="socialActivities">
|
||||
<el-input v-model="formData.socialActivities" placeholder="请输入社会活动" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 健康信息 -->
|
||||
<el-divider content-position="left">健康信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="身高(cm)" prop="heightRange">
|
||||
<el-input v-model="formData.heightRange[0]" placeholder="最小值" style="width: 45%" />
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input v-model="formData.heightRange[1]" placeholder="最大值" style="width: 45%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="体重(kg)" prop="weightRange">
|
||||
<el-input v-model="formData.weightRange[0]" placeholder="最小值" style="width: 45%" />
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input v-model="formData.weightRange[1]" placeholder="最大值" style="width: 45%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="血型" prop="bloodType">
|
||||
<el-select v-model="formData.bloodType" placeholder="请选择血型" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in xg_blood_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="健康状况" prop="healthStatus">
|
||||
<el-input v-model="formData.healthStatus" placeholder="请输入健康状况" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="残疾类型" prop="disabilityType">
|
||||
<el-select v-model="formData.disabilityType" placeholder="请选择残疾类型" clearable multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="dict in disability_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="残疾等级" prop="disabilityLevel">
|
||||
<el-input v-model="formData.disabilityLevel" placeholder="请输入残疾等级" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="特殊体质或疾病" prop="specialCondition">
|
||||
<el-input v-model="formData.specialCondition" placeholder="请输入特殊体质或疾病" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="病史" prop="medicalHistory">
|
||||
<el-input v-model="formData.medicalHistory" placeholder="请输入病史" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="过敏史" prop="allergies">
|
||||
<el-input v-model="formData.allergies" placeholder="请输入过敏史" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 时间范围 -->
|
||||
<el-divider content-position="left">时间范围</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建时间" prop="createTimeRange">
|
||||
<el-date-picker
|
||||
v-model="formData.createTimeRange"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="更新时间" prop="updateTimeRange">
|
||||
<el-date-picker
|
||||
v-model="formData.updateTimeRange"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
<el-button type="primary" @click="handleSearch">检索</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed, getCurrentInstance, toRefs } from 'vue';
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
// 字典数据 - 使用proxy?.useDict获取
|
||||
const {
|
||||
sys_user_sex,
|
||||
xg_nation,
|
||||
xg_political_status,
|
||||
marital_status,
|
||||
admission_category,
|
||||
zsjy_education_level,
|
||||
xg_training_mode,
|
||||
house_hold_register_type,
|
||||
student_status,
|
||||
xg_family_economic,
|
||||
sys_yesno,
|
||||
xg_blood_type,
|
||||
disability_type,
|
||||
wenhuachengdu
|
||||
} = toRefs<any>(
|
||||
proxy?.useDict(
|
||||
'sys_user_sex',
|
||||
'xg_nation',
|
||||
'xg_political_status',
|
||||
'marital_status',
|
||||
'admission_category',
|
||||
'zsjy_education_level',
|
||||
'xg_training_mode',
|
||||
'house_hold_register_type',
|
||||
'student_status',
|
||||
'xg_family_economic',
|
||||
'sys_yesno',
|
||||
'xg_blood_type',
|
||||
'disability_type',
|
||||
'wenhuachengdu'
|
||||
)
|
||||
);
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
queryParams: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
visible: false,
|
||||
queryParams: () => ({})
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean];
|
||||
'search': [params: any];
|
||||
'reset': [];
|
||||
}>();
|
||||
|
||||
// 响应式数据
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
const formData = reactive({
|
||||
// 基础信息
|
||||
idCard: '',
|
||||
nameEnglish: '',
|
||||
formerName: '',
|
||||
gender: '',
|
||||
birthDateRange: [] as string[],
|
||||
nationality: [] as string[],
|
||||
nativePlace: '',
|
||||
politicalStatus: [] as string[],
|
||||
hukouLocation: '',
|
||||
homeAddress: '',
|
||||
currentAddress: '',
|
||||
email: '',
|
||||
qq: '',
|
||||
wechat: '',
|
||||
maritalStatus: [] as string[],
|
||||
studentNo: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
educationLevel: [] as string[],
|
||||
|
||||
// 学籍信息
|
||||
enrollmentYear: '',
|
||||
enrollmentDateRange: [] as string[],
|
||||
admissionCategory: [] as string[],
|
||||
schoolSystem: '',
|
||||
academicLevel: [] as string[],
|
||||
trainingType: [] as string[],
|
||||
grade: '',
|
||||
householdRegisterType: [] as string[],
|
||||
studentStatus: [] as string[],
|
||||
isBoarder: [] as string[],
|
||||
dormitoryBuilding: '',
|
||||
|
||||
// 家庭信息
|
||||
fatherName: '',
|
||||
fatherPhone: '',
|
||||
fatherWorkUnit: '',
|
||||
motherName: '',
|
||||
motherPhone: '',
|
||||
motherWorkUnit: '',
|
||||
guardianName: '',
|
||||
guardianPhone: '',
|
||||
guardianRelation: '',
|
||||
familyIncomeRange: [] as string[],
|
||||
perCapitaIncomeRange: [] as string[],
|
||||
incomeSource: '',
|
||||
familyEconomicStatus: [] as string[],
|
||||
familyMembers: null as number | null,
|
||||
emergencyContactName: '',
|
||||
emergencyContactPhone: '',
|
||||
emergencyContactRelation: '',
|
||||
|
||||
// 特殊标识
|
||||
isPoorStudent: [] as string[],
|
||||
isMinority: [] as string[],
|
||||
isDisabled: [] as string[],
|
||||
isOrphan: [] as string[],
|
||||
isLeftBehindChild: [] as string[],
|
||||
isSingleChild: [] as string[],
|
||||
isLowIncome: [] as string[],
|
||||
hasLoan: [] as string[],
|
||||
loanAmountRange: [] as number[],
|
||||
religion: '',
|
||||
sourceRegion: '',
|
||||
|
||||
// 健康信息
|
||||
heightRange: [] as number[],
|
||||
weightRange: [] as number[],
|
||||
bloodType: [] as string[],
|
||||
healthStatus: '',
|
||||
specialCondition: '',
|
||||
medicalHistory: '',
|
||||
allergies: '',
|
||||
disabilityType: [] as string[],
|
||||
disabilityLevel: '',
|
||||
specialties: '',
|
||||
awards: '',
|
||||
violations: '',
|
||||
socialActivities: '',
|
||||
graduateSchool: '',
|
||||
|
||||
// 时间范围
|
||||
createTimeRange: [] as string[],
|
||||
updateTimeRange: [] as string[]
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 方法
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
// 重置所有表单数据
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (Array.isArray(formData[key])) {
|
||||
formData[key] = [];
|
||||
} else if (typeof formData[key] === 'number') {
|
||||
formData[key] = null;
|
||||
} else {
|
||||
formData[key] = '';
|
||||
}
|
||||
});
|
||||
emit('reset');
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
// 构建查询参数
|
||||
const searchParams: any = { ...formData };
|
||||
|
||||
// 处理数组类型的参数
|
||||
if (searchParams.birthDateRange && searchParams.birthDateRange.length === 2) {
|
||||
searchParams.birthDateStart = searchParams.birthDateRange[0];
|
||||
searchParams.birthDateEnd = searchParams.birthDateRange[1];
|
||||
}
|
||||
delete searchParams.birthDateRange;
|
||||
|
||||
if (searchParams.enrollmentDateRange && searchParams.enrollmentDateRange.length === 2) {
|
||||
searchParams.enrollmentDateStart = searchParams.enrollmentDateRange[0];
|
||||
searchParams.enrollmentDateEnd = searchParams.enrollmentDateRange[1];
|
||||
}
|
||||
delete searchParams.enrollmentDateRange;
|
||||
|
||||
if (searchParams.createTimeRange && searchParams.createTimeRange.length === 2) {
|
||||
searchParams.createTimeStart = searchParams.createTimeRange[0];
|
||||
searchParams.createTimeEnd = searchParams.createTimeRange[1];
|
||||
}
|
||||
delete searchParams.createTimeRange;
|
||||
|
||||
if (searchParams.updateTimeRange && searchParams.updateTimeRange.length === 2) {
|
||||
searchParams.updateTimeStart = searchParams.updateTimeRange[0];
|
||||
searchParams.updateTimeEnd = searchParams.updateTimeRange[1];
|
||||
}
|
||||
delete searchParams.updateTimeRange;
|
||||
|
||||
emit('search', searchParams);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
// 监听props变化，同步表单数据
|
||||
watch(
|
||||
() => props.queryParams,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (newVal[key] !== undefined) {
|
||||
// 对于多选字段，确保是数组格式
|
||||
if (Array.isArray(formData[key])) {
|
||||
formData[key] = Array.isArray(newVal[key]) ? newVal[key] : newVal[key] ? [newVal[key]] : [];
|
||||
} else {
|
||||
formData[key] = newVal[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.el-divider__text {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,891 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="1100px" append-to-body @close="handleClose">
|
||||
<el-tabs
|
||||
v-model="activeTab"
|
||||
type="border-card"
|
||||
v-loading="dialogLoading"
|
||||
element-loading-text="正在加载数据，请稍候..."
|
||||
element-loading-background="rgba(0, 0, 0, 0.3)"
|
||||
>
|
||||
<!-- 基础信息Tab -->
|
||||
<el-tab-pane label="基础信息" name="basic">
|
||||
<el-form ref="studentFormRef" :model="form" label-width="100px">
|
||||
<!-- 学生照片和基本信息布局 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学号" prop="studentNo">
|
||||
<el-input v-model="form.studentNo" placeholder="请输入学号" maxlength="32" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="身份证号" prop="idCard">
|
||||
<el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" maxlength="50" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="英文姓名" prop="nameEnglish">
|
||||
<el-input v-model="form.nameEnglish" placeholder="请输入英文姓名" maxlength="100" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="曾用名" prop="formerName">
|
||||
<el-input v-model="form.formerName" placeholder="请输入曾用名" maxlength="50" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="form.gender" placeholder="请选择性别" disabled>
|
||||
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出生日期" prop="birthDate">
|
||||
<el-date-picker
|
||||
v-model="form.birthDate"
|
||||
type="date"
|
||||
placeholder="请选择出生日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="民族" prop="nationality">
|
||||
<el-input v-model="form.nationality" placeholder="请输入民族" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="籍贯" prop="nativePlace">
|
||||
<el-input v-model="form.nativePlace" placeholder="请输入籍贯" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="政治面貌" prop="politicalStatus">
|
||||
<el-input v-model="form.politicalStatus" placeholder="请输入政治面貌" disabled />
|
||||
</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="form.phone" placeholder="请输入手机号码" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电子邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入电子邮箱" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="QQ号码" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ号码" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="微信号" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信号" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="婚姻状况" prop="maritalStatus">
|
||||
<el-select v-model="form.maritalStatus" placeholder="请选择婚姻状况" disabled>
|
||||
<el-option v-for="dict in marital_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="宗教信仰" prop="religion">
|
||||
<el-input v-model="form.religion" placeholder="请输入宗教信仰" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="photoUrl">
|
||||
<template #label>
|
||||
<div class="photo-label-container">
|
||||
<span>学生照片</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="photo-container">
|
||||
<el-avatar :size="120" :src="form.photoUrl || '/src/assets/images/profile.jpg'" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 地址信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="户籍所在地" prop="hukouLocation">
|
||||
<el-input v-model="form.hukouLocation" type="textarea" :rows="2" placeholder="请输入户籍所在地" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="家庭地址" prop="homeAddress">
|
||||
<el-input v-model="form.homeAddress" type="textarea" :rows="2" placeholder="请输入家庭地址" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="现住址" prop="currentAddress">
|
||||
<el-input v-model="form.currentAddress" type="textarea" :rows="2" placeholder="请输入现住址" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="邮政编码" prop="postalCode">
|
||||
<el-input v-model="form.postalCode" placeholder="请输入邮政编码" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="生源地区" prop="sourceRegion">
|
||||
<el-input v-model="form.sourceRegion" placeholder="请输入生源地区" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="毕业院校" prop="graduateSchool">
|
||||
<el-input v-model="form.graduateSchool" placeholder="请输入毕业院校" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="户口类型" prop="householdRegisterType">
|
||||
<el-input v-model="form.householdRegisterType" placeholder="请输入户口类型" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 学籍信息Tab -->
|
||||
<el-tab-pane label="学籍信息" name="academic">
|
||||
<el-form ref="academicFormRef" :model="form" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学籍状态" prop="studentStatus">
|
||||
<el-tag :type="getStatusType(form.studentStatus)">
|
||||
{{ getStudentStatusLabel(form.studentStatus) }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="入学年份" prop="enrollmentYear">
|
||||
<el-input v-model="form.enrollmentYear" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="入学日期" prop="enrollmentDate">
|
||||
<el-date-picker
|
||||
v-model="form.enrollmentDate"
|
||||
type="date"
|
||||
placeholder="请选择入学日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="录取类别" prop="admissionCategory">
|
||||
<el-input v-model="form.admissionCategory" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学制" prop="schoolSystem">
|
||||
<el-input v-model="form.schoolSystem" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学历层次" prop="academicLevel">
|
||||
<el-input v-model="form.academicLevel" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="培养方式" prop="trainingType">
|
||||
<el-input v-model="form.trainingType" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="年级" prop="grade">
|
||||
<el-input v-model="form.grade" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="是否住校" prop="isBoarder">
|
||||
<el-tag :type="form.isBoarder === '1' ? 'success' : 'info'">
|
||||
{{ form.isBoarder === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学院" prop="collegeName">
|
||||
<el-input v-model="form.collegeName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="专业" prop="majorName">
|
||||
<el-input v-model="form.majorName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="班级" prop="className">
|
||||
<el-input v-model="form.className" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="辅导员" prop="counselorName">
|
||||
<el-input v-model="form.counselorName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="班主任" prop="classTeacherName">
|
||||
<el-input v-model="form.classTeacherName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="宿舍楼栋" prop="dormitoryBuilding">
|
||||
<el-input v-model="form.dormitoryBuilding" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="宿舍房间号" prop="dormitoryRoom">
|
||||
<el-input v-model="form.dormitoryRoom" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="银行卡号" prop="bankCardNo">
|
||||
<el-input v-model="form.bankCardNo" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="开户银行" prop="bankName">
|
||||
<el-input v-model="form.bankName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 家庭信息Tab -->
|
||||
<el-tab-pane label="家庭信息" name="family">
|
||||
<el-form ref="familyFormRef" :model="form" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="父亲姓名" prop="fatherName">
|
||||
<el-input v-model="form.fatherName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="父亲电话" prop="fatherPhone">
|
||||
<el-input v-model="form.fatherPhone" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="父亲工作单位" prop="fatherWorkUnit">
|
||||
<el-input v-model="form.fatherWorkUnit" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="母亲姓名" prop="motherName">
|
||||
<el-input v-model="form.motherName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="母亲电话" prop="motherPhone">
|
||||
<el-input v-model="form.motherPhone" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="母亲工作单位" prop="motherWorkUnit">
|
||||
<el-input v-model="form.motherWorkUnit" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="监护人姓名" prop="guardianName">
|
||||
<el-input v-model="form.guardianName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="监护人电话" prop="guardianPhone">
|
||||
<el-input v-model="form.guardianPhone" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="监护人关系" prop="guardianRelation">
|
||||
<el-input v-model="form.guardianRelation" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="家庭年收入" prop="familyIncome">
|
||||
<el-input v-model="form.familyIncome" disabled>
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="人均收入" prop="perCapitaIncome">
|
||||
<el-input v-model="form.perCapitaIncome" disabled>
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="收入来源" prop="incomeSource">
|
||||
<el-input v-model="form.incomeSource" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="家庭经济状况" prop="familyEconomicStatus">
|
||||
<el-input v-model="form.familyEconomicStatus" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="家庭成员数量" prop="familyMembers">
|
||||
<el-input v-model="form.familyMembers" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人" prop="emergencyContactName">
|
||||
<el-input v-model="form.emergencyContactName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
|
||||
<el-input v-model="form.emergencyContactPhone" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人关系" prop="emergencyContactRelation">
|
||||
<el-input v-model="form.emergencyContactRelation" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 特殊标识Tab -->
|
||||
<el-tab-pane label="特殊标识" name="special">
|
||||
<el-form ref="specialFormRef" :model="form" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否贫困生" prop="isPoorStudent">
|
||||
<el-tag :type="form.isPoorStudent === '1' ? 'warning' : 'info'">
|
||||
{{ form.isPoorStudent === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否少数民族" prop="isMinority">
|
||||
<el-tag :type="form.isMinority === '1' ? 'success' : 'info'">
|
||||
{{ form.isMinority === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否残疾" prop="isDisabled">
|
||||
<el-tag :type="form.isDisabled === '1' ? 'danger' : 'info'">
|
||||
{{ form.isDisabled === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否孤儿" prop="isOrphan">
|
||||
<el-tag :type="form.isOrphan === '1' ? 'danger' : 'info'">
|
||||
{{ form.isOrphan === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否留守儿童" prop="isLeftBehindChild">
|
||||
<el-tag :type="form.isLeftBehindChild === '1' ? 'warning' : 'info'">
|
||||
{{ form.isLeftBehindChild === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否独生子女" prop="isSingleChild">
|
||||
<el-tag :type="form.isSingleChild === '1' ? 'success' : 'info'">
|
||||
{{ form.isSingleChild === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否低保" prop="isLowIncome">
|
||||
<el-tag :type="form.isLowIncome === '1' ? 'warning' : 'info'">
|
||||
{{ form.isLowIncome === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否有助学贷款" prop="hasLoan">
|
||||
<el-tag :type="form.hasLoan === '1' ? 'warning' : 'info'">
|
||||
{{ form.hasLoan === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="助学贷款金额" prop="loanAmount">
|
||||
<el-input v-model="form.loanAmount" disabled>
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="残疾类型" prop="disabilityType">
|
||||
<el-input v-model="form.disabilityType" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="残疾等级" prop="disabilityLevel">
|
||||
<el-input v-model="form.disabilityLevel" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 健康信息Tab -->
|
||||
<el-tab-pane label="健康信息" name="health">
|
||||
<el-form ref="healthFormRef" :model="form" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="身高" prop="height">
|
||||
<el-input v-model="form.height" disabled>
|
||||
<template #append>cm</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="体重" prop="weight">
|
||||
<el-input v-model="form.weight" disabled>
|
||||
<template #append>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="血型" prop="bloodType">
|
||||
<el-input v-model="form.bloodType" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="健康状况" prop="healthStatus">
|
||||
<el-input v-model="form.healthStatus" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="特殊体质或疾病" prop="specialCondition">
|
||||
<el-input v-model="form.specialCondition" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="病史" prop="medicalHistory">
|
||||
<el-input v-model="form.medicalHistory" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="过敏史" prop="allergies">
|
||||
<el-input v-model="form.allergies" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="特长爱好" prop="specialties">
|
||||
<el-input v-model="form.specialties" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="获奖情况" prop="awards">
|
||||
<el-input v-model="form.awards" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="违纪记录" prop="violations">
|
||||
<el-input v-model="form.violations" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="社会活动" prop="socialActivities">
|
||||
<el-input v-model="form.socialActivities" type="textarea" :rows="3" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch, onMounted } from 'vue';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
studentId: number | null;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
visible: false,
|
||||
studentId: null
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
// 响应式数据
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
const dialogTitle = ref('学生详情');
|
||||
const activeTab = ref('basic');
|
||||
const dialogLoading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
// 基础信息
|
||||
id: null as number | null,
|
||||
studentNo: '',
|
||||
idCard: '',
|
||||
name: '',
|
||||
nameEnglish: '',
|
||||
formerName: '',
|
||||
gender: '',
|
||||
birthDate: '',
|
||||
nationality: '',
|
||||
nativePlace: '',
|
||||
politicalStatus: '',
|
||||
hukouLocation: '',
|
||||
homeAddress: '',
|
||||
currentAddress: '',
|
||||
postalCode: '',
|
||||
photoUrl: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
qq: '',
|
||||
wechat: '',
|
||||
maritalStatus: '',
|
||||
religion: '',
|
||||
sourceRegion: '',
|
||||
graduateSchool: '',
|
||||
householdRegisterType: '',
|
||||
|
||||
// 学籍信息
|
||||
studentStatus: '',
|
||||
enrollmentYear: '',
|
||||
enrollmentDate: '',
|
||||
admissionCategory: '',
|
||||
schoolSystem: '',
|
||||
academicLevel: '',
|
||||
trainingType: '',
|
||||
grade: '',
|
||||
isBoarder: '',
|
||||
collegeName: '',
|
||||
majorName: '',
|
||||
className: '',
|
||||
counselorName: '',
|
||||
classTeacherName: '',
|
||||
dormitoryBuilding: '',
|
||||
dormitoryRoom: '',
|
||||
bankCardNo: '',
|
||||
bankName: '',
|
||||
|
||||
// 家庭信息
|
||||
fatherName: '',
|
||||
fatherPhone: '',
|
||||
fatherWorkUnit: '',
|
||||
motherName: '',
|
||||
motherPhone: '',
|
||||
motherWorkUnit: '',
|
||||
guardianName: '',
|
||||
guardianPhone: '',
|
||||
guardianRelation: '',
|
||||
familyIncome: '',
|
||||
perCapitaIncome: '',
|
||||
incomeSource: '',
|
||||
familyEconomicStatus: '',
|
||||
familyMembers: '',
|
||||
emergencyContactName: '',
|
||||
emergencyContactPhone: '',
|
||||
emergencyContactRelation: '',
|
||||
|
||||
// 特殊标识
|
||||
isPoorStudent: '',
|
||||
isMinority: '',
|
||||
isDisabled: '',
|
||||
isOrphan: '',
|
||||
isLeftBehindChild: '',
|
||||
isSingleChild: '',
|
||||
isLowIncome: '',
|
||||
hasLoan: '',
|
||||
loanAmount: '',
|
||||
disabilityType: '',
|
||||
disabilityLevel: '',
|
||||
|
||||
// 健康信息
|
||||
height: '',
|
||||
weight: '',
|
||||
bloodType: '',
|
||||
healthStatus: '',
|
||||
specialCondition: '',
|
||||
medicalHistory: '',
|
||||
allergies: '',
|
||||
specialties: '',
|
||||
awards: '',
|
||||
violations: '',
|
||||
socialActivities: ''
|
||||
});
|
||||
|
||||
// 字典数据
|
||||
const sys_user_sex = ref([
|
||||
{ value: '0', label: '男' },
|
||||
{ value: '1', label: '女' }
|
||||
]);
|
||||
|
||||
const marital_status = ref([
|
||||
{ value: '1', label: '未婚' },
|
||||
{ value: '2', label: '已婚' },
|
||||
{ value: '3', label: '离异' },
|
||||
{ value: '4', label: '丧偶' }
|
||||
]);
|
||||
|
||||
// 模拟数据
|
||||
const mockStudentData = {
|
||||
id: 1,
|
||||
studentNo: '2021001',
|
||||
idCard: '110101200001011234',
|
||||
name: '张三',
|
||||
nameEnglish: 'Zhang San',
|
||||
formerName: '',
|
||||
gender: '0',
|
||||
birthDate: '2000-01-01',
|
||||
nationality: '汉族',
|
||||
nativePlace: '北京市',
|
||||
politicalStatus: '共青团员',
|
||||
hukouLocation: '北京市朝阳区',
|
||||
homeAddress: '北京市朝阳区某某街道某某小区',
|
||||
currentAddress: '北京市海淀区某某大学宿舍',
|
||||
postalCode: '100000',
|
||||
photoUrl: '',
|
||||
phone: '13800138001',
|
||||
email: 'zhangsan@example.com',
|
||||
qq: '123456789',
|
||||
wechat: 'zhangsan123',
|
||||
maritalStatus: '1',
|
||||
religion: '',
|
||||
sourceRegion: '北京市',
|
||||
graduateSchool: '北京市第一中学',
|
||||
householdRegisterType: '非农业',
|
||||
|
||||
// 学籍信息
|
||||
studentStatus: '1',
|
||||
enrollmentYear: '2021',
|
||||
enrollmentDate: '2021-09-01',
|
||||
admissionCategory: '统招',
|
||||
schoolSystem: '4',
|
||||
academicLevel: '本科',
|
||||
trainingType: '全日制',
|
||||
grade: '2021',
|
||||
isBoarder: '1',
|
||||
collegeName: '计算机学院',
|
||||
majorName: '软件工程',
|
||||
className: '软件2101班',
|
||||
counselorName: '李老师',
|
||||
classTeacherName: '王老师',
|
||||
dormitoryBuilding: '1号楼',
|
||||
dormitoryRoom: '101',
|
||||
bankCardNo: '6222021234567890123',
|
||||
bankName: '中国工商银行',
|
||||
|
||||
// 家庭信息
|
||||
fatherName: '张父',
|
||||
fatherPhone: '13900139001',
|
||||
fatherWorkUnit: '某某公司',
|
||||
motherName: '张母',
|
||||
motherPhone: '13900139002',
|
||||
motherWorkUnit: '某某单位',
|
||||
guardianName: '张父',
|
||||
guardianPhone: '13900139001',
|
||||
guardianRelation: '父亲',
|
||||
familyIncome: '120000',
|
||||
perCapitaIncome: '40000',
|
||||
incomeSource: '工资收入',
|
||||
familyEconomicStatus: '一般',
|
||||
familyMembers: '3',
|
||||
emergencyContactName: '张父',
|
||||
emergencyContactPhone: '13900139001',
|
||||
emergencyContactRelation: '父亲',
|
||||
|
||||
// 特殊标识
|
||||
isPoorStudent: '0',
|
||||
isMinority: '0',
|
||||
isDisabled: '0',
|
||||
isOrphan: '0',
|
||||
isLeftBehindChild: '0',
|
||||
isSingleChild: '1',
|
||||
isLowIncome: '0',
|
||||
hasLoan: '0',
|
||||
loanAmount: '0',
|
||||
disabilityType: '',
|
||||
disabilityLevel: '',
|
||||
|
||||
// 健康信息
|
||||
height: '175',
|
||||
weight: '65',
|
||||
bloodType: 'A型',
|
||||
healthStatus: '良好',
|
||||
specialCondition: '',
|
||||
medicalHistory: '',
|
||||
allergies: '',
|
||||
specialties: '篮球、编程',
|
||||
awards: '校级优秀学生',
|
||||
violations: '',
|
||||
socialActivities: '学生会成员、志愿者'
|
||||
};
|
||||
|
||||
// 方法
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'1': 'success',
|
||||
'2': 'warning',
|
||||
'3': 'info',
|
||||
'4': 'danger',
|
||||
'5': 'info'
|
||||
};
|
||||
return statusMap[status] || 'info';
|
||||
};
|
||||
|
||||
const getStudentStatusLabel = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'1': '在籍',
|
||||
'2': '休学',
|
||||
'3': '复学',
|
||||
'4': '退学',
|
||||
'5': '毕业'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
};
|
||||
|
||||
const loadStudentData = async (studentId: number) => {
|
||||
dialogLoading.value = true;
|
||||
try {
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// 使用模拟数据
|
||||
Object.assign(form, mockStudentData);
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载学生数据失败:', error);
|
||||
} finally {
|
||||
dialogLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听studentId变化
|
||||
watch(() => props.studentId, (newId) => {
|
||||
if (newId && dialogVisible.value) {
|
||||
loadStudentData(newId);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (visible && props.studentId) {
|
||||
loadStudentData(props.studentId);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.photo-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.photo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user