前端代码
This commit is contained in:
liumengyu
@@ -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>
|
||||
Reference in New Issue
Block a user