前端代码
This commit is contained in:
liumengyu
@@ -0,0 +1,475 @@
|
||||
<template>
|
||||
<div class="app-container training-plan-page">
|
||||
<!-- ==================== 1. 查询条件区域 ==================== -->
|
||||
<el-card shadow="never" class="search-card">
|
||||
<el-form :model="searchForm" label-width="120px" class="search-form">
|
||||
<el-row :gutter="32">
|
||||
<!-- 左栏 -->
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-form-item label="专业名称">
|
||||
<el-input v-model="searchForm.zymc" placeholder="请输入专业名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="专业方向">
|
||||
<el-input v-model="searchForm.zyfx" placeholder="请输入专业方向" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template slot="label">
|
||||
<el-checkbox v-model="searchForm.pxlxEnabled">培训类型</el-checkbox>
|
||||
</template>
|
||||
<el-select v-model="searchForm.pxlx" placeholder="请选择培训类型" clearable class="w-full"
|
||||
:disabled="!searchForm.pxlxEnabled">
|
||||
<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.pxccEnabled">培训层次</el-checkbox>
|
||||
</template>
|
||||
<el-select v-model="searchForm.pxcc" placeholder="请选择培训层次" clearable class="w-full"
|
||||
:disabled="!searchForm.pxccEnabled">
|
||||
<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.zdyfl" placeholder="请输入自定义分类" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template slot="label">
|
||||
<el-checkbox v-model="searchForm.zgzyEnabled">主干专业</el-checkbox>
|
||||
</template>
|
||||
<el-select v-model="searchForm.zgzy" placeholder="请选择" clearable class="w-full"
|
||||
:disabled="!searchForm.zgzyEnabled">
|
||||
<el-option v-for="item in zgzyOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 右栏 -->
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-form-item label="专业代码">
|
||||
<el-input v-model="searchForm.zydm" placeholder="请输入专业代码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="学年制">
|
||||
<el-input v-model="searchForm.xnz" placeholder="请输入学年制" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template slot="label">
|
||||
<el-checkbox v-model="searchForm.pxlx2Enabled">培训类型2</el-checkbox>
|
||||
</template>
|
||||
<el-select v-model="searchForm.pxlx2" placeholder="请选择培训类型2" clearable class="w-full"
|
||||
:disabled="!searchForm.pxlx2Enabled">
|
||||
<el-option v-for="item in pxlx2Options" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template slot="label">
|
||||
<el-checkbox v-model="searchForm.qyztEnabled">启用状态</el-checkbox>
|
||||
</template>
|
||||
<el-radio-group v-model="searchForm.qyzt" :disabled="!searchForm.qyztEnabled">
|
||||
<el-radio :label="'启用'">启用</el-radio>
|
||||
<el-radio :label="'停用'">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="大纲版本">
|
||||
<el-input v-model="searchForm.zybb" placeholder="请输入大纲版本" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="培养目标">
|
||||
<el-input v-model="searchForm.pymb" placeholder="请输入培养目标" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="search-footer">
|
||||
<div class="notice">注意：勾选"选择框"表示启用该项对应的查询条件。</div>
|
||||
<div class="search-actions">
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 2. 操作与上传区域 ==================== -->
|
||||
<el-card shadow="never" class="action-card">
|
||||
<div class="action-row">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleOpenAdd">新建</el-button>
|
||||
<el-button icon="el-icon-download" @click="handleDownload">下载</el-button>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<el-button type="primary" @click="handleTemplateDownload">【人才培养方案目录模板】下载</el-button>
|
||||
</div>
|
||||
<div class="upload-row">
|
||||
<div class="upload-left">
|
||||
<el-button icon="el-icon-folder-opened" @click="handleChooseFile">选择文件</el-button>
|
||||
<span class="file-name" :class="{ 'has-file': selectedFile }">
|
||||
<template v-if="selectedFile">{{ fileName }}</template>
|
||||
<template v-else>请选择要上传的文件</template>
|
||||
</span>
|
||||
<input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
|
||||
</div>
|
||||
<div class="upload-right">
|
||||
<el-button type="primary" icon="el-icon-upload2" :disabled="!selectedFile" @click="handleUpload">上传数据</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 3. 数据表格区域 ==================== -->
|
||||
<el-card shadow="never" class="table-card">
|
||||
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column prop="jxgljg" label="教学管理机构" show-overflow-tooltip />
|
||||
<el-table-column prop="xkzyxx" label="学科专业信息" show-overflow-tooltip />
|
||||
<el-table-column prop="rpyx" label="人培信息" width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="fl" label="分类" align="center" />
|
||||
<el-table-column prop="xylb" label="学员类别" align="center" />
|
||||
<el-table-column prop="xnz" label="学年制" align="center" />
|
||||
<el-table-column prop="xsfb" label="学时分布" align="center" />
|
||||
<el-table-column prop="zt" label="状态" align="center" />
|
||||
<el-table-column prop="wjzl" label="文件资料" align="center" />
|
||||
<el-table-column label="操作" align="center" fixed="right" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" style="color: #f56c6c" :disabled="scope.row.ty === 1 || scope.row.zt === '停用'"
|
||||
@click="handleDisable(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>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="1000px" :align-center="true"
|
||||
:destroy-on-close="true">
|
||||
<div v-loading="editLoading">
|
||||
<el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="140px" class="add-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业代号" prop="zydh">
|
||||
<el-input v-model="addForm.zydh" placeholder="请输入专业代号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业名称" prop="zymc">
|
||||
<el-input v-model="addForm.zymc" placeholder="请输入专业名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业方向">
|
||||
<el-input v-model="addForm.zyfx" placeholder="请输入专业方向" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业代码" prop="zydm">
|
||||
<el-input v-model="addForm.zydm" placeholder="请输入专业代码" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业版本">
|
||||
<el-input v-model="addForm.zybb" placeholder="请输入专业版本" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="培训层次" prop="pxcc">
|
||||
<el-input v-model="addForm.pxcc" placeholder="硕士研究生/博士研究生/本科" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="培训类型" prop="pxlx">
|
||||
<el-input v-model="addForm.pxlx" placeholder="学历教育/非学历教育" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="培训类型2">
|
||||
<el-input v-model="addForm.pxlx2" placeholder="全日制/非全日制" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学员类别">
|
||||
<el-input v-model="addForm.xylb" placeholder="请输入学员类别" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学年制">
|
||||
<el-input v-model="addForm.xnz" placeholder="两年半/三年/四年" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学期数">
|
||||
<el-input-number v-model="addForm.xqs" :min="1" :max="12" class="w-full" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="自定义分类">
|
||||
<el-input v-model="addForm.zdyfl" placeholder="兵器类/电子信息类" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="教学管理机构编号">
|
||||
<el-input v-model="addForm.jxgljgbh" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规范名称">
|
||||
<el-input v-model="addForm.gfmc" placeholder="请输入规范名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="专业备注">
|
||||
<el-input v-model="addForm.zybz" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="培养目标" prop="pymb">
|
||||
<el-input v-model="addForm.pymb" type="textarea" :rows="3" placeholder="请输入培养目标" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" :loading="addLoading" @click="handleSubmit">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 各下拉框选项：数据待后端接口返回后替换
|
||||
const PXLX_OPTIONS = [] // 培训类型
|
||||
const PXCC_OPTIONS = [] // 培训层次
|
||||
const ZGZY_OPTIONS = [] // 主干专业
|
||||
const PXLX2_OPTIONS = [] // 培训类型2
|
||||
|
||||
export default {
|
||||
name: 'TrainingPlan',
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
pxlx: PXLX_OPTIONS,
|
||||
pxcc: PXCC_OPTIONS,
|
||||
zgzy: ZGZY_OPTIONS,
|
||||
pxlx2: PXLX2_OPTIONS
|
||||
},
|
||||
// 查询条件
|
||||
searchForm: {
|
||||
zymc: '', zyfx: '',
|
||||
pxlxEnabled: false, pxlx: '',
|
||||
pxccEnabled: false, pxcc: '',
|
||||
zdyfl: '',
|
||||
zgzyEnabled: false, zgzy: '',
|
||||
zydm: '', xnz: '',
|
||||
pxlx2Enabled: false, pxlx2: '',
|
||||
qyztEnabled: false, qyzt: '启用',
|
||||
zybb: '', pymb: ''
|
||||
},
|
||||
// 列表
|
||||
loading: false,
|
||||
tableData: [],
|
||||
selectedRows: [],
|
||||
total: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// 上传
|
||||
selectedFile: null,
|
||||
fileName: '',
|
||||
// 新增/编辑弹窗
|
||||
dialogVisible: false,
|
||||
dialogTitle: '新建',
|
||||
editLoading: false,
|
||||
addLoading: false,
|
||||
addForm: {
|
||||
zydh: '', zymc: '', zyfx: '', zydm: '', zybb: '', pxcc: '', pxlx: '',
|
||||
pxlx2: '', xylb: '', xnz: '', xqs: 1, zdyfl: '', jxgljgbh: '',
|
||||
gfmc: '', zybz: '', pymb: ''
|
||||
},
|
||||
rules: {
|
||||
zydh: [{ required: true, message: '请输入专业代号', trigger: 'blur' }],
|
||||
zymc: [{ required: true, message: '请输入专业名称', trigger: 'blur' }],
|
||||
zydm: [{ required: true, message: '请输入专业代码', trigger: 'blur' }],
|
||||
pxcc: [{ required: true, message: '请输入培训层次', trigger: 'blur' }],
|
||||
pxlx: [{ required: true, message: '请输入培训类型', trigger: 'blur' }],
|
||||
pymb: [{ required: true, message: '请输入培养目标', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pxlxOptions() { return this.options.pxlx },
|
||||
pxccOptions() { return this.options.pxcc },
|
||||
zgzyOptions() { return this.options.zgzy },
|
||||
pxlx2Options() { return this.options.pxlx2 }
|
||||
},
|
||||
created() {
|
||||
// TODO: 待后端接口，拉取下拉选项与列表
|
||||
// this.loadOptions()
|
||||
// this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询 */
|
||||
handleSearch() {
|
||||
// TODO: 调用查询接口
|
||||
},
|
||||
/** 重置 */
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
zymc: '', zyfx: '', pxlxEnabled: false, pxlx: '',
|
||||
pxccEnabled: false, pxcc: '', zdyfl: '', zgzyEnabled: false, zgzy: '',
|
||||
zydm: '', xnz: '', pxlx2Enabled: false, pxlx2: '',
|
||||
qyztEnabled: false, qyzt: '启用', zybb: '', pymb: ''
|
||||
}
|
||||
},
|
||||
/** 新建 */
|
||||
handleOpenAdd() {
|
||||
// TODO: 打开新建对话框
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = '新建人才培养方案'
|
||||
},
|
||||
/** 下载 */
|
||||
handleDownload() {
|
||||
// TODO: 列表数据下载
|
||||
},
|
||||
/** 模板下载 */
|
||||
handleTemplateDownload() {
|
||||
// TODO: 模板下载
|
||||
},
|
||||
/** 选择文件 */
|
||||
handleChooseFile() {
|
||||
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
|
||||
},
|
||||
handleFileChange(e) {
|
||||
const file = e.target.files && e.target.files[0]
|
||||
this.selectedFile = file || null
|
||||
this.fileName = file ? file.name : ''
|
||||
// TODO: 校验文件类型后保留
|
||||
},
|
||||
/** 上传数据 */
|
||||
handleUpload() {
|
||||
// TODO: 上传接口（上传 selectedFile）
|
||||
},
|
||||
/** 表格多选 */
|
||||
handleSelectionChange(rows) {
|
||||
this.selectedRows = rows
|
||||
},
|
||||
/** 编辑 */
|
||||
handleEdit(row) {
|
||||
// TODO: 回填并打开编辑对话框
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = '编辑人才培养方案'
|
||||
},
|
||||
/** 停用 */
|
||||
handleDisable(row) {
|
||||
// TODO: 停用接口
|
||||
},
|
||||
/** 分页 */
|
||||
handlePageChange(val) {
|
||||
this.pageNum = val
|
||||
// TODO: 重新查询
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
// TODO: 重新查询
|
||||
},
|
||||
/** 取消 */
|
||||
handleCancel() {
|
||||
this.dialogVisible = false
|
||||
this.$refs.addFormRef && this.$refs.addFormRef.clearValidate()
|
||||
},
|
||||
/** 保存 */
|
||||
handleSubmit() {
|
||||
this.$refs.addFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
// TODO: 新增/编辑接口
|
||||
this.dialogVisible = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.training-plan-page {
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
.notice {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.action-row {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
|
||||
.upload-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
|
||||
&.has-file {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
.pagination-wrapper {
|
||||
margin-top: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user