GCLS_Page_Book_Component_NPC/src/components/Adult/preview/FillDrag.vue

<template>
  <div class="fill-drag">
    <!-- 选项 -->
    <div class="fill-drag-options">
      <draggable
        v-model="curQue.options"
        group="option"
        animation="300"
        class="draggable-options"
        :sort="false"
        ghost-class="draggable-options-ghost"
        :disabled="isAnswerMode"
        :move="onMove"
      >
        <span
          v-for="({ text, imageList }, i) in curQue.options"
          :key="`option-${i}`"
          class="drag-option"
          :style="{
            cursor: `${isAnswerMode ? 'default' : 'pointer'}`,
            padding: `${imageList.length > 0 ? '0px' : '8px'}`
          }"
        >
          <template v-if="imageList.length > 0">
            <el-image :src="imageList[0].url" fit="fill" />
          </template>
          <template v-else>
            {{ text }}
          </template>
        </span>
      </draggable>
    </div>

    <!-- 填空 -->
    <div class="fill-drag-fills">
      <div
        v-for="(fill, i) in curQue.fills"
        :key="`fill-${i}`"
        class="drag-fill"
        :data-serial="i + 1"
      >
        <!-- 偏旁 -->
        <span class="drag-fill-space active" v-text="fill.side" />

        <div class="drag-fill-container">
          <span
            v-for="(drag, j) in fill.dragList"
            :key="j"
            :class="[
              'drag-fill-space',
              `${drag.fillList.length > 0 ? 'active' : ''}`
            ]"
          >
            <draggable
              v-model="drag.fillList"
              class="draggable-fill"
              group="option"
              animation="300"
              :sort="false"
              :data-fill="i"
              :data-space="j"
              :disabled="isAnswerMode"
              :move="onMoveTo"
              @change="changeFill"
            >
              <span
                v-for="{ text, imageList } in drag.fillList"
                :key="text"
                :style="{
                  cursor: `${isAnswerMode ? 'default' : 'pointer'}`,
                  padding: `${imageList.length > 0 ? '0px' : '8px'}`
                }"
              >
                <template v-if="imageList.length > 0">
                  <el-image :src="imageList[0].url" fit="fill" />
                </template>
                <template v-else>
                  {{ text }}
                </template>
              </span>
            </draggable>
          </span>
        </div>

        <span
          class="drag-delete"
          :style="{
            cursor: `${isAnswerMode ? 'default' : 'pointer'}`
          }"
          @click="emptyFill(i)"
        >
          <el-image :src="require('../../../assets/NPC/delete-24.png')" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: { draggable },
  props: {
    curQue: {
      type: Object,
      required: true
    },
    themeColor: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isAnswerMode: false,
      curDrag: {
        fillIndex: 0,
        spaceIndex: 0
      }
    };
  },
  created() {
    const Bookanswer = this.curQue.Bookanswer;
    if (Bookanswer) {
      this.isAnswerMode = true;
      Bookanswer.dragList.forEach(({ fillIndex, spaceIndex, ...data }) => {
        this.curQue.fills[fillIndex].dragList[spaceIndex].fillList = [
          { ...data }
        ];
      });
    } else {
      let Bookanswer = {
        dragList: []
      };
      this.$set(this.curQue, "Bookanswer", Bookanswer);
    }
  },
  methods: {
    onMove(e) {
      if (e.relatedContext.component.realList.length > 0) return false;
      let { fill, space } = e.to.dataset;
      this.curDrag = {
        fillIndex: fill,
        spaceIndex: space
      };
      return true;
    },

    onMoveTo(e) {
      if (
        e.to.classList.contains("draggable-fill") &&
        e.relatedContext.component.realList.length > 0
      ) { return false; }
      let { fill, space } = e.from.dataset;
      this.curDrag = {
        fillIndex: fill,
        spaceIndex: space
      };
    },

    changeFill({ added, removed }) {
      if (added) {
        this.curQue.Bookanswer.dragList.push({
          ...this.curDrag,
          ...added.element
        });
      }
      if (removed) {
        this.curQue.Bookanswer.dragList = this.curQue.Bookanswer.dragList.filter(
          ({ fillIndex, spaceIndex }) => {
            let { fillIndex: fIndex, spaceIndex: sIndex } = this.curDrag;
            if (fillIndex === fIndex && spaceIndex === sIndex) return false;
            return true;
          }
        );
      }
    },

    emptyFill(i) {
      if (this.isAnswerMode) return;
      this.curQue.fills[i].dragList.forEach(({ fillList }) => {
        if (fillList.length > 0) {
          this.curQue.options.push(...fillList.splice(0, 1));
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$image-size: 64px;

.fill-drag {
  width: 100%;
  color: #000;
  margin-bottom: 16px;

  %drag-option {
    width: $image-size;
    height: $image-size;
    font-size: 48px;
    font-family: "FZJCGFKTK";
    border-radius: 8px;
    text-align: center;
    background-size: $image-size $image-size;
    overflow: hidden;

    .el-image {
      width: $image-size;
      height: $image-size;
    }
  }

  &-options {
    width: 100%;
    background-color: #f7f7f7;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 24px;

    .draggable-options {
      display: flex;
      flex-wrap: wrap;
      min-height: 64px;
      column-gap: 16px;
      row-gap: 24px;

      .drag-option {
        @extend %drag-option;

        background-image: url("../../../assets/NPC/tian-zige.png");
      }
    }

    // 拖拽插件，占位符样式，需要加 !important
    .draggable-options-ghost {
      width: $image-size !important;
      height: $image-size !important;
      font-size: 48px !important;
      font-family: "FZJCGFKTK" !important;
      border-radius: 8px !important;
      text-align: center !important;
      background-size: $image-size $image-size !important;
      background-image: url("../../../assets/NPC/tian-zige.png") !important;
    }
  }

  &-fills {
    margin-left: 24px;

    .drag-fill {
      margin-top: 24px;
      display: flex;
      flex-wrap: no-wrap;
      align-items: center;
      column-gap: 16px;

      &::before {
        content: attr(data-serial) ".";
        display: inline-block;
        height: 16px;
        width: 16px;
        font-size: 16px;
        margin-right: 16px;
      }

      .drag-fill-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
        row-gap: 12px;
      }

      &-space {
        @extend %drag-option;

        min-width: 64px;
        background-image: url("../../../assets/NPC/tian-zige-noactive.png");

        &.active {
          background-image: url("../../../assets/NPC/tian-zige.png");
        }
      }

      .drag-delete {
        flex: 1;
        padding-right: 16px;

        .el-image {
          float: right;
          width: 24px;
          height: 24px;
        }
      }

      .draggable-fill {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 16px;
        row-gap: 12px;
      }
    }
  }
}
</style>