Files
Pichome/dzz/pichome/template/libraryview/pc/components/index/image.htm
2024-05-11 00:27:45 +08:00

221 lines
7.3 KiB
HTML

<div style="padding: 0 8px;" v-if="classifyType && LeftCurrenType =='filelist'">
<div class="file-headers">
<div></div>
<div @click.stop class="cannot-select">
<el-checkbox
v-model="hassub"
:true-label="1"
:false-label="0"
label="显示子文件夹内容"></el-checkbox>
</div>
</div>
</div>
<Image-Layout
ref="RefImageLayout"
:layout="ImageProps.layout"
:props="ImageProps.operation"
:showmessage="ImageProps.ShowMessage"
url="index.php?mod=banner&op=app&do=filelist"
:urlparam="ImageProps.urlparam"
@click="ImageDetails"
@returnparam="Imagereturnparam"
:scrollref="scrollref"
:screenshow="Screenshow"
:hassub="hassub">
<template v-slot:operation="{ data }">
<template v-if="data.share || data.down">
<template v-if="ImageProps.layout=='rowGrid' || ImageProps.layout=='imageList' || ImageProps.layout=='waterFall'">
<div class="operation-box" @click.stop>
<el-dropdown @command="ImageOperation" :teleported="false">
<span class="operation-btn">
<el-icon><More-Filled /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="data.share"
:command="ImageOperationVal('share',data.dpath)">
<el-icon><Share /></el-icon>
分享
</el-dropdown-item>
<el-dropdown-item v-if="data.download"
:command="ImageOperationVal('down',data.dpath)"
@click.stop>
<el-icon><Download /></el-icon>
下载
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<template v-else>
<el-dropdown @command="ImageOperation">
<el-button style="margin-left: 12px;" icon="MoreFilled"></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="data.share"
:command="ImageOperationVal('share',data.dpath)">
<el-icon><Share /></el-icon>
分享
</el-dropdown-item>
<el-dropdown-item v-if="data.download"
:command="ImageOperationVal('down',data.dpath)"
class="circulars">
<el-icon><Download /></el-icon>
下载
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</template>
</template>
</Image-Layout>
<script type="text/javascript">
var MixinImage = {
data(){
return {
hassub:1,
ImageProps:{
layout:'rowGrid',//rowGrid,imageList,waterFall
ShowMessage:{
display:[],
other:null
},
urlparam:{},
operation:{
click:true,//节点是否可被选择
dblclick:false,//节点是否可被双击选择
ctrl:false,//是否开启ctrl选中
shift:false,//是否开启shift选中
contextmenu:false,//是否开启右键
drap:false,//是否开启拖动选中
checked:false
}
},
ImageParam:{
checkedKdys:[]
},
ImageDataParam:{},
ImageDataIframe:null,
}
},
methods:{
ImageOperationVal(type,val){
return {
type:type,
val:val
};
},
async ImageOperation(data){
let self = this;
if(data.type == 'down'){
window.open('index.php?mod=banner&op=download&dpath='+data.val);
}else if(data.type == 'share'){
let {data: res} = await axios.post('index.php?mod=banner&op=appajax&do=createshare',{
path:data.val,
});
if(res.success){
CopyTxt(self,res.success);
}else{
self.$message({
message: '分享失败',
type: 'error'
});
}
}
},
Imagereturnparam(data){//列表加载完成返回得参数
this.ImageDataParam = data;
var arr = [];
for(var i in this.ImageDataParam.data){
arr.push(this.ImageDataParam.data[i].dpath)
}
if(this.ImageDataIframe){
var params = this.CommonSetParam();
params['ispage'] = this.ImageDataParam.ismore;
params['page'] = this.ImageDataParam.page;
params['total'] = this.ImageDataParam.total;
params['totalpage'] = this.ImageDataParam.totalpage;
params['perpage'] = this.ImageDataParam.perpage;
params['pagetab'] = 'pichome';
params['moreurl'] = 'index.php?mod=banner&op=app&do=filelist';
this.ImageDataIframe.sessionStorage.setItem('imgparam',JSON.stringify(params));
this.ImageDataIframe.sessionStorage.setItem('imgs',arr.join(','));
}else{
sessionStorage.setItem('imgs',arr.join(','));
}
},
ImagePageTurning(dpath){//详情翻页事件
const self = this;
self.$refs.RefImageLayout.SetScrollbarTop(dpath);
self.HandleElScrollbar();
},
HandleElScrollbar(){
var self = this;
self.$refs.RefImageLayout.HandleElScrollbar();
},
ImageDetails(item){//双击事件
const self = this;
var arr = [];
for(var i in this.ImageDataParam.data){
arr.push(this.ImageDataParam.data[i].dpath)
}
let curr = this.ImageDataParam.data.find(function(current){
return current.rid == item.id;
});
let index = this.ImageDataParam.data.findIndex(function(current){
return current.dpath == item.id;
});
console.log(window.location.href);
if(this.OpenDetailType == 'new' && this.ispc){
var params = this.CommonSetParam();
params['ispage'] = this.ImageDataParam.ismore;
params['page'] = this.ImageDataParam.page;
params['total'] = this.ImageDataParam.total;
params['totalpage'] = this.ImageDataParam.totalpage;
params['perpage'] = this.ImageDataParam.perpage;
params['moreurl'] = 'index.php?mod=banner&op=app&do=filelist';
this.ImageDataIframe = window.open('index.php?mod=details#path='+curr.dpath,'details');
this.ImageDataIframe.sessionStorage.setItem('imgparam',JSON.stringify(params));
this.ImageDataIframe.sessionStorage.setItem('imgs',arr.join(','));
this.ImageDataIframe.sessionStorage.setItem('selectindex',index);
this.ImageDataIframe.sessionStorage.setItem('href','index.php?mod=pichome&op=fileview#appid='+this.DocumentAppid);
this.ImageDataIframe.sessionStorage.setItem('fidname','classify');
}else{
let div = document.createElement("div");
div.className = 'Details-Iframe';
let iframe = document.createElement("iframe");
div.append(iframe);
iframe.style.opacity = "0";
sessionStorage.setItem('href','index.php?mod=pichome&op=fileview#appid='+this.DocumentAppid);
sessionStorage.setItem('selectindex',index);
iframe.src = 'index.php?mod=details&opentype=current#path='+curr.dpath;
document.body.appendChild(div);
sessionStorage.setItem('fidname','classify');
}
window.removeEventListener('message', this.ImageDetailsMessage)
window.addEventListener('message', this.ImageDetailsMessage)
},
ImageDetailsMessage(event){
if (event.origin !== window.location.origin) {
return;
}
this.ImagePageTurning(event.data.dpath);
},
},
mounted(){
var self = this;
}
};
</script>