更改添加章节，更换得到教材结构接口

src/api/book.js

@@ -16,6 +16,17 @@ export function ChapterGetBookChapterStruct(data) {
 }
 
 /**
+ * @description 得到教材章节结构展开列表
+ * @param {object} data
+ */
+export function ChapterGetBookChapterStructExpandList(data) {
+  return http.post(
+    `${process.env.VUE_APP_EepServer}?MethodName=book_chapter_manager-GetBookChapterStructExpandList`,
+    data,
+  );
+}
+
+/**
  * @description 添加章节
  * @param {object} data
  */

src/styles/mixin.scss

@@ -87,7 +87,6 @@
   min-height: 100%;
   padding: 5px;
   margin: 0 5px;
-  text-align: center;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);

src/views/personal_workbench/edit_task/edit/index.vue

@@ -9,8 +9,11 @@
       </div>
       <div class="courseware">
         <span class="name-path">{{ courseware_info.name_path }}</span>
+        <div class="switch">
+          <span :class="['link', { active: isEdit }]" @click="toggleEditMode(true)">内容编辑</span>
+          <span :class="['link', { active: !isEdit }]" @click="toggleEditMode(false)">位置调整</span>
+        </div>
         <div class="operator">
-          <span class="link" @click="saveCoursewareContent('edit')">{{ isEdit ? '调整位置' : '内容编辑' }}</span>
           <span class="link" @click="saveCoursewareContent('quit')">退出编辑</span>
           <span class="link" @click="saveCoursewareContent">保存</span>
         </div>
@@ -69,6 +72,11 @@ export default {
     goBackBookList() {
       this.$router.push({ path: '/personal_workbench/edit_task', query: { book_id: this.courseware_info.book_id } });
     },
+    toggleEditMode(isEdit) {
+      if (this.isEdit !== isEdit) {
+        this.saveCoursewareContent('edit');
+      }
+    },
     saveCoursewareContent(type = '') {
       this.$refs.create.saveCoursewareContent(type);
     },
@@ -117,6 +125,15 @@ export default {
       .name-path {
         font-size: 14px;
       }
+
+      .link {
+        padding: 4px;
+        border-radius: 4px;
+
+        &.active {
+          background-color: $main-active-color;
+        }
+      }
     }
   }
 

src/views/personal_workbench/project/AddChapter.vue

@@ -7,9 +7,9 @@
     class="add-chapter"
     @close="dialogClose"
   >
-    <el-form :model="data" :rules="rules" label-width="80px">
+    <el-form ref="form" :model="data" :rules="rules" label-width="80px">
       <el-form-item label="章节名称" prop="name">
-        <el-input v-model="data.name" placeholder="请输入章节名称" />
+        <el-input ref="name" v-model="data.name" placeholder="请输入章节名称" />
       </el-form-item>
     </el-form>
     <div slot="footer">
@@ -39,10 +39,6 @@ export default {
       type: String,
       default: '',
     },
-    isLeaf: {
-      type: String,
-      required: true,
-    },
     addType: {
       type: String,
       default: 'chapter',
@@ -64,6 +60,16 @@ export default {
       return this.addType === 'chapter' ? '添加章节' : '添加课件';
     },
   },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.$refs.form.clearValidate();
+          this.$refs.name.focus();
+        });
+      }
+    },
+  },
   methods: {
     dialogClose() {
       this.$emit('close');
@@ -74,7 +80,7 @@ export default {
         this.$emit('addChapterNode', {
           ...this.data,
           parent_id: this.parentId,
-          is_leaf: this.isLeaf,
+          is_leaf: 'false',
         });
       } else {
         this.$emit('addCourseware', {

src/views/personal_workbench/project/ProductionEditorialManage.vue

@@ -28,73 +28,39 @@
           <span class="title-cell">状态</span>
           <span class="title-cell">操作</span>
         </div>
-        <div v-for="{ id, name, nodes: children, producer_list } in nodes" :key="id" class="catalogue">
-          <!-- 一级目录 -->
-          <div :class="['first-level', { active: curSelectId === id }]" @click="selectActiveChapter(id, id, 'false')">
-            <div class="chapter-title">{{ name }}</div>
-            <div class="producer">
-              <span>{{ producer_list.map((producer) => producer.name).join('；') }}</span>
-            </div>
-            <div class="audit"></div>
-            <div class="status"></div>
-            <div class="operator">
-              <span class="link">修改</span>
-              <span class="link" @click="openSetProducer(id)">设置制作人</span>
-              <span class="link danger" @click="deleteChapter(id)">删除</span>
-            </div>
+        <div
+          v-for="{ id, name, deep, producer_list, is_leaf_chapter } in node_list"
+          :key="id"
+          :class="['catalogue', { active: curSelectId === id }]"
+          @click="selectActiveChapter(id, is_leaf_chapter === 'true')"
+        >
+          <div
+            :class="['chapter-title', 'nowrap-ellipsis', { courseware: is_leaf_chapter === 'true' }]"
+            :style="computedNameStyle(deep)"
+            :title="name"
+          >
+            {{ name }}
+          </div>
+          <div class="producer">
+            <span>{{ producer_list.map((producer) => producer.name).join('；') }}</span>
+          </div>
+          <div class="audit"></div>
+          <div class="status"></div>
+          <div class="operator">
+            <span class="link">修改</span>
+            <span class="link" @click="openSetProducer(id)">设置制作人</span>
+            <span v-if="is_leaf_chapter === 'true'" class="link">设置审校人</span>
+            <span class="link danger" @click="deleteChapter(id)">删除</span>
           </div>
-          <template v-for="item in children">
-            <!-- 二级目录或内容 -->
-            <div
-              :key="item.id"
-              :class="[
-                'catalogue-item',
-                { active: curSelectId === item.id },
-                item.is_leaf_chapter === 'true' ? 'content' : 'subdirectory',
-              ]"
-              @click="selectActiveChapter(item.id, id, 'false')"
-            >
-              <div class="name">{{ item.name }}</div>
-              <div class="producer">
-                <span>{{ item.producer_list.map((producer) => producer.name).join('；') }}</span>
-              </div>
-              <div class="audit"></div>
-              <div class="status"></div>
-              <div class="operator">
-                <span class="link">修改</span>
-                <span class="link" @click="openSetProducer(item.id)">设置制作人</span>
-                <span class="link danger" @click="deleteChapter(item.id)">删除</span>
-              </div>
-            </div>
-            <!-- 二级目录的内容 -->
-            <template v-if="item.is_leaf_chapter === 'false' && item.nodes?.length > 0">
-              <div v-for="li in item.nodes" :key="li.id">
-                <div :class="['catalogue-item', 'children']">
-                  <div class="name">{{ li.name }}</div>
-                  <div class="producer">
-                    <span>{{ li.producer_list.map((producer) => producer.name).join('；') }}</span>
-                  </div>
-                  <div class="audit"></div>
-                  <div class="status"></div>
-                  <div class="operator">
-                    <span class="link">修改</span>
-                    <span class="link" @click="openSetProducer(li.id)">设置制作人</span>
-                    <span class="link">设置审校人</span>
-                    <span class="link danger" @click="deleteChapter(li.id)">删除</span>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </template>
         </div>
       </div>
     </main>
+
     <AddChapter
       :id="book_id"
       :visible="visible"
-      :parent-id="parent_id"
+      :parent-id="curSelectId"
       :cur-select-id="curSelectId"
-      :is-leaf="is_leaf"
       :add-type="addType"
       @close="closeAddChapter"
       @addChapterNode="addChapterNode"
@@ -118,7 +84,7 @@ import MenuPage from '@/views/personal_workbench/menu.vue';
 
 import { GetProjectBaseInfo } from '@/api/project';
 import {
-  ChapterGetBookChapterStruct,
+  ChapterGetBookChapterStructExpandList,
   ChapterAddChapterToBook,
   ChapterAddCoursewareToBook,
   ChapterDeleteChapter,
@@ -137,14 +103,12 @@ export default {
       book_id: this.$route.params.id,
       visible: false,
       curSelectId: '', // 当前选中的章节ID
-      parent_id: '', // 父节点ID
-      is_leaf: 'false', // 是否是叶子节点
       addType: 'chapter', // 添加类型
       project_info: {}, // 项目基本信息
       member_list: [], // 项目成员列表
       book_info_PBE: {}, // 与项目绑定的的教材实体(project_bind_entity)信息
       audit_node_list: [], // 审校流程节点列表
-      nodes: [], // 教材章节结构
+      node_list: [], // 教材章节结构
       producer: {
         visible: false, // 设置制作人弹窗
         id: '', // 章节ID
@@ -153,7 +117,7 @@ export default {
   },
   created() {
     this.getProjectBaseInfo();
-    this.getBookChapterStruct();
+    this.getBookChapterStructExpandList();
     window.addEventListener('click', this.handleClickOutside);
   },
   beforeDestroy() {
@@ -173,33 +137,41 @@ export default {
       });
     },
     /**
-     * 获取教材章节结构
+     * 得到教材章节结构展开列表
      * @param {string} book_id - 教材ID
      * @param {number} node_deep_mode - 节点深度模式
      * @param {boolean} is_contain_producer - 是否包含制作人
      */
-    getBookChapterStruct() {
-      ChapterGetBookChapterStruct({ book_id: this.book_id, node_deep_mode: 0, is_contain_producer: 'true' }).then(
-        ({ nodes }) => {
-          this.nodes = nodes;
-        },
-      );
+    getBookChapterStructExpandList() {
+      ChapterGetBookChapterStructExpandList({
+        book_id: this.book_id,
+        node_deep_mode: 0,
+        is_contain_producer: 'true',
+      }).then(({ node_list }) => {
+        this.node_list = node_list;
+      });
+    },
+    /**
+     * 计算章节名称样式
+     * @param {number} deep - 节点深度
+     * @returns {Object} - 样式对象
+     */
+    computedNameStyle(deep) {
+      return {
+        'padding-left': `${deep === 1 ? 8 : (deep - 1) * 24}px`,
+      };
     },
     /**
      * 选择当前章节
      * @param id - 当前选中章节ID
-     * @param parentId - 父节点ID
-     * @param is_leaf - 是否是叶子节点
      */
-    selectActiveChapter(id, parentId = '', is_leaf = 'false') {
+    selectActiveChapter(id, is_leaf_chapter) {
+      if (is_leaf_chapter) return;
       this.curSelectId = id;
-      this.parent_id = parentId;
-      this.is_leaf = is_leaf;
-      this.addType = 'chapter';
     },
     chapterAddCoursewareToBook(data) {
       ChapterAddCoursewareToBook(data).then(() => {
-        this.getBookChapterStruct();
+        this.getBookChapterStructExpandList();
         this.visible = false;
       });
     },
@@ -210,17 +182,11 @@ export default {
     handleClickOutside(e) {
       if (!e.target.closest('.catalogue') && !e.target.closest('.operator.flex') && !e.target.closest('.add-chapter')) {
         this.curSelectId = '';
-        this.parent_id = '';
-        this.is_leaf = 'false';
       }
     },
     addChapterDialog() {
-      let isSecDir = !this.nodes.some((item) => item.id === this.curSelectId); // 判断是否是二级目录
-      if (isSecDir) {
-        this.$message.warning('二级目录不能添加章节');
-        return;
-      }
       this.visible = true;
+      this.addType = 'chapter';
     },
     addCoursewareDialog() {
       if (this.curSelectId === '') {
@@ -238,7 +204,7 @@ export default {
      */
     addChapterNode(data) {
       ChapterAddChapterToBook(data).then(() => {
-        this.getBookChapterStruct();
+        this.getBookChapterStructExpandList();
         this.visible = false;
       });
     },
@@ -248,7 +214,7 @@ export default {
      */
     deleteChapter(id) {
       ChapterDeleteChapter({ id, is_force_delete: 'true' }).then(() => {
-        this.getBookChapterStruct();
+        this.getBookChapterStructExpandList();
         this.$message.success('删除成功');
       });
     },
@@ -265,7 +231,7 @@ export default {
     chapterSetProducer(data) {
       ChapterSetProducer({ book_id: this.book_id, ...data })
         .then(() => {
-          this.getBookChapterStruct();
+          this.getBookChapterStructExpandList();
           this.producer.visible = false;
           this.$message.success('制作人设置成功');
         })
@@ -355,56 +321,60 @@ export default {
 
     .catalogue {
       display: flex;
-      flex-direction: column;
+      align-items: center;
       border: $border;
       border-top: none;
 
-      .active {
+      &:hover {
+        background-color: #f3f3f3;
+      }
+
+      &.active {
         background-color: $main-active-color;
       }
 
-      .first-level {
-        display: flex;
-        align-items: center;
+      > div {
+        height: 40px;
+        padding: 8px;
+      }
 
-        > div {
-          height: 40px;
-          padding: 8px;
-        }
+      .chapter-title {
+        font-weight: bold;
+        color: #000;
+      }
 
-        .chapter-title {
-          font-weight: bold;
-          color: #000;
-        }
+      .operator {
+        text-align: center;
+      }
 
-        .operator {
-          text-align: center;
-        }
+      > :first-child {
+        width: 550px;
+      }
 
-        > :first-child {
-          width: 550px;
-        }
+      > :nth-child(2) {
+        width: 200px;
+      }
 
-        > :nth-child(2) {
-          width: 200px;
-        }
+      > :nth-child(3) {
+        width: 200px;
+      }
 
-        > :nth-child(3) {
-          width: 200px;
-        }
+      > :nth-child(4) {
+        width: 140px;
+      }
 
-        > :nth-child(4) {
-          width: 140px;
-        }
+      > :last-child {
+        flex: 1;
+        min-width: 200px;
+      }
 
-        > :last-child {
-          flex: 1;
-          min-width: 200px;
-        }
+      > :not(:last-child) {
+        border-right: $border;
+      }
 
-        > :not(:last-child) {
-          border-right: $border;
-        }
+      .courseware {
+        font-size: 14px;
+        font-weight: normal;
       }
 
       &-item {
@@ -412,10 +382,6 @@ export default {
         font-size: 14px;
         border-top: $border;
 
-        &:hover {
-          background-color: #f3f3f3;
-        }
-
         &.subdirectory {
           .name {
             font-weight: bold;
@@ -434,40 +400,6 @@ export default {
           padding-left: 24px;
           color: #000;
         }
-
-        > div {
-          height: 40px;
-          padding: 8px;
-        }
-
-        .operator {
-          text-align: center;
-        }
-
-        > :first-child {
-          width: 550px;
-        }
-
-        > :nth-child(2) {
-          width: 200px;
-        }
-
-        > :nth-child(3) {
-          width: 200px;
-        }
-
-        > :nth-child(4) {
-          width: 140px;
-        }
-
-        > :last-child {
-          flex: 1;
-          min-width: 200px;
-        }
-
-        > :not(:last-child) {
-          border-right: $border;
-        }
       }
     }
   }