Merge branch 'master' of http://gcls-git.helxsoft.cn/GCLS/eep_page

src/api/project.js

@@ -161,3 +161,34 @@ export function FinishCoursewareCurFlowNodeAudit(data) {
 export function SetProjectMember(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=project_manager-SetProjectMember`, data);
 }
+
+/**
+ * @description 添加审校批注
+ * @param {object} data
+ * @param {string} data.courseware_id 课件ID
+ * @param {string} data.content 审批内容
+ */
+export function addCoursewareAuditRemark(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-AddCoursewareAuditRemark`, data);
+}
+
+/**
+ * @description 获取审校批注列表
+ * @param {object} data
+ * @param {string} data.courseware_id 课件ID
+ */
+export function getCoursewareAuditRemarkList(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-GetCoursewareAuditRemarkList`, data);
+}
+
+/**
+ * @description 删除审校批注
+ * @param {object} data
+ * @param {string} data.id 批注ID
+ */
+export function deleteCoursewareAuditRemarkList(data) {
+  return http.post(
+    `${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-DeleteCoursewareAuditRemarkList`,
+    data,
+  );
+}

src/components/RichText.vue

@@ -129,6 +129,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pageFrom: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -245,14 +249,20 @@ export default {
     },
   },
   created() {
-    window.addEventListener('click', this.hideToolbarDrawer);
+    if (this.pageFrom !== 'audit') {
+      window.addEventListener('click', this.hideToolbarDrawer);
+    }
+
     if (this.isFill) {
       window.addEventListener('click', this.hideContentmenu);
     }
     this.setBackgroundColor();
   },
   beforeDestroy() {
-    window.removeEventListener('click', this.hideToolbarDrawer);
+    if (this.pageFrom !== 'audit') {
+      window.removeEventListener('click', this.hideToolbarDrawer);
+    }
+
     if (this.isFill) {
       window.removeEventListener('click', this.hideContentmenu);
     }

src/views/personal_workbench/check_task/audit/index.vue

@@ -11,7 +11,9 @@
       <div class="courseware">
         <span class="name-path">{{ courseware_info.name_path }}</span>
         <div class="operator">
-          <span v-if="isTrue(courseware_info.is_can_add_audit_remark)" class="link">添加审核意见</span>
+          <span class="link" v-if="isTrue(courseware_info.is_can_add_audit_remark)" @click="addRemark"
+            >添加审核意见</span
+          >
           <span
             v-if="isTrue(courseware_info.is_can_finish_audit)"
             class="link"
@@ -22,15 +24,52 @@
         </div>
       </div>
     </div>
+    <div class="audit-content">
+      <main class="preview-main">
+        <span class="title">
+          <SvgIcon icon-class="menu-2" size="24" />
+          <span>{{ courseware_info.name_path }}</span>
+        </span>
 
-    <main class="preview-main">
-      <span class="title">
-        <SvgIcon icon-class="menu-2" size="24" />
-        <span>{{ courseware_info.name_path }}</span>
-      </span>
-
-      <CoursewarePreview :data="data" :component-list="component_list" :background="background" />
-    </main>
+        <CoursewarePreview :data="data" :component-list="component_list" :background="background" />
+      </main>
+      <div class="remark-list-position"></div>
+      <div class="remark-list">
+        <h5>审校批注</h5>
+        <ul v-if="remark_list.length > 0">
+          <li v-for="(item, index) in remark_list" :key="index">
+            <p v-html="item.content"></p>
+            <div class="remark-bottom">
+              <span>{{ item.remark_person_name + ':' + item.remark_time }}</span>
+              <el-button type="text" class="delete-btn" @click="deleteRemarks(item.id)">删除</el-button>
+            </div>
+          </li>
+        </ul>
+        <p v-else style="text-align: center">暂无批注</p>
+      </div>
+    </div>
+    <el-dialog
+      title="添加课件审校批注"
+      :visible="visible"
+      width="680px"
+      :close-on-click-modal="false"
+      @close="dialogClose"
+      class="audit-dialog"
+    >
+      <RichText
+        v-model="remark_content"
+        toolbar="fontselect fontsizeselect | underline | bold italic strikethrough alignleft aligncenter alignright"
+        :wordlimit-num="false"
+        :height="240"
+        page-from="audit"
+      />
+      <div slot="footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button @click="addCoursewareAuditRemark(select_node)" type="primary" :loading="submit_loading"
+          >确定</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -40,15 +79,24 @@ import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview
 import MenuPopover from '@/views/personal_workbench/common/MenuPopover.vue';
 
 import { isTrue } from '@/utils/common';
-import { GetBookCoursewareInfo, FinishCoursewareCurFlowNodeAudit } from '@/api/project';
+import {
+  GetBookCoursewareInfo,
+  FinishCoursewareCurFlowNodeAudit,
+  addCoursewareAuditRemark,
+  getCoursewareAuditRemarkList,
+  deleteCoursewareAuditRemarkList,
+} from '@/api/project';
 import { ContentGetCoursewareContent_View, ChapterGetBookChapterStructExpandList } from '@/api/book';
 
+import RichText from '@/components/RichText.vue';
+
 export default {
   name: 'AuditTaskPage',
   components: {
     MenuPage,
     CoursewarePreview,
     MenuPopover,
+    RichText,
   },
   data() {
     return {
@@ -70,12 +118,18 @@ export default {
       data: { row_list: [] },
       component_list: [],
       isTrue,
+      visible: false,
+      remark_content: '',
+      submit_loading: false, // 确定按钮loading
+      select_node: '', // 选中节点课件id
+      remark_list: [], // 批注列表
     };
   },
   created() {
     this.getBookCoursewareInfo(this.id);
     this.getCoursewareComponentContent_View(this.id);
     this.getBookChapterStructExpandList();
+    this.getCoursewareAuditRemarkList(this.id);
   },
   methods: {
     /**
@@ -124,6 +178,8 @@ export default {
     selectNode(nodeId) {
       this.getCoursewareComponentContent_View(nodeId);
       this.getBookCoursewareInfo(nodeId);
+      this.getCoursewareAuditRemarkList(nodeId);
+      this.select_node = nodeId;
     },
     /**
      * 提交课件到审核流程
@@ -140,6 +196,70 @@ export default {
     goBackBookList() {
       this.$router.push({ path: `/personal_workbench/check_task` });
     },
+
+    // 点击添加审核意见
+    addRemark() {
+      this.remark_content = '';
+      this.visible = true;
+    },
+
+    dialogClose() {
+      this.visible = false;
+    },
+
+    // 添加审校批注
+    addCoursewareAuditRemark(id) {
+      this.submit_loading = true;
+      addCoursewareAuditRemark({
+        courseware_id: id ? id : this.id,
+        content: this.remark_content,
+      })
+        .then((res) => {
+          this.submit_loading = false;
+          if (res.status === 1) {
+            this.visible = false;
+            this.getCoursewareAuditRemarkList(id ? id : this.id);
+          }
+        })
+        .catch(() => {
+          this.submit_loading = false;
+        });
+    },
+
+    // 审校批注列表
+    getCoursewareAuditRemarkList(id) {
+      this.remark_list = [];
+      getCoursewareAuditRemarkList({
+        courseware_id: id,
+      }).then((res) => {
+        if (res.status === 1) {
+          this.remark_list = res.remark_list;
+        }
+      });
+    },
+
+    // 删除批注
+    deleteRemarks(id) {
+      let _this = this;
+      _this
+        .$confirm('确定要删除此条批注吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        .then(function () {
+          deleteCoursewareAuditRemarkList({ id: id }).then((res) => {
+            if (res.status === 1) {
+              _this.getCoursewareAuditRemarkList(_this.select_node ? _this.select_node : _this.id);
+              _this.$message({
+                type: 'success',
+                message: '删除成功!',
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -175,6 +295,7 @@ export default {
   main.preview-main {
     flex: 1;
     width: 1100px;
+    padding: 5px;
     background-color: #fff;
     border: 3px solid #f44444;
     border-radius: 16px;
@@ -183,6 +304,7 @@ export default {
       display: inline-flex;
       column-gap: 24px;
       align-items: center;
+      width: 100%;
       min-width: 280px;
       height: 64px;
       padding: 18px 24px;
@@ -193,5 +315,72 @@ export default {
       border-bottom-right-radius: 16px;
     }
   }
+
+  .audit-content {
+    display: flex;
+    column-gap: 20px;
+    min-width: 1400px;
+
+    .remark-list-position {
+      width: 300px;
+    }
+
+    .remark-list {
+      position: fixed;
+      top: 170px;
+      right: 15px;
+      width: 300px;
+      height: calc(100% - 180px);
+      overflow: auto;
+      border: 1px solid #e5e5e5;
+
+      h5 {
+        padding: 0 5px;
+        margin: 0;
+        font-size: 18px;
+        line-height: 40px;
+        background: #f2f3f5;
+      }
+
+      .delete-btn {
+        padding-left: 10px;
+        color: #f44444;
+        border-left: 1px solid #e5e5e5;
+      }
+
+      ul {
+        height: calc(100% - 40px);
+        overflow: auto;
+
+        li {
+          border-bottom: 1px solid #e5e5e5;
+
+          > p {
+            padding: 5px;
+          }
+
+          :deep p {
+            margin: 0;
+          }
+
+          .remark-bottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #555;
+            border-top: 1px solid #e5e5e5;
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep .audit-dialog {
+  .el-dialog__body {
+    padding: 5px 20px;
+  }
 }
 </style>