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

人才培养方案工具条调整

Browse Source
This commit is contained in:
liweijie
2026-09-18 11:36:30 +08:00
parent a0d5a3b0fe
commit b529f0b523
1 changed files with 83 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/teachBusiness/trainingPlan/index.vue
+83 -68
View File
@@ -60,34 +60,16 @@
</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="handleAdd">新建</el-button>
<el-button icon="el-icon-download" @click="handleDownload">下载</el-button>
</div>
<div class="action-row">
<el-button icon="el-icon-download" @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. 数据表格区域 ==================== -->
<!-- ==================== 2. 数据表格区域 ==================== -->
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">人才培养方案列表</div>
<div class="list-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建</el-button>
<el-button icon="el-icon-download" @click="handleDownload">下载</el-button>
<el-button icon="el-icon-download" @click="handleTemplateDownload">【人才培养方案目录模板】下载</el-button>
<el-button icon="el-icon-upload2" @click="openUploadDialog">数据上传</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe highlight-current-row>
<el-table-column type="index" label="序号" width="60" align="center" />
@@ -353,6 +335,33 @@
<el-button @click="detail.visible = false">关 闭</el-button>
</div>
</el-dialog>
<!-- ==================== 数据上传弹窗 ==================== -->
<el-dialog title="人才培养方案数据上传" :visible.sync="uploadDialog.visible" width="620px" append-to-body
:close-on-click-modal="false">
<el-alert type="info" :closable="false" show-icon class="upload-tip"
title="请先下载目录模板，按模板列填写后再上传。" />
<el-form label-width="110px" class="upload-form">
<el-form-item label="导入模板">
<el-button icon="el-icon-download" @click="handleTemplateDownload">【人才培养方案目录模板】下载</el-button>
</el-form-item>
<el-form-item label="数据文件">
<div class="file-input">
<input ref="fileInputRef" type="file" accept=".xls,.xlsx" style="display: none" @change="handleFileChange" />
<el-button icon="el-icon-folder-opened" @click="handleChooseFile">选择文件</el-button>
<span class="file-name" :class="{ 'has-file': selectedFile }">
{{ selectedFile ? fileName : '未选择任何文件' }}
</span>
<el-button v-if="selectedFile" type="text" class="danger-text-btn" @click="clearUploadFile">清除</el-button>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="uploadDialog.visible = false">取 消</el-button>
<el-button type="primary" icon="el-icon-upload2" :disabled="!selectedFile"
:loading="uploadDialog.uploading" @click="handleUpload">上传数据</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -400,6 +409,10 @@ export default {
// 上传
selectedFile: null,
fileName: '',
uploadDialog: {
visible: false,
uploading: false
},
// 新增/编辑弹窗
dialog: {
visible: false,
@@ -622,6 +635,9 @@ export default {
this.$message.success('模板下载成功')
}).catch(() => {})
},
openUploadDialog() {
this.uploadDialog.visible = true
},
handleChooseFile() {
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
},
@@ -630,19 +646,26 @@ export default {
this.selectedFile = file || null
this.fileName = file ? file.name : ''
},
clearUploadFile() {
this.selectedFile = null
this.fileName = ''
if (this.$refs.fileInputRef) this.$refs.fileInputRef.value = ''
},
handleUpload() {
if (!this.selectedFile) {
this.$message.warning('请先选择文件')
return
}
this.uploadDialog.uploading = true
importTrainingProgram(this.selectedFile).then(response => {
const count = (response && response.data) || 0
this.$message.success(`导入成功，共导入 ${count} 条`)
this.selectedFile = null
this.fileName = ''
if (this.$refs.fileInputRef) this.$refs.fileInputRef.value = ''
this.uploadDialog.visible = false
this.clearUploadFile()
this.fetchList()
}).catch(() => {})
}).catch(() => {}).finally(() => {
this.uploadDialog.uploading = false
})
},
/* ---------- 工具 ---------- */
@@ -800,45 +823,6 @@ export default {
}
}
.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 {
.list-header {
display: flex;
@@ -851,6 +835,16 @@ export default {
font-weight: 600;
color: #303133;
}
.list-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
.el-button + .el-button {
margin-left: 0;
}
}
}
.pagination {
@@ -859,6 +853,27 @@ export default {
}
}
.upload-tip {
margin-bottom: 16px;
}
.upload-form {
.file-input {
display: flex;
align-items: center;
gap: 12px;
.file-name {
font-size: 14px;
color: #606266;
&.has-file {
color: #409eff;
}
}
}
}
.detail-body {
min-height: 60px;
}