monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Committed by 鲁尚清
Commit 0c9f7984b87ecd328cd60429bdb14a3e96c8d93b 1 parent 88233d46

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

Inline Side-by-side
Showing 4 changed files with 147 additions and 86 deletions
1 <title>登录配置</title> 1 <title>登录配置</title>
2 -<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/> 2 +<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99%!important;"/>
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 height: 100%; 3 height: 100%;
4 overflow: auto; 4 overflow: auto;
5 background: #ffffff; 5 background: #ffffff;
  6 + box-sizing: border-box;
6 } 7 }
7 .logoConfig-item{ 8 .logoConfig-item{
8 padding:0 20px; 9 padding:0 20px;
@@ -13,12 +14,11 @@ @@ -13,12 +14,11 @@
13 } 14 }
14 .logoConfig-item-content{ 15 .logoConfig-item-content{
15 margin-bottom:10px; 16 margin-bottom:10px;
16 - padding-bottom: 20px;  
17 } 17 }
18 .config-login{ 18 .config-login{
19 display: flex; 19 display: flex;
20 align-items: center; 20 align-items: center;
21 - justify-content: space-around; 21 + justify-content: center;
22 } 22 }
23 .config-name{ 23 .config-name{
24 width:110px; 24 width:110px;
@@ -31,8 +31,23 @@ @@ -31,8 +31,23 @@
31 } 31 }
32 .upload-demo{ 32 .upload-demo{
33 margin-left:20px; 33 margin-left:20px;
  34 + width:93px;
34 } 35 }
35 .logo-img{ 36 .logo-img{
36 width:400px; 37 width:400px;
37 - /*flex:1;*/ 38 + padding:10px;
  39 + border:1px solid #dddddd;
  40 +}
  41 +.logo-img img{
  42 + width:100%;
  43 +}
  44 +.config-upload{
  45 + margin-top:10px;
  46 + justify-content: center;
  47 + display: flex;
  48 +}
  49 +.config-upload-left{
  50 + width: 533px;
  51 + display: flex;
  52 + justify-content: flex-end;
38 } 53 }
1 -<div class="logoConfig-container" >  
2 - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> 1 +<div class="logoConfig-container" :style="'height: '+height+'px'">
  2 + <el-tabs v-if="hasRefresh" 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"> 3 <el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
4 <el-row class="logoConfig-item" > 4 <el-row class="logoConfig-item" >
5 <!--<el-col :span="4" > 5 <!--<el-col :span="4" >
@@ -10,20 +10,31 @@ @@ -10,20 +10,31 @@
10 <el-col :span="24"> 10 <el-col :span="24">
11 <div class="config-login"> 11 <div class="config-login">
12 <span class="config-name">登录logo：</span> 12 <span class="config-name">登录logo：</span>
13 - <img :src="item.imageUrl" class="logo-img" alt="">  
14 - <el-upload  
15 - class="upload-demo"  
16 - :show-file-list="false"  
17 - :before-upload="beforeAvatarUpload"  
18 - :data="item"  
19 - :multiple="false"  
20 - :http-request="getFile"  
21 - :auto-upload="true">  
22 - <el-button size="mini" type="primary">上传照片</el-button>  
23 - </el-upload>  
24 - <dev class="config-tip">  
25 - (备注说明：登录表单上方展示的logo)  
26 - </dev> 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>
27 </div> 38 </div>
28 </el-col> 39 </el-col>
29 40
@@ -32,20 +43,30 @@ @@ -32,20 +43,30 @@
32 <el-col :span="24"> 43 <el-col :span="24">
33 <div class="config-login"> 44 <div class="config-login">
34 <span class="config-name">登录背景：</span> 45 <span class="config-name">登录背景：</span>
35 - <img :src="item.imageUrlBg" class="logo-img" alt="">  
36 - <el-upload  
37 - class="upload-demo"  
38 - :show-file-list="false"  
39 - :before-upload="beforeAvatarUpload"  
40 - :data="item"  
41 - :multiple="false"  
42 - :http-request="getFile"  
43 - :auto-upload="true">  
44 - <el-button size="mini" type="primary">上传照片</el-button>  
45 - </el-upload>  
46 - <dev class="config-tip">  
47 - (备注说明：登录表单下的背景图片)  
48 - </dev> 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>
49 </div> 70 </div>
50 </el-col> 71 </el-col>
51 </el-row> 72 </el-row>
@@ -53,41 +74,61 @@ @@ -53,41 +74,61 @@
53 <el-col :span="24"> 74 <el-col :span="24">
54 <div class="config-login"> 75 <div class="config-login">
55 <span class="config-name">登录皮肤：</span> 76 <span class="config-name">登录皮肤：</span>
56 - <img :src="item.imageUrlSkin" class="logo-img" alt="">  
57 - <el-upload  
58 - class="upload-demo"  
59 - :show-file-list="false"  
60 - :before-upload="beforeAvatarUpload"  
61 - :data="item"  
62 - :multiple="false"  
63 - :http-request="getFile"  
64 - :auto-upload="true">  
65 - <el-button size="mini" type="primary">上传照片</el-button>  
66 - </el-upload>  
67 - <dev class="config-tip">  
68 - (备注说明：登录页面的皮肤图片)  
69 - </dev> 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>
70 </div> 101 </div>
71 </el-col> 102 </el-col>
72 </el-row> 103 </el-row>
73 <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex"> 104 <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
74 - <el-col :span="24"> 105 + <el-col :span="24" v-if="item.imageUrlIndex">
75 <div class="config-login"> 106 <div class="config-login">
76 - <span class="config-name">首页logo：</span>  
77 - <img :src="item.imageUrlIndex" class="logo-img" alt="">  
78 - <el-upload  
79 - class="upload-demo"  
80 - :show-file-list="false"  
81 - :before-upload="beforeAvatarUpload"  
82 - :data="item"  
83 - :multiple="false"  
84 - :http-request="getFile"  
85 - :auto-upload="true">  
86 - <el-button size="mini" type="primary">上传照片</el-button>  
87 - </el-upload>  
88 - <dev class="config-tip">  
89 - (备注说明：首页上方展示的logo)  
90 - </dev> 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>
91 </div> 132 </div>
92 </el-col> 133 </el-col>
93 </el-row> 134 </el-row>
@@ -95,6 +136,4 @@ @@ -95,6 +136,4 @@
95 </el-row> 136 </el-row>
96 </el-tab-pane> 137 </el-tab-pane>
97 </el-tabs> 138 </el-tabs>
98 -  
99 -  
100 </div> 139 </div>
@@ -9,21 +9,27 @@ export default { @@ -9,21 +9,27 @@ export default {
9 }, 9 },
10 setup: function (props, {attrs, slots, emit}) { 10 setup: function (props, {attrs, slots, emit}) {
11 const {proxy} = Vue.getCurrentInstance(); 11 const {proxy} = Vue.getCurrentInstance();
  12 + let height = Vue.ref(window.innerHeight);
12 let activeName=Vue.ref('default'); 13 let activeName=Vue.ref('default');
  14 + //刷新页面
  15 + let hasRefresh=Vue.ref(true);
  16 + //ip地址
  17 + let domainName=Vue.ref(sessionStorage.getItem('domainName')+"/api-auth/validata/code/");
13 //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo 18 //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
14 let skinData=Vue.ref([ 19 let skinData=Vue.ref([
15 - {name:"default",imageUrl:'/src/style/img/logo.png',imageUrlSkin:'',  
16 - imageUrlBg:'/src/style/img/login-form.png',imageUrlIndex:'/src/style/img/logo.png'},  
17 - {name:"skin1",imageUrl:'/src/style/img/login/skin/1/mingcheng.png',imageUrlSkin:'/src/style/img/login/skin/1/beijing.png',  
18 - imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'},  
19 - {name:"skin2",imageUrl:'/src/style/img/login/skin/2/mingcheng2.png',imageUrlSkin:'/src/style/img/login/skin/2/beijng.png',  
20 - imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'} 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'}
21 ]) 25 ])
22 - let imageUrl=Vue.ref('/src/style/img/logo.png');  
23 - let imageUrlSkin=Vue.ref('/src/style/img/login/skin/1/beijing.png');  
24 - let imageUrlBg=Vue.ref('/src/style/img/login-form.png');  
25 - let imageUrlIndex=Vue.ref('/src/style/img/logo.png');  
26 - let fit='contain'; 26 + let layoutIndexData=Vue.ref([
  27 + {name:'首页logo1',imageUrlIndex:'home1-logo'},
  28 + {name:'首页logo2',imageUrlIndex:'home2-logo'}
  29 + ])
  30 + //上传完后的图片预览
  31 + let imageUrl=Vue.ref('');
  32 +
27 let beforeAvatarUpload = (file) => { 33 let beforeAvatarUpload = (file) => {
28 const isJPG = file.type.indexOf('image/') != -1 34 const isJPG = file.type.indexOf('image/') != -1
29 if (!isJPG) { 35 if (!isJPG) {
@@ -33,17 +39,18 @@ export default { @@ -33,17 +39,18 @@ export default {
33 } 39 }
34 let getFile = (param) => { 40 let getFile = (param) => {
35 let fileObj = param.file 41 let fileObj = param.file
36 - console.log("param.data",param.data)  
37 -  
38 let params = { 42 let params = {
39 file: fileObj, 43 file: fileObj,
40 - id: props.parentNode.id 44 + code: param.data
41 } 45 }
42 // 上传文件 46 // 上传文件
43 - proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) { 47 + proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
  48 + hasRefresh.value=false;
44 if (res && res.success) { 49 if (res && res.success) {
45 proxy.$global.showMsg("上传成功！"); 50 proxy.$global.showMsg("上传成功！");
46 } 51 }
  52 + hasRefresh.value=true;
  53 +
47 }) 54 })
48 imageUrl.value = URL.createObjectURL(fileObj); 55 imageUrl.value = URL.createObjectURL(fileObj);
49 } 56 }
@@ -53,16 +60,16 @@ export default { @@ -53,16 +60,16 @@ export default {
53 Vue.onMounted(() => { 60 Vue.onMounted(() => {
54 }) 61 })
55 return { 62 return {
  63 + hasRefresh,
  64 + height,
56 activeName, 65 activeName,
57 handleClick, 66 handleClick,
58 - fit,  
59 - imageUrlSkin,  
60 - imageUrlIndex,  
61 - imageUrlBg,  
62 beforeAvatarUpload, 67 beforeAvatarUpload,
63 imageUrl, 68 imageUrl,
64 getFile, 69 getFile,
65 - skinData 70 + skinData,
  71 + layoutIndexData,
  72 + domainName
66 } 73 }
67 } 74 }
68 } 75 }