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

<template>
  <div class="check-task">
    <MenuPage only-key="/personal_workbench/check_task" />

    <div class="check-main">
      <div class="textbook-container">
        <div class="title">待审核的教材</div>
        <div class="list-header">
          <span class="cell">编号</span>
          <span class="cell">名称</span>
        </div>
        <ul class="textbook-list">
          <li
            v-for="{ id, sn, name } in project_list"
            :key="id"
            class="textbook-item"
            :class="{ active: cur_project_id === id }"
            @click="selectProject(id)"
          >
            <span class="cell">{{ sn }}</span>
            <span class="cell">{{ name }}</span>
          </li>
        </ul>
      </div>
      <div class="textbook-chapter">
        <div ref="chapterHeader" class="chapter-header">
          <span class="cell">教材内容</span>
          <span class="cell">制作人</span>
          <span class="cell">我的审核节点</span>
          <span class="cell">状态</span>
          <span class="cell">最后编辑人</span>
          <span class="cell">最后编辑时间</span>
        </div>
        <div ref="chapterList" class="chapter-list">
          <div
            v-for="{
              id,
              name,
              producer_list,
              status_name,
              deep,
              is_my_audit_task,
              last_editor_name,
              last_edit_time,
              is_leaf_chapter,
              my_audit_node_desc,
            } in node_list"
            :key="id"
            :style="computedNameStyle(deep, isTrue(is_my_audit_task))"
            class="chapter-item"
          >
            <span
              class="path"
              :style="computedPathStyle(isTrue(is_my_audit_task))"
              @click="navigateToChapter(id, isTrue(is_my_audit_task))"
            >
              {{ name }}
            </span>
            <span :title="producer_list.map((producer) => producer.name).join('；')">
              {{ producer_list.map((producer) => producer.name).join('；') }}
            </span>
            <span class="audit-node-desc nowrap-ellipsis" :title="my_audit_node_desc">
              {{ my_audit_node_desc }}
            </span>
            <span class="status">{{ status_name }}</span>
            <span>{{ isTrue(is_leaf_chapter) ? last_editor_name : '' }}</span>
            <span>{{ isTrue(is_leaf_chapter) ? last_edit_time : '' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MenuPage from '../common/menu.vue';

import { ChapterGetBookChapterStructExpandList } from '@/api/book';
import { PageQueryMyProjectList_Auditor } from '@/api/list';
import { isTrue } from '@/utils/validate';
import { getScrollbarWidth } from '@/utils/common';

export default {
  name: 'CheckTaskPage',
  components: {
    MenuPage,
  },
  data() {
    return {
      project_list: [],
      cur_project_id: '',
      node_list: [],
      isTrue,
    };
  },
  created() {
    this.queryMyProjectList_Auditor();
  },
  methods: {
    /**
     * 查询我的审核项目列表
     */
    queryMyProjectList_Auditor() {
      PageQueryMyProjectList_Auditor({ page_capacity: 50, cur_page: 1 }).then(({ project_list }) => {
        this.project_list = project_list;
        if (this.project_list.length > 0) {
          this.cur_project_id = this.project_list[0].id;
          this.getBookChapterStructExpandList();
        }
      });
    },
    /**
     * 得到教材章节结构展开列表
     */
    getBookChapterStructExpandList() {
      ChapterGetBookChapterStructExpandList({
        book_id: this.cur_project_id,
        node_deep_mode: 0,
        is_contain_producer: 'true',
        is_contain_auditor: 'true',
      }).then(({ node_list }) => {
        this.node_list = node_list;

        this.$nextTick(() => {
          const chapterList = this.$refs.chapterList;
          if (chapterList.scrollHeight > chapterList.clientHeight) {
            const scrollWidth = getScrollbarWidth();
            this.$refs.chapterHeader.style.paddingRight = `${scrollWidth}px`;
          } else {
            this.$refs.chapterHeader.style.paddingRight = '0';
          }
        });
      });
    },
    /**
     * 选择项目
     * @param {string} id - 项目ID
     */
    selectProject(id) {
      this.cur_project_id = id;
      this.getBookChapterStructExpandList();
    },
    /**
     * 计算章节名称样式
     * @param {number} deep - 节点深度
     * @param {boolean} isMyAuditTask - 是否是我的审核任务
     * @returns {Object} - 样式对象
     */
    computedNameStyle(deep, isMyAuditTask) {
      return {
        'padding-left': `${(deep - 1) * 16}px`,
        fontWeight: deep === 1 ? 'bold' : 'normal',
        cursor: isMyAuditTask ? 'pointer' : 'auto',
      };
    },
    /**
     * 计算章节路径样式
     * @param {boolean} isMyAuditTask - 是否是我的审核任务
     * @returns {Object} - 样式对象
     */
    computedPathStyle(isMyAuditTask) {
      return {
        color: isMyAuditTask ? '#165dff' : 'default',
      };
    },
    /**
     * 导航到章节
     * @param {string} id - 章节ID
     * @param {boolean} isMyAuditTask - 是否是我的审核任务
     */
    navigateToChapter(id, isMyAuditTask) {
      if (!isMyAuditTask) return;
      if (!id) return;
      this.$router.push({
        path: `/personal_workbench/check_task/audit/${id}`,
        query: { project_id: this.cur_project_id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.check-task {
  @include page-base;

  height: 100%;

  .check-main {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    border-top: $border;

    .textbook-container {
      display: flex;
      flex-direction: column;
      width: 450px;
      border-right: $border;

      .title {
        padding-left: 12px;
        font-size: 14px;
        font-weight: bold;
        color: $font-light-color;
      }

      .list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
        color: $font-light-color;
        background-color: #eee;
        border-radius: 4px;

        .cell {
          font-size: 14px;
          font-weight: bold;
          text-align: center;

          &:first-child {
            width: 120px;
          }

          &:last-child {
            flex: 1;
          }
        }
      }

      .textbook-list {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 184px);
        overflow: auto;

        .textbook-item {
          display: flex;
          align-items: center;
          height: 40px;
          min-height: 40px;
          padding: 0 12px;
          font-size: 14px;
          color: $font-light-color;
          cursor: pointer;
          background-color: #fff;
          border-radius: 4px;

          &:hover {
            background-color: #f5f5f5;
          }

          &.active {
            background-color: $main-active-color;
          }

          .cell {
            text-align: center;

            &:first-child {
              width: 120px;
            }

            &:last-child {
              flex: 1;
            }
          }
        }
      }
    }

    .textbook-chapter {
      display: flex;
      flex: 1;
      flex-direction: column;

      @mixin cell {
        > span {
          min-height: 37px;
          padding: 8px 12px;
          border-right: $border;
        }

        :first-child {
          flex: 1;
          border-right: $border;
        }

        :nth-child(2) {
          width: 320px;
          text-align: center;
        }

        :nth-child(3) {
          width: 140px;
          text-align: center;
        }

        :nth-child(4) {
          width: 140px;
          max-width: 140px;
        }

        :nth-child(5) {
          width: 120px;
          max-width: 120px;
        }

        :last-child {
          width: 170px;
          max-width: 170px;
          font-weight: normal;
        }
      }

      .chapter-header {
        display: flex;
        height: 40px;
        font-size: 14px;
        background-color: $main-background-color;
        border-bottom: $border;

        @include cell;

        .cell {
          font-weight: bold;
          text-align: center;
        }
      }

      .chapter-list {
        height: calc(100vh - 165px);
        overflow: auto;

        .chapter-item {
          display: flex;
          align-items: stretch;
          font-size: 14px;
          border-bottom: $border;

          @include cell;
        }
      }
    }
  }
}
</style>