提交学生花名册
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布局优化，不涉及业务逻辑变更，所有字段的数据绑定和验证规则保持不变。
|
||||
Reference in new issue
Block a user