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

This commit is contained in:
2026-08-23 15:10:56 +08:00
parent df7800f001
commit d20c490c74
11 changed files with 1922 additions and 52 deletions
+96
View File
@@ -0,0 +1,96 @@
/**
* 表格横向拖拽滚动
* 隐藏表格的横向滚动条,按住鼠标左键横向拖动即可查看后面的字段。
* 通过 document 事件委托全局生效,所有 el-table 自动支持,无需逐页绑定。
*
* 手感优化:
* - 文本选中已在全局样式中禁用(user-select: none),拖拽过程不会再误选文字
* - 位移以横向为主且超过阈值才触发滚动,轻微手抖、普通点击、纵向拖拽(如行排序)不受影响
* - 光标仅在真正拖动时变为抓手,平时保持默认
* - 拖拽结束(确实发生了滚动)后屏蔽本次 click,避免误触发行点击、复选框等
*/
const DRAG_THRESHOLD = 4 // 横向位移超过该像素且以横向为主,才判定为拖动
// 在这些元素上按下鼠标不触发拖拽,保证按钮、复选框等交互不受影响
const INTERACTIVE_SELECTOR = [
'a', 'button', 'input', 'textarea', 'select', 'label',
'.el-button', '.el-checkbox', '.el-radio', '.el-switch', '.el-select',
'.el-link', '.el-dropdown', '.el-tooltip', '.el-color-picker',
'[contenteditable="true"]'
].join(',')
let wrapper = null
let startX = 0
let startY = 0
let startScrollLeft = 0
let dragging = false
function isHorizontallyScrollable(el) {
return el.scrollWidth > el.clientWidth + 1
}
function handleMouseDown(e) {
if (e.button !== 0) return
if (e.target.closest(INTERACTIVE_SELECTOR)) return
const wrap = e.target.closest('.el-table__body-wrapper')
if (!wrap || !isHorizontallyScrollable(wrap)) return
wrapper = wrap
startX = e.clientX
startY = e.clientY
startScrollLeft = wrap.scrollLeft
dragging = false
}
function handleMouseMove(e) {
if (!wrapper) return
const dx = e.clientX - startX
const dy = e.clientY - startY
if (!dragging) {
// 轻微位移视为点击,不触发滚动;位移必须以横向为主,避免与纵向拖拽(如行排序)冲突
if (Math.abs(dx) <= DRAG_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) return
// 开始拖动:以当前位置为基准,避免起始跳变
dragging = true
startX = e.clientX
startY = e.clientY
startScrollLeft = wrapper.scrollLeft
wrapper.classList.add('is-dragging')
}
e.preventDefault()
wrapper.scrollLeft = startScrollLeft - (e.clientX - startX)
}
function handleMouseUp() {
if (!wrapper) return
wrapper.classList.remove('is-dragging')
if (dragging) {
// 拖拽确实发生了滚动,屏蔽本次 click,避免误触发行点击、复选框等
const blockClick = (ev) => {
ev.preventDefault()
ev.stopPropagation()
document.removeEventListener('click', blockClick, true)
}
document.addEventListener('click', blockClick, true)
}
wrapper = null
dragging = false
}
// 鼠标拖出窗口外时清理拖拽状态,防止状态残留
function handleMouseLeave() {
if (!wrapper) return
wrapper.classList.remove('is-dragging')
wrapper = null
dragging = false
}
const install = function() {
if (install.installed) return
install.installed = true
document.addEventListener('mousedown', handleMouseDown, false)
document.addEventListener('mousemove', handleMouseMove, false)
document.addEventListener('mouseup', handleMouseUp, false)
document.addEventListener('mouseleave', handleMouseLeave, false)
}
export default install
+219
View File
@@ -0,0 +1,219 @@
<template>
<el-drawer
:visible.sync="visible"
direction="rtl"
size="280px"
:title="'布局设置'"
class="drawer-setting"
:with-header="false"
:modal-append-to-body="false"
>
<div class="setting-drawer-index">
<div class="setting-drawer-index__title">主题色</div>
<div class="setting-drawer-index__main-color theme-color">
<ul class="ul-color">
<li
v-for="item in colorList"
:key="item.color"
class="li-theme"
:class="{ active: item.color === theme }"
:style="{ background: item.color }"
@click="changeTheme(item.color)"
>
<i v-show="item.color === theme" class="icon-check el-icon-check" />
</li>
</ul>
</div>
<div class="setting-drawer-index__title">界面功能</div>
<div class="setting-item">
<span class="setting-item__label">侧边栏颜色</span>
<el-dropdown trigger="click" @command="handleSideTheme">
<span class="setting-item__value">
{{ sideThemeLabel }}
<i class="el-icon-arrow-down" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="theme-dark">深色主题</el-dropdown-item>
<el-dropdown-item command="theme-light">浅色主题</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="setting-item">
<span class="setting-item__label">导航栏模式</span>
<el-dropdown trigger="click" @command="handleNavType">
<span class="setting-item__value">
{{ navTypeLabel }}
<i class="el-icon-arrow-down" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">侧边栏模式</el-dropdown-item>
<el-dropdown-item command="2">顶部导航模式</el-dropdown-item>
<el-dropdown-item command="3">侧栏+顶栏</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="setting-item">
<span class="setting-item__label"> TagsView 标签栏</span>
<el-switch
:value="tagsView"
@change="changeSetting({ key: 'tagsView', value: !tagsView })"
/>
</div>
<div class="setting-item">
<span class="setting-item__label"> 侧边栏 Logo</span>
<el-switch
:value="sidebarLogo"
@change="changeSetting({ key: 'sidebarLogo', value: !sidebarLogo })"
/>
</div>
<div class="setting-item">
<span class="setting-item__label"> 固定 Header</span>
<el-switch
:value="fixedHeader"
@change="changeSetting({ key: 'fixedHeader', value: !fixedHeader })"
/>
</div>
</div>
</el-drawer>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Settings',
data() {
return {
visible: false,
/**
* 主题色列表
*/
colorList: [
{ color: '#00875A', title: '教育绿' },
{ color: '#304156', title: '深蓝' },
{ color: '#409EFF', title: '亮蓝' },
{ color: '#626AEF', title: '亮紫' },
{ color: '#EB2F96', title: '粉红' },
{ color: '#F8721F', title: '橙色' },
{ color: '#CD201F', title: '红色' }
]
}
},
computed: {
...mapState({
theme: state => state.settings.theme,
sideTheme: state => state.settings.sideTheme,
navType: state => state.settings.navType,
tagsView: state => state.settings.tagsView,
sidebarLogo: state => state.settings.sidebarLogo,
fixedHeader: state => state.settings.fixedHeader
}),
sideThemeLabel() {
return this.sideTheme === 'theme-dark' ? '深色主题' : '浅色主题'
},
navTypeLabel() {
const map = { 1: '侧边栏模式', 2: '顶部导航模式', 3: '侧栏+顶栏' }
return map[this.navType] || '侧边栏模式'
}
},
methods: {
openSetting() {
this.visible = true
},
closeSetting() {
this.visible = false
},
// 修改主题色
changeTheme(color) {
this.$store.dispatch('settings/changeSetting', { key: 'theme', value: color })
},
handleSideTheme(command) {
this.changeSetting({ key: 'sideTheme', value: command })
},
handleNavType(command) {
this.changeSetting({ key: 'navType', value: Number(command) })
},
// 修改布局设置,并持久化到本地存储
changeSetting(data) {
this.$store.dispatch('settings/changeSetting', data)
const setting = JSON.parse(localStorage.getItem('layout-setting') || '{}')
setting[data.key] = data.value
localStorage.setItem('layout-setting', JSON.stringify(setting))
}
}
}
</script>
<style lang="scss" scoped>
.setting-drawer-index {
padding: 0 20px;
box-sizing: border-box;
&__title {
margin-top: 26px;
margin-bottom: 12px;
font-weight: 700;
color: #333;
}
&__main-color {
border-radius: 4px;
}
.theme-color {
.ul-color {
margin: 0;
padding: 0;
.li-theme {
list-style: none;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 6px;
border-radius: 50%;
cursor: pointer;
text-align: center;
vertical-align: middle;
&.active {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}
.icon-check {
color: #fff;
font-size: 14px;
line-height: 30px;
}
}
}
}
.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
color: #606266;
&__value {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 12px;
height: 30px;
line-height: 30px;
border-radius: 4px;
border: 1px solid #dcdfe6;
cursor: pointer;
font-size: 13px;
}
}
}
</style>
+1 -1
View File
@@ -12,4 +12,4 @@ export default {
name: "ClassHourPlan", name: "ClassHourPlan",
components: { PlaceholderPage } components: { PlaceholderPage }
} }
</script> </script>
+241 -7
View File
@@ -1,15 +1,249 @@
<template> <template>
<div class="app-container"> <div class="app-container score-page">
<placeholder-page title="学员成绩管理" icon="form" <!-- ==================== 1. 查询条件区域 ==================== -->
description="用于管理学员各课程的考核成绩,支持录入、查询、统计与导出。" /> <el-card shadow="never" class="search-card">
<el-form :model="queryForm" label-width="90px" inline class="search-form">
<el-form-item label="学员编号">
<el-input v-model="queryForm.xybh" placeholder="请输入学员编号" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="年度">
<el-input v-model="queryForm.nd" placeholder="如 2026" clearable style="width: 140px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- ==================== 2. 成绩列表区域 ==================== -->
<div class="toolbar">
<el-button type="primary" :loading="exportLoading" @click="handleExportGrades">导出课程成绩</el-button>
<el-button type="primary" :loading="exportLoading" @click="handleExportProcessGrades">导出课程过程成绩</el-button>
</div>
<el-card shadow="never" class="table-card">
<el-tabs v-model="activeTab">
<!-- 课程成绩 -->
<el-tab-pane label="课程成绩" name="grades">
<el-table v-loading="loading" :data="gradesData" stripe border>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="xybh" label="学员编号" width="110" show-overflow-tooltip />
<el-table-column prop="kmbh" label="科目编号" width="110" show-overflow-tooltip />
<el-table-column prop="klx" label="课类型" width="90" align="center" />
<el-table-column prop="kscj" label="考试成绩" width="90" align="center" />
<el-table-column prop="pscj" label="平时成绩" width="90" align="center" />
<el-table-column prop="zzcj" label="最终成绩" width="90" align="center" />
<el-table-column prop="bkcj" label="补考成绩" width="90" align="center" />
<el-table-column prop="bkcs" label="补考次数" width="90" align="center" />
<el-table-column prop="ksqk" label="考试情况" width="90" align="center" />
<el-table-column prop="qwxf" label="期望学分" width="90" align="center" />
<el-table-column prop="ytg" label="已通过" width="80" align="center" />
<el-table-column prop="nd" label="年度" width="80" align="center" />
</el-table>
<el-empty v-if="!loading && gradesData.length === 0" description="暂无课程成绩数据" :image-size="60" />
</el-tab-pane>
<!-- 课程过程成绩 -->
<el-tab-pane label="课程过程成绩" name="process">
<el-table v-loading="loading" :data="processGradesData" stripe border>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="xybh" label="学员编号" width="110" show-overflow-tooltip />
<el-table-column prop="kmbh" label="科目编号" width="110" show-overflow-tooltip />
<el-table-column prop="klx" label="课类型" width="90" align="center" />
<el-table-column prop="yscj" label="原始成绩" width="90" align="center" />
<el-table-column prop="zzcj" label="最终成绩" width="90" align="center" />
<el-table-column prop="bkcj1" label="补考1" width="80" align="center" />
<el-table-column prop="bkcj2" label="补考2" width="80" align="center" />
<el-table-column prop="bkcj3" label="补考3" width="80" align="center" />
<el-table-column prop="ksqk" label="考试情况" width="90" align="center" />
<el-table-column prop="nd" label="年度" width="80" align="center" />
</el-table>
<el-empty v-if="!loading && processGradesData.length === 0" description="暂无课程过程成绩数据" :image-size="60" />
</el-tab-pane>
</el-tabs>
<div class="pagination">
<el-pagination
:current-page="pagination.pageNum"
:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
background
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</el-card>
</div> </div>
</template> </template>
<script> <script>
import PlaceholderPage from "@/components/PlaceholderPage" import {
listStudentGrades,
listStudentProcessGrades,
exportStudentGrades,
exportStudentProcessGrades
} from "@/api/studentRecords/studentRecords"
export default { export default {
name: "Score", name: 'ScoreIndex',
components: { PlaceholderPage } data() {
return {
// ==================== 查询条件 ====================
queryForm: {
xybh: '',
nd: ''
},
// ==================== 数据表格 ====================
// 数据来源:grades 课程成绩 / process 课程过程成绩
activeTab: 'grades',
loading: false,
gradesData: [],
processGradesData: [],
pagination: { pageNum: 1, pageSize: 20, total: 0 },
// ==================== 导出 ====================
exportLoading: false
}
},
watch: {
activeTab() {
this.handleSearch()
}
},
mounted() {
this.loadData()
},
methods: {
/** 组装查询参数,仅传非空值 */
buildQueryParams(params) {
const xybh = this.queryForm.xybh && this.queryForm.xybh.trim()
const nd = this.queryForm.nd && this.queryForm.nd.trim()
if (xybh) params.xybh = xybh
if (nd) params.nd = nd
},
loadData() {
this.loading = true
const params = {
pageNum: this.pagination.pageNum,
pageSize: this.pagination.pageSize
}
this.buildQueryParams(params)
const request = this.activeTab === 'grades' ? listStudentGrades(params) : listStudentProcessGrades(params)
request.then(res => {
const data = res.data || {}
const records = data.records || []
if (this.activeTab === 'grades') {
this.gradesData = records
} else {
this.processGradesData = records
}
this.pagination.total = data.total || 0
this.loading = false
}).catch(() => {
if (this.activeTab === 'grades') {
this.gradesData = []
} else {
this.processGradesData = []
}
this.pagination.total = 0
this.loading = false
})
},
handleSearch() {
this.pagination.pageNum = 1
this.loadData()
},
handlePageChange(page) {
this.pagination.pageNum = page
this.loadData()
},
handleSizeChange(size) {
this.pagination.pageSize = size
this.pagination.pageNum = 1
this.loadData()
},
/** 通用 blob 下载 */
downloadBlob(blob, filename) {
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
link.click()
URL.revokeObjectURL(link.href)
},
/** 校验导出所需学员编号 */
requireXybh(exportName) {
const xybh = this.queryForm.xybh && this.queryForm.xybh.trim()
if (!xybh) {
this.$message.warning('导出' + exportName + '前请先输入学员编号')
return null
}
return xybh
},
/** 导出课程成绩 Excel */
handleExportGrades() {
const xybh = this.requireXybh('课程成绩')
if (!xybh) return
this.exportLoading = true
exportStudentGrades(xybh).then(res => {
this.downloadBlob(res, `课程成绩_${xybh}.xls`)
this.$message.success('课程成绩导出成功')
}).catch(() => {}).finally(() => {
this.exportLoading = false
})
},
/** 导出课程过程成绩 Excel */
handleExportProcessGrades() {
const xybh = this.requireXybh('课程过程成绩')
if (!xybh) return
this.exportLoading = true
exportStudentProcessGrades(xybh).then(res => {
this.downloadBlob(res, `课程过程成绩_${xybh}.xls`)
this.$message.success('课程过程成绩导出成功')
}).catch(() => {}).finally(() => {
this.exportLoading = false
})
}
}
} }
</script> </script>
<style scoped lang="scss">
.score-page {
padding: 20px;
.search-card {
margin-bottom: 16px;
.search-form {
.el-form-item {
margin-bottom: 0;
}
}
}
.toolbar {
margin-bottom: 16px;
}
.table-card {
.el-table {
width: 100%;
}
.pagination {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
}
}
</style>
@@ -300,12 +300,13 @@
</template> </template>
<script> <script>
// 模拟列表数据(后端接口未提供,接口就绪后可删除并改为接口加载) import {
const mockTableData = [ listStudentRecord,
{ id: 1, bh: 'X101', xh: '2025010101', xm: '张三', xb: '男', nj: '2025级', zy: '炮兵装备运用', db: '54队', bc: '5区队', pxlx: '军官基础教育', pxcc: '本科', zzmm: '党员', mz: '汉族', jg: '江苏', xw: '学士', zczt: '已注册', xjyd: '无异动', ksqk: '正常', bjgm: '0', gljg: '教务处' }, getStudentRecord,
{ id: 2, bh: 'X102', xh: '2025010102', xm: '李四', xb: '男', nj: '2025级', zy: '通信工程', db: '32队', bc: '1区队', pxlx: '军官基础教育', pxcc: '本科', zzmm: '团员', mz: '汉族', jg: '山东', xw: '学士', zczt: '已注册', xjyd: '无异动', ksqk: '正常', bjgm: '1', gljg: '教务处' }, addStudentRecord,
{ id: 3, bh: 'X103', xh: '2024010101', xm: '王五', xb: '男', nj: '2024级', zy: '军事指挥', db: '51队', bc: '2区队', pxlx: '军官基础教育', pxcc: '本科', zzmm: '党员', mz: '汉族', jg: '河南', xw: '学士', zczt: '已注册', xjyd: '异动', ksqk: '正常', bjgm: '2', gljg: '教务处' } updateStudentRecord,
] delStudentRecord
} from "@/api/studentRecords/studentRecords"
export default { export default {
name: 'StudentInfoIndex', name: 'StudentInfoIndex',
@@ -386,21 +387,58 @@ export default {
}, },
// ==================== 列表加载 ==================== // ==================== 列表加载 ====================
// TODO: 后端接口未提供,暂用模拟数据;接口就绪后替换为 getStudentRecordsList
loadData() { loadData() {
this.loading = true this.loading = true
setTimeout(() => { const params = {
this.tableData = mockTableData.slice() pageNum: this.pagination.pageNum,
this.pagination.total = mockTableData.length pageSize: this.pagination.pageSize
}
this.buildQueryParams(params)
listStudentRecord(params).then(res => {
const data = res.data || {}
this.tableData = data.records || []
this.pagination.total = data.total || 0
this.loading = false this.loading = false
}, 200) }).catch(() => {
this.tableData = []
this.pagination.total = 0
this.loading = false
})
},
/** 组装查询参数:文本非空才传,勾选启用的字段才传,门数范围二者其一非空才传 */
buildQueryParams(params) {
const textFields = ['xh', 'xm', 'sfzh', 'zjhm', 'zzmm', 'mz', 'jg', 'xw', 'ybzb', 'bq', 'whcd', 'bkbyyx', 'xylb', 'zdyfl', 'nj', 'zy', 'db', 'bc', 'sszq', 'jcqk']
textFields.forEach(key => {
const v = this.searchForm[key]
if (v !== '' && v !== null && v !== undefined) params[key] = v.trim()
})
if (this.searchForm.pxlxChecked) params.pxlx = this.searchForm.pxlx
if (this.searchForm.pxccChecked) params.pxcc = this.searchForm.pxcc
if (this.searchForm.pxlx2Checked) params.pxlx2 = this.searchForm.pxlx2
if (this.searchForm.xjydEnabled) params.xjyd = this.searchForm.xjyd
if (this.searchForm.ksqkEnabled) params.ksqk = this.searchForm.ksqk
if (this.searchForm.xbEnabled) params.xb = this.searchForm.xb
if (this.searchForm.zcztEnabled) params.zczt = this.searchForm.zczt
if (this.searchForm.txEnabled) params.txzt = this.searchForm.tx
if (this.searchForm.gljgChecked) params.gljg = this.searchForm.gljg
const ranges = [
['bjgmMin', 'bjgmMax'],
['lbjgmMin', 'lbjgmMax'],
['bkcljgmMin', 'bkcljgmMax']
]
ranges.forEach(([minKey, maxKey]) => {
if (this.searchForm[minKey] !== '' || this.searchForm[maxKey] !== '') {
params[minKey] = this.searchForm[minKey]
params[maxKey] = this.searchForm[maxKey]
}
})
}, },
// ==================== 查询/分页 ==================== // ==================== 查询/分页 ====================
handleSearch() { handleSearch() {
this.pagination.pageNum = 1 this.pagination.pageNum = 1
this.loadData() this.loadData()
this.$message.success('查询学员信息(前端模拟)')
}, },
handlePageChange(page) { handlePageChange(page) {
this.pagination.pageNum = page this.pagination.pageNum = page
@@ -428,38 +466,51 @@ export default {
this.dialogVisible = true this.dialogVisible = true
}, },
// TODO: 后端接口未提供,直接使用当前行数据;接口就绪后替换为 getStudentRecordsDetail
handleEdit(row) { handleEdit(row) {
this.dialogTitle = '编辑学员' this.dialogTitle = '编辑学员'
this.resetForm() this.resetForm()
Object.assign(this.formData, this.createEmptyForm(), row) if (!row.bh) {
this.dialogVisible = true Object.assign(this.formData, this.createEmptyForm(), row)
this.dialogVisible = true
return
}
getStudentRecord(row.bh).then(res => {
const data = res.data || {}
Object.assign(this.formData, this.createEmptyForm(), data)
this.dialogVisible = true
}).catch(() => {})
}, },
// TODO: 后端接口未提供,保存为前端模拟;接口就绪后替换为 addStudentRecords / updateStudentRecords // ==================== 新增/编辑提交 ====================
handleSubmit() { handleSubmit() {
this.$refs.formRef.validate((valid) => { this.$refs.formRef.validate(valid => {
if (!valid) return if (!valid) return
this.submitting = true this.submitting = true
setTimeout(() => { const isAdd = this.dialogTitle === '新增学员'
this.$message.success(this.dialogTitle === '新增学员' ? '新增成功' : '编辑成功') const payload = { ...this.formData }
const request = isAdd ? addStudentRecord(payload) : updateStudentRecord(payload)
request.then(() => {
this.$message.success(isAdd ? '新增成功' : '编辑成功')
this.dialogVisible = false this.dialogVisible = false
this.loadData() this.loadData()
}).catch(() => {
}).finally(() => {
this.submitting = false this.submitting = false
}, 300) })
}) })
}, },
// TODO: 后端接口未提供,删除为前端模拟;接口就绪后替换为 deleteStudentRecords // ==================== 删除 ====================
handleDelete(row) { handleDelete(row) {
this.$confirm(`确定要删除"${row.xm}"吗?`, '删除确认', { this.$confirm(`确定要删除"${row.xm}"吗?`, '删除确认', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.tableData = this.tableData.filter((r) => r.bh !== row.bh) return delStudentRecord(row.bh)
this.pagination.total = this.tableData.length }).then(() => {
this.$message.success('删除成功') this.$message.success('删除成功')
this.loadData()
}).catch(() => {}) }).catch(() => {})
}, },
@@ -1,15 +1,544 @@
<template> <template>
<div class="app-container"> <div class="app-container warning-condition-page">
<placeholder-page title="学员学籍预警条件管理" icon="tool" <!-- ==================== 1. 查询条件 ==================== -->
description="用于配置学员学籍预警的触发条件,如成绩、出勤等指标阈值,支持条件的新增与维护。" /> <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> </div>
</template> </template>
<script> <script>
import PlaceholderPage from "@/components/PlaceholderPage" import {
listWarningCondition,
getWarningCondition,
addWarningCondition,
updateWarningCondition
} from "@/api/studentRecords/warningCondition"
export default { export default {
name: "WarningCondition", 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>
@@ -12,4 +12,4 @@ export default {
name: "WarningResult", name: "WarningResult",
components: { PlaceholderPage } components: { PlaceholderPage }
} }
</script> </script>
+710 -6
View File
@@ -1,15 +1,719 @@
<template> <template>
<div class="app-container"> <div class="app-container major-page">
<placeholder-page title="专业" icon="tree" <!-- ==================== 1. 查询条件 ==================== -->
description="用于维护专业信息,如专业名称、所属学科专业等,支持新增、编辑与查询。" /> <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.zymc" 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.zyfx" 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.zydm" 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.xnz" 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="培训类型2">
<el-input v-model="searchForm.pxlx2" placeholder="请输入培训类型2" 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-input v-model="searchForm.xkzyxxbsh" 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-download" @click="handleDownloadTemplate">下载模板</el-button>
<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="zydh" label="专业代号" width="120" show-overflow-tooltip />
<el-table-column prop="zymc" label="专业名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="zyfx" label="专业方向" min-width="120" show-overflow-tooltip />
<el-table-column prop="zydm" label="专业代码" width="110" show-overflow-tooltip />
<el-table-column prop="xnz" label="学年制" width="80" align="center" />
<el-table-column prop="xqs" label="学期数" width="80" align="center" />
<el-table-column prop="pxcc" label="培训层次" width="100" align="center" />
<el-table-column prop="pxlx" label="培训类型" width="100" align="center" />
<el-table-column prop="pxlx2" label="培训类型2" width="100" align="center" />
<el-table-column prop="xylb" label="学员类别" width="100" align="center" />
<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="180" 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>
<el-button type="text" size="small" icon="el-icon-delete" class="text-danger" @click="handleDelete(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="zydh">
<el-input v-model="form.zydh" :disabled="!isAdd" placeholder="请输入专业代号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业名称" prop="zymc">
<el-input v-model="form.zymc" placeholder="请输入专业名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业方向" prop="zyfx">
<el-input v-model="form.zyfx" placeholder="请输入专业方向" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业代码" prop="zydm">
<el-input v-model="form.zydm" placeholder="请输入专业代码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业版本" prop="zybb">
<el-input v-model="form.zybb" placeholder="请输入专业版本" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学年制" prop="xnz">
<el-input v-model="form.xnz" placeholder="请输入学年制" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学期数" prop="xqs">
<el-input-number v-model="form.xqs" :min="0" :max="999" controls-position="right" style="width: 100%" placeholder="请输入学期数" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业标识号" prop="zybsh">
<el-input v-model="form.zybsh" placeholder="请输入专业标识号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学科专业信息标识号" prop="xkzyxxbsh">
<el-input v-model="form.xkzyxxbsh" placeholder="请输入学科专业信息标识号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教学管理机构编号">
<el-input v-model="form.jxgljgbh" placeholder="请输入教学管理机构编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规范名称">
<el-input v-model="form.gfmc" placeholder="请输入规范名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="简称">
<el-input v-model="form.jc" 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="培训层次" prop="pxcc">
<el-input v-model="form.pxcc" 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="培训类型2" prop="pxlx2">
<el-input v-model="form.pxlx2" placeholder="请输入培训类型2" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学员类别" prop="xylb">
<el-input v-model="form.xylb" placeholder="请输入学员类别" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主干专业" prop="zgzy">
<el-select v-model="form.zgzy" placeholder="请选择" clearable style="width: 100%">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自定义分类" prop="zdyfl">
<el-input v-model="form.zdyfl" placeholder="请输入自定义分类" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="节次类别" prop="jclb">
<el-input v-model="form.jclb" placeholder="请输入节次类别" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="系统模式" prop="xtms">
<el-input v-model="form.xtms" 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 v-model="form.jxdgbh" placeholder="请输入教学大纲编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="人培编号">
<el-input v-model="form.rpbh" placeholder="请输入人培编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="序号标识">
<el-input-number v-model="form.xhbs" :min="0" controls-position="right" style="width: 100%" placeholder="请输入序号标识" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="JSON字段">
<el-input v-model="form.jsonzd" placeholder="请输入JSON字段" />
</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="启用时间">
<el-date-picker v-model="form.qysj" type="datetime" placeholder="请选择启用时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="停用时间">
<el-date-picker v-model="form.tysj" type="datetime" placeholder="请选择停用时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培养目标">
<el-input v-model="form.pymb" placeholder="请输入培养目标" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="专业备注">
<el-input v-model="form.zybz" type="textarea" :rows="3" placeholder="请输入专业备注" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="专业规范">
<el-input v-model="form.zygf" type="textarea" :rows="3" 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="700px" :close-on-click-modal="false">
<div v-loading="viewLoading" class="detail-body">
<el-descriptions :column="2" border>
<el-descriptions-item label="专业代号">{{ viewForm.zydh || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业名称">{{ viewForm.zymc || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业方向">{{ viewForm.zyfx || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业代码">{{ viewForm.zydm || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业版本">{{ viewForm.zybb || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业标识号">{{ viewForm.zybsh || '-' }}</el-descriptions-item>
<el-descriptions-item label="学年制">{{ viewForm.xnz || '-' }}</el-descriptions-item>
<el-descriptions-item label="学期数">{{ viewForm.xqs || '-' }}</el-descriptions-item>
<el-descriptions-item label="培训层次">{{ viewForm.pxcc || '-' }}</el-descriptions-item>
<el-descriptions-item label="培训类型">{{ viewForm.pxlx || '-' }}</el-descriptions-item>
<el-descriptions-item label="培训类型2">{{ viewForm.pxlx2 || '-' }}</el-descriptions-item>
<el-descriptions-item label="学员类别">{{ viewForm.xylb || '-' }}</el-descriptions-item>
<el-descriptions-item label="主干专业">{{ viewForm.zgzy || '-' }}</el-descriptions-item>
<el-descriptions-item label="自定义分类">{{ viewForm.zdyfl || '-' }}</el-descriptions-item>
<el-descriptions-item label="教学管理机构编号">{{ viewForm.jxgljgbh || '-' }}</el-descriptions-item>
<el-descriptions-item label="学科专业信息标识号">{{ viewForm.xkzyxxbsh || '-' }}</el-descriptions-item>
<el-descriptions-item label="简称">{{ viewForm.jc || '-' }}</el-descriptions-item>
<el-descriptions-item label="规范名称">{{ viewForm.gfmc || '-' }}</el-descriptions-item>
<el-descriptions-item label="节次类别">{{ viewForm.jclb || '-' }}</el-descriptions-item>
<el-descriptions-item label="系统模式">{{ viewForm.xtms || '-' }}</el-descriptions-item>
<el-descriptions-item label="序号标识">{{ viewForm.xhbs || '-' }}</el-descriptions-item>
<el-descriptions-item label="教学大纲编号">{{ viewForm.jxdgbh || '-' }}</el-descriptions-item>
<el-descriptions-item label="人培编号">{{ viewForm.rpbh || '-' }}</el-descriptions-item>
<el-descriptions-item label="启用时间">{{ viewForm.qysj || '-' }}</el-descriptions-item>
<el-descriptions-item label="停用时间">{{ viewForm.tysj || '-' }}</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-item label="JSON字段">{{ viewForm.jsonzd || '-' }}</el-descriptions-item>
<el-descriptions-item label="培养目标" :span="2">{{ viewForm.pymb || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业备注" :span="2">{{ viewForm.zybz || '-' }}</el-descriptions-item>
<el-descriptions-item label="专业规范" :span="2">{{ viewForm.zygf || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="viewDialogVisible = false"> </el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import PlaceholderPage from "@/components/PlaceholderPage" import {
listMajor,
getMajor,
addMajor,
updateMajor,
delMajor,
downloadMajorTemplate
} from "@/api/subjectMajor/major"
export default { export default {
name: "Major", name: "Major",
components: { PlaceholderPage } data() {
return {
// ==================== 查询条件 ====================
searchForm: {
zymc: '',
zyfx: '',
zydm: '',
xnz: '',
pxlx: '',
pxlx2: '',
pxcc: '',
xkzyxxbsh: '',
ty: ''
},
// ==================== 列表数据 ====================
loading: false,
tableData: [],
total: 0,
pageNum: 1,
pageSize: 20,
// ==================== 新增/编辑 ====================
formDialogVisible: false,
formTitle: '新增专业',
isAdd: true,
formSaving: false,
form: this.createEmptyForm(),
formRules: {
zydh: [{ required: true, message: "专业代号不能为空", trigger: "blur" }],
zymc: [{ required: true, message: "专业名称不能为空", trigger: "blur" }],
zyfx: [{ required: true, message: "专业方向不能为空", trigger: "blur" }],
zydm: [{ required: true, message: "专业代码不能为空", trigger: "blur" }],
zybb: [{ required: true, message: "专业版本不能为空", trigger: "blur" }],
xnz: [{ required: true, message: "学年制不能为空", trigger: "blur" }],
xqs: [{ required: true, message: "学期数不能为空", trigger: "change" }],
zybsh: [{ required: true, message: "专业标识号不能为空", trigger: "blur" }],
pxcc: [{ required: true, message: "培训层次不能为空", trigger: "blur" }],
pxlx: [{ required: true, message: "培训类型不能为空", trigger: "blur" }],
pxlx2: [{ required: true, message: "培训类型2不能为空", trigger: "blur" }],
xylb: [{ required: true, message: "学员类别不能为空", trigger: "blur" }],
zdyfl: [{ required: true, message: "自定义分类不能为空", trigger: "blur" }],
zgzy: [{ required: true, message: "主干专业不能为空", trigger: "change" }],
jclb: [{ required: true, message: "节次类别不能为空", trigger: "blur" }],
xtms: [{ required: true, message: "系统模式不能为空", trigger: "blur" }]
},
// ==================== 详情 ====================
viewDialogVisible: false,
viewLoading: false,
viewForm: {}
}
},
created() {
this.fetchList()
},
methods: {
/** 创建空表单 */
createEmptyForm() {
return {
zydh: '',
zymc: '',
zyfx: '',
xnz: '',
xqs: undefined,
zybz: '',
zygf: '',
zydm: '',
zybb: '',
ty: 0,
qysj: null,
tysj: null,
jxgljgbh: '',
pxcc: '',
pxlx: '',
xkzyxxbsh: '',
pxlx2: '',
xylb: '',
zdyfl: '',
zybsh: '',
xhbs: undefined,
jc: '',
jclb: '',
xtms: '',
jsonzd: '',
zgzy: '',
gfmc: '',
jxdgbh: '',
rpbh: '',
pymb: ''
}
},
// ==================== 查询列表 ====================
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
}
// 其余文本条件非空时才传
;['zymc', 'zyfx', 'zydm', 'xnz', 'pxlx', 'pxlx2', 'pxcc', 'xkzyxxbsh'].forEach(key => {
if (this.searchForm[key] !== '' && this.searchForm[key] !== null && this.searchForm[key] !== undefined) {
params[key] = this.searchForm[key].trim()
}
})
listMajor(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 = {
zymc: '',
zyfx: '',
zydm: '',
xnz: '',
pxlx: '',
pxlx2: '',
pxcc: '',
xkzyxxbsh: '',
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()
})
getMajor(row.zydh).then(response => {
const data = response.data || {}
this.form = {
zydh: data.zydh,
zymc: data.zymc,
zyfx: data.zyfx,
xnz: data.xnz,
xqs: data.xqs !== null && data.xqs !== undefined ? data.xqs : undefined,
zybz: data.zybz,
zygf: data.zygf,
zydm: data.zydm,
zybb: data.zybb,
ty: data.ty === 1 || data.ty === true ? 1 : 0,
qysj: data.qysj,
tysj: data.tysj,
jxgljgbh: data.jxgljgbh,
pxcc: data.pxcc,
pxlx: data.pxlx,
xkzyxxbsh: data.xkzyxxbsh,
pxlx2: data.pxlx2,
xylb: data.xylb,
zdyfl: data.zdyfl,
zybsh: data.zybsh,
xhbs: data.xhbs,
jc: data.jc,
jclb: data.jclb,
xtms: data.xtms,
jsonzd: data.jsonzd,
zgzy: data.zgzy,
gfmc: data.gfmc,
jxdgbh: data.jxdgbh,
rpbh: data.rpbh,
pymb: data.pymb
}
}).catch(() => {})
},
handleFormSubmit() {
this.$refs.formRef.validate(valid => {
if (!valid) return
this.formSaving = true
const payload = { ...this.form }
const request = this.isAdd ? addMajor(payload) : updateMajor(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.zymc || row.zydh || '该专业'}」吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return updateMajor({ ...row, ty: isDisable ? 1 : 0 })
}).then(() => {
this.$message.success(actionName + '成功')
this.fetchList()
}).catch(() => {
// 取消或接口失败时回滚开关状态并刷新
row.ty = prevTy
this.fetchList()
})
},
// ==================== 删除 ====================
handleDelete(row) {
this.$confirm(`确定要删除「${row.zymc || row.zydh || '该专业'}」吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return delMajor(row.zydh)
}).then(() => {
this.$message.success('删除成功')
this.fetchList()
}).catch(() => {})
},
// ==================== 下载模板 ====================
handleDownloadTemplate() {
downloadMajorTemplate().then(res => {
const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = '人才培养方案课程数据文件模板.xls'
link.click()
URL.revokeObjectURL(link.href)
this.$message.success('模板下载成功')
}).catch(() => {})
},
// ==================== 详情 ====================
handleView(row) {
this.viewDialogVisible = true
this.viewLoading = true
this.viewForm = {}
getMajor(row.zydh).then(response => {
this.viewForm = response.data || {}
this.viewLoading = false
}).catch(() => {
this.viewLoading = false
})
}
}
} }
</script> </script>
<style scoped lang="scss">
.major-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;
}
}
.text-danger {
color: #f56c6c;
padding: 0;
}
.ty-tag {
cursor: pointer;
user-select: none;
}
}
</style>
@@ -10,3 +10,4 @@ export default {
components: { PlaceholderPage } components: { PlaceholderPage }
} }
</script> </script>
@@ -1,15 +1,51 @@
<template> <template>
<div class="app-container"> <div class="page-container">
<placeholder-page title="机关教学日志" icon="log" <el-card shadow="never" class="tab-card">
description="用于记录与管理机关教学日志信息,支持日志的查询、填写、提交与审核。" /> <el-tabs v-model="activeTab" class="organ-tabs">
<el-tab-pane label="教学日志管理查询" name="query">
<log-view v-if="activeTab === 'query'" />
</el-tab-pane>
<el-tab-pane label="已上报机关教学日志" name="reported">
<reported-view v-if="activeTab === 'reported'" />
</el-tab-pane>
<el-tab-pane label="机关已审核教学日志" name="audited">
<audited-view v-if="activeTab === 'audited'" />
</el-tab-pane>
</el-tabs>
</el-card>
</div> </div>
</template> </template>
<script> <script>
import PlaceholderPage from "@/components/PlaceholderPage" import LogView from './components/logView.vue'
import ReportedView from './components/reportedView.vue'
import AuditedView from './components/auditedView.vue'
export default { export default {
name: "OrganLog", name: 'OrganLog',
components: { PlaceholderPage } components: { LogView, ReportedView, AuditedView },
data() {
return {
activeTab: 'query'
}
}
} }
</script> </script>
<style scoped lang="scss">
.page-container {
padding: 20px;
}
.tab-card {
.organ-tabs {
::v-deep .el-tabs__header {
margin-bottom: 8px;
}
::v-deep .el-tabs__content {
padding-top: 4px;
}
}
}
</style>
+1 -1
View File
@@ -9,7 +9,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '教学管理信息系统' // 网页标题 const name = process.env.VUE_APP_TITLE || '教学管理信息系统' // 网页标题
const baseUrl = 'http://10.1.1.157:8080' // 后端接口 const baseUrl = 'http://10.1.1.17:8080' // 后端接口
const port = 80 // 固定开发服务器端口,避免多实例端口混乱 const port = 80 // 固定开发服务器端口,避免多实例端口混乱