编辑器-基础-引入我自己的封面选择窗口

src/components/tableSelect2.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="select-commodity">
+    <a class="close" @click="$emit('cancle')">+</a>
+    <h3 class="title">{{title}}</h3>
+
+    <div class="material-tab">
+      <button class="material-tab-item" @click="currentMaterialType = 'image'">图片</button>
+      <button class="material-tab-item" @click="currentMaterialType = 'pano'">全景图</button>
+      <button class="material-tab-item" @click="currentMaterialType = '3D'">三维场景</button>
+    </div>
+    
+    <div class="filtert">
+      <div>
+        <input type="text" placeholder="输入关键词" v-model="key"
+          @keyup.enter="onSearch">
+        <i class="iconfont iconsearch"
+          @click="onSearch"></i>
+      </div>
+    </div>
+
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th v-for="(item,i) in tabHeaders" :key="i">{{item.name}}</th>
+        </tr>
+      </thead>
+      <br/>
+      <tbody
+        class="data"
+        v-infinite-scroll="requestMoreData"
+        :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData"
+      >
+        <tr v-for="(item,i) in list" :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 tabHeaders" :key="idx">
+            <div v-if="sub.type=='image'" class="list-img">
+              <img :src="item[sub.key]" 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="shenglvhao" v-else>{{item[sub.key]}}</span>
+          </td>
+        </tr>
+      </tbody>
+      <!-- 无数据时的提示 -->
+      <tbody v-if="list.length === 0">
+        <tr>
+          <td colspan="10">
+            <div class="nodata">
+              <img :src="$noresult" alt="">
+              <span>{{haveClickedSearch?'未搜索到结果~':'暂无素材，快去上传吧'}}</span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="btns">
+      <a @click="$emit('cancle')">取消</a>
+      <a :class="{disable:disable}" @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";
+
+export default {
+  props:{
+    tabHeader:{
+      default(){
+        return []
+      },
+      type:Array
+    },
+  
+    selected:{
+      default(){
+        return []
+      },
+      type:Array
+    },
+    title:{
+      default:'',
+      type:String
+    },
+    current: {
+      default:''
+    },
+    primaryKey: {
+      default:'id'
+    },
+  },
+  components:{
+    vAudio
+  },
+  watch:{
+    select(){
+    }
+  },
+  computed:{
+    disable(){
+      return !this.select.length
+    },
+    tabHeaders(){
+      return this.tabHeader.filter(item=>{
+        return ['icon', 'name', 'fileSize', 'dpi'].includes(item.key)
+      })
+    },
+  },
+  data () {
+    return {
+      list: [],
+      
+      haveClickedSearch:'',
+      select: [...this.selected],
+      key:'', // 搜索关键词
+
+      currentMaterialType: 'image',
+      
+      isRequestingMoreData: false,
+      hasMoreData: true,
+    }
+  },
+
+  methods: {
+    changeCurrent(data){
+      this.$emit('changeCurrent',data)
+    },
+    selectItem(item, e) {
+      let isSelect = e.checked
+      if (item.isUse == '1') {
+        e.checked = false
+        return this.$alert({content:'选中素材不能超过600kb'})
+      }
+      this.select = [item]
+    },
+    onSearch() {
+      this.haveClickedSearch = !!this.key
+      this.refreshMaterialList()
+    },
+    requestMoreData() {
+      this.isRequestingMoreData = true
+      getMaterialList(
+        {
+          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
+          searchKey: this.key,
+          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.list = this.list.concat(newData)
+          if (this.list.length === data.data.total) {
+            this.hasMoreData = false
+          }
+          this.isRequestingMoreData = false
+        },
+        () => {
+          this.isRequestingMoreData = false
+        }
+      );
+    },
+    refreshMaterialList() {
+      this.list = []
+      this.requestMoreData()
+    },
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
+    border-radius: 4px;
+    background: #fff;
+}
+.shenglvhao{
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 200px;
+  display: inline-block;
+}
+.select-commodity {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  color: #202020;
+  background: #FFFFFF;
+  max-width: 960px;
+  width: 100%;
+  border-radius: 6px;
+}
+
+.select-commodity > * {
+  padding: 15px;
+}
+
+.title {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 400;
+  margin: 0;
+  font-weight: bold;
+  border-bottom: 1px solid rgba(255,255,255,0.3);
+}
+
+.close {
+  position: absolute;
+  right: -8px;
+  top: -15px;
+  font-size: 25px;
+  color: #909090;
+  transform: rotate(45deg);
+  cursor: pointer;
+}
+
+.filtert {
+  padding: 15px;
+}
+
+.filtert > div {
+  width: 210px;
+  height: 34px;
+  background: rgba(22,26,26,1);
+  border-radius: 2px;
+  display: inline-block;
+  margin-right: 10px;
+  position: relative;
+  vertical-align: middle;
+}
+
+.filtert > div > select,
+.filtert > div > input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: none;
+  color: #202020;
+  padding: 8px 10px;
+  outline: none;
+  background: #FFFFFF;
+  border: 1px solid #EBEBEB;
+}
+
+.filtert > div > input {
+  padding-right: 40px;
+}
+
+.filtert > div > i {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+  cursor: pointer;
+  color:@color;
+}
+
+.scene-layer {
+  min-height: 400px;
+  max-height: 60vh;
+  overflow-y: auto;
+  position: relative;
+  .nodata{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  > thead {
+    display: inline-block;
+    width: 100%;
+    > tr > th {
+      font-size:14px;
+      line-height:20px;
+      text-align: center;
+      padding: 10px 0;
+      border-bottom: 1px solid #EBEBEB;
+      font-weight: bold;
+      color: #202020;
+    }
+  }
+  > tbody.data {
+    height: 350px;
+    overflow: auto;
+    display: inline-block;
+    width: 100%;
+    > tr {
+      height: 60px;
+      > td {
+        font-size:14px;
+        line-height:20px;
+        text-align: center;
+        padding: 10px 0;
+        color: #909090;
+        border-bottom: 1px solid #EBEBEB;
+        > .list-img {
+          height: 40px;
+          line-height: 40px;
+          position: relative;
+          > img {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.checkbox {
+  position: relative;
+  width:14px;
+  height:14px;
+  border-radius:2px;
+}
+
+.checkbox > input,
+.checkbox > span {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.checkbox > input {
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.checkbox > span {
+  z-index: 2;
+  background:#fff;
+  border:1px solid #ccc;
+  pointer-events: none;
+}
+
+.checkbox > input:checked + span {
+  background:#fff;
+  border:1px solid #0076F6;
+  background:@color url(/static/img/g.png) no-repeat center center;
+}
+
+.checkbox > input:disabled {
+  cursor: not-allowed;
+}
+
+.checkbox > input:disabled + span {
+  background:#CCCCCC;
+  background:rgba(0,200,175,0.3) no-repeat center center;
+}
+
+.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>

src/framework/Main.vue

@@ -82,7 +82,7 @@ export default {
 .app-view-toolbar {
   display: flex;
   position: fixed !important;
-  left: 0;
+  left: 58px;
   right: 236px;
   bottom: 0;
   height: 260px;

src/views/base/Toolbar.vue

@@ -7,7 +7,7 @@
         <div class="uc-l">
           <div class="preview">
             <img :src="info.icon || require('@/assets/images/default/img_cover_default_2.png')" alt="" />
-            <button class="ui-button submit setting-cover-btn" @click="addScene">设置封面</button>
+            <button class="ui-button submit setting-cover-btn" @click="onClickSettingCover">设置封面</button>
           </div>
           <div class="upload-btn">
             <button class="ui-button submit" @click="selectHandle('image')">选择图片</button>
@@ -33,7 +33,7 @@
               maxlength="50"
               placeholder="请输入作品标题"
             />
-            <span class="count">{{info.name.length}}/50</span>
+            <span class="count">{{titleLength}}/50</span>
           </div>
           <div class="ui-title jianjie"><span>简介</span></div>
           <div class="jianjie-textarea-wrapper">
@@ -44,7 +44,7 @@
               placeholder="请输入作品简介"
               type="text"
             />
-            <span class="count">{{info.description.length}}/500</span>
+            <span class="count">{{jianjieLength}}/500</span>
           </div>
         </div>
       </div>
@@ -56,21 +56,35 @@
 
       </ul>
     </div>
-    <eidt-panel :select="select" @openMaterial="handleOpen" v-if="activeSetting" @close="onCloseEdit" :show="activeSetting"></eidt-panel>
+    <eidt-panel
+      :select="select"
+      @openMaterial="selectHandle('image','editpanel')"
+      v-if="activeSetting"
+      @close="onCloseEdit"
+      :show="activeSetting"
+    ></eidt-panel>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSettingCoverWindow">
+      <Table2
+        title="选择素材"
+        :tabHeader="$MAPTABLEHEADER['image']"
+        @cancle="isShowSettingCoverWindow = false"
+        @submit="handleSubmitFromTable2"
+      />
+    </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
       <Table
         :list="list"
         :tabHeader="$MAPTABLEHEADER[type]"
-        @updateList="update"
+        @updateList="updateList"
         @cancle="isShowSelect = false"
-        :title="`选择${$MARERIALSTR[type]}`"
+        title="选择素材"
         @changeCurrent="changeCurrent"
         :paging="paging"
         :hideAll="true"
         @submit="handleSelect"
-      >
-    </Table>
+      />
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowScene">
@@ -88,6 +102,7 @@
 import { getMaterialList} from "@/api";
 import EidtPanel from "./EditPanel";
 import Table from "@/components/tableSelect";
+import Table2 from "@/components/tableSelect2";
 import { changeByteUnit } from '@/utils/file'
 
 import { mapGetters } from "vuex";
@@ -97,6 +112,7 @@ export default {
   components: {
     EidtPanel,
     Table,
+    Table2,
     Select
   },
   data() {
@@ -119,6 +135,7 @@ export default {
       dataURL: "",
       isShowScene:false, // 显示全景图片选择窗口
       isShowSelect:false, // 显示普通图片选择窗口
+      isShowSettingCoverWindow: false,
       list:[],
       key:'',
       clickFrom:'', // 来自“选择图片”：base。来自“全景封面”：scene。来自右侧的“选择图片”：editPanel
@@ -129,20 +146,26 @@ export default {
         showSize: 4,
         current: 1
       },
-      select:''
+      select:'',
     };
-  },
+   },
   computed: {
     ...mapGetters({
       info:'info'
-    })
+    }),
+    titleLength() {
+      return this.info?.name?.length || '0'
+    },
+    jianjieLength() {
+      return this.info?.description?.length || '0'
+    },
   },
   mounted(){
 
   },
   watch:{
     "paging.pageNum": function () {
-      this.isShowSelect && this.getMaterialList();
+      this.isShowSelect && this.getMaterialListProxy();
     },
     isShowSelect(newVal){
       if (!newVal) {
@@ -152,9 +175,6 @@ export default {
     }
   },
   methods: {
-    handleOpen(){
-      this.selectHandle('image','editpanel')
-    },
     addScene(){
       this.clickFrom = 'scene'
       this.isShowScene = true
@@ -162,16 +182,15 @@ export default {
     changeCurrent(data){
       this.paging.pageNum = data;
     },
-    update(data) {
+    updateList(data) {
       this.key = data;
-      this.getMaterialList();
+      this.getMaterialListProxy();
     },
     handleSelect(data){
       if (this.clickFrom == 'scene') {
         this.info.icon = data.icon
         this.isShowScene = false
-      }
-      else{
+      } else {
         this.clickFrom == 'editpanel'?  this.select = data[0].icon :this.info.icon = data[0].icon
         this.isShowSelect = false
       }
@@ -179,7 +198,7 @@ export default {
         this.select = ''
       });
     },
-    getMaterialList() {
+    getMaterialListProxy() {
       getMaterialList(
         {
           pageNum: this.paging.pageNum,
@@ -203,17 +222,25 @@ export default {
         }
       );
     },
+    onClickSettingCover() {
+      this.isShowSettingCoverWindow = true
+    },
+    // 点击各种选择素材按钮后调用这个
     selectHandle(type, from='base'){
       this.clickFrom = from
       this.type = type
       this.isShowSelect = true
-      this.getMaterialList()
+      this.getMaterialListProxy()
+    },
+    handleSubmitFromTable2(selected) {
+      this.info.icon = selected[0].icon
+      this.isShowSettingCoverWindow = false
     },
     onCloseEdit(){
       this.activeSetting = ''
     }
   },
-};
+}
 </script>
 
 <style lang="less" scoped>