From ccd7b3c5b24fa115a732ea915e2e586de717ea1c Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期一, 26 九月 2022 21:39:43 +0800 Subject: [PATCH] 完成logo管理 --- public/index.html | 5 src/views/login/index.vue | 10 src/components/Table/index.vue | 89 ++++++++ src/views/systemSetting/platform/portalSetting/index.vue | 179 +++++++++++---- src/components/Img/index.vue | 26 ++ src/router/index.js | 5 src/views/layout/components/Menu/index.vue | 2 src/utils/helper.js | 17 + src/main.js | 2 src/components/Upload/index.vue | 84 +++++++ src/App.vue | 52 ++++ src/views/operate/lawEnforcement/index.vue | 97 ++++++++ src/views/systemSetting/platform/mySetting/index.vue | 41 ++- 13 files changed, 530 insertions(+), 79 deletions(-) diff --git a/public/index.html b/public/index.html index 6127cfe..fe15af4 100644 --- a/public/index.html +++ b/public/index.html @@ -4,9 +4,10 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> - <link rel="icon" href="<%= BASE_URL %>favicon.ico"> + <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> + <!-- <link rel="icon" href="http://140.143.152.226:8410/sczhzf/M00/00/00/rBUAD2MxQ8CAXBxsAAACVqU61WY764.png"> --> <!-- <title><%= htmlWebpackPlugin.options.title %></title> --> - <title>閬傛槍鎵ф硶骞冲彴</title> + <!-- <title>閬傛槍鎵ф硶骞冲彴</title> --> </head> <body> <noscript> diff --git a/src/App.vue b/src/App.vue index 71c8728..0c85672 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,12 +3,52 @@ <router-view /> </div> </template> - -<style > - -</style> <script> -export default { +export default { + data() { + return { + mytitle: '', + } + }, + async created() { + const imgObj = await this.getIcon(); + this.changIcon(imgObj); + }, + methods: { + changIcon(obj) { + var link = document.querySelector("link [rel*='icon']") || document.createElement("link"); + var title = document.querySelector("title") || document.createElement("title"); + link.type = "image/x-icon"; + link.rel = "shortcut icon"; + link.href = obj.chromeLinkUrl; //icon鍥炬爣 + title.innerHTML = obj.title; + document.getElementsByTagName("head")[0].appendChild(link); + document.getElementsByTagName("head")[0].appendChild(title); + }, + // 鑾峰彇icon + async getIcon() { + let result; + const pic = JSON.parse(localStorage.getItem('pic')); + if (pic) { + result = pic; + console.log('缂撳瓨') + } else { + console.log('璇锋眰'); + await this.$axios({ + method: 'get', + url: 'sccg/system/portal/logo/search', + }).then(res => { + console.log(res); + result = res.data; + localStorage.setItem('pic',JSON.stringify(result)); + }) + } + return result; + }, + } }; -</script> \ No newline at end of file +</script> +<style> + +</style> \ No newline at end of file diff --git a/src/components/Img/index.vue b/src/components/Img/index.vue new file mode 100644 index 0000000..a2e4c87 --- /dev/null +++ b/src/components/Img/index.vue @@ -0,0 +1,26 @@ +<template> + <div class="Img"> + <img :src="imgUrl" alt="" :style="{'width':width,'height':height,'border-radius':radius}"> + </div> +</template> +<script> +export default { + data() { + return { + + } + }, + props: ['imgUrl', 'width', 'height', 'radius'], +} +</script> +<style lang="scss" scoped> +.Img { + width: 100%; + height: 100%; + background-color: rgba(249, 249, 249, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} +</style> \ No newline at end of file diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue new file mode 100644 index 0000000..23b30cf --- /dev/null +++ b/src/components/Table/index.vue @@ -0,0 +1,89 @@ +<template> + <div class="Table"> + <el-table ref="multipleTable" :data="tableData" style="width: 100%" + :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" + :row-class-name="tableRowClassName"> + <el-table-column type="selection" :min-width="5"> + </el-table-column> + <el-table-column v-for="(item,idx) in option.group" :key="item.prop" :label="item.label" :prop="item.prop" + :min-width="item['min-width'] ? item['item.min-width']:'10'"> + <template slot-scope="scope"> + <div v-if="item.type === 'text'"> + {{scope.row[item.prop]}} + </div> + <div v-else class="operationBox"> + <div class="divider" v-for="(child,index) in item.children" :key="child.operationName"> + <span @click="backMykey(scope.$index,child.mykey)">{{child.operationName}}</span> + <el-divider direction="vertical" v-if="index !== item.children.length-1"></el-divider> + </div> + </div> + </template> + </el-table-column> + </el-table> + </div> +</template> +<script> +import { deepClone } from '@/utils/helper'; +export default { + data() { + return { + + } + }, + props: { + tableData: { + type: Array, + dafault: () => [], + }, + tableOption: { + type: Object, + default: () => { } + }, + openDialog:{ + type:Function, + default:()=>{()=>{console.log(1)}} + } + }, + computed: { + option() { + return deepClone(this.tableOption); + } + }, + methods: { + // 璁剧疆琛ㄦ牸鏂戦┈绾� + tableRowClassName({ row, rowIndex }) { + if ((rowIndex + 1) % 2 == 0) { + return 'warning-row'; + } else { + return 'success-row'; + } + return ''; + }, + // 鑾峰彇鐐瑰嚮鐨勫叧閿瓧 + backMykey(index,value){ + this.$emit('openDialog',{index,mykey:value}) + } + } +} +</script> +<style lang="scss" scoped> +.Table { + width: 100%; + .el-table{ + color: #4b9bb7; + } + &::v-deep .warning-row { + background-color: #06122c; + } + + &::v-deep .success-row { + background-color: #071f39; + } + .operationBox{ + display: flex; + } + .el-divider{ + background-color: #4b9bb7; + } +} +</style> \ No newline at end of file diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue new file mode 100644 index 0000000..827e39b --- /dev/null +++ b/src/components/Upload/index.vue @@ -0,0 +1,84 @@ +<template> + <el-upload :file-list="fileList" class="upload-demo" action="http://42.193.1.25:8082/sccg/file/medias" multiple + :show-file-list="flag" :before-upload="beforeUpload" :limit="50" :on-success="handleSuccess" + :headers="getToken()"> + <div class="uploadBtn" v-if="picUrl===''"> + <i class="el-icon-plus"></i> + <span>涓婁紶鍥剧墖</span> + </div> + <MyImg :imgUrl="picUrl" width="105px" height="105px" radius="4px" v-else class="uploadBtn"></MyImg> + </el-upload> +</template> +<script> +import MyImg from '@/components/Img' +export default { + components: { + MyImg, + }, + data() { + return { + fileList: [], + flag: false, + }; + }, + methods: { + beforeUpload(rawFile) { + console.log(rawFile); + if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') { + this.$message.error('Avatar picture must be jpg/svg/jpeg/png format!') + return false + } else if (rawFile.size / 105 / 105 > 2) { + this.$message.error('Avatar picture size can not exceed 2MB!') + return false + } + return true + }, + handleSuccess(res, file, filelist) { + console.log(res); + this.$emit('getPicUrl', { obj: res.data, value: this.mykey }); + }, + getToken() { + const token = localStorage.getItem('token'); + const tokenHead = localStorage.getItem('tokenHead'); + if (token && tokenHead) { + return { Authorization: tokenHead + token } + } + } + }, + watch:{ + picUrl(newVal,oldVal){ + console.log(newVal); + } + }, + mounted() { + console.log(this.picUrl); + }, + props: ['getPicUrl', 'mykey', 'picUrl'] +} +</script> +<style lang="scss" scoped> +.upload-demo { + display: flex; + height: 120px; +} + +.uploadBtn { + width: 120px; + height: 120px; + background-color: rgba(249, 249, 249, 1); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 4px; + + i { + font-size: 30px; + font-weight: 650; + } + + span { + line-height: 22px; + } +} +</style> \ No newline at end of file diff --git a/src/main.js b/src/main.js index 9a5d68f..8ea7900 100644 --- a/src/main.js +++ b/src/main.js @@ -15,7 +15,7 @@ import api from "./utils/request" Vue.prototype.$axios=api console.log(process.env.VUE_APP_BASE_API); -Vue.use(ElementUI) +Vue.use(ElementUI); new Vue({ router, store, diff --git a/src/router/index.js b/src/router/index.js index f54e285..709b9f6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -151,6 +151,11 @@ component: () => import('@/views/operate/rectification/renovationList'), } ] + }, + { + path:'lawEnforcement', + name:'lawEnforcement', + component:()=>import('@/views/operate/lawEnforcement') } ] }, diff --git a/src/utils/helper.js b/src/utils/helper.js new file mode 100644 index 0000000..3b6dda5 --- /dev/null +++ b/src/utils/helper.js @@ -0,0 +1,17 @@ +// 娣辨嫹璐� +function deepClone(obj){ + let objClone = Array.isArray(obj) ? [] : {}; + if(obj && typeof obj === 'object' && obj != null){ + for(let key in obj){ + if(obj.hasOwnProperty(key)){ + if(obj[key] && typeof obj[key] === 'object'){ + objClone[key] = deepClone(obj[key]); + }else{ + objClone[key] = obj[key]; + } + } + } + } + return objClone; +} +export {deepClone}; \ No newline at end of file diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue index 6588ba7..c97376b 100644 --- a/src/views/layout/components/Menu/index.vue +++ b/src/views/layout/components/Menu/index.vue @@ -98,7 +98,7 @@ <el-menu-item index="/home/operate/rectification/surveyList">鏅煡鍒楄〃</el-menu-item> <el-menu-item index="/home/operate/rectification/renovationList">鏁存不鍒楄〃</el-menu-item> </el-submenu> - <el-menu-item index="/home/operate/dasd">宸℃煡鎵ф硶</el-menu-item> + <el-menu-item index="/home/operate/lawEnforcement">宸℃煡鎵ф硶</el-menu-item> <el-menu-item index="/home/operate/dasds">妗堝嵎鏌ヨ</el-menu-item> <el-submenu index="/home/operate/fivepack" class="secondMenu"> <template slot="title"> diff --git a/src/views/login/index.vue b/src/views/login/index.vue index d33b057..81992e8 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -4,7 +4,7 @@ <div class="text"> <div class="logo"> <img - src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__155eeb2ceaac89ec717869a050964a36.svg" + :src="imgUrl" alt=""> </div> <div class="text-r"> @@ -80,6 +80,7 @@ // username: "admin", // password: "macro123", }, + imgUrl:'', loginRules: { username: [ { required: true, trigger: "blur", validator: validateUsername }, @@ -92,7 +93,12 @@ pwdType: false, }; }, - created() { }, + created() { + const pic = JSON.parse(localStorage.getItem('pic')); + if(pic){ + this.imgUrl = pic.loginPageIconUrl + } + }, methods: { showPwd() { if (!this.pwdType) { diff --git a/src/views/operate/lawEnforcement/index.vue b/src/views/operate/lawEnforcement/index.vue new file mode 100644 index 0000000..7ae0911 --- /dev/null +++ b/src/views/operate/lawEnforcement/index.vue @@ -0,0 +1,97 @@ +<template> + <div class="law-enforcement"> + <MyTable :tableData="list" :tableOption="tableOption" @openDialog="changeDialog"> + </MyTable> + <!-- 缁勪欢鍖� --> + <div class="dialog"> + <el-dialog v-if="visible" :visible.async="visible" title="闂鐧昏" width="60%" :before-close="handleClose"> + <checkIn></checkIn> + </el-dialog> + </div> + </div> +</template> +<script> +import MyTable from '@/components/Table' +export default { + components: { + MyTable, + }, + data() { + return { + list: [ + { + name: '寮犱笁', + sex: '鐢�', + age: '23', + 'min-width': '10', + }, + { + name: '寮犲洓', + sex: '鐢�', + age: '23', + 'min-width': '10', + }, + { + name: '涓稿皬鍎�', + sex: '濂�', + age: '11', + 'min-width': '10', + }, + ], + tableOption: { + group: [ + { + label: '濮撳悕', + type: 'text', + prop: 'name', + }, + { + label: '骞撮緞', + type: 'text', + prop: 'age', + }, + { + label: '鎬у埆', + type: 'text', + prop: 'sex', + }, + { + label: '鎿嶄綔', + type: 'operation', + prop: 'operation', + children: [ + { + operationName: '鏌ョ湅', + mykey : 'look', + }, + { + operationName: '淇敼', + mykey:'update', + } + ] + }, + ] + }, + visible:false + } + }, + methods:{ + // 鍏抽棴瀵硅瘽妗� + handleClose(done) { + this.$confirm('纭鍏抽棴锛�') + .then(_ => { + this.visible = false; + done(); + }) + .catch(_ => { }); + }, + // 鑾峰彇鎿嶄綔缁撴灉 + changeDialog({index,mykey}){ + console.log(index,mykey); + } + } +} +</script> +<style lang="scss" scoped> + +</style> \ No newline at end of file diff --git a/src/views/systemSetting/platform/mySetting/index.vue b/src/views/systemSetting/platform/mySetting/index.vue index b928e83..b221b7f 100644 --- a/src/views/systemSetting/platform/mySetting/index.vue +++ b/src/views/systemSetting/platform/mySetting/index.vue @@ -13,7 +13,8 @@ <h4>{{item.title}}</h4> <!-- 瀛愯彍鍗� --> <ul class="menu"> - <li class="menuItem" v-for="(son,sonIndex) in item.children" @click.stop="getContent(index,sonIndex)"> + <li class="menuItem" v-for="(son,sonIndex) in item.children" + @click.stop="getContent(index,sonIndex)"> <span>{{son.title}}</span> </li> </ul> @@ -46,27 +47,34 @@ export default { data() { return { - menuList:[], - article:[], + menuList: [], + article: [], } }, - created(){ + created() { const { getMenuList } = this; getMenuList(); }, - methods:{ + methods: { // 鑾峰彇鑿滃崟鍒楄〃 - getMenuList(){ - this.$axios.get('sccg/menu/treeList').then(res=>{ - console.log(res); - const {data} = res; - this.menuList = data; - this.getContent(0); - }) + getMenuList() { + // this.$axios({ + // method: 'get', + // url: 'sccg/system/portal/menu/search', + // data: { + // current: 1, + // size: 10, + // } + // }).then(res => { + // console.log(res); + // const { data } = res; + // this.menuList = data; + // this.getContent(0); + // }) }, // 鍒囨崲鑿滃崟鍐呭灞曠ず - getContent(index,sonIndex=null){ - if(sonIndex===null){ + getContent(index, sonIndex = null) { + if (sonIndex === null) { this.article = this.menuList[index]; return; } @@ -98,6 +106,7 @@ border: 1px solid #fff; padding: 20px; height: calc(100vh - 120px); + .asideItem { h4 { line-height: 40px; @@ -120,6 +129,7 @@ .content { flex: 1; margin-left: 100px; + h4 { margin: 0; line-height: 80px; @@ -134,7 +144,8 @@ .editItem { line-height: 40px; display: flex; - span{ + + span { margin-left: 10px; } } diff --git a/src/views/systemSetting/platform/portalSetting/index.vue b/src/views/systemSetting/platform/portalSetting/index.vue index 3f9217c..3bac3e2 100644 --- a/src/views/systemSetting/platform/portalSetting/index.vue +++ b/src/views/systemSetting/platform/portalSetting/index.vue @@ -11,30 +11,23 @@ <li> <div class="desc">浜у搧鍥炬爣锛氫富瑕佺敤浜庣綉椤靛ご閮�</div> <div class="upload"> - <div class="uploadBtn"> - <i class="el-icon-plus"></i> - <span>涓婁紶鍥剧墖</span> - </div> + <MyUpload @getPicUrl="setPicUrl" mykey="chromeLinkUrl" :picUrl="icon.chromeLinkUrl"></MyUpload> <div class="uploadTip"><span>鍙厑璁镐笂浼爅pg,jpeg,png,svg鏍煎紡鐨勫浘鐗囷紝寤鸿灏哄涓�105px*105px</span></div> </div> </li> <li> <div class="desc">缃戠珯鍥炬爣锛氫富瑕佺敤浜庢祻瑙堝櫒鏍囩椤�</div> <div class="upload"> - <div class="uploadBtn"> - <i class="el-icon-plus"></i> - <span>涓婁紶鍥剧墖</span> - </div> + <MyUpload @getPicUrl="setPicUrl" mykey="websiteHeadUrl" :picUrl="icon.websiteHeadUrl"> + </MyUpload> <div class="uploadTip"><span>鍙厑璁镐笂浼爅pg,jpeg,png,svg鏍煎紡鐨勫浘鐗囷紝寤鸿灏哄涓�105px*105px</span></div> </div> </li> <li> <div class="desc">鐧诲綍椤靛浘鏍囷細涓昏鐢ㄤ簬鐧诲綍椤�</div> <div class="upload"> - <div class="uploadBtn"> - <i class="el-icon-plus"></i> - <span>涓婁紶鍥剧墖</span> - </div> + <MyUpload @getPicUrl="setPicUrl" mykey="loginPageIconUrl" :picUrl="icon.loginPageIconUrl"> + </MyUpload> <div class="uploadTip"><span>鍙厑璁镐笂浼爅pg,jpeg,png,svg鏍煎紡鐨勫浘鐗囷紝寤鸿灏哄涓�105px*105px</span></div> </div> </li> @@ -44,28 +37,117 @@ <div class="webTitle"> <div class="text">缃戠珯鏍囬:</div> <div class="inner"> - <el-input type="text" placeholder="閬傛槍鎵ф硶灞�" v-model="title"></el-input> + <el-input type="text" placeholder="閬傛槍鎵ф硶灞�" v-model="icon.title"></el-input> </div> </div> <div class="footerBtn"> <el-button class="cancel">杩斿洖</el-button> - <el-button type="primary">鎻愪氦</el-button> + <el-button type="primary" @click="changeLogo">鎻愪氦</el-button> </div> </footer> </div> </template> <script> +import MyUpload from '@/components/Upload' export default { + components: { + MyUpload, + }, data() { return { - title:'', - icon:{ - login:'', - website:'', - product:'', - } + icon: { + loginPageIconUrl: '', + websiteHeadUrl: '', + chromeLinkUrl: '', + title: '', + }, } - } + + }, + methods: { + setPicUrl({obj, value}) { + const { icon } = this; + const baseUrl = 'http://140.143.152.226:8410/'; + for (let key in icon) { + if (key === value) { + icon[key] = baseUrl + obj.url1; + } + } + this.icon = icon; + }, + // 鏇存敼logo鍏ュ彛 + async changeLogo() { + const {icon} = this; + console.log(icon); + const preIcon = await this.getIcon(); + if (preIcon.length === 0) { + this.handleChangeLogo(); + return; + } + for(let key in icon){ + if(icon[key]!==''){ + preIcon[key] = icon[key]; + } + } + this.handleChangeLogo(preIcon); + }, + // 鑾峰彇鏇存敼鍓嶇殑logo + async getIcon() { + let result; + await this.$axios({ + method: 'get', + url: 'sccg/system/portal/logo/search', + }).then(res => { + result = res.data; + }) + return result; + }, + // 鎵ц鏇存敼logo鎿嶄綔 + handleChangeLogo(obj = null) { + if (obj === null) { + const { icon } = this; + for (let key in icon) { + if (icon[key] === '') { + delete icon[key]; + } + } + let length = Object.keys(icon).length; + if (length !== 0) { + // 鍙戦�佽姹� + this.$axios({ + method: 'post', + url: 'sccg/system/portal/logo/add', + data: icon + }).then(res => { + console.log(res); + if (res.code == 200) { + this.$message({ + message: res.message, + type: 'success' + }) + } + }) + } + } else { + console.log(obj); + // 鍙戦�佽姹� + this.$axios({ + method: 'put', + url: 'sccg/system/portal/logo/update', + data: obj + }).then(res => { + console.log(res); + this.$message({ + message: res.message, + type: 'success' + }) + }) + } + localStorage.removeItem('pic'); + window.location.href=''; + + } + }, } </script> <style lang="scss" scoped> @@ -98,6 +180,7 @@ li { margin-top: 30px; + .desc { line-height: 22px; } @@ -107,31 +190,13 @@ line-height: 100px; margin-top: 15px; - .uploadBtn { - width: 120px; - height: 120px; - background-color:rgba(249, 249, 249, 1); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border-radius: 4px; - i { - font-size: 30px; - font-weight: 650; - } - - span { - line-height: 22px; - } - } - .uploadTip { display: flex; align-items: flex-end; margin-left: 20px; font-size: 14px; - span{ + + span { line-height: 22px; } } @@ -139,34 +204,44 @@ } } } - footer{ + + footer { padding: 0 20px; - .webTitle{ + + .webTitle { display: flex; line-height: 40px; - margin:30px 0; - .text{ + margin: 30px 0; + + .text { flex: 1; } - .inner{ + + .inner { flex: 13; - .el-input{ + + .el-input { width: 496px; } - &::v-deep .el-input__inner{ + + &::v-deep .el-input__inner { background-color: #09152f; - border: 1px solid #17324c;; + border: 1px solid #17324c; + ; } } } - .footerBtn{ + + .footerBtn { display: flex; justify-content: center; - &::v-deep .el-button{ + + &::v-deep .el-button { padding: 12px 40px; font-weight: 600; } - .cancel{ + + .cancel { border: 2px solid #0079fe; color: #0079fe; } -- Gitblit v1.8.0