report time

src/components/file-way/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-center flex-justify-start">
+    <el-button text type="primary" size="mini" @click="goBefore"
+      >返回上一层
+    </el-button>
+    <el-divider direction="vertical" border-style="dashed" />
+    <el-button text type="primary" size="mini" @click="goHome"
+      >全部文件
+    </el-button>
+    <div v-if="data" class="flex flex-center">
+      <el-icon>
+        <ArrowRight />
+      </el-icon>
+      <el-button text type="primary" size="mini">{{ data.title }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    next: {
+      type: Object,
+      default: {
+        title: ''
+      }
+    }
+  },
+  watch: {
+    next: {
+      handler(val) {
+        const item = {
+          id: val.id,
+          title: val.title,
+          projectId: val.projectId,
+          stageId: val.stageId,
+          parentId: val.parentId,
+          type: val.type
+        }
+        const tmp = this.list.find(ele => ele.id === item.id)
+        if (tmp === undefined || tmp === null) {
+          console.log(item.type)
+          if (item.type === 2) {
+            this.data = item
+            this.list.push(item)
+          }
+        }
+      },
+      immediate: false
+    }
+  },
+  data() {
+    return {
+      list: [],
+      data: null
+    }
+  },
+  methods: {
+    goHome() {
+      this.list.length = 0
+      this.data = null
+      this.$emit('goHome')
+    },
+    goBefore() {
+      this.list.pop()
+      if (this.list.length > 0) {
+        this.data = this.list[this.list.length - 1]
+        this.$emit('before', this.data)
+      } else {
+        this.$emit('goHome')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/filepicker/index.vue

@@ -3,7 +3,7 @@
     <el-button type="primary" @click="show = true">文件上传</el-button>
     <el-dialog
       v-model="show"
-      width="1200"
+      width="1200px"
       :show-close="false"
       :close-on-click-modal="false"
       @close="onClose"
@@ -66,11 +66,18 @@
             <el-tab-pane label="合同" name="4"></el-tab-pane>
           </el-tabs>
           <div class="area">
-            <div
-              v-if="activeName === '2'"
-              class="full-width flex flex-center flex-justify-start ml-20"
-            ></div>
-            <div class="files">
+            <div class="full-width flex flex-center flex-justify-start ml-20">
+              <file-way
+                v-if="activeName === '2'"
+                :next="currentRow ? currentRow : ''"
+                @before="goBefore"
+                @goHome="getFolderList"
+              />
+              <div class="tips" v-else>
+                {{ tips }}
+              </div>
+            </div>
+            <div class="files full-height">
               <xtable
                 :data="list"
                 :option="option"
@@ -91,8 +98,8 @@
           <span class="bold">已选择 {{ selectedList.length }}/9 项</span>
           <div>
             <el-button type="primary" plain @click="show = false"
-              >取 消</el-button
-            >
+              >取 消
+            </el-button>
             <el-button type="primary">确 定</el-button>
           </div>
         </div>
@@ -104,10 +111,13 @@
 <script>
 import xtable from '@/views/resource/component/xtable.vue'
 import uploadFile from '@/components/upload-file/index.vue'
+import fileWay from '@/components/file-way/index.vue'
+
 export default {
   components: {
     xtable,
-    uploadFile
+    uploadFile,
+    fileWay
   },
   props: {
     projectId: {
@@ -146,6 +156,7 @@ export default {
       topFolder: true,
       show: false,
       activeName: '1',
+      tips: '最近15天内上传的文件',
       list: [],
       selectedList: [],
       isLatest: 0,
@@ -160,6 +171,7 @@ export default {
       option: {
         showMenu: false,
         showCheckBox: true,
+        height: 500,
         column: [
           {
             label: '名称',
@@ -184,6 +196,7 @@ export default {
       if (this.activeName === '1') {
         this.isLatest = 0
         this.dictKey = ''
+        this.tips = '最近15天内上传的文件'
         this.fetchData()
       } else if (this.activeName === '2') {
         this.isLatest = 0
@@ -240,7 +253,6 @@ export default {
      * @param row
      */
     getFileList(row) {
-      console.log(row)
       this.topFolder = false
       const item = {
         id: row.id,
@@ -283,6 +295,7 @@ export default {
     },
     rowClick(res) {
       this.currentRow = res
+      console.log(this.currentRow)
       const tmp = this.list.find(ele => ele.id === res.id)
       this.parentId = tmp.id
       if (tmp && tmp.type !== 2) {
@@ -311,6 +324,17 @@ export default {
       this.list.length = 0
       this.activeName = '1'
       this.parentId = ''
+    },
+
+    /**
+     * 返回上一级
+     */
+    goBefore(res) {
+      if (!this.topFolder) {
+        this.getFileList(res)
+      } else {
+        console.log('top')
+      }
     }
   }
 }
@@ -318,9 +342,17 @@ export default {
 
 <style lang="scss" scoped>
 .area {
-  height: 600px;
+  height: 630px;
   width: 88%;
 }
+
+.tips {
+  width: 100%;
+  height: 32px;
+  padding: 8px 5px;
+  background-color: bisque;
+}
+
 .files {
   overflow-y: scroll;
   padding: 0 10px;

src/components/upload-file.vue

@@ -22,8 +22,8 @@
       <div class="flex flex-col flex-justify-start full-width">
         <div class="flex flex-align-center flex-justify-start">
           <el-button slot="trigger" size="small" type="primary"
-            >选取文件</el-button
-          >
+            >选取文件
+          </el-button>
           <span class="ml-10"
             >共{{ tmpFileList.length }}个文件，上传速度:{{ speed }}</span
           >
@@ -63,8 +63,8 @@
     <div class="full-width flex flex-justify-end">
       <el-button plain size="small" @click="close">取消上传</el-button>
       <el-button size="small" type="primary" @click="submint"
-        >开始上传</el-button
-      >
+        >开始上传
+      </el-button>
     </div>
   </div>
 </template>
@@ -211,6 +211,7 @@ export default {
   :deep(.el-upload) {
     width: 100%;
   }
+
   .box {
     height: 300px;
     overflow-x: scroll;

src/components/upload-file/index.vue

@@ -10,6 +10,7 @@
         :accept="accept"
         :multiple="max > 1"
         :on-success="success"
+        :on-progress="progress"
         :show-file-list="false"
       >
         <el-button type="primary" icon="Plus">{{ btnText }}</el-button>
@@ -78,14 +79,6 @@ export default {
       default: ''
     }
   },
-  watch: {
-    fileList: {
-      handler(val) {
-        this.drawer = val.length !== 0
-      },
-      immediate: true
-    }
-  },
   data() {
     return {
       headers: {
@@ -101,12 +94,15 @@ export default {
   },
   methods: {
     bytesToSize,
+    progress(res) {
+      console.log(res)
+      this.drawer = true
+    },
     success(res) {
       if (res.code === 200) {
         this.resultList.push(res.data)
       }
       if (this.resultList.length === this.fileList.length) {
-        this.drawer = false
         this.saveFile()
       }
     },
@@ -137,6 +133,7 @@ export default {
 <style lang="scss" scoped>
 .upload {
   position: fixed;
+  z-index: 99;
   bottom: 0;
   right: 0;
   background-color: white;

src/views/resource/component/xtable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="full-height">
     <div class="flex flex-center flex-justify-between border-bottom">
       <div v-for="header in headers" :key="header.id" class="mt-20 full-width">
         <div
@@ -32,7 +32,7 @@
           >
             <div
               v-if="prop.label === '操作'"
-              class="nowrap menu flex flex-center light-blue-bg"
+              class="nowrap menu flex flex-center"
               style="width: 280px"
             >
               <el-button type="primary" size="small" text>查看</el-button>
@@ -60,7 +60,7 @@
         <div class="full-width flex flex-center flex-justify-end">
           <el-pagination
             layout="prev, pager, next"
-            class="mt-10"
+            class="mt-10 bottom"
             :total="total"
             @current-change="currentChange"
           />
@@ -182,4 +182,9 @@ export default {
   height: 45px;
   border-bottom: #f7f8fa solid 1px;
 }
+
+.bottom {
+  position: absolute;
+  bottom: 80px;
+}
 </style>

src/views/resource/index.vue

@@ -63,7 +63,9 @@
           :data="data"
           :option="top ? option : option2"
           :loading="loading"
+          :total="page.total"
           @row-click="getFileList"
+          @current-change="currentChange"
         >
         </xtable>
       </div>
@@ -158,7 +160,8 @@ export default {
       },
       page: {
         current: 1,
-        size: 10
+        size: 10,
+        total: 0
       },
       total: ''
     }
@@ -190,26 +193,31 @@ export default {
     getFolderList() {
       const data = {
         stageId: this.folderInfo.stageId,
-        dictKey: 1
+        dictKey: 1,
+        current: this.page.current,
+        size: this.page.size
       }
       this.loading = true
       this.top = true
-      this.$api.resource
-        .folderList(Object.assign(data, this.page))
-        .then(res => {
-          this.loading = false
-          if (res.code === 200) {
-            this.data = res.data.records
-            this.total = res.data.total
-          }
-        })
+      this.$api.resource.folderList(data).then(res => {
+        this.loading = false
+        if (res.code === 200) {
+          this.data = res.data.records
+          this.page.total = res.data.total
+          this.total = res.data.total
+        }
+      })
     },
     getFileList(row) {
       this.folderInfo = Object.assign(this.folderInfo, row)
       this.top = !this.top
-      const data = { id: row.id }
+      const data = {
+        id: row.id,
+        current: this.page.current,
+        size: this.page.size
+      }
       this.loading = true
-      this.$api.resource.fileList(Object.assign(data, this.page)).then(res => {
+      this.$api.resource.fileList(data).then(res => {
         this.loading = false
         if (res.code === 200) {
           this.data = res.data.records
@@ -239,11 +247,23 @@ export default {
         })
     },
     folderResult(res) {
+      this.loading = true
       this.stageId = res
       this.getFolderList()
     },
     uploadSuccess(files) {
       console.log('refresh')
+    },
+    refreshData() {
+      if (this.top) {
+        this.getFolderList()
+      } else {
+        this.getFileList()
+      }
+    },
+    currentChange(current) {
+      this.page.current = current
+      this.refreshData()
     }
   }
 }