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

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

    <div class="edit-task__header">
      <div class="menu-container">
        <span class="name">{{ courseware_info.book_name }}</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">
          <el-switch
            v-show="!isEdit"
            v-model="chinese"
            active-value="zh-Hant"
            inactive-value="zh-Hans"
            active-color="#ff4949"
            inactive-color="#165dff"
            active-text="繁"
            inactive-text="简"
          />
          <span v-if="!isEdit" class="link">
            <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
              <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
            </el-select>
          </span>
          <span class="link" @click="showSetBackground">背景图</span>
          <span class="link" @click="saveCoursewareContent('quit')">退出编辑</span>
          <span class="link" @click="saveCoursewareContent">保存</span>
          <span class="link" @click="goBackBookList">返回教材列表</span>
        </div>
      </div>
    </div>

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

<script>
import CreatePage from '@/views/book/courseware/create/index.vue';
import MenuPage from '@/views/personal_workbench/common/menu.vue';
import * as OpenCC from 'opencc-js';

import { GetBookCoursewareInfo, GetMyBookCoursewareTaskList } from '@/api/project';
import { GetLanguageTypeList } from '@/api/book';

export default {
  name: 'EditTaskPage',
  components: {
    CreatePage,
    MenuPage,
  },
  provide() {
    return {
      getLang: () => this.lang,
      getChinese: () => this.chinese,
      getLangList: () => this.langList,
      convertText: this.convertText,
    };
  },
  data() {
    return {
      id: this.$route.params.courseware_id,
      project_id: this.$route.query.project_id,
      courseware_info: {},
      courseware_list: [],
      isEdit: true, // 是否编辑状态
      opencc: OpenCC.Converter({ from: 'cn', to: 'tw' }),
      langList: [],
      lang: 'ZH',
      chinese: 'zh-Hans',
    };
  },
  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;
        this.getLangList();
      });
    },
    goBackBookList() {
      this.$router.push({ path: '/personal_workbench/edit_task', query: { book_id: this.courseware_info.book_id } });
    },
    showSetBackground() {
      this.$refs.create.showSetBackground();
    },
    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}`,
        query: { project_id: this.project_id },
      });
    },
    getLangList() {
      GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
        ({ language_type_list }) => {
          this.langList = language_type_list;
        },
      );
    },
    /**
     * 得到我的教材课件任务列表
     */
    getMyBookCoursewareTaskList() {
      GetMyBookCoursewareTaskList({ project_id: this.project_id }).then(({ courseware_list }) => {
        this.courseware_list = courseware_list;
      });
    },
    /**
     * 文本转换
     * @param {string} text - 要转换的文本
     * @returns {string} - 转换后的文本
     */
    convertText(text) {
      if (this.chinese === 'zh-Hant' && this.opencc) {
        return this.opencc(text);
      }
      return text;
    },
  },
};
</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 {
      .name {
        max-width: 260px;
        font-size: 16px;
        font-weight: bold;
      }
    }

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

      .switch {
        padding: 4px 16px 4px 0;
        margin-right: 300px;
        border-right: $border;

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

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

      .operator {
        .lang-select {
          :deep .el-input {
            width: 100px;
          }

          :deep .el-input__inner {
            height: 24px;
            line-height: 24px;
            background-color: #fff;
          }

          :deep .el-input__icon {
            line-height: 24px;
          }
        }
      }
    }
  }

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