qjkankan_v1.1.1/packages/qjkankan-editor/src/components/materialSelector.vue

<template>
  <div class="table-select" :class="isDarkTheme ? '' : 'bright'">
    <span class="title">{{ title }}</span>
    <div class="close-btn">
      <i class="iconfont icon-close" @click="$emit('cancle')"></i>
    </div>

    <div class="material-tab">
      <a
        v-if="selectableType.includes('image')"
        class="material-tab-item"
        @click.prevent="currentMaterialType = 'image'"
      >
        <span :class="{ active: currentMaterialType === 'image' }" class="text">
          {{ $i18n.t(`gather.image`) }}
        </span>
        <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
      </a>
      <a
        v-if="selectableType.includes('pano')"
        class="material-tab-item"
        @click.prevent="currentMaterialType = 'pano'"
      >
        <span :class="{ active: currentMaterialType === 'pano' }" class="text">
          {{ $i18n.t(`gather.panorama`) }}
        </span>
        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
      </a>
      <a
        v-if="selectableType.includes('audio')"
        class="material-tab-item"
        @click.prevent="currentMaterialType = 'audio'"
      >
        <span :class="{ active: currentMaterialType === 'audio' }" class="text">
          {{ $i18n.t(`gather.audio`) }}
        </span>
        <div v-if="currentMaterialType === 'audio'" class="bottom-line"></div>
      </a>
      <a
        v-if="selectableType.includes('video')"
        class="material-tab-item"
        @click.prevent="currentMaterialType = 'video'"
      >
        <span :class="{ active: currentMaterialType === 'video' }" class="text">
          {{ $i18n.t(`gather.video`) }}
        </span>
        <div v-if="currentMaterialType === 'video'" class="bottom-line"></div>
      </a>
      <a
        v-if="selectableType.includes('3D')"
        class="material-tab-item"
        @click.prevent="currentMaterialType = '3D'"
      >
        <span :class="{ active: currentMaterialType === '3D' }" class="text">
          {{ $i18n.t(`gather.scene`) }}
        </span>
        <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
      </a>
    </div>

    <div class="filter" :class="{ active: isSearchKeyInputActive }">
      <input
        type="text"
        :placeholder="$i18n.t('gather.keywords')"
        v-model="searchKey"
        @focus="isSearchKeyInputActive = true"
        @blur="isSearchKeyInputActive = false"
      />
      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon" />
      <i
        v-if="searchKey"
        @click="searchKey = ''"
        class="iconfont icon-toast_red clear-icon"
      ></i>
    </div>

    <MaterialList
      v-if="selectableType.includes('pano')"
      v-show="currentMaterialType === 'pano'"
      :isDarkTheme="isDarkTheme"
      :currentMaterialType="currentMaterialType"
      :materialType="'pano'"
      :tableHeaderKeyList="['icon', 'name']"
      :isMultiSelection="isMultiSelection"
      :select="select"
      :searchKey="searchKey"
      :canUpload="true"
      :fileInputCustomCheck="checkPanoFileInput"
      :fileUploadLongPollingCb="panoUploadLongPolling"
      :fileUploadLongPollingStatusText="$i18n.t(`gather.cutting`)"
      :fileInputBtnTip="$i18n.t(`gather.pano_size`)"
      :fileInputFailString="$i18n.t(`gather.pano_fail`)"
      :fileInputLimitFailStr="$i18n.t(`gather.pano_limit`)"
      :fileInputAcceptType="'image/png,image/jpeg,image/jpg'"
      :fileInputMediaType="'image'"
      :fileInputLimit="120"
      @need-clear-filter="
        () => {
          searchKey = '';
        }
      "
    >
      <template v-slot:materialUploadSuccessIcon="slotProps">
        <img
          :src="
            slotProps.uploadInfo.successInfo[slotProps.tableItemStructure.key] +
            $imgsuffix
          "
          alt=""
        />
      </template>
      <template v-slot:materialUploadingIcon>
        <img
          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
          style="object-fit: contain"
          alt=""
        />
      </template>
      <template v-slot:materialUploadFailIcon>
        <img
          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
          style="object-fit: contain"
          |
          alt=""
        />
      </template>
      <template v-slot:materialIcon="slotProps">
        <img
          v-if="slotProps.materialInfo[slotProps.tableItemStructure.key]"
          :src="
            slotProps.materialInfo[slotProps.tableItemStructure.key] +
            $imgsuffix
          "
          alt=""
        />
        <img v-else src="@/assets/img/list_placeholder.png" alt="" />
      </template>
    </MaterialList>

    <MaterialList
      v-if="selectableType.includes('image')"
      v-show="currentMaterialType === 'image'"
      :isDarkTheme="isDarkTheme"
      :currentMaterialType="currentMaterialType"
      :materialType="'image'"
      :tableHeaderKeyList="['icon', 'name']"
      :isMultiSelection="isMultiSelection"
      :select="select"
      :searchKey="searchKey"
      :canUpload="true"
      :fileInputBtnTip="$i18n.t(`gather.img_size`)"
      :fileInputFailString="$i18n.t(`gather.img_fail`)"
      :fileInputLimitFailStr="$i18n.t(`gather.img_limit`)"
      :fileInputAcceptType="'image/png,image/jpeg,image/jpg,image/gif'"
      :fileInputMediaType="'image'"
      :fileInputLimit="10"
      @need-clear-filter="
        () => {
          searchKey = '';
        }
      "
    >
      <template v-slot:materialUploadSuccessIcon="slotProps">
        <img
          :src="
            slotProps.uploadInfo.successInfo[slotProps.tableItemStructure.key] +
            $imgsuffix
          "
          alt=""
        />
      </template>
      <template v-slot:materialUploadingIcon>
        <img
          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
          style="object-fit: contain"
          alt=""
        />
      </template>
      <template v-slot:materialUploadFailIcon>
        <img
          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
          style="object-fit: contain"
          alt=""
        />
      </template>
      <template v-slot:materialIcon="slotProps">
        <img
          v-if="slotProps.materialInfo[slotProps.tableItemStructure.key]"
          :src="
            slotProps.materialInfo[slotProps.tableItemStructure.key] +
            $imgsuffix
          "
          alt=""
        />
        <img v-else src="@/assets/img/list_placeholder.png" alt="" />
      </template>
    </MaterialList>

    <MaterialList
      v-if="selectableType.includes('audio')"
      v-show="currentMaterialType === 'audio'"
      :isDarkTheme="isDarkTheme"
      :currentMaterialType="currentMaterialType"
      :materialType="'audio'"
      :tableHeaderKeyList="['ossPath', 'name']"
      :isMultiSelection="isMultiSelection"
      :select="select"
      :searchKey="searchKey"
      :canUpload="true"
      :fileInputBtnTip="$i18n.t(`gather.audio_size`)"
      :fileInputFailString="$i18n.t(`gather.audio_fail`)"
      :fileInputLimitFailStr="$i18n.t(`gather.audio_limit`)"
      :fileInputAcceptType="'audio/mp3'"
      :fileInputMediaType="'audio'"
      :fileInputLimit="20"
      @need-clear-filter="
        () => {
          searchKey = '';
        }
      "
    >
      <template v-slot:materialUploadSuccessIcon="slotProps">
        <AudioIconCanPlay
          class="audio-player"
          :vKey="slotProps.uploadInfo.successInfo.id"
          :idleft="`_${$randomWord(true, 8, 8)}`"
          :idright="`_${$randomWord(true, 8, 8)}`"
          :myAudioUrl="slotProps.uploadInfo.successInfo.ossPath"
        />
      </template>
      <template v-slot:materialUploadingIcon>
        <img
          :src="
            require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')
          "
          style="object-fit: contain"
          alt=""
        />
      </template>
      <template v-slot:materialUploadFailIcon>
        <img
          :src="
            require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')
          "
          style="object-fit: contain"
          alt=""
        />
      </template>
      <template v-slot:materialIcon="slotProps">
        <AudioIconCanPlay
          class="audio-player"
          :vKey="slotProps.materialInfo.id"
          :idleft="`_${$randomWord(true, 8, 8)}`"
          :idright="`_${$randomWord(true, 8, 8)}`"
          :myAudioUrl="slotProps.materialInfo.ossPath"
        />
      </template>
    </MaterialList>

    <MaterialList
      v-if="selectableType.includes('video')"
      v-show="currentMaterialType === 'video'"
      :isDarkTheme="isDarkTheme"
      :currentMaterialType="currentMaterialType"
      :materialType="'video'"
      :materialItemCustomProcess="videoMaterialItemCustomProcess"
      :tableHeaderKeyList="['icon', 'name']"
      :isMultiSelection="isMultiSelection"
      :select="select"
      :searchKey="searchKey"
      :canUpload="true"
      :fileInputBtnTip="$i18n.t(`gather.video_size`)"
      :fileInputFailString="$i18n.t(`gather.video_fail`)"
      :fileInputLimitFailStr="$i18n.t(`gather.video_limit`)"
      :fileInputAcceptType="'video/mp4'"
      :fileInputMediaType="'video'"
      :fileInputLimit="200"
      @need-clear-filter="
        () => {
          searchKey = '';
        }
      "
    >
      <template v-slot:materialUploadSuccessIcon="slotProps">
        <img
          :src="
            slotProps.uploadInfo.successInfo[slotProps.tableItemStructure.key]
          "
          alt=""
        />
      </template>
      <template v-slot:materialUploadingIcon>
        <img
          src="@/assets/images/icons/upload-file-type-icon-video@2x.png"
          style="object-fit: contain"
          alt=""
        />
      </template>
      <template v-slot:materialUploadFailIcon>
        <img
          src="@/assets/images/icons/upload-file-type-icon-video@2x.png"
          style="object-fit: contain"
          alt=""
        />
      </template>
      <!-- 视频已带suffix -->
      <template v-slot:materialIcon="slotProps">
        <img
          v-if="slotProps.materialInfo[slotProps.tableItemStructure.key]"
          :src="slotProps.materialInfo[slotProps.tableItemStructure.key]"
          alt=""
        />
        <img v-else src="@/assets/img/list_placeholder.png" alt="" />
      </template>
    </MaterialList>

    <MaterialList
      v-if="selectableType.includes('3D')"
      v-show="currentMaterialType === '3D'"
      :isDarkTheme="isDarkTheme"
      :currentMaterialType="currentMaterialType"
      :materialType="'3D'"
      :tableHeaderKeyList="['thumb', 'sceneName']"
      :isMultiSelection="isMultiSelection"
      :select="select"
      :searchKey="searchKey"
      @need-clear-filter="
        () => {
          searchKey = '';
        }
      "
    >
      <template v-slot:materialIcon="slotProps">
        <img
          v-if="slotProps.materialInfo[slotProps.tableItemStructure.key]"
          :src="
            slotProps.materialInfo[slotProps.tableItemStructure.key] +
            $imgsuffix
          "
          alt=""
        />
        <img v-else src="@/assets/img/list_placeholder.png" alt="" />
      </template>
    </MaterialList>

    <div class="btns">
      <button
        class="ui-button"
        :class="isDarkTheme ? 'deepcancel' : 'cancel'"
        @click="$emit('cancle')"
      >
        {{ $i18n.t("gather.cancel") }}
      </button>
      <button
        class="ui-button submit"
        :class="{ disable: !select.length }"
        @click="onClickComfirm"
      >
        {{ $i18n.t("gather.comfirm"), }}
      </button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import MaterialList from "./materialListInMaterialSelector.vue";
import AudioIconCanPlay from "@/components/audio/indexForEditor.vue";
import { getImgWH, changeByteUnit } from "@/utils/file";
import { debounce } from "@/utils/other.js";
import { checkMStatus } from "@/api";

export default {
  components: {
    MaterialList,
    AudioIconCanPlay,
  },
  props: {
    isDarkTheme: {
      type: Boolean,
      default: true,
    },
    title: {
      default: "",
      type: String,
    },
    selectableType: {
      type: Array,
      default: function () {
        return ["image", "pano", "audio", "video", "3D"];
      },
    },
    initialMaterialType: {
      type: String,
      default: "image",
    },
    isMultiSelection: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      select: [],
      isSearchKeyInputActive: false,
      searchKey: "", // 搜索关键词
      latestUsedSearchKey: "",

      currentMaterialType: this.initialMaterialType,
    };
  },
  watch: {},
  methods: {
    ...mapMutations(["clearUploadStatusLists"]),
    async checkPanoFileInput(eachFile, i) {
      let WHRate = null;
      try {
        const { width, height } = await getImgWH(eachFile);
        WHRate = width / height;
      } catch (e) {
        console.error("获取图像宽高失败：", e);
        setTimeout(() => {
          this.$msg({
            message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
            type: "warning",
          });
        }, i * 100);
        return false;
      }
      if (WHRate !== 2) {
        console.log("宽高比不对！");
        setTimeout(() => {
          this.$msg({
            message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
            type: "warning",
          });
        }, i * 100);
        return false;
      } else {
        console.log(WHRate);
        return true;
      }
    },
    panoUploadLongPolling(uploadStatusList) {
      let needPollingTaskList = uploadStatusList.filter(
        (item) => item.status === "LOADING" && item.ifKnowProgress === false
      );
      if (needPollingTaskList.length > 0) {
        checkMStatus(
          {
            ids: needPollingTaskList.map((item) => item.backendId),
            islongpolling: true,
          },
          (res) => {
            // 1切图中，2失败，3成功
            res.data.forEach((eachRes) => {
              if (eachRes.status === 2) {
                const index = uploadStatusList.findIndex(
                  (eachTask) => eachTask.backendId === eachRes.id
                );
                if (index >= 0) {
                  const targetItem = uploadStatusList[index];
                  targetItem.status = "FAIL";
                  targetItem.statusText = this.$i18n.t(
                    `gather.material_cutting_fail`
                  );
                  targetItem.ifKnowProgress = true;
                }
              } else if (eachRes.status === 3) {
                const index = uploadStatusList.findIndex(
                  (eachTask) => eachTask.backendId === eachRes.id
                );
                if (index >= 0) {
                  const targetItem = uploadStatusList[index];
                  targetItem.status = "SUCCESS";
                  if (eachRes.fileSize) {
                    eachRes.fileSize = changeByteUnit(Number(eachRes.fileSize));
                  } else {
                    eachRes.fileSize = "";
                  }
                  targetItem.successInfo = eachRes;
                }
              }
            });
          }
        );
      }
    },
    videoMaterialItemCustomProcess(item) {
      item.icon =
        process.env.VUE_APP_ORIGIN == "aws"
          ? item.icon
          : item.ossPath + this.$videoImg;
    },
    onClickComfirm: debounce(function () {
      this.$emit("submit", this.select);
    }, 250),
  },
  mounted() {
    this.clearUploadStatusLists();
  },
};
</script>

<style lang="less" scoped>
.table-select {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 600px;
  height: 730px;
  background: #1a1b1d;
  border-radius: 4px;
  border: 1px solid #404040;
  padding: 26px;

  .title {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
  }

  .close-btn {
    display: inline-block;
    position: absolute;
    top: 26px;
    right: 20px;
    font-size: 12px;
    color: #969799;
    cursor: pointer;
    padding: 6px;
  }
  .material-tab {
    margin-top: 35px;

    > .material-tab-item {
      display: inline-block;
      margin-right: 20px;
      position: relative;
      cursor: pointer;

      > .text {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 0.6);
        &.active {
          color: #fff;
        }
      }

      > .bottom-line {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -4px;
        width: 16px;
        height: 2px;
        background: #0076f6;
        border-radius: 1px;
      }
    }
  }

  .filter {
    margin-top: 28px;
    width: 100%;
    height: 36px;
    background: #252526;
    border-radius: 2px;
    border: 1px solid #404040;
    position: relative;
    &.active {
      border: 1px solid @color;
    }
    > input {
      box-sizing: border-box;
      width: calc(100% - 42px);
      height: 100%;
      border: none;
      padding-left: 16px;
      background: transparent;
      color: #fff;
      outline: none;
    }
    > input::placeholder,
    textarea::placeholder {
      font-size: 14px;
      color: #505050 !important;
    }

    > .search-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 18px;
      color: #404040;
      font-size: 20px;
    }
    > .clear-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 18px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .btns {
    position: absolute;
    right: 26px;
    bottom: 26px;
    button:first-child {
      margin-right: 16px;
    }
  }
}

.table-select.bright {
  border: 1px solid #ebedf0;
  background: #fff;
  .title {
    color: #323233;
  }

  .close-btn {
  }
  .material-tab {
    > .material-tab-item {
      > .text {
        color: #969799;
        &.active {
          color: #323233;
        }
      }

      > .bottom-line {
      }
    }
  }

  .filter {
    background: #f7f8fa;
    border: 1px solid #ebedf0;

    > input {
      color: #323233;
    }
    > input::placeholder,
    textarea::placeholder {
      font-size: 14px;
      color: #c8c9cc !important;
    }

    > .search-icon {
      color: #c8c9cc;
    }
    > .clear-icon {
      color: #c8c9cc;
    }
  }

  .btns {
  }
}
</style>