Skip to content

P
pptist
Commit 904a4bfc authored by zhengke's avatar zhengke
Browse files
Options

云盘

parent d4879fe4
Hide whitespace changes
Inline Side-by-side
Showing with 452 additions and 180 deletions
src/components/CloudDisk/CloudDiskList.vue
View file @ 904a4bfc
...@@ -192,8 +192,11 @@ ...@@ -192,8 +192,11 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div ref="imgDiskRef" class="full-height" style="padding-top: 10px;overflow:auto"
:style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'60px':'130px'}"> <div ref="imgDiskRef" class="full-height" style="padding-top: 10px;overflow:auto;"
:style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'60px':'130px'}"
@mousedown="handleMouseDown">
<div v-if="queryObj.layout!=3" class="mask" v-show="positionList.is_show_mask" :style="'width:' + mask_width + 'left:' + mask_left + 'height:' + mask_height + 'top:' + mask_top"></div>
<cellList v-if="queryObj.layout==1" :dataList="dataList" <cellList v-if="queryObj.layout==1" :dataList="dataList"
@refreshHandler="refreshHandler" @refreshHandler="refreshHandler"
@CopyTo="CopyTo" @CopyTo="CopyTo"
...@@ -225,9 +228,7 @@ ...@@ -225,9 +228,7 @@
:Parent="datas" :Parent="datas"
:params="queryObj" :params="queryObj"
></list> ></list>
<div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"> <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"></div>
<!-- <img :src="noDataImg(2)" width="118" /> -->
</div>
<template v-else> <template v-else>
<div style="height:40px;" class="no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div> <div style="height:40px;" class="no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
</template> </template>
...@@ -296,7 +297,7 @@ ...@@ -296,7 +297,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, provide, inject, onMounted, PropType, nextTick, onBeforeUnmount } from "vue"; import { ref, reactive, watch, provide, inject, onMounted, PropType, nextTick, onBeforeUnmount, computed } from "vue";
import type { ElMessage,ElImage,DropdownInstance,ElLoading } from "element-plus"; import type { ElMessage,ElImage,DropdownInstance,ElLoading } from "element-plus";
import { ArrowLeft,CopyDocument } from "@element-plus/icons-vue"; import { ArrowLeft,CopyDocument } from "@element-plus/icons-vue";
import CloudDiskService from "@/services/CloudDiskService"; import CloudDiskService from "@/services/CloudDiskService";
...@@ -333,15 +334,15 @@ ...@@ -333,15 +334,15 @@
total: 0, total: 0,
layout: 1,//布局 layout: 1,//布局
QFileType: [],//格式 QFileType: [],//格式
QStartTime: time[0], QStartTime: '',
QEndTime: time[1], QEndTime: '',
QOrderFiled: 1,//排序字段(1-创建时间，2-文件大小 3文件名称 QOrderFiled: 1,//排序字段(1-创建时间，2-文件大小 3文件名称
QOrderBy: 2,//1-升序，2-倒序 QOrderBy: 2,//1-升序，2-倒序
QCreateBy: '',//上传人员 QCreateBy: '',//上传人员
QFileName: '', QFileName: '',
}) })
const dateArr = ref([time[0],time[1]] as any) const dateArr = ref([] as any)
if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
const loading = ref(false as any) const loading = ref(false as any)
const dataList = ref([] as Array<any>); const dataList = ref([] as Array<any>);
...@@ -373,10 +374,6 @@ ...@@ -373,10 +374,6 @@
const dropdownSort = ref<DropdownInstance>() const dropdownSort = ref<DropdownInstance>()
const dropdownLayout = ref<DropdownInstance>() const dropdownLayout = ref<DropdownInstance>()
const dropdownDade = ref() const dropdownDade = ref()
const defaultTime2: [Date, Date] = [
new Date(2000, 1, 1),
new Date(2000, 2, 1),
]
const sortType = ref([ const sortType = ref([
{Name: '添加时间',ID:1,check:true}, {Name: '添加时间',ID:1,check:true},
...@@ -411,6 +408,95 @@ ...@@ -411,6 +408,95 @@
if(x.ID==queryObj.layout) x.check = true if(x.ID==queryObj.layout) x.check = true
}) })
const positionList = reactive({
is_show_mask: false,
box_screen_left: 0,
box_screen_top: 0,
start_x: 0,
start_y: 0,
end_x: 0,
end_y: 0
})
//分别计算遮罩层的位置，大小
const mask_width = computed(()=> {
return `${Math.abs(positionList.end_x - positionList.start_x)}px;`;
})
const mask_height = computed(()=> {
return `${Math.abs(positionList.end_y - positionList.start_y)}px;`;
})
const mask_left = computed(() =>{
return `${Math.min(positionList.start_x, positionList.end_x) - positionList.box_screen_left}px;`;
})
const mask_top = computed(()=> {
return `${Math.min(positionList.start_y, positionList.end_y) - positionList.box_screen_top}px;`;
})
//鼠标按下事件
const handleMouseDown = (event)=> {
if(queryObj.layout==3) return
positionList.is_show_mask = true;
positionList.start_x = event.clientX;
positionList.start_y = event.clientY;
positionList.end_x = event.clientX;
positionList.end_y = event.clientY;
document.body.addEventListener("mousemove", handleMouseMove); //监听鼠标移动事件
document.body.addEventListener("mouseup", handleMouseUp); //监听鼠标抬起事件
if (event.button === 0) {
event.preventDefault();
}
}
const handleMouseMove = (event) => {
positionList.end_x = event.clientX;
positionList.end_y = event.clientY;
}
const handleMouseUp = () => {
document.body.removeEventListener("mousemove", handleMouseMove);
document.body.removeEventListener("mouseup", handleMouseUp);
positionList.is_show_mask = false;
handleDomSelect();
resSetXY();
}
const handleDomSelect = () => {
const dom_mask = window.document.querySelector(".mask");
//getClientRects()每一个盒子的边界矩形的矩形集合
const rect_select = dom_mask.getClientRects()[0];
// console.log(rect_select);
const add_list = [];
const del_list = [];
document.querySelectorAll(".CloudDisk-R-Box").forEach((node, index) => {
const rects = node.getClientRects()[0];
if (collide(rects, rect_select) === true) {
if (datas.SelectedDatas.includes(dataList.value[index])) {
dataList.value[index].check = !dataList.value[index].check
del_list.push(dataList.value[index]);
} else {
dataList.value[index].check = !dataList.value[index].check
add_list.push(dataList.value[index]);
}
}
});
datas.SelectedDatas = datas.SelectedDatas.concat(add_list).filter((item) => !del_list.includes(item));
newDatasSelected()
}
//比较checkbox盒子边界和遮罩层边界最大最小值
const collide = (rect1, rect2) => {
const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
const minX = Math.min(rect1.x, rect2.x);
const minY = Math.min(rect1.y, rect2.y);
return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height;
}
//清除
const resSetXY = () => {
positionList.start_x = 0;
positionList.start_y = 0;
positionList.end_x = 0;
positionList.end_y = 0;
}
const remoteMethod = async (query: string) => { const remoteMethod = async (query: string) => {
if (query) { if (query) {
CreateLoading.value = true CreateLoading.value = true
...@@ -458,6 +544,10 @@ ...@@ -458,6 +544,10 @@
refreshHandler() refreshHandler()
} }
const BatchCopyTo = () => { const BatchCopyTo = () => {
if(datas.IdList.length==0) return ElMessage.warning({
showClose: true,
message: `请勾选需要复制的图`,
})
addEditMsg.Id = datas.IdList addEditMsg.Id = datas.IdList
GroupId.value = '' GroupId.value = ''
dialogType.value = 1 dialogType.value = 1
...@@ -465,6 +555,10 @@ ...@@ -465,6 +555,10 @@
} }
const BatchMoveFile = () => { const BatchMoveFile = () => {
if(datas.IdList.length==0) return ElMessage.warning({
showClose: true,
message: `请勾选需要移动的图`,
})
addEditMsg.Id = datas.IdList addEditMsg.Id = datas.IdList
GroupId.value = '' GroupId.value = ''
dialogType.value = 2 dialogType.value = 2
...@@ -472,6 +566,10 @@ ...@@ -472,6 +566,10 @@
} }
const BatchRemove = () => { const BatchRemove = () => {
if(datas.IdList.length==0) return ElMessage.warning({
showClose: true,
message: `请勾选需要删除的图`,
})
let text = '' let text = ''
let mobel = '' let mobel = ''
let material = '' let material = ''
...@@ -530,7 +628,6 @@ ...@@ -530,7 +628,6 @@
const MultipleChoice = (row:Array) =>{ const MultipleChoice = (row:Array) =>{
datas.SelectedDatas = row datas.SelectedDatas = row
datas.IdList = row.map(x=>{ return x.DetailsId})
if(datas.SelectedDatas.length>0) datas.ControlsShow = true if(datas.SelectedDatas.length>0) datas.ControlsShow = true
newDatasSelected() newDatasSelected()
} }
...@@ -594,9 +691,10 @@ ...@@ -594,9 +691,10 @@
text:'正在切换', text:'正在切换',
lock:true lock:true
}) })
layoutType.value.forEach(x=>{ resSetXY()
if(x.ID!=item.ID) x.check = false for(let i=0;i<layoutType.value.length;i++){
}) layoutType.value[i].check = false
}
item.check = true item.check = true
queryObj.layout = item.ID queryObj.layout = item.ID
let time = 300 let time = 300
...@@ -896,6 +994,10 @@ onMounted(()=>{ ...@@ -896,6 +994,10 @@ onMounted(()=>{
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener('click', () => {}); document.removeEventListener('click', () => {});
}) })
watch(()=>datas.SelectedDatas,(n,o)=>{
datas.IdList = []
if(n.length>0) datas.IdList = datas.SelectedDatas.map(x=>{ return x.DetailsId})
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.CloudDisk-R-Date{ .CloudDisk-R-Date{
...@@ -1032,8 +1134,8 @@ onMounted(()=>{ ...@@ -1032,8 +1134,8 @@ onMounted(()=>{
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
/* 515px */ /* 515px */
left: 0; left: 232px;
right: 0; right: 232px;
z-index: 2; z-index: 2;
} }
.CloudDisk-RBFCenter{ .CloudDisk-RBFCenter{
...@@ -1048,5 +1150,12 @@ onMounted(()=>{ ...@@ -1048,5 +1150,12 @@ onMounted(()=>{
.CloudDisk-RBFbj .close-btn:hover{ .CloudDisk-RBFbj .close-btn:hover{
color: $themeColor; color: $themeColor;
} }
.mask {
position: absolute;
background: #409eff;
opacity: 0.4;
z-index: 100;
}
</style> </style>
\ No newline at end of file
src/components/CloudDisk/cellList.vue
View file @ 904a4bfc
...@@ -2,63 +2,88 @@ ...@@ -2,63 +2,88 @@
<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">
<div style="position: relative;"> <div style="position: relative;">
<el-checkbox style="position: absolute;left: 30px;top: 0px;" <el-checkbox style="position: absolute;left: 35px;top: 2px;"
class="fz14" label="" v-model="item.check" class="fz14" label="" v-model="item.check"
@change="handleSelectionChange(item)"/> @change="checkItem($event,item)"/>
<el-dropdown trigger="click"> <div class="CloudDisk-R-Box cursor-pointer" :key="index">
<div class="CloudDisk-R-Box cursor-pointer" :key="index"> <div class="CloudDisk-R-Img">
<div class="CloudDisk-R-Img"> <el-image :src="item.FilePath" style="width: 100%; height: 100%;"
<el-image :src="item.FilePath" style="width: 100%; height: 100%;" fit="cover"/>
fit="cover"/>
</div>
<span class="title block">
{{item.FileName}}
</span>
</div> </div>
<template #dropdown> <span class="title block">
<div class="cloudDownName microsoft"> <el-tooltip effect="dark" :content="item.FileName" placement="bottom">
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId"> {{item.FileName}}
<span class="grow">{{item.FileName}}</span> </el-tooltip>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></IconPencli> </span>
</div>
<el-popover placement="bottom" :width="230" trigger="click" @mousedown.stop="handleChildMouseDown">
<template #reference>
<div class="MoreClick row items-center cusor-pointer" @mousedown.stop="handleChildMouseDown"><el-icon size="13"><MoreFilled /></el-icon></div>
</template>
<div class="MoreClickCenter column" @mousedown.stop="handleChildMouseDown">
<div class="cloudDownName microsoft">
<div class="col row items-center user-nickname" style="color:#000;" v-if="editorTarget!=item.DetailsId">
<span class="grow text-left">{{item.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click.stop="setNameHandler(item)"></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" />
<el-button link size="small" class="q-ml-sm" type="primary" @click="setCloudNameHandler(item)" <el-button link size="small" class="q-ml-sm" type="primary" @click.stop="setCloudNameHandler(item)"
: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.stop="setNameHandler">取消</el-button>
</div> </div>
</div> </div>
<div class="cloudDownText row flex-between"> <div class="cloudDownText row flex-between">
<span>类型</span> <span>类型</span>
<span>图片</span> <span>图片</span>
</div> </div>
<div class="cloudDownText row flex-between"> <div class="cloudDownText row flex-between">
<span>格式</span> <span>格式</span>
<span>{{item.ExtName}}</span> <span>{{item.ExtName}}</span>
</div> </div>
<div class="cloudDownText row flex-between" v-if="item.WithHeight"> <div class="cloudDownText row flex-between" v-if="item.WithHeight">
<span>尺寸</span> <span>尺寸</span>
<span>{{item.WithHeight}} px</span> <span>{{item.WithHeight}} px</span>
</div> </div>
<div class="cloudDownText cloudDownTextLin row flex-between"> <div class="cloudDownText cloudDownTextLin row flex-between">
<span>大小</span> <span>大小</span>
<span>{{item.FileSize}} kb</span> <span>{{item.FileSize}} kb</span>
</div> </div>
<el-dropdown-menu class="q-pa-md microsoft"> <div class="common q-pt-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item> <div class="row items-center cloudDownControls" @click.stop="CopyTo(item,index)">
<el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item> <el-icon size="15px" theme="filled">
<el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item> <CopyDocument></CopyDocument>
<el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item> </el-icon>
</el-dropdown-menu> <span class="q-pl-md">复制到</span>
</template> </div>
</el-dropdown> <div class="row items-center cloudDownControls" @click.stop="MoveFile(item,index)">
<el-icon size="15px" theme="filled">
<Expand></Expand>
</el-icon>
<span class="q-pl-md">移动到</span>
</div>
<div class="row items-center cloudDownControls" @click.stop="deleteImg(item,index)">
<el-icon size="15px" theme="filled">
<Delete></Delete>
</el-icon>
<span class="q-pl-md">删除</span>
</div>
<div class="row items-center cloudDownControls" @click.stop="getImg(item,index)">
<el-icon size="15px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">查看</span>
</div>
</div>
</div>
</el-popover>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, reactive, watch, computed, onMounted, onBeforeUnmount } 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({
...@@ -84,7 +109,24 @@ ...@@ -84,7 +109,24 @@
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
const editLoading = ref(false) const editLoading = ref(false)
const multipleSelection = ref([] as any) const multipleSelection = ref([] as any)
const handleChildMouseDown = (event) => {
event.stopPropagation()
}
//单击多选框选中
const checkItem = (val,item)=>{
item.check = !item.check
let str = item.DetailsId;
let i = props.Parent.SelectedDatas.indexOf(str) // 判断选中列表中是否包含这个点击的div
console.log(val,item,i);
if (i < 0) {
// multipleSelection.value.push(item); // 如果不包含就加进去
} else {
// multipleSelection.value.splice(i, 1); // 如果包含就删
}
}
const handleSelectionChange = (row: any) =>{ const handleSelectionChange = (row: any) =>{
let filter = props.Parent.SelectedDatas.filter(x=>x.DetailsId==row.DetailsId) let filter = props.Parent.SelectedDatas.filter(x=>x.DetailsId==row.DetailsId)
if(filter.length==0&&row.check) { if(filter.length==0&&row.check) {
...@@ -118,22 +160,23 @@ ...@@ -118,22 +160,23 @@
nickNam.value = '' nickNam.value = ''
} }
} }
const CopyTo = (row:any) =>{ const CopyTo = (row:any,index:Number) =>{
emit('CopyTo',row) emit('CopyTo',row)
} }
const MoveFile = (row:any) =>{ const MoveFile = (row:any,index:Number) =>{
emit('MoveFile',row) emit('MoveFile',row)
} }
const getImg = (item:any,index:Number) => { const getImg = (item:any,index:Number) => {
emit('getImg',item,index) emit('getImg',item,index)
} }
// 删除 // 删除
const deleteImg = (item:any) => { const deleteImg = (item:any,index:Number) => {
emit('deleteImg',item) emit('deleteImg',item)
} }
watch(()=>props,(n,o)=>{ watch(()=>props,(n,o)=>{
if(n.Parent.SelectedDatas.length==0) multipleSelection.value = [] if(n.Parent.SelectedDatas.length==0) multipleSelection.value = []
else multipleSelection.value = n.Parent.SelectedDatas
},{ },{
deep: true, deep: true,
immediate:true immediate:true
...@@ -202,15 +245,55 @@ ...@@ -202,15 +245,55 @@
} }
.cloudDownName{ .cloudDownName{
min-width: 200px; min-width: 200px;
padding: 10px 20px 15px 20px; padding: 0 0 10px 0;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
} }
.cloudDownText{ .cloudDownText{
padding: 0 20px 10px 20px; padding: 0 5px 10px 5px;
font-size: 14px; font-size: 14px;
} }
.cloudDownTextLin{ .cloudDownTextLin{
border-bottom: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0;
} }
.user-nickname span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
.MoreClickCenter{
}
.MoreClickCenter::after{
}
.MoreClick{
position: absolute;
right: 10px;
top: 10px;
background: #fff;
border-radius: 10px;
padding: 0 3px;
}
.MoreClick .el-icon{
color: #b1b7cf ;
}
.MoreClick:hover {
background: #8790F3;
}
.MoreClick:hover .el-icon{
color: #fff;
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
.cloudDownControls{
padding: 10px 5px;
cursor: pointer;
}
.cloudDownControls:hover{
background: #dedcff;
color: $el-color-primary;
}
</style> </style>
\ No newline at end of file
src/components/CloudDisk/index.vue
View file @ 904a4bfc
...@@ -106,59 +106,65 @@ ...@@ -106,59 +106,65 @@
{{item.FileName}} {{item.FileName}}
</el-tooltip> </el-tooltip>
</span> </span>
<div class="MoreClickBox"> <el-popover placement="top" :width="230" trigger="click">
<div class="MoreClick row items-center"><el-icon size="13" @click.stop="clickMore(index)"><MoreFilled /></el-icon></div> <template #reference>
<div class="MoreClickCenter column" v-if="ShowMessage&&currentMore==index"> <div class="MoreClick row items-center" @click.stop="clickMore(index)"><el-icon size="13"><MoreFilled /></el-icon></div>
<div class="cloudDownName microsoft"> </template>
<div class="col row user-nickname" style="color:#000;" v-if="editorTarget!=item.DetailsId"> <div class="MoreClickBox">
<span class="grow text-left">{{item.FileName}}</span> <!-- v-if="ShowMessage&&currentMore==index" -->
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click.stop="setNameHandler(item)"></IconPencli> <div class="MoreClickCenter column">
<div class="cloudDownName microsoft">
<div class="col row user-nickname" style="color:#000;" v-if="editorTarget!=item.DetailsId">
<span class="grow text-left">{{item.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click.stop="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.stop="setCloudNameHandler(item)"
:loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click.stop="setNameHandler">取消</el-button>
</div>
</div>
<div class="cloudDownText row flex-between">
<span>类型</span>
<span>图片</span>
</div> </div>
<div class="col row items-center" v-else> <div class="cloudDownText row flex-between">
<el-input v-model="nickNam" placeholder="请输入用户昵称" size="small" class="col" /> <span>格式</span>
<el-button link size="small" class="q-ml-sm" type="primary" @click.stop="setCloudNameHandler(item)" <span>{{item.FileName.split('.')[1]}}</span>
:loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click.stop="setNameHandler">取消</el-button>
</div> </div>
</div> <div class="cloudDownText row flex-between" v-if="item.WithHeight">
<div class="cloudDownText row flex-between"> <span>尺寸</span>
<span>类型</span> <span>{{item.WithHeight}} px</span>
<span>图片</span>
</div>
<div class="cloudDownText row flex-between">
<span>格式</span>
<span>{{item.FileName.split('.')[1]}}</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>
<div class="common q-py-md microsoft">
<div class="row items-center cloudDownControls" @click.stop="goTidyUp(item)">
<el-icon size="15px" theme="filled">
<Menu></Menu>
</el-icon>
<span class="q-pl-md">整理文件</span>
</div> </div>
<div v-if="ImgId!=item.DetailsId" class="row items-center cloudDownControls" @click.stop="deleteImg(item)"> <div class="cloudDownText cloudDownTextLin row flex-between">
<el-icon size="15px" theme="filled"> <span>大小</span>
<Delete></Delete> <span>{{item.FileSize}} kb</span>
</el-icon>
<span class="q-pl-md">删除</span>
</div> </div>
<div class="row items-center cloudDownControls" @click.stop="ImgDetails(item,index)"> <div class="common q-pt-md microsoft">
<el-icon size="15px" theme="filled"> <div class="row items-center cloudDownControls" @click.stop="goTidyUp(item)">
<View></View> <el-icon size="15px" theme="filled">
</el-icon> <Menu></Menu>
<span class="q-pl-md">查看</span> </el-icon>
<span class="q-pl-md">整理文件</span>
</div>
<div v-if="ImgId!=item.DetailsId" class="row items-center cloudDownControls" @click.stop="deleteImg(item)">
<el-icon size="15px" theme="filled">
<Delete></Delete>
</el-icon>
<span class="q-pl-md">删除</span>
</div>
<div class="row items-center cloudDownControls" @click.stop="ImgDetails(item,index)">
<el-icon size="15px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">查看</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-popover>
</div> </div>
</template> </template>
</div> </div>
...@@ -700,58 +706,53 @@ onBeforeUnmount(() => { ...@@ -700,58 +706,53 @@ onBeforeUnmount(() => {
} }
.MoreClickBox{ .MoreClickBox{
}
.MoreClick{
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 10px;
z-index: 2;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
text-align: center;
padding: 0 3px; padding: 0 3px;
} }
.MoreClick:hover {
background: #8790F3;
}
.MoreClick .el-icon{ .MoreClick .el-icon{
color: #b1b7cf ; color: #b1b7cf ;
} }
.MoreClickBox:hover {
background: #8790F3;
}
.MoreClick:hover .el-icon{ .MoreClick:hover .el-icon{
color: #fff; color: #fff;
} }
.MoreClickCenter{ .MoreClickCenter{
position: absolute;
top: 22px;
right: -20px;
background: #fff;
border-radius: 3px;
box-shadow: 2px 2px 10px 2px #EEE;
} }
.MoreClickCenter::after{ .MoreClickCenter::after{
content: '';
width: 0;
height: 0;
position: absolute;
right: 25px;
top: -8px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #FFF;
} }
.cloudDownName{ .cloudDownName{
min-width: 200px; min-width: 200px;
padding: 10px 20px 15px 20px; padding: 0 0 10px 0;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
} }
.cloudDownText{ .cloudDownText{
padding: 0 20px 10px 20px; padding: 0 5px 10px 5px;
font-size: 14px; font-size: 14px;
} }
.cloudDownTextLin{ .cloudDownTextLin{
border-bottom: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0;
} }
.user-nickname span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
.cloudDownControls{ .cloudDownControls{
padding: 10px 10px; padding: 10px 5px;
cursor: pointer;
} }
.cloudDownControls:hover{ .cloudDownControls:hover{
background: #dedcff; background: #dedcff;
......
src/components/CloudDisk/list.vue
View file @ 904a4bfc
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<el-table :data="dataList" style="width: 100%;" <el-table :data="dataList" style="width: 100%;"
ref="multipleTableRef" ref="multipleTableRef"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@row-click="selectData"
row-key="DetailsId"> row-key="DetailsId">
<el-table-column type="selection" width="55"/> <el-table-column type="selection" width="55"/>
<el-table-column label="基本信息" show-overflow-tooltip min-width="400"> <el-table-column label="基本信息" show-overflow-tooltip min-width="400">
...@@ -128,6 +129,9 @@ ...@@ -128,6 +129,9 @@
emit('BatchMoveFile') emit('BatchMoveFile')
} }
const selectData = (row: any, column: any, event: Event) =>{
multipleTableRef.value!.toggleRowSelection(row)
}
const handleSelectionChange = (val: []) =>{ const handleSelectionChange = (val: []) =>{
multipleSelection.value = val.map(x=>{return x}) multipleSelection.value = val.map(x=>{return x})
emit('MultipleChoice',multipleSelection.value) emit('MultipleChoice',multipleSelection.value)
...@@ -168,7 +172,6 @@ ...@@ -168,7 +172,6 @@
// 删除 // 删除
const deleteImg = (item:any) => { const deleteImg = (item:any) => {
emit('deleteImg',item) emit('deleteImg',item)
} }
const toggleSelection = (rows:any,state:undefined) => { const toggleSelection = (rows:any,state:undefined) => {
......
src/components/CloudDisk/waterfallFlowList.vue
View file @ 904a4bfc
...@@ -3,8 +3,10 @@ ...@@ -3,8 +3,10 @@
<Waterfall :list="dataList" <Waterfall :list="dataList"
:breakpoints="{ :breakpoints="{
1400:{rowPerView:5}, 1400:{rowPerView:5},
800:{rowPerView:5}, 1200:{rowPerView:4},
500:{rowPerView:5} 1000:{rowPerView:3},
800:{rowPerView:2},
500:{rowPerView:1}
}" }"
:hasAroundGutter="false" :align="'left'" :hasAroundGutter="false" :align="'left'"
rowKey="DetailsId" :gutter="24" rowKey="DetailsId" :gutter="24"
...@@ -14,54 +16,79 @@ ...@@ -14,54 +16,79 @@
<div style="position: relative;"> <div style="position: relative;">
<el-checkbox style="position: absolute;left: 10px;top: 0px;" <el-checkbox style="position: absolute;left: 10px;top: 0px;"
class="fz14" label="" v-model="item.check" 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-Box cursor-pointer" :key="index"> <div class="CloudDisk-R-Img">
<div class="CloudDisk-R-Img"> <LazyImg :url="item.FilePath"
<LazyImg :url="item.FilePath" class="rounded" style="display: block;"/>
class="rounded" style="display: block;"/>
</div>
<span class="title block">
{{item.FileName}}
</span>
</div> </div>
<template #dropdown> <span class="title block">
<div class="cloudDownName microsoft"> <el-tooltip effect="dark" :content="item.FileName" placement="bottom">
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=item.DetailsId"> {{item.FileName}}
<span class="grow">{{item.FileName}}</span> </el-tooltip>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(item)"></IconPencli> </span>
</div>
<el-popover placement="bottom" :width="230" trigger="click" @mousedown.stop="handleChildMouseDown">
<template #reference>
<div class="MoreClick row items-center cusor-pointer" @mousedown.stop="handleChildMouseDown"><el-icon size="13"><MoreFilled /></el-icon></div>
</template>
<div class="MoreClickCenter column" @mousedown.stop="handleChildMouseDown">
<div class="cloudDownName microsoft">
<div class="col row items-center user-nickname" style="color:#000;" v-if="editorTarget!=item.DetailsId">
<span class="grow text-left">{{item.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click.stop="setNameHandler(item)"></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" />
<el-button link size="small" class="q-ml-sm" type="primary" @click="setCloudNameHandler(item)" <el-button link size="small" class="q-ml-sm" type="primary" @click.stop="setCloudNameHandler(item)"
: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.stop="setNameHandler">取消</el-button>
</div>
</div> </div>
</div> <div class="cloudDownText row flex-between">
<div class="cloudDownText row flex-between">
<span>类型</span> <span>类型</span>
<span>图片</span> <span>图片</span>
</div> </div>
<div class="cloudDownText row flex-between"> <div class="cloudDownText row flex-between">
<span>格式</span> <span>格式</span>
<span>{{item.ExtName}}</span> <span>{{item.ExtName}}</span>
</div> </div>
<div class="cloudDownText row flex-between" v-if="item.WithHeight"> <div class="cloudDownText row flex-between" v-if="item.WithHeight">
<span>尺寸</span> <span>尺寸</span>
<span>{{item.WithHeight}} px</span> <span>{{item.WithHeight}} px</span>
</div> </div>
<div class="cloudDownText cloudDownTextLin row flex-between"> <div class="cloudDownText cloudDownTextLin row flex-between">
<span>大小</span> <span>大小</span>
<span>{{item.FileSize}} kb</span> <span>{{item.FileSize}} kb</span>
</div> </div>
<el-dropdown-menu class="q-pa-md microsoft"> <div class="common q-pt-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo(item)">复制到</el-dropdown-item> <div class="row items-center cloudDownControls" @click.stop="CopyTo(item,index)">
<el-dropdown-item icon="Expand" @click="MoveFile(item)">移动到</el-dropdown-item> <el-icon size="15px" theme="filled">
<el-dropdown-item icon="Delete" @click="deleteImg(item)">删除</el-dropdown-item> <CopyDocument></CopyDocument>
<el-dropdown-item icon="View" @click="getImg(item,index)">查看</el-dropdown-item> </el-icon>
</el-dropdown-menu> <span class="q-pl-md">复制到</span>
</template> </div>
</el-dropdown> <div class="row items-center cloudDownControls" @click.stop="MoveFile(item,index)">
<el-icon size="15px" theme="filled">
<Expand></Expand>
</el-icon>
<span class="q-pl-md">移动到</span>
</div>
<div class="row items-center cloudDownControls" @click.stop="deleteImg(item,index)">
<el-icon size="15px" theme="filled">
<Delete></Delete>
</el-icon>
<span class="q-pl-md">删除</span>
</div>
<div class="row items-center cloudDownControls" @click.stop="getImg(item,index)">
<el-icon size="15px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">查看</span>
</div>
</div>
</div>
</el-popover>
</div> </div>
</template> </template>
</Waterfall> </Waterfall>
...@@ -104,6 +131,15 @@ ...@@ -104,6 +131,15 @@
}) })
const multipleSelection = ref([] as any) const multipleSelection = ref([] as any)
const handleChildMouseDown = (event) => {
event.stopPropagation()
}
//单击多选框选中
const checkItem = (val,item)=>{
item.check = !item.check
}
const handleSelectionChange = (row: any) =>{ const handleSelectionChange = (row: any) =>{
let filter = props.Parent.SelectedDatas.filter(x=>x.DetailsId==row.DetailsId) let filter = props.Parent.SelectedDatas.filter(x=>x.DetailsId==row.DetailsId)
if(filter.length==0&&row.check) { if(filter.length==0&&row.check) {
...@@ -137,17 +173,17 @@ ...@@ -137,17 +173,17 @@
nickNam.value = '' nickNam.value = ''
} }
} }
const CopyTo = (row:any) =>{ const CopyTo = (row:any,index:Number) =>{
emit('CopyTo',row) emit('CopyTo',row)
} }
const MoveFile = (row:any) =>{ const MoveFile = (row:any,index:Number) =>{
emit('MoveFile',row) emit('MoveFile',row)
} }
const getImg = (item:any,index:Number) => { const getImg = (item:any,index:Number) => {
emit('getImg',item,index) emit('getImg',item,index)
} }
// 删除 // 删除
const deleteImg = (item:any) => { const deleteImg = (item:any,index:Number) => {
emit('deleteImg',item) emit('deleteImg',item)
} }
...@@ -221,20 +257,60 @@ ...@@ -221,20 +257,60 @@
color: #000000; color: #000000;
} }
.cloudDownName{ .cloudDownName{
min-width: 80px; min-width: 200px;
padding: 10px 20px 15px 20px; padding: 0 0 10px 0;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
} }
.cloudDownText{ .cloudDownText{
padding: 0 20px 10px 20px; padding: 0 5px 10px 5px;
font-size: 14px; font-size: 14px;
} }
.cloudDownTextLin{ .cloudDownTextLin{
border-bottom: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0;
} }
.user-nickname span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
::v-deep(.lazy__img[lazy=error]){ ::v-deep(.lazy__img[lazy=error]){
padding: 0; padding: 0;
width: 247px !important; width: 247px !important;
} }
.MoreClickCenter{
}
.MoreClickCenter::after{
}
.MoreClick{
position: absolute;
right: 10px;
top: 10px;
background: #fff;
border-radius: 10px;
padding: 0 3px;
}
.MoreClick .el-icon{
color: #b1b7cf ;
}
.MoreClick:hover {
background: #8790F3;
}
.MoreClick:hover .el-icon{
color: #fff;
}
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
.cloudDownControls{
padding: 10px 5px;
cursor: pointer;
}
.cloudDownControls:hover{
background: #dedcff;
color: $el-color-primary;
}
</style> </style>
\ No newline at end of file
src/utils/time.ts
View file @ 904a4bfc
...@@ -11,7 +11,7 @@ var month:any = end.getMonth() + 1 // 0-11表示 1-12月 ...@@ -11,7 +11,7 @@ var month:any = end.getMonth() + 1 // 0-11表示 1-12月
var day = end.getDate() var day = end.getDate()
var dateObj = {start:'' as any,end:'' as any} var dateObj = {start:'' as any,end:'' as any}
dateObj.start = null dateObj.start = null
dateObj.end = year + '-' + (month>9?month:'0'+month) + '-' + day dateObj.end = year + '-' + (month>9?month:'0'+month) + '-' + (day>9?day:'0'+day)
var endMonthDay = new Date(year, month, 0).getDate() // 当前月的总天数 var endMonthDay = new Date(year, month, 0).getDate() // 当前月的总天数
// 获取近一周日期范围 // 获取近一周日期范围
...@@ -33,17 +33,17 @@ export const getLastWeekDate = () => { ...@@ -33,17 +33,17 @@ export const getLastWeekDate = () => {
// 获取近一个月日期范围 // 获取近一个月日期范围
export const getLastMonthDate = () => { export const getLastMonthDate = () => {
if (month - 1 <= 0) { // 如果是1月，年数往前推一年<br> if (month - 1 <= 0) { // 如果是1月，年数往前推一年<br>
dateObj.start = (year - 1) + '-' + 12 + '-' + day dateObj.start = (year - 1) + '-' + 12 + '-' + (day>9?day:'0'+day)
} else { } else {
const startMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate() const startMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate()
if (startMonthDay < day) { // 1个月前所在月的总天数小于现在的天日期 if (startMonthDay < day) { // 1个月前所在月的总天数小于现在的天日期
if (day < endMonthDay) { // 当前天日期小于当前月总天数 if (day < endMonthDay) { // 当前天日期小于当前月总天数
dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + (startMonthDay - (endMonthDay - day)) dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + ((startMonthDay - (endMonthDay - day))>9?startMonthDay - (endMonthDay - day):'0'+(startMonthDay - (endMonthDay - day)))
} else { } else {
dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + startMonthDay dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + (startMonthDay>9?startMonthDay:'0'+startMonthDay)
} }
} else { } else {
dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + day dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + (day>9?day:'0'+day)
} }
} }
const newMonthDate = [dateObj.start, dateObj.end] const newMonthDate = [dateObj.start, dateObj.end]
......
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