monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 2b511525698b82954a842171803853c621820e80 1 parent cde6943f

【596】登录logo 支持配置-接口联调-图片上传接口联调，页面样式调整 #2

Inline Side-by-side
Showing 4 changed files with 111 additions and 50 deletions
<title>登录配置</title>
<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/>
<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99%!important;"/>
... ...
... ... @@ -3,6 +3,7 @@
height: 100%;
overflow: auto;
background: #ffffff;
box-sizing: border-box;
}
.logoConfig-item{
padding:0 20px;
... ... @@ -13,12 +14,11 @@
}
.logoConfig-item-content{
margin-bottom:10px;
padding-bottom: 20px;
}
.config-login{
display: flex;
align-items: center;
justify-content: space-around;
justify-content: center;
}
.config-name{
width:110px;
... ... @@ -31,8 +31,23 @@
}
.upload-demo{
margin-left:20px;
width:93px;
}
.logo-img{
width:400px;
/*flex:1;*/
padding:10px;
border:1px solid #dddddd;
}
.logo-img img{
width:100%;
}
.config-upload{
margin-top:10px;
justify-content: center;
display: flex;
}
.config-upload-left{
width: 533px;
display: flex;
justify-content: flex-end;
}
\ No newline at end of file
... ...
<div class="logoConfig-container" >
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<div class="logoConfig-container" :style="'height: '+height+'px'">
<el-tabs v-if="hasRefresh" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
<el-row class="logoConfig-item" >
<!--<el-col :span="4" >
... ... @@ -10,20 +10,31 @@
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录logo：</span>
<img :src="item.imageUrl" class="logo-img" alt="">
<div class="logo-img">
<img :src="domainName+item.imageUrl" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip" >
(备注说明：登录表单上方展示的logo,
{{item.name=='default'?'1200x126':item.name=='skin1'?'1314x236':item.name=='skin2'?'621x113':''}})
</dev>
</template>
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:data="item.imageUrl"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：登录表单上方展示的logo)
</dev>
</el-tooltip>
</div>
</el-col>
... ... @@ -32,20 +43,30 @@
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录背景：</span>
<img :src="item.imageUrlBg" class="logo-img" alt="">
<div class="logo-img">
<img :src="domainName+item.imageUrlBg" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip">
(备注说明：登录表单下的背景图片,1920x576)
</dev>
</template>
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:data="item.imageUrlBg"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：登录表单下的背景图片)
</dev>
</el-tooltip>
</div>
</el-col>
</el-row>
... ... @@ -53,41 +74,61 @@
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录皮肤：</span>
<img :src="item.imageUrlSkin" class="logo-img" alt="">
<div class="logo-img">
<img :src="domainName+item.imageUrlSkin" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip">
(备注说明：登录页面的皮肤图片,1920x1080)
</dev>
</template>
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:data="item.imageUrlSkin"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：登录页面的皮肤图片)
</dev>
</el-tooltip>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
<el-col :span="24">
<el-col :span="24" v-if="item.imageUrlIndex">
<div class="config-login">
<span class="config-name">首页logo：</span>
<img :src="item.imageUrlIndex" class="logo-img" alt="">
<span class="config-name">{{item.name}}logo：</span>
<div class="logo-img">
<img :src="domainName+item.imageUrlIndex" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload" v-if="item.imageUrlIndex">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip">
(备注说明：首页上方展示的logo,{{item.imageUrlIndex=='home1-logo'?'1200x126':'507x126'}})
</dev>
</template>
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:data="item.imageUrlIndex"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：首页上方展示的logo)
</dev>
</el-tooltip>
</div>
</el-col>
</el-row>
... ... @@ -95,6 +136,4 @@
</el-row>
</el-tab-pane>
</el-tabs>
</div>
... ...
... ... @@ -9,21 +9,27 @@ export default {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let activeName=Vue.ref('default');
//刷新页面
let hasRefresh=Vue.ref(true);
//ip地址
let domainName=Vue.ref(sessionStorage.getItem('domainName')+"/api-auth/validata/code/");
//imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
let skinData=Vue.ref([
{name:"default",imageUrl:'/src/style/img/logo.png',imageUrlSkin:'',
imageUrlBg:'/src/style/img/login-form.png',imageUrlIndex:'/src/style/img/logo.png'},
{name:"skin1",imageUrl:'/src/style/img/login/skin/1/mingcheng.png',imageUrlSkin:'/src/style/img/login/skin/1/beijing.png',
imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'},
{name:"skin2",imageUrl:'/src/style/img/login/skin/2/mingcheng2.png',imageUrlSkin:'/src/style/img/login/skin/2/beijng.png',
imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'}
{name:"default",imageUrl:'default-login-logo',imageUrlBg:'default-login-backGround'},
{name:"skin1",imageUrl:'skin1-login-logo',imageUrlSkin:'skin1-login-skin'},
{name:"skin2",imageUrl:'skin2-login-logo',imageUrlSkin:'skin2-login-skin'},
{name:"首页1",imageUrlIndex:'home1-logo'},
{name:"首页2",imageUrlIndex:'home2-logo'}
])
let imageUrl=Vue.ref('/src/style/img/logo.png');
let imageUrlSkin=Vue.ref('/src/style/img/login/skin/1/beijing.png');
let imageUrlBg=Vue.ref('/src/style/img/login-form.png');
let imageUrlIndex=Vue.ref('/src/style/img/logo.png');
let fit='contain';
let layoutIndexData=Vue.ref([
{name:'首页logo1',imageUrlIndex:'home1-logo'},
{name:'首页logo2',imageUrlIndex:'home2-logo'}
])
//上传完后的图片预览
let imageUrl=Vue.ref('');
let beforeAvatarUpload = (file) => {
const isJPG = file.type.indexOf('image/') != -1
if (!isJPG) {
... ... @@ -33,17 +39,18 @@ export default {
}
let getFile = (param) => {
let fileObj = param.file
console.log("param.data",param.data)
let params = {
file: fileObj,
id: props.parentNode.id
code: param.data
}
// 上传文件
proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) {
proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
hasRefresh.value=false;
if (res && res.success) {
proxy.$global.showMsg("上传成功！");
}
hasRefresh.value=true;
})
imageUrl.value = URL.createObjectURL(fileObj);
}
... ... @@ -53,16 +60,16 @@ export default {
Vue.onMounted(() => {
})
return {
hasRefresh,
height,
activeName,
handleClick,
fit,
imageUrlSkin,
imageUrlIndex,
imageUrlBg,
beforeAvatarUpload,
imageUrl,
getFile,
skinData
skinData,
layoutIndexData,
domainName
}
}
}
... ...