Authored by 鲁尚清

【596】登录logo 支持配置-静态页面搭建完成 #1

<title>登录配置</title>
<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -9,6 +9,8 @@
@import "../css/esData.css";
/*cmdb数据同步*/
@import "../css/cmdbdatasync.css";
/*登录logo配置*/
@import "../css/logoConfig.css";
.d-flex {
display: flex;
... ...
.logoConfig-container{
padding:10px;
height: 100%;
overflow: auto;
background: #ffffff;
}
.logoConfig-item{
padding:0 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.logoConfig-item-content{
margin-bottom:10px;
padding-bottom: 20px;
}
.config-login{
display: flex;
align-items: center;
justify-content: space-around;
}
.config-name{
width:110px;
}
.config-tip{
text-align: left;
font-size: 12px;
margin-left:6px;
width:200px;
}
.upload-demo{
margin-left:20px;
}
.logo-img{
width:400px;
/*flex:1;*/
}
\ No newline at end of file
... ...
... ... @@ -137,6 +137,12 @@ const routes = [{
name: 'orgBustype',
component: () => myImport('views/orgBustype/index')
},
//登录logo配置
{
path: '/vue3/logoConfig',
name: 'logoConfig',
component: () => myImport('views/logoConfig/index')
},
];
// hash模式: createWebHashHistory
... ...
<div class="logoConfig-container" >
<el-tabs 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" >
个性化布局-{{item.name}}
</el-col>-->
<el-col :span="24">
<el-row class="logoConfig-item-content" v-if="item.imageUrl">
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录logo:</span>
<img :src="item.imageUrl" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明:登录表单上方展示的logo)
</dev>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlBg">
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录背景:</span>
<img :src="item.imageUrlBg" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明:登录表单下的背景图片)
</dev>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlSkin">
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录皮肤:</span>
<img :src="item.imageUrlSkin" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明:登录页面的皮肤图片)
</dev>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
<el-col :span="24">
<div class="config-login">
<span class="config-name">首页logo:</span>
<img :src="item.imageUrlIndex" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明:首页上方展示的logo)
</dev>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
... ...
export default {
name: 'logoConfig',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let activeName=Vue.ref('default');
//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'}
])
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 beforeAvatarUpload = (file) => {
const isJPG = file.type.indexOf('image/') != -1
if (!isJPG) {
proxy.$global.showMsg('您上传的不是图片文件,请选择图片!', 'error');
}
return isJPG
}
let getFile = (param) => {
let fileObj = param.file
console.log("param.data",param.data)
let params = {
file: fileObj,
id: props.parentNode.id
}
// 上传文件
proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) {
if (res && res.success) {
proxy.$global.showMsg("上传成功!");
}
})
imageUrl.value = URL.createObjectURL(fileObj);
}
//tabs标签点击事件
let handleClick=(tab,event)=>{}
// 挂载完
Vue.onMounted(() => {
})
return {
activeName,
handleClick,
fit,
imageUrlSkin,
imageUrlIndex,
imageUrlBg,
beforeAvatarUpload,
imageUrl,
getFile,
skinData
}
}
}
... ...
... ... @@ -231,7 +231,13 @@ const routes = [{
path: '/vue3/batchChangeLeaders',
name: 'batchChangeLeaders',
component: () => myImport('views/batchChangeLeaders/index')
}
},
//登录logo配置
{
path: '/vue3/logoConfig',
name: 'logoConfig',
component: () => myImport('views/logoConfig/index')
},
];
// hash模式: createWebHashHistory
... ...