forked from liweijie/education
前端代码
This commit is contained in:
liumengyu
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="app-container discipline-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="12" :xl="12">
|
||||
<el-form-item label="专业名称">
|
||||
<el-input v-model="searchForm.zymc" placeholder="请输入专业名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="专业代码">
|
||||
<el-input v-model="searchForm.zydm" placeholder="请输入专业代码" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="专业方向">
|
||||
<el-input v-model="searchForm.zyfx" placeholder="请输入专业方向" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="学年制">
|
||||
<el-input v-model="searchForm.xnz" placeholder="请输入学年制" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态" class="checkbox-form-item">
|
||||
<el-checkbox v-model="searchForm.ty">停用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="培训类型2">
|
||||
<el-select v-model="searchForm.pxlx2" placeholder="请选择" clearable class="w-full">
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
<el-option label="其他" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="search-actions">
|
||||
<div class="search-tip">注意："勾选框" 表示启用该项对应的查询条件。</div>
|
||||
<div class="search-buttons">
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
</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>
|
||||
<el-button type="primary" @click="handleAdd">新建学科专业</el-button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column prop="jxgljgbh" label="教学管理机构" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="xh" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="zydm" label="专业代码" width="85" />
|
||||
<el-table-column prop="zymc" label="专业名称" show-overflow-tooltip />
|
||||
<el-table-column prop="rcpyfaCount" label="在用人才培养方案数" width="180" align="center" />
|
||||
<el-table-column prop="zypyfa" label="在用人才培养方案" width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="zdyfl" label="分类" width="100" align="center" />
|
||||
<el-table-column prop="xylb" label="学员类别" width="100" align="center" />
|
||||
<el-table-column prop="xnz" label="学年制" width="90" align="center" />
|
||||
<el-table-column prop="xqs" label="学期数" width="90" align="center" />
|
||||
<el-table-column prop="zgzy" label="主干专业" width="100" align="center" />
|
||||
<el-table-column label="操作" width="160" align="center" fixed="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button v-if="row.ty === 1" type="text" size="small" class="text-success" @click="handleEnable(row)">
|
||||
启用
|
||||
</el-button>
|
||||
<el-button v-else type="text" size="small" class="text-danger" @click="handleDisable(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
|
||||
:visible="addDialogVisible"
|
||||
title="新增学科专业"
|
||||
width="750px"
|
||||
:close-on-click-modal="false"
|
||||
@update:visible="val => addDialogVisible = val"
|
||||
>
|
||||
<el-form :model="addForm" label-width="130px" class="add-form">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规范名称">
|
||||
<el-input v-model="addForm.gfmc" placeholder="请输入规范名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="序号">
|
||||
<el-input v-model="addForm.xh" placeholder="请输入序号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业代码">
|
||||
<el-input v-model="addForm.zydm" placeholder="请输入专业代码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业名称">
|
||||
<el-input v-model="addForm.zymc" placeholder="请输入专业名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业方向">
|
||||
<el-input v-model="addForm.zyfx" placeholder="请输入专业方向" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学年制">
|
||||
<el-input v-model="addForm.xnz" placeholder="请输入学年制" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学期数">
|
||||
<el-input v-model="addForm.xqs" placeholder="请输入学期数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="培训层次">
|
||||
<el-input v-model="addForm.pxcc" placeholder="请输入培训层次" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="培训类型">
|
||||
<el-input v-model="addForm.pxlx" placeholder="请输入培训类型" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="培训类型2">
|
||||
<el-input v-model="addForm.pxlx2" placeholder="请输入培训类型2" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="教学管理机构编号">
|
||||
<el-input v-model="addForm.jxgljgbh" placeholder="请输入教学管理机构编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学员类别">
|
||||
<el-input v-model="addForm.xylb" placeholder="请输入学员类别" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="指导分类">
|
||||
<el-input v-model="addForm.zdyfl" placeholder="请输入指导分类" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="主干专业">
|
||||
<el-input v-model="addForm.zgzy" placeholder="请输入主干专业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="JSON字段">
|
||||
<el-input v-model="addForm.jsonzd" placeholder="请输入JSON字段" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="addForm.bz" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="addDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="addSaving" @click="handleAddConfirm">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 模拟学科专业列表数据（后端接口未提供，接口就绪后可删除并改为接口加载）
|
||||
const mockTableData = [
|
||||
{ bsh: 'Z001', jxgljgbh: 'JG001', xh: 1, zydm: '110101', zymc: '军事指挥', rcpyfaCount: 2, zypyfa: '2026版军事指挥人才培养方案', zdyfl: '指挥类', xylb: '生长干部', xnz: '4', xqs: '8', zgzy: '是', ty: 0 },
|
||||
{ bsh: 'Z002', jxgljgbh: 'JG002', xh: 2, zydm: '110102', zymc: '通信工程', rcpyfaCount: 1, zypyfa: '2025版通信工程人才培养方案', zdyfl: '技术类', xylb: '现职干部', xnz: '3', xqs: '6', zgzy: '是', ty: 1 },
|
||||
{ bsh: 'Z003', jxgljgbh: 'JG003', xh: 3, zydm: '110103', zymc: '装备维修', rcpyfaCount: 0, zypyfa: '-', zdyfl: '勤务类', xylb: '士官', xnz: '2', xqs: '4', zgzy: '否', ty: 0 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'DisciplineIndex',
|
||||
data() {
|
||||
return {
|
||||
// ==================== 查询条件 ====================
|
||||
searchForm: {
|
||||
zymc: '',
|
||||
zydm: '',
|
||||
zyfx: '',
|
||||
xnz: '',
|
||||
ty: false,
|
||||
pxlx2: ''
|
||||
},
|
||||
|
||||
// ==================== 列表数据 ====================
|
||||
loading: false,
|
||||
tableData: [],
|
||||
allData: [],
|
||||
total: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
|
||||
// ==================== 新增学科专业 ====================
|
||||
addDialogVisible: false,
|
||||
addSaving: false,
|
||||
addForm: this.createEmptyAddForm()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
createEmptyAddForm() {
|
||||
return {
|
||||
gfmc: '',
|
||||
xh: '',
|
||||
zydm: '',
|
||||
zymc: '',
|
||||
zyfx: '',
|
||||
xnz: '',
|
||||
xqs: '',
|
||||
pxcc: '',
|
||||
pxlx: '',
|
||||
jxgljgbh: '',
|
||||
bz: '',
|
||||
pxlx2: '',
|
||||
xylb: '',
|
||||
zdyfl: '',
|
||||
jsonzd: '',
|
||||
zgzy: ''
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 查询列表 ====================
|
||||
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为 getDisciplineList
|
||||
fetchList() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
let records = mockTableData.slice()
|
||||
if (this.searchForm.zymc.trim()) {
|
||||
records = records.filter((item) => (item.zymc || '').includes(this.searchForm.zymc.trim()))
|
||||
}
|
||||
if (this.searchForm.zydm.trim()) {
|
||||
records = records.filter((item) => (item.zydm || '').includes(this.searchForm.zydm.trim()))
|
||||
}
|
||||
if (this.searchForm.zyfx.trim()) {
|
||||
records = records.filter((item) => (item.zyfx || '').includes(this.searchForm.zyfx.trim()))
|
||||
}
|
||||
if (this.searchForm.xnz.trim()) {
|
||||
records = records.filter((item) => String(item.xnz || '').includes(this.searchForm.xnz.trim()))
|
||||
}
|
||||
if (this.searchForm.ty) {
|
||||
records = records.filter((item) => item.ty === 1)
|
||||
}
|
||||
this.allData = records
|
||||
this.total = records.length
|
||||
this.applyPage()
|
||||
this.loading = false
|
||||
}, 200)
|
||||
},
|
||||
|
||||
applyPage() {
|
||||
const start = (this.pageNum - 1) * this.pageSize
|
||||
this.tableData = this.allData.slice(start, start + this.pageSize)
|
||||
},
|
||||
|
||||
handleSearch() {
|
||||
this.pageNum = 1
|
||||
this.fetchList()
|
||||
this.$message.success('查询完成（前端模拟）')
|
||||
},
|
||||
|
||||
handleReset() {
|
||||
this.$refs.searchFormRef.resetFields()
|
||||
this.pageNum = 1
|
||||
this.fetchList()
|
||||
},
|
||||
|
||||
handlePageChange(current) {
|
||||
this.pageNum = current
|
||||
this.fetchList()
|
||||
},
|
||||
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.pageNum = 1
|
||||
this.fetchList()
|
||||
},
|
||||
|
||||
// ==================== 停用/启用 ====================
|
||||
// TODO: 后端接口未提供，停用/启用为前端模拟；接口就绪后替换为 toggleDiscipline
|
||||
handleDisable(row) {
|
||||
this.$confirm(`确定要停用「${row.zymc || row.zydm || '该专业'}」吗？`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
row.ty = 1
|
||||
this.$message.success('停用成功（前端模拟）')
|
||||
this.fetchList()
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
handleEnable(row) {
|
||||
this.$confirm(`确定要启用「${row.zymc || row.zydm || '该专业'}」吗？`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
row.ty = 0
|
||||
this.$message.success('启用成功（前端模拟）')
|
||||
this.fetchList()
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
// ==================== 新增学科专业 ====================
|
||||
handleAdd() {
|
||||
this.addForm = this.createEmptyAddForm()
|
||||
this.addDialogVisible = true
|
||||
},
|
||||
|
||||
// TODO: 后端接口未提供，新增为前端模拟；接口就绪后替换为 addDiscipline
|
||||
handleAddConfirm() {
|
||||
this.addSaving = true
|
||||
setTimeout(() => {
|
||||
this.$message.success('新增学科专业成功（前端模拟）')
|
||||
this.addDialogVisible = false
|
||||
this.fetchList()
|
||||
this.addSaving = false
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.discipline-page {
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-form-item {
|
||||
::v-deep(.el-form-item__content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 8px;
|
||||
|
||||
.search-tip {
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-form {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #67c23a;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #f56c6c;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user