两种素材选择弹窗都缩减列数

packages/qjkankan-editor/src/components/materialListInMaterialSelector.vue

@@ -53,9 +53,6 @@
             <template v-if="item.status === 'SUCCESS'">
               <span
                 class="table-data"
-                :style="{
-                  width: '50px',
-                }"
               >
                 <RadioOrCheckbox
                   class="checkbox"
@@ -68,7 +65,7 @@
               <span
                 class="table-data"
                 :style="{
-                  width: columnWidthList[idx],
+                  width: columnWidthList[idx] || '',
                 }"
                 v-for="(tableItemStructure, idx) in tableHeaders"
                 :key="idx"
@@ -78,9 +75,19 @@
                   </slot>
                 </div>
                 <span
+                  v-else-if="tableItemStructure.key === 'name'"
+                  class="name"
+                >
+                  <div
+                    class="name-inner ellipsis"
+                    v-title="item.successInfo[tableItemStructure.key]"
+                  >
+                    {{ item.successInfo[tableItemStructure.key] }}
+                  </div>
+                </span>
+                <span
                   v-else
                   class="ellipsis"
-                  v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''"
                 >
                   {{item.successInfo[tableItemStructure.key]}}
                 </span>
@@ -90,10 +97,13 @@
             <template v-else-if="item.status === 'LOADING'">
               <span
                 class="table-data"
-                :style="{
-                  width: '50px',
-                }"
               >
+                <RadioOrCheckbox
+                  class="checkbox"
+                  :isLightTheme="!isDarkTheme"
+                  :isMultiSelection="isMultiSelection"
+                  :isDisabled="true"
+                />
               </span>
               <span
                 class="table-data"
@@ -109,38 +119,61 @@
                 </div>
                 <span
                   v-if="tableItemStructure.key === 'name'"
-                  class="ellipsis"
-                  v-title="tableItemStructure.key === 'name' ? item.title : ''"
+                  class="name upload-status-wrap"
                 >
-                  {{ item.title }}
+                  <div
+                    class="name-inner ellipsis"
+                    v-title="item.title"
+                  >
+                    {{ item.title }}
+                  </div>
+                  <div v-if="item.ifKnowProgress" class="upload-status">
+                    {{$i18n.t(`gather.upload_material`)}} {{ Math.round(item.progress * 100)}}%
+                  </div>
+                  <div v-else class="upload-status">
+                    {{ item.statusText }}
+                  </div>
                 </span>
-                <span v-if="tableItemStructure.key === 'fileSize' && item.ifKnowProgress">
-                  {{$i18n.t(`gather.upload_material`)}} {{ Math.round(item.progress * 100)}}%
-                </span>
-                <span v-if="tableItemStructure.key === 'fileSize' && !item.ifKnowProgress">{{ item.statusText }}</span>
-                <span v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
+                <span v-else></span>
               </span>
             </template>
             <!-- 如果上传失败了 -->
             <template v-else-if="item.status === 'FAIL'">
               <span
                 class="table-data"
+              >
+                <RadioOrCheckbox
+                  class="checkbox"
+                  :isLightTheme="!isDarkTheme"
+                  :isMultiSelection="isMultiSelection"
+                  :isDisabled="true"
+                />
+              </span>
+              <span
+                class="table-data"
                 :style="{
-                  width: '50px',
+                  width: columnWidthList[idx],
                 }"
+                v-for="(tableItemStructure, idx) in tableHeaders"
+                :key="idx"
               >
-              </span>
-              <span class="table-data" v-for="(tableItemStructure, idx) in tableHeaders" :key="idx">
                 <div v-if="tableItemStructure.type" class="list-img">
                   <slot name="materialUploadFailIcon">
                   </slot>
                 </div>
                 <span
                   v-if="tableItemStructure.key === 'name'"
-                  class="ellipsis"
-                  v-title="tableItemStructure.key === 'name' ? item.title : ''"
+                  class="name upload-status-wrap"
                 >
-                  {{ item.title }}
+                  <div
+                    class="name-inner ellipsis"
+                    v-title="item.title"
+                  >
+                    {{ item.title }}
+                  </div>
+                  <div class="upload-status">
+                    {{ item.statusText }}
+                  </div>
                 </span>
                 <span v-if="tableItemStructure.key === 'fileSize'">{{ $i18n.t(`tips_code.FAILURE_3025`) }}</span>
                 <span v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
@@ -163,9 +196,6 @@
         >
           <span
             class="table-data"
-            :style="{
-              width: '50px',
-            }"
           >
             <RadioOrCheckbox
               class="checkbox"
@@ -198,9 +228,19 @@
               </slot>
             </div>
             <span
-              class="ellipsis"
+              v-else-if="tableItemStructure.key === 'name'"
+              class="name"
+            >
+              <div
+                class="name-inner ellipsis"
+                v-title="item[tableItemStructure.key]"
+              >
+                {{ item[tableItemStructure.key] }}
+              </div>
+            </span>
+            <span
               v-else
-              v-title="tableItemStructure.key === 'name' ? item[tableItemStructure.key] : ''"
+              class="ellipsis"
             >
               {{ item[tableItemStructure.key] }}
             </span>
@@ -305,13 +345,13 @@ export default {
     tableHeaderKeyList: {
       type: Array,
       default: () => {
-        return ['icon', 'name', 'fileSize']
+        return []
       }
     },
     columnWidthList: {
       type: Array,
       default: () => {
-        return ['calc(146px - 50px)', 'calc(380px - 146px)', 'calc(100% - 380px)']
+        return []
       },
     },
     isMultiSelection: {
@@ -749,7 +789,18 @@ export default {
           line-height: 50px;
           height: 100%;
           color: #323233;
-
+          &:nth-of-type(1) {
+            width: 50px;
+          }
+          &:nth-of-type(2) {
+            width: 96px;
+          }
+          &:nth-of-type(3) {
+            width: calc(100% - 50px - 96px);
+          }
+          &:last-of-type {
+            padding-right: 10px;
+          }
           >.list-img {
             position: relative;
             height: 100%;
@@ -769,6 +820,30 @@ export default {
               }
             }
           }
+          > .name {
+            display: inline-block;
+            height: 100%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            > .name-inner {
+              flex: 0 0 auto;
+              display: inline-block;
+              height: 100%;
+              width: 50%;
+            }
+            > .upload-status {
+              flex: 0 0 auto;
+              display: inline-block;
+              height: 100%;
+              margin-left: 20px;
+            }
+          }
+          > .name:not(.upload-status-wrap):hover {
+            > .name-inner {
+              width: 100%;
+            }
+          }
         }
       }
       .no-more-data {

packages/qjkankan-editor/src/components/materialSelector.vue

@@ -83,7 +83,7 @@
       :currentMaterialType="currentMaterialType"
       :materialType="'pano'"
       
-      :tableHeaderKeyList="['icon', 'name', 'fileSize']"
+      :tableHeaderKeyList="['icon', 'name']"
 
       :isMultiSelection="isMultiSelection"
       :select="select"
@@ -146,8 +146,7 @@
       :currentMaterialType="currentMaterialType"
       :materialType="'image'"
       
-      :tableHeaderKeyList="['icon', 'name', 'fileSize', 'dpi']"
-      :columnWidthList="['calc(146px - 50px)', 'calc(316px - 146px)', 'calc(380px - 316px)', 'calc(100% - 380px)']"
+      :tableHeaderKeyList="['icon', 'name']"
       
       :isMultiSelection="isMultiSelection"
       :select="select"
@@ -207,7 +206,7 @@
       :currentMaterialType="currentMaterialType"
       :materialType="'audio'"
       
-      :tableHeaderKeyList="['ossPath', 'name', 'fileSize']"
+      :tableHeaderKeyList="['ossPath', 'name']"
       
       :isMultiSelection="isMultiSelection"
       :select="select"
@@ -274,7 +273,7 @@
       :materialType="'video'"
       :materialItemCustomProcess="(item) => {item.icon = process.env.VUE_APP_ORIGIN == 'aws' ? item.icon : (item.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_89,h_50,m_fast,ar_auto');}"
 
-      :tableHeaderKeyList="['icon', 'name', 'fileSize']"
+      :tableHeaderKeyList="['icon', 'name']"
       
       :isMultiSelection="isMultiSelection"
       :select="select"
@@ -335,7 +334,7 @@
       :materialType="'3D'"
       :workId="workId"
 
-      :tableHeaderKeyList="['thumb', 'sceneName', 'createTime']"
+      :tableHeaderKeyList="['thumb', 'sceneName']"
 
       :isMultiSelection="isMultiSelection"
       :select="select"

packages/qjkankan-editor/src/components/materialSelectorFromWork.vue

@@ -30,10 +30,6 @@
     </div>
 
     <div class="table table-pano" 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 && $i18n.t(`zh_key.${item.name}`) }}</span>
-      </div> -->
       <div
         v-show="panoList.length !== 0"
         class="table-body"
@@ -53,11 +49,13 @@
               @change="v => selectItem(item, v)"
             />
           </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.icon + (Number(item.fileSize)>512 ? $imgsuffix : ``)" alt="">
+          <span class="table-data">
+            <div class="list-img">
+              <img :src="item.icon + (Number(item.fileSize) > 512 ? $imgsuffix : ``)" alt="">
             </div>
-            <span class="ellipsis" v-else v-title="item.sceneTitle">{{item.sceneTitle}}</span>
+          </span>
+          <span class="table-data">
+            <span class="name ellipsis" v-title="item.sceneTitle">{{item.sceneTitle}}</span>
           </span>
         </div>
         <div class="no-more-data">
@@ -78,10 +76,6 @@
     </div>
 
     <div class="table table-3D" v-show="currentMaterialType === '3D'">
-      <!-- <div class="table-head-row">
-        <span class="table-head">1</span>
-        <span class="table-head" v-for="(item,i) in tableHeadersFor3D" :key="i">{{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
-      </div> -->
       <div
         v-show="scene3DList.length !== 0"
         class="table-body"
@@ -101,11 +95,13 @@
               @change="v => selectItem(item, v)"
             />
           </span>
-          <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
-            <div v-if="sub.type=='image'" class="list-img">
-              <img :src="item.icon + (Number(item.fileSize)>512 ? $imgsuffix : ``)" alt="">
+          <span class="table-data">
+            <div class="list-img">
+              <img :src="item.icon + (Number(item.fileSize) > 512 ? $imgsuffix : ``)" alt="">
             </div>
-            <span class="ellipsis" v-else v-title="item.sceneTitle">{{item.sceneTitle}}</span>
+          </span>
+          <span class="table-data">
+            <span class="name ellipsis" v-title="item.sceneTitle">{{item.sceneTitle}}</span>
           </span>
         </div>
         <div class="no-more-data">
@@ -158,16 +154,6 @@ export default {
     ...mapGetters([
       'info',
     ]),
-    tableHeadersForPano() {
-      return this.$MAPTABLEHEADER['pano'].filter(item => {
-        return ['icon', 'name'].includes(item.key)
-      })
-    },
-    tableHeadersFor3D() {
-      return this.$MAPTABLEHEADER['scene'].filter(item => {
-        return ['thumb', 'sceneName'].includes(item.key)
-      })
-    },
     panoList() {
       return this.info.scenes.filter((item) => {
         return item.type === 'pano'
@@ -358,18 +344,6 @@ export default {
   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;
-    }
-  }
   > .table-body {
     height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
     overflow: auto;
@@ -402,6 +376,18 @@ export default {
             object-fit: cover;
           }
         }
+        > .name {
+          display: inline-block;
+          height: 100%;
+          width: 50%;
+        }
+      }
+    }
+    > .table-body-row:hover {
+      > .table-data {
+        > .name {
+          width: 100%;
+        }
       }
     }
     .no-more-data {
@@ -445,11 +431,8 @@ export default {
     width: calc(146px - 50px);
   }
   &:nth-of-type(3) {
-    width: calc(380px - 146px);
-    padding-right: 30px;
-  }
-  &:nth-of-type(4) {
-    width: calc(100% - 380px);
+    width: calc(100% - 146px);
+    padding-right: 10px;
   }
 }
 
@@ -463,11 +446,8 @@ export default {
     width: calc(146px - 50px);
   }
   &:nth-of-type(3) {
-    width: calc(380px - 146px);
-    padding-right: 30px;
-  }
-  &:nth-of-type(4) {
-    width: calc(100% - 380px);
+    width: calc(100% - 146px);
+    padding-right: 10px;
   }
 }