lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改：提取文件选择组件

Browse Source
This commit is contained in:
jmal 2020-12-29 18:03:26 +08:00
parent 23cab73238
commit 380b39ae78
7 changed files with 193 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/default-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

75
src/components/Cropper/dialog.vue
View File

@ -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>

36
src/components/ShowFile/SelectFile.vue Normal file
View File

@ -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>

82
src/components/ShowFile/ShowFile.vue
View File

@ -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>

4
src/layout/components/Navbar.vue
View File

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

2
src/views/home/index.vue
View File

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

48
src/views/setting/user/tabs/cusomerInfo.vue
View File

@ -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>