编辑器-基础-选择封面时可选全景图。

src/components/tableSelect2.vue

@@ -17,18 +17,18 @@
       </div>
     </div>
 
-    <table>
+    <table v-show="currentMaterialType === 'image'">
       <thead>
         <tr>
           <th></th>
-          <th v-for="(item,i) in tabHeaders" :key="i">{{item.name}}</th>
+          <th v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</th>
         </tr>
       </thead>
       <br/>
       <tbody
         class="data"
-        v-infinite-scroll="requestMoreData"
-        :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData"
+        v-infinite-scroll="requestMoreImageData"
+        :infinite-scroll-disabled="!hasMoreImageData || isRequestingMoreImageData"
       >
         <tr v-for="(item,i) in imageList" :key="i">
           <td>
@@ -38,9 +38,56 @@
               <span></span>
             </div>
           </td>
-          <td v-for="(sub,idx) in tabHeaders" :key="idx">
+          <td 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>
+            <div class="audio" v-else-if="sub.type === 'audio'">
+              <v-audio :vkey="item.id" :idleft="`_${$randomWord(true,8,8)}`" :idright="`_${$randomWord(true,8,8)}`"
+                :myAudioUrl="item[sub.key]"></v-audio>
+            </div>
+            <span class="ellipsis" v-else>{{ item[sub.key] }}</span>
+          </td>
+        </tr>
+      </tbody>
+      <!-- 无数据时的提示 -->
+      <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>
+    </table>
+
+    <table v-show="currentMaterialType === 'pano'">
+      <thead>
+        <tr>
+          <th></th>
+          <th v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</th>
+        </tr>
+      </thead>
+      <br/>
+      <tbody
+        class="data"
+        v-infinite-scroll="requestMorePanoData"
+        :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
+      >
+        <tr v-for="(item,i) in panoList" :key="i">
+          <td>
+            <div class="checkbox">
+              <input type="checkbox" @change="e => selectItem(item, e.target)"
+                :checked="select.some(i => i[primaryKey] === item[primaryKey])">
+              <span></span>
+            </div>
+          </td>
+          <td v-for="(sub,idx) in tableHeadersForPano" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
-              <img :src="item[sub.key]" alt="">
+              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
             </div>
             <div class="audio" v-else-if="sub.type=='audio'">
               <v-audio :vkey="item.id" :idleft="`_${$randomWord(true,8,8)}`" :idright="`_${$randomWord(true,8,8)}`"
@@ -51,7 +98,7 @@
         </tr>
       </tbody>
       <!-- 无数据时的提示 -->
-      <tbody v-if="imageList.length === 0 && !hasMoreData">
+      <tbody v-if="panoList.length === 0 && !hasMorePanoData">
         <tr>
           <td colspan="10">
             <div class="nodata">
@@ -80,12 +127,6 @@ import { debounce } from "@/utils/other.js"
 
 export default {
   props:{
-    tabHeader:{
-      default(){
-        return []
-      },
-      type:Array
-    },
     title:{
       default:'',
       type:String
@@ -100,30 +141,48 @@ export default {
   watch:{
     searchKey: {
       handler: function () {
-        this.refreshMaterialList()
+        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:{
-    tabHeaders(){
-      return this.tabHeader.filter(item=>{
+    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',
+      currentMaterialType: 'pano',
       
-      isRequestingMoreData: false,
-      hasMoreData: true,
+      isRequestingMoreImageData: false,
+      isRequestingMorePanoData: false,
+      hasMoreImageData: true,
+      hasMorePanoData: true,
     }
   },
 
@@ -135,8 +194,8 @@ export default {
       }
       this.select = [item]
     },
-    requestMoreData() {
-      this.isRequestingMoreData = true
+    requestMoreImageData() {
+      this.isRequestingMoreImageData = true
       const lastestUsedSearchKey = this.searchKey
       getMaterialList(
         {
@@ -155,22 +214,60 @@ export default {
           });
           this.imageList = this.imageList.concat(newData)
           if (this.imageList.length === data.data.total) {
-            this.hasMoreData = false
+            this.hasMoreImageData = false
           }
-          this.isRequestingMoreData = false
+          this.isRequestingMoreImageData = false
           this.lastestUsedSearchKey = lastestUsedSearchKey
         },
         () => {
-          this.isRequestingMoreData = false
+          this.isRequestingMoreImageData = false
           this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },
-    refreshMaterialList: debounce(function() {
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      this.imageList = []
-      this.requestMoreData()
+    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() {

src/mixins/index.js

@@ -17,6 +17,8 @@ MARERIAL.forEach((item) => {
   MAPTABLEHEADER[item] = require(`@/views/material/${item}/${item}`).data;
 });
 
+console.log('$MAPTABLEHEADER: ', MAPTABLEHEADER);
+
 const MARERIALSTR = {
   image: "图片",
   pano: "全景图",

src/views/base/Toolbar.vue

@@ -67,7 +67,6 @@
     <div class="dialog" style="z-index: 2000" v-if="isShowSettingCoverWindow">
       <Table2
         title="选择素材"
-        :tabHeader="$MAPTABLEHEADER['image']"
         @cancle="isShowSettingCoverWindow = false"
         @submit="handleSubmitFromTable2"
       />