|
|
<template>
|
|
|
<div style="height: 100%">
|
|
|
<!-- 项目手册管理 -->
|
|
|
<!-- 表单查询项 -->
|
|
|
<div v-if="!previewMode" class="headerbox">
|
|
|
<div class="search-form">
|
|
|
<div class="form-item">
|
|
|
<span class="label">手册名称</span>
|
|
|
<el-input
|
|
|
v-model="queryParams.name"
|
|
|
placeholder="请输入模板标题"
|
|
|
clearable
|
|
|
class="search-input"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="form-item">
|
|
|
<span class="label">创建时间</span>
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.startTime"
|
|
|
type="date"
|
|
|
placeholder="选择日期"
|
|
|
class="search-date"
|
|
|
></el-date-picker>
|
|
|
</div>
|
|
|
<div class="form-item btn-group">
|
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 表格内容区 -->
|
|
|
<div v-if="!previewMode" class="tablebox">
|
|
|
<div class="tablebtntwo">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-plus"
|
|
|
size="mini"
|
|
|
:loading="exportLoading"
|
|
|
@click="handleExport"
|
|
|
>项目手册导出</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-plus"
|
|
|
size="mini"
|
|
|
@click="handleAdd"
|
|
|
>新增</el-button
|
|
|
>
|
|
|
</div>
|
|
|
<el-table
|
|
|
v-loading="loading"
|
|
|
:data="postList"
|
|
|
@selection-change="handleSelectionChange"
|
|
|
>
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
<el-table-column label="序号" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.$index + 1 }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="手册名称" align="center" prop="name" />
|
|
|
<!-- <el-table-column label="发布单位" align="center" prop="unit" /> -->
|
|
|
<!-- <el-table-column label="发布人" align="center" prop="author" /> -->
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" />
|
|
|
<el-table-column label="操作" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
|
style="color: gray"
|
|
|
@click="handlePreview(scope.row)"
|
|
|
>预览</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
|
style="color: #67c23a"
|
|
|
@click="handleEdit(scope.row)"
|
|
|
>编辑</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
|
style="color: #f56c6c"
|
|
|
@click="handleDelete(scope.row)"
|
|
|
>删除</el-button
|
|
|
>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<pagination
|
|
|
v-show="total > 0"
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.current"
|
|
|
:limit.sync="queryParams.size"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="previewMode" class="previewbox">
|
|
|
<div class="preview-header">
|
|
|
<div class="preview-title">
|
|
|
<i class="el-icon-document"></i>
|
|
|
<span>{{ previewData.name || "项目手册预览" }}</span>
|
|
|
</div>
|
|
|
<div class="preview-controls">
|
|
|
<div class="page-counter" v-if="pageCount > 0">
|
|
|
<span>{{ currentPage }} / {{ pageCount }}</span>
|
|
|
</div>
|
|
|
<el-button-group class="navigation-buttons">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="primary"
|
|
|
icon="el-icon-arrow-left"
|
|
|
:disabled="currentPage <= 1"
|
|
|
@click="prevPage"
|
|
|
>上一页</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="primary"
|
|
|
icon="el-icon-arrow-right"
|
|
|
:disabled="currentPage >= pageCount"
|
|
|
@click="nextPage"
|
|
|
>下一页</el-button
|
|
|
>
|
|
|
</el-button-group>
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="info"
|
|
|
icon="el-icon-back"
|
|
|
@click="previewMode = false"
|
|
|
>返回</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="preview-content" v-loading="loadingPdf">
|
|
|
<pdf
|
|
|
v-if="pdfData"
|
|
|
:src="pdfData"
|
|
|
:page="currentPage"
|
|
|
@num-pages="pageCount = $event"
|
|
|
@page-loaded="pageLoaded"
|
|
|
@loaded="pdfLoaded"
|
|
|
@error="pdfError"
|
|
|
:scale="pdfScale"
|
|
|
></pdf>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 创建新手册弹框 -->
|
|
|
<el-dialog
|
|
|
:title="editingHandbook ? '编辑手册' : '创建新手册'"
|
|
|
:visible.sync="addDialogVisible"
|
|
|
width="70%"
|
|
|
:close-on-click-modal="false"
|
|
|
:show-close="true"
|
|
|
:before-close="handleAddDialogClose"
|
|
|
class="handbook-dialog"
|
|
|
>
|
|
|
<div class="step-container">
|
|
|
<el-steps :active="activeStep" align-center finish-status="finish ">
|
|
|
<el-step title="封面设置"></el-step>
|
|
|
<el-step title="选择项目"></el-step>
|
|
|
<el-step title="封尾设计"></el-step>
|
|
|
</el-steps>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤1：封面设置 -->
|
|
|
<div v-if="activeStep === 1" class="step-content">
|
|
|
<div class="cover-form">
|
|
|
<div class="form-row">
|
|
|
<div class="form-col">
|
|
|
<label class="form-label">手册名称</label>
|
|
|
<el-input
|
|
|
v-model="coverForm.title"
|
|
|
placeholder="请输入"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
<div class="form-col">
|
|
|
<label class="form-label">副标题</label>
|
|
|
<el-input
|
|
|
v-model="coverForm.subtitle"
|
|
|
placeholder="请输入"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="form-col-full">
|
|
|
<label class="form-label">封面图片</label>
|
|
|
<file-upload
|
|
|
v-model="coverForm.imageUrl"
|
|
|
:limit="1"
|
|
|
:file-size="10"
|
|
|
:file-type="['png', 'jpg', 'jpeg', 'gif']"
|
|
|
></file-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤2：选择项目 -->
|
|
|
<div v-if="activeStep === 2" class="step-content project-step">
|
|
|
<div class="cover-form">
|
|
|
<div class="project-top">
|
|
|
<div class="search-container">
|
|
|
<div class="search-label">项目名称：</div>
|
|
|
<el-input
|
|
|
v-model="projectSearch"
|
|
|
placeholder="请输入"
|
|
|
class="search-input"
|
|
|
></el-input>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="searchProjects"
|
|
|
class="search-btn"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
<el-button @click="resetProjectSearch" class="search-btn"
|
|
|
>重置</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="confirmSelection"
|
|
|
class="search-btn"
|
|
|
>确认勾选</el-button
|
|
|
>
|
|
|
</div>
|
|
|
|
|
|
<div class="project-table">
|
|
|
<el-table
|
|
|
ref="projectTable"
|
|
|
:data="projectList"
|
|
|
@selection-change="handleProjectSelectionChange"
|
|
|
@row-click="handleRowClick"
|
|
|
height="400"
|
|
|
:row-key="(row) => row.id"
|
|
|
>
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
width="55"
|
|
|
align="center"
|
|
|
:reserve-selection="true"
|
|
|
></el-table-column>
|
|
|
<el-table-column label="序号" width="60" align="center">
|
|
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="name"
|
|
|
label="项目名称"
|
|
|
align="center"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="xzfl"
|
|
|
label="现状分类"
|
|
|
align="center"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="xmfrdwxz"
|
|
|
label="项目法人单位"
|
|
|
align="center"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="项目建设起止时间" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<span
|
|
|
>{{
|
|
|
scope.row.begainTime
|
|
|
? scope.row.begainTime.replace(/-/g, ".")
|
|
|
: ""
|
|
|
}}-{{
|
|
|
scope.row.endTime
|
|
|
? scope.row.endTime.replace(/-/g, ".")
|
|
|
: ""
|
|
|
}}</span
|
|
|
>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="ztze"
|
|
|
label="总投资额(万元)"
|
|
|
align="center"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="zydmj"
|
|
|
label="总用地面积(平方米)"
|
|
|
align="center"
|
|
|
></el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<div class="pagination-box">
|
|
|
<pagination
|
|
|
v-show="projectTotal > 0"
|
|
|
:total="projectTotal"
|
|
|
:page.sync="projectParams.pageNum"
|
|
|
:limit.sync="projectParams.pageSize"
|
|
|
@pagination="handleProjectPagination"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="selected-projects-container"
|
|
|
v-if="selectedProjects.length > 0"
|
|
|
>
|
|
|
<div class="selected-header">已选中项目</div>
|
|
|
<div class="selected-list">
|
|
|
<div
|
|
|
v-for="(project, index) in selectedProjects"
|
|
|
:key="index"
|
|
|
class="selected-item"
|
|
|
@click="removeSelectedProject(project)"
|
|
|
>
|
|
|
<div class="dot-indicator"></div>
|
|
|
<span class="project-name">{{ project.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="activeStep === 3" class="step-content">
|
|
|
<div class="cover-form">
|
|
|
<div class="form-row">
|
|
|
<div class="form-col-full">
|
|
|
<label class="form-label">封尾图片</label>
|
|
|
<file-upload
|
|
|
v-model="endForm.imageUrl"
|
|
|
:limit="1"
|
|
|
:file-size="10"
|
|
|
:file-type="['png', 'jpg', 'jpeg', 'gif']"
|
|
|
></file-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="form-col">
|
|
|
<label class="form-label">副标题</label>
|
|
|
<el-input
|
|
|
v-model="endForm.subtitle"
|
|
|
placeholder="请输入"
|
|
|
style="width: 60%"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="prevStep" v-if="activeStep > 1" size="small"
|
|
|
>上一步</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
class="btn-next"
|
|
|
@click="nextStep"
|
|
|
v-if="activeStep < 3"
|
|
|
size="small"
|
|
|
>下一步</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
class="btn-next"
|
|
|
@click="submitHandbook"
|
|
|
v-if="activeStep === 3"
|
|
|
size="small"
|
|
|
>{{ editingHandbook ? '更新手册' : '生成手册' }}</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import VueOfficeDocx from "@vue-office/docx";
|
|
|
import pdf from "vue-pdf";
|
|
|
import axios from "axios";
|
|
|
import {
|
|
|
getHandbookPage,
|
|
|
addHandbook,
|
|
|
updateHandbook,
|
|
|
deleteHandbook,
|
|
|
getHandbookDetail,
|
|
|
exportHandbook,
|
|
|
getBasicInformationPage,
|
|
|
} from "@/api/ManageApi/index";
|
|
|
import FileUpload from "@/components/FileUpload3";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
"vue-office-docx": VueOfficeDocx,
|
|
|
pdf: pdf,
|
|
|
Pagination: () => import("@/components/Pagination"),
|
|
|
FileUpload,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
queryParams: {
|
|
|
current: 1,
|
|
|
size: 10,
|
|
|
name: "",
|
|
|
startTime: "",
|
|
|
},
|
|
|
allPostList: [],
|
|
|
postList: [],
|
|
|
loading: false,
|
|
|
total: 0,
|
|
|
previewMode: false,
|
|
|
previewData: {},
|
|
|
// DOCX文件数据
|
|
|
docxFileData: null,
|
|
|
addDialogVisible: false,
|
|
|
activeStep: 1,
|
|
|
coverForm: {
|
|
|
title: "",
|
|
|
subtitle: "",
|
|
|
imageUrl: "",
|
|
|
},
|
|
|
|
|
|
// 项目选择相关
|
|
|
projectSearch: "",
|
|
|
projectList: [],
|
|
|
selectedProjects: [],
|
|
|
projectParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
},
|
|
|
projectTotal: 0,
|
|
|
|
|
|
// 封尾设计
|
|
|
endForm: {
|
|
|
imageUrl: "",
|
|
|
subtitle: "",
|
|
|
},
|
|
|
|
|
|
// 导出相关
|
|
|
selectedRows: [],
|
|
|
exportLoading: false,
|
|
|
selectedProjectIds: [], // 新增：存储选中项目的id
|
|
|
|
|
|
// PDF预览相关
|
|
|
pdfData: null,
|
|
|
currentPage: 1,
|
|
|
pageCount: 0,
|
|
|
loadingPdf: false,
|
|
|
pdfScale: 0.9, // 控制PDF缩放比例
|
|
|
|
|
|
// 编辑模式相关
|
|
|
editingHandbook: null, // 当前正在编辑的手册对象
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取表格数据
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
getHandbookPage(this.queryParams)
|
|
|
.then((res) => {
|
|
|
this.postList = res.data.records;
|
|
|
this.total = res.data.total;
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
getHandbookDetail(id) {
|
|
|
getHandbookDetail(id)
|
|
|
.then((res) => {
|
|
|
this.previewData = res.data;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
// 查询
|
|
|
handleQuery() {
|
|
|
this.queryParams.current = 1;
|
|
|
this.getList();
|
|
|
},
|
|
|
// 重置查询
|
|
|
resetQuery() {
|
|
|
this.queryParams = {
|
|
|
current: 1,
|
|
|
size: 10,
|
|
|
title: undefined,
|
|
|
startTime: undefined,
|
|
|
};
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
// 表格选择变化
|
|
|
handleSelectionChange(selection) {
|
|
|
this.selectedRows = selection;
|
|
|
},
|
|
|
// 预览文档
|
|
|
handlePreview(row) {
|
|
|
this.previewMode = true;
|
|
|
this.previewData = row;
|
|
|
this.currentPage = 1;
|
|
|
this.pageCount = 0;
|
|
|
this.loadingPdf = true;
|
|
|
|
|
|
// 使用exportHandbook API获取PDF流
|
|
|
this.loadPdfFromApi(row.id);
|
|
|
},
|
|
|
// 从API获取PDF流并预览
|
|
|
async loadPdfFromApi(id) {
|
|
|
try {
|
|
|
console.log("正在获取PDF文件，ID:", id);
|
|
|
// 使用和导出功能相同的API获取PDF文件
|
|
|
const res = await exportHandbook([id]);
|
|
|
|
|
|
if (!res) {
|
|
|
throw new Error("获取PDF文件失败，返回为空");
|
|
|
}
|
|
|
|
|
|
// 将二进制数据转换为Blob对象
|
|
|
const blob = new Blob([res], { type: "application/pdf" });
|
|
|
|
|
|
// 创建URL
|
|
|
this.pdfData = URL.createObjectURL(blob);
|
|
|
console.log("PDF文件加载成功");
|
|
|
this.loadingPdf = false;
|
|
|
} catch (error) {
|
|
|
console.error("加载PDF文件失败:", error);
|
|
|
this.$message.error("PDF加载失败: " + (error.message || "未知错误"));
|
|
|
this.loadingPdf = false;
|
|
|
}
|
|
|
},
|
|
|
// PDF页面加载完成事件
|
|
|
pageLoaded() {
|
|
|
console.log("PDF页面加载完成");
|
|
|
this.loadingPdf = false;
|
|
|
},
|
|
|
// PDF文档完全加载完成
|
|
|
pdfLoaded() {
|
|
|
console.log("PDF文档加载完成");
|
|
|
},
|
|
|
// PDF加载错误
|
|
|
pdfError(error) {
|
|
|
console.error("PDF渲染错误:", error);
|
|
|
this.$message.error("PDF渲染失败: " + (error.message || "未知错误"));
|
|
|
this.loadingPdf = false;
|
|
|
},
|
|
|
// 上一页
|
|
|
prevPage() {
|
|
|
if (this.currentPage > 1) {
|
|
|
this.currentPage--;
|
|
|
}
|
|
|
},
|
|
|
// 下一页
|
|
|
nextPage() {
|
|
|
if (this.currentPage < this.pageCount) {
|
|
|
this.currentPage++;
|
|
|
}
|
|
|
},
|
|
|
// 项目手册导出
|
|
|
async handleExport() {
|
|
|
if (!this.selectedRows || this.selectedRows.length === 0) {
|
|
|
this.$message.warning("请先选择要导出的手册");
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
this.exportLoading = true;
|
|
|
const idList = this.selectedRows.map((item) => item.id);
|
|
|
// 修改请求为直接获取二进制数据
|
|
|
const res = await exportHandbook(idList);
|
|
|
this.$download.saveAs(res, "项目手册.pdf");
|
|
|
this.$message.success("导出成功");
|
|
|
} catch (error) {
|
|
|
console.error("导出错误:", error);
|
|
|
this.$message.error("导出过程中发生错误");
|
|
|
} finally {
|
|
|
this.exportLoading = false;
|
|
|
}
|
|
|
},
|
|
|
handleAdd() {
|
|
|
this.addDialogVisible = true;
|
|
|
this.activeStep = 1;
|
|
|
this.resetAddForm();
|
|
|
this.editingHandbook = null;
|
|
|
this.selectedProjectIds = [];
|
|
|
this.selectedProjects = [];
|
|
|
this.getProjectList();
|
|
|
},
|
|
|
handleAddDialogClose(done) {
|
|
|
// this.$confirm("确认关闭？未保存的数据将会丢失", "提示", {
|
|
|
// confirmButtonText: "确定",
|
|
|
// cancelButtonText: "取消",
|
|
|
// type: "warning",
|
|
|
// })
|
|
|
// .then(() => {
|
|
|
this.resetAddForm();
|
|
|
this.editingHandbook = null;
|
|
|
this.selectedProjectIds = [];
|
|
|
this.selectedProjects = [];
|
|
|
done();
|
|
|
// })
|
|
|
// .catch(() => {});
|
|
|
},
|
|
|
resetAddForm() {
|
|
|
this.coverForm = {
|
|
|
title: "",
|
|
|
subtitle: "",
|
|
|
imageUrl: "",
|
|
|
};
|
|
|
this.projectSearch = "";
|
|
|
this.endForm = {
|
|
|
imageUrl: "",
|
|
|
subtitle: "",
|
|
|
};
|
|
|
},
|
|
|
// 下一步
|
|
|
nextStep() {
|
|
|
if (this.activeStep === 1) {
|
|
|
// 可以添加表单验证
|
|
|
if (!this.coverForm.title) {
|
|
|
this.$message.warning("请输入手册名称");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
this.activeStep++;
|
|
|
},
|
|
|
// 上一步
|
|
|
prevStep() {
|
|
|
this.activeStep--;
|
|
|
},
|
|
|
// 获取项目列表
|
|
|
getProjectList() {
|
|
|
this.loading = true;
|
|
|
const params = {
|
|
|
current: this.projectParams.pageNum,
|
|
|
size: this.projectParams.pageSize,
|
|
|
name: this.projectSearch || undefined,
|
|
|
};
|
|
|
|
|
|
getBasicInformationPage(params)
|
|
|
.then((response) => {
|
|
|
this.projectList = response.data.records;
|
|
|
this.projectTotal = response.data.total;
|
|
|
this.loading = false;
|
|
|
|
|
|
// 恢复之前选中的行
|
|
|
this.$nextTick(() => {
|
|
|
this.restoreSelection();
|
|
|
});
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.error("获取项目列表失败:", error);
|
|
|
this.loading = false;
|
|
|
this.$message.error("获取项目列表失败");
|
|
|
});
|
|
|
},
|
|
|
// 搜索项目
|
|
|
searchProjects() {
|
|
|
this.projectParams.pageNum = 1;
|
|
|
this.getProjectList();
|
|
|
},
|
|
|
// 重置项目搜索
|
|
|
resetProjectSearch() {
|
|
|
this.projectSearch = "";
|
|
|
this.projectParams.pageNum = 1;
|
|
|
this.getProjectList();
|
|
|
},
|
|
|
// 确认勾选项目
|
|
|
confirmSelection() {
|
|
|
if (this.selectedProjects.length === 0) {
|
|
|
this.$message.warning("请至少选择一个项目");
|
|
|
return;
|
|
|
}
|
|
|
this.$message.success(`已选择 ${this.selectedProjects.length} 个项目`);
|
|
|
},
|
|
|
handleProjectSelectionChange(selection) {
|
|
|
const currentPageIds = this.projectList.map((item) => item.id);
|
|
|
const otherPagesSelectedProjects = this.selectedProjects.filter(
|
|
|
(project) => !currentPageIds.includes(project.id)
|
|
|
);
|
|
|
this.selectedProjects = [...selection, ...otherPagesSelectedProjects];
|
|
|
|
|
|
const uncheckedIds = currentPageIds.filter(
|
|
|
(id) => !selection.some((selected) => selected.id === id)
|
|
|
);
|
|
|
this.selectedProjectIds = this.selectedProjectIds.filter(
|
|
|
(id) => !uncheckedIds.includes(id)
|
|
|
);
|
|
|
selection.forEach((item) => {
|
|
|
if (!this.selectedProjectIds.includes(item.id)) {
|
|
|
this.selectedProjectIds.push(item.id);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
removeSelectedProject(project) {
|
|
|
this.selectedProjects = this.selectedProjects.filter(
|
|
|
(item) => item.id !== project.id
|
|
|
);
|
|
|
this.selectedProjectIds = this.selectedProjectIds.filter(
|
|
|
(id) => id !== project.id
|
|
|
);
|
|
|
this.$refs.projectTable.toggleRowSelection(
|
|
|
this.projectList.find((item) => item.id === project.id),
|
|
|
false
|
|
|
);
|
|
|
},
|
|
|
handleProjectPagination() {
|
|
|
this.getProjectList();
|
|
|
},
|
|
|
handleRowClick(row) {
|
|
|
this.$refs.projectTable.toggleRowSelection(row);
|
|
|
},
|
|
|
|
|
|
// 提交生成手册
|
|
|
submitHandbook() {
|
|
|
if (this.selectedProjects.length === 0) {
|
|
|
this.$message.warning("请至少选择一个项目");
|
|
|
return;
|
|
|
}
|
|
|
const data = {
|
|
|
coverImg: this.coverForm.imageUrl,
|
|
|
name: this.coverForm.title,
|
|
|
subtitle: this.coverForm.subtitle,
|
|
|
tailingImg: this.endForm.imageUrl,
|
|
|
tail: this.endForm.subtitle,
|
|
|
xmId: this.selectedProjects.map((project) => project.id).join(","),
|
|
|
};
|
|
|
|
|
|
console.log("提交的数据：", data);
|
|
|
|
|
|
if (this.editingHandbook) {
|
|
|
// 编辑模式，添加ID
|
|
|
data.id = this.editingHandbook.id;
|
|
|
|
|
|
// 调用更新API
|
|
|
updateHandbook(data)
|
|
|
.then((res) => {
|
|
|
this.$message.success("手册更新成功");
|
|
|
this.addDialogVisible = false;
|
|
|
this.getList();
|
|
|
// 重置编辑状态
|
|
|
this.editingHandbook = null;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.$message.error("手册更新失败");
|
|
|
});
|
|
|
} else {
|
|
|
// 新增模式
|
|
|
addHandbook(data)
|
|
|
.then((res) => {
|
|
|
this.$message.success("手册生成成功");
|
|
|
this.addDialogVisible = false;
|
|
|
this.getList();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.$message.error("手册生成失败");
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 编辑按钮操作
|
|
|
handleEdit(row) {
|
|
|
// 获取手册详情
|
|
|
this.loading = true;
|
|
|
getHandbookDetail(row.id).then(res => {
|
|
|
const detail = res.data;
|
|
|
|
|
|
// 填充封面信息
|
|
|
this.coverForm = {
|
|
|
title: detail.name,
|
|
|
subtitle: detail.subtitle,
|
|
|
imageUrl: detail.coverImg
|
|
|
};
|
|
|
|
|
|
// 填充封尾信息
|
|
|
this.endForm = {
|
|
|
imageUrl: detail.tailingImg,
|
|
|
subtitle: detail.tail
|
|
|
};
|
|
|
|
|
|
// 处理项目ID列表
|
|
|
if (detail.xmId) {
|
|
|
const projectIds = detail.xmId.split(',');
|
|
|
this.selectedProjectIds = projectIds;
|
|
|
console.log("已选项目ID列表：", this.selectedProjectIds);
|
|
|
|
|
|
// 获取项目列表以显示已选项目
|
|
|
this.getProjectList();
|
|
|
}
|
|
|
|
|
|
this.loading = false;
|
|
|
this.addDialogVisible = true;
|
|
|
this.activeStep = 1;
|
|
|
this.editingHandbook = detail;
|
|
|
}).catch(() => {
|
|
|
this.$message.error("获取手册详情失败");
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
// 删除按钮操作
|
|
|
handleDelete(row) {
|
|
|
this.$confirm("是否确认删除该手册?", "警告", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.$message.success("删除成功");
|
|
|
this.getList();
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
// 恢复选中状态
|
|
|
restoreSelection() {
|
|
|
if (this.$refs.projectTable) {
|
|
|
this.$refs.projectTable.clearSelection();
|
|
|
const selectedRows = this.projectList.filter((row) =>
|
|
|
this.selectedProjectIds.includes(row.id)
|
|
|
);
|
|
|
selectedRows.forEach((row) => {
|
|
|
this.$refs.projectTable.toggleRowSelection(row, true);
|
|
|
});
|
|
|
const currentPageIds = this.projectList.map((item) => item.id);
|
|
|
const otherPagesSelectedProjects = this.selectedProjects.filter(
|
|
|
(project) =>
|
|
|
!currentPageIds.includes(project.id) &&
|
|
|
this.selectedProjectIds.includes(project.id)
|
|
|
);
|
|
|
const currentPageSelectedProjects = this.projectList.filter((item) =>
|
|
|
this.selectedProjectIds.includes(item.id)
|
|
|
);
|
|
|
|
|
|
// 合并当前页和其他页的选择，确保不重复
|
|
|
this.selectedProjects = [
|
|
|
...currentPageSelectedProjects,
|
|
|
...otherPagesSelectedProjects,
|
|
|
];
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
/* 通用容器样式 */
|
|
|
.headerbox,
|
|
|
.tablebox {
|
|
|
background-color: #fff;
|
|
|
border-radius: 8px;
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
border: 1px solid #eee;
|
|
|
margin: 0.5rem
|
|
|
}
|
|
|
|
|
|
.headerbox {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
/* 搜索表单样式 */
|
|
|
.search-form {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 15px;
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.label {
|
|
|
font-size: 14px;
|
|
|
color: #606266;
|
|
|
margin-right: 10px;
|
|
|
white-space: nowrap;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.search-input,
|
|
|
.search-date {
|
|
|
width: 240px;
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&:hover {
|
|
|
box-shadow: 0 0 0 1px #409eff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-group {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
/* 表格样式 */
|
|
|
.tablebtntwo {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin: 10px 0 20px;
|
|
|
}
|
|
|
|
|
|
.tablebox ::v-deep .el-table {
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.el-table__header-wrapper th {
|
|
|
background-color: #f5f7fa;
|
|
|
color: #606266;
|
|
|
font-weight: 600;
|
|
|
padding: 12px 0;
|
|
|
}
|
|
|
|
|
|
.el-table__row {
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #ecf5ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-button--text {
|
|
|
padding: 0 5px;
|
|
|
font-weight: 500;
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&:hover {
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* PDF预览区域样式 */
|
|
|
.previewbox {
|
|
|
height: calc(100vh - 50px);
|
|
|
z-index: 1500;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 20px;
|
|
|
overflow: hidden;
|
|
|
animation: fadeIn 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.preview-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
// margin-bottom: 15px;
|
|
|
padding: 15px 20px;
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 8px 8px 0 0;
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.preview-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #303133;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
i {
|
|
|
margin-right: 10px;
|
|
|
color: #409eff;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.preview-controls {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 15px;
|
|
|
}
|
|
|
|
|
|
.page-counter {
|
|
|
background-color: #ecf5ff;
|
|
|
padding: 6px 12px;
|
|
|
border-radius: 4px;
|
|
|
color: #409eff;
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
min-width: 60px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.navigation-buttons {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
|
|
|
.el-button {
|
|
|
padding: 7px 15px;
|
|
|
font-weight: 500;
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
|
&:hover:not([disabled]) {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
&[disabled] {
|
|
|
opacity: 0.6;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.preview-content {
|
|
|
flex: 1;
|
|
|
overflow: auto;
|
|
|
background-color: #f5f7fa;
|
|
|
border-radius: 0 0 8px 8px;
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
scrollbar-width: none;
|
|
|
span {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
::v-deep canvas {
|
|
|
max-width: 100% !important;
|
|
|
height: auto !important;
|
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
|
border-radius: 2px;
|
|
|
background-color: white;
|
|
|
}
|
|
|
|
|
|
::v-deep .vue-pdf-embed {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
&.el-loading-parent--relative {
|
|
|
.el-loading-mask {
|
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
|
.el-loading-spinner {
|
|
|
.circular {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
}
|
|
|
|
|
|
.el-loading-text {
|
|
|
color: #409eff;
|
|
|
font-size: 14px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 对话框样式 */
|
|
|
.handbook-dialog {
|
|
|
::v-deep .el-dialog__header {
|
|
|
background-color: #1890ff;
|
|
|
|
|
|
.el-dialog__title {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
::v-deep .el-dialog__headerbtn .el-dialog__close {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-step__icon {
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
font-size: 0;
|
|
|
border-radius: 50%;
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
border: 2px solid rgb(255, 255, 255);
|
|
|
box-shadow: 0 0 0 2px rgba(136, 137, 137, 0.1);
|
|
|
}
|
|
|
|
|
|
::v-deep {
|
|
|
.is-process {
|
|
|
color: #c0c4cc !important;
|
|
|
font-weight: normal !important;
|
|
|
|
|
|
.el-step__icon {
|
|
|
background: none !important;
|
|
|
background-color: #c0c4cc !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.is-finish .el-step__icon {
|
|
|
background: none !important;
|
|
|
background-color: #1890ff !important;
|
|
|
}
|
|
|
|
|
|
.is-wait .el-step__icon {
|
|
|
background: none !important;
|
|
|
background-color: #c0c4cc !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-dialog {
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.el-button--primary {
|
|
|
background-color: #1890ff;
|
|
|
border-color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 表单样式 */
|
|
|
.form-label {
|
|
|
width: 70px;
|
|
|
text-align: right;
|
|
|
padding-right: 10px;
|
|
|
line-height: 32px;
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.el-input {
|
|
|
flex: 1;
|
|
|
max-width: 80%;
|
|
|
}
|
|
|
|
|
|
/* 上传区域样式 */
|
|
|
.upload-area {
|
|
|
flex: 1;
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
border-radius: 6px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #409eff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.upload-box {
|
|
|
width: 100%;
|
|
|
height: 180px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
background-color: #fafafa;
|
|
|
}
|
|
|
|
|
|
.upload-icon {
|
|
|
font-size: 28px;
|
|
|
color: #8c939d;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.upload-text {
|
|
|
color: #606266;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.upload-tip {
|
|
|
font-size: 12px;
|
|
|
color: #909399;
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
|
|
|
.preview-image {
|
|
|
width: 100%;
|
|
|
height: 180px;
|
|
|
object-fit: cover;
|
|
|
cursor: pointer;
|
|
|
border: 1px solid #dcdfe6;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
/* 表单布局样式 */
|
|
|
.cover-form {
|
|
|
width: 100%;
|
|
|
max-width: 1200px;
|
|
|
}
|
|
|
|
|
|
.form-row {
|
|
|
display: flex;
|
|
|
margin-bottom: 60px;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-col {
|
|
|
flex: 1;
|
|
|
margin-right: 20px;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
margin-right: 0;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-col-full {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
/* 项目选择区域样式 */
|
|
|
.project-top {
|
|
|
border: 1px solid #1890ff;
|
|
|
padding: 15px 15px 0px 15px;
|
|
|
border-radius: 4px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.search-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 16px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.search-label {
|
|
|
font-size: 14px;
|
|
|
color: #606266;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
.search-btn {
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
.project-table {
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
::v-deep .el-table {
|
|
|
max-height: 400px;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
.el-table__body-wrapper {
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.el-table__row {
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pagination-box {
|
|
|
display: flex;
|
|
|
justify-content: right;
|
|
|
margin: 16px 0;
|
|
|
}
|
|
|
|
|
|
/* 已选项目区域样式 */
|
|
|
.selected-projects-container {
|
|
|
border: 1px solid #1890ff;
|
|
|
padding: 15px 15px 10px 15px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.selected-header {
|
|
|
font-size: 15px;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.selected-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.selected-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 8px 15px;
|
|
|
background-color: #f8f8f8;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.dot-indicator {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #409eff;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.project-name {
|
|
|
flex: 1;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.remove-icon {
|
|
|
cursor: pointer;
|
|
|
color: #c0c4cc;
|
|
|
font-size: 16px;
|
|
|
|
|
|
&:hover {
|
|
|
color: #f56c6c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 步骤内容区域样式 */
|
|
|
.step-content {
|
|
|
padding: 10px 10%;
|
|
|
min-height: 400px;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-dialog__body {
|
|
|
padding: 20px 15px !important;
|
|
|
}
|
|
|
</style>
|
