GCLS_Page_Textbook/src/views/book/courseware/create/index.vue

<template>
  <div ref="create" class="create">
    <div class="create-left">
      <div class="back-container">
        <el-button class="back" @click="judgeIsHasChange"><i class="el-icon-arrow-left"></i> 返回</el-button>
        <span class="title">Frame {{ Number(index) + 1 }}</span>
      </div>
      <div v-for="{ value, label, children } in bookTypeOption" :key="value" class="components">
        <div class="components-title">{{ label }}</div>
        <div
          v-for="{ value: childValue, icon, label: childLabel } in children"
          :key="childValue"
          ref="componentsItem"
          class="components-item"
          @mousedown="dragStart($event, childValue)"
        >
          <SvgIcon v-if="icon" :icon-class="icon" />
          <span>{{ childLabel }}</span>
        </div>
      </div>
    </div>

    <div class="create-middle">
      <div class="create-operation">
        <el-button @click="showSetBackground"><SvgIcon icon-class="background-img" />背景图</el-button>
        <el-button><SvgIcon icon-class="template" />模板</el-button>
        <el-button class="exit-edit">
          <span @click="saveCoursewareContent('edit')">
            <template v-if="isEdit"> <i class="el-icon-close"></i><span> 退出编辑</span> </template>
            <template v-else> <i class="el-icon-edit"></i><span> 编辑</span> </template>
          </span>
          <el-button class="save" type="primary">
            <span @click="saveCoursewareContent"><SvgIcon icon-class="save" /> <span>保存</span></span>
            <el-popover placement="bottom" popper-class="save-popover" trigger="click">
              <div class="save-template">保存为模板</div>
              <i slot="reference" class="el-icon-arrow-down"></i>
            </el-popover>
          </el-button>
        </el-button>
      </div>

      <CreateCanvas
        ref="createCanvas"
        :is-edit="isEdit"
        @showSetting="showSetting"
        @changeData="changeData"
        @back="back"
        @changeEditStatus="changeEditStatus"
      />
    </div>

    <div class="create-right">
      <div class="setting-tittle">设置</div>
      <component :is="componentSettingList[curSettingType]" ref="setting" />
    </div>

    <SelectBackground :visible.sync="visible" @setBackgroundImage="setBackgroundImage" />
    <WarnSave :visible.sync="visibleWarn" @directQuit="back" @saveAndClose="saveCoursewareContent" />
  </div>
</template>

<script>
import { bookTypeOption, componentSettingList } from '../data/bookType';

import CreateCanvas from './components/createCanvas.vue';
import SelectBackground from './components/SelectBackground.vue';
import WarnSave from './components/WarnSave.vue';

export default {
  name: 'CreatePage',
  components: {
    CreateCanvas,
    SelectBackground,
    WarnSave,
  },
  provide() {
    return {
      getCurSettingId: () => this.curSettingId,
      courseware_id: this.courseware_id,
    };
  },
  data() {
    const { book_id, chapter_id, index } = this.$route.query;

    return {
      courseware_id: this.$route.params.courseware_id,
      book_id,
      index,
      chapter_id,
      curSettingType: '',
      curSettingId: '',
      componentSettingList,
      bookTypeOption,
      visible: false,
      visibleWarn: false,
      isEdit: true, // 是否编辑状态
      isChange: false, // 是否有改动
    };
  },

  methods: {
    judgeIsHasChange() {
      if (this.isChange) {
        this.visibleWarn = true;
        return;
      }
      this.back();
    },
    back() {
      this.$router.push({ path: '/chapter', query: { chapter_id: this.chapter_id, book_id: this.book_id } });
    },
    /**
     * 切换编辑状态
     */
    changeEditStatus() {
      this.isEdit = !this.isEdit;
    },
    dragStart(event, type) {
      this.$refs.createCanvas.dragStart(event, type);
    },
    changeData() {
      this.isChange = true;
    },
    /**
     * 保存课件内容
     * @param {string} type 是否退出
     */
    saveCoursewareContent(type = '') {
      if (type === 'edit' && !this.isChange) {
        this.changeEditStatus();
        return;
      }
      this.$refs.createCanvas.saveCoursewareContent(type);
      this.isChange = false;
    },
    showSetBackground() {
      this.visible = true;
    },
    /**
     * 显示设置
     * @param {object} setting
     * @param {string} type
     */
    showSetting(setting, type, id) {
      this.curSettingType = type;
      this.curSettingId = id;
      this.$nextTick(() => {
        this.$refs.setting.setSetting(setting);
      });
    },
    setBackgroundImage(...data) {
      this.$refs.createCanvas.setBackgroundImage(...data);
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  display: flex;
  height: 100%;

  &-left {
    display: flex;
    flex-direction: column;
    width: 180px;
    overflow: auto;
    background-color: #fff;

    .back-container {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      padding: 4px;

      .back {
        color: #000;
        text-align: left;
        background-color: #f4f4f4;
      }

      .title {
        padding: 0 16px;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .components {
      display: flex;
      flex-direction: column;
      padding: 24px 8px 4px;
      margin-top: 12px;
      border-top: 1px solid #e5e6eb;

      .components-title {
        padding-left: 8px;
        font-size: 14px;
        font-weight: bold;
        color: #999;
      }

      .components-item {
        display: flex;
        align-items: center;
        padding: 5px 16px;
        cursor: pointer;

        svg {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
    }
  }

  &-middle {
    flex: 1;
    padding: 24px 20px;
    overflow: auto;
    background-color: #ececec;

    .create-operation {
      display: flex;
      column-gap: 6px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;

      .exit-edit {
        padding: 4px 4px 4px 16px;
      }

      > .el-button {
        height: 40px;
        font-size: 16px;
        font-weight: bold;

        :deep > span {
          display: flex;
          column-gap: 8px;
          align-items: center;
        }

        .save.el-button {
          height: 32px;
          margin-left: 8px;
          font-size: 16px;

          :deep > span {
            display: flex;
            column-gap: 4px;
            align-items: center;
            margin-top: -1px;
          }
        }
      }
    }
  }

  &-right {
    width: 280px;
    padding: 16px 8px;
    background-color: #fff;

    .setting-tittle {
      margin-bottom: 16px;
      font-weight: bold;
      color: #000;
    }
  }
}
</style>

<style lang="scss">
.save-popover {
  width: 100px;
  min-width: 100px;
  padding: 4px;

  .save-template {
    padding: 4px 8px;
    text-align: center;
    cursor: pointer;

    &:hover {
      background-color: #f1f1f1;
    }
  }
}
</style>