FD_Pano/src/components/tableSelect2.vue

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

    <div class="material-tab">
      <a class="material-tab-item" @click.prevent="currentMaterialType = 'image'">
        <span class="text">图片</span>
        <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
      </a>
      <a class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
        <span class="text">全景图</span>
        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
      </a>
      <a class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
        <span class="text">三维场景</span>
        <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
      </a>
    </div>
    
    <div class="filter">
      <input type="text" placeholder="输入关键词" v-model="searchKey"/>
      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon"/>
      <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
    </div>

    <div class="table" v-show="currentMaterialType === 'image'">
      <div class="table-head-row">
        <span class="table-head">1</span>
        <span class="table-head" v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</span>
      </div>
      <div
        class="table-body"
        v-infinite-scroll="requestMoreImageData"
        :infinite-scroll-disabled="!hasMoreImageData || isRequestingMoreImageData"
      >
        <div class="table-body-row" v-for="(item,i) in imageList" :key="i">
          <span class="table-data">
            <div class="checkbox">
              <!-- 负责功能 -->
              <input
                type="checkbox"
                @change="e => selectItem(item, e.target)"
                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
              >
              <!-- 负责外观 -->
              <span class="for-outer-circle"></span>
              <span class="for-inner-circle"></span>
            </div>
          </span>
          <span class="table-data" v-for="(sub,idx) in tableHeadersForImage" :key="idx">
            <div v-if="sub.type=='image'" class="list-img">
              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
            </div>
            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{ item[sub.key] }}</span>
          </span>
        </div>
      </div>
      <!-- 无数据时的提示 -->
      <tbody v-if="imageList.length === 0 && !hasMoreImageData">
        <tr>
          <td colspan="10">
            <div class="nodata">
              <img :src="$noresult" alt="">
              <span v-if="lastestUsedSearchKey">{{'未搜索到结果~'}}</span>
              <span v-if="!lastestUsedSearchKey">{{'暂无素材，快去上传吧'}}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </div>

    <div class="table" v-show="currentMaterialType === 'pano'">
      <div class="table-head-row">
        <span class="table-head">1</span>
        <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
      </div>
      <div
        class="table-body"
        v-infinite-scroll="requestMorePanoData"
        :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
      >
        <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
          <span class="table-data">
            <div class="checkbox">
              <!-- 负责功能 -->
              <input
                type="checkbox"
                @change="e => selectItem(item, e.target)"
                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
              >
              <!-- 负责外观 -->
              <span class="for-outer-circle"></span>
              <span class="for-inner-circle"></span>
            </div>
          </span>
          <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
            <div v-if="sub.type=='image'" class="list-img">
              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
            </div>
            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
          </span>
        </div>
      </div>
      <!-- 无数据时的提示 -->
      <tbody v-if="panoList.length === 0 && !hasMorePanoData">
        <tr>
          <td colspan="10">
            <div class="nodata">
              <img :src="$noresult" alt="">
              <span v-if="lastestUsedSearchKey">{{'未搜索到结果~'}}</span>
              <span v-if="!lastestUsedSearchKey">{{'暂无素材，快去上传吧'}}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </div>

    <div class="btns">
      <a @click="$emit('cancle')">取消</a>
      <a :class="{disable: !select.length}" @click="$emit('submit', select)">确定</a>
    </div>
  </div>
</template>

<script>
import vAudio from '@/components/audio'
import { getMaterialList} from "@/api";
import { changeByteUnit } from '@/utils/file'
import config from "@/config";
import { debounce } from "@/utils/other.js"

export default {
  props:{
    title:{
      default:'',
      type:String
    },
    primaryKey: {
      default:'id'
    },
  },
  components:{
    vAudio
  },
  watch:{
    searchKey: {
      handler: function () {
        this.refreshMaterialList(this.currentMaterialType)
      },
      immediate: false,
    },
    currentMaterialType: {
      handler: function (newVal) {
        if (newVal === 'image' && this.imageList.length === 0) {
          this.refreshMaterialList('image')
        } else if (newVal === 'pano' && this.panoList.length === 0) {
          this.refreshMaterialList('pano')
        }
      },
      immediate: false,
    }
  },
  computed:{
    tableHeadersForImage(){
      return this.$MAPTABLEHEADER['image'].filter(item=>{
        return ['icon', 'name', 'fileSize', 'dpi'].includes(item.key)
      })
    },
    tableHeadersForPano(){
      return this.$MAPTABLEHEADER['pano'].filter(item=>{
        return ['icon', 'name', 'fileSize'].includes(item.key)
      })
    },
  },
  data () {
    return {
      imageList: [],
      panoList: [],
      
      select: [],
      searchKey:'', // 搜索关键词
      lastestUsedSearchKey: '',

      currentMaterialType: 'image',
      
      isRequestingMoreImageData: false,
      isRequestingMorePanoData: false,
      hasMoreImageData: true,
      hasMorePanoData: true,
    }
  },

  methods: {
    selectItem(item, eventTarget) {
      if (item.isUse == '1') {
        eventTarget.checked = false
        return this.$alert({content:'选中素材不能超过600kb'})
      }
      this.select = [item]
    },
    requestMoreImageData() {
      this.isRequestingMoreImageData = true
      const lastestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.imageList.length / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: 'image',
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            i.isUse = i.fileSize > 600 ? '1' : '0'
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.imageList = this.imageList.concat(newData)
          if (this.imageList.length === data.data.total) {
            this.hasMoreImageData = false
          }
          this.isRequestingMoreImageData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        },
        () => {
          this.isRequestingMoreImageData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        }
      );
    },
    requestMorePanoData() {
      this.isRequestingMorePanoData = true
      const lastestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.panoList.length / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: 'pano',
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            i.isUse = i.fileSize > 600 ? '1' : '0'
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.panoList = this.panoList.concat(newData)
          if (this.panoList.length === data.data.total) {
            this.hasMorePanoeData = false
          }
          this.isRequestingMorePanoeData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        },
        () => {
          this.isRequestingMorePanoeData = false
          this.lastestUsedSearchKey = lastestUsedSearchKey
        }
      );
    },
    refreshMaterialList: debounce(function(type) {
      if (type === 'image') {
        this.isRequestingMoreImageData = false
        this.hasMoreImageData = true
        this.imageList = []
        this.requestMoreImageData()
      } else if (type === 'pano') {
        this.isRequestingMorePanoData = false
        this.hasMorePanoData = true
        this.panoList = []
        this.requestMorePanoData()
      }
    }, 700, false),
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar { width: 6px; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
::-webkit-scrollbar-thumb {
  background: #47484A;
  border-radius: 3px;
}
::-webkit-scrollbar-button { background-color: none; height: 0; }
::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
::-webkit-scrollbar-corner { background: transparent; border-radius: 6px; }
::-webkit-scrollbar-resizer { background: transparent;}

.ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}

.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);
    }
    > .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;
  > input {
    box-sizing: border-box;
    width: calc(100% - 42px);
    height: 100%;
    border: none;
    padding-left: 16px;
    background: transparent;
    color: #fff;
    outline: none;
  }
  > .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: #404040;
    font-size: 20px;
    cursor: pointer;
  }
}

@table-height: 440px;
@table-head-row-height: 40px;
@table-border-size: 1px;

.table {
  margin-top: 20px;
  border: @table-border-size solid #404040;
  background: #1A1B1D;
  width: 100%;
  height: @table-height;
  > .table-head-row {
    width: 100%;
    height: @table-head-row-height;
    background: #252526;
    color: rgba(255, 255, 255, 0.6);
    .table-head {
      font-size: 16px;
      line-height: @table-head-row-height;
      height: 100%;
      display: inline-block;
      &:nth-of-type(1) {
        width: 50px;
        color: transparent;
      }
      &:nth-of-type(2) {
        width: calc(116px - 50px);
      }
      &:nth-of-type(3) {
        width: calc(316px - 116px);
      }
      &:nth-of-type(4) {
        width: calc(416px - 316px);
      }
      &:nth-of-type(5) {
        width: calc(100% - 416px);
      }
    }
  }
  > .table-body {
    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
    overflow: auto;
    display: inline-block;
    width: 100%;
    > .table-body-row {
      height: 50px;
      border-bottom: 1px solid #404040;
      display: flex;
      align-items: center;
      &:last-of-type {
        border-bottom: none;
      }
      > .table-data {
        font-size:14px;
        line-height:50px;
        height: 100%;
        color: #fff;
        &:nth-of-type(1) {
          width: 50px;
        }
        &:nth-of-type(2) {
          width: calc(116px - 50px);
        }
        &:nth-of-type(3) {
          width: calc(316px - 116px);
          padding-right: 50px;
        }
        &:nth-of-type(4) {
          width: calc(416px - 316px);
        }
        &:nth-of-type(5) {
          width: calc(100% - 416px);
        }
        > .list-img {
          position: relative;
          height: 100%;
          display: inline-block;
          width: 100%;
          > img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            object-fit: cover;
          }
        }
      }
    }
  }
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  input {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    cursor: pointer;
  }
  .for-outer-circle {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid #404040;
    pointer-events: none;
  }
  .for-inner-circle {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #0076F6;
    pointer-events: none;
    opacity: 0;
  }
}

.checkbox > input:checked ~ .for-outer-circle {
  border: 1px solid #0076F6;
}

.checkbox > input:checked ~ .for-inner-circle {
  opacity: 1;
}

.checkbox > input:disabled {
  cursor: not-allowed;
}

// .checkbox > input:disabled + span {
// }

.btns {
  text-align: center;
  > a {
    width:120px;
    height:40px;
    text-align: center;
    line-height: 40px;
    opacity:1;
    border-radius:20px;
    font-size:12px;
    cursor: pointer;
    display: inline-block;
    color: @color;
    margin: 0 10px;
    &:nth-child(2) {
      background-color: @color;
      color: #fff;
    }
    &:nth-child(1) {
      border:1px solid @color;
    }
  }
  .disable{
    pointer-events: none!important;
    opacity: 0.5!important;
  }
}
</style>