From 380b39ae78dd6dcd82b78908f9bee459ba094484 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 29 Dec 2020 18:03:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/default-avatar.png           | Bin 0 -> 4732 bytes
 src/components/Cropper/dialog.vue           |  75 ++++++++++++------
 src/components/ShowFile/SelectFile.vue      |  36 +++++++++
 src/components/ShowFile/ShowFile.vue        |  82 +++++++++++++++-----
 src/layout/components/Navbar.vue            |   4 +-
 src/views/home/index.vue                    |   2 +-
 src/views/setting/user/tabs/cusomerInfo.vue |  48 ++++++++++--
 7 files changed, 193 insertions(+), 54 deletions(-)
 create mode 100644 src/assets/img/default-avatar.png
 create mode 100644 src/components/ShowFile/SelectFile.vue

diff --git a/src/assets/img/default-avatar.png b/src/assets/img/default-avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8a16eab8ccd80f55254b03a3649c80e0c5d7b6f
GIT binary patch
literal 4732
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
KMNUMnLSTaPK={l6

literal 0
HcmV?d00001

diff --git a/src/components/Cropper/dialog.vue b/src/components/Cropper/dialog.vue
index a9cdb40..c200eac 100644
--- a/src/components/Cropper/dialog.vue
+++ b/src/components/Cropper/dialog.vue
@@ -1,18 +1,27 @@
 <template>
     <div>
+      <el-dialog
+        title="选择头像"
+        :visible.sync="dialogSelectFile"
+        top="7.5vh"
+        width="70%"
+        :append-to-body="true"
+      >
+        <select-file></select-file>
+      </el-dialog>
       <div class="container">
         <div class="img-container" v-loading="loading">
-          <div class="img-region">
+          <div class="img-region" v-show="avatar.length > 0 || fileImg.size">
             <img :src="sourceImg" ref="image" style="max-width: 100%;" alt="">
           </div>
           <div class="button-region">
-            <el-button v-if="sourceImg.length > 0" type="primary" @click="sureSava">保存头像</el-button>
-            <el-button @click="selectImg">重新选择</el-button>
-            <input ref="selectImg" type="file" style="display: none;" accept="image/*" @change="changImg"></input>
+            <el-button v-if="fileImg.size" type="primary" @click="sureSava">保存头像</el-button>
+<!--            <el-button @click="uploadImg">{{avatar.length === 0?'选择头像':'重新选择'}}</el-button>-->
+            <el-button @click="selectImg">选择头像</el-button>
           </div>
         </div>
-        <el-divider direction="vertical"></el-divider>
-        <div class="avatar-preview">
+        <el-divider v-show="avatar.length > 0 || fileImg.size" direction="vertical"></el-divider>
+        <div v-show="avatar.length > 0 || fileImg.size" class="avatar-preview">
           <h3>头像预览</h3>
           <div class="before big"></div>
           <span>大头像100*100</span>
@@ -26,34 +35,55 @@
 <script>
   import "@/assets/css/cropper.css"
   import Cropper from 'cropperjs'
+  import SelectFile from "@/components/ShowFile/SelectFile";
 
   export default {
     name: 'CropperDialog',
+    components: {SelectFile},
     props: {
+      fileImg: {
+        type: File,
+        default: null
+      },
       dialogVisible: {
         type: Boolean,
         default: false
       },
-      src: {
+      avatar: {
         type: String,
-        default: ''
+        defalut: ''
       }
     },
     data () {
       return {
         loading: true,
         cropper: null,
-        sourceImg: this.src,
-        fileImg: '',
+        sourceImg: '',
+        dialogSelectFile: false
       }
     },
     mounted() {
       this.$nextTick(()=>{
         this.initCropper()
         this.loading = false
+        this.changeDialog(this.dialogVisible)
+        this.changImg(this.fileImg)
       })
     },
+    watch: {
+      dialogVisible(val) {
+        this.changeDialog(val)
+      }
+    },
     methods: {
+      changeDialog(value){
+        if(value){
+          if(this.avatar.length === 0){
+            // 没有任何头像，直接代开文件选择框
+            this.selectImg()
+          }
+        }
+      },
       initCropper(){
         this.cropper = new Cropper(this.$refs.image, {
           responsive: true,
@@ -84,26 +114,17 @@
         });
       },
       selectImg() {
-        this.$refs.selectImg.click()
+        this.dialogSelectFile = true
       },
-      changImg(e) {
-        if(e.target.files[0].size/1024/1024 > 2){
-          this.$message({
-            message: '选择的图片不能超过2M',
-            type: 'warning'
-          });
-          return
-        }
+      changImg(file) {
         this.loading = true
         const that = this
         let reader = new FileReader();
-        this.fileImg = e.target.files[0]
-        reader.readAsDataURL( this.fileImg);
-        reader.onload = function()
-        {
+        reader.readAsDataURL(file);
+        reader.onload = function(){
           that.cropper.replace(reader.result)
           that.loading = false
-        };
+        }
       },
       sureSava(){
         let cro = this.cropper.getCroppedCanvas({
@@ -181,4 +202,10 @@
      top: 0;
      margin-top: 0;
   }
+  >>>.el-dialog__body {
+    padding: 0;
+  }
+  >>>.el-dialog__header {
+    padding: 16px 20px 10px;
+  }
 </style>
diff --git a/src/components/ShowFile/SelectFile.vue b/src/components/ShowFile/SelectFile.vue
new file mode 100644
index 0000000..39a1c47
--- /dev/null
+++ b/src/components/ShowFile/SelectFile.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <show-file
+      query-file-type="image"
+      :defaultGrid="true"
+      :orderCustom="true"
+      :show-upload-button="false"
+      :show-search-button="false"
+      :show-more-item="false"
+      :show-share-item="false"
+      :less-client-height="lessClientHeight"
+      :sortable="sortable">
+    </show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+
+export default {
+  name: 'SelectFile',
+  components: {ShowFile},
+  data() {
+    return {
+      sortable: {
+        prop: 'updateDate', order: 'descending'
+      },
+      lessClientHeight: document.body.clientHeight * 0.15 + 150
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 28d9bda..96ef575 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -45,6 +45,7 @@
         <div class="search-content">
           <div class="searchClass">
             <el-popover
+              v-show="showUploadButton"
               v-model="isShowNewFolder"
               placement="bottom"
               trigger="hover"
@@ -98,7 +99,7 @@
                              style="margin-right: 5px"></button-upload>
             </el-popover>
 
-            <el-input placeholder="搜索" v-model="searchFileName" :clearable="true"
+            <el-input v-show="showSearchButton" placeholder="搜索" v-model="searchFileName" :clearable="true"
                       @keyup.enter.native="searchFile(searchFileName)">
               <el-button slot="prepend" @click="searchFile(searchFileName)">
                 <svg-icon icon-class="search" style="font-size: 22px"/>
@@ -149,7 +150,7 @@
 
       <!--list布局-->
       <!--<div v-show="!grid && fileList.length > 0" :style="{'width':'100%','height': clientHeight+'px'}">-->
-      <div v-show="fileList.length > 0" id="v-draw-rectangle" :style="{'width':'100%','height': clientHeight+'px'}">
+      <div v-show="fileList.length > 0" id="v-draw-rectangle" :style="{'width':'100%','height': clientHeight + 8 +'px'}">
         <pl-table
           ref="fileListTable"
           v-show="!grid"
@@ -242,7 +243,7 @@
               </template>
             </pl-table-column>
             <!--分享-->
-            <pl-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center"
+            <pl-table-column v-if="index === 3 && showShareItem" :key="index" width="50" :index="index" align="center"
                              header-align="center" tooltip-effect="dark">
               <template slot-scope="scope">
                 <el-tooltip v-if="scope.row.index === cellMouseIndex" class="item" effect="light" content="分享"
@@ -252,7 +253,7 @@
               </template>
             </pl-table-column>
             <!--更多-->
-            <pl-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label"
+            <pl-table-column v-if="index === 4 && showMoreItem" :key="index" width="50" :prop="item.name" :label="item.label"
                              :index="index" class="el-icon-more" align="center" header-align="center">
               <!-- 使用组件, 并传值到组件中 -->
               <template slot="header">
@@ -266,7 +267,7 @@
             </pl-table-column>
             <!--文件大小-->
             <pl-table-column
-              v-if="index === 5"
+              v-if="index === 5 && showSizeItem"
               :key="index"
               width="200"
               :prop="item.name"
@@ -284,7 +285,7 @@
             </pl-table-column>
             <!--修改时间-->
             <pl-table-column
-              v-if="index === 6"
+              v-if="index === 6 && showUpdateDateItem"
               :key="index"
               width="250"
               :prop="item.name"
@@ -345,7 +346,12 @@
               >
                 <div
                   class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
-                  :style="{'background': selectRowData.includes(item)?'#caeaf991':'','border': selectRowData.includes(item)?'solid 1px #7bd7ff':''}"
+                  :style="{
+                  'background': queryFileType === 'image' ? selectRowData.includes(item)?'#caeaf991':'url('+imageUrl+item.id+')' : selectRowData.includes(item)?'#caeaf991':'',
+                  'background-size': 'cover',
+                  'background-position': 'center',
+                  'border': selectRowData.includes(item)?'solid 1px #7bd7ff':'',
+                  }"
                   @mouseover="gridItemHover(item,index)"
                   @mouseout="gridItemOut(item,index)"
                   @click="gridItemClick(item)"
@@ -355,7 +361,7 @@
                                 class="grid-item-checkbox" :name="item"
                                 @click.stop="clickGridItemCheckBox(item,index)"/>
                   <div class="grid-item-icon">
-                    <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
+                    <icon-file :style="{'display': gridHoverItemIndex === index || selectRowData.includes(item) || queryFileType !== 'image' ? 'block': 'none'}" :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
                                :grid="true"></icon-file>
                   </div>
                   <!--<el-tooltip effect="light" :content="item.name" placement="top">-->
@@ -549,6 +555,26 @@ export default {
     FileTree
   },
   props: {
+    lessClientHeight: {
+      type: Number,
+      default: 136,
+    },
+    showUploadButton: {
+      type: Boolean,
+      default: true,
+    },
+    showSearchButton: {
+      type: Boolean,
+      default: true
+    },
+    showShareItem: {
+      type: Boolean,
+      default: true
+    },
+    showMoreItem: {
+      type: Boolean,
+      default: true
+    },
     isCollectView: {
       type: Boolean,
       default: false
@@ -761,6 +787,8 @@ export default {
       openingFile: '',
       openCompressionVisible: false,
       stompClient: undefined,//websocket订阅集合
+      showUpdateDateItem: true,// 列表模式下是否显示修改时间
+      showSizeItem: true,// 列表模式下是否显示文件大小
     }
   },
   computed: {
@@ -833,11 +861,6 @@ export default {
       }
     })
 
-    const that = this
-    window.onresize = function temp() {
-      that.clientHeight = document.documentElement.clientHeight - 136
-    }
-
     // 加载布局
     if (this.$route.query.vmode) {
       this.vmode = this.$route.query.vmode
@@ -847,7 +870,6 @@ export default {
         this.grid = true
       }
     }
-
     // 加载url上的path
     if (this.$route.query.path !== '/') {
       const path = decodeURI(this.$route.query.path)
@@ -981,9 +1003,26 @@ export default {
         this.fileClick(row)
       }
     },
-    containerResize() {
-      let clientWidth = document.querySelector(".dashboard-container").clientWidth
-      this.gridColumnNum = clientWidth / 120 - 2
+    containerResize(ddd) {
+      const container = document.querySelector(".dashboard-container")
+      let clientWidth = container.clientWidth
+      console.log('this.lessClientHeight', this.lessClientHeight)
+      this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
+      if(clientWidth > 1024){
+        this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 7) : Math.round(clientWidth / 100 - 4)
+      } else {
+        this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 3) : Math.round(clientWidth / 100 - 2)
+      }
+      if(clientWidth < 900){
+        this.showUpdateDateItem = false
+      } else {
+        this.showUpdateDateItem = true
+      }
+      if(clientWidth < 500){
+        this.showSizeItem = false
+      } else {
+        this.showSizeItem = true
+      }
       this.rowDrop()
     },
     // 画矩形选区
@@ -1689,7 +1728,7 @@ export default {
         this.finished = true;
       }
       this.tableLoading = false
-      this.clientHeight = document.documentElement.clientHeight - 136
+      this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
       this.listModeSearch = false
       this.pagination['total'] = res.count
       this.$nextTick(() => {
@@ -2879,7 +2918,8 @@ export default {
 /*white-space: nowrap;*/
 /*text-overflow: ellipsis;*/
 .dashboard-container {
-  min-width: 900px;
+  min-width: 498px;
+  height: 100%;
 }
 
 /deep/ .app-wrapper {
@@ -3033,5 +3073,9 @@ export default {
     }
   }
 }
+>>> .van-grid-item__content {
+  background-size: cover;
+  background-position: center;
+}
 </style>
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index a3b8367..86fe1af 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -18,7 +18,7 @@
       <div class="right-menu">
         <el-dropdown class="avatar-container" trigger="click">
           <div class="avatar-wrapper">
-            <el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
+            <el-avatar :src="avatar ? imageUrl + avatar : defaultAvatar" icon="el-icon-user-solid"></el-avatar>
             <i class="el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -56,6 +56,7 @@ export default {
       activeIndex: '1',
       imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
       username: this.$store.state.user.name,
+      defaultAvatar: require('../../assets/img/default-avatar.png')
     }
   },
   components: {
@@ -71,7 +72,6 @@ export default {
   },
   methods: {
     handleSelect(key, keyPath) {
-      console.log(key, keyPath);
     },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3dcc7b0..93b4cf9 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <show-file
-      :defaultGrid="false"
+      :defaultGrid="true"
       :orderCustom="true"
       :contextMenus="contextMenus"
       :sortable="sortable">
diff --git a/src/views/setting/user/tabs/cusomerInfo.vue b/src/views/setting/user/tabs/cusomerInfo.vue
index f7d2c0d..275b616 100644
--- a/src/views/setting/user/tabs/cusomerInfo.vue
+++ b/src/views/setting/user/tabs/cusomerInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container" v-wechat-title="title">
     <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar">
-      <cropper-dialog :src="srcImage" @croppedCanvas="saveAvatar"></cropper-dialog>
+      <cropper-dialog ref="cropperDialog" :file-img="fileImg" :avatar="userInfo.avatar" :dialog-visible.sync="dialogAvatar" @croppedCanvas="saveAvatar"></cropper-dialog>
     </el-dialog>
     <el-dialog class="dialog-cm" :title="passwordFormTitle" :visible.sync="dialogChangePassword">
       <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="120px">
@@ -22,15 +22,21 @@
     </el-dialog>
     <el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
       <el-form-item label="头像" class="form-item-avatar">
-        <el-avatar icon="el-icon-user-solid" class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
-        <el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogAvatar=true"> 修改头像 </el-avatar>
+        <div style="height: 100px; width: 100px;">
+          <el-avatar icon="el-icon-user-solid" class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage"  ></el-avatar>
+        </div>
+        <div class="avatar-button">
+          <el-button type="primary" icon="el-icon-upload2" circle @click="uploadImg"></el-button>
+          <input ref="selectImg" type="file" style="display: none;" accept="image/*" @change="changImg"></input>
+        </div>
+<!--        <el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogAvatar=true"> 修改头像 </el-avatar>-->
       </el-form-item>
       <el-form-item label="密码">
         <el-button size="mini" round @click="changePassword">修改密码</el-button>
       </el-form-item>
-      <!--<el-form-item label="用户名">-->
-        <!--<el-input readonly="readonly" v-model="cusomerInfoForm.username" />-->
-      <!--</el-form-item>-->
+      <el-form-item label="用户名">
+        <el-input readonly="readonly" v-model="cusomerInfoForm.username" />
+      </el-form-item>
       <el-form-item label="昵称">
         <el-input v-model="cusomerInfoForm.showName" />
       </el-form-item>
@@ -96,6 +102,7 @@
           checkPass: '',
         },
         srcImage: '',
+        fileImg: '',
         rules: {
           oldPassword: [
             { required: true, message: '请输入旧密码', trigger: 'blur' },
@@ -119,6 +126,24 @@
       this.getInfo()
     },
     methods: {
+      uploadImg() {
+        this.$refs.selectImg.click()
+      },
+      changImg(e) {
+        const files = e.target.files
+        console.log(files)
+        if(files.length > 0 && files[0].size/1024/1024 > 2){
+          console.log('sdfsd')
+          this.$message({
+            message: '选择的图片不能超过2M',
+            type: 'warning'
+          });
+          return
+          this.fileImg = files[0]
+          this.dialogAvatar = true
+          console.log(this.$refs.cropperDialog)
+        }
+      },
       getInfo(){
         getInfo({
           id: this.$store.state.user.userId,
@@ -130,7 +155,7 @@
           }
           await this.$nextTick()
           this.cusomerInfoForm = this.userInfo
-          this.srcImage = this.imageUrl + this.userInfo.avatar
+          this.srcImage = this.userInfo.avatar ? this.imageUrl + this.userInfo.avatar : require('../../../../assets/img/default-avatar.png')
         })
       },
       async changePassword() {
@@ -217,7 +242,6 @@
       },
       // 修改用户信息操作
       userUpdate(data, dataURL){
-        console.log('this.$store.state.user.avatar', this.$store.state.user.avatar)
         this.userUpdateLoading = true
         userUpdate(data).then((res) => {
           this.userUpdateLoading = false
@@ -249,4 +273,12 @@
     margin-left: 10px;
     color: #409eff;;
   }
+  >>>.form-item-avatar {
+    .el-form-item__content {
+      display: flex;
+      .avatar-button {
+        padding: 30px 12px;
+      }
+    }
+  }
 </style>