修改：提取文件选择组件

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 v-if="fileImg.size" type="primary" @click="sureSava">保存头像</el-button>
-            <el-button @click="selectImg">重新选择</el-button>
+<!--            <el-button @click="uploadImg">{{avatar.length === 0?'选择头像':'重新选择'}}</el-button>-->
-            <input ref="selectImg" type="file" style="display: none;" accept="image/*" @change="changImg"></input>
+            <el-button @click="selectImg">选择头像</el-button>
           </div>
         </div>
-        <el-divider direction="vertical"></el-divider>
+        <el-divider v-show="avatar.length > 0 || fileImg.size" direction="vertical"></el-divider>
-        <div class="avatar-preview">
+        <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,
+        sourceImg: '',
-        fileImg: '',
+        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) {
+      changImg(file) {
-        if(e.target.files[0].size/1024/1024 > 2){
-          this.$message({
-            message: '选择的图片不能超过2M',
-            type: 'warning'
-          });
-          return
-        }
         this.loading = true
         const that = this
         let reader = new FileReader();
-        this.fileImg = e.target.files[0]
+        reader.readAsDataURL(file);
-        reader.readAsDataURL( this.fileImg);
+        reader.onload = function(){
-        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>

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>

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() {
+    containerResize(ddd) {
-      let clientWidth = document.querySelector(".dashboard-container").clientWidth
+      const container = document.querySelector(".dashboard-container")
-      this.gridColumnNum = clientWidth / 120 - 2
+      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>
 

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')

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <show-file
-      :defaultGrid="false"
+      :defaultGrid="true"
       :orderCustom="true"
       :contextMenus="contextMenus"
       :sortable="sortable">

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>
+        <div style="height: 100px; width: 100px;">
-        <el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogAvatar=true"> 修改头像 </el-avatar>
+          <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-form-item label="用户名">
-        <!--<el-input readonly="readonly" v-model="cusomerInfoForm.username" />-->
+        <el-input readonly="readonly" v-model="cusomerInfoForm.username" />
-      <!--</el-form-item>-->
+      </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>