From 88ade6d799cbff96349953c8fcdec039260707b3 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 30 Dec 2020 18:01:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=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/components/Cropper/dialog.vue           | 96 +++++++++------------
 src/components/ShowFile/SelectFile.vue      | 88 ++++++++++++++++---
 src/components/ShowFile/ShowFile.vue        | 61 ++++++++++---
 src/components/preview/ImageViewer.vue      |  2 +-
 src/styles/home-index.scss                  | 14 ++-
 src/views/setting/user/tabs/cusomerInfo.vue | 65 +++++++++++---
 6 files changed, 230 insertions(+), 96 deletions(-)

diff --git a/src/components/Cropper/dialog.vue b/src/components/Cropper/dialog.vue
index c200eac..620a474 100644
--- a/src/components/Cropper/dialog.vue
+++ b/src/components/Cropper/dialog.vue
@@ -1,27 +1,17 @@
 <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" v-show="avatar.length > 0 || fileImg.size">
+          <div class="img-region">
             <img :src="sourceImg" ref="image" style="max-width: 100%;" alt="">
           </div>
           <div class="button-region">
-            <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>
+            <el-button type="primary" @click="sureSava">保存头像</el-button>
+            <el-button v-show="selectImg.id" type="primary" @click="noCropSave(selectImg.id)">不剪裁保存</el-button>
           </div>
         </div>
-        <el-divider v-show="avatar.length > 0 || fileImg.size" direction="vertical"></el-divider>
-        <div v-show="avatar.length > 0 || fileImg.size" class="avatar-preview">
+        <el-divider direction="vertical"></el-divider>
+        <div class="avatar-preview">
           <h3>头像预览</h3>
           <div class="before big"></div>
           <span>大头像100*100</span>
@@ -35,19 +25,19 @@
 <script>
   import "@/assets/css/cropper.css"
   import Cropper from 'cropperjs'
-  import SelectFile from "@/components/ShowFile/SelectFile";
+  import fileConfig from "@/utils/file-config";
 
   export default {
     name: 'CropperDialog',
-    components: {SelectFile},
+    components: {},
     props: {
       fileImg: {
-        type: File,
-        default: null
+        type: Blob,
+        default: {}
       },
-      dialogVisible: {
-        type: Boolean,
-        default: false
+      selectImg: {
+        type: Object,
+        default: {}
       },
       avatar: {
         type: String,
@@ -58,32 +48,18 @@
       return {
         loading: true,
         cropper: null,
-        sourceImg: '',
-        dialogSelectFile: false
+        sourceImg: ''
       }
     },
     mounted() {
       this.$nextTick(()=>{
         this.initCropper()
         this.loading = false
-        this.changeDialog(this.dialogVisible)
         this.changImg(this.fileImg)
+        this.setSelectImg(this.selectImg)
       })
     },
-    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,
@@ -113,20 +89,30 @@
           // autoCropArea: 0.6,
         });
       },
-      selectImg() {
-        this.dialogSelectFile = true
-      },
-      changImg(file) {
-        this.loading = true
-        const that = this
-        let reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = function(){
-          that.cropper.replace(reader.result)
-          that.loading = false
+      setSelectImg(selectImg) {
+        if(selectImg.id){
+          this.loading = true
+          this.cropper.reset()
+          let url = fileConfig.previewUrl(this.$store.state.user.name, selectImg) + '?o=crop&w=1024'
+          this.sourceImg = url
+          this.cropper.replace(url)
+          this.loading = false
         }
       },
-      sureSava(){
+      changImg(file) {
+        if(file.size > 0){
+          this.loading = true
+          this.cropper.reset()
+          const that = this
+          let reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = function(){
+            that.cropper.replace(reader.result)
+            that.loading = false
+          }
+        }
+      },
+      sureSava() {
         let cro = this.cropper.getCroppedCanvas({
           maxWidth: 1204 ,
           maxHeight: 1024,
@@ -138,6 +124,10 @@
         cro.toBlob((blob)=>{
           this.$emit('croppedCanvas', dataURL, blob)
         })
+      },
+      // 不剪裁保存
+      noCropSave(fileId) {
+        this.$emit('noCropSave', fileId)
       }
     },
   }
@@ -202,10 +192,4 @@
      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
index 39a1c47..13a4674 100644
--- a/src/components/ShowFile/SelectFile.vue
+++ b/src/components/ShowFile/SelectFile.vue
@@ -1,16 +1,32 @@
 <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>
+    <el-dialog
+      class="select-file-dialog"
+      :title="title"
+      :visible.sync="dialogVisible"
+      top="7.5vh"
+      width="70%"
+      :append-to-body="true"
+      @close="handleClose"
+    >
+      <show-file
+        select-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"
+        @selectedFile="selectedFile"
+      >
+      </show-file>
+      <div slot="footer" class="dialog-footer">
+        <el-button :disabled="!selectedFileRow.size" type="primary" @click="select">选择</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -19,18 +35,64 @@ import ShowFile from "@/components/ShowFile/ShowFile";
 
 export default {
   name: 'SelectFile',
-  components: {ShowFile},
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '选择文件'
+    }
+  },
+  components: { ShowFile },
   data() {
     return {
+      dialogVisible: false,
       sortable: {
         prop: 'updateDate', order: 'descending'
       },
+      selectedFileRow: {},
       lessClientHeight: document.body.clientHeight * 0.15 + 150
     }
   },
+  watch: {
+    visible: function(vlaue) {
+      if(vlaue){
+        this.dialogVisible = true
+      }
+    },
+  },
+  methods: {
+    selectedFile(row){
+      this.selectedFileRow = row
+    },
+    select(){
+      this.handleClose()
+      this.$emit("select", this.selectedFileRow)
+    },
+    handleClose() {
+      this.dialogVisible = false
+      this.$emit('update:visible', this.dialogVisible)
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.select-file-dialog {
+  >>>.el-dialog__body {
+    padding: 0;
+  }
+  >>>.el-dialog__header {
+    padding: 16px 20px 10px;
+  }
+  >>>.el-dialog__footer {
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
+    padding: 0px 20px 20px;
+    background: linear-gradient(rgba(255,255,255,0), #fff);
+  }
+}
 </style>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 96ef575..4618370 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -185,7 +185,7 @@
           <template v-for="(item,index) in tableHead">
             <!--索引-->
             <pl-table-column
-              v-if="index === 0"
+              v-if="index === 0 && !selectFile"
               :key="index"
               :index="index"
               type="selection"
@@ -313,7 +313,7 @@
              element-loading-text="文件加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="#f6f7fa88">
-          <div class="checkbox-group-header">
+          <div class="checkbox-group-header" v-show="!selectFile">
             <div class="select-operation">
               <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked">
                 {{ selectRowData.length > 0 ? '已选择 ' + this.tableHead[2].label : "选择" }}
@@ -347,25 +347,32 @@
                 <div
                   class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
                   :style="{
-                  'background': queryFileType === 'image' ? selectRowData.includes(item)?'#caeaf991':'url('+imageUrl+item.id+')' : selectRowData.includes(item)?'#caeaf991':'',
+                  'background': queryFileType === 'image' ? 'url('+imageUrl+item.id+')' : selectRowData.includes(item)?'#caeaf991':'',
                   'background-size': 'cover',
                   'background-position': 'center',
-                  'border': selectRowData.includes(item)?'solid 1px #7bd7ff':'',
+                  'border': selectRowData.includes(item)?'solid 1px #409eff':'',
                   }"
                   @mouseover="gridItemHover(item,index)"
                   @mouseout="gridItemOut(item,index)"
                   @click="gridItemClick(item)"
                   @contextmenu.prevent="rowContextmenu(item)"
                 >
-                  <van-checkbox v-if="gridHoverItemIndex === index || selectRowData.includes(item)"
+                  <van-checkbox v-show="!selectFile" v-if="gridHoverItemIndex === index || selectRowData.includes(item)"
                                 class="grid-item-checkbox" :name="item"
                                 @click.stop="clickGridItemCheckBox(item,index)"/>
-                  <div class="grid-item-icon">
-                    <icon-file :style="{'display': gridHoverItemIndex === index || selectRowData.includes(item) || queryFileType !== 'image' ? 'block': 'none'}" :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
+                  <div :class="{'grid-item-icon':true, 'grid-item-icon-image': queryFileType === 'image' ? gridHoverItemIndex === index || selectRowData.includes(item) : false}">
+                    <icon-file v-show="queryFileType !== 'image'" :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
                                :grid="true"></icon-file>
                   </div>
                   <!--<el-tooltip effect="light" :content="item.name" placement="top">-->
-                  <span :title="item.name" class="grid-item-text">{{ item.name }}</span>
+<!--                  <div v-if="queryFileType === 'image'" :class="{'grid-item-text': true, 'grid-item-text-image': queryFileType === 'image'}">{{ item.name }}>-->
+<!--                    {{ item.w + ' x ' + item.h }}-->
+<!--                  </div>-->
+                  <div
+                    :title="item.name"
+                    v-show="queryFileType === 'image' ? gridHoverItemIndex === index || selectRowData.includes(item) : true"
+                    :class="{'grid-item-text': true, 'grid-item-text-image': queryFileType === 'image'}">{{ item.name }}
+                  </div>
                   <!--</el-tooltip>-->
                 </div>
               </van-grid-item>
@@ -403,6 +410,9 @@
         <el-form-item label="类型:" class="details-name">
           <span>{{ rowContextData.isFolder ? '文件夹' : rowContextData.contentType }}</span>
         </el-form-item>
+        <el-form-item v-show="rowContextData.w && rowContextData.h" label="分辨率:" class="details-resolution">
+          <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
+        </el-form-item>
         <el-form-item label="大小:">
           <span> {{ rowContextData.size }}字节 {{ rowContextData.size > 0 ? '(' + formatSize(rowContextData.size) + ')' : '' }}</span>
         </el-form-item>
@@ -555,6 +565,10 @@ export default {
     FileTree
   },
   props: {
+    selectFile: {
+      type: Boolean,
+      defalut: false
+    },
     lessClientHeight: {
       type: Number,
       default: 136,
@@ -1006,10 +1020,9 @@ export default {
     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)
+        this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 5) : Math.round(clientWidth / 100 - 4)
       } else {
         this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 3) : Math.round(clientWidth / 100 - 2)
       }
@@ -1027,6 +1040,9 @@ export default {
     },
     // 画矩形选区
     darwRectangle() {
+      if(this.selectFile){
+        return
+      }
       const _this = this
       let $$ = function (id) {
         return document.getElementById(id)
@@ -1171,6 +1187,9 @@ export default {
     },
     // 行拖拽
     rowDrop() {
+      if(this.selectFile){
+        return
+      }
       if (this.fileListScrollTop > 0 && this.$route.path !== '/') {
         return
       }
@@ -2078,13 +2097,16 @@ export default {
     },
     // 单元格点击事件
     cellClick(row, column) {
+      if(this.selectFile){
+        this.fileClick(row)
+        return
+      }
       clearTimeout(this.Loop);
       if (this.editingIndex === -1) {
         const columnIndex = column.index
         if (columnIndex === 2) {
           if (this.selectRowData.length < 1) {
             if (row.index !== this.editingIndex) {
-              // this.fileClick(row)
               this.editingIndex = -1
             }
           }
@@ -2203,6 +2225,9 @@ export default {
     },
     // 鼠标右击
     rowContextmenu(row) {
+      if(this.selectFile){
+        return
+      }
       if (this.$refs.fileListTable.tableSelectData.length > 1 && this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === row.index) > -1) {
         this.menusIsMultiple = true
         this.menus = this.multipleRightMenus
@@ -2847,6 +2872,20 @@ export default {
           this.openDir(row)
         }
       } else {
+        if (this.selectFile){
+          let selectFile = row
+          const selectData = this.$refs.fileListTable.tableSelectData
+          if(selectData.length < 1 || selectData[0].id !== row.id){
+            this.$refs.fileListTable.clearSelection()
+            this.$refs.fileListTable.toggleRowSelection([{row: row}])
+            this.pinSelect(null, row)
+          } else {
+            this.$refs.fileListTable.clearSelection()
+            selectFile = {}
+          }
+          this.$emit("selectedFile", selectFile)
+          return
+        }
         if (row.contentType.indexOf('image') > -1) {
           // 图片
           this.imagePreviewVisible = true
diff --git a/src/components/preview/ImageViewer.vue b/src/components/preview/ImageViewer.vue
index 08096e3..87f5604 100644
--- a/src/components/preview/ImageViewer.vue
+++ b/src/components/preview/ImageViewer.vue
@@ -85,7 +85,7 @@
         if(visible){
           this.images = []
           let viewIndex = 0
-          this.fileList.forEach(element => {
+          this.fileList.forEach((element,index) => {
             if(!element.isFolder && element.contentType.indexOf('image') > -1){
               let url = fileConfig.previewUrl(this.$store.state.user.name, element)
               if(this.shareId){
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index dc0da24..6718272 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -293,6 +293,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/deep/ .grid-item-text-image {
+  position: absolute;
+  top: 80%;
+  color: #ffffff;
+}
 /deep/ .grid-item-text:hover {
   color: #19ACF9;
 }
@@ -312,9 +317,16 @@
     width: 84px;
     height: 84px;
   }
+  .grid-item-icon-image {
+    width: calc(100% + 16px);
+    height: 100%;
+    border-radius: 10px;
+    margin: 0;
+    backdrop-filter: contrast(0.5);
+  }
 }
 /deep/ .grid-time:hover {
-  background: #caeaf991!important;
+  border: solid 1px #409eff;
   cursor: pointer;
 }
  .checkbox-group-header {
diff --git a/src/views/setting/user/tabs/cusomerInfo.vue b/src/views/setting/user/tabs/cusomerInfo.vue
index 275b616..fded6e4 100644
--- a/src/views/setting/user/tabs/cusomerInfo.vue
+++ b/src/views/setting/user/tabs/cusomerInfo.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="container" v-wechat-title="title">
-    <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar">
-      <cropper-dialog ref="cropperDialog" :file-img="fileImg" :avatar="userInfo.avatar" :dialog-visible.sync="dialogAvatar" @croppedCanvas="saveAvatar"></cropper-dialog>
+    <select-file title="选择头像" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
+    <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar" @close="handleCloseDialogAvatar">
+      <cropper-dialog
+        ref="cropperDialog"
+        :file-img="fileImg"
+        :select-img="selectedImgRow"
+        :avatar="userInfo.avatar"
+        @noCropSave="saveNoCropAvatar"
+        @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">
@@ -26,7 +34,8 @@
           <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>
+          <el-button title="选择文件" type="primary" icon="el-icon-folder" circle @click="selectImg"></el-button>
+          <el-button title="上传" 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>-->
@@ -60,11 +69,13 @@
   import { getInfo, userUpdate, validOldPass, updatePass} from '@/api/user'
   import { formatSize } from '@/utils/number'
   import CropperDialog from '@/components/Cropper/dialog'
+  import SelectFile from "@/components/ShowFile/SelectFile"
+  import fileConfig from "@/utils/file-config";
 
   export default {
     name: 'cusomerInfo',
     components: {
-      CropperDialog
+      CropperDialog, SelectFile
     },
     props: {
     },
@@ -102,7 +113,8 @@
           checkPass: '',
         },
         srcImage: '',
-        fileImg: '',
+        fileImg: new Blob(),
+        selectedImgRow: {},
         rules: {
           oldPassword: [
             { required: true, message: '请输入旧密码', trigger: 'blur' },
@@ -117,7 +129,8 @@
           ],
         },
         validOldPass: false,
-        passwordFormTitle: '旧密码'
+        passwordFormTitle: '旧密码',
+        dialogSelectFile: false,
       }
     },
     computed: {
@@ -129,19 +142,35 @@
       uploadImg() {
         this.$refs.selectImg.click()
       },
+      selectImg() {
+        this.dialogSelectFile = true
+      },
+      selectedFile(row) {
+        this.dialogAvatar = true
+        this.selectedImgRow = row
+        if(this.$refs.cropperDialog){
+          this.$refs.cropperDialog.setSelectImg(this.selectedImgRow)
+        }
+      },
+      handleCloseDialogAvatar() {
+        this.$refs.selectImg.value = ''
+      },
       changImg(e) {
         const files = e.target.files
-        console.log(files)
-        if(files.length > 0 && files[0].size/1024/1024 > 2){
-          console.log('sdfsd')
+        if(files.length < 1){
+          return
+        }
+        if(files[0].size/1024/1024 > 5){
           this.$message({
-            message: '选择的图片不能超过2M',
+            message: '选择的图片不能超过5M',
             type: 'warning'
           });
           return
-          this.fileImg = files[0]
-          this.dialogAvatar = true
-          console.log(this.$refs.cropperDialog)
+        }
+        this.fileImg = files[0]
+        this.dialogAvatar = true
+        if(this.$refs.cropperDialog){
+          this.$refs.cropperDialog.changImg(files[0])
         }
       },
       getInfo(){
@@ -240,6 +269,14 @@
         data.append('blobAvatar',blob)
         this.userUpdate(data,dataURL)
       },
+      // 保存不剪裁的头像
+      saveNoCropAvatar(fileId) {
+        this.dialogAvatar = false
+        let data = new FormData();
+        data.append('id', this.$store.state.user.userId)
+        data.append('avatar', fileId)
+        this.userUpdate(data)
+      },
       // 修改用户信息操作
       userUpdate(data, dataURL){
         this.userUpdateLoading = true
@@ -250,7 +287,7 @@
             type: 'success',
             duration: 1000
           })
-          if(dataURL){
+          if(dataURL || res.data){
             this.srcImage = this.imageUrl + res.data
             this.$store.state.user.avatar = res.data
           }