提交学生花名册
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,423 @@
|
||||
# 高级检索界面字典数据获取方式优化 - 2025-01-27
|
||||
|
||||
## 📋 变更概述
|
||||
|
||||
**变更时间**: 2025-01-27 14:30:00
|
||||
**变更人员**: AI Assistant
|
||||
**变更类型**: 代码优化
|
||||
**影响范围**: 高级检索界面字典数据获取方式
|
||||
|
||||
## 🎯 变更目标
|
||||
|
||||
参考 `stuMsgDialog.vue` 界面的字典数据获取方式，将高级检索界面中的硬编码字典数据替换为使用 `proxy?.useDict` 动态获取字典数据的方式，提高代码的一致性和可维护性。
|
||||
|
||||
## 📝 具体变更内容
|
||||
|
||||
### 1. 文件路径
|
||||
```
|
||||
web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue
|
||||
```
|
||||
|
||||
### 2. 主要变更点
|
||||
|
||||
#### 2.1 导入模块变更
|
||||
```typescript
|
||||
// 变更前
|
||||
import { ref, reactive, watch, computed } from 'vue';
|
||||
|
||||
// 变更后
|
||||
import { ref, reactive, watch, computed, getCurrentInstance, toRefs } from 'vue';
|
||||
```
|
||||
|
||||
#### 2.2 字典数据获取方式变更
|
||||
```typescript
|
||||
// 变更前 - 硬编码字典数据
|
||||
const sys_user_sex = ref([
|
||||
{ value: '0', label: '男' },
|
||||
{ value: '1', label: '女' }
|
||||
]);
|
||||
|
||||
const nationality_options = ref([
|
||||
{ value: '01', label: '汉族' },
|
||||
// ... 大量硬编码数据
|
||||
]);
|
||||
|
||||
// 变更后 - 使用proxy?.useDict动态获取
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
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'
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
#### 2.3 模板中字典引用变更
|
||||
```vue
|
||||
<!-- 变更前 -->
|
||||
<el-option v-for="dict in nationality_options" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
|
||||
<!-- 变更后 -->
|
||||
<el-option v-for="dict in xg_nation" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
```
|
||||
|
||||
### 3. 涉及的字典字段映射
|
||||
|
||||
| 原字段名 | 新字段名 | 字典类型 | 说明 |
|
||||
|---------|---------|---------|------|
|
||||
| `nationality_options` | `xg_nation` | 民族字典 | 学生民族信息 |
|
||||
| `political_status` | `xg_political_status` | 政治面貌字典 | 学生政治面貌 |
|
||||
| `marital_status` | `marital_status` | 婚姻状况字典 | 学生婚姻状况 |
|
||||
| `academic_level` | `zsjy_education_level` | 学历层次字典 | 学生学历层次 |
|
||||
| `training_type` | `xg_training_mode` | 培养方式字典 | 学生培养方式 |
|
||||
| `household_register_type` | `house_hold_register_type` | 户口类型字典 | 学生户口类型 |
|
||||
| `student_status` | `student_status` | 学籍状态字典 | 学生学籍状态 |
|
||||
| `family_economic_status` | `xg_family_economic` | 家庭经济状况字典 | 学生家庭经济状况 |
|
||||
| `yes_no` | `sys_yesno` | 是否字典 | 通用是否选项 |
|
||||
| `blood_type` | `xg_blood_type` | 血型字典 | 学生血型信息 |
|
||||
| `disability_type` | `disability_type` | 残疾类型字典 | 学生残疾类型 |
|
||||
|
||||
### 4. 保留的硬编码字典
|
||||
|
||||
由于以下字典在系统中没有对应的字典类型，暂时保留硬编码：
|
||||
|
||||
```typescript
|
||||
// 学制选项 - 由于没有对应的字典，保留硬编码
|
||||
const school_system = ref([
|
||||
{ value: '3', label: '3年' },
|
||||
{ value: '4', label: '4年' },
|
||||
{ value: '5', label: '5年' }
|
||||
]);
|
||||
|
||||
// 残疾等级选项 - 由于没有对应的字典，保留硬编码
|
||||
const disability_level = ref([
|
||||
{ value: '一级', label: '一级' },
|
||||
{ value: '二级', label: '二级' },
|
||||
{ value: '三级', label: '三级' },
|
||||
{ value: '四级', label: '四级' }
|
||||
]);
|
||||
```
|
||||
|
||||
## ✅ 变更效果
|
||||
|
||||
### 1. 代码一致性提升
|
||||
- 与 `stuMsgDialog.vue` 保持相同的字典数据获取方式
|
||||
- 统一使用 `proxy?.useDict` 动态获取字典数据
|
||||
|
||||
### 2. 可维护性提升
|
||||
- 字典数据统一管理，避免硬编码
|
||||
- 字典变更时无需修改前端代码
|
||||
- 减少代码重复和维护成本
|
||||
|
||||
### 3. 数据准确性提升
|
||||
- 字典数据与后端保持同步
|
||||
- 避免前后端字典数据不一致的问题
|
||||
|
||||
## 🔍 测试验证
|
||||
|
||||
### 1. 功能测试
|
||||
- [x] 高级检索界面正常打开
|
||||
- [x] 所有下拉框选项正常显示
|
||||
- [x] 字典数据正确加载
|
||||
- [x] 检索功能正常工作
|
||||
|
||||
### 2. 兼容性测试
|
||||
- [x] 与现有功能兼容
|
||||
- [x] 不影响其他模块
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- 参考文件: `web/src/views/xg/xsjcxx/stuMsgSupply/stuMsgDialog.vue`
|
||||
- 字典管理规范: `.cursor/cursorrules-backend.md`
|
||||
|
||||
## 🎯 后续优化建议
|
||||
|
||||
1. **字典完善**: 建议为 `school_system` 和 `disability_level` 创建对应的字典类型
|
||||
2. **统一规范**: 建议在其他界面中也采用相同的字典数据获取方式
|
||||
3. **文档更新**: 更新相关API文档，说明字典数据的使用方式
|
||||
|
||||
---
|
||||
|
||||
**变更完成时间**: 2025-01-27 14:45:00
|
||||
**变更状态**: ✅ 已完成
|
||||
**审核状态**: ⏳ 待审核
|
||||
|
||||
---
|
||||
|
||||
# 高级检索界面添加文化程度字段 - 2025-01-27
|
||||
|
||||
## 📋 变更概述
|
||||
|
||||
**变更时间**: 2025-01-27 15:00:00
|
||||
**变更人员**: AI Assistant
|
||||
**变更类型**: 功能增强
|
||||
**影响范围**: 高级检索界面基础信息部分
|
||||
|
||||
## 🎯 变更目标
|
||||
|
||||
在高级检索界面的基础信息部分，在宗教信仰字段后面添加文化程度下拉框，提供更全面的学生信息检索条件。
|
||||
|
||||
## 📝 具体变更内容
|
||||
|
||||
### 1. 文件路径
|
||||
```
|
||||
web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue
|
||||
```
|
||||
|
||||
### 2. 主要变更点
|
||||
|
||||
#### 2.1 模板变更
|
||||
在基础信息部分的宗教信仰字段后面添加文化程度下拉框：
|
||||
|
||||
```vue
|
||||
<!-- 新增文化程度字段 -->
|
||||
<el-col :span="6">
|
||||
<el-form-item label="文化程度" prop="educationLevel">
|
||||
<el-select v-model="formData.educationLevel" placeholder="请选择文化程度" clearable>
|
||||
<el-option v-for="dict in wenhuachengdu" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
```
|
||||
|
||||
#### 2.2 数据模型变更
|
||||
在formData中添加educationLevel字段：
|
||||
|
||||
```typescript
|
||||
const formData = reactive({
|
||||
// 基础信息
|
||||
// ... 其他字段
|
||||
educationLevel: '', // 新增文化程度字段
|
||||
// ... 其他字段
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 字段说明
|
||||
|
||||
| 字段名 | 类型 | 字典类型 | 说明 |
|
||||
|--------|------|----------|------|
|
||||
| `educationLevel` | string | `wenhuachengdu` | 学生文化程度 |
|
||||
|
||||
### 4. 字典数据来源
|
||||
使用已有的 `wenhuachengdu` 字典数据，包含：
|
||||
- 小学、初中、高中、中专、大专、本科、硕士、博士等选项
|
||||
|
||||
## ✅ 变更效果
|
||||
|
||||
### 1. 功能增强
|
||||
- 新增文化程度检索条件
|
||||
- 提供更全面的学生信息检索功能
|
||||
|
||||
### 2. 界面优化
|
||||
- 保持与现有字段一致的布局风格
|
||||
- 使用统一的下拉框组件和字典数据
|
||||
|
||||
### 3. 数据一致性
|
||||
- 与 `stuMsgDialog.vue` 中的文化程度字段保持一致
|
||||
- 使用相同的字典数据源
|
||||
|
||||
## 🔍 测试验证
|
||||
|
||||
### 1. 功能测试
|
||||
- [x] 文化程度下拉框正常显示
|
||||
- [x] 字典数据正确加载
|
||||
- [x] 选择功能正常工作
|
||||
- [x] 清空功能正常工作
|
||||
- [x] 检索功能包含文化程度条件
|
||||
|
||||
### 2. 界面测试
|
||||
- [x] 布局美观，与其他字段对齐
|
||||
- [x] 响应式布局正常
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- 参考文件: `web/src/views/xg/xsjcxx/stuMsgSupply/stuMsgDialog.vue`
|
||||
- 字典类型: `wenhuachengdu` (文化程度字典)
|
||||
|
||||
---
|
||||
|
||||
**变更完成时间**: 2025-01-27 15:05:00
|
||||
**变更状态**: ✅ 已完成
|
||||
**审核状态**: ⏳ 待审核
|
||||
|
||||
## 2025-01-27 高级检索界面多选下拉框优化
|
||||
|
||||
### 📋 变更概述
|
||||
将学生花名册高级检索界面中选项数量超过2个的下拉框改为多选下拉框，提升检索功能的灵活性和用户体验。
|
||||
|
||||
### 🔧 具体变更
|
||||
|
||||
#### 1. 多选下拉框字段列表
|
||||
以下字段从单选改为多选（添加 `multiple collapse-tags collapse-tags-tooltip` 属性）：
|
||||
|
||||
**基础信息模块**：
|
||||
- 民族 (`nationality`) - 56个选项
|
||||
- 政治面貌 (`politicalStatus`) - 13个选项
|
||||
- 文化程度 (`educationLevel`) - 多个选项
|
||||
- 婚姻状况 (`maritalStatus`) - 4个选项
|
||||
- 户口类型 (`householdRegisterType`) - 2个选项
|
||||
|
||||
**学籍信息模块**：
|
||||
- 录取类别 (`admissionCategory`) - 多个选项
|
||||
- 学历层次 (`academicLevel`) - 多个选项
|
||||
- 培养方式 (`trainingType`) - 6个选项
|
||||
- 学籍状态 (`studentStatus`) - 5个选项
|
||||
- 是否住校 (`isBoarder`) - 2个选项
|
||||
|
||||
**家庭信息模块**：
|
||||
- 家庭经济状况 (`familyEconomicStatus`) - 4个选项
|
||||
|
||||
**扩展信息模块**：
|
||||
- 是否贫困生 (`isPoorStudent`) - 2个选项
|
||||
- 是否少数民族 (`isMinority`) - 2个选项
|
||||
- 是否残疾 (`isDisabled`) - 2个选项
|
||||
- 是否孤儿 (`isOrphan`) - 2个选项
|
||||
- 是否留守儿童 (`isLeftBehindChild`) - 2个选项
|
||||
- 是否独生子女 (`isSingleChild`) - 2个选项
|
||||
- 是否低保 (`isLowIncome`) - 2个选项
|
||||
- 是否有助学贷款 (`hasLoan`) - 2个选项
|
||||
|
||||
**健康信息模块**：
|
||||
- 血型 (`bloodType`) - 5个选项
|
||||
- 残疾类型 (`disabilityType`) - 多个选项
|
||||
- 残疾等级 (`disabilityLevel`) - 改为输入框
|
||||
|
||||
#### 2. 数据结构调整
|
||||
|
||||
**表单数据类型变更**：
|
||||
```typescript
|
||||
// 变更前
|
||||
nationality: '',
|
||||
politicalStatus: '',
|
||||
maritalStatus: '',
|
||||
disabilityLevel: [] as string[],
|
||||
|
||||
// 变更后
|
||||
nationality: [] as string[],
|
||||
politicalStatus: [] as string[],
|
||||
maritalStatus: [] as string[],
|
||||
disabilityLevel: '', // 改为字符串类型
|
||||
```
|
||||
|
||||
#### 3. 功能优化
|
||||
|
||||
**重置功能优化**：
|
||||
- 多选字段重置为空数组 `[]`
|
||||
- 数字字段重置为 `null`
|
||||
- 字符串字段重置为空字符串 `''`
|
||||
|
||||
**数据同步优化**：
|
||||
- 监听props变化时，确保多选字段正确处理数组格式
|
||||
- 支持从单选值自动转换为数组格式
|
||||
|
||||
### 🎯 变更效果
|
||||
|
||||
#### 用户体验提升
|
||||
1. **检索灵活性**：支持同时选择多个选项进行检索
|
||||
2. **界面友好性**：使用 `collapse-tags` 和 `collapse-tags-tooltip` 优化多选显示
|
||||
3. **操作便捷性**：一键清空所有选择，支持批量操作
|
||||
|
||||
#### 功能增强
|
||||
1. **多条件检索**：可以同时检索多个民族、政治面貌等条件
|
||||
2. **精确匹配**：支持精确的多值匹配检索
|
||||
3. **数据完整性**：保持与后端API的数据格式一致性
|
||||
|
||||
### 📁 涉及文件
|
||||
- `web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue`
|
||||
|
||||
### ✅ 测试建议
|
||||
1. 测试多选下拉框的选择和取消功能
|
||||
2. 测试多选数据的检索功能
|
||||
3. 测试重置功能是否正确清空多选字段
|
||||
4. 测试与父组件的数据同步功能
|
||||
5. 测试残疾等级输入框的输入和清空功能
|
||||
|
||||
---
|
||||
|
||||
**变更时间**: 2025-01-27 15:30:00
|
||||
**变更人员**: AI Assistant
|
||||
**变更类型**: 功能优化
|
||||
**影响范围**: 学生花名册高级检索界面
|
||||
|
||||
---
|
||||
|
||||
## 2025-01-27 残疾等级字段优化
|
||||
|
||||
### 📋 变更概述
|
||||
将高级检索界面中的残疾等级字段从多选下拉框改为输入框，提供更灵活的检索方式。
|
||||
|
||||
### 🔧 具体变更
|
||||
|
||||
#### 1. 界面组件变更
|
||||
- **残疾等级字段**：从 `el-select` 多选下拉框改为 `el-input` 输入框
|
||||
- **移除硬编码选项**：删除不再使用的 `disability_level` 选项数组
|
||||
|
||||
#### 2. 数据结构调整
|
||||
```typescript
|
||||
// 变更前
|
||||
disabilityLevel: [] as string[],
|
||||
|
||||
// 变更后
|
||||
disabilityLevel: '',
|
||||
```
|
||||
|
||||
#### 3. 功能优化
|
||||
- 支持自由输入残疾等级信息
|
||||
- 支持模糊匹配检索
|
||||
- 保持清空功能
|
||||
|
||||
### 🎯 变更效果
|
||||
|
||||
#### 用户体验提升
|
||||
1. **输入灵活性**：支持任意残疾等级文本输入
|
||||
2. **检索精确性**：支持模糊匹配和精确匹配
|
||||
3. **操作简便性**：直接输入，无需选择固定选项
|
||||
|
||||
#### 功能增强
|
||||
1. **自由检索**：不再受限于固定的4个等级选项
|
||||
2. **扩展性**：支持更多残疾等级分类
|
||||
3. **兼容性**：与现有数据格式保持兼容
|
||||
|
||||
### 📁 涉及文件
|
||||
- `web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue`
|
||||
|
||||
### ✅ 测试建议
|
||||
1. 测试残疾等级输入框的输入功能
|
||||
2. 测试输入内容的清空功能
|
||||
3. 测试与检索功能的集成
|
||||
4. 测试数据同步功能
|
||||
|
||||
---
|
||||
|
||||
**变更时间**: 2025-01-27 16:00:00
|
||||
**变更人员**: AI Assistant
|
||||
**变更类型**: 功能优化
|
||||
**影响范围**: 学生花名册高级检索界面
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,171 @@
|
||||
# 学生花名册卡片视图分页插件修复记录
|
||||
|
||||
**日期**: 2025-01-27
|
||||
**用户**: AI Assistant
|
||||
**文件**: `web/src/views/xg/xsjcxx/stuRoster/index.vue`
|
||||
|
||||
## 问题描述
|
||||
|
||||
学生花名册页面的卡片视图中，分页插件未显示，用户无法进行分页操作。
|
||||
|
||||
## 问题分析
|
||||
|
||||
1. **CSS布局问题**: 卡片视图容器使用了固定高度布局，导致分页容器被挤压或隐藏
|
||||
2. **v-model语法问题**: 使用了Vue 3不支持的v-model语法
|
||||
3. **TypeScript类型问题**: 部分类型定义不符合Element Plus组件要求
|
||||
|
||||
## 修复内容
|
||||
|
||||
### 1. CSS布局修复
|
||||
|
||||
**修改前**:
|
||||
```css
|
||||
.card-view-container {
|
||||
min-height: 400px;
|
||||
height: calc(100vh - 320px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-scroll-container {
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-pagination-container {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
margin-top: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
**修改后**:
|
||||
```css
|
||||
.card-view-container {
|
||||
min-height: 400px;
|
||||
height: calc(100vh - 320px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-pagination-container {
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
margin-top: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. v-model语法修复
|
||||
|
||||
**修改前**:
|
||||
```vue
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
```
|
||||
|
||||
**修改后**:
|
||||
```vue
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:page="queryParams.pageNum"
|
||||
:limit="queryParams.pageSize"
|
||||
:total="total"
|
||||
@update:page="(val) => queryParams.pageNum = val"
|
||||
@update:limit="(val) => queryParams.pageSize = val"
|
||||
@pagination="getList"
|
||||
/>
|
||||
```
|
||||
|
||||
### 3. TypeScript类型修复
|
||||
|
||||
**修改前**:
|
||||
```typescript
|
||||
const columns = ref([
|
||||
{ key: 'studentNo', label: '学号', visible: true },
|
||||
// ...
|
||||
]);
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'1': 'success',
|
||||
// ...
|
||||
};
|
||||
return statusMap[status] || 'info';
|
||||
};
|
||||
```
|
||||
|
||||
**修改后**:
|
||||
```typescript
|
||||
const columns = ref([
|
||||
{ key: 0, label: '学号', visible: true },
|
||||
// ...
|
||||
]);
|
||||
|
||||
const getStatusType = (status: string): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
|
||||
const statusMap: Record<string, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
|
||||
'1': 'success',
|
||||
// ...
|
||||
};
|
||||
return statusMap[status] || 'info';
|
||||
};
|
||||
```
|
||||
|
||||
## 修复效果
|
||||
|
||||
1. ✅ **分页插件正常显示**: 卡片视图底部分页插件现在可以正常显示
|
||||
2. ✅ **布局结构优化**: 使用flexbox布局确保各区域合理分配空间
|
||||
3. ✅ **语法兼容性**: 修复了Vue 3语法兼容性问题
|
||||
4. ✅ **类型安全**: 修复了TypeScript类型错误
|
||||
|
||||
## 技术要点
|
||||
|
||||
1. **Flexbox布局**: 使用`display: flex`和`flex-direction: column`实现垂直布局
|
||||
2. **空间分配**: 内容区域使用`flex: 1`自适应，分页区域使用`flex-shrink: 0`固定高度
|
||||
3. **Vue 3语法**: 使用`:prop`和`@update:prop`替代`v-model:prop`
|
||||
4. **类型安全**: 明确定义函数返回类型和对象属性类型
|
||||
|
||||
## 测试验证
|
||||
|
||||
- [x] 卡片视图分页插件正常显示
|
||||
- [x] 分页功能正常工作
|
||||
- [x] 响应式布局正常
|
||||
- [x] 无TypeScript编译错误
|
||||
- [x] 无Vue语法错误
|
||||
|
||||
## 相关文件
|
||||
|
||||
- `web/src/views/xg/xsjcxx/stuRoster/index.vue` - 主要修复文件
|
||||
- `web/src/components/Pagination/index.vue` - 分页组件
|
||||
- `web/src/types/global.d.ts` - 全局类型定义
|
||||
|
||||
---
|
||||
|
||||
**修复完成时间**: 2025-01-27 15:30:00
|
||||
**修复状态**: ✅ 已完成
|
||||
**影响范围**: 学生花名册页面卡片视图功能
|
||||
@@ -0,0 +1,174 @@
|
||||
# 学生花名册列表视图滚动条修复记录
|
||||
|
||||
**日期**: 2025-01-27
|
||||
**用户**: AI Assistant
|
||||
**文件**: `web/src/views/xg/xsjcxx/stuRoster/index.vue`
|
||||
|
||||
## 问题描述
|
||||
|
||||
学生花名册页面的列表视图中，当分页选择50条数据一页时，表格内容超出了可视区域，但没有出现滚动条，用户无法查看完整的数据列表。
|
||||
|
||||
## 问题分析
|
||||
|
||||
1. **表格高度限制缺失**: 表格没有设置最大高度限制，导致内容超出可视区域
|
||||
2. **滚动条样式缺失**: 没有为表格添加滚动条样式，即使内容超出也无法滚动
|
||||
3. **响应式高度计算缺失**: 没有根据页面布局动态计算表格的最大高度
|
||||
|
||||
## 修复内容
|
||||
|
||||
### 1. 添加表格高度限制
|
||||
|
||||
**修改前**:
|
||||
```vue
|
||||
<el-table v-loading="loading" border :data="studentList" @selection-change="handleSelectionChange">
|
||||
```
|
||||
|
||||
**修改后**:
|
||||
```vue
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="studentList"
|
||||
:max-height="tableMaxHeight"
|
||||
class="scroll-table"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
```
|
||||
|
||||
### 2. 添加响应式高度计算
|
||||
|
||||
**新增代码**:
|
||||
```javascript
|
||||
// 计算表格最大高度
|
||||
const tableMaxHeight = computed(() => {
|
||||
// 基础高度：视窗高度减去头部、搜索区域、工具栏、分页等区域的高度
|
||||
const baseHeight = window.innerHeight;
|
||||
const headerHeight = 60; // 页面头部
|
||||
const searchHeight = showSearch.value ? 120 : 0; // 搜索区域
|
||||
const toolbarHeight = 60; // 工具栏
|
||||
const paginationHeight = 60; // 分页区域
|
||||
const padding = 40; // 其他边距
|
||||
|
||||
return baseHeight - headerHeight - searchHeight - toolbarHeight - paginationHeight - padding;
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 添加表格滚动条样式
|
||||
|
||||
**新增CSS样式**:
|
||||
```css
|
||||
/* 表格视图容器 */
|
||||
.table-view-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 表格滚动条样式 */
|
||||
.scroll-table :deep(.el-table__body-wrapper) {
|
||||
overflow-x: auto !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll-table :deep(.el-table__header-wrapper) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 强制显示表格滚动条 - 适用于所有浏览器 */
|
||||
.scroll-table :deep(.el-table__body-wrapper) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #409eff #f0f0f0;
|
||||
}
|
||||
|
||||
/* Webkit 浏览器的滚动条样式 */
|
||||
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar {
|
||||
height: 12px !important;
|
||||
width: 12px !important;
|
||||
}
|
||||
|
||||
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
|
||||
background: #f0f0f0 !important;
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
}
|
||||
|
||||
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
|
||||
background: #409eff !important;
|
||||
border-radius: 6px !important;
|
||||
border: 2px solid #f0f0f0 !important;
|
||||
min-height: 20px !important;
|
||||
}
|
||||
|
||||
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
|
||||
background: #337ecc !important;
|
||||
}
|
||||
|
||||
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:active {
|
||||
background: #2b6cb0 !important;
|
||||
}
|
||||
|
||||
/* 确保滚动条始终可见的额外设置 */
|
||||
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-corner {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
/* 固定列样式优化 */
|
||||
.scroll-table :deep(.el-table__fixed-right) {
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.scroll-table :deep(.el-table__fixed-left) {
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 确保固定列在滚动时有正确的背景色 */
|
||||
.scroll-table :deep(.el-table__fixed-right .el-table__cell),
|
||||
.scroll-table :deep(.el-table__fixed-left .el-table__cell) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 表格行悬停效果在固定列上的同步 */
|
||||
.scroll-table :deep(.el-table__row:hover .el-table__cell) {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
```
|
||||
|
||||
## 修复效果
|
||||
|
||||
### 修复前
|
||||
- 分页选择50条数据时，表格内容超出可视区域
|
||||
- 没有滚动条，用户无法查看完整数据
|
||||
- 用户体验差，数据查看困难
|
||||
|
||||
### 修复后
|
||||
- 表格自动计算最大高度，适应页面布局
|
||||
- 当内容超出时自动显示滚动条
|
||||
- 滚动条样式美观，与系统主题一致
|
||||
- 支持横向和纵向滚动
|
||||
- 固定列在滚动时保持正确显示
|
||||
|
||||
## 技术要点
|
||||
|
||||
1. **响应式高度计算**: 使用computed属性动态计算表格最大高度
|
||||
2. **滚动条样式**: 兼容Webkit和Firefox浏览器的滚动条样式
|
||||
3. **固定列优化**: 确保固定列在滚动时有正确的阴影和背景色
|
||||
4. **用户体验**: 滚动条样式与系统主题保持一致，提供良好的视觉反馈
|
||||
|
||||
## 测试验证
|
||||
|
||||
- ✅ 分页选择10条数据：表格正常显示，无滚动条
|
||||
- ✅ 分页选择20条数据：表格正常显示，无滚动条
|
||||
- ✅ 分页选择30条数据：表格正常显示，无滚动条
|
||||
- ✅ 分页选择50条数据：表格显示滚动条，可正常滚动查看所有数据
|
||||
- ✅ 横向滚动：当列数较多时，横向滚动条正常工作
|
||||
- ✅ 固定列：操作列固定在右侧，滚动时保持可见
|
||||
|
||||
## 相关文件
|
||||
|
||||
- **主要文件**: `web/src/views/xg/xsjcxx/stuRoster/index.vue`
|
||||
- **参考文件**: `web/src/views/xg-xx-bak/studentInfo/index.vue` (滚动条样式参考)
|
||||
|
||||
---
|
||||
|
||||
**修复完成时间**: 2025-01-27 15:30:00
|
||||
**修复状态**: ✅ 已完成
|
||||
**测试状态**: ✅ 已验证
|
||||
@@ -1,119 +1,74 @@
|
||||
# 学生信息管理页面字典数据修改记录
|
||||
# 代码调整记录 - 2025-01-27
|
||||
|
||||
**修改时间**: 2025-01-27 15:30:00
|
||||
**修改人**: wuzilong
|
||||
**修改文件**: `web/src/views/xg/xsjcxx/studentMsg/studentMsg/index.vue`
|
||||
## 修改时间
|
||||
2025-01-27 14:30:00
|
||||
|
||||
## 修改人员
|
||||
wuzilong
|
||||
|
||||
## 修改内容
|
||||
|
||||
### 1. 新增字典类型
|
||||
在字典数据获取中添加了以下新的字典类型：
|
||||
- `xg_family_economic` - 家庭经济状况
|
||||
- `xg_blood_type` - 血型
|
||||
- `disability_type` - 残疾类型
|
||||
- `zsjy_education_level` - 学历层次
|
||||
- `xg_training_mode` - 培养方式
|
||||
- `admission_category` - 录取类别
|
||||
- `student_status` - 学籍状态
|
||||
### 高级检索弹出框学籍信息优化
|
||||
|
||||
### 2. 修改表单选择框
|
||||
将以下字段的硬编码选项改为使用字典数据：
|
||||
**文件**: `web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue`
|
||||
|
||||
#### 基础信息表单
|
||||
- **家庭经济状况**: 从硬编码选项改为使用 `xg_family_economic` 字典
|
||||
- **血型**: 从硬编码选项改为使用 `xg_blood_type` 字典
|
||||
- **残疾类型**: 从硬编码选项改为使用 `disability_type` 字典
|
||||
|
||||
#### 学籍信息表单
|
||||
- **学历层次**: 从硬编码选项改为使用 `zsjy_education_level` 字典
|
||||
- **培养方式**: 从硬编码选项改为使用 `xg_training_mode` 字典
|
||||
- **录取类别**: 从硬编码选项改为使用 `admission_category` 字典
|
||||
- **学籍状态**: 从硬编码选项改为使用 `student_status` 字典
|
||||
|
||||
### 3. 修改查询表单
|
||||
- **学籍状态查询**: 从使用 `sys_normal_disable` 改为使用 `student_status` 字典
|
||||
1. **学制字段改为输入框**
|
||||
- 将学制从下拉选择框改为文本输入框
|
||||
- 移除 `school_system` 字典数据依赖
|
||||
- 用户可以直接输入学制信息
|
||||
|
||||
### 4. 修改映射函数
|
||||
更新了以下映射函数，使其使用字典数据：
|
||||
- `getFamilyEconomicStatusLabel()` - 家庭经济状况映射
|
||||
- `getBloodTypeLabel()` - 血型映射
|
||||
- `getDisabilityTypeLabel()` - 残疾类型映射
|
||||
- `getAcademicLevelLabel()` - 学历层次映射
|
||||
- `getTrainingModeLabel()` - 培养方式映射
|
||||
- `getAdmissionCategoryLabel()` - 录取类别映射
|
||||
- `getStudentStatusLabel()` - 学籍状态映射
|
||||
- `getStatusLabel()` - 状态标签映射
|
||||
2. **新增学籍状态检索条件**
|
||||
- 在学籍信息部分新增"学籍状态"字段
|
||||
- 添加 `student_status` 字典数据，包含：在读、休学、退学、毕业、结业、肄业
|
||||
- 位置：学籍信息部分的最后一行
|
||||
|
||||
### 5. 修改详情页面显示
|
||||
详情页面中的相关字段显示已经使用了对应的映射函数，无需额外修改。
|
||||
3. **新增是否住校检索条件**
|
||||
- 在学籍信息部分新增"是否住校"字段
|
||||
- 使用现有的 `yes_no` 字典数据
|
||||
- 位置：学籍信息部分的最后一行
|
||||
|
||||
## 技术细节
|
||||
4. **新增宿舍楼栋检索条件**
|
||||
- 在学籍信息部分新增"宿舍楼栋"字段
|
||||
- 使用文本输入框，支持模糊检索
|
||||
- 位置：学籍信息部分的最后一行
|
||||
|
||||
### 字典数据获取
|
||||
```javascript
|
||||
const {
|
||||
// ... 原有字典
|
||||
xg_family_economic,
|
||||
xg_blood_type,
|
||||
disability_type,
|
||||
zsjy_education_level,
|
||||
xg_training_mode,
|
||||
admission_category,
|
||||
student_status
|
||||
} = toRefs<any>(
|
||||
proxy?.useDict(
|
||||
// ... 原有字典类型
|
||||
'xg_family_economic',
|
||||
'xg_blood_type',
|
||||
'disability_type',
|
||||
'zsjy_education_level',
|
||||
'xg_training_mode',
|
||||
'admission_category',
|
||||
'student_status'
|
||||
)
|
||||
);
|
||||
```
|
||||
5. **户口类型字段位置调整**
|
||||
- 将户口类型从学籍信息部分移动到基础信息部分
|
||||
- 位置：基础信息中户籍地址的前一行
|
||||
- 保持字段功能和字典数据不变
|
||||
|
||||
### 映射函数示例
|
||||
```javascript
|
||||
/** 家庭经济状况码表映射 */
|
||||
const getFamilyEconomicStatusLabel = (value: string | number) => {
|
||||
const dict = xg_family_economic.value.find((item: any) => item.value === String(value));
|
||||
return dict ? dict.label : value || '未知';
|
||||
};
|
||||
```
|
||||
6. **修复重复字段问题**
|
||||
- 移除特殊标识部分重复的"是否住校"字段
|
||||
- 修复 `familyMembers` 字段类型错误（从string改为number）
|
||||
|
||||
### 表单选择框示例
|
||||
```vue
|
||||
<el-form-item label="家庭经济状况" prop="familyEconomicStatus">
|
||||
<el-select v-model="form.familyEconomicStatus" placeholder="请选择家庭经济状况">
|
||||
<el-option v-for="dict in xg_family_economic" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
```
|
||||
7. **家庭收入字段优化**
|
||||
- 家庭年收入标签添加单位"(元)"
|
||||
- 人均收入标签添加单位"(元)"
|
||||
- 将两个字段的输入框从数字输入框改为普通文本输入框
|
||||
- 保持范围查询功能（最小值-最大值）
|
||||
- 数据类型从number数组改为string数组
|
||||
- 输入框宽度优化：从45%调整为40%，分隔符间距从5px调整为3px
|
||||
|
||||
## 影响范围
|
||||
#### 技术细节
|
||||
|
||||
### 正面影响
|
||||
1. **数据一致性**: 所有相关字段现在都从统一的字典表获取数据，确保数据一致性
|
||||
2. **维护性**: 字典数据可以在后台统一管理，无需修改前端代码
|
||||
3. **扩展性**: 新增选项只需在字典表中添加，无需修改前端代码
|
||||
4. **标准化**: 符合项目的字典数据使用规范
|
||||
- 新增字段在 `formData` 中正确定义
|
||||
- 字典数据 `student_status` 已添加到组件中
|
||||
- 表单布局保持一致性，每行4个字段
|
||||
- 所有新增字段都支持清空操作
|
||||
|
||||
### 注意事项
|
||||
1. **字典数据依赖**: 需要确保后端字典表中已配置相应的字典类型和数据
|
||||
2. **数据迁移**: 如果数据库中已有数据，需要确保数据格式与字典值匹配
|
||||
3. **测试验证**: 需要测试所有相关功能，确保字典数据正确显示
|
||||
#### 影响范围
|
||||
|
||||
## 后续工作
|
||||
- 学生花名册高级检索功能
|
||||
- 检索条件更加完善，支持按学籍状态、住宿情况进行筛选
|
||||
- 用户体验提升，检索条件更加直观
|
||||
|
||||
1. **字典数据配置**: 确保后端字典表中已配置所有新增的字典类型
|
||||
2. **数据验证**: 验证现有数据与字典值的匹配情况
|
||||
3. **功能测试**: 测试学生信息的增删改查功能
|
||||
4. **文档更新**: 更新相关的API文档和业务文档
|
||||
## 验证状态
|
||||
- [x] 代码语法检查通过
|
||||
- [x] 字段类型正确
|
||||
- [x] 字典数据完整
|
||||
- [x] 布局合理
|
||||
|
||||
## 相关文档
|
||||
|
||||
- 字典管理规范
|
||||
- 学生信息管理API文档
|
||||
- 前端开发规范
|
||||
## 备注
|
||||
本次修改提升了学生信息检索的灵活性和准确性，特别是针对学籍状态和住宿情况的检索需求。
|
||||
@@ -1,66 +1,82 @@
|
||||
# 学生信息导入VO类字段缺失问题修复记录
|
||||
# 代码调整记录 - 2025-07-31
|
||||
|
||||
**变更时间**: 2025-07-31 18:00:00
|
||||
**变更人员**: wuzilong
|
||||
**变更类型**: Bug修复
|
||||
**影响范围**: 学生信息批量导入功能
|
||||
**调整时间**: 2025-07-31 16:00:00
|
||||
**调整人员**: wuzilong
|
||||
**调整文件**: `web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue`
|
||||
|
||||
## 问题描述
|
||||
## 调整内容
|
||||
|
||||
在执行学生信息批量导入时，发现SQL插入语句中缺少了很多字段，导致数据不完整。通过分析发现是`XgStudentMsgImportVo`类中缺少了多个重要字段，导致`BeanUtil.toBean()`转换时无法正确映射。
|
||||
### 高级检索弹窗布局优化
|
||||
|
||||
## 问题原因
|
||||
#### 1. 特殊标识改为扩展信息
|
||||
- **修改位置**: 第318行
|
||||
- **修改内容**: 将 `<el-divider content-position="left">特殊标识</el-divider>` 改为 `<el-divider content-position="left">扩展信息</el-divider>`
|
||||
|
||||
1. **基础字段被注释**: `deleted`、`createBy`、`updateBy`字段在VO类中被注释掉了
|
||||
2. **重要业务字段缺失**: `nativePlace`、`sourceRegion`、`counselorId`、`counselorName`字段在VO类中不存在
|
||||
3. **Bean转换失败**: 由于字段不匹配，导致`BeanUtil.toBean(studentVo, XgStudentMsgBo.class)`转换时丢失数据
|
||||
#### 2. 字段重新布局
|
||||
- **特长爱好**: 从健康信息部分移动到扩展信息最后面，改为占一行（span="24"）
|
||||
- **获奖情况**: 从健康信息部分移动到扩展信息最后面，改为占一行（span="24"）
|
||||
- **违纪记录**: 从健康信息部分移动到扩展信息最后面，改为占一行（span="24"）
|
||||
- **社会活动**: 从时间范围部分移动到扩展信息最后面，改为占一行（span="24"）
|
||||
|
||||
## 修复内容
|
||||
#### 3. 时间范围布局调整
|
||||
- **创建时间**: 从span="6"改为span="12"，占两列
|
||||
- **更新时间**: 从span="6"改为span="12"，占两列
|
||||
|
||||
### 1. 恢复基础字段
|
||||
```java
|
||||
// 恢复以下字段的声明（保持@ExcelProperty注解注释状态）
|
||||
private Long deleted; // 删除标志
|
||||
private Long createBy; // 创建者
|
||||
private Long updateBy; // 更新者
|
||||
#### 4. 毕业院校位置调整
|
||||
- **修改位置**: 从时间范围部分移动到学籍信息部分的年级后面
|
||||
- **布局**: 保持span="6"，与其他学籍信息字段保持一致
|
||||
|
||||
## 调整效果
|
||||
|
||||
### 布局优化
|
||||
1. **扩展信息部分**: 将相关字段统一归类，提高信息组织性
|
||||
2. **时间范围**: 创建时间和更新时间各占两列，提供更大的日期选择空间
|
||||
3. **学籍信息**: 毕业院校与年级等学籍信息放在一起，逻辑更清晰
|
||||
4. **长文本字段**: 特长爱好、获奖情况、违纪记录、社会活动等长文本字段各占一行，提供更好的输入体验
|
||||
|
||||
### 用户体验提升
|
||||
- 信息分类更加清晰，便于用户快速定位所需字段
|
||||
- 长文本字段有更大的输入空间
|
||||
- 时间选择器有更宽的操作区域
|
||||
- 相关字段集中放置，减少用户查找时间
|
||||
|
||||
## 技术细节
|
||||
|
||||
### 修改的文件结构
|
||||
```
|
||||
web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue
|
||||
├── 基础信息 (保持不变)
|
||||
├── 学籍信息 (新增毕业院校)
|
||||
├── 家庭信息 (保持不变)
|
||||
├── 扩展信息 (重命名 + 新增4个字段)
|
||||
├── 健康信息 (移除4个字段)
|
||||
└── 时间范围 (布局调整)
|
||||
```
|
||||
|
||||
### 2. 添加缺失的业务字段
|
||||
```java
|
||||
// 添加籍贯字段
|
||||
@ExcelProperty(value = "籍贯")
|
||||
private String nativePlace;
|
||||
### 字段移动清单
|
||||
| 字段名称 | 原位置 | 新位置 | 布局调整 |
|
||||
|---------|--------|--------|----------|
|
||||
| 特长爱好 | 健康信息 | 扩展信息 | span="6" → span="24" |
|
||||
| 获奖情况 | 健康信息 | 扩展信息 | span="6" → span="24" |
|
||||
| 违纪记录 | 健康信息 | 扩展信息 | span="6" → span="24" |
|
||||
| 社会活动 | 时间范围 | 扩展信息 | span="6" → span="24" |
|
||||
| 毕业院校 | 时间范围 | 学籍信息 | span="6" → span="6" |
|
||||
| 创建时间 | 时间范围 | 时间范围 | span="6" → span="12" |
|
||||
| 更新时间 | 时间范围 | 时间范围 | span="6" → span="12" |
|
||||
|
||||
// 添加生源地区字段
|
||||
@ExcelProperty(value = "生源地区")
|
||||
private String sourceRegion;
|
||||
## 验证结果
|
||||
|
||||
// 添加辅导员相关字段
|
||||
@ExcelProperty(value = "辅导员ID")
|
||||
private Long counselorId;
|
||||
- ✅ 代码语法检查通过
|
||||
- ✅ 布局调整符合设计要求
|
||||
- ✅ 字段功能保持不变
|
||||
- ✅ 响应式数据绑定正常
|
||||
|
||||
@ExcelProperty(value = "辅导员姓名")
|
||||
private String counselorName;
|
||||
```
|
||||
## 影响范围
|
||||
|
||||
## 修复文件
|
||||
- **影响组件**: 学生花名册高级检索弹窗
|
||||
- **影响功能**: 高级检索功能
|
||||
- **兼容性**: 完全向后兼容，不影响现有功能
|
||||
|
||||
- `backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/domain/vo/XgStudentMsgImportVo.java`
|
||||
---
|
||||
|
||||
## 验证方法
|
||||
|
||||
1. 重新执行学生信息批量导入
|
||||
2. 检查SQL插入语句是否包含完整的字段
|
||||
3. 验证导入的数据是否完整
|
||||
|
||||
## 影响评估
|
||||
|
||||
- **正面影响**: 修复了学生信息导入功能，确保数据完整性
|
||||
- **风险**: 无，只是恢复了缺失的字段声明
|
||||
- **兼容性**: 完全兼容，不影响现有功能
|
||||
|
||||
## 后续建议
|
||||
|
||||
1. 建立VO类和BO类字段映射检查机制
|
||||
2. 在开发过程中确保VO类包含所有必要的字段
|
||||
3. 定期检查Bean转换的完整性
|
||||
**备注**: 本次调整仅涉及UI布局优化，不涉及业务逻辑变更，所有字段的数据绑定和验证规则保持不变。
|
||||
@@ -0,0 +1,323 @@
|
||||
{
|
||||
"globals": {
|
||||
"Component": true,
|
||||
"ComponentPublicInstance": true,
|
||||
"ComputedRef": true,
|
||||
"DirectiveBinding": true,
|
||||
"EffectScope": true,
|
||||
"ElLoading": true,
|
||||
"ElMessage": true,
|
||||
"ElMessageBox": true,
|
||||
"ElNotification": true,
|
||||
"ExtractDefaultPropTypes": true,
|
||||
"ExtractPropTypes": true,
|
||||
"ExtractPublicPropTypes": true,
|
||||
"InjectionKey": true,
|
||||
"MaybeRef": true,
|
||||
"MaybeRefOrGetter": true,
|
||||
"PropType": true,
|
||||
"Ref": true,
|
||||
"Slot": true,
|
||||
"Slots": true,
|
||||
"VNode": true,
|
||||
"WritableComputedRef": true,
|
||||
"acceptHMRUpdate": true,
|
||||
"asyncComputed": true,
|
||||
"autoResetRef": true,
|
||||
"computed": true,
|
||||
"computedAsync": true,
|
||||
"computedEager": true,
|
||||
"computedInject": true,
|
||||
"computedWithControl": true,
|
||||
"controlledComputed": true,
|
||||
"controlledRef": true,
|
||||
"createApp": true,
|
||||
"createEventHook": true,
|
||||
"createGlobalState": true,
|
||||
"createInjectionState": true,
|
||||
"createPinia": true,
|
||||
"createReactiveFn": true,
|
||||
"createRef": true,
|
||||
"createReusableTemplate": true,
|
||||
"createSharedComposable": true,
|
||||
"createTemplatePromise": true,
|
||||
"createUnrefFn": true,
|
||||
"customRef": true,
|
||||
"debouncedRef": true,
|
||||
"debouncedWatch": true,
|
||||
"defineAsyncComponent": true,
|
||||
"defineComponent": true,
|
||||
"defineStore": true,
|
||||
"eagerComputed": true,
|
||||
"effectScope": true,
|
||||
"extendRef": true,
|
||||
"getActivePinia": true,
|
||||
"getCurrentInstance": true,
|
||||
"getCurrentScope": true,
|
||||
"h": true,
|
||||
"ignorableWatch": true,
|
||||
"inject": true,
|
||||
"injectLocal": true,
|
||||
"isDefined": true,
|
||||
"isProxy": true,
|
||||
"isReactive": true,
|
||||
"isReadonly": true,
|
||||
"isRef": true,
|
||||
"makeDestructurable": true,
|
||||
"mapActions": true,
|
||||
"mapGetters": true,
|
||||
"mapState": true,
|
||||
"mapStores": true,
|
||||
"mapWritableState": true,
|
||||
"markRaw": true,
|
||||
"nextTick": true,
|
||||
"onActivated": true,
|
||||
"onBeforeMount": true,
|
||||
"onBeforeRouteLeave": true,
|
||||
"onBeforeRouteUpdate": true,
|
||||
"onBeforeUnmount": true,
|
||||
"onBeforeUpdate": true,
|
||||
"onClickOutside": true,
|
||||
"onDeactivated": true,
|
||||
"onElementRemoval": true,
|
||||
"onErrorCaptured": true,
|
||||
"onKeyStroke": true,
|
||||
"onLongPress": true,
|
||||
"onMounted": true,
|
||||
"onRenderTracked": true,
|
||||
"onRenderTriggered": true,
|
||||
"onScopeDispose": true,
|
||||
"onServerPrefetch": true,
|
||||
"onStartTyping": true,
|
||||
"onUnmounted": true,
|
||||
"onUpdated": true,
|
||||
"onWatcherCleanup": true,
|
||||
"pausableWatch": true,
|
||||
"provide": true,
|
||||
"provideLocal": true,
|
||||
"reactify": true,
|
||||
"reactifyObject": true,
|
||||
"reactive": true,
|
||||
"reactiveComputed": true,
|
||||
"reactiveOmit": true,
|
||||
"reactivePick": true,
|
||||
"readonly": true,
|
||||
"ref": true,
|
||||
"refAutoReset": true,
|
||||
"refDebounced": true,
|
||||
"refDefault": true,
|
||||
"refThrottled": true,
|
||||
"refWithControl": true,
|
||||
"resolveComponent": true,
|
||||
"resolveRef": true,
|
||||
"resolveUnref": true,
|
||||
"setActivePinia": true,
|
||||
"setMapStoreSuffix": true,
|
||||
"shallowReactive": true,
|
||||
"shallowReadonly": true,
|
||||
"shallowRef": true,
|
||||
"storeToRefs": true,
|
||||
"syncRef": true,
|
||||
"syncRefs": true,
|
||||
"templateRef": true,
|
||||
"throttledRef": true,
|
||||
"throttledWatch": true,
|
||||
"toRaw": true,
|
||||
"toReactive": true,
|
||||
"toRef": true,
|
||||
"toRefs": true,
|
||||
"toValue": true,
|
||||
"triggerRef": true,
|
||||
"tryOnBeforeMount": true,
|
||||
"tryOnBeforeUnmount": true,
|
||||
"tryOnMounted": true,
|
||||
"tryOnScopeDispose": true,
|
||||
"tryOnUnmounted": true,
|
||||
"unref": true,
|
||||
"unrefElement": true,
|
||||
"until": true,
|
||||
"useActiveElement": true,
|
||||
"useAnimate": true,
|
||||
"useArrayDifference": true,
|
||||
"useArrayEvery": true,
|
||||
"useArrayFilter": true,
|
||||
"useArrayFind": true,
|
||||
"useArrayFindIndex": true,
|
||||
"useArrayFindLast": true,
|
||||
"useArrayIncludes": true,
|
||||
"useArrayJoin": true,
|
||||
"useArrayMap": true,
|
||||
"useArrayReduce": true,
|
||||
"useArraySome": true,
|
||||
"useArrayUnique": true,
|
||||
"useAsyncQueue": true,
|
||||
"useAsyncState": true,
|
||||
"useAttrs": true,
|
||||
"useBase64": true,
|
||||
"useBattery": true,
|
||||
"useBluetooth": true,
|
||||
"useBreakpoints": true,
|
||||
"useBroadcastChannel": true,
|
||||
"useBrowserLocation": true,
|
||||
"useCached": true,
|
||||
"useClipboard": true,
|
||||
"useClipboardItems": true,
|
||||
"useCloned": true,
|
||||
"useColorMode": true,
|
||||
"useConfirmDialog": true,
|
||||
"useCountdown": true,
|
||||
"useCounter": true,
|
||||
"useCssModule": true,
|
||||
"useCssVar": true,
|
||||
"useCssVars": true,
|
||||
"useCurrentElement": true,
|
||||
"useCycleList": true,
|
||||
"useDark": true,
|
||||
"useDateFormat": true,
|
||||
"useDebounce": true,
|
||||
"useDebounceFn": true,
|
||||
"useDebouncedRefHistory": true,
|
||||
"useDeviceMotion": true,
|
||||
"useDeviceOrientation": true,
|
||||
"useDevicePixelRatio": true,
|
||||
"useDevicesList": true,
|
||||
"useDisplayMedia": true,
|
||||
"useDocumentVisibility": true,
|
||||
"useDraggable": true,
|
||||
"useDropZone": true,
|
||||
"useElementBounding": true,
|
||||
"useElementByPoint": true,
|
||||
"useElementHover": true,
|
||||
"useElementSize": true,
|
||||
"useElementVisibility": true,
|
||||
"useEventBus": true,
|
||||
"useEventListener": true,
|
||||
"useEventSource": true,
|
||||
"useEyeDropper": true,
|
||||
"useFavicon": true,
|
||||
"useFetch": true,
|
||||
"useFileDialog": true,
|
||||
"useFileSystemAccess": true,
|
||||
"useFocus": true,
|
||||
"useFocusWithin": true,
|
||||
"useFps": true,
|
||||
"useFullscreen": true,
|
||||
"useGamepad": true,
|
||||
"useGeolocation": true,
|
||||
"useId": true,
|
||||
"useIdle": true,
|
||||
"useImage": true,
|
||||
"useInfiniteScroll": true,
|
||||
"useIntersectionObserver": true,
|
||||
"useInterval": true,
|
||||
"useIntervalFn": true,
|
||||
"useKeyModifier": true,
|
||||
"useLastChanged": true,
|
||||
"useLink": true,
|
||||
"useLocalStorage": true,
|
||||
"useMagicKeys": true,
|
||||
"useManualRefHistory": true,
|
||||
"useMediaControls": true,
|
||||
"useMediaQuery": true,
|
||||
"useMemoize": true,
|
||||
"useMemory": true,
|
||||
"useModel": true,
|
||||
"useMounted": true,
|
||||
"useMouse": true,
|
||||
"useMouseInElement": true,
|
||||
"useMousePressed": true,
|
||||
"useMutationObserver": true,
|
||||
"useNavigatorLanguage": true,
|
||||
"useNetwork": true,
|
||||
"useNow": true,
|
||||
"useObjectUrl": true,
|
||||
"useOffsetPagination": true,
|
||||
"useOnline": true,
|
||||
"usePageLeave": true,
|
||||
"useParallax": true,
|
||||
"useParentElement": true,
|
||||
"usePerformanceObserver": true,
|
||||
"usePermission": true,
|
||||
"usePointer": true,
|
||||
"usePointerLock": true,
|
||||
"usePointerSwipe": true,
|
||||
"usePreferredColorScheme": true,
|
||||
"usePreferredContrast": true,
|
||||
"usePreferredDark": true,
|
||||
"usePreferredLanguages": true,
|
||||
"usePreferredReducedMotion": true,
|
||||
"usePreferredReducedTransparency": true,
|
||||
"usePrevious": true,
|
||||
"useRafFn": true,
|
||||
"useRefHistory": true,
|
||||
"useResizeObserver": true,
|
||||
"useRoute": true,
|
||||
"useRouter": true,
|
||||
"useSSRWidth": true,
|
||||
"useScreenOrientation": true,
|
||||
"useScreenSafeArea": true,
|
||||
"useScriptTag": true,
|
||||
"useScroll": true,
|
||||
"useScrollLock": true,
|
||||
"useSessionStorage": true,
|
||||
"useShare": true,
|
||||
"useSlots": true,
|
||||
"useSorted": true,
|
||||
"useSpeechRecognition": true,
|
||||
"useSpeechSynthesis": true,
|
||||
"useStepper": true,
|
||||
"useStorage": true,
|
||||
"useStorageAsync": true,
|
||||
"useStyleTag": true,
|
||||
"useSupported": true,
|
||||
"useSwipe": true,
|
||||
"useTemplateRef": true,
|
||||
"useTemplateRefsList": true,
|
||||
"useTextDirection": true,
|
||||
"useTextSelection": true,
|
||||
"useTextareaAutosize": true,
|
||||
"useThrottle": true,
|
||||
"useThrottleFn": true,
|
||||
"useThrottledRefHistory": true,
|
||||
"useTimeAgo": true,
|
||||
"useTimeout": true,
|
||||
"useTimeoutFn": true,
|
||||
"useTimeoutPoll": true,
|
||||
"useTimestamp": true,
|
||||
"useTitle": true,
|
||||
"useToNumber": true,
|
||||
"useToString": true,
|
||||
"useToggle": true,
|
||||
"useTransition": true,
|
||||
"useUrlSearchParams": true,
|
||||
"useUserMedia": true,
|
||||
"useVModel": true,
|
||||
"useVModels": true,
|
||||
"useVibrate": true,
|
||||
"useVirtualList": true,
|
||||
"useWakeLock": true,
|
||||
"useWebNotification": true,
|
||||
"useWebSocket": true,
|
||||
"useWebWorker": true,
|
||||
"useWebWorkerFn": true,
|
||||
"useWindowFocus": true,
|
||||
"useWindowScroll": true,
|
||||
"useWindowSize": true,
|
||||
"watch": true,
|
||||
"watchArray": true,
|
||||
"watchAtMost": true,
|
||||
"watchDebounced": true,
|
||||
"watchDeep": true,
|
||||
"watchEffect": true,
|
||||
"watchIgnorable": true,
|
||||
"watchImmediate": true,
|
||||
"watchOnce": true,
|
||||
"watchPausable": true,
|
||||
"watchPostEffect": true,
|
||||
"watchSyncEffect": true,
|
||||
"watchThrottled": true,
|
||||
"watchTriggerable": true,
|
||||
"watchWithFilter": true,
|
||||
"whenever": true
|
||||
}
|
||||
}
|
||||
@@ -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