liweijie/education
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 机关教学日志2.新增全局表格横向拖拽滚动指令3.学员模块

Browse Source
This commit is contained in:
zhaichao
2026-08-23 15:10:56 +08:00
parent df7800f001
commit d20c490c74
11 changed files with 1922 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/student/warningCondition/index.vue
+535 -6
View File
@@ -1,15 +1,544 @@
<template>
<div class="app-container">
<placeholder-page title="学员学籍预警条件管理" icon="tool"
description="用于配置学员学籍预警的触发条件，如成绩、出勤等指标阈值，支持条件的新增与维护。" />
<div class="app-container warning-condition-page">
<!-- ==================== 1. 查询条件 ==================== -->
<el-card shadow="never" class="search-card">
<el-form ref="searchFormRef" :model="searchForm" label-width="90px" class="search-form">
<el-row :gutter="24">
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
<el-form-item label="名称">
<el-input v-model="searchForm.mc" placeholder="请输入名称" clearable @keyup.enter.native="handleSearch" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
<el-form-item label="培训类型">
<el-input v-model="searchForm.pxlx" placeholder="请输入培训类型" clearable @keyup.enter.native="handleSearch" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
<el-form-item label="培训层次">
<el-input v-model="searchForm.pxcc" placeholder="请输入培训层次" clearable @keyup.enter.native="handleSearch" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
<el-form-item label="状态">
<el-select v-model="searchForm.ty" placeholder="请选择状态" clearable style="width: 100%">
<el-option label="启用" :value="0" />
<el-option label="停用" :value="1" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row class="search-actions-row">
<el-col :span="24" class="search-actions">
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- ==================== 2. 列表 ==================== -->
<el-card shadow="never" class="table-card">
<div class="table-header">
<span class="table-title">预警条件列表：</span>
<div class="table-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增预警条件</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="bh" label="编号" width="100" show-overflow-tooltip />
<el-table-column prop="mc" label="名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="pxlx" label="培训类型" width="120" show-overflow-tooltip />
<el-table-column prop="pxcc" label="培训层次" width="120" show-overflow-tooltip />
<el-table-column prop="bb" label="版本" width="100" show-overflow-tooltip />
<el-table-column prop="xgsj" label="修改时间" width="170" show-overflow-tooltip />
<el-table-column label="停用" width="80" align="center">
<template slot-scope="scope">
<el-tag
:type="scope.row.ty === 1 || scope.row.ty === true ? 'danger' : 'success'"
class="ty-tag"
@click.native="handleToggleDisable(scope.row, scope.row.ty === 1 || scope.row.ty === true ? 0 : 1)"
>
{{ scope.row.ty === 1 || scope.row.ty === true ? '是' : '否' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
<el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
class="pagination-wrapper"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</el-card>
<!-- ==================== 3. 新增/编辑预警条件对话框 ==================== -->
<el-dialog
:title="formTitle"
:visible.sync="formDialogVisible"
width="900px"
:close-on-click-modal="false"
>
<el-form ref="formRef" :model="form" :rules="formRules" label-width="130px" class="form-dialog-form">
<el-divider content-position="left">基本信息</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="名称" prop="mc">
<el-input v-model="form.mc" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训类型" prop="pxlx">
<el-input v-model="form.pxlx" placeholder="请输入培训类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训层次" prop="pxcc">
<el-input v-model="form.pxcc" placeholder="请输入培训层次" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="版本" prop="bb">
<el-input v-model="form.bb" placeholder="请输入版本" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="停用" prop="ty">
<el-switch v-model="form.ty" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="修改时间" prop="xgsj">
<el-date-picker v-model="form.xgsj" type="datetime" placeholder="请选择修改时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">当前学期门数限制</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="考试不及格门数下限">
<el-input-number v-model="form.dqxqksbjgmsxx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考试不及格门数下限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考试不及格门数上限">
<el-input-number v-model="form.dqxqksbjgmssx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考试不及格门数上限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考查不及格门数下限">
<el-input-number v-model="form.dqxqkcbjgmsxx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考查不及格门数下限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考查不及格门数上限">
<el-input-number v-model="form.dqxqkcbjgmssx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考查不及格门数上限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不及格门数下限">
<el-input-number v-model="form.dqxqbjgmsxx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入不及格门数下限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不及格门数上限">
<el-input-number v-model="form.dqxqbjgmssx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入不及格门数上限" />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">全部门数限制</el-divider>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="考试不及格门数下限">
<el-input-number v-model="form.qbksbjgmsxx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考试不及格门数下限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考试不及格门数上限">
<el-input-number v-model="form.qbksbjgmssx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考试不及格门数上限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考查不及格门数下限">
<el-input-number v-model="form.qbkcbjgmsxx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考查不及格门数下限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考查不及格门数上限">
<el-input-number v-model="form.qbkcbjgmssx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入考查不及格门数上限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不及格门数下限">
<el-input-number v-model="form.qbbjgmsxx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入不及格门数下限" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不及格门数上限">
<el-input-number v-model="form.qbbjgmssx" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入不及格门数上限" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="formDialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="formSaving" @click="handleFormSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- ==================== 4. 详情对话框 ==================== -->
<el-dialog title="预警条件详情" :visible.sync="viewDialogVisible" width="800px" :close-on-click-modal="false">
<div v-loading="viewLoading" class="detail-body">
<el-descriptions :column="2" border>
<el-descriptions-item label="编号">{{ viewForm.bh || '-' }}</el-descriptions-item>
<el-descriptions-item label="名称">{{ viewForm.mc || '-' }}</el-descriptions-item>
<el-descriptions-item label="培训类型">{{ viewForm.pxlx || '-' }}</el-descriptions-item>
<el-descriptions-item label="培训层次">{{ viewForm.pxcc || '-' }}</el-descriptions-item>
<el-descriptions-item label="版本">{{ viewForm.bb || '-' }}</el-descriptions-item>
<el-descriptions-item label="修改时间">{{ viewForm.xgsj || '-' }}</el-descriptions-item>
<el-descriptions-item label="当前学期考试不及格门数下限">{{ formatValue(viewForm.dqxqksbjgmsxx) }}</el-descriptions-item>
<el-descriptions-item label="当前学期考试不及格门数上限">{{ formatValue(viewForm.dqxqksbjgmssx) }}</el-descriptions-item>
<el-descriptions-item label="当前学期考查不及格门数下限">{{ formatValue(viewForm.dqxqkcbjgmsxx) }}</el-descriptions-item>
<el-descriptions-item label="当前学期考查不及格门数上限">{{ formatValue(viewForm.dqxqkcbjgmssx) }}</el-descriptions-item>
<el-descriptions-item label="当前学期不及格门数下限">{{ formatValue(viewForm.dqxqbjgmsxx) }}</el-descriptions-item>
<el-descriptions-item label="当前学期不及格门数上限">{{ formatValue(viewForm.dqxqbjgmssx) }}</el-descriptions-item>
<el-descriptions-item label="全部考试不及格门数下限">{{ formatValue(viewForm.qbksbjgmsxx) }}</el-descriptions-item>
<el-descriptions-item label="全部考试不及格门数上限">{{ formatValue(viewForm.qbksbjgmssx) }}</el-descriptions-item>
<el-descriptions-item label="全部考查不及格门数下限">{{ formatValue(viewForm.qbkcbjgmsxx) }}</el-descriptions-item>
<el-descriptions-item label="全部考查不及格门数上限">{{ formatValue(viewForm.qbkcbjgmssx) }}</el-descriptions-item>
<el-descriptions-item label="全部不及格门数下限">{{ formatValue(viewForm.qbbjgmsxx) }}</el-descriptions-item>
<el-descriptions-item label="全部不及格门数上限">{{ formatValue(viewForm.qbbjgmssx) }}</el-descriptions-item>
<el-descriptions-item label="停用">
<el-tag :type="viewForm.ty === 1 || viewForm.ty === true ? 'danger' : 'success'" size="mini">
{{ viewForm.ty === 1 || viewForm.ty === true ? '是' : '否' }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="viewDialogVisible = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import PlaceholderPage from "@/components/PlaceholderPage"
import {
listWarningCondition,
getWarningCondition,
addWarningCondition,
updateWarningCondition
} from "@/api/studentRecords/warningCondition"
export default {
name: "WarningCondition",
components: { PlaceholderPage }
data() {
return {
// ==================== 查询条件 ====================
searchForm: {
mc: '',
pxlx: '',
pxcc: '',
ty: ''
},
// ==================== 列表数据 ====================
loading: false,
tableData: [],
total: 0,
pageNum: 1,
pageSize: 20,
// ==================== 新增/编辑 ====================
formDialogVisible: false,
formTitle: '新增预警条件',
isAdd: true,
formSaving: false,
form: this.createEmptyForm(),
formRules: {
mc: [{ required: true, message: "名称不能为空", trigger: "blur" }],
ty: [{ required: true, message: "停用不能为空", trigger: "change" }],
bb: [{ required: true, message: "版本不能为空", trigger: "blur" }],
xgsj: [{ required: true, message: "修改时间不能为空", trigger: "change" }]
},
// ==================== 详情 ====================
viewDialogVisible: false,
viewLoading: false,
viewForm: {}
}
},
created() {
this.fetchList()
},
methods: {
/** 创建空表单 */
createEmptyForm() {
return {
mc: '',
pxlx: '',
pxcc: '',
dqxqksbjgmssx: undefined,
dqxqksbjgmsxx: undefined,
dqxqkcbjgmssx: undefined,
dqxqkcbjgmsxx: undefined,
dqxqbjgmssx: undefined,
dqxqbjgmsxx: undefined,
qbksbjgmssx: undefined,
qbksbjgmsxx: undefined,
qbkcbjgmssx: undefined,
qbkcbjgmsxx: undefined,
qbbjgmssx: undefined,
qbbjgmsxx: undefined,
ty: 0,
bb: '',
xgsj: ''
}
},
// ==================== 查询列表 ====================
fetchList() {
this.loading = true
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize
}
// 状态：0 启用 / 1 停用（选中时才传）
if (this.searchForm.ty !== '' && this.searchForm.ty !== null && this.searchForm.ty !== undefined) {
params.ty = this.searchForm.ty
}
// 其余文本条件非空时才传
;['mc', 'pxlx', 'pxcc'].forEach(key => {
if (this.searchForm[key] !== '' && this.searchForm[key] !== null && this.searchForm[key] !== undefined) {
params[key] = this.searchForm[key].trim()
}
})
listWarningCondition(params).then(response => {
const data = response.data || {}
this.tableData = data.records || []
this.total = data.total || 0
this.loading = false
}).catch(() => {
this.tableData = []
this.total = 0
this.loading = false
})
},
handleSearch() {
this.pageNum = 1
this.fetchList()
},
handleReset() {
this.searchForm = {
mc: '',
pxlx: '',
pxcc: '',
ty: ''
}
this.pageNum = 1
this.fetchList()
},
handlePageChange(current) {
this.pageNum = current
this.fetchList()
},
handleSizeChange(size) {
this.pageSize = size
this.pageNum = 1
this.fetchList()
},
// ==================== 新增/编辑 ====================
handleAdd() {
this.isAdd = true
this.formTitle = '新增预警条件'
this.form = this.createEmptyForm()
this.formDialogVisible = true
this.$nextTick(() => {
this.$refs.formRef && this.$refs.formRef.clearValidate()
})
},
handleEdit(row) {
this.isAdd = false
this.formTitle = '编辑预警条件'
this.form = this.createEmptyForm()
this.formDialogVisible = true
this.$nextTick(() => {
this.$refs.formRef && this.$refs.formRef.clearValidate()
})
getWarningCondition(row.bh).then(response => {
const data = response.data || {}
this.fillFormData(data)
}).catch(() => {})
},
/** 回填表单数据 */
fillFormData(data) {
const fieldKeys = [
'mc', 'pxlx', 'pxcc',
'dqxqksbjgmssx', 'dqxqksbjgmsxx',
'dqxqkcbjgmssx', 'dqxqkcbjgmsxx',
'dqxqbjgmssx', 'dqxqbjgmsxx',
'qbksbjgmssx', 'qbksbjgmsxx',
'qbkcbjgmssx', 'qbkcbjgmsxx',
'qbbjgmssx', 'qbbjgmsxx',
'bb', 'xgsj'
]
const result = this.createEmptyForm()
fieldKeys.forEach(key => {
result[key] = data[key] !== null && data[key] !== undefined ? data[key] : result[key]
})
result.bh = data.bh
result.ty = data.ty === 1 || data.ty === true ? 1 : 0
this.form = result
},
handleFormSubmit() {
this.$refs.formRef.validate(valid => {
if (!valid) return
this.formSaving = true
const payload = { ...this.form }
if (!this.isAdd) {
payload.bh = this.form.bh
}
const request = this.isAdd ? addWarningCondition(payload) : updateWarningCondition(payload)
request.then(() => {
this.$message.success(this.isAdd ? '新增成功' : '修改成功')
this.formDialogVisible = false
this.fetchList()
}).catch(() => {
}).finally(() => {
this.formSaving = false
})
})
},
// ==================== 停用/启用切换 ====================
handleToggleDisable(row, val) {
const isDisable = val === 1 || val === true
const prevTy = isDisable ? 0 : 1
const actionName = isDisable ? '停用' : '启用'
this.$confirm(`确定要${actionName}「${row.mc || row.bh || '该预警条件'}」吗？`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return updateWarningCondition({ ...row, ty: isDisable ? 1 : 0 })
}).then(() => {
this.$message.success(actionName + '成功')
this.fetchList()
}).catch(() => {
// 取消或接口失败时回滚开关状态并刷新
row.ty = prevTy
this.fetchList()
})
},
// ==================== 详情 ====================
handleView(row) {
this.viewDialogVisible = true
this.viewLoading = true
this.viewForm = {}
getWarningCondition(row.bh).then(response => {
this.viewForm = response.data || {}
this.viewLoading = false
}).catch(() => {
this.viewLoading = false
})
},
/** 空值显示占位符 */
formatValue(val) {
return val !== null && val !== undefined ? val : '-'
}
}
}
</script>
</script>
<style scoped lang="scss">
.warning-condition-page {
.search-card {
margin-bottom: 16px;
}
.search-form {
::v-deep .el-form-item {
margin-bottom: 18px;
}
.search-actions-row {
margin-top: 2px;
border-top: 1px dashed #ebeef5;
padding-top: 14px;
}
.search-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
}
.table-card {
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.table-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.table-actions {
display: flex;
align-items: center;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
}
.form-dialog-form {
max-height: 62vh;
overflow-y: auto;
padding-right: 6px;
::v-deep .el-divider--horizontal {
margin: 4px 0 16px;
}
}
.ty-tag {
cursor: pointer;
user-select: none;
}
}
</style>