设置审校步骤

src/api/project.js

@@ -42,3 +42,35 @@ export function GetMyBookCoursewareTaskList(data) {
 export function GetBookCoursewareInfo(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=project_task_manager-GetBookCoursewareInfo`, data);
 }
+
+/**
+ * @description 得到审校流程节点列表
+ * @param {object} data
+ */
+export function GetAuditFlowNodeList(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-GetAuditFlowNodeList`, data);
+}
+
+/**
+ * @description 启用初审节点
+ * @param {object} data
+ */
+export function SetEnableFirstAuditNode(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-SetEnableFirstAuditNode`, data);
+}
+
+/**
+ * @description 添加审校节点
+ * @param {object} data
+ */
+export function AddAuditNode(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-AddAuditNode`, data);
+}
+
+/**
+ * @description 删除审校节点
+ * @param {object} data
+ */
+export function DeleteAuditNode(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_audit_manager-DeleteAuditNode`, data);
+}

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

@@ -99,6 +99,9 @@ export default {
 @use '@/styles/mixin.scss' as *;
 
 .edit-task {
+  height: calc(100% - 52px);
+  min-height: calc(100% - 52px) !important;
+
   @include page-content(true);
 
   &__header {

src/views/personal_workbench/project/ProductionEditorialManage.vue

@@ -12,7 +12,7 @@
           <span v-if="index !== audit_node_list.length - 1">→</span>
         </span>
       </div>
-      <span class="link">设置审校步骤</span>
+      <span class="link" @click="visibleAuditSteps = true">设置审校步骤</span>
       <div class="operator flex">
         <span class="link" @click="addChapterDialog">添加章节节点</span>
         <span class="link" @click="addCoursewareDialog">添加教材内容节点</span>
@@ -74,12 +74,15 @@
       @close="producer.visible = false"
       @chapterSetProducer="chapterSetProducer"
     />
+
+    <SetAuditSteps :book-id="book_id" :visible.sync="visibleAuditSteps" @updateProject="getProjectBaseInfo" />
   </div>
 </template>
 
 <script>
-import AddChapter from './AddChapter.vue';
-import SetProducer from './SetProducer.vue';
+import AddChapter from './components/AddChapter.vue';
+import SetProducer from './components/SetProducer.vue';
+import SetAuditSteps from './components/SetAuditSteps.vue';
 import MenuPage from '@/views/personal_workbench/menu.vue';
 
 import { GetProjectBaseInfo } from '@/api/project';
@@ -97,6 +100,7 @@ export default {
     AddChapter,
     SetProducer,
     MenuPage,
+    SetAuditSteps,
   },
   data() {
     return {
@@ -113,6 +117,7 @@ export default {
         visible: false, // 设置制作人弹窗
         id: '', // 章节ID
       },
+      visibleAuditSteps: false, // 设置审校步骤弹窗
     };
   },
   created() {

src/views/personal_workbench/project/components/SetAuditSteps.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-dialog
+    title="设置审校步骤"
+    :visible="visible"
+    width="580px"
+    :show-close="false"
+    class="audit-steps"
+    @close="dialogClose"
+  >
+    <div class="audit-steps__header">
+      <span class="link" @click="setEnableFirstAuditNode('true')">开启初审</span>
+      <span class="line"></span>
+      <span class="link" @click="addAuditStep">添加步骤</span>
+    </div>
+    <div v-for="{ id, name, type } in node_list" :key="id" :class="['audit-item']">
+      <span :class="['name', { preliminary: type === 0, final: type === 2 }]">{{ name }}</span>
+
+      <div class="operator">
+        <span v-if="type === 1" class="link" @click="deleteAuditNode(id)">删除</span>
+        <span v-else-if="type === 0" class="link" @click="setEnableFirstAuditNode('false')">撤销初审</span>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button @click="dialogClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { GetAuditFlowNodeList, SetEnableFirstAuditNode, AddAuditNode, DeleteAuditNode } from '@/api/project';
+
+export default {
+  name: 'SetAuditSteps',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    bookId: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      node_list: [],
+    };
+  },
+  created() {
+    this.getAuditFlowNodeList();
+  },
+  methods: {
+    getAuditFlowNodeList() {
+      GetAuditFlowNodeList({ book_id: this.bookId }).then(({ node_list }) => {
+        this.node_list = node_list;
+      });
+    },
+    /**
+     * @description 启用初审节点
+     * @param {'true'|'false'} is_enable - 是否启用初审节点
+     */
+    setEnableFirstAuditNode(is_enable) {
+      SetEnableFirstAuditNode({ book_id: this.bookId, is_enable }).then(() => {
+        this.getAuditFlowNodeList();
+      });
+    },
+    /**
+     * @description 添加审核节点
+     * @param {string} name - 节点名称
+     */
+    addAuditNode(name) {
+      AddAuditNode({ book_id: this.bookId, name }).then(() => {
+        this.getAuditFlowNodeList();
+      });
+    },
+    /**
+     * @description 删除审核节点
+     * @param {string} nodeId - 节点ID
+     */
+    deleteAuditNode(nodeId) {
+      DeleteAuditNode({ id: nodeId }).then(() => {
+        this.getAuditFlowNodeList();
+      });
+    },
+    addAuditStep() {
+      this.$prompt('', '添加审核节点', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+        .then(({ value }) => {
+          this.addAuditNode(value);
+        })
+        .catch(() => {});
+    },
+    dialogClose() {
+      this.$emit('update:visible', false);
+      this.$emit('updateProject');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.audit-steps {
+  &__header {
+    display: flex;
+    align-items: center;
+
+    .line {
+      display: inline-block;
+      height: 16px;
+      min-height: 16px;
+      margin: 0 12px;
+    }
+  }
+
+  .audit-item {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+    padding: 8px 0;
+
+    .operator {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .name {
+      width: 300px;
+      padding: 8px 4px;
+      text-align: center;
+      border: $border;
+      border-radius: 4px;
+
+      &.preliminary,
+      &.final {
+        background-color: $main-active-color;
+      }
+    }
+  }
+}
+</style>