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

<template>
  <div class="edit-task">
    <MenuPage cur-key="edit_task" />

    <div class="edit-task__header">
      <div class="menu">
        <span></span>
        <span class="link" @click="goBackBookList">返回教材列表</span>
      </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('quit')">退出编辑</span>
          <span class="link" @click="saveCoursewareContent">保存</span>
        </div>
      </div>
    </div>

    <CreatePage ref="create" class="edit-task__content" @goBackPreview="goBackPreview" />
  </div>
</template>

<script>
import { GetBookCoursewareInfo, GetMyBookCoursewareTaskList } from '@/api/project';

import CreatePage from '@/views/book/courseware/create/index.vue';
import MenuPage from '@/views/personal_workbench/menu.vue';

export default {
  name: 'EditTaskPage',
  components: {
    CreatePage,
    MenuPage,
  },
  data() {
    return {
      id: this.$route.params.courseware_id,
      project_id: this.$route.query.project_id,
      courseware_info: {},
      courseware_list: [],
      isEdit: true, // 是否编辑状态
    };
  },
  created() {
    this.getBookCoursewareInfo();
    this.getMyBookCoursewareTaskList();
  },
  mounted() {
    this.$nextTick(() => {
      this.$watch(
        () => this.$refs.create.isEdit,
        (newVal) => {
          this.isEdit = newVal;
        },
        { immediate: true },
      );
    });
  },
  methods: {
    /**
     * 得到教材课件信息
     */
    getBookCoursewareInfo() {
      GetBookCoursewareInfo({ id: this.id }).then(({ courseware_info }) => {
        this.courseware_info = courseware_info;
      });
    },
    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);
    },
    goBackPreview() {
      this.$router.push({ path: `/personal_workbench/edit_task/preview/${this.id}` });
    },
    /**
     * 得到我的教材课件任务列表
     */
    getMyBookCoursewareTaskList() {
      GetMyBookCoursewareTaskList({ project_id: this.project_id }).then(({ courseware_list }) => {
        this.courseware_list = courseware_list;
      });
    },
  },
};
</script>

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

.edit-task {
  height: calc(100% - 52px);
  min-height: calc(100% - 52px) !important;

  @include page-content(true);

  &__header {
    display: flex;
    align-items: center;
    border-top: $border;
    border-bottom: $border;

    .menu {
      display: flex;
      justify-content: space-between;
      width: 360px;
      padding: 4px 8px;
      border-right: $border;
    }

    .courseware {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px;

      .name-path {
        font-size: 14px;
      }

      .link {
        padding: 4px;
        border-radius: 4px;

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

  &__content {
    flex: 1;
    flex-direction: row !important;
  }
}
</style>