Skip to content

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

no message

parent 7a8ca892
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 719 additions and 168 deletions
src/components/CloudDisk/CloudDiskList.vue
View file @ 688fd7b6
This diff is collapsed.
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