管理中心-素材列表-代码优化、添加复选框

packages/qjkankan-editor/src/assets/style/component.less

@@ -149,45 +149,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-.fdcheck{
-  position: relative;
-  cursor: pointer;
-  &::before{
-    content: '';
-    border: #CCCCCC 1px solid;
-    width: 14px;
-    height: 14px;
-    position: absolute;
-    left: -20px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: inline-block;
-  }
-}
-
-.check_active{
-  &::before{
-    content: '';
-    background: #1fe4dc;
-    border: #1fe4dc 1px solid;
-  }
-  &::after{
-    left: -17px;
-    top: 50%;
-    position: absolute;
-    display: table;
-    border: 2px solid #000;
-    border-top: 0;
-    border-left: 0;
-    transform: rotate(45deg) translate(-50%, -50%);
-    opacity: 1;
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-    width: 6px;
-    height: 10px;
-    content: " ";
-  }
-}
-
 .menu {
   > ul {
     display: flex;

packages/qjkankan-editor/src/assets/style/style.pc.editor.less

@@ -143,45 +143,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-.fdcheck {
-  position: relative;
-  cursor: pointer;
-  &::before {
-    content: '';
-    border: #CCCCCC 1px solid;
-    width: 14px;
-    height: 14px;
-    position: absolute;
-    left: -20px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: inline-block;
-  }
-}
-
-.check_active {
-  &::before {
-    content: '';
-    background: #1fe4dc;
-    border: #1fe4dc 1px solid;
-  }
-  &::after {
-    left: -17px;
-    top: 50%;
-    position: absolute;
-    display: table;
-    border: 2px solid #000;
-    border-top: 0;
-    border-left: 0;
-    transform: rotate(45deg) translate(-50%, -50%);
-    opacity: 1;
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-    width: 6px;
-    height: 10px;
-    content: " ";
-  }
-}
-
 .menu {
   > ul {
     display: flex;

packages/qjkankan-editor/src/components/table/index.vue

@@ -3,31 +3,81 @@
     <!-- 表头 -->
     <ul class="t-header" :class="{'bottom-line':showLine}">
       <!-- 复选框 -->
-      <li v-if="selection" class="check-cls"><span @click="lock=false,selectAll=!selectAll" class="fdcheck" :class="{check_active:selectAll}"></span></li>
-      <!--  -->
-      <li v-for="(item,i) in header" :key="i" :style="{textAlign: item.textAlign, width:item.width ?item.width+'px':(100/header.length)+'%'}">
-        <slot :data='item' name='header'></slot>
+      <div
+        v-if="selection && !isAllSelected"
+        class="checkbox"
+        @click="onClickSelectAll"
+      >
+      </div>
+      <img
+        v-if="isAllSelected"
+        class="checkbox active"
+        @click="onClickSelectAll"
+        src="@/assets/images/icons/checkbox.png"
+        draggable="false"
+      />
+      <!-- 表头各项 -->
+      <li
+        v-for="(headerItem,i) in header"
+        :key="i"
+        :style="{
+          textAlign: headerItem.textAlign,
+          width: headerItem.width ? headerItem.width+'px' : (100/header.length)+'%'
+        }"
+      >
+        <!-- 名字叫header的作用域插槽，通过headerItem作用域提供表头各项 -->
+        <slot :headerItem='headerItem' name='header'></slot>
       </li>
     </ul>
     <!-- 表格内容区域 -->
-    <div class="t-con"
+    <div
+      class="t-con"
       v-infinite-scroll="requestMoreData"
       :infinite-scroll-disabled="!canRequestMoreData"
       ref="t-con"
       :style="`margin-right: ${hasScrollBar ? -6 : 0}px`"
     >
-      <ul class="t-item" active-txt :class="{'bottom-line': showLine}" v-for="(item, i) in fixdata" :key="i">
+      <!-- 表格每一行 -->
+      <ul
+        class="t-item"
+        :class="{'bottom-line': showLine}"
+        v-for="(lineData, i) in data"
+        :key="i"
+      >
         <!-- 复选框 -->
-        <li v-if="selection" class="check-cls" ><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}"></span></li>
-        <!--  -->
+        <div
+          v-if="selection && !selectedIdList.some(id => id === lineData.id)"
+          class="checkbox"
+          @click="selectItem(lineData, i)"
+        />
+        <img
+          v-if="selection && selectedIdList.some(id => id === lineData.id)"
+          class="checkbox active"
+          @click="selectItem(lineData, i)"
+          src="@/assets/images/icons/checkbox.png"
+          draggable="false"
+        />
+        <!-- 表格各项 -->
         <li
-          v-for="(sub,j) in header"
+          v-for="(headerItem, j) in header"
           :key='j'
-          :style="{textAlign:item.textAlign, width:sub.width ? sub.width+'px':(100/header.length)+'%'}"
-          :class="{ themetxt: sub.fontweight, showWhenHover: sub.showWhenHover }"
-          :title="sub.key === 'name'?  item[sub.key]: ''"
+          :style="{
+            textAlign: lineData.textAlign,
+            width: headerItem.width ? headerItem.width + 'px' : (100 / header.length) + '%'
+          }"
+          :class="{
+            themetxt: headerItem.fontweight,
+            showWhenHover: headerItem.showWhenHover
+          }"
+          :title="headerItem.key === 'name' ? lineData[headerItem.key] : ''"
         >
-          <slot :data='item[sub.key]' :item="item"  :sub='sub' name='item'></slot>
+          <!-- 名字叫tableItem的作用域插槽，通过itemData作用域把这一项表格数据向外暴露，通过lineData作用域把每一行向外暴露，通过headerItem作用域把这一项对应的表头项向外暴露 -->
+          <slot
+            :itemData='lineData[headerItem.key]'
+            :lineData="lineData"
+            :headerItem='headerItem'
+            name='tableItem'
+          ></slot>
         </li>
       </ul>
     </div>
@@ -72,58 +122,68 @@ export default {
   },
   data () {
     return {
-      selectAll: false,
-      lock: true,
       hasScrollBar: false,
+      selectedIdList: [],
     }
   },
   computed: {
-    ...mapState({
-      // props中data中hasAuth一律写成false，即未选中。
-      fixdata () {
-        let data = this.data && this.data.map(item => {
-          item.hasAuth = false
-          return item
-        })
-        return data
+    isAllSelected() {
+      if (this.data && this.data.length > 0) {
+        return this.data.length === this.selectedIdList.length
+      } else {
+        return false
       }
-    })
-
+    },
   },
   watch: {
-    data () {
-      this.selectAll = false
-    },
-    selectAll: function (newVal) {
-      if (!this.lock) {
-        this.fixdata.forEach(item => {
-          item.hasAuth = newVal
-        })
-        this.handleSelect()
-      }
+    data: {
+      handler(v) {
+        const newSelectedIdList = []
+        for (const selectedId of this.selectedIdList) {
+          if (this.data.some((item) => {
+            return item.id === selectedId
+          })) {
+            newSelectedIdList.push(selectedId)
+          }
+        }
+        this.selectedIdList = newSelectedIdList
+      },
+      deep: true,
     }
   },
   methods: {
+    onClickSelectAll() {
+      if (this.isAllSelected) {
+        this.selectedIdList = []
+      } else {
+        this.selectedIdList = []
+        this.data.forEach(item => {
+          this.selectedIdList.push(item.id)
+        })
+      }
+      this.emitSelectionChange()
+    },
     requestMoreData() {
       this.$emit('request-more-data')
     },
-    handleSelect () {
-      let arr = this.fixdata.filter(item => {
-        return item.hasAuth
+    emitSelectionChange () {
+      let arr = this.data.filter(item => {
+        return this.selectedIdList.some((selectedId) => {
+          return selectedId === item.id
+        })
       })
       this.$emit('selection-change', arr)
     },
-    selectItem (item, i) {
-      item.hasAuth = !item.hasAuth
-      this.$set(this.fixdata, i, item)
-      this.lock = true
-      this.selectAll = true
-      this.fixdata.forEach(sub => {
-        if (!sub.hasAuth) {
-          this.selectAll = false
-        }
+    selectItem (selectedItem, i) {
+      const idx = this.selectedIdList.findIndex((alreadySelectedId) => {
+        return alreadySelectedId === selectedItem.id
       })
-      this.handleSelect()
+      if (idx > -1) {
+        this.selectedIdList.splice(idx, 1)
+      } else {
+        this.selectedIdList.push(selectedItem.id)
+      }
+      this.emitSelectionChange()
     }
   },
   mounted () {
@@ -141,5 +201,101 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import './style.less';
+.table-layout {
+  width: 100%;
+  color: #777;
+  font-size: 14px;
+
+  .checkbox {
+    display: inline-block;
+    margin-right: 20px;
+    flex-grow: 1;
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid #D5D8DE;
+    cursor: pointer;
+    user-select: none;
+    &.active {
+      border-radius: initial;
+      border: initial;
+    }
+  }
+
+  .t-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 15px 16px 15px 16px;
+    background-color: #F5F7FA;
+    color: #646566;
+    line-height: 19px;
+    position: relative; // 为了设置z-index
+    z-index: 1; // 为了避免.t-con向下滚动后覆盖本元素。因为.t-con的margin-top是负值。
+    li {
+      text-align: left;
+      margin-right: 20px;
+      flex-grow: 1;
+    }
+  }
+
+  // 表格内容
+  .t-con {
+    padding-top: 49px; // 为了能上下滚动，overflow的值不能是visible，导致此元素是个BFC，导致绝对定位的tip在第一行无法显示在此元素区域外，只好让此元素具有padding-top以供第一行的tip显示。
+    margin-top: -49px;
+    height: calc(100vh - 325px); // 必须指定高度，element-ui的无限滚动指令才能生效
+    overflow: auto;
+    .t-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 10px 16px 10px 16px;
+      .showWhenHover {
+        visibility: hidden;
+      }
+      &:hover {
+        background: #F7F7F7;
+        .showWhenHover {
+          visibility: visible;
+        }
+        &[active-txt] {
+          // 关键列，会加粗显示且有hover效果。
+          >.themetxt {
+            span {
+              word-break: break-all;
+              font-weight: bold;
+
+              &:hover {
+                color: #1FE4DC !important;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+      li {
+        text-align: left;
+        display: inline-block;
+        margin-right: 20px;
+        flex-grow: 1;
+        span {
+          color: #323233;
+          // word-break: keep-all;
+          // white-space: nowrap;
+          word-break: break-all;
+          white-space: normal;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .bottom-line {
+      min-height: 50px;
+      border-bottom: 1px solid rgba(#202020, 0.1);
+    }
+  }
+}
 </style>

packages/qjkankan-editor/src/components/table/style.less

@@ -1,87 +0,0 @@
-.table-layout {
-  width: 100%;
-  color: #777;
-  font-size: 14px;
-
-  .check-cls {
-    max-width: 20px;
-    text-align: left !important;
-    margin-left: 20px;
-  }
-
-  .t-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 15px 16px 15px 16px;
-    background-color: #F5F7FA;
-    color: #646566;
-    line-height: 19px;
-    position: relative; // 为了设置z-index
-    z-index: 1; // 为了避免.t-con向下滚动后覆盖本元素。因为.t-con的margin-top是负值。
-    li {
-      text-align: left;
-      padding-right: 20px;
-      flex-grow: 1;
-    }
-  }
-
-  // 表格内容
-  .t-con {
-    padding-top: 49px; // 为了能上下滚动，overflow的值不能是visible，导致此元素是个BFC，导致绝对定位的tip在第一行无法显示在此元素区域外，只好让此元素具有padding-top以供第一行的tip显示。
-    margin-top: -49px;
-    height: calc(100vh - 325px); // 必须指定高度，element-ui的无限滚动指令才能生效
-    overflow: auto;
-    .t-item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: 10px 16px 10px 16px;
-      .showWhenHover {
-        visibility: hidden;
-      }
-      &:hover {
-        background: #F7F7F7;
-        .showWhenHover {
-          visibility: visible;
-        }
-        &[active-txt] {
-          // 关键列，会加粗显示且有hover效果。
-          >.themetxt {
-            span {
-              word-break: break-all;
-              font-weight: bold;
-
-              &:hover {
-                color: #1FE4DC !important;
-                cursor: pointer;
-              }
-            }
-          }
-        }
-      }
-      li {
-        text-align: left;
-        display: inline-block;
-        padding-right: 20px;
-        flex-grow: 1;
-        span {
-          color: #323233;
-          // word-break: keep-all;
-          // white-space: nowrap;
-          word-break: break-all;
-          white-space: normal;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-        }
-      }
-    }
-
-    .bottom-line {
-      min-height: 50px;
-      border-bottom: 1px solid rgba(#202020, 0.1);
-    }
-  }
-}

packages/qjkankan-editor/src/views/material/audio/index.vue

@@ -57,60 +57,61 @@
         :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
-        :selection="false"
+        :selection="true"
         :data="list"
         class="table-list"
         ref="table-list"
       >
-        <div slot-scope="{ data }" slot="header">
-          {{ data.name && $i18n.t(`zh_key.${data.name}`)  }}
+        <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
+        <div slot-scope="{ headerItem }" slot="header">
+          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`)  }}
         </div>
-        <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
-          <div class="handle" v-if="sub.canclick">
+        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
+          <div class="handle" v-if="headerItem.canclick">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = item)"
+              @click="(showRename = true), (popupItem = lineData)"
             >
               <div>
                 <div class="remark">{{rename}}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(item)">
+            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
               <div>
                 <div class="remark">{{deltips}}</div>
               </div>
             </i>
           </div>
           <div
-            v-else-if="sub.type == 'audio' && item.type !== 'dir'"
+            v-else-if="headerItem.type == 'audio' && lineData.type !== 'dir'"
             class="audio"
           >
             <v-audio
-              :vkey="item.id"
+              :vkey="lineData.id"
               :idleft="`_${$randomWord(true, 8, 8)}`"
               :idright="`_${$randomWord(true, 8, 8)}`"
-              :myAudioUrl="data"
+              :myAudioUrl="itemData"
             ></v-audio>
           </div>
           <div
-            v-else-if="sub.type == 'audio' && item.type === 'dir'"
+            v-else-if="headerItem.type == 'audio' && lineData.type === 'dir'"
             class="img dir"
           >
             <img
               :src="require('@/assets/images/icons/folder-blue.png')"
               alt=""
-              @click="onClickFolder(item)"
+              @click="onClickFolder(lineData)"
             />
           </div>
           <span
             v-else
             class="textItem"
             :class="{
-              dirName: sub.key === 'name' && item.type === 'dir'
+              dirName: headerItem.key === 'name' && lineData.type === 'dir'
             }"
-            @click="(sub.key === 'name' && item.type === 'dir') ? onClickFolder(item): null"
+            @click="(headerItem.key === 'name' && lineData.type === 'dir') ? onClickFolder(lineData): null"
           >
-            {{ data || "-" }}
+            {{ itemData || "-" }}
           </span>
         </div>
       </tableList>
@@ -304,8 +305,6 @@ export default {
                   this.list.splice(index, 1)
                   const newData = data.data.list.map((i) => {
                     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)
@@ -421,8 +420,6 @@ export default {
             if (i.type !== 'dir') {
               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)

packages/qjkankan-editor/src/views/material/image/index.vue

@@ -57,53 +57,55 @@
         :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
-        :selection="false"
+        :selection="true"
         :data="list"
         class="table-list"
         ref="table-list"
       >
-        <div slot-scope="{ data }" slot="header">
-          {{ data.name && $i18n.t(`zh_key.${data.name}`)  }}
+        <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
+        <div slot-scope="{ headerItem }" slot="header">
+          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`)  }}
         </div>
-        <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
-          <div v-if="sub.canclick" class="handle">
+        <!-- 内容各单元格 -->
+        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
+          <div v-if="headerItem.canclick" class="handle">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = item)"
+              @click="(showRename = true), (popupItem = lineData)"
             >
               <div>
                 <div class="remark">{{rename}}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(item)">
+            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
               <div>
                 <div class="remark">{{deltips}}</div>
               </div>
             </i>
           </div>
           <div
-            v-else-if="sub.type == 'image'"
+            v-else-if="headerItem.type == 'image'"
             class="img"
             :class="{
-              dirIcon: item.type === 'dir'
+              dirIcon: lineData.type === 'dir'
             }"
           >
             <img
-              :id="'img' + item.id"
-              :src="item.type === 'dir' ? require('@/assets/images/icons/folder-blue.png') : data + (Number(item.fileSize)>512 ? $imgsuffix : '') "
+              :id="'img' + lineData.id"
+              :src="lineData.type === 'dir' ? require('@/assets/images/icons/folder-blue.png') : itemData + (Number(lineData.fileSize)>512 ? $imgsuffix : '') "
               alt=""
-              @click="item.type === 'dir' ? onClickFolder(item) : previewImage(item)"
+              @click="lineData.type === 'dir' ? onClickFolder(lineData) : previewImage(lineData)"
             />
           </div>
           <span
             v-else
             class="textItem"
             :class="{
-              dirName: sub.key === 'name' && item.type === 'dir'
+              dirName: headerItem.key === 'name' && lineData.type === 'dir'
             }"
-            @click="(sub.key === 'name' && item.type === 'dir') ? onClickFolder(item): null"
+            @click="(headerItem.key === 'name' && lineData.type === 'dir') ? onClickFolder(lineData): null"
           >
-            {{ data || "-" }}
+            {{ itemData || "-" }}
           </span>
         </div>
       </tableList>
@@ -296,8 +298,6 @@ export default {
                   this.list.splice(index, 1)
                   const newData = data.data.list.map((i) => {
                     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)
@@ -424,8 +424,6 @@ export default {
             if (i.type !== 'dir') {
               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)

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -32,35 +32,43 @@
       </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 && $i18n.t(`zh_key.${data.name}`) }}
+      <tableList
+        @selection-change="
+          (data) => {
+            selectedArr = data;
+          }
+        "
+        @request-more-data="getMoreMaterialItem"
+        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
+        :header="tabHeader"
+        :showLine="true"
+        :selection="true"
+        :data="list"
+        class="table-list"
+        ref="table-list"
+      >
+        <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
+        <div slot-scope="{ headerItem }" slot="header">
+          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`) }}
         </div>
         <!-- 内容各单元格 -->
-        <!-- item：传给组件的data里各元素，对应单元格所在行（hasAuth都写成false）；data：item里各元素，对应每个单元格；sub：表头数据各元素，即单元各所属列的表头数据 -->
-        <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
+        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
           <!-- 操作型单元格 -->
-          <div class="handle" v-if="sub.canclick">
+          <div class="handle" v-if="headerItem.canclick">
             <i class="iconfont icon-material_operation_image hover-tips"
-              @click="(showCover = true), (popupItem = item)">
+              @click="(showCover = true), (popupItem = lineData)">
               <div>
                 <div class="remark">{{ edit_cover }}</div>
               </div>
             </i>
 
             <i class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = item)">
+              @click="(showRename = true), (popupItem = lineData)">
               <div>
                 <div class="remark">{{ rename }}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(item)">
+            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
               <div>
                 <div class="remark">{{ deltips }}</div>
               </div>
@@ -68,44 +76,44 @@
           </div>
           <!-- 图片型单元格 -->
           <div
-            v-else-if="sub.type == 'image' && item.type !== 'dir'"
+            v-else-if="headerItem.type == 'image' && lineData.type !== 'dir'"
             class="img"
-            @click="previewImage(item)"
+            @click="previewImage(lineData)"
           >
-            <img :src="data + (Number(item.fileSize) > 512 ? $imgsuffix : '')"
+            <img :src="itemData + (Number(lineData.fileSize) > 512 ? $imgsuffix : '')"
               alt="" />
           </div>
           <div
-            v-else-if="sub.type == 'image' && item.type === 'dir'"
+            v-else-if="headerItem.type == 'image' && lineData.type === 'dir'"
             class="img dir"
           >
             <img
               :src="require('@/assets/images/icons/folder-blue.png')"
               alt=""
-              @click="onClickFolder(item)"
+              @click="onClickFolder(lineData)"
             />
           </div>
           <span
-            v-else-if="sub.key == 'name' && item.type !== 'dir'"
+            v-else-if="headerItem.key == 'name' && lineData.type !== 'dir'"
             class="textItem"
             style="cursor: pointer;"
-            @click="previewImage(item)"
+            @click="previewImage(lineData)"
           >
-            {{ data || "-" }}
+            {{ itemData || "-" }}
           </span>
           <span
-            v-else-if="sub.key === 'name' && item.type === 'dir'"
+            v-else-if="headerItem.key === 'name' && lineData.type === 'dir'"
             class="textItem dirName"
-            @click="onClickFolder(item)"
+            @click="onClickFolder(lineData)"
           >
-            {{ data || "-" }}
+            {{ itemData || "-" }}
           </span>
           <!-- 文字型单元格 -->
           <span
             v-else
             class="textItem"
           >
-            {{ data || "-" }}
+            {{ itemData || "-" }}
           </span>
         </div>
       </tableList>
@@ -343,8 +351,6 @@ export default {
                   (data) => {
                     const newData = data.data.list.map((i) => {
                       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.splice(index, 1, newData[0])
@@ -420,8 +426,6 @@ export default {
                   this.list.splice(index, 1)
                   const newData = data.data.list.map((i) => {
                     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)
@@ -571,8 +575,6 @@ export default {
             if (i.type !== 'dir') {
               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)

packages/qjkankan-editor/src/views/material/video/index.vue

@@ -57,59 +57,61 @@
         :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
-        :selection="false"
+        :selection="true"
         :data="list"
         class="table-list"
         ref="table-list"
       >
-        <div slot-scope="{ data }" slot="header">
-          {{ data.name && $i18n.t(`zh_key.${data.name}`)  }}
+        <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
+        <div slot-scope="{ headerItem }" slot="header">
+          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`)  }}
         </div>
-        <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
-          <div class="handle" v-if="sub.canclick">
+        <!-- 内容各单元格 -->
+        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
+          <div class="handle" v-if="headerItem.canclick">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
-              @click="(showRename = true), (popupItem = item)"
+              @click="(showRename = true), (popupItem = lineData)"
             >
               <div>
                 <div class="remark">{{rename}}</div>
               </div>
             </i>
-            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(item)">
+            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
               <div>
                 <div class="remark">{{deltips}}</div>
               </div>
             </i>
           </div>
           <div
-            v-else-if="sub.type == 'image' && item.type !== 'dir'"
+            v-else-if="headerItem.type == 'image' && lineData.type !== 'dir'"
             class="img"
-            @click="previewVedio(item)"
+            @click="previewVedio(lineData)"
           >
             <div class="video-icon-mask">
               <i class="iconfont icon-editor_play" />
             </div>
-            <img :src="`${data}` || $thumb" alt="" />
+            <img :src="`${itemData}` || $thumb" alt="" />
           </div>
           <div
-            v-else-if="sub.type == 'image' && item.type === 'dir'"
+            v-else-if="headerItem.type == 'image' && lineData.type === 'dir'"
             class="img dir"
           >
             <img
               :src="require('@/assets/images/icons/folder-blue.png')"
               alt=""
-              @click="onClickFolder(item)"
+              @click="onClickFolder(lineData)"
             />
           </div>
           <span
             v-else
             class="textItem"
             :class="{
-              dirName: sub.key === 'name' && item.type === 'dir'
+              dirName: headerItem.key === 'name' && lineData.type === 'dir'
             }"
-            @click="(sub.key === 'name' && item.type === 'dir') ? onClickFolder(item): null"
+            @click="(headerItem.key === 'name' && lineData.type === 'dir') ? onClickFolder(lineData): null"
           >
-            {{ data || "-" }}
+            {{ itemData || "-" }}
           </span>
         </div>
       </tableList>
@@ -307,8 +309,6 @@ export default {
                   const newData = data.data.list.map((i) => {
                     i.fileSize = changeByteUnit(Number(i.fileSize));
                     i.icon = i.ossPath + this.$videoImg;
-                    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)
@@ -424,8 +424,6 @@ export default {
               i.fileSize = changeByteUnit(Number(i.fileSize));
             }
             i.icon = process.env.VUE_APP_ORIGIN=='aws'?i.icon:(i.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_89,h_50,m_fast,ar_auto');
-            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)