zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

前端代码

Browse Source
This commit is contained in:
liumengyu
2026-08-21 18:42:51 +08:00
parent 054947482f
commit 04e06a9c9a
762 changed files with 62992 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/student/statusChange/index.vue
+272
View File
@@ -0,0 +1,272 @@
<template>
<div class="app-container status-change-page">
<!-- ==================== 1. 查询条件区域 ==================== -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="140px" class="search-form">
<el-row :gutter="24">
<!-- 左栏 -->
<el-col :xs="24" :md="12">
<el-form-item label="年级">
<el-input v-model="searchForm.nj" placeholder="请输入年级" clearable />
</el-form-item>
<el-form-item label="专业">
<el-input v-model="searchForm.zy" placeholder="请输入专业" clearable />
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.pxlxChecked">培训类型</el-checkbox></template>
<el-select v-model="searchForm.pxlx" class="w-full" :disabled="!searchForm.pxlxChecked">
<el-option v-for="item in pxlxOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.pxccChecked">培训层次</el-checkbox></template>
<el-select v-model="searchForm.pxcc" class="w-full" :disabled="!searchForm.pxccChecked">
<el-option v-for="item in pxccOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="学号">
<el-input v-model="searchForm.xh" placeholder="请输入学号" clearable />
</el-form-item>
</el-col>
<!-- 右栏 -->
<el-col :xs="24" :md="12">
<el-form-item label="队别">
<el-input v-model="searchForm.db" placeholder="请输入队别" clearable />
</el-form-item>
<el-form-item label="班次">
<el-input v-model="searchForm.bc" placeholder="请输入班次" clearable />
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.sqlbChecked">学籍异动申请类别</el-checkbox></template>
<el-select v-model="searchForm.sqlb" class="w-full" :disabled="!searchForm.sqlbChecked">
<el-option v-for="item in applyTypeOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.sqztChecked">学籍异动申请状态</el-checkbox></template>
<el-select v-model="searchForm.sqzt" class="w-full" :disabled="!searchForm.sqztChecked">
<el-option v-for="item in applyStatusOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="searchForm.xm" placeholder="请输入姓名" clearable />
</el-form-item>
</el-col>
</el-row>
<div class="search-tip">注意：勾选"选择框"表示启用该项对应的查询条件；文本输入框非空白表示启用对应的查询条件。</div>
<div class="search-actions">
<el-button class="gray-btn" @click="handleSearch">查询</el-button>
</div>
</el-form>
</el-card>
<!-- ==================== 2. 审核意见区域 ==================== -->
<el-card shadow="never" class="opinion-card">
<div class="opinion-row">
<span class="opinion-label">审核意见：</span>
<el-input v-model="auditOpinion" placeholder="请输入审核意见" clearable class="opinion-input" />
<el-button type="primary" @click="handleBatchAudit">提交审核意见</el-button>
</div>
</el-card>
<!-- ==================== 3. 列表标题 ==================== -->
<div class="list-title">学籍异动申请审核列表</div>
<!-- ==================== 4. 数据表格区域 ==================== -->
<el-card shadow="never" class="table-card">
<el-table :data="tableData" stripe border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" align="center" />
<el-table-column prop="xhName" label="学号姓名" min-width="150" show-overflow-tooltip />
<el-table-column prop="bcxx" label="班次信息" min-width="160" show-overflow-tooltip />
<el-table-column prop="applyType" label="申请类型" width="90" align="center" />
<el-table-column prop="reason" label="事由" min-width="120" show-overflow-tooltip />
<el-table-column prop="time" label="时间" width="110" align="center" />
<el-table-column prop="auditOpinion" label="审核意见" min-width="120" show-overflow-tooltip />
<el-table-column prop="status" label="状态" width="90" align="center" />
<el-table-column prop="change" label="学籍异动" width="90" align="center" />
<el-table-column label="操作" width="130" align="center" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" size="small" class="text-primary" @click="handleAudit(row)">审核</el-button>
<el-button type="text" size="small" class="text-primary" @click="handleView(row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
// 模拟列表数据（后端接口未提供，接口就绪后可删除并改为接口加载）
const mockTableData = [
{ id: 1, xhName: '2025010101 张三', bcxx: '2025级炮兵装备运用54队5区队', applyType: '退学', reason: '身体原因', time: '2026-08-20', auditOpinion: '待审核', status: '拟制', change: '退学' },
{ id: 2, xhName: '2025010102 李四', bcxx: '2025级通信工程32队1区队', applyType: '休学', reason: '家庭原因', time: '2026-08-21', auditOpinion: '同意', status: '待审核', change: '休学' },
{ id: 3, xhName: '2024010101 王五', bcxx: '2024级军事指挥51队2区队', applyType: '留级', reason: '成绩不达标', time: '2026-08-22', auditOpinion: '', status: '拟制', change: '留级' }
]
export default {
name: 'StatusChangeIndex',
data() {
return {
// ==================== 下拉选项（字典数据，接口就绪后可由后端字典加载） ====================
pxlxOptions: ['军官基础教育', '士兵职业教育', '研究生教育', '其他'],
pxccOptions: ['无', '本科', '硕士', '博士'],
applyTypeOptions: ['退学', '休学', '留级', '复学', '转专业'],
applyStatusOptions: ['拟制', '待审核', '已通过', '已驳回'],
// ==================== 查询条件 ====================
searchForm: {
nj: '', zy: '', pxlxChecked: false, pxlx: '军官基础教育', pxccChecked: false, pxcc: '无', xh: '',
db: '', bc: '', sqlbChecked: false, sqlb: '退学', sqztChecked: false, sqzt: '拟制', xm: ''
},
// ==================== 审核意见 ====================
auditOpinion: '',
// ==================== 数据表格 ====================
tableData: [],
selectedRows: []
}
},
mounted() {
this.loadData()
},
methods: {
// ==================== 列表加载 ====================
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为 getStatusChangeList
loadData() {
this.tableData = mockTableData.slice()
},
// ==================== 查询 ====================
// TODO: 后端接口未提供，查询为前端模拟；接口就绪后替换为后端查询
handleSearch() {
this.loadData()
this.$message.success('查询完成（前端模拟）')
},
handleSelectionChange(rows) {
this.selectedRows = rows
},
// TODO: 后端接口未提供，审核为前端模拟；接口就绪后替换为 auditStatusChange
handleAudit(row) {
this.$message.info(`审核「${row.xhName}」的申请（前端模拟）`)
},
// TODO: 后端接口未提供，查看为前端模拟；接口就绪后替换为 getStatusChangeDetail
handleView(row) {
this.$message.info(`查看「${row.xhName}」的申请详情（前端模拟）`)
},
/** 批量审核所选 */
// TODO: 后端接口未提供，批量审核为前端模拟；接口就绪后替换为 batchAuditStatusChange
handleBatchAudit() {
if (this.selectedRows.length === 0) {
this.$message.warning('请先选择申请记录')
return
}
if (!this.auditOpinion.trim()) {
this.$message.warning('请输入审核意见')
return
}
const names = this.selectedRows.map((r) => r.xhName).join('、')
this.$message.success(`已对「${names}」提交审核意见（前端模拟）`)
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.status-change-page {
.search-card {
margin-bottom: 16px;
.search-form {
.w-full {
width: 100%;
}
.search-tip {
font-size: 12px;
color: #909399;
margin-top: 8px;
margin-bottom: 8px;
}
.search-actions {
display: flex;
justify-content: flex-end;
padding-top: 12px;
border-top: 1px solid #ebeef5;
}
}
}
.opinion-card {
margin-bottom: 16px;
.opinion-row {
display: flex;
align-items: center;
gap: 12px;
.opinion-label {
font-size: 14px;
font-weight: 600;
color: #303133;
white-space: nowrap;
}
.opinion-input {
flex: 1;
min-width: 0;
}
}
}
.list-title {
font-size: 17px;
font-weight: 700;
color: #000;
margin-bottom: 12px;
}
.table-card {
.el-table {
width: 100%;
::v-deep(.cell) {
font-size: 12px;
}
}
}
.text-primary {
color: #409eff;
padding: 0;
}
.gray-btn {
height: 28px;
padding: 2px 16px;
font-size: 12px;
background: #f5f5f5;
border: 1px solid #c0c4cc;
color: #333;
border-radius: 2px;
&:hover,
&:focus {
background: #ebebeb;
border-color: #c0c4cc;
color: #333;
}
}
}
</style>