monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Committed by 鲁尚清
Commit b2bda7bb0296ae3d0b61d72c84a65e1ff05dc966 1 parent 3392c6d5

【596】登录logo 支持配置-图片预览接口联调，登录页相关图片地址更改，两种布局下首页logo地址更改 #3

Inline Side-by-side
Showing 7 changed files with 272 additions and 12 deletions
@@ -383,5 +383,35 @@ layui.define(['sessions', 'form', 'common'],function (exports) { @@ -383,5 +383,35 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
383 return false; //阻止表单跳转 383 return false; //阻止表单跳转
384 384
385 } 385 }
  386 + //start lsq 设置登录配置的图片 2022-06-16
  387 + $.ajax({
  388 + url: '/config/getConfig',
  389 + data: {
  390 + configName: 'login'
  391 + },
  392 + async: false,
  393 + success(response) {
  394 + let loginSkin = response.skin;
  395 + let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
  396 + if(loginSkin =='default'){
  397 + let srcLogo=domainName+'default-login-logo';
  398 + let srcBg=domainName+'default-login-backGround';
  399 + $('.layadmin-user-login-header img').attr('src',srcLogo);
  400 + $('.layadmin-user-login-main').css('background-image','url('+srcBg+')');
  401 + }else if(loginSkin =='skin1'){
  402 + let srcLogo=domainName+'skin1-login-logo';
  403 + let srcSkin=domainName+'skin1-login-skin';
  404 + $('.layadmin-user-login-header img').attr('src',srcLogo);
  405 + $('.layadmin-user-login').css('background-image','url('+srcSkin+')');
  406 + }else if(loginSkin =='skin2'){
  407 + let srcLogo=domainName+'skin2-login-logo';
  408 + let srcSkin=domainName+'skin2-login-skin';
  409 + $('.layadmin-user-login-header img').attr('src',srcLogo);
  410 + $('.layadmin-user-login').css('background-image','url('+srcSkin+')')
  411 + }
  412 + }
  413 + });
  414 + //end lsq 2022-06-16
  415 +
386 }); 416 });
387 }); 417 });
@@ -12,6 +12,13 @@ @@ -12,6 +12,13 @@
12 localStorage.setItem("editFlag",val); 12 localStorage.setItem("editFlag",val);
13 } 13 }
14 } 14 }
  15 + layui.use(['jquery'], function () {
  16 + var $ = layui.jquery;
  17 + $(function (){
  18 + let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
  19 + $('.logo').attr('src',domainName+'home2-logo')
  20 + })
  21 + });
15 </script> 22 </script>
16 <div class="layui-header"> 23 <div class="layui-header">
17 <!-- 头部区域 --> 24 <!-- 头部区域 -->
@@ -31,6 +31,10 @@ @@ -31,6 +31,10 @@
31 } 31 }
32 } 32 }
33 }); 33 });
  34 + $(function (){
  35 + let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
  36 + $('.logo').attr('src',domainName+'home1-logo')
  37 + })
34 }); 38 });
35 39
36 40
  1 +<div class="logoConfig-container" :style="'height: '+height+'px'">
  2 + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  3 + <el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
  4 + <el-row class="logoConfig-item" v-if="hasRefresh" >
  5 + <!--<el-col :span="4" >
  6 + 个性化布局-{{item.name}}
  7 + </el-col>-->
  8 + <el-col :span="24">
  9 + <el-row class="logoConfig-item-content" v-if="item.imageUrl">
  10 + <el-col :span="24">
  11 + <div class="config-login">
  12 + <span class="config-name">登录logo：</span>
  13 + <div class="logo-img">
  14 + <img :src="domainName+item.imageUrl" alt="">
  15 + </div>
  16 + </div>
  17 + </el-col>
  18 + <el-col :span="24" class="config-upload">
  19 + <div class="config-upload-left">
  20 + <el-tooltip>
  21 + <template #content>
  22 + <dev class="config-tip" >
  23 + (备注说明：登录表单上方展示的logo,
  24 + {{item.name=='default'?'1200x126':item.name=='skin1'?'1314x236':item.name=='skin2'?'621x113':''}})
  25 + </dev>
  26 + </template>
  27 + <el-upload
  28 + class="upload-demo"
  29 + :show-file-list="false"
  30 + :before-upload="beforeAvatarUpload"
  31 + :data="item.imageUrl"
  32 + :multiple="false"
  33 + :http-request="getFile"
  34 + :auto-upload="true">
  35 + <el-button size="mini" type="primary">上传照片</el-button>
  36 + </el-upload>
  37 + </el-tooltip>
  38 + </div>
  39 + </el-col>
  40 +
  41 + </el-row>
  42 + <el-row class="logoConfig-item-content" v-if="item.imageUrlBg">
  43 + <el-col :span="24">
  44 + <div class="config-login">
  45 + <span class="config-name">登录背景：</span>
  46 + <div class="logo-img">
  47 + <img :src="domainName+item.imageUrlBg" alt="">
  48 + </div>
  49 + </div>
  50 + </el-col>
  51 + <el-col :span="24" class="config-upload">
  52 + <div class="config-upload-left">
  53 + <el-tooltip>
  54 + <template #content>
  55 + <dev class="config-tip">
  56 + (备注说明：登录表单下的背景图片,1920x576)
  57 + </dev>
  58 + </template>
  59 + <el-upload
  60 + class="upload-demo"
  61 + :show-file-list="false"
  62 + :before-upload="beforeAvatarUpload"
  63 + :data="item.imageUrlBg"
  64 + :multiple="false"
  65 + :http-request="getFile"
  66 + :auto-upload="true">
  67 + <el-button size="mini" type="primary">上传照片</el-button>
  68 + </el-upload>
  69 + </el-tooltip>
  70 + </div>
  71 + </el-col>
  72 + </el-row>
  73 + <el-row class="logoConfig-item-content" v-if="item.imageUrlSkin">
  74 + <el-col :span="24">
  75 + <div class="config-login">
  76 + <span class="config-name">登录皮肤：</span>
  77 + <div class="logo-img">
  78 + <img :src="domainName+item.imageUrlSkin" alt="">
  79 + </div>
  80 + </div>
  81 + </el-col>
  82 + <el-col :span="24" class="config-upload">
  83 + <div class="config-upload-left">
  84 + <el-tooltip>
  85 + <template #content>
  86 + <dev class="config-tip">
  87 + (备注说明：登录页面的皮肤图片,1920x1080)
  88 + </dev>
  89 + </template>
  90 + <el-upload
  91 + class="upload-demo"
  92 + :show-file-list="false"
  93 + :before-upload="beforeAvatarUpload"
  94 + :data="item.imageUrlSkin"
  95 + :multiple="false"
  96 + :http-request="getFile"
  97 + :auto-upload="true">
  98 + <el-button size="mini" type="primary">上传照片</el-button>
  99 + </el-upload>
  100 + </el-tooltip>
  101 + </div>
  102 + </el-col>
  103 + </el-row>
  104 + <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
  105 + <el-col :span="24" v-if="item.imageUrlIndex">
  106 + <div class="config-login">
  107 + <span class="config-name">{{item.name}}logo：</span>
  108 + <div class="logo-img">
  109 + <img :src="domainName+item.imageUrlIndex" alt="">
  110 + </div>
  111 + </div>
  112 + </el-col>
  113 + <el-col :span="24" class="config-upload" v-if="item.imageUrlIndex">
  114 + <div class="config-upload-left">
  115 + <el-tooltip>
  116 + <template #content>
  117 + <dev class="config-tip">
  118 + (备注说明：首页上方展示的logo,{{item.imageUrlIndex=='home1-logo'?'1200x126':'507x126'}})
  119 + </dev>
  120 + </template>
  121 + <el-upload
  122 + class="upload-demo"
  123 + :show-file-list="false"
  124 + :before-upload="beforeAvatarUpload"
  125 + :data="item.imageUrlIndex"
  126 + :multiple="false"
  127 + :http-request="getFile"
  128 + :auto-upload="true">
  129 + <el-button size="mini" type="primary">上传照片</el-button>
  130 + </el-upload>
  131 + </el-tooltip>
  132 + </div>
  133 + </el-col>
  134 + </el-row>
  135 + </el-col>
  136 + </el-row>
  137 + </el-tab-pane>
  138 + </el-tabs>
  139 +</div>
  1 +export default {
  2 + name: 'logoConfig',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data() {
  7 + },
  8 + props: {
  9 + },
  10 + setup: function (props, {attrs, slots, emit}) {
  11 + const {proxy} = Vue.getCurrentInstance();
  12 + let height = Vue.ref(window.innerHeight);
  13 + let activeName=Vue.ref('default');
  14 + //刷新页面
  15 + let hasRefresh=Vue.ref(true);
  16 + //ip地址
  17 + let domainName=Vue.ref(sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=");
  18 + //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
  19 + let skinData=Vue.ref([
  20 + {name:"default",imageUrl:'default-login-logo',imageUrlBg:'default-login-backGround'},
  21 + {name:"skin1",imageUrl:'skin1-login-logo',imageUrlSkin:'skin1-login-skin'},
  22 + {name:"skin2",imageUrl:'skin2-login-logo',imageUrlSkin:'skin2-login-skin'},
  23 + {name:"首页1",imageUrlIndex:'home1-logo'},
  24 + {name:"首页2",imageUrlIndex:'home2-logo'}
  25 + ])
  26 + //上传完后的图片预览
  27 + let imageUrl=Vue.ref('');
  28 +
  29 + let beforeAvatarUpload = (file) => {
  30 + const isJPG = file.type.indexOf('image/') != -1
  31 + if (!isJPG) {
  32 + proxy.$global.showMsg('您上传的不是图片文件,请选择图片！', 'error');
  33 + }
  34 + return isJPG
  35 + }
  36 + let getFile = (param) => {
  37 + let fileObj = param.file
  38 + let params = {
  39 + file: fileObj,
  40 + code: param.data
  41 + }
  42 + // 上传文件
  43 + proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
  44 + hasRefresh.value=false;
  45 + if (res && res.success) {
  46 + proxy.$global.showMsg("上传成功！");
  47 + }
  48 + setTimeout(function (){
  49 + hasRefresh.value=true;
  50 + },200)
  51 + })
  52 + imageUrl.value = URL.createObjectURL(fileObj);
  53 + }
  54 + //tabs标签点击事件
  55 + let handleClick=(tab,event)=>{}
  56 + // 挂载完
  57 + Vue.onMounted(() => {
  58 + })
  59 + return {
  60 + hasRefresh,
  61 + height,
  62 + activeName,
  63 + handleClick,
  64 + beforeAvatarUpload,
  65 + imageUrl,
  66 + getFile,
  67 + skinData,
  68 + domainName
  69 + }
  70 + }
  71 +}
@@ -275,14 +275,13 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect @@ -275,14 +275,13 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
275 // start lsq 个人信息修改 扩展中的登录皮肤输入框改为下拉选择 2022-03-12 275 // start lsq 个人信息修改 扩展中的登录皮肤输入框改为下拉选择 2022-03-12
276 let str=''; 276 let str='';
277 if(v.ddicCode=="loginSkin"){ 277 if(v.ddicCode=="loginSkin"){
278 - var selectOption=' <option value="default">默认布局</option>'+  
279 - ' <option value="skin1">skin1</option>'+  
280 - ' <option value="skin2">skin2</option>';  
281 -  
282 - str='<select data-property="'+v.ddicCode+'" placeholder="'+v.ddicDesc+'" data-id="" data-username="" data-sort="" data-remark="" class="select layui-select select-input-my" name="' + v.ddicCode + '" autocomplete="off">'+  
283 - ' <option value="" style="display:none;"></option>'+ selectOption +  
284 - '</select>';  
285 - }else if(v.ddicCode=="userLayout"){ 278 + rowHead = '';
  279 + rowTail = '';
  280 + }else{
  281 + rowHead = '<div class="layui-form-item">';
  282 + rowTail = '</div>';
  283 + }
  284 + if(v.ddicCode=="userLayout"){
286 var selectOption=' <option value="layout">默认布局</option>'+ 285 var selectOption=' <option value="layout">默认布局</option>'+
287 ' <option value="layout-nx">layout-nx</option>'; 286 ' <option value="layout-nx">layout-nx</option>';
288 287
@@ -294,17 +293,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect @@ -294,17 +293,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
294 293
295 } 294 }
296 295
297 - var property = ' <div class="layui-inline ">' +  
298 - ' <label class="layui-form-label">' + v.ddicName + '</label>' +  
299 - ' <div class="layui-input-inline">' + 296 + var property = '' ;
  297 + if(v.ddicCode!="loginSkin"){
  298 + property+=' <div class="layui-inline ">'+
  299 + ' <label class="layui-form-label">' + v.ddicName + '</label>';
  300 + property+= ' <div class="layui-input-inline">' +
300 str+ 301 str+
301 ' </div>' + 302 ' </div>' +
302 ' </div>'; 303 ' </div>';
  304 + }
  305 +
303 //end lsq 2022-03-12 306 //end lsq 2022-03-12
304 if (i % 2 == 0 && i != 0) { 307 if (i % 2 == 0 && i != 0) {
305 content += rowTail; 308 content += rowTail;
306 } 309 }
307 - if (i % 2 == 0) {//需要添加表头 310 + //lsq (|| i==1)注释掉了登录皮肤，所有第一个要占一行 2022-06-07
  311 + if (i % 2 == 0 || i==1) {//需要添加表头
308 content += rowHead + property; 312 content += rowHead + property;
309 } else {// 313 } else {//
310 content += property; 314 content += property;
@@ -31,6 +31,10 @@ @@ -31,6 +31,10 @@
31 } 31 }
32 } 32 }
33 }); 33 });
  34 + $(function (){
  35 + let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
  36 + $('.logo').attr('src',domainName+'home1-logo')
  37 + })
34 }); 38 });
35 39
36 40
@@ -73,6 +77,7 @@ @@ -73,6 +77,7 @@
73 </li> 77 </li>
74 78
75 </ul> 79 </ul>
  80 +
76 <img src="/src/style/img/logo.png" class="logo"> 81 <img src="/src/style/img/logo.png" class="logo">
77 <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right"> 82 <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
78 <!--搜索框检索--> 83 <!--搜索框检索-->