zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

前端代码

Browse Source
This commit is contained in:
liumengyu
2026-08-21 18:42:51 +08:00
parent 054947482f
commit 04e06a9c9a
762 changed files with 62992 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/textbook/index.vue
+805
View File
@@ -0,0 +1,805 @@
<template>
<div class="app-container textbook-page">
<el-tabs v-model="activeTab" type="border-card" class="textbook-tabs">
<!-- 教材信息维护 -->
<el-tab-pane label="教材信息维护" name="info">
<!-- 查询条件 -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="170px" class="search-form">
<el-row :gutter="0">
<!-- 左栏 -->
<el-col :span="12">
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jysEnabled">教研室</el-checkbox></template>
<el-select v-model="searchForm.jys" class="w-full" :disabled="!searchForm.jysEnabled">
<el-option v-for="item in jysOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jclxEnabled">教材类型</el-checkbox></template>
<el-select v-model="searchForm.jclx" class="w-full" :disabled="!searchForm.jclxEnabled">
<el-option v-for="item in jclxOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jclx2Enabled">教材重点类型</el-checkbox></template>
<el-select v-model="searchForm.jclx2" class="w-full" :disabled="!searchForm.jclx2Enabled">
<el-option v-for="item in jclx2Options" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jclyEnabled">教材来源</el-checkbox></template>
<el-select v-model="searchForm.jcly" class="w-full" :disabled="!searchForm.jclyEnabled">
<el-option v-for="item in jclyOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="教材名称">
<el-input v-model="searchForm.mc" placeholder="请输入教材名称" clearable />
</el-form-item>
<el-form-item label="教材密级">
<el-select v-model="searchForm.jcmj" placeholder="请选择" clearable class="w-full">
<el-option label="公开" value="公开" />
<el-option label="内部" value="内部" />
<el-option label="秘密" value="秘密" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.zyxzEnabled">在用选项</el-checkbox></template>
<el-radio-group v-model="searchForm.zyxz" :disabled="!searchForm.zyxzEnabled">
<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.zymc" placeholder="请输入专业名称" clearable />
</el-form-item>
<el-form-item label="教材代码">
<el-input v-model="searchForm.jcdm" placeholder="请输入教材代码" clearable />
</el-form-item>
<el-form-item label="出版社">
<el-input v-model="searchForm.cbs" placeholder="请输入出版社" clearable />
</el-form-item>
<el-form-item label="出版日期">
<div class="date-range">
<el-date-picker v-model="searchForm.cbrqStart" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" class="date-picker" />
<span>至</span>
<el-date-picker v-model="searchForm.cbrqEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" class="date-picker" />
</div>
<span class="date-hint">(格式：2019-06-23)</span>
</el-form-item>
</el-col>
<!-- 右栏 -->
<el-col :span="12">
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.kcxmEnabled">课程科目</el-checkbox></template>
<el-select v-model="searchForm.kcxm" class="w-full" :disabled="!searchForm.kcxmEnabled">
<el-option label="雷达对抗基础-DP-V2022" value="雷达对抗基础-DP-V2022" />
<el-option label="高等数学-DP-V2022" value="高等数学-DP-V2022" />
<el-option label="军事理论-DP-V2022" value="军事理论-DP-V2022" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jcflEnabled">教材分类</el-checkbox></template>
<el-select v-model="searchForm.jcfl" class="w-full" :disabled="!searchForm.jcflEnabled">
<el-option v-for="item in jcflOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jcbxlxEnabled">教材编写类型</el-checkbox></template>
<el-select v-model="searchForm.jcbxlx" class="w-full" :disabled="!searchForm.jcbxlxEnabled">
<el-option v-for="item in jcbxlxOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.jcccEnabled">教材层次</el-checkbox></template>
<el-select v-model="searchForm.jccc" class="w-full" :disabled="!searchForm.jcccEnabled">
<el-option v-for="item in jcccOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.cbfsEnabled">出版方式</el-checkbox></template>
<el-select v-model="searchForm.cbfs" class="w-full" :disabled="!searchForm.cbfsEnabled">
<el-option v-for="item in cbfsOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.cyEnabled">彩印选项</el-checkbox></template>
<el-checkbox v-model="searchForm.cy" :disabled="!searchForm.cyEnabled">需彩印</el-checkbox>
</el-form-item>
<el-form-item>
<template slot="label"><el-checkbox v-model="searchForm.wxpbEnabled">外协排版选项</el-checkbox></template>
<el-checkbox v-model="searchForm.wxpb" :disabled="!searchForm.wxpbEnabled">外协排版</el-checkbox>
</el-form-item>
<el-form-item label="课程名称">
<el-input v-model="searchForm.kcmc" placeholder="请输入课程名称" clearable />
</el-form-item>
<el-form-item label="主编、副主编、编者">
<el-input v-model="searchForm.zz" placeholder="请输入主编、副主编、编者" clearable />
</el-form-item>
<el-form-item label="ISBN">
<el-input v-model="searchForm.isbn" placeholder="请输入ISBN" clearable />
</el-form-item>
<el-form-item label="责任教员及联系方式">
<el-input v-model="searchForm.zrjslxfs" placeholder="请输入" clearable />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="search-tip">
注意：勾选"选择框"表示启用该项对应的查询条件，输入框非空表示启用该项对应的查询条件。
</div>
<div class="search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
</div>
</el-card>
<!-- 教材信息列表 -->
<div class="list-title">教材信息列表：</div>
<div class="list-toolbar">
<div class="left-group">
<el-button type="primary" @click="handleNew">新建教材信息</el-button>
<el-button type="primary" @click="handleDownloadList">下载教材列表</el-button>
<el-button type="primary" @click="handleDownloadZip">所选文件资料打包ZIP下载</el-button>
</div>
<div class="right-group">
<el-button type="primary" @click="handleDownloadTemplate">【教材数据文件模板】下载</el-button>
<div class="file-input">
<input ref="fileInput" type="file" accept=".xls,.xlsx" style="display: none" @change="handleFileChange" />
<el-button type="primary" plain @click="handleChooseFile">选择文件</el-button>
<span class="file-name">{{ fileName }}</span>
<el-button type="success" @click="handleImport">上传数据</el-button>
</div>
</div>
</div>
<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="50" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="bh" label="编号" width="80" align="center" />
<el-table-column prop="mc" label="教材名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="zz" label="作者" width="100" align="center" />
<el-table-column prop="cbs" label="出版社" width="140" align="center" />
<el-table-column prop="cbrq" label="出版日期" width="120" align="center" :formatter="formatDate" />
<el-table-column prop="isbn" label="ISBN" width="140" align="center" />
<el-table-column prop="jclx" label="教材类型" width="100" align="center" />
<el-table-column prop="jcfl" label="教材分类" width="100" align="center" />
<el-table-column prop="jcbxlx" label="编写类型" width="100" align="center" />
<el-table-column prop="jcly" label="教材来源" width="120" align="center" />
<el-table-column label="停用" width="80" align="center">
<template slot-scope="{ row }">
<el-tag :type="row.ty ? 'danger' : 'success'" size="small">{{ row.ty ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" class="warn-text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" class="danger-text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-wrap">
<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="handleCurrentChange"
/>
</div>
</el-card>
</el-tab-pane>
<!-- 课程科目教材选用 -->
<el-tab-pane label="课程科目教材选用" name="course">
<el-card shadow="never">
<p>课程科目教材选用内容待完善。</p>
</el-card>
</el-tab-pane>
<!-- 学期教材需求 -->
<el-tab-pane label="学期教材需求" name="term">
<el-card shadow="never">
<p>学期教材需求内容待完善。</p>
</el-card>
</el-tab-pane>
</el-tabs>
<!-- 新建教材对话框 -->
<el-dialog
:visible="addDialogVisible"
title="新建教材"
width="780px"
:close-on-click-modal="false"
@update:visible="val => addDialogVisible = val"
>
<el-form :model="addForm" label-width="140px" class="add-form">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="编号"><el-input v-model="addForm.bh" placeholder="自动生成可留空" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材名称" required><el-input v-model="addForm.mc" 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.zz" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出版社"><el-input v-model="addForm.cbs" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="ISBN"><el-input v-model="addForm.isbn" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出版日期">
<el-date-picker v-model="addForm.cbrq" type="date" value-format="yyyy-MM-dd" placeholder="选择" style="width:100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="教材分类"><el-input v-model="addForm.jcfl" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材类型"><el-input v-model="addForm.jclx" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="编写类型" required>
<el-select v-model="addForm.jcbxlx" placeholder="请选择" 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="重点类型"><el-input v-model="addForm.jczdlx" 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.jcly" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材层次"><el-input v-model="addForm.jccc" 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.bc" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开本"><el-input v-model="addForm.kb" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="单价"><el-input-number v-model="addForm.dj" :min="0" style="width:100%" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计量单位"><el-input v-model="addForm.jldw" 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.zrjyjlxff" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材代码"><el-input v-model="addForm.jcdm" 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.cbfs" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材密级"><el-input v-model="addForm.jcmj" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
</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>
<!-- 编辑教材对话框 -->
<el-dialog
:visible="editDialogVisible"
title="编辑教材"
width="780px"
:close-on-click-modal="false"
@update:visible="val => editDialogVisible = val"
>
<div v-loading="editLoading">
<el-form :model="editForm" label-width="140px" class="add-form">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="编号"><el-input v-model="editForm.bh" disabled /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材名称" required><el-input v-model="editForm.mc" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="作者"><el-input v-model="editForm.zz" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出版社"><el-input v-model="editForm.cbs" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="ISBN"><el-input v-model="editForm.isbn" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出版日期">
<el-date-picker v-model="editForm.cbrq" type="date" value-format="yyyy-MM-dd" placeholder="选择" style="width:100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="教材分类"><el-input v-model="editForm.jcfl" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材类型"><el-input v-model="editForm.jclx" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="编写类型" required>
<el-select v-model="editForm.jcbxlx" placeholder="请选择" 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="重点类型"><el-input v-model="editForm.jczdlx" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="教材来源"><el-input v-model="editForm.jcly" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材层次"><el-input v-model="editForm.jccc" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="版次"><el-input v-model="editForm.bc" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开本"><el-input v-model="editForm.kb" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="单价"><el-input-number v-model="editForm.dj" :min="0" style="width:100%" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计量单位"><el-input v-model="editForm.jldw" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="责任教员联系方式"><el-input v-model="editForm.zrjyjlxff" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材代码"><el-input v-model="editForm.jcdm" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="出版方式"><el-input v-model="editForm.cbfs" placeholder="请输入" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教材密级"><el-input v-model="editForm.jcmj" placeholder="请输入" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer">
<el-button @click="editDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="editSaving" @click="handleEditConfirm">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// 模拟列表数据（后端接口未提供，接口就绪后可删除并改为接口加载）
const mockTableData = [
{ id: 1, bh: 'JC001', mc: '高等数学(上册)', zz: '张三', cbs: '国防工业出版社', cbrq: '2016-08-01', isbn: '978-7-118-00001-0', jclx: '国家规划', jcfl: '基本教材', jcbxlx: '选用', jcly: '教研保障中心外购', ty: false },
{ id: 2, bh: 'JC002', mc: '导弹发射原理', zz: '李四', cbs: '科学出版社', cbrq: '2017-03-15', isbn: '978-7-118-00002-7', jclx: '军队规划', jcfl: '基本教材', jcbxlx: '自编', jcly: '自购', ty: false },
{ id: 3, bh: 'JC003', mc: '通信原理', zz: '王五', cbs: '人民邮电出版社', cbrq: '2015-09-20', isbn: '978-7-118-00003-4', jclx: '国家规划', jcfl: '基本教材', jcbxlx: '选用', jcly: '上级配发', ty: false },
{ id: 4, bh: 'JC004', mc: '军事英语教程', zz: '赵六', cbs: '外研社', cbrq: '2014-05-10', isbn: '978-7-118-00004-1', jclx: '院校自编', jcfl: '辅助教材', jcbxlx: '自编', jcly: '教研保障中心外购', ty: true },
{ id: 5, bh: 'JC005', mc: '联合作战指挥', zz: '孙七', cbs: '军事科学出版社', cbrq: '2018-01-08', isbn: '978-7-118-00005-8', jclx: '军队规划', jcfl: '基本教材', jcbxlx: '自编', jcly: '上级配发', ty: false },
{ id: 6, bh: 'JC006', mc: '装备维修手册', zz: '周八', cbs: '兵器工业出版社', cbrq: '2016-11-30', isbn: '978-7-118-00006-5', jclx: '院校自编', jcfl: '参考资料', jcbxlx: '自编', jcly: '自购', ty: false }
]
export default {
name: 'TextbookIndex',
data() {
return {
activeTab: 'info',
// ==================== 查询表单 ====================
searchForm: {
jys: '未确定教研室', jysEnabled: false,
jclx: '国家规划', jclxEnabled: false,
jcfl: '基本教材', jcflEnabled: false,
jclx2: '一般教材', jclx2Enabled: false,
jcbxlx: '选用', jcbxlxEnabled: false,
jcly: '教研保障中心外购', jclyEnabled: false,
jccc: '无', jcccEnabled: false,
cbfs: '公开出版', cbfsEnabled: false,
cy: false, cyEnabled: false,
mc: '', jcmj: '', jcdm: '', zz: '', cbs: '', isbn: '',
cbrqStart: '', cbrqEnd: '', zrjslxfs: '',
zyxzEnabled: true, zyxz: '在用',
zymc: '',
kcxmEnabled: false, kcxm: '雷达对抗基础-DP-V2022',
wxpbEnabled: false, wxpb: false,
kcmc: ''
},
// ==================== 下拉选项（字典数据，接口就绪后可由后端字典加载） ====================
jysOptions: ['未确定教研室', '军事基础教研室', '政治工作教研室', '装备保障教研室'],
jclxOptions: ['国家规划', '军队规划', '院校自编'],
jcflOptions: ['基本教材', '辅助教材', '参考资料'],
jclx2Options: ['一般教材', '重点教材', '规划教材'],
jcbxlxOptions: ['选用', '自编'],
jclyOptions: ['教研保障中心外购', '自购', '上级配发'],
jcccOptions: ['无', '本科', '研究生'],
cbfsOptions: ['公开出版', '内部出版'],
// ==================== 表格数据 ====================
loading: false,
selectedRows: [],
tableData: [],
pagination: { pageNum: 1, pageSize: 20, total: 0 },
// ==================== 新建教材 ====================
addDialogVisible: false,
addSaving: false,
addForm: this.createEmptyAddForm(),
// ==================== 编辑教材 ====================
editDialogVisible: false,
editLoading: false,
editSaving: false,
editForm: {},
// ==================== 导入 ====================
selectedFile: null
}
},
computed: {
fileName() {
return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
}
},
mounted() {
this.fetchList()
},
methods: {
/** 表格日期格式化 */
formatDate(row, column, cellValue) {
return cellValue ? String(cellValue).substring(0, 10) : ''
},
/** 创建空白新建表单 */
createEmptyAddForm() {
return {
bh: '', mc: '', isbn: '', cbs: '', bc: '', kb: '', zz: '', dj: 1,
jcfl: '', jclx: '', jcbxlx: '', jczdlx: '', bz: '', ty: false, tyrq: '', jldw: '本',
cbrq: '', cjsj: '', xgsj: '', jcly: '', jccc: '', zrjyjlxff: '',
cbfs: '', jcdm: '', bxdw: '', jysdh: '', jcmj: '', xcy: false
}
},
// ==================== 列表加载 ====================
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为 getTeachingMaterialList
fetchList() {
this.loading = true
setTimeout(() => {
this.tableData = mockTableData.slice()
this.pagination.total = mockTableData.length
this.loading = false
}, 200)
},
// ==================== 查询 ====================
handleSearch() {
this.pagination.pageNum = 1
this.fetchList()
this.$message.success('查询教材列表（前端模拟）')
},
handleSizeChange(size) {
this.pagination.pageSize = size
this.fetchList()
},
handleCurrentChange(page) {
this.pagination.pageNum = page
this.fetchList()
},
handleSelectionChange(rows) {
this.selectedRows = rows
},
// ==================== 按钮操作 ====================
handleDownloadList() {
this.$message.success('下载教材列表（前端模拟）')
},
handleDownloadZip() {
if (this.selectedRows.length === 0) {
this.$message.warning('请先选择数据')
return
}
this.$message.success('所选文件资料打包ZIP下载（前端模拟）')
},
// ==================== 新建教材 ====================
handleNew() {
this.addForm = this.createEmptyAddForm()
this.addDialogVisible = true
},
// TODO: 后端接口未提供，保存为前端模拟；接口就绪后替换为 addTeachingMaterial
handleAddConfirm() {
if (!this.addForm.mc) {
this.$message.warning('请输入教材名称')
return
}
if (this.addForm.jcbxlx === '选用' && !this.addForm.isbn) {
this.$message.warning('选用教材必须填写ISBN')
return
}
this.addSaving = true
setTimeout(() => {
this.$message.success('新增成功')
this.addDialogVisible = false
this.fetchList()
this.addSaving = false
}, 300)
},
// ==================== 编辑教材 ====================
// TODO: 后端接口未提供，直接使用当前行数据；接口就绪后替换为 getTeachingMaterialById
handleEdit(row) {
this.editDialogVisible = true
this.editLoading = true
setTimeout(() => {
this.editForm = { ...row }
this.editLoading = false
}, 200)
},
// TODO: 后端接口未提供，保存为前端模拟；接口就绪后替换为 updateTeachingMaterial
handleEditConfirm() {
if (!this.editForm.mc) {
this.$message.warning('请输入教材名称')
return
}
if (this.editForm.jcbxlx === '选用' && !this.editForm.isbn) {
this.$message.warning('选用教材必须填写ISBN')
return
}
this.editSaving = true
setTimeout(() => {
this.$message.success('保存成功')
this.editDialogVisible = false
this.fetchList()
this.editSaving = false
}, 300)
},
// TODO: 后端接口未提供，删除为前端模拟；接口就绪后替换为 deleteTeachingMaterial
handleDelete(row) {
if (!row.id) {
this.$message.warning('当前行缺少ID')
return
}
this.$confirm(`确定要删除教材「${row.mc || row.bh}」吗？`, '删除确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData = this.tableData.filter((r) => r.id !== row.id)
this.pagination.total = this.tableData.length
this.$message.success('删除成功')
}).catch(() => {})
},
// ==================== 导入 ====================
handleChooseFile() {
this.$refs.fileInput && this.$refs.fileInput.click()
},
handleFileChange(e) {
const input = e.target
if (input.files && input.files.length > 0) {
this.selectedFile = input.files[0]
}
},
// TODO: 后端接口未提供，导入为前端模拟；接口就绪后替换为 importTeachingMaterial
handleImport() {
if (!this.selectedFile) {
this.$message.warning('请先选择文件')
return
}
this.$message.success('导入成功（前端模拟）')
this.selectedFile = null
this.fetchList()
},
// TODO: 后端接口未提供，模板下载为前端模拟；接口就绪后替换为 downloadTeachingMaterialTemplate
handleDownloadTemplate() {
this.$message.success('【教材数据文件模板】已下载（前端模拟）')
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.textbook-tabs {
.search-card {
margin-bottom: 16px;
.search-form {
.w-full {
width: 100%;
}
.el-row {
border-bottom: 1px solid #ebeef5;
&:last-child {
border-bottom: none;
}
}
.el-col {
border-right: 1px solid #ebeef5;
&:last-child {
border-right: none;
}
}
.el-form-item__label {
white-space: nowrap;
line-height: 1.4;
text-align: left;
justify-content: flex-start;
}
.el-form-item {
margin-bottom: 0;
padding: 10px 12px;
}
.date-range {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
.date-picker {
flex: 1;
}
}
.date-hint {
font-size: 12px;
color: #909399;
flex-shrink: 0;
}
}
.search-tip {
font-size: 12px;
color: #f56c6c;
padding: 8px 12px;
}
.search-actions {
display: flex;
justify-content: flex-end;
padding: 12px;
border-top: 1px solid #ebeef5;
}
}
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
}
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
.left-group,
.right-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.file-input {
display: flex;
align-items: center;
gap: 8px;
.file-name {
font-size: 14px;
color: #606266;
min-width: 120px;
}
}
}
.table-card {
margin-bottom: 16px;
::v-deep(.el-table) {
width: 100%;
}
.pagination-wrap {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
}
// 表格操作按钮文字颜色
.warn-text {
color: #e6a23c;
padding: 0;
}
.danger-text {
color: #f56c6c;
padding: 0;
}
}
</style>