Skip to content

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

启用logo

parent 807e4736
Show whitespace changes
Inline Side-by-side
Showing with 145 additions and 35 deletions
src/views/TeamCenter/LogoDisposition.vue
View file @ ef0fc804
......@@ -46,27 +46,48 @@
<div class="CloudDisk-R-Center row flex-between">
<template v-for="(item,index) in acquiesceIMG">
<div v-if="item.FileType==1" style="position: relative;">
<div class="MoreClick row items-center cursor-pointer" @click.stop="showMore(index)"><el-icon size="13"><MoreFilled /></el-icon></div>
<div class="cloudDownText row flex-between" v-if="item.width">
<span>{{item.width}}*{{item.height}} px</span>
</div>
<el-dropdown trigger="click">
<div class="CloudDisk-R-Box cursor-pointer">
<div class="CloudDisk-R-Box cursor-pointer" style="background: #f1f2f4;">
<div v-if="!IsEnable" class="CloudDisk-R-Img row items-center flex-center">
<el-image :src="item.logo" style="width: auto; height: auto;"
fit="cover"/>
</div>
<FileInput v-else @change="files => insertImageElement(files,index)">
<div class="CloudDisk-R-Img row items-center flex-center">
<el-image :src="item.FilePath?item.FilePath:item.logo" style="width: auto; height: auto;"
<el-image v-if="item.FilePath" :src="item.FilePath" style="width: auto; height: auto;"
fit="cover"/>
<el-button v-else icon="Top" link></el-button>
</div>
</FileInput>
</div>
<div class="MoreClickCenter" v-if="ShowMessage&&currentMore==index">
<div class="q-pa-xs microsoft">
<div class="row items-center cloudDownControls" @click="seeLogo(index)">
<el-icon size="14px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">默认LOGO</span>
</div>
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<FileInput @change="files => insertImageElement(files,index)">
<el-dropdown-item v-if="!item.FilePath" icon="Upload">企业LOGO</el-dropdown-item>
<el-dropdown-item v-else icon="EditPen">企业LOGO</el-dropdown-item>
<div class="row items-center cloudDownControls">
<el-icon size="14px" theme="filled">
<Upload v-if="!item.FilePath"></Upload>
<EditPen v-else></EditPen>
</el-icon>
<span class="q-pl-md">企业LOGO</span>
</div>
</FileInput>
<el-dropdown-item icon="View" @click="seeLogo(index)">默认LOGO</el-dropdown-item>
<el-dropdown-item icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div v-if="item.FilePath" class="row items-center cloudDownControls" @click="seeLogo(index,1)">
<el-icon size="14px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">企业LOGO</span>
</div>
</div>
</div>
</div>
</template>
</div>
......@@ -74,34 +95,56 @@
<div class="CloudDisk-R-Center row flex-between">
<template v-for="(item,index) in acquiesceIMG">
<div v-if="item.FileType==2" style="position: relative;">
<div class="MoreClick row items-center cursor-pointer" style="background: #f1f2f4;" @click.stop="showMore(index)"><el-icon size="13"><MoreFilled /></el-icon></div>
<div class="cloudDownText row flex-between" v-if="item.width">
<span>{{item.width}}*{{item.height}} px</span>
</div>
<el-dropdown trigger="click">
<div class="CloudDisk-R-Box cursor-pointer">
<div v-if="!IsEnable" class="CloudDisk-R-Img row items-center flex-center">
<el-image :src="item.logo" style="width: auto; height: auto;"
fit="cover"/>
</div>
<FileInput v-else @change="files => insertImageElement(files,index)">
<div class="CloudDisk-R-Img row items-center flex-center">
<el-image :src="item.FilePath?item.FilePath:item.logo" style="width: auto; height: auto;"
<el-image v-if="item.FilePath" :src="item.FilePath" style="width: auto; height: auto;"
fit="cover"/>
<el-button v-else icon="Top" link></el-button>
</div>
</FileInput>
</div>
<div class="MoreClickCenter" v-if="ShowMessage&&currentMore==index">
<div class="q-pa-xs microsoft">
<div class="row items-center cloudDownControls" @click="seeLogo(index)">
<el-icon size="14px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">默认LOGO</span>
</div>
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<FileInput @change="files => insertImageElement(files,index)">
<el-dropdown-item v-if="!item.FilePath" icon="Upload">企业LOGO</el-dropdown-item>
<el-dropdown-item v-else icon="EditPen">企业LOGO</el-dropdown-item>
<div class="row items-center cloudDownControls">
<el-icon size="14px" theme="filled">
<Upload v-if="!item.FilePath"></Upload>
<EditPen v-else></EditPen>
</el-icon>
<span class="q-pl-md">企业LOGO</span>
</div>
</FileInput>
<el-dropdown-item icon="View" @click="seeLogo(index)">默认LOGO</el-dropdown-item>
<el-dropdown-item icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div v-if="item.FilePath" class="row items-center cloudDownControls" @click="seeLogo(index,1)">
<el-icon size="14px" theme="filled">
<View></View>
</el-icon>
<span class="q-pl-md">企业LOGO</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
<template #footer>
<el-button size="large" class="ppt-button" @click="()=>FormVisible=false">关闭设置</el-button>
<el-button size="large" type="primary" class="ppt-button" @click="saveLogo()">保存设置</el-button>
<el-button size="large" type="primary" class="ppt-button" @click="saveLogo()"
:disabled="!IsEnable">保存设置</el-button>
</template>
</el-dialog>
......@@ -168,7 +211,7 @@
import { useUserStore } from "@/store";
import { ElLoading, ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { ref, reactive, watch } from "vue";
import { ref, reactive, watch, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import InviteMember from '@/views/components/Team/InviteMember.vue'
import { dataURLtoFile } from "@/utils/common";
......@@ -222,8 +265,14 @@
const IsEnable = ref(0 as any)
if(userInfo.value.IsEnableLogo==1) IsEnable.value = userInfo.value.IsEnableLogo
const parameters = ref<any>([])
const ShowMessage = ref(false)
const currentMore = ref(0)
// userInfo.GroupLogoList
const showMore = (index:Number) => {
ShowMessage.value = true
currentMore.value = index
}
const seeLogo = (index:number,type:any) => {
currentImg.value = index
srcList.value = type?imgList.value:acquiesceLogo.value
......@@ -231,7 +280,6 @@
}
const getSize = async () => {
loading.value = true
acquiesceIMG.value = []
for(let i=0;i<6;i++){
let x = acquiesceLogo.value[i]
let newSize = await FileService.getImageSizeWithoutDownloading(x)
......@@ -252,7 +300,7 @@
}
const showFormHandler = () => {
FormVisible.value = true
getSize()
// getSize()
}
const enableLogo = async () =>{
const response = await LOGOService.EnableGroupLogo(IsEnable.value)
......@@ -261,13 +309,26 @@
}
}
const saveLogo = async () =>{
// if(!IsEnable.value) {
// return ElMessage.error({message:`请启用LOGO，并完善LOGO图`})
// ElMessageBox.confirm(
// `此操作将不会保存新增、修改的企业LOGO，是否确定?`,
// '提示',
// {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// }
// ).then(async () => {
// await enableLogo()
// }).catch(() => {})
// }
for(let i=0;i<acquiesceIMG.value.length;i++){
let x = acquiesceIMG.value[i]
if(!x.FilePath) {
return ElMessage.error({message:`请完善所有尺寸的LOGO`})
}
}
// await enableLogo()
loadingInstance.value = ElLoading.service({
text:'收集需要处理的图片'
......@@ -392,6 +453,16 @@
}
}
getSize()
onMounted( () => {
document.addEventListener('click', (e) => {
if (ShowMessage.value) {
ShowMessage.value = false
}
});
})
onBeforeUnmount(() => {
document.removeEventListener('click', () => {});
})
</script>
<style lang="scss" scoped>
......@@ -486,7 +557,7 @@
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 2032
z-index: 2999;
}
.modal-mask {
position: absolute;
......@@ -518,5 +589,44 @@
align-items: center;
width: 100%;
height: 100%;
}
.MoreClick{
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
background: #fff;
border-radius: 10px;
text-align: center;
padding: 0 3px;
}
.MoreClickCenter{
position: absolute;
top: 33px;
left: -10px;
background: #fff;
border-radius: 3px;
box-shadow: 2px 2px 10px 2px #EEE;
z-index: 2;
font-size: 12px;
}
.MoreClickCenter::after{
content: '';
width: 0;
height: 0;
position: absolute;
left: 25px;
top: -8px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #FFF;
}
.cloudDownControls{
padding: 5px 10px;
cursor: pointer;
}
.cloudDownControls:hover{
background: #dedcff;
color: $el-color-primary;
}
</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