Skip to content

P
pptist
Commit 688fd7b6 authored by zhengke's avatar zhengke
Browse files
Options

no message

parent 7a8ca892
Hide whitespace changes
Inline Side-by-side
Showing with 719 additions and 168 deletions
src/components/CloudDisk/CloudDiskList.vue
View file @ 688fd7b6
......@@ -94,16 +94,17 @@
</div>
</div>
<div class="CloudDisk-R grow">
<div class="CloudDisk-R-header row flex-between q-mb-md">
<div class="CloudDisk-R-header row flex-between q-mb-xs">
<div class="fz14 PingFangSC colorBA">
<span>模版</span>
<span class="q-pl-md">素材</span>
<span class="q-pr-lg figureTBOX cusor-pointer" v-for="(item,index) in figureType"
:class="[queryObj.imgType==item.ID?'active':'']"
@click="setDropdown(item,3)">{{item.Name}}</span>
</div>
<div>
<el-dropdown trigger="click" @visible-change="changeDrop(1)"
:class="[currentSearchType==1?'DiskRHActive':'']">
<el-button color="#EFEFEF">
<span>格式</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
<span>格式</span> <el-icon color="#9DA2AA" class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<div class="q-py-lg q-px-lg">
......@@ -127,20 +128,30 @@
</div>
</template>
</el-dropdown>
<el-dropdown trigger="click" @visible-change="changeDrop(2)"
:class="[currentSearchType==2?'DiskRHActive':'']">
:class="[currentSearchType==2?'DiskRHActive':'']" class="cusor-pointer">
<el-button color="#EFEFEF">
<span>添加时间</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
</template>
<span class="cusor-pointer">添加时间</span> <el-icon color="#9DA2AA" class="el-icon--right"><arrow-down /></el-icon>
<div class="CloudDisk-R-Date">
<el-date-picker
style="width: 95px;"
v-model="queryObj.date"
type="daterange"
start-placeholder=""
end-placeholder=""
value-format="YY-MM-DD"
ref="dropdownDade"
/>
</div>
</el-button>
</el-dropdown>
<el-dropdown trigger="click" @visible-change="changeDrop(3)"
@command="OpenDropdown"
:class="[currentSearchType==3?'DiskRHActive':'']"
ref="dropdownSort">
<el-button>
<el-icon color="#BABABA">
<el-icon color="#808791">
<IconSortOne></IconSortOne>
</el-icon>
</el-button>
......@@ -148,82 +159,70 @@
<el-dropdown-menu>
<template v-for="(item,index) in sortType">
<el-dropdown-item :command="item.ID" class="row flex-between"
:divided="index==5?true:false"
@click.stop="setSort(item,index)">
<span>{{item.Name}}</span>
:divided="index==4?true:false"
@click="setDropdown(item,1)">
<span style="width: 80px;">{{item.Name}}</span>
<IconCheck class="q-pl-lg" v-if="item.check"></IconCheck>
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" @visible-change="changeDrop(4)"
@command="OpenDropdown"
:class="[currentSearchType==4?'DiskRHActive':'']"
ref="dropdownLayout">
<el-button>
<el-icon color="#808791">
<IconGridFour v-if="queryObj.layout==1"/>
<IconWaterfallsH v-if="queryObj.layout==2"/>
<IconListCheckbox v-if="queryObj.layout==3"/>
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="(item,index) in layoutType">
<el-dropdown-item :command="item.ID" class="row flex-between"
@click="setDropdown(item,2)">
<div class="row items-center" style="width: 80px;">
<el-icon>
<IconGridFour v-if="item.ID==1"/>
<IconWaterfallsH v-if="item.ID==2"/>
<IconListCheckbox v-if="item.ID==3"/>
</el-icon>
<span>{{item.Name}}</span>
</div>
<IconCheck class="q-pl-lg" v-if="queryObj.layout==item.ID"></IconCheck>
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div ref="imgDiskRef" class="full-height" style="padding-top: 10px; overflow: auto;"
:style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'20px':'85px'}">
<div class="CloudDisk-R-Center row">
<!-- <FileInput @change="files => insertImageElement(files)">
<div class="CloudDisk-R-Box">
<div class="CloudDisk-R-Plus column items-center cusor-pointer">
<el-icon class="el-input__icon" size="30px" title="">
<Plus/>
</el-icon>
<span>添加图片</span>
</div>
</div>
</FileInput> -->
<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>
<span class="title block">
{{item.FileName}}
</span>
</div>
<template #dropdown>
<div class="cloudDownName microsoft">
<div class="col row items-center user-nickname" 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>
</div>
<cellList v-show="queryObj.layout==1" :dataList="dataList"
@refreshHandler="refreshHandler"
@CopyTo="CopyTo"
@MoveFile="MoveFile"
@getImg="getImg"
@deleteImg="deleteImg"
></cellList>
<waterfallFlowList v-show="queryObj.layout==2" :dataList="dataList"
@refreshHandler="refreshHandler"
@CopyTo="CopyTo"
@MoveFile="MoveFile"
@getImg="getImg"
@deleteImg="deleteImg"
></waterfallFlowList>
<list v-show="queryObj.layout==3" :dataList="dataList"
@refreshHandler="refreshHandler"
@CopyTo="CopyTo"
@MoveFile="MoveFile"
@getImg="getImg"
@deleteImg="deleteImg"
></list>
<div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg">
<!-- <img :src="noDataImg(2)" width="118" /> -->
</div>
......@@ -270,8 +269,8 @@
</template>
<script setup lang="ts">
import { ref, reactive, watch, inject, onMounted, PropType, nextTick, onBeforeUnmount } from "vue";
import { ElMessage,ElImage } from "element-plus";
import { ref, reactive, watch, provide, inject, onMounted, PropType, nextTick, onBeforeUnmount } from "vue";
import type { ElMessage,ElImage,DropdownInstance } from "element-plus";
import { ArrowLeft,CopyDocument } from "@element-plus/icons-vue";
import CloudDiskService from "@/services/CloudDiskService";
import { injectKeyTemplate } from "@/types/injectKey";
......@@ -284,6 +283,10 @@
import { useRouter } from "vue-router";
import AliyunUpload from '@/utils/upload/aliyun'
import cellList from './cellList'
import waterfallFlowList from './waterfallFlowList'
import list from './list'
const { token, userInfo } = storeToRefs(useUserStore())
const router = useRouter()
const currentRoute = router.currentRoute.value
......@@ -300,7 +303,11 @@
FileName: '',
total: 0,
type: '1',//稿定模版
Sorts: []
imgType: 1,//模版 素材
Sorts: [],//排序
layout: 3,//布局
date: '',//日期
})
if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
const loading = ref(false as any)
......@@ -330,7 +337,17 @@
const currentSearchType = ref(0)
const dropdownSort = ref()
const dropdownSort = ref<DropdownInstance>()
const dropdownLayout = ref<DropdownInstance>()
const dropdownDade = ref()
const defaultTime2: [Date, Date] = [
new Date(2000, 1, 1),
new Date(2000, 2, 1),
]
const figureType = ref([
{Name: '模版',ID:1},
{Name: '素材',ID:2},
])
const sortType = ref([
{Name: '添加时间',ID:1,check:false},
{Name: '修改时间',ID:2,check:false},
......@@ -339,18 +356,36 @@
{Name: '升序',ID:5,check:false},
{Name: '降序',ID:6,check:false},
])
const layoutType = ref([
{Name: '宫格',ID:1},
{Name: '瀑布流',ID:2},
{Name: '列表',ID:3},
])
const setSort = (item:any,index:Number) =>{
const OpenDropdown = () =>{
if(currentSearchType.value==3)dropdownSort.value.handleOpen()
if(currentSearchType.value==4)dropdownLayout.value.handleOpen()
}
const setDropdown = (item:any,type:Number) =>{
if(type==1){
item.check = !item.check
let newSortType = sortType.value.filter(x=>x.check)
queryObj.Sorts = newSortType.map(x=>{return x.ID})
}
if(type==2){
queryObj.layout = item.ID
}
if(type==3){
queryObj.imgType = item.ID
}
item.check = !item.check
let newSortType = sortType.value.filter(x=>x.check)
queryObj.Sorts = newSortType.map(x=>{return x.ID})
console.log(queryObj.Sorts,dropdownSort.value)
// if(dropdownSort.value)dropdownSort.value.hideOnClick = true
}
const changeDrop = (type:Number) =>{
if(currentSearchType.value==type) currentSearchType.value = 0
else currentSearchType.value = type
if(currentSearchType.value==2) {
dropdownDade.value.handleOpen()
}
}
const getImg = (item:any,index:Number) => {
currentImg.value = index
......@@ -629,6 +664,24 @@ onMounted(()=>{
})
</script>
<style lang="scss" scoped>
.CloudDisk-R-Date{
width: 0;
}
.CloudDisk-R-Date::v-deep(.el-scrollbar+.el-popper__arrow){
display: none;
}
.CloudDisk-R-Date::v-deep(.el-date-editor){
opacity: 0;
height: 0;
width: 0;
position: relative;
left: -100px;
top: 15px;
z-index: 0;
}
.figureTBOX.active{
color: #3556F9;
}
.CloudDisk-R-header {
padding: 0 0 0 20px;
}
......@@ -719,9 +772,7 @@ onMounted(()=>{
padding-bottom: 10px;
/* height: 36px; */
}
.CloudDisk-R-Center{
flex-wrap: wrap;
}
.CloudDisk-R-Plus{
width: 85px;
height: 85px;
......@@ -742,89 +793,15 @@ onMounted(()=>{
font-size: 14px;
// color: #CECECE;
}
.CloudDisk-R-Box{
width: 87px;
margin-left: 24px;
margin-bottom: 24px;
position: relative;
}
.CloudDisk-R-Img{
width: 85px;
height: 85px;
margin-bottom: 9px;
border-radius: 8px;
overflow: hidden;
/* border:2px solid transparent; */
/* background: #8790F3; */
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-L-Center{
height: 95%;
overflow-y: scroll;
}
.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;
}
.CloudDisk-R-Box.active2:hover .close-btn{
display: block;
}
.cloudDownName{
min-width: 200px;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
}
.cloudDownText{
padding: 0 20px 10px 20px;
font-size: 14px;
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
.user-nickname .editor-pencli{
/* visibility: hidden; */
}
.user-nickname:hover .editor-pencli{
/* visibility:visible; */
}
</style>
\ No newline at end of file
src/components/CloudDisk/cellList.vue 0 → 100644
View file @ 688fd7b6
<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>
<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>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios";
const props = defineProps({
dataList:{
type: Array,
default: [],
},
})
const emit = defineEmits<{
(event: 'close'): void,
(event: 'refreshHandler'): void,
(event: 'CopyTo'): void,
(event: 'MoveFile'): void,
(event: 'getImg'): void,
(event: 'deleteImg'): void,
}>()
const editorTarget = ref('')
const nickNam = ref(''|| Number)
const editLoading = ref(false)
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true
let params = {
Id: target.DetailsId,
FileName: nickNam.value
}
let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
if (dataRes.data.resultCode==ApiResult.SUCCESS) {
emit('refreshHandler')
}
editLoading.value = false
}
const setNameHandler = (target:any) =>{
if(target){
editorTarget.value = target.DetailsId
nickNam.value = target.FileName
}else{
editorTarget.value = ''
nickNam.value = ''
}
}
const CopyTo = (row:any) =>{
emit('CopyTo',row)
}
const MoveFile = (row:any) =>{
emit('MoveFile',row)
}
const getImg = (item:any,index:Number) => {
emit('getImg',item,index)
}
// 删除
const deleteImg = (item:any) => {
emit('deleteImg',item)
}
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
flex-wrap: wrap;
}
.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;
}
.CloudDisk-R-Box.active2:hover .close-btn{
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;
}
.cloudDownName{
min-width: 200px;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
}
.cloudDownText{
padding: 0 20px 10px 20px;
font-size: 14px;
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
</style>
\ No newline at end of file
src/components/CloudDisk/list.vue 0 → 100644
View file @ 688fd7b6
<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>
<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>
</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(scope.row)"
:loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
</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>
<el-table-column label="大小" width="240">
<template #default="scope">{{ scope.row.FileSize }} kb</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios";
const props = defineProps({
dataList:{
type: Array,
default: [],
},
})
const emit = defineEmits<{
(event: 'close'): void,
(event: 'refreshHandler'): void,
(event: 'CopyTo'): void,
(event: 'MoveFile'): void,
(event: 'getImg'): void,
(event: 'deleteImg'): void,
}>()
const editorTarget = ref('')
const nickNam = ref(''|| Number)
const editLoading = ref(false)
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true
let params = {
Id: target.DetailsId,
FileName: nickNam.value
}
let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
if (dataRes.data.resultCode==ApiResult.SUCCESS) {
emit('refreshHandler')
}
editLoading.value = false
}
const setNameHandler = (target:any) =>{
if(target){
editorTarget.value = target.DetailsId
nickNam.value = target.FileName
}else{
editorTarget.value = ''
nickNam.value = ''
}
}
const CopyTo = (row:any) =>{
emit('CopyTo',row)
}
const MoveFile = (row:any) =>{
emit('MoveFile',row)
}
const getImg = (item:any,index:Number) => {
emit('getImg',item,index)
}
// 删除
const deleteImg = (item:any) => {
emit('deleteImg',item)
}
</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;
display: none;
}
.CloudDisk-R-Box.active2:hover .close-btn{
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;
}
.cloudDownName{
min-width: 200px;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
}
.cloudDownText{
padding: 0 20px 10px 20px;
font-size: 14px;
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
</style>
\ No newline at end of file
src/components/CloudDisk/waterfallFlowList.vue 0 → 100644
View file @ 688fd7b6
<template>
<div class="CloudDisk-R-Center">
<Waterfall :list="dataList"
:breakpoints="{
1400:{rowPerView:12},
800:{rowPerView:12},
500:{rowPerView:12}
}"
:hasAroundGutter="false" :align="'left'"
rowKey="DetailsId" :gutter="24"
:loadProps="loadProps"
>
<template #item="{ item, url, index }">
<el-dropdown trigger="click">
<div class="CloudDisk-R-Box cursor-pointer" :key="index">
<div class="CloudDisk-R-Img">
<LazyImg :url="item.FilePath"
class="rounded" style="display: block;"/>
</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>
</Waterfall>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios";
import logo from '@/assets/img/traveldesign.png'
import error from '@/assets/img/noImg.png'
const props = defineProps({
dataList:{
type: Array,
default: [],
},
})
const emit = defineEmits<{
(event: 'close'): void,
(event: 'refreshHandler'): void,
(event: 'CopyTo'): void,
(event: 'MoveFile'): void,
(event: 'getImg'): void,
(event: 'deleteImg'): void,
}>()
const editorTarget = ref('')
const nickNam = ref(''|| Number)
const editLoading = ref(false)
const loadProps = reactive({
logo,
error
})
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true
let params = {
Id: target.DetailsId,
FileName: nickNam.value
}
let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
if (dataRes.data.resultCode==ApiResult.SUCCESS) {
emit('refreshHandler')
}
editLoading.value = false
}
const setNameHandler = (target:any) =>{
if(target){
editorTarget.value = target.DetailsId
nickNam.value = target.FileName
}else{
editorTarget.value = ''
nickNam.value = ''
}
}
const CopyTo = (row:any) =>{
emit('CopyTo',row)
}
const MoveFile = (row:any) =>{
emit('MoveFile',row)
}
const getImg = (item:any,index:Number) => {
emit('getImg',item,index)
}
// 删除
const deleteImg = (item:any) => {
emit('deleteImg',item)
}
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
max-width: 1400px;
padding-left: 24px;
}
.CloudDisk-R-Box{
width: 87px;
position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
width: 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;
}
.CloudDisk-R-Box.active2:hover .close-btn{
display: block;
}
.CloudDisk-R-Img{
width: 85px;
height: auto;
margin-bottom: 9px;
border-radius: 8px;
box-shadow: 0px 0px 13px 0px #eee;
border-color:#eee;
}
.CloudDisk-R-Img .el-image{
width: 85px;
border-radius: 8px;
}
.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{
min-width: 80px;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
}
.cloudDownText{
padding: 0 20px 10px 20px;
font-size: 14px;
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
::v-deep(.lazy__img[lazy=error]){
padding: 0;
width: 85px !important;
}
</style>
\ No newline at end of file
src/main.ts
View file @ 688fd7b6
......@@ -19,6 +19,8 @@ import Directive from '@/plugins/directive'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import VueKonva from 'vue-konva';
import router from './router'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(router)
......@@ -29,6 +31,9 @@ app.use(Icon)
app.use(Directive)
app.use(VueKonva)
app.use(pinia)
app.use(ElementPlus, {
locale: zhCn,
})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
......
src/plugins/icon.ts
View file @ 688fd7b6
......@@ -149,6 +149,10 @@ import {
Mail,
Wechat,
User,
SortOne,
GridFour,
WaterfallsH,
ListCheckbox,
} from '@icon-park/vue-next'
export interface Icons {
......@@ -302,6 +306,10 @@ export const icons: Icons = {
IconMail:Mail,
IconWechat:Wechat,
IconUser:User,
IconSortOne:SortOne,
IconGridFour:GridFour,
IconWaterfallsH:WaterfallsH,
IconListCheckbox:ListCheckbox,
}
export default {
......
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