招生报名信息页面优化记录

时间: 2025-07-15 18:30:00 修改人: wuzhen

功能优化

调整内容

调换搜索区域字段顺序：
- 将所属学院选择框提前，报考专业选择框放在后面
- 优化布局，保持一致的样式和宽度
改进搜索区域布局：
- 采用响应式网格布局，每行显示4个搜索条件
- 将固定宽度改为自适应宽度，更好适应不同屏幕尺寸
- 优化标签和输入框对齐方式，提升整体美观度
实现学院与专业的联动：
- 将报考专业字段从输入框改为下拉选择框
- 根据选择的学院自动筛选对应的专业列表
- 当学院选择变化时，清空并更新专业选项
数据来源优化：
- 从字典数据和部门数据两个来源获取专业信息
- 对专业数据进行去重处理，确保选项不重复
- 参考了新增报名信息页面的实现方式
操作按钮布局优化：
- 将操作按钮（新增、修改、删除、导出、批量审核）调整为垂直布局
- 按钮从标题旁改为放置在标题下方，更加符合用户阅读和操作习惯
- 搜索展开/收起控件单独放在标题行右侧，与主操作按钮分离

具体修改

前端布局改进：

<!-- 修改前：内联布局，固定宽度 -->
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
  <el-form-item label="报考专业" prop="appliedMajor">
    <el-input v-model="queryParams.appliedMajor" placeholder="请输入报考专业" clearable style="width: 240px" />
  </el-form-item>
  <el-form-item label="所属学院" prop="collegeId">
    <el-select v-model="queryParams.collegeId" placeholder="请选择学院" clearable style="width: 240px">
      <!-- 学院选项 -->
    </el-select>
  </el-form-item>
  <!-- 其他搜索条件... -->
</el-form>

<!-- 修改后：响应式网格布局，自适应宽度 -->
<el-form :model="queryParams" ref="queryFormRef" label-width="80px">
  <el-row :gutter="20">
    <!-- 第一行：4个条件 -->
    <el-col :span="6">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable />
      </el-form-item>
    </el-col>
    <!-- 更多表单项... -->
  </el-row>
  <el-row :gutter="20">
    <!-- 第二行：4个条件，包括学院和专业 -->
    <el-col :span="6">
      <el-form-item label="所属学院" prop="collegeId">
        <el-select v-model="queryParams.collegeId" placeholder="请选择学院" clearable class="w-100" @change="onSearchCollegeChange">
          <!-- 学院选项 -->
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="报考专业" prop="appliedMajor">
        <el-select v-model="queryParams.appliedMajor" placeholder="请选择报考专业" clearable class="w-100">
          <el-option v-for="major in searchMajorOptions" :key="major.value" :label="major.label" :value="major.value" />
        </el-select>
      </el-form-item>
    </el-col>
    <!-- 更多表单项... -->
  </el-row>
</el-form>

添加响应式数据和CSS类：

// 搜索区域的专业选项
const searchMajorOptions = ref<Array<{ value: string, label: string }>>([]);

/* 添加全宽样式类，用于表单控件的自适应宽度 */
.w-100 {
  width: 100% !important;
}

添加联动处理函数：

// 搜索区域学院选择变化时的处理
const onSearchCollegeChange = (selectedCollegeId: string) => {
  queryParams.value.appliedMajor = ''; // 清空专业选择
  if (!selectedCollegeId) {
    searchMajorOptions.value = [];
    return;
  }

  // 从多个来源获取专业数据并进行整合、去重
  const majors: Array<{ value: string, label: string }> = [];

  // 从字典数据获取
  if (zsjy_major.value) {
    const filteredMajors = zsjy_major.value.filter(
      item => item.cssClass === selectedCollegeId
    );
    majors.push(...filteredMajors.map(m => ({ value: m.value, label: m.label })));
  }

  // 从部门数据获取
  const college = collegeOptions.value.find(c => c.deptCategory === selectedCollegeId);
  if (college && majorOptionsByCollege.value[college.deptId]) {
    const deptMajors = majorOptionsByCollege.value[college.deptId];
    majors.push(...deptMajors.map(m => ({
      value: m.deptName,
      label: m.deptName
    })));
  }

  // 去重处理
  searchMajorOptions.value = majors.filter((item, index, self) =>
    index === self.findIndex(m => m.value === item.value)
  );
};

操作按钮布局优化：

<!-- 修改前：横向按钮布局 -->
<div class="card-header">
  <span class="toolbar-title">招生信息管理</span>
  <div class="toolbar-actions">
    <el-button>新增</el-button>
    <el-button>修改</el-button>
    <!-- 更多按钮... -->
    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  </div>
</div>

<!-- 修改后：垂直布局 -->
<div class="card-header-vertical">
  <span class="toolbar-title">招生信息管理</span>
  <div class="search-toggle">
    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  </div>
</div>
<div class="button-group">
  <el-button>新增</el-button>
  <el-button>修改</el-button>
  <!-- 更多按钮... -->
</div>

效果

改进后的搜索区域布局整齐美观，每行显示4个搜索条件，更加直观高效
输入框和下拉框宽度实现自适应，在不同屏幕分辨率下都能合理展示
搜索条件按照使用频率和关联性排列，学院和专业条件相邻放置
实现了学院和专业的联动筛选，提高了用户体验和数据准确性
与新增报名信息页面的交互方式保持一致，降低用户学习成本
操作按钮调整为垂直布局，视觉层次更加清晰，符合用户从上到下的阅读和操作习惯

测试验证

在不同屏幕尺寸下验证搜索区域的自适应布局表现
验证每行是否正确显示4个搜索条件，布局是否对齐美观
选择不同学院，验证专业选项是否正确更新
清空学院选择，验证专业选项是否被清空
使用多个搜索条件组合进行搜索，验证搜索结果是否符合预期
验证操作按钮在垂直布局下是否正常工作，展示效果是否美观

责任人

wuzhen

6.7 KiB Raw Blame History Unescape Escape

招生报名信息页面优化记录

功能优化

调整内容

具体修改

效果

测试验证

责任人

6.7 KiB

Raw Blame History