|
|
|
|
@ -3,67 +3,62 @@
|
|
|
|
|
<!-- 项目手册管理 -->
|
|
|
|
|
<!-- 表单查询项 -->
|
|
|
|
|
<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>
|
|
|
|
|
<el-form size="small" :inline="true" label-width="200">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="手册名称" style="width: 100%;">
|
|
|
|
|
<el-input v-model="queryParams.name" placeholder="请输入手册名称" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="创建时间">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="queryParams.startTime"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择日期"
|
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
style="width: 100%;">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
|
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 表格内容区 -->
|
|
|
|
|
<div v-if="!previewMode" class="tablebox">
|
|
|
|
|
<div class="tablebtntwo">
|
|
|
|
|
<el-button
|
|
|
|
|
<!-- <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"
|
|
|
|
|
size="small"
|
|
|
|
|
@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 v-loading="loading" :data="postList">
|
|
|
|
|
<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">
|
|
|
|
|
@ -88,6 +83,13 @@
|
|
|
|
|
@click="handleDelete(scope.row)"
|
|
|
|
|
>删除</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="text"
|
|
|
|
|
style="color: #409eff"
|
|
|
|
|
@click="handleExport(scope.row.id)"
|
|
|
|
|
>项目手册导出</el-button
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
@ -203,7 +205,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 步骤2：选择项目 -->
|
|
|
|
|
<div v-if="activeStep === 2" class="step-content project-step">
|
|
|
|
|
<div v-show="activeStep === 2" class="step-content project-step">
|
|
|
|
|
<div class="cover-form">
|
|
|
|
|
<div class="project-top">
|
|
|
|
|
<div class="search-container">
|
|
|
|
|
@ -222,22 +224,18 @@
|
|
|
|
|
<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"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
@select="handleSelect"
|
|
|
|
|
@select-all="handleSelectAll"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column
|
|
|
|
|
type="selection"
|
|
|
|
|
@ -257,7 +255,11 @@
|
|
|
|
|
prop="xzfl"
|
|
|
|
|
label="现状分类"
|
|
|
|
|
align="center"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<dict-tag :options="dict.type.xzfl" :value="scope.row.xzfl"/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="xmfrdwxz"
|
|
|
|
|
label="项目法人单位"
|
|
|
|
|
@ -312,10 +314,15 @@
|
|
|
|
|
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>
|
|
|
|
|
<el-button
|
|
|
|
|
type="text"
|
|
|
|
|
icon="el-icon-close"
|
|
|
|
|
class="remove-btn"
|
|
|
|
|
@click="removeSelectedProject(project)"
|
|
|
|
|
></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -366,7 +373,7 @@
|
|
|
|
|
@click="submitHandbook"
|
|
|
|
|
v-if="activeStep === 3"
|
|
|
|
|
size="small"
|
|
|
|
|
>{{ editingHandbook ? '更新手册' : '生成手册' }}</el-button
|
|
|
|
|
>{{ editingHandbook ? "更新手册" : "生成手册" }}</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
@ -376,7 +383,7 @@
|
|
|
|
|
<script>
|
|
|
|
|
import VueOfficeDocx from "@vue-office/docx";
|
|
|
|
|
import pdf from "vue-pdf";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
getHandbookPage,
|
|
|
|
|
addHandbook,
|
|
|
|
|
@ -395,6 +402,8 @@ export default {
|
|
|
|
|
Pagination: () => import("@/components/Pagination"),
|
|
|
|
|
FileUpload,
|
|
|
|
|
},
|
|
|
|
|
// 声明需要使用的字典
|
|
|
|
|
dicts: ['xzfl'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
queryParams: {
|
|
|
|
|
@ -418,7 +427,6 @@ export default {
|
|
|
|
|
subtitle: "",
|
|
|
|
|
imageUrl: "",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 项目选择相关
|
|
|
|
|
projectSearch: "",
|
|
|
|
|
projectList: [],
|
|
|
|
|
@ -428,34 +436,28 @@ export default {
|
|
|
|
|
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() {
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
getList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
getHandbookPage(this.queryParams)
|
|
|
|
|
@ -492,10 +494,6 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
},
|
|
|
|
|
// 表格选择变化
|
|
|
|
|
handleSelectionChange(selection) {
|
|
|
|
|
this.selectedRows = selection;
|
|
|
|
|
},
|
|
|
|
|
// 预览文档
|
|
|
|
|
handlePreview(row) {
|
|
|
|
|
this.previewMode = true;
|
|
|
|
|
@ -503,76 +501,51 @@ export default {
|
|
|
|
|
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文档加载完成");
|
|
|
|
|
this.loadingPdf = false;
|
|
|
|
|
},
|
|
|
|
|
// 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;
|
|
|
|
|
}
|
|
|
|
|
async handleExport(id) {
|
|
|
|
|
try {
|
|
|
|
|
this.exportLoading = true;
|
|
|
|
|
const idList = this.selectedRows.map((item) => item.id);
|
|
|
|
|
// 修改请求为直接获取二进制数据
|
|
|
|
|
const res = await exportHandbook(idList);
|
|
|
|
|
// const idList = this.selectedRows.map((item) => item.id);
|
|
|
|
|
// const res = await exportHandbook(idList);
|
|
|
|
|
const res = await exportHandbook([id]);
|
|
|
|
|
this.$download.saveAs(res, "项目手册.pdf");
|
|
|
|
|
this.$message.success("导出成功");
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("导出错误:", error);
|
|
|
|
|
this.$message.error("导出过程中发生错误");
|
|
|
|
|
} finally {
|
|
|
|
|
this.exportLoading = false;
|
|
|
|
|
@ -585,22 +558,15 @@ export default {
|
|
|
|
|
this.editingHandbook = null;
|
|
|
|
|
this.selectedProjectIds = [];
|
|
|
|
|
this.selectedProjects = [];
|
|
|
|
|
this.projectParams.pageNum = 1 ;
|
|
|
|
|
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 = {
|
|
|
|
|
@ -614,10 +580,8 @@ export default {
|
|
|
|
|
subtitle: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 下一步
|
|
|
|
|
nextStep() {
|
|
|
|
|
if (this.activeStep === 1) {
|
|
|
|
|
// 可以添加表单验证
|
|
|
|
|
if (!this.coverForm.title) {
|
|
|
|
|
this.$message.warning("请输入手册名称");
|
|
|
|
|
return;
|
|
|
|
|
@ -625,11 +589,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
this.activeStep++;
|
|
|
|
|
},
|
|
|
|
|
// 上一步
|
|
|
|
|
prevStep() {
|
|
|
|
|
this.activeStep--;
|
|
|
|
|
},
|
|
|
|
|
// 获取项目列表
|
|
|
|
|
getProjectList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
const params = {
|
|
|
|
|
@ -637,80 +599,85 @@ export default {
|
|
|
|
|
size: this.projectParams.pageSize,
|
|
|
|
|
name: this.projectSearch || undefined,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
getBasicInformationPage(params)
|
|
|
|
|
.then((response) => {
|
|
|
|
|
this.projectList = response.data.records;
|
|
|
|
|
this.projectTotal = response.data.total;
|
|
|
|
|
if (this.selectedProjectIds.length > 0) {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.restoreSelection();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
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);
|
|
|
|
|
handleRowClick(row) {
|
|
|
|
|
this.$refs.projectTable.toggleRowSelection(row);
|
|
|
|
|
const selectedRows = this.$refs.projectTable.selection;
|
|
|
|
|
const isSelected = selectedRows.some(item => item.id === row.id);
|
|
|
|
|
if (isSelected) {
|
|
|
|
|
// 如果是选中状态，添加到已选项目中
|
|
|
|
|
if (!this.selectedProjectIds.includes(row.id)) {
|
|
|
|
|
this.selectedProjectIds.push(row.id);
|
|
|
|
|
this.selectedProjects.push(row);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 如果是取消选中，从已选项目中移除
|
|
|
|
|
this.selectedProjectIds = this.selectedProjectIds.filter(id => id !== row.id);
|
|
|
|
|
this.selectedProjects = this.selectedProjects.filter(item => item.id !== row.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
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 如果项目在当前页面，取消其选择状态
|
|
|
|
|
if (this.$refs.projectTable) {
|
|
|
|
|
const projectInCurrentPage = this.projectList.find(
|
|
|
|
|
(item) => item.id == project.id
|
|
|
|
|
);
|
|
|
|
|
if (projectInCurrentPage) {
|
|
|
|
|
this.$refs.projectTable.toggleRowSelection(
|
|
|
|
|
projectInCurrentPage,
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleProjectPagination() {
|
|
|
|
|
this.getProjectList();
|
|
|
|
|
},
|
|
|
|
|
handleRowClick(row) {
|
|
|
|
|
this.$refs.projectTable.toggleRowSelection(row);
|
|
|
|
|
// 恢复选中状态
|
|
|
|
|
restoreSelection() {
|
|
|
|
|
if (!this.$refs.projectTable) return;
|
|
|
|
|
this.$refs.projectTable.clearSelection();
|
|
|
|
|
if (!this.selectedProjectIds.length) return;
|
|
|
|
|
|
|
|
|
|
this.projectList.forEach((row) => {
|
|
|
|
|
if (this.selectedProjectIds.includes(row.id)) {
|
|
|
|
|
this.$refs.projectTable.toggleRowSelection(row, true);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 提交生成手册
|
|
|
|
|
@ -727,14 +694,8 @@ export default {
|
|
|
|
|
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("手册更新成功");
|
|
|
|
|
@ -759,44 +720,96 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 处理单个项目选择事件
|
|
|
|
|
handleSelect(selection, row) {
|
|
|
|
|
|
|
|
|
|
// 检查是选中还是取消选中
|
|
|
|
|
const isSelected = selection.some(item => item.id === row.id);
|
|
|
|
|
|
|
|
|
|
if (isSelected) {
|
|
|
|
|
// 如果是选中，添加到已选列表中
|
|
|
|
|
if (!this.selectedProjectIds.includes(row.id)) {
|
|
|
|
|
this.selectedProjectIds.push(row.id);
|
|
|
|
|
this.selectedProjects.push(row);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 如果是取消选中，从已选列表中移除
|
|
|
|
|
this.selectedProjectIds = this.selectedProjectIds.filter(id => id !== row.id);
|
|
|
|
|
this.selectedProjects = this.selectedProjects.filter(item => item.id !== row.id);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 处理全选/取消全选事件
|
|
|
|
|
handleSelectAll(selection) {
|
|
|
|
|
|
|
|
|
|
// 获取当前页面所有项目ID
|
|
|
|
|
const currentPageIds = this.projectList.map(item => item.id);
|
|
|
|
|
|
|
|
|
|
// 检查是全选还是取消全选
|
|
|
|
|
if (selection.length === 0) {
|
|
|
|
|
// 取消全选 - 从已选列表中移除当前页所有项目
|
|
|
|
|
this.selectedProjectIds = this.selectedProjectIds.filter(
|
|
|
|
|
id => !currentPageIds.includes(id)
|
|
|
|
|
);
|
|
|
|
|
this.selectedProjects = this.selectedProjects.filter(
|
|
|
|
|
project => !currentPageIds.includes(project.id)
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
// 全选 - 将当前页所有项目添加到已选列表
|
|
|
|
|
// 先移除当前页已有的选择，避免重复
|
|
|
|
|
const projectIdsNotInCurrentPage = this.selectedProjectIds.filter(
|
|
|
|
|
id => !currentPageIds.includes(id)
|
|
|
|
|
);
|
|
|
|
|
const projectsNotInCurrentPage = this.selectedProjects.filter(
|
|
|
|
|
project => !currentPageIds.includes(project.id)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 合并不在当前页的选择和当前页所有项目
|
|
|
|
|
this.selectedProjectIds = [...projectIdsNotInCurrentPage, ...currentPageIds];
|
|
|
|
|
this.selectedProjects = [...projectsNotInCurrentPage, ...this.projectList];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 编辑按钮操作
|
|
|
|
|
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);
|
|
|
|
|
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,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 获取项目列表以显示已选项目
|
|
|
|
|
this.getProjectList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.addDialogVisible = true;
|
|
|
|
|
this.activeStep = 1;
|
|
|
|
|
this.editingHandbook = detail;
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.$message.error("获取手册详情失败");
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
// 先清空选中状态
|
|
|
|
|
this.selectedProjectIds = [];
|
|
|
|
|
this.selectedProjects = [];
|
|
|
|
|
|
|
|
|
|
if (detail.xmId) {
|
|
|
|
|
const projectIds = detail.xmId.split(",");
|
|
|
|
|
this.selectedProjectIds = projectIds.map((id) => Number(id));
|
|
|
|
|
// 设置已选择的项目
|
|
|
|
|
if (detail.projectName && Array.isArray(detail.projectName)) {
|
|
|
|
|
this.selectedProjects = detail.projectName;
|
|
|
|
|
}
|
|
|
|
|
this.projectParams.pageNum = 1 ;
|
|
|
|
|
this.getProjectList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.addDialogVisible = true;
|
|
|
|
|
this.activeStep = 1;
|
|
|
|
|
this.editingHandbook = detail;
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
this.$message.error("获取手册详情失败");
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 删除按钮操作
|
|
|
|
|
handleDelete(row) {
|
|
|
|
|
@ -805,39 +818,17 @@ export default {
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
this.getList();
|
|
|
|
|
.then(async () => {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
const idList = [row.id];
|
|
|
|
|
await deleteHandbook(idList).then(() => {
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
this.loading = false;
|
|
|
|
|
})
|
|
|
|
|
.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>
|
|
|
|
|
@ -851,55 +842,22 @@ export default {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
margin: 0.5rem
|
|
|
|
|
margin: 0.5rem;
|
|
|
|
|
.el-input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
justify-content: right;
|
|
|
|
|
margin: 10px 0 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -935,7 +893,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
/* PDF预览区域样式 */
|
|
|
|
|
.previewbox {
|
|
|
|
|
height: calc(100vh - 50px);
|
|
|
|
|
height: calc(100% - 50px);
|
|
|
|
|
z-index: 1500;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
@ -948,7 +906,6 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// margin-bottom: 15px;
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
border-radius: 8px 8px 0 0;
|
|
|
|
|
@ -1032,31 +989,6 @@ export default {
|
|
|
|
|
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 {
|
|
|
|
|
@ -1136,62 +1068,6 @@ export default {
|
|
|
|
|
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%;
|
|
|
|
|
@ -1247,6 +1123,24 @@ export default {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-input,
|
|
|
|
|
.search-date {
|
|
|
|
|
width: 30%;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
flex: 1!important;
|
|
|
|
|
max-width: 100%!important;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
width: 100%!important;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
box-shadow: 0 0 0 1px #409eff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-btn {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
@ -1306,6 +1200,16 @@ export default {
|
|
|
|
|
padding: 8px 15px;
|
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
|
|
|
|
|
.remove-btn {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dot-indicator {
|
|
|
|
|
@ -1321,13 +1225,17 @@ export default {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.remove-icon {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #c0c4cc;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
.remove-btn {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
color: #909399;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
color: #F56C6C;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
项洋