Skip to content

P
pptist
Commit 1877f9a6 authored by zhengke's avatar zhengke
Browse files
Options

云盘

parent 688fd7b6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 186 deletions
src/assets/styles/common.css
View file @ 1877f9a6
......@@ -570,6 +570,9 @@ page {
.colorBA{
color: #BABABA;
}
.color959AA3{
color: #959AA3;
}
.text-right{
text-align: right;
}
......
src/components/CloudDisk/CloudDiskList.vue
View file @ 1877f9a6
This diff is collapsed.
src/components/CloudDisk/cellList.vue
View file @ 1877f9a6
<template>
<div class="CloudDisk-R-Center row">
<template v-for="(item,index) in dataList">
<el-dropdown trigger="click">
<div class="CloudDisk-R-Box cursor-pointer" :key="index">
<div class="CloudDisk-R-Img">
<el-image :src="item.FilePath" style="width: 100%; height: 100%;"
fit="cover"/>
<div style="position: relative;">
<el-checkbox style="position: absolute;left: 30px;top: -3px;"
class="fz14" label="" v-model="item.check"
@change="handleSelectionChange(item)"/>
<el-dropdown trigger="click">
<div class="CloudDisk-R-Box cursor-pointer" :key="index">
<div class="CloudDisk-R-Img">
<el-image :src="item.FilePath" style="width: 100%; height: 100%;"
fit="cover"/>
</div>
<span class="title block">
{{item.FileName}}
</span>
</div>
<span class="title block">
{{item.FileName}}
</span>
</div>
<template #dropdown>
<div class="cloudDownName microsoft">
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId">
<span class="grow">{{item.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></IconPencli>
</div>
<div class="col row items-center" v-else>
<el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" />
<el-button link size="small" class="q-ml-sm" type="primary" @click="setCloudNameHandler(item)"
:loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
</div>
</div>
<div class="cloudDownText row flex-between">
<span>类型</span>
<span>图片</span>
</div>
<div class="cloudDownText row flex-between">
<span>格式</span>
<span>{{item.ExtName}}</span>
</div>
<div class="cloudDownText row flex-between" v-if="item.WithHeight">
<span>尺寸</span>
<span>{{item.WithHeight}} px</span>
</div>
<div class="cloudDownText cloudDownTextLin row flex-between">
<span>大小</span>
<span>{{item.FileSize}} kb</span>
</div>
<el-dropdown-menu class="q-pa-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item>
<el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item>
<el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<template #dropdown>
<div class="cloudDownName microsoft">
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId">
<span class="grow">{{item.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></IconPencli>
</div>
<div class="col row items-center" v-else>
<el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" />
<el-button link size="small" class="q-ml-sm" type="primary" @click="setCloudNameHandler(item)"
:loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
</div>
</div>
<div class="cloudDownText row flex-between">
<span>类型</span>
<span>图片</span>
</div>
<div class="cloudDownText row flex-between">
<span>格式</span>
<span>{{item.ExtName}}</span>
</div>
<div class="cloudDownText row flex-between" v-if="item.WithHeight">
<span>尺寸</span>
<span>{{item.WithHeight}} px</span>
</div>
<div class="cloudDownText cloudDownTextLin row flex-between">
<span>大小</span>
<span>{{item.FileSize}} kb</span>
</div>
<el-dropdown-menu class="q-pa-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item>
<el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item>
<el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</div>
</template>
......@@ -60,6 +66,10 @@
type: Array,
default: [],
},
Parent:{
type: Object,
default: {},
}
})
const emit = defineEmits<{
(event: 'close'): void,
......@@ -68,10 +78,24 @@
(event: 'MoveFile'): void,
(event: 'getImg'): void,
(event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>()
const editorTarget = ref('')
const nickNam = ref(''|| Number)
const editLoading = ref(false)
const multipleSelection = ref([] as any)
const handleSelectionChange = (row: any) =>{
let filter = props.Parent.SelectedDatas.filter(x=>x==row.DetailsId)
if(filter.length==0&&row.check) {
multipleSelection.value.push(row.DetailsId)
emit('MultipleChoice',multipleSelection.value)
}else {
let newFilter = props.Parent.SelectedDatas.filter(x=>x!=row.DetailsId)
multipleSelection.value = newFilter
emit('MultipleChoice',multipleSelection.value)
}
}
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true
......
src/components/CloudDisk/list.vue
View file @ 1877f9a6
<template>
<div class="CloudDisk-R-Center row">
<el-table :data="dataList" style="width: 100%">
<el-table-column type="selection" width="55" />
<el-table-column label="Date" show-overflow-tooltip>
<div class="CloudDisk-R-Center row" v-if="dataList.length>0">
<el-table :data="dataList" style="width: 100%;"
ref="multipleTableRef">
<el-table-column type="selection" width="55"
@selection-change="handleSelectionChange"/>
<el-table-column label="基本信息" show-overflow-tooltip min-width="200">
<template #default="scope">
<div class="row items-center">
<el-image class="rounded" :src="scope.row.FilePath" style="width: 85px; height: auto;"
fit="cover"/>
<span class="microsoft q-pl-md">{{scope.row.FileName}}</span>
<!-- <div class="cloudDownName microsoft">
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId">
<span class="grow">{{scope.row.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(scope.row)"></IconPencli>
<el-image
class="cursor-pointer"
style="width: 50px; height: auto"
:src="scope.row.FilePath"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[]"
:initial-index="4"
fit="contain"
@click="getImg(scope.row,scope.$index)"
>
<template #error>
<el-image :src="errImg"></el-image>
</template>
</el-image>
<div class="cloudDownName microsoft q-pl-md">
<div class="cloudDownNameH col row items-center cursor-pointer" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId">
<span class="grow">{{scope.row.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(scope.row)"></IconPencli>
</div>
<div class="col row items-center" v-else>
<el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" />
......@@ -19,22 +34,44 @@
:loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
</div>
</div> -->
</div>
</div>
</template>
</el-table-column>
<el-table-column property="ExtName" label="格式" width="100" />
<el-table-column label="尺寸" width="240">
<template #default="scope">{{ scope.row.WithHeight }} px</template>
<el-table-column property="ExtName" label="格式" width="" />
<el-table-column label="尺寸" min-width="150">
<template #default="scope">
<template v-if="scope.row.WithHeight">{{ scope.row.WithHeight }} px</template>
</template>
</el-table-column>
<el-table-column label="大小" width="240">
<el-table-column label="大小" min-width="100">
<template #default="scope">{{ scope.row.FileSize }} kb</template>
</el-table-column>
</el-table>
<el-table-column align="center" min-width="80">
<template #header>
<el-icon>
<IconSetting></IconSetting>
</el-icon>
</template>
<template #default="scope">
<el-dropdown trigger="click" >
<el-icon class="cursor-pointer" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo(scope.row)">复制到</el-dropdown-item>
<el-dropdown-item icon="Expand" @click="MoveFile(scope.row)">移动到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="deleteImg(scope.row)">删除</el-dropdown-item>
<el-dropdown-item icon="View" @click="getImg(scope.row,scope.$index)">查看</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, reactive } from "vue";
import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios";
const props = defineProps({
......@@ -42,6 +79,10 @@
type: Array,
default: [],
},
Parent:{
type: Object,
default: {},
}
})
const emit = defineEmits<{
(event: 'close'): void,
......@@ -50,10 +91,17 @@
(event: 'MoveFile'): void,
(event: 'getImg'): void,
(event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>()
const editorTarget = ref('')
const nickNam = ref(''|| Number)
const editLoading = ref(false)
const errImg = ref(require('@/assets/img/noImg.png') as any)
const multipleSelection = ref([] as any)
const handleSelectionChange = (val: []) =>{
multipleSelection.value = val.map(x=>{return x.DetailsId})
}
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true
......@@ -63,6 +111,8 @@
}
let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
if (dataRes.data.resultCode==ApiResult.SUCCESS) {
editorTarget.value = ''
nickNam.value = ''
emit('refreshHandler')
}
editLoading.value = false
......@@ -92,77 +142,25 @@
}
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
padding-left: 24px;
}
.CloudDisk-R-Box{
width: 87px;
margin-left: 24px;
margin-bottom: 24px;
position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
width: 85px;
height: 85px;
background: #8790F3;
box-shadow: 0px 0px 13px 0px #0D3EBC;
border-radius: 8px;
border-color:#3556F9;
}
.CloudDisk-R-Box .close-btn{
position: absolute;
top: -10px;
right: 0px;
width: 20px;
height: 20px;
line-height: 12px;
background: #fff;
border:1px solid #AFAFAF;
text-align: center;
color:#AFAFAF;
border-radius: 50%;
z-index: 3;
.editor-pencli{
display: none;
}
.CloudDisk-R-Box.active2:hover .close-btn{
.cloudDownNameH:hover .editor-pencli{
display: block;
}
.CloudDisk-R-Img{
width: 85px;
height: 85px;
margin-bottom: 9px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 13px 0px #eee;
border-radius: 8px;
border-color:#eee;
}
.CloudDisk-R-Img .el-image{
width: 85px;
}
.title{
width: 85px;
line-height: 17px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #000000;
.CloudDisk-R-Center::v-deep(.el-table__body){
margin-top: 8px;
}
.cloudDownName{
min-width: 200px;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
.CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
background-color: #f5f7fa;
}
.cloudDownText{
padding: 0 20px 10px 20px;
font-size: 14px;
.CloudDisk-R-Center::v-deep(.el-table__header-wrapper){
position:fixed;
top: 180px;
z-index: 2
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
.CloudDisk-R-Center{
padding-left: 24px;
padding-bottom: 20px;
}
</style>
\ No newline at end of file
src/components/CloudDisk/waterfallFlowList.vue
View file @ 1877f9a6
......@@ -84,6 +84,7 @@
(event: 'MoveFile'): void,
(event: 'getImg'): void,
(event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>()
const editorTarget = ref('')
const nickNam = ref(''|| Number)
......@@ -92,6 +93,12 @@
logo,
error
})
const multipleSelection = ref([] as any)
const handleSelectionChange = (row: any) =>{
multipleSelection.value.push(row.DetailsId)
emit('MultipleChoice',multipleSelection.value)
}
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment