调整管理-全景图片页结构

src/views/material/pano/index.vue

@@ -2,47 +2,56 @@
   <div class="panorama con">
     <div class="top">
       <crumbs :list="tablist" />
+      <!-- 志广加上的 -->
       <el-button type="primary" size="small">上传素材</el-button>
-      <div class="filter">
-          <div>
-            <i class="iconfont iconbs_search"></i>
-            <input
-              type="text"
-              placeholder="搜索全景作品"
-              v-model="searchKey"
-            >
-            <i v-if="searchKey" @click="searchKey=''" class="iconfont iconbs_close del"></i>
-          </div>
-        </div>
     </div>
-    <div class="btn">
-      <button
-        @mouseover.stop="showList = true"
-        @click="$refs.uploadFile.click()"
-        class="ui-button submit"
-      >
-        <span>上传素材</span><i class="iconfont iconbs_list_info"></i>
-        <upload
-          ref="uploadFile"
-          :failString="'格式错误，请上传2:1、120MB以内、jpg格式的全景图片'"
-          :limitFailStr="'过大，请上传2:1、120MB以内、jpg格式的全景图片'"
-          accept-type="image/jpeg"
-          media-type="image"
-          :limit="120"
-          @file-change="onFileChange"
-        ></upload>
-        <template v-if="showList">
-          <UploadList
-            @close="
-              () => {
-                showList = false;
-              }
-            "
-            :list="uploadList"
-            @del="delUploadItem"
+    <div class="second-line">
+      <div class="btn">
+        <button
+          @mouseover.stop="showList = true"
+          @click="$refs.uploadFile.click()"
+          class="ui-button submit"
+        >
+          <span>上传素材</span>
+          <tooltip class="tooltip" content="请上传2:1、120MB以内、jpg格式" placement="top-start" effect="light">
+            <i class="iconfont icon-material_prompt"></i>
+          </tooltip>
+          <upload
+            ref="uploadFile"
+            :failString="'格式错误，请上传2:1、120MB以内、jpg格式的全景图片'"
+            :limitFailStr="'过大，请上传2:1、120MB以内、jpg格式的全景图片'"
+            accept-type="image/jpeg"
+            media-type="image"
+            :limit="120"
+            @file-change="onFileChange"
+          ></upload>
+          <template v-if="showList">
+            <UploadList
+              @close="
+                () => {
+                  showList = false;
+                }
+              "
+              :list="uploadList"
+              @del="delUploadItem"
+            />
+          </template>
+        </button>
+      </div>
+      <div class="filter">
+        <div>
+          <i
+            @click="(paging.current = 1) && getMaterialList()"
+            class="iconfont icon-works_search"
+          ></i>
+          <input
+            type="text"
+            v-model="searchKey"
+            @keyup.enter="(paging.current = 1) && getMaterialList()"
+            placeholder="搜索文件夹或素材"
           />
-        </template>
-      </button>
+        </div>
+      </div>
     </div>
     <div class="list">
       <tableList
@@ -57,10 +66,14 @@
         :data="list"
         class="table-list"
       >
+        <!-- 表头 -->
         <div slot-scope="{ data }" slot="header">
           {{ data.name }}
         </div>
+        <!-- 内容各单元格 -->
+        <!-- item：传给组件的data里各元素，对应单元格所在行（hasAuth都写成false）；data：item里各元素，对应每个单元格；sub：表头数据各元素，即单元各所属列的表头数据 -->
         <div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
+          <!-- 操作型单元格 -->
           <div class="handle" v-if="sub.canclick">
             <i
               class="iconfont iconbs_list_cover hover-tips"
@@ -85,6 +98,7 @@
               </div>
             </i>
           </div>
+          <!-- 图片型单元格 -->
           <div
             class="img"
             v-else-if="sub.type == 'image'"
@@ -92,6 +106,7 @@
           >
             <img :src="data + `?${Math.random()}`" alt="" />
           </div>
+          <!-- 文字型单元格 -->
           <span
             v-else
             @click="
@@ -109,13 +124,6 @@
         }}</span>
       </div>
     </div>
-    <div class="paging">
-      <Paging
-        v-if="paging.total > 0"
-        :paging="paging"
-        @changeCurrent="changeCurrent"
-      />
-    </div>
 
     <uploadui/>
 
@@ -141,13 +149,12 @@
 </template>
 
 <script>
-import tableList from "@/components/table";
+import tableList from "@/components/table/index.vue";
 import crumbs from "@/components/crumbs/index.vue";
 import { data } from "./pano";
 import rename from "../popup/rename";
 import preview from "../popup/preview";
 import cover from "../popup/cover";
-import Paging from "../components/paging";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
 import UploadList from "../components/uploadList";
@@ -176,7 +183,6 @@ export default {
     crumbs,
     rename,
     cover,
-    Paging,
     preview,
     Upload,
     UploadList,