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 { ...@@ -570,6 +570,9 @@ page {
.colorBA{ .colorBA{
color: #BABABA; color: #BABABA;
} }
.color959AA3{
color: #959AA3;
}
.text-right{ .text-right{
text-align: 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> <template>
<div class="CloudDisk-R-Center row"> <div class="CloudDisk-R-Center row">
<template v-for="(item,index) in dataList"> <template v-for="(item,index) in dataList">
<el-dropdown trigger="click"> <div style="position: relative;">
<div class="CloudDisk-R-Box cursor-pointer" :key="index"> <el-checkbox style="position: absolute;left: 30px;top: -3px;"
<div class="CloudDisk-R-Img"> class="fz14" label="" v-model="item.check"
<el-image :src="item.FilePath" style="width: 100%; height: 100%;" @change="handleSelectionChange(item)"/>
fit="cover"/> <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> </div>
<span class="title block"> <template #dropdown>
{{item.FileName}} <div class="cloudDownName microsoft">
</span> <div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId">
</div> <span class="grow">{{item.FileName}}</span>
<template #dropdown> <IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></IconPencli>
<div class="cloudDownName microsoft"> </div>
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId"> <div class="col row items-center" v-else>
<span class="grow">{{item.FileName}}</span> <el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" />
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></IconPencli> <el-button link size="small" class="q-ml-sm" type="primary" @click="setCloudNameHandler(item)"
</div> :loading="editLoading">确认</el-button>
<div class="col row items-center" v-else> <el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
<el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" /> </div>
<el-button link size="small" class="q-ml-sm" type="primary" @click="setCloudNameHandler(item)" </div>
:loading="editLoading">确认</el-button> <div class="cloudDownText row flex-between">
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button> <span>类型</span>
</div> <span>图片</span>
</div> </div>
<div class="cloudDownText row flex-between"> <div class="cloudDownText row flex-between">
<span>类型</span> <span>格式</span>
<span>图片</span> <span>{{item.ExtName}}</span>
</div> </div>
<div class="cloudDownText row flex-between"> <div class="cloudDownText row flex-between" v-if="item.WithHeight">
<span>格式</span> <span>尺寸</span>
<span>{{item.ExtName}}</span> <span>{{item.WithHeight}} px</span>
</div> </div>
<div class="cloudDownText row flex-between" v-if="item.WithHeight"> <div class="cloudDownText cloudDownTextLin row flex-between">
<span>尺寸</span> <span>大小</span>
<span>{{item.WithHeight}} px</span> <span>{{item.FileSize}} kb</span>
</div> </div>
<div class="cloudDownText cloudDownTextLin row flex-between"> <el-dropdown-menu class="q-pa-md microsoft">
<span>大小</span> <el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item>
<span>{{item.FileSize}} kb</span> <el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item>
</div> <el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item>
<el-dropdown-menu class="q-pa-md microsoft"> <el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item>
<el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item> </el-dropdown-menu>
<el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item> </template>
<el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item> </el-dropdown>
<el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item> </div>
</el-dropdown-menu>
</template>
</el-dropdown>
</template> </template>
</div> </div>
</template> </template>
...@@ -60,6 +66,10 @@ ...@@ -60,6 +66,10 @@
type: Array, type: Array,
default: [], default: [],
}, },
Parent:{
type: Object,
default: {},
}
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void, (event: 'close'): void,
...@@ -68,10 +78,24 @@ ...@@ -68,10 +78,24 @@
(event: 'MoveFile'): void, (event: 'MoveFile'): void,
(event: 'getImg'): void, (event: 'getImg'): void,
(event: 'deleteImg'): void, (event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>() }>()
const editorTarget = ref('') const editorTarget = ref('')
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
const editLoading = ref(false) 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)=>{ const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true editLoading.value = true
......
src/components/CloudDisk/list.vue
View file @ 1877f9a6
<template> <template>
<div class="CloudDisk-R-Center row"> <div class="CloudDisk-R-Center row" v-if="dataList.length>0">
<el-table :data="dataList" style="width: 100%"> <el-table :data="dataList" style="width: 100%;"
<el-table-column type="selection" width="55" /> ref="multipleTableRef">
<el-table-column label="Date" show-overflow-tooltip> <el-table-column type="selection" width="55"
@selection-change="handleSelectionChange"/>
<el-table-column label="基本信息" show-overflow-tooltip min-width="200">
<template #default="scope"> <template #default="scope">
<div class="row items-center"> <div class="row items-center">
<el-image class="rounded" :src="scope.row.FilePath" style="width: 85px; height: auto;" <el-image
fit="cover"/> class="cursor-pointer"
<span class="microsoft q-pl-md">{{scope.row.FileName}}</span> style="width: 50px; height: auto"
<!-- <div class="cloudDownName microsoft"> :src="scope.row.FilePath"
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId"> :zoom-rate="1.2"
<span class="grow">{{scope.row.FileName}}</span> :max-scale="7"
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(scope.row)"></IconPencli> :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>
<div class="col row items-center" v-else> <div class="col row items-center" v-else>
<el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" /> <el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" />
...@@ -19,22 +34,44 @@ ...@@ -19,22 +34,44 @@
:loading="editLoading">确认</el-button> :loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button> <el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="ExtName" label="格式" width="100" /> <el-table-column property="ExtName" label="格式" width="" />
<el-table-column label="尺寸" width="240"> <el-table-column label="尺寸" min-width="150">
<template #default="scope">{{ scope.row.WithHeight }} px</template> <template #default="scope">
<template v-if="scope.row.WithHeight">{{ scope.row.WithHeight }} px</template>
</template>
</el-table-column> </el-table-column>
<el-table-column label="大小" width="240"> <el-table-column label="大小" min-width="100">
<template #default="scope">{{ scope.row.FileSize }} kb</template> <template #default="scope">{{ scope.row.FileSize }} kb</template>
</el-table-column> </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> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, reactive } from "vue";
import CloudDiskService from "@/services/CloudDiskService"; import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios"; import { ApiResult } from "@/configs/axios";
const props = defineProps({ const props = defineProps({
...@@ -42,6 +79,10 @@ ...@@ -42,6 +79,10 @@
type: Array, type: Array,
default: [], default: [],
}, },
Parent:{
type: Object,
default: {},
}
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void, (event: 'close'): void,
...@@ -50,10 +91,17 @@ ...@@ -50,10 +91,17 @@
(event: 'MoveFile'): void, (event: 'MoveFile'): void,
(event: 'getImg'): void, (event: 'getImg'): void,
(event: 'deleteImg'): void, (event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>() }>()
const editorTarget = ref('') const editorTarget = ref('')
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
const editLoading = ref(false) 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)=>{ const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true editLoading.value = true
...@@ -63,6 +111,8 @@ ...@@ -63,6 +111,8 @@
} }
let dataRes = await CloudDiskService.UpdateCloudInfoName(params) let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
if (dataRes.data.resultCode==ApiResult.SUCCESS) { if (dataRes.data.resultCode==ApiResult.SUCCESS) {
editorTarget.value = ''
nickNam.value = ''
emit('refreshHandler') emit('refreshHandler')
} }
editLoading.value = false editLoading.value = false
...@@ -92,77 +142,25 @@ ...@@ -92,77 +142,25 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.CloudDisk-R-Center{ .editor-pencli{
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;
display: none; display: none;
} }
.CloudDisk-R-Box.active2:hover .close-btn{ .cloudDownNameH:hover .editor-pencli{
display: block; display: block;
} }
.CloudDisk-R-Img{ .CloudDisk-R-Center::v-deep(.el-table__body){
width: 85px; margin-top: 8px;
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;
} }
.cloudDownName{ .CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
min-width: 200px; background-color: #f5f7fa;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
} }
.cloudDownText{ .CloudDisk-R-Center::v-deep(.el-table__header-wrapper){
padding: 0 20px 10px 20px; position:fixed;
font-size: 14px; top: 180px;
z-index: 2
} }
.cloudDownTextLin{ .CloudDisk-R-Center{
border-bottom: 1px solid #F0F0F0; padding-left: 24px;
padding-bottom: 20px;
} }
</style> </style>
\ No newline at end of file
src/components/CloudDisk/waterfallFlowList.vue
View file @ 1877f9a6
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
(event: 'MoveFile'): void, (event: 'MoveFile'): void,
(event: 'getImg'): void, (event: 'getImg'): void,
(event: 'deleteImg'): void, (event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>() }>()
const editorTarget = ref('') const editorTarget = ref('')
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
...@@ -92,6 +93,12 @@ ...@@ -92,6 +93,12 @@
logo, logo,
error error
}) })
const multipleSelection = ref([] as any)
const handleSelectionChange = (row: any) =>{
multipleSelection.value.push(row.DetailsId)
emit('MultipleChoice',multipleSelection.value)
}
const setCloudNameHandler = async (target:any)=>{ const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true 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