FD_Pano/src/views/material/image/index.vue

<template>
  <div class="panorama con">
    <div class="top">
      <crumbs :list="tablist" />
    </div>
    <div class="second-line">
      <div class="btn">
        <button
          @mouseover.stop="showList = true"
          @click="$refs.uploadFile.click()"
          class="ui-button ui-button-rect submit"
        >
          <span>上传素材</span>
          <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
            <div>
              <div class="remark">请上传120MB以内、jpg/png格式的图片</div>
            </div>
          </i>
          <upload
            ref="uploadFile"
            :failString="'格式错误，请上传10MB以内、jpg/png格式的图片'"
            :limitFailStr="'过大，请上传10MB以内、jpg/png格式的图片'"
            accept-type="image/png,image/jpeg"
            media-type="image"
            :limit="10"
            @file-change="onFileChange"
          ></upload>
          <template v-if="showList">
            <UploadList
              @close="
                () => {
                  showList = false;
                }
              "
              :list="uploadList"
              @del="delUploadItem"
            />
          </template>
        </button>
      </div>
      <div class="filter">
        <div>
          <i
            @click="refreshList"
            class="iconfont icon-works_search"
          ></i>
          <input
            type="text"
            v-model="searchKey"
            @keyup.enter="refreshList"
            placeholder="搜索文件夹或素材"
          />
        </div>
      </div>
    </div>
    <div class="list">
      <tableList
        @selection-change="
          (data) => {
            selectedArr = data;
          }
        "
        @request-more-data="getMoreMaterialItem"
        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
        :header="tabHeader"
        :showLine="true"
        :selection="false"
        :data="list"
        class="table-list"
        ref="table-list"
      >
        <div slot-scope="{ data }" slot="header">
          {{ data.name }}
        </div>
        <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
          <div class="handle" v-if="sub.canclick">
            <i
              class="iconfont iconbs_list_edit hover-tips"
              @click="(showRename = true), (popupItem = item)"
            >
              <div>
                <div class="remark">重命名</div>
              </div>
            </i>
            <i class="iconfont iconlist_delete hover-tips-warn" @click="del(item)">
              <div>
                <div class="remark">删除</div>
              </div>
            </i>
          </div>
          <div class="img" v-else-if="sub.type == 'image'">
            <img
              :id="'img' + item.id"
              v-viewer
              :src="data + `?${Math.random()}`"
              alt=""
            />
          </div>
          <span
            v-else
            @click="sub.fontweight && viewImg('img' + item.id)"
            :style="{ fontWeight: sub.fontweight, color: '#202020' }"
            >{{ data || "-" }}</span
          >
        </div>
      </tableList>
      <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
      <div class="nodata" v-if="list.length == 0 && !hasMoreData && searchKey">
        <img :src="$noresult" alt="" />
        <span>未搜索到结果</span>
      </div>
      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !searchKey">
        <img :src="config.empty" alt="" />
        <span>暂无素材~</span>
        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
      </div>
    </div>

    <rename
      :item="popupItem"
      :show="showRename"
      @rename="handleRename"
      @close="showRename = false"
    />
    <preview
      :item="popupItem"
      :show="showPreview"
      @close="showPreview = false"
    />
  </div>
</template>

<script>
import config from "@/config";
import tableList from "@/components/table";
import crumbs from "@/components/crumbs";
import { data } from "./image";
import rename from "../popup/rename";
import UploadList from "../components/uploadList";

import Upload from "@/components/shared/uploads/UploadMultiple";
import { changeByteUnit } from "@/utils/file";
import preview from "../popup/preview";

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

const TYPE = "image";

export default {
  components: {
    tableList,
    crumbs,
    rename,
    Upload,
    preview,
    UploadList,
  },
  data() {
    return {
      config,
      showPreview: false,
      showRename: false,
      showList: false,
      popupItem: null,
      tabHeader: data,
      selectedArr: [],
      searchKey: "",
      tablist: [
        {
          name: "图片",
          id: TYPE,
        },
      ],
      list: [],
      hasMoreData: true,
      isRequestingMoreData: false,
      uploadList: [],
    };
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    viewImg(id) {
      const viewer = this.$el.querySelector("#" + id).$viewer;
      viewer.show();
    },
    handleRename(newName) {
      editMaterial(
        {
          id: this.popupItem.id,
          name: newName,
        },
        () => {
          this.$msg.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;
        }
      );
    },
    delUploadItem(index) {
      ~index && this.uploadList.splice(index, 1);
    },
    del(item) {
      this.$confirm({
        content: "确定要删除素材吗？",
        ok: () => {
          delMaterial(item.id, () => {
            this.$msg.success("删除成功");
            this.isRequestingMoreData = true
            getMaterialList(
              {
                pageNum: this.list.length + 1,
                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)
                } else {
                  console.error('在素材列表里没找到要删除的那一项！');
                }

                const newData = data.data.list.map((i) => {
                  i.fileSize = changeByteUnit(Number(i.fileSize));
                  return i;
                });
                this.list = this.list.concat(newData)
                if (this.list.length === data.data.total) {
                  this.hasMoreData = false
                }

                this.isRequestingMoreData = false
              },
              () => {
                this.isRequestingMoreData = false
              }
            )
          });
        },
      });
    },
    onFileChange(file) {
      let canUploadList = [];

      file.files.forEach((item, i) => {
        let tmp = {
          statusStr: "上传中",
          status: 4,
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          name: item.name,
        };
        if (item.type.indexOf("jpeg") <= -1 && item.type.indexOf("png") <= -1) {
          setTimeout(() => {
            this.$msg({
              message: `“${item.name}”格式错误，请上传10MB以内、jpg/png格式的图片`,
              type: "error",
            });
          }, i * 100);
          return;
        }
        let tname = item.name.substring(0, item.name.lastIndexOf("."));
        if (tname.length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${item.name}”名称过长，请上传标题在50字以内的图片`,
              type: "error",
            });
          }, i * 100);
          return;
        }
        this.uploadList.push(tmp);
        canUploadList.push({
          file: item,
          list: { ...tmp },
        });
      });

      let p = [];
      canUploadList.forEach((i) => {
        let promise = new Promise((resolve) => {
          resolve(i);
        });
        p.push(promise);
      });

      Promise.all(p).then((result) => {
        let pp = [];
        p.length > 0 &&
          result.forEach((data) => {
            let params = {};
            params["file"] = data.file;
            let promise = new Promise((resolve, reject) => {
              uploadMaterial(
                params,
                {
                  type: TYPE,
                  uid: data.list.uid,
                },
                (response) => {
                  resolve(response);
                },
                (err) => {
                  reject(err);
                }
              );
            });
            pp.push(promise);
          });
        pp.length > 0 &&
          Promise.all(pp).then((response) => {
            if (response.length > 0) {
              this.uploadList.forEach((item) => {
                item.status = 5;
              });
              response.forEach((item) => {
                let idx = this.uploadList.findIndex(
                  (sub) => sub.uid == item.data.tempId
                );
                if (item.code == 0) {
                  if (idx > -1) {
                    this.uploadList.splice(idx, 1);
                  }
                }
              });
              this.getMoreMaterialItem();
            }
          });
      });
    },
    refreshList() {
      console.log('refresh');
      this.list = []
      this.isRequestingMoreData = false
      this.hasMoreData = true
      this.$refs['table-list'].requestMoreData()
    },
    getMoreMaterialItem() {
      this.isRequestingMoreData = true
      getMaterialList(
        {
          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) => {
            i.fileSize = changeByteUnit(Number(i.fileSize));
            return i;
          });
          this.list = this.list.concat(newData)
          if (this.list.length === data.data.total) {
            this.hasMoreData = false
          }
          this.isRequestingMoreData = false
        },
        () => {
          this.isRequestingMoreData = false
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
</style>
<style lang="less" scoped>
@import "../style.less";
</style>