qjkankan_v1.1.1/packages/qjkankan-editor/src/views/material/video/index.vue

<template>
  <div class="panorama con">
    <div class="top">
      <crumbs
        v-if="!lastestUsedSearchKey"
        :list="folderPath"
        :rootName="$i18n.t('gather.video')"
        @click-path="onClickPath"
      />
      <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.video")}}</div>
    </div>
    <div class="second-line">
      <template v-if="!searchKey">
        <div class="btn">
          <button
            @mouseover.stop="showList = true"
            @click="onUploadFile"
            class="ui-button submit"
          >
            <span>{{upload_material}}</span>
            <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
              <div>
                <div class="remark">{{video_size}}</div>
              </div>
            </i>
            <upload
              ref="uploadFile"
              :failString="video_limit"
              :limitFailStr="video_fail"
              accept-type="video/mp4"
              media-type="video"
              :limit="200"
              @file-change="onFileChange"
            ></upload>
          </button>
        </div>
        <button
          class="ui-button submit"
          @click="isShowNewFolder = true"
        >
          {{$i18n.t(`gather.new_folder`)}}
        </button>
        <button
          class="ui-button cancel"
          :class="{disable: selectedList.length === 0}"
          @click="onClickMoveFolder"
        >
          {{$i18n.t(`gather.move_folder`)}}
        </button>
      </template>
      <div class="filter">
          <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
            <i class="iconfont icon-works_search search"></i>
            <input
              type="text"
              v-model="searchKey"
              :placeholder="serch_material"
            />
            <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
          </div>
        </div>
    </div>
    <div class="list">
      <tableList
        @selection-change="
          (data) => {
            selectedList = data;
          }
        "
        @request-more-data="getMoreMaterialItem"
        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
        :header="tabHeader"
        :showLine="true"
        :selection="lastestUsedSearchKey ? false : true"
        :data="list"
        class="table-list"
        ref="table-list"
      >
        <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
        <div slot-scope="{ headerItem }" slot="header">
          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`)  }}
        </div>
        <!-- 内容各单元格 -->
        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
          <div class="handle" v-if="headerItem.canclick">
            <i
              class="iconfont icon-material_operation_editor hover-tips"
              @click="onClickRename(lineData)"
            >
              <div>
                <div class="remark">{{rename}}</div>
              </div>
            </i>
            <i
              class="iconfont icon-material_operation_delete hover-tips-warn"
              @click="del(lineData)"
            >
              <div>
                <div class="remark">{{deltips}}</div>
              </div>
            </i>
          </div>
          <div
            v-else-if="headerItem.type == 'image' && lineData.type !== 'dir'"
            class="img"
            @click="previewVedio(lineData)"
          >
            <div class="video-icon-mask">
              <i class="iconfont icon-editor_play" />
            </div>
            <img :src="`${itemData}` || $thumb" alt="" />
          </div>
          <div
            v-else-if="headerItem.type == 'image' && lineData.type === 'dir'"
            class="img dirIcon"
          >
            <img
              :src="require('@/assets/images/icons/folder-blue.png')"
              alt=""
              @click="onClickFolder(lineData)"
            />
          </div>



          <!-- 文字型单元格 -->
          <div
            v-else
            class="textItem"
          >
          
          
            <!-- 名称 -->
            <div v-if="headerItem.key === 'name'" class="name">
              
              <!-- 不是搜索出来的 -->
              <div v-if="!lastestUsedSearchKey" class="not-search-res">
                <!-- 文件夹名称 -->
                <div
                  v-if="lineData.type === 'dir'"
                  class="dirName"
                  @click="onClickFolder(lineData)"
                >
                  {{ itemData || "-" }}
                </div>
                <!-- 素材名称 -->
                <div v-else class="not-dir">
                  {{ itemData || "-" }}
                </div>
              </div>
              <!-- end of 不是搜索出来的 -->
              
              <!-- 搜索出来的 -->
              <div v-if="lastestUsedSearchKey" class="search-res">
                <!-- 文件夹名称 -->
                <div
                  v-if="lineData.type === 'dir'"
                  class="dirName"
                >
                  <div
                    class="self-name"
                    @click="onClickFolder(lineData)"
                  >
                    {{ itemData || "-" }}
                  </div>
                  <div class="parent-name-wrap">
                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
                  </div>
                </div>
                <!-- 素材名称 -->
                <div v-else class="not-dir">
                  <div class="self-name">
                    {{ itemData || "-" }}
                  </div>
                  <div class="parent-name-wrap">
                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
                  </div>
                </div>
              </div>
              <!-- end of 搜索出来的 -->
              
            </div>
            <!-- end of 名称 -->
            
            
            <!-- 不是名称 -->
            <div v-else class="not-name">
              {{ itemData || "-" }}
            </div>
            <!-- end of 不是名称 -->

            
          </div>
          <!-- end of 文字型单元格 -->



        </div>
      </tableList>
      <UploadTaskList
        class="upload-task-list"
        fileType="VIDEO"
        :taskList="uploadListForUI"
        :targetFolderId="lastestUsedSearchKey ? -1 : currentFolderId"
        @cancel-task="onCancelTask"
      />
      <div class="total-number" v-if="list.length !== 0 || hasMoreData">{{had_load}}</div>
      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
        <img :src="$noresult" alt="" />
        <span>{{no_serch_result}}</span>
      </div>
      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
        <img :src="config.empty" alt="" />
        <span>{{no_material_result}}</span>
        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">{{upload_material}}</button>
      </div>
    </div>

    <CreateFolder
      v-if="isShowNewFolder"
      :validate=validateNewFolderName
      @close="isShowNewFolder = false"
      @submit="onSubmitNewFolder"
    />
    <RenameFolder
      v-if="isShowRenameFolder"
      :oldName="popupItem.name"
      :validate=validateRenameFolderName
      @close="isShowRenameFolder = false"
      @submit="onSubmitRenameFolder"
    />
    <MoveFolder
      v-if="isShowMoveFolder"
      :folderTree="folderTree"
      :selectedList="selectedList"
      @close="isShowMoveFolder = false"
      @submit="onSubmitMoveFolder"
    />
    <rename
      v-if="showRename"
      :item="popupItem"
      @rename="handleRename"
      @close="showRename = false"
    />
    <preview
      ref="video-previewer"
      :item="popupItem"
    />
  </div>
</template>

<script>
import config from "@/config";
import tableList from "@/components/table/index.vue";
import crumbs from "@/components/crumbs";
import { data } from "./video";
import rename from "../popup/rename";
import Upload from "@/components/shared/uploads/UploadMultiple";
import { changeByteUnit } from "@/utils/file";
import preview from "../popup/videoPreviewer.vue";
import UploadTaskList from "../components/uploadList1.1.0.vue";
import { debounce } from "@/utils/other.js"
import { mapState } from 'vuex';
import {i18n} from "@/lang"
import folderMixinFactory from "../folderMixinFactory.js";

import {
  getMaterialList,
  uploadMaterial,
  editMaterial,
  delMaterial,
  checkUserSize
} from "@/api";

const TYPE = "video";

const folderMixin = folderMixinFactory(TYPE)

export default {
  mixins: [
    folderMixin,
  ],
  components: {
    tableList,
    preview,
    crumbs,
    rename,
    UploadTaskList,
    Upload,
  },
  data() {
    return {
      upload_material: i18n.t("gather.upload_material"),
      video_size: i18n.t("gather.video_size"),
      video_limit: i18n.t("gather.video_limit"),
      video_fail: i18n.t("gather.video_fail"),
      serch_material: i18n.t("gather.serch_material"),
      rename: i18n.t("gather.rename"),
      deltips: i18n.t("gather.delete"),
      no_serch_result: i18n.t("gather.no_serch_result"),
      no_material_result: i18n.t("gather.no_material_result"),


      config,
      showRename: false,
      showList: false,
      popupItem: null,
      tabHeader: data,

      // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
      lastestUsedSearchKey: '',
      isFilterFocus: false,
      searchKey: "",
      list: [],
      hasMoreData: true,
      isRequestingMoreData: false,
    };
  },
  computed: {
    ...mapState({
      uploadListForUI: 'uploadStatusListVideo',
    }),
    had_load(){
      return i18n.t("gather.had_load",{msg:this.list.length})
    }
  },
  mounted() {
  },
  watch: {
    searchKey: {
      handler: function () {
        this.refreshListDebounced()
      },
      immediate: false,
    },
  },
  methods: {
    onUploadFile(){
      checkUserSize({},(data)=>{
        //判断已用是否大于3G
        if ((data.data / 1024 / 1024) > 3) {
          this.$alert({ content: i18n.t("tips_code.FAILURE_3024") });
        }else{
          this.$refs.uploadFile.click()
        }
      })
    },
    previewVedio(clickItem) {
      const index = this.list.findIndex((eachItem) => {
        return eachItem.id === clickItem.id
      })
      index >= 0 && this.$refs['video-previewer'].show(this.list[index].name, this.list[index].ossPath)
    },
    onFilterFocus() {
      this.isFilterFocus = true
    },
    onFilterBlur() {
      this.isFilterFocus = false
    },
    refreshListDebounced: debounce(function() {
      this.list = []
      this.isRequestingMoreData = false
      this.hasMoreData = true
      this.$refs['table-list'].requestMoreData()
    }, 500, false),
    handleRename(newName) {
      editMaterial(
        {
          id: this.popupItem.id,
          name: newName,
        },
        () => {
          this.$msg.success(i18n.t("gather.edit_success"));
          const index = this.list.findIndex((eachItem) => {
            return eachItem.id === this.popupItem.id
          })
          if (index >= 0) {
            this.list[index].name = newName
          } else {
            console.error('在素材列表里没找到要重命名的那一项！');
          }
          this.showRename = false;
          this.popupItem = null;
        }
      );
    },
    onClickRename(lineData) {
      this.popupItem = lineData
      if (lineData.type !== 'dir') {
        this.showRename = true
      } else {
        this.isShowRenameFolder = true
      }
    },
    del(item) {
      if (item.type === 'dir') {
        this.delFolder(item.id, (lastestUsedSearchKey) => {
          getMaterialList(
            {
              dirId: this.currentFolderId,
              pageNum: this.list.length,
              pageSize: 1,
              searchKey: this.searchKey,
              type: TYPE,
            },
            (data) => {
              const index = this.list.findIndex((eachItem) => {
                return eachItem.id === item.id
              })
              if (index >= 0) {
                this.list.splice(index, 1)
                const newData = data.data.list.map((i) => {
                  i.fileSize = changeByteUnit(Number(i.fileSize));
                  i.icon = i.ossPath + this.$videoImg;
                  return i;
                });
                this.list = this.list.concat(newData)
                if (this.list.length === data.data.total) {
                  this.hasMoreData = false
                }
              } else {
                console.error('在素材列表里没找到要删除的那一项！');
              }

              this.isRequestingMoreData = false
              this.lastestUsedSearchKey = lastestUsedSearchKey
            },
            () => {
              this.lastestUsedSearchKey = lastestUsedSearchKey
              this.isRequestingMoreData = false
            }
          )
        })
      } else {
        this.$confirm({
          title: i18n.t("gather.delete_material"),
          content: i18n.t("gather.comfirm_delete_material"),
          okText: i18n.t("gather.delete"),
          ok: () => {
            delMaterial(item.id, () => {
              this.$msg.success(i18n.t("gather.delete_success"));
              this.isRequestingMoreData = true
              const lastestUsedSearchKey = this.searchKey
              getMaterialList(
                {
                  dirId: this.currentFolderId,
                  pageNum: this.list.length,
                  pageSize: 1,
                  searchKey: this.searchKey,
                  type: TYPE,
                },
                (data) => {
                  const index = this.list.findIndex((eachItem) => {
                    return eachItem.id === item.id
                  })
                  if (index >= 0) {
                    this.list.splice(index, 1)
                    const newData = data.data.list.map((i) => {
                      i.fileSize = changeByteUnit(Number(i.fileSize));
                      i.icon = i.ossPath + this.$videoImg;
                      return i;
                    });
                    this.list = this.list.concat(newData)
                    if (this.list.length === data.data.total) {
                      this.hasMoreData = false
                    }
                  } else {
                    console.error('在素材列表里没找到要删除的那一项！');
                  }

                  this.isRequestingMoreData = false
                  this.lastestUsedSearchKey = lastestUsedSearchKey
                },
                () => {
                  this.lastestUsedSearchKey = lastestUsedSearchKey
                  this.isRequestingMoreData = false
                }
              )
            });
          },
        });
      }
    },
    onFileChange(e) {
      e.files.forEach((eachFile, i) => {
        if (eachFile.name.toLowerCase().indexOf("mp4") <= -1) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”${i18n.t("gather.video_fail")}`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”${i18n.t("gather.too_long_word_video")}`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        let itemInUploadList = {
          title: eachFile.name,
          ifKnowProgress: true,
          progress: 0,
          status: 'LOADING',
          statusText: i18n.t("gather.uploading_material"),
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          abortHandler: null,
          parentFolderId: this.currentFolderId,
        };
        
        itemInUploadList.abortHandler = uploadMaterial(
          {
            dirId: this.currentFolderId,
            file: eachFile,
            temId: itemInUploadList.uid,
            type: TYPE,
          },
          () => { // 上传成功
            const index = this.uploadListForUI.findIndex((eachItem) => {
              return eachItem.uid === itemInUploadList.uid
            })
            this.uploadListForUI.splice(index, 1)
            this.refreshListDebounced()
          },
          (err) => {
            if (err.statusText === 'abort') { // 用户取消了上传任务。
              const index = this.uploadListForUI.findIndex((eachItem) => {
                return eachItem.uid === itemInUploadList.uid
              })
              this.uploadListForUI.splice(index, 1)
            } else {
              itemInUploadList.status = 'FAIL'
              itemInUploadList.statusText = i18n.t("gather.material_upload_fail")
            }
          },
          (progress) => {
            itemInUploadList.progress = progress
          }
        );

        this.uploadListForUI.push(itemInUploadList);
      });
    },
    onCancelTask(uid) {
      const index = this.uploadListForUI.findIndex((eachItem) => {
        return eachItem.uid === uid
      })
      if (this.uploadListForUI[index].status === 'LOADING') {
        this.uploadListForUI[index].abortHandler.abort()
      } else {
        this.uploadListForUI.splice(index, 1)
      }
    },
    getMoreMaterialItem() {
      this.isRequestingMoreData = true
      const lastestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          dirId: this.currentFolderId,
          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: TYPE,
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            if (i.type !== 'dir') {
              i.fileSize = changeByteUnit(Number(i.fileSize));
            }
            i.icon = process.env.VUE_APP_ORIGIN=='aws'?i.icon:(i.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_89,h_50,m_fast,ar_auto');
            return i;
          });
          this.list = this.list.concat(newData)
          if (this.list.length === data.data.total) {
            this.hasMoreData = false
          }
          this.isRequestingMoreData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        },
        () => {
          this.isRequestingMoreData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.img:not(.dirIcon) {
  position: relative;
  width: 89px !important;
  .video-icon-mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .icon-editor_play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 20px;
    }
  }
  &:hover {
    .video-icon-mask {
      display: block;
    }
  }
}
</style>
<style lang="less" scoped>
@import "../style.less";
</style>