【feat】项目手册管理功能优化

package.json

@@ -40,6 +40,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "@vue-office/docx": "^1.6.3",
     "@vue/composition-api": "^1.7.2",
+    "autofit.js": "^3.2.2",
     "axios": "0.28.1",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",

src/api/ManageApi/index.js

@@ -906,7 +906,9 @@ export function deleteHandbook(idList) {
   return request({
     url: `/gysl/handbook/delete`,
     method: 'delete',
-    params: { idList: idList.join(',') }
+    params:{
+      idList: idList.join(',')
+    }
   });
 }
 

src/views/compilation/handbook/index.vue

@@ -3,59 +3,57 @@
     <!-- 项目手册管理 -->
     <!-- 表单查询项 -->
     <div v-if="!previewMode" class="headerbox">
-      <div class="search-form">
+      <el-form size="small" :inline="true" label-width="200">
-        <div class="form-item">
+        <el-row>
-          <span class="label">手册名称</span>
+          <el-col :span="5">
-          <el-input
+            <el-form-item label="手册名称" style="width: 100%;">
-            v-model="queryParams.name"
+              <el-input v-model="queryParams.name" placeholder="请输入手册名称" clearable />
-            placeholder="请输入模板标题"
+            </el-form-item>
-            clearable
+          </el-col>
-            class="search-input"
+          <el-col :span="5">
-          />
+            <el-form-item label="创建时间">
-        </div>
-        <div class="form-item">
-          <span class="label">创建时间</span>
               <el-date-picker 
                 v-model="queryParams.startTime" 
                 type="date" 
                 placeholder="选择日期"
-            class="search-date"
+                format="yyyy-MM-dd"
-          ></el-date-picker>
+                value-format="yyyy-MM-dd HH:mm:ss"
-        </div>
+                style="width: 100%;">
-        <div class="form-item btn-group">
+              </el-date-picker>
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+            </el-form-item>
-            >查询</el-button
+          </el-col>
-          >
+          <el-col :span="8">
-          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            <el-form-item>
-        </div>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
-      </div>
+              <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
+      <el-table v-loading="loading" :data="postList">
-        v-loading="loading"
+        <!-- @selection-change="handleSelectionChange"
-        :data="postList"
+        <el-table-column type="selection" width="55" align="center" /> -->
-        @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>
@@ -88,6 +86,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 +208,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 +227,17 @@
               <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"
+                @selection-change="handleSelectAll"
               >
                 <el-table-column
                   type="selection"
@@ -366,7 +366,7 @@
           @click="submitHandbook"
           v-if="activeStep === 3"
           size="small"
-          >{{ editingHandbook ? '更新手册' : '生成手册' }}</el-button
+          >{{ editingHandbook ? "更新手册" : "生成手册" }}</el-button
         >
       </div>
     </el-dialog>
@@ -376,7 +376,7 @@
 <script>
 import VueOfficeDocx from "@vue-office/docx";
 import pdf from "vue-pdf";
-import axios from "axios";
+
 import {
   getHandbookPage,
   addHandbook,
@@ -418,7 +418,6 @@ export default {
         subtitle: "",
         imageUrl: "",
       },
-
       // 项目选择相关
       projectSearch: "",
       projectList: [],
@@ -428,34 +427,29 @@ 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, // 当前正在编辑的手册对象
+      isRestoringSelection: false, // 新增：标记是否正在恢复选择状态
     };
   },
-  created() {
+  mounted() {
     this.getList();
   },
   methods: {
-    // 获取表格数据
     getList() {
       this.loading = true;
       getHandbookPage(this.queryParams)
@@ -510,39 +504,26 @@ export default {
     // 从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;
     },
@@ -559,20 +540,20 @@ export default {
       }
     },
     // 项目手册导出
-    async handleExport() {
+    async handleExport(id) {
-      if (!this.selectedRows || this.selectedRows.length === 0) {
+      // if (!this.selectedRows || this.selectedRows.length === 0) {
-        this.$message.warning("请先选择要导出的手册");
+      //   this.$message.warning("请先选择要导出的手册");
-        return;
+      //   return;
-      }
+      // }
       try {
         this.exportLoading = true;
-        const idList = this.selectedRows.map((item) => item.id);
+        // const idList = this.selectedRows.map((item) => item.id);
         // 修改请求为直接获取二进制数据
-        const res = await exportHandbook(idList);
+        // 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,6 +566,7 @@ export default {
       this.editingHandbook = null;
       this.selectedProjectIds = [];
       this.selectedProjects = [];
+      this.projectParams.pageNum = 1 ;
       this.getProjectList();
     },
     handleAddDialogClose(done) {
@@ -617,7 +599,6 @@ export default {
     // 下一步
     nextStep() {
       if (this.activeStep === 1) {
-        // 可以添加表单验证
         if (!this.coverForm.title) {
           this.$message.warning("请输入手册名称");
           return;
@@ -625,11 +606,9 @@ export default {
       }
       this.activeStep++;
     },
-    // 上一步
     prevStep() {
       this.activeStep--;
     },
-    // 获取项目列表
     getProjectList() {
       this.loading = true;
       const params = {
@@ -642,21 +621,21 @@ export default {
         .then((response) => {
           this.projectList = response.data.records;
           this.projectTotal = response.data.total;
-          this.loading = false;
+          if (this.selectedProjectIds.length > 0) {
-
-          // 恢复之前选中的行
             this.$nextTick(() => {
               this.restoreSelection();
             });
+          }
+          this.loading = false;
         })
         .catch((error) => {
-          console.error("获取项目列表失败:", error);
           this.loading = false;
           this.$message.error("获取项目列表失败");
         });
     },
     // 搜索项目
     searchProjects() {
+      // 保存当前选中项目ID，然后重置页码
       this.projectParams.pageNum = 1;
       this.getProjectList();
     },
@@ -666,51 +645,55 @@ export default {
       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(
+    handleRowClick(row) {
-        (id) => !selection.some((selected) => selected.id === id)
+      // 切换行选择状态
-      );
+      this.$refs.projectTable.toggleRowSelection(row);
-      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
       );
+
+      // 如果项目在当前页面，取消其选择状态
+      if (this.$refs.projectTable) {
+        const projectInCurrentPage = this.projectList.find(
+          (item) => item.id == project.id
+        );
+        if (projectInCurrentPage) {
           this.$refs.projectTable.toggleRowSelection(
-        this.projectList.find((item) => item.id === project.id),
+            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.isRestoringSelection = true;
+      this.projectList.forEach((row) => {
+        if (this.selectedProjectIds.includes(row.id)) {
+          this.$refs.projectTable.toggleRowSelection(row, true);
+        }
+      });
+      
+      // 恢复完成后，重置标记
+      this.$nextTick(() => {
+        this.isRestoringSelection = false;
+      });
     },
 
     // 提交生成手册
@@ -727,14 +710,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,33 +736,55 @@ export default {
           });
       }
     },
+    handleSelectAll(selection) {
+      // 如果正在恢复选择状态，不处理选择变化
+      if (this.isRestoringSelection) return;
+      
+      // 获取当前页面的所有项目ID
+      const currentPageIds = this.projectList.map((item) => item.id);
+
+      // 保留不在当前页的已选项目
+      const projectsNotInCurrentPage = this.selectedProjects.filter(
+        (project) => !currentPageIds.includes(project.id)
+      );
+
+      // 合并选择
+      this.selectedProjects = [...projectsNotInCurrentPage, ...selection];
+
+      // 更新ID列表
+      this.selectedProjectIds = this.selectedProjects.map(
+        (project) => project.id
+      );
+    },
     // 编辑按钮操作
     handleEdit(row) {
       // 获取手册详情
       this.loading = true;
-      getHandbookDetail(row.id).then(res => {
+      getHandbookDetail(row.id)
+        .then((res) => {
           const detail = res.data;
-        
-        // 填充封面信息
           this.coverForm = {
             title: detail.name,
             subtitle: detail.subtitle,
-          imageUrl: detail.coverImg
+            imageUrl: detail.coverImg,
           };
-        
-        // 填充封尾信息
           this.endForm = {
             imageUrl: detail.tailingImg,
-          subtitle: detail.tail
+            subtitle: detail.tail,
           };
           
-        // 处理项目ID列表
+          // 先清空选中状态
-        if (detail.xmId) {
+          this.selectedProjectIds = [];
-          const projectIds = detail.xmId.split(',');
+          this.selectedProjects = [];
-          this.selectedProjectIds = projectIds;
-          console.log("已选项目ID列表：", this.selectedProjectIds);
           
-          // 获取项目列表以显示已选项目
+          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();
           }
 
@@ -793,7 +792,8 @@ export default {
           this.addDialogVisible = true;
           this.activeStep = 1;
           this.editingHandbook = detail;
-      }).catch(() => {
+        })
+        .catch(() => {
           this.$message.error("获取手册详情失败");
           this.loading = false;
         });
@@ -805,39 +805,17 @@ export default {
         cancelButtonText: "取消",
         type: "warning",
       })
-        .then(() => {
+        .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,7 +829,11 @@ 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 {
@@ -882,9 +864,17 @@ export default {
 
 .search-input,
 .search-date {
-  width: 240px;
+  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;
   }
@@ -899,7 +889,7 @@ export default {
 .tablebtntwo {
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: right;
   margin: 10px 0 20px;
 }
 
@@ -935,7 +925,7 @@ export default {
 
 /* PDF预览区域样式 */
 .previewbox {
-  height: calc(100vh - 50px);
+  height: calc(100% - 50px);
   z-index: 1500;
   display: flex;
   flex-direction: column;
@@ -1136,11 +1126,6 @@ export default {
   font-size: 14px;
 }
 
-.el-input {
-  flex: 1;
-  max-width: 80%;
-}
-
 /* 上传区域样式 */
 .upload-area {
   flex: 1;