Skip to content

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

云盘

parent ea30d796
Show whitespace changes
Inline Side-by-side
Showing with 203 additions and 83 deletions
src/components/CloudDisk/CloudDiskList.vue
View file @ ce03abfe
......@@ -13,7 +13,7 @@
<IconSearch class="cusor-pointer" @click.stop="refreshHandler"></IconSearch>
</template>
<template #append>
<el-select v-model="queryObj.type" placeholder="Select" style="width: 100px"
<el-select v-model="queryObj.QPPTistCloudGroupIds" placeholder="Select" style="width: 100px"
@change="refreshHandler">
<el-option label="稿定模板" value="1" />
<el-option label="我的空间" value="2" />
......@@ -69,11 +69,7 @@
<div class="CloudDisk-R grow">
<div class="CloudDisk-R-header row flex-between items-center "
:class="[queryObj.layout==3?'q-mb-lg':'q-mb-xs']">
<div class="fz14 PingFangSC colorBA">
<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 class="fz14 PingFangSC colorBA"></div>
<div>
<el-dropdown trigger="click" @visible-change="changeDrop(1)"
:class="[currentSearchType==1?'DiskRHActive':'']">
......@@ -92,12 +88,12 @@
</template>
</el-input>
<div class="row flex-between items-center q-pt-md">
<el-checkbox label="png" value="A" />
<span>7</span>
<el-checkbox v-model="queryObj.QFileType" label="jpg" @change="refreshHandler"/>
<span></span>
</div>
<div class="row flex-between items-center q-pt-md">
<el-checkbox label="xlsx" value="B" />
<span>7</span>
<el-checkbox v-model="queryObj.QFileType" label="png" @change="refreshHandler"/>
<span></span>
</div>
</div>
</template>
......@@ -113,12 +109,13 @@
<el-date-picker
class="CloudDisk-date"
style="width: 95px;"
v-model="queryObj.date"
v-model="dateArr"
type="daterange"
start-placeholder=""
end-placeholder=""
value-format="YY-MM-DD"
ref="dropdownDade"
@change="getDate"
/>
</div>
</div>
......@@ -136,17 +133,23 @@
<el-dropdown-menu>
<template v-for="(item,index) in sortType">
<el-dropdown-item :command="item.ID" class="row flex-between"
: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>
<template v-for="(item,index) in sortTypeUD">
<el-dropdown-item :command="item.ID" class="row flex-between"
:divided="index==0?true:false"
@click="setDropdown(item,2)">
<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>
......@@ -160,7 +163,7 @@
<el-dropdown-menu>
<template v-for="(item,index) in layoutType">
<el-dropdown-item :command="item.ID" class="row flex-between"
@click="setDropdown(item,2)">
@click="setDropdown(item,3)">
<div class="row items-center" style="width: 80px;">
<el-icon>
<IconGridFour v-if="item.ID==1"/>
......@@ -197,7 +200,7 @@
@MultipleChoice="MultipleChoice"
:Parent="datas"
></waterfallFlowList>
<list v-show="queryObj.layout==3" :dataList="dataList"
<list v-if="queryObj.layout==3" :dataList="dataList"
@refreshHandler="refreshHandler"
@CopyTo="CopyTo"
@MoveFile="MoveFile"
......@@ -205,6 +208,7 @@
@deleteImg="deleteImg"
@MultipleChoice="MultipleChoice"
:Parent="datas"
:params="queryObj"
></list>
<div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg">
<!-- <img :src="noDataImg(2)" width="118" /> -->
......@@ -224,7 +228,7 @@
@current-change="handleCurrentChange"
/>
</div> -->
<div class="CloudDisk-RBF animate__animated animate__fadeInUp" v-show="datas.ControlsShow">
<div v-if="queryObj.layout!=3&&datas.ControlsShow" class="CloudDisk-RBF animate__animated animate__fadeInUp">
<div class="CloudDisk-RBFCenter microsoft">
<div class="row flex-center">
<div class="CloudDisk-RBFbj rounded row items-center">
......@@ -240,7 +244,7 @@
<el-button icon="CopyDocument" size="small" @click="CopyTo()">复制到</el-button>
<el-button icon="Expand" size="small" @click="CopyTo()">移动到</el-button>
<el-button icon="Delete" size="small" @click="CopyTo()">删除</el-button>
<el-button icon="View" size="small" @click="CopyTo()">查看</el-button>
<!-- <el-button icon="View" size="small" @click="CopyTo()">查看</el-button> -->
<span class="close-btn cursor-pointer column items-center flex-center q-pl-md" @click="datas.ControlsShow=false">
<IconClose :size="14"></IconClose>
</span>
......@@ -291,6 +295,7 @@
import { noDataImg } from "@/utils/common";
import { useRouter } from "vue-router";
import AliyunUpload from '@/utils/upload/aliyun'
import { getLastMonthDate } from "@/utils/time";
import cellList from './cellList'
import waterfallFlowList from './waterfallFlowList'
......@@ -305,19 +310,25 @@
isPersonage: '' as any,
})
const RefreshLoading = ref(false)
let time = getLastMonthDate()
const queryObj = reactive({
pageIndex: 1,
pageSize: 72,
pageSize: 100,
CloudGroupId: '',
FileName: '',
total: 0,
type: '1',//稿定模版
QPPTistCloudGroupIds: '1',//稿定模版 云盘分组数组[1,2] 待定
imgType: 1,//模版 素材
Sorts: [],//排序
layout: 1,//布局
date: '',//日期
QFileType: [],//格式
QStartTime: time[0],
QEndTime: time[1],
QOrderFiled: 1,//排序字段(1-创建时间，2-文件大小 3文件名称
QOrderBy: 2,//1-升序，2-倒序
QCreateBy: '',//上传人员
})
const dateArr = ref([time[0],time[1]] as any)
if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
const loading = ref(false as any)
const dataList = ref([] as Array<any>);
......@@ -353,17 +364,15 @@
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},
{Name: '文件大小',ID:3,check:false},
{Name: '文件名称',ID:4,check:false},
{Name: '升序',ID:5,check:false},
{Name: '降序',ID:6,check:false},
{Name: '添加时间',ID:1,check:true},
{Name: '文件大小',ID:2,check:false},
{Name: '文件名称',ID:3,check:false},
])
const sortTypeUD = ref([
{Name: '升序',ID:1,check:false},
{Name: '降序',ID:2,check:true},
])
const layoutType = ref([
{Name: '宫格',ID:1,check:false},
......@@ -373,7 +382,7 @@
const datas = reactive({
selectAll: false,
SelectedDatas: [] as any,
SelectedDatas: [] as Array,
ControlsShow: true,// 批量操作显示
indeterminate: false,// 未全选状态
})
......@@ -384,13 +393,24 @@
const newDatasSelected = () =>{
if(datas.SelectedDatas.length==0) {
for(let i=0;i<dataList.value.length;i++){
dataList.value[i].check = false
}
datas.selectAll = false
datas.indeterminate = false
}else if(datas.SelectedDatas.length>0){
if(dataList.value.length==datas.SelectedDatas.length){
for(let i=0;i<dataList.value.length;i++){
dataList.value[i].check = true
}
datas.selectAll = true
datas.indeterminate = false
}else if(dataList.value.length>datas.SelectedDatas.length){
for(let i=0;i<dataList.value.length;i++){
let x = dataList.value[i]
let findObj = datas.SelectedDatas.find(y=> y==x.DetailsId)
if(findObj) dataList.value[i].check = true
}
datas.indeterminate = true
}
}
......@@ -403,10 +423,11 @@
const setSelecAll = () => {
if(datas.selectAll){
dataList.value.forEach(x=>{
x.check = true
datas.SelectedDatas.push(x.DetailsId)
})
datas.SelectedDatas = []
for(let i=0;i<dataList.value.length;i++){
dataList.value[i].check = true
datas.SelectedDatas.push(dataList.value[i].DetailsId)
}
datas.indeterminate = false
}else if(datas.indeterminate){
datas.SelectedDatas.forEach(x=>{
......@@ -415,43 +436,61 @@
})
})
}else{
dataList.value.forEach(x=>{
x.check = false
})
for(let i=0;i<dataList.value.length;i++){
dataList.value[i].check = false
}
datas.SelectedDatas = []
datas.indeterminate = false
}
}
const getDate = () => {
if(dateArr.value&&dateArr.value.length>0){
queryObj.QStartTime = dateArr.value[0]
queryObj.QEndTime = dateArr.value[1]
}else{
queryObj.QStartTime = ''
queryObj.QEndTime = ''
}
refreshHandler()
}
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||type==2){
if(type==1){
item.check = !item.check
let newSortType = sortType.value.filter(x=>x.check)
queryObj.Sorts = newSortType.map(x=>{return x.ID})
sortType.value.forEach(x=>{
if(x.ID!=item.ID) x.check = false
})
queryObj.QOrderFiled = item.ID
}else{
item.check = !item.check
sortTypeUD.value.forEach(x=>{
if(x.ID!=item.ID) x.check = false
})
queryObj.QOrderBy = item.ID
}
refreshHandler()
}
if(type==2){
if(type==3){
loading.value = true
layoutType.value.forEach(x=>{
if(x.ID!=item.ID) x.check = false
})
item.check = true
queryObj.layout = item.ID
}
if(type==3){
queryObj.imgType = item.ID
setTimeout(()=>{
loading.value = false
},3000)
}
}
const changeDrop = (type:Number) =>{
if(currentSearchType.value==type) currentSearchType.value = 0
else currentSearchType.value = type
if(currentSearchType.value==2) {
dropdownDade.value.handleOpen()
}
if(currentSearchType.value==2) dropdownDade.value.handleOpen()
}
const getImg = (item:any,index:Number) => {
currentImg.value = index
......@@ -671,11 +710,13 @@ const SearchImg = () =>{
if(row&&row.Id) {
if(row.Id==queryObj.CloudGroupId) return
queryObj.CloudGroupId = row.Id
datas.SelectedDatas = []
datas.selectAll = false
datas.indeterminate = false
}
RefreshLoading.value = true;
queryObj.pageIndex = 1;
srcList.value = []
querySearchHandler();
};
......
src/components/CloudDisk/cellList.vue
View file @ ce03abfe
......@@ -2,7 +2,7 @@
<div class="CloudDisk-R-Center row">
<template v-for="(item,index) in dataList">
<div style="position: relative;">
<el-checkbox style="position: absolute;left: 30px;top: -3px;"
<el-checkbox style="position: absolute;left: 30px;top: 0px;"
class="fz14" label="" v-model="item.check"
@change="handleSelectionChange(item)"/>
<el-dropdown trigger="click">
......@@ -58,7 +58,7 @@
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios";
const props = defineProps({
......@@ -132,20 +132,26 @@
emit('deleteImg',item)
}
watch(()=>props,(n,o)=>{
if(n.Parent.SelectedDatas.length==0) multipleSelection.value = []
},{
deep: true,
immediate:true
})
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
flex-wrap: wrap;
}
.CloudDisk-R-Box{
width: 87px;
width: 247px;
margin-left: 24px;
margin-bottom: 24px;
position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
width: 85px;
height: 85px;
width: 247px;
height: 247px;
background: #8790F3;
box-shadow: 0px 0px 13px 0px #0D3EBC;
border-radius: 8px;
......@@ -170,8 +176,8 @@
display: block;
}
.CloudDisk-R-Img{
width: 85px;
height: 85px;
width: 247px;
height: 247px;
margin-bottom: 9px;
border-radius: 8px;
overflow: hidden;
......@@ -181,10 +187,10 @@
}
.CloudDisk-R-Img .el-image{
width: 85px;
width: 247px;
}
.title{
width: 85px;
width: 247px;
line-height: 17px;
overflow: hidden;
white-space: nowrap;
......
src/components/CloudDisk/list.vue
View file @ ce03abfe
<template>
<div class="CloudDisk-R-Center row" v-if="dataList.length>0">
<el-table :data="dataList" style="width: 100%;"
ref="multipleTableRef">
<el-table-column type="selection" width="55"
@selection-change="handleSelectionChange"/>
ref="multipleTableRef"
@selection-change="handleSelectionChange"
row-key="DetailsId">
<el-table-column type="selection" width="55"/>
<el-table-column label="基本信息" show-overflow-tooltip min-width="200">
<template #default="scope">
<div class="row items-center">
......@@ -49,9 +50,17 @@
</el-table-column>
<el-table-column align="center" min-width="80">
<template #header>
<el-icon>
<IconSetting></IconSetting>
</el-icon>
<el-dropdown trigger="click" >
<el-icon class="cursor-pointer" size="16" color="#b1b7cf"><IconSetting /></el-icon>
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo()">复制到</el-dropdown-item>
<el-dropdown-item icon="Expand" @click="MoveFile()">移动到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="deleteImg()">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template #default="scope">
<el-dropdown trigger="click" >
......@@ -71,7 +80,8 @@
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, watch } from "vue";
import { ElTable } from 'element-plus'
import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios";
const props = defineProps({
......@@ -82,6 +92,10 @@
Parent:{
type: Object,
default: {},
},
params:{
type: Object,
default: {},
}
})
const emit = defineEmits<{
......@@ -97,10 +111,12 @@
const nickNam = ref(''|| Number)
const editLoading = ref(false)
const errImg = ref(require('@/assets/img/noImg.png') as any)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([] as any)
const handleSelectionChange = (val: []) =>{
multipleSelection.value = val.map(x=>{return x.DetailsId})
emit('MultipleChoice',multipleSelection.value)
}
const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return
......@@ -140,6 +156,49 @@
emit('deleteImg',item)
}
const toggleSelection = (rows:any,state:undefined) => {
if (rows) {
rows.forEach((row) => {
multipleTableRef.value!.toggleRowSelection(row, state)
})
} else {
if(state) multipleTableRef.value.toggleAllSelection(state)
else multipleTableRef.value!.clearSelection()
}
}
watch(()=>props,(n,o)=>{
if(props.Parent.SelectedDatas.length>0) {
setTimeout(()=>{
props.Parent.SelectedDatas.forEach(x => {
let filterS = props.dataList.filter((y,index)=>{
y.index=index
return x==y.DetailsId
})
let index = filterS&&filterS[0]&&filterS[0].index
if(index>=0) {
toggleSelection([props.dataList[index]],true)
}
});
},3000)
}
if(props.dataList.length>0&&props.Parent.selectAll&&!props.Parent.indeterminate){
setTimeout(()=>{
for(let i=0;i<props.dataList.length;i++){
let x = props.dataList[i]
toggleSelection([x], true)
}
},3000)
}
},{
deep: true,
immediate:true
})
</script>
<style lang="scss" scoped>
.editor-pencli{
......@@ -149,7 +208,7 @@
display: block;
}
.CloudDisk-R-Center::v-deep(.el-table__body){
margin-top: 8px;
margin-top: 19px;
}
.CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
background-color: #f5f7fa;
......
src/components/CloudDisk/waterfallFlowList.vue
View file @ ce03abfe
......@@ -2,9 +2,9 @@
<div class="CloudDisk-R-Center">
<Waterfall :list="dataList"
:breakpoints="{
1400:{rowPerView:12},
800:{rowPerView:12},
500:{rowPerView:12}
1400:{rowPerView:5},
800:{rowPerView:5},
500:{rowPerView:5}
}"
:hasAroundGutter="false" :align="'left'"
rowKey="DetailsId" :gutter="24"
......@@ -12,7 +12,7 @@
>
<template #item="{ item, url, index }">
<div style="position: relative;">
<el-checkbox style="position: absolute;left: 30px;top: -3px;"
<el-checkbox style="position: absolute;left: 10px;top: 0px;"
class="fz14" label="" v-model="item.check"
@change="handleSelectionChange(item)"/>
<el-dropdown trigger="click">
......@@ -69,7 +69,7 @@
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, watch } from "vue";
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import CloudDiskService from "@/services/CloudDiskService";
......@@ -81,6 +81,10 @@
type: Array,
default: [],
},
Parent:{
type: Object,
default: {},
}
})
const emit = defineEmits<{
(event: 'close'): void,
......@@ -105,7 +109,7 @@
if(filter.length==0&&row.check) {
multipleSelection.value.push(row.DetailsId)
emit('MultipleChoice',multipleSelection.value)
}else {
}else if(!row.check){
let newFilter = props.Parent.SelectedDatas.filter(x=>x!=row.DetailsId)
multipleSelection.value = newFilter
emit('MultipleChoice',multipleSelection.value)
......@@ -147,6 +151,15 @@
emit('deleteImg',item)
}
watch(()=>props,(n,o)=>{
if(n.Parent.SelectedDatas.length==0) {
multipleSelection.value = []
}
},{
deep: true,
immediate:true
})
</script>
<style lang="scss" scoped>
.CloudDisk-R-Center{
......@@ -154,11 +167,11 @@
padding-left: 24px;
}
.CloudDisk-R-Box{
width: 87px;
width: 247px;
position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
width: 85px;
width: 247px;
background: #8790F3;
box-shadow: 0px 0px 13px 0px #0D3EBC;
border-radius: 8px;
......@@ -183,7 +196,8 @@
display: block;
}
.CloudDisk-R-Img{
width: 85px;
width: 247px;
min-height: 40px;
height: auto;
margin-bottom: 9px;
border-radius: 8px;
......@@ -192,11 +206,11 @@
}
.CloudDisk-R-Img .el-image{
width: 85px;
width: 247px;
border-radius: 8px;
}
.title{
width: 85px;
width: 247px;
line-height: 17px;
overflow: hidden;
white-space: nowrap;
......@@ -221,6 +235,6 @@
}
::v-deep(.lazy__img[lazy=error]){
padding: 0;
width: 85px !important;
width: 247px !important;
}
</style>
\ No newline at end of file
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