Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
5265bc92 by renchao@pashanhoo.com
Options

用户信息

1 parent f1d0443b
Inline Side-by-side
Showing 2 changed files with 319 additions and 271 deletions
...@@ -17,309 +17,324 @@ ...@@ -17,309 +17,324 @@
17 }}</span> 17 }}</span>
18 <span style="padding-right: 10px">{{ userInfo.name }}</span> 18 <span style="padding-right: 10px">{{ userInfo.name }}</span>
19 </p> 19 </p>
20 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> 20 <el-dropdown>
21 <span class="el-dropdown-link">
22 <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
23 </span>
24 <el-dropdown-menu slot="dropdown">
25 <el-dropdown-item command="user" @click.native="handleGetUser">用户信息</el-dropdown-item>
26 </el-dropdown-menu>
27 </el-dropdown>
21 </div> 28 </div>
22 <svg-icon 29 <svg-icon
23 class="shutdown" 30 class="shutdown"
24 @click.native="logout" 31 @click.native="logout"
25 icon-class="shutdown" 32 icon-class="shutdown" />
26 />
27 </div> 33 </div>
28 </div> 34 </div>
29 <NoticeBar 35 <NoticeBar
30 class="NoticeBar" 36 class="NoticeBar"
31 :noticeList="noticeList" 37 :noticeList="noticeList"
32 v-if="noticeList.length > 0" 38 v-if="noticeList.length > 0" />
33 />
34 </div> 39 </div>
35 </template> 40 </template>
36 <script> 41 <script>
37 import axios from "axios"; 42 import axios from "axios";
38 import Cookies from "js-cookie"; 43 import Cookies from "js-cookie";
39 import { mapGetters } from "vuex"; 44 import { mapGetters } from "vuex";
40 import NoticeBar from "@/components/NoticeBar/index"; 45 import NoticeBar from "@/components/NoticeBar/index";
41 import { getHomeNoticeList } from "@/api/home"; 46 import { getHomeNoticeList } from "@/api/home";
42 import { setToken } from "@/utils/util"; 47 import { setToken } from "@/utils/util";
43 export default { 48 export default {
44 components: { 49 components: {
45 NoticeBar, 50 NoticeBar,
46 },
47 computed: {
48 ...mapGetters(["sidebar", "avatar", "name", "userInfo"]),
49 baseUrl() {
50 return window._config.baseUrl;
51 }, 51 },
52 }, 52 computed: {
53 data() { 53 ...mapGetters(["sidebar", "avatar", "name", "userInfo"]),
54 return { 54 baseUrl () {
55 logo: require("../../image/bdclogo.png"), 55 return window._config.baseUrl;
56 noticeList: [], 56 },
57 }; 57 },
58 }, 58 data () {
59 created() { 59 return {
60 this.queryNoticeList(); 60 logo: require("../../image/bdclogo.png"),
61 }, 61 noticeList: [],
62 mounted() { 62 };
63 let that = this; 63 },
64 window.addEventListener("message", function (messageEvent) { 64 created () {
65 if (messageEvent.data.update) { 65 this.queryNoticeList();
66 that.queryNoticeList(); 66 },
67 } 67 mounted () {
68 }); 68 let that = this;
69 }, 69 window.addEventListener("message", function (messageEvent) {
70 destroyed() { 70 if (messageEvent.data.update) {
71 window.removeEventListener("message"); 71 that.queryNoticeList();
72 },
73 methods: {
74 /**
75 * @description: queryNoticeList
76 * @author: renchao
77 */
78 queryNoticeList() {
79 getHomeNoticeList().then((res) => {
80 if (res.result) {
81 this.noticeList = res.result.noticeList;
82 } 72 }
83 }); 73 });
84 }, 74 },
85 /** 75 destroyed () {
86 * @description: logout 76 window.removeEventListener("message");
87 * @author: renchao
88 */
89 logout() {
90 axios
91 .post(window._config.services.management + "/management/logout")
92 .then(() => {
93 setToken(undefined);
94 sessionStorage.removeItem("token");
95 localStorage.setItem("dj-location", window.location.href);
96 window.location.href =
97 window._config.casBaseURL +
98 "/logout?service=" +
99 encodeURIComponent(window.location.href);
100 });
101 }, 77 },
78 methods: {
102 79
103 /** 80 /**
104 * @description: themeChange 81 * @description: 获取用户信息
105 * @param {*} val 82 * @author: renchao
106 * @author: renchao 83 */
107 */ 84 handleGetUser () {
108 themeChange(val) { 85 this.$popupDialog('用户信息', 'system/userInfo/index', {}, '80%', true);
109 this.$store.dispatch("app/updateTheme", val); 86 },
110 }, 87 /**
111 searchMessageCenter() { 88 * @description: queryNoticeList
112 this.$router.push({ name: "messagecenter" }); 89 * @author: renchao
113 }, 90 */
114 /** 91 queryNoticeList () {
115 * @description: handleCommand 92 getHomeNoticeList().then((res) => {
116 * @param {*} command 93 if (res.result) {
117 * @author: renchao 94 this.noticeList = res.result.noticeList;
118 */ 95 }
119 handleCommand(command) { 96 });
120 if (command == "a") { 97 },
121 //个人中心 98 /**
122 this.$router.push({ name: "personal" }); 99 * @description: logout
123 } 100 * @author: renchao
101 */
102 logout () {
103 axios
104 .post(window._config.services.management + "/management/logout")
105 .then(() => {
106 setToken(undefined);
107 sessionStorage.removeItem("token");
108 localStorage.setItem("dj-location", window.location.href);
109 window.location.href =
110 window._config.casBaseURL +
111 "/logout?service=" +
112 encodeURIComponent(window.location.href);
113 });
114 },
115
116 /**
117 * @description: themeChange
118 * @param {*} val
119 * @author: renchao
120 */
121 themeChange (val) {
122 this.$store.dispatch("app/updateTheme", val);
123 },
124 searchMessageCenter () {
125 this.$router.push({ name: "messagecenter" });
126 },
127 /**
128 * @description: handleCommand
129 * @param {*} command
130 * @author: renchao
131 */
132 handleCommand (command) {
133 if (command == "a") {
134 //个人中心
135 this.$router.push({ name: "personal" });
136 }
137 },
124 }, 138 },
125 }, 139 };
126 };
127 </script> 140 </script>
128 <style lang="scss" scoped> 141 <style lang="scss" scoped>
129 .navbar-con { 142 .navbar-con {
130 position: relative; 143 position: relative;
131 }
132
133 .NoticeBar {
134 position: absolute;
135 bottom: 0;
136 }
137
138 .el-dropdown-menu {
139 padding: 0 !important;
140 border: 1px solid #ebeef5;
141 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
142 border-radius: 4px 0 0 4px 4px;
143
144 .el-dropdown-menu__item {
145 text-align: center;
146 margin-top: 0 !important;
147 font-size: 14px;
148 font-family: PingFangSC-Regular, PingFang SC;
149 font-weight: 400;
150 color: #4a4a4a;
151 width: 140px;
152 height: 36px;
153 line-height: 36px;
154 } 144 }
155 145 /deep/.el-dropdown {
156 .el-dropdown-menu__item:nth-child(6) { 146 height: 32px;
157 border-top: 1px solid #ebeef5;
158 } 147 }
159 148 .NoticeBar {
160 .popper__arrow { 149 position: absolute;
161 top: -11px !important; 150 bottom: 0;
162 left: 110px !important;
163 transform: rotate(0deg) scale(2);
164 } 151 }
165 152
166 .el-dropdown-menu__item:not(.is-disabled):hover, 153 .el-dropdown-menu {
167 .el-dropdown-menu__item:focus { 154 padding: 0 !important;
168 background: #f6f7f9; 155 border: 1px solid #ebeef5;
169 color: #4a4a4a; 156 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
170 } 157 border-radius: 4px 0 0 4px 4px;
171 }
172 158
173 .navbar { 159 .el-dropdown-menu__item {
174 height: $headerHeight; 160 text-align: center;
175 overflow: hidden; 161 margin-top: 0 !important;
176 position: relative; 162 font-size: 14px;
177 background: #fff; 163 font-family: PingFangSC-Regular, PingFang SC;
178 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 164 font-weight: 400;
179 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); 165 color: #4a4a4a;
180 display: flex; 166 width: 140px;
181 align-items: center; 167 height: 36px;
182 padding: 0 20px; 168 line-height: 36px;
183 justify-content: space-between;
184
185 .logo {
186 // margin-top: -20px;
187 .header-logo {
188 width: 40px;
189 float: left;
190 vertical-align: middle;
191 }
192 h4 {
193 float: left;
194 vertical-align: middle;
195 line-height: 40px;
196 font-size: 22px;
197 color: #fff;
198 text-indent: 6px;
199 letter-spacing: 2px;
200 font-family: albbsht;
201 } 169 }
202 }
203
204 .backdrop {
205 flex: 1;
206 width: 60%;
207 background: url("../../image/backdrop.png");
208 background-size: 100% 100%;
209 height: $headerHeight;
210 }
211 170
212 .hamburger-container { 171 .el-dropdown-menu__item:nth-child(6) {
213 line-height: 43px; 172 border-top: 1px solid #ebeef5;
214 height: 100%; 173 }
215 float: left;
216 cursor: pointer;
217 transition: background 0.3s;
218 -webkit-tap-highlight-color: transparent;
219 174
220 &:hover { 175 .popper__arrow {
221 background: rgba(0, 0, 0, 0.025); 176 top: -11px !important;
177 left: 110px !important;
178 transform: rotate(0deg) scale(2);
222 } 179 }
223 }
224 180
225 .breadcrumb-container { 181 .el-dropdown-menu__item:not(.is-disabled):hover,
226 float: left; 182 .el-dropdown-menu__item:focus {
183 background: #f6f7f9;
184 color: #4a4a4a;
185 }
227 } 186 }
228 187
229 .right-menu { 188 .navbar {
230 float: right; 189 height: $headerHeight;
231 height: 100%; 190 overflow: hidden;
232 line-height: 50px; 191 position: relative;
192 background: #fff;
193 // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
194 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
233 display: flex; 195 display: flex;
234 align-items: center; 196 align-items: center;
197 padding: 0 20px;
198 justify-content: space-between;
235 199
236 .function { 200 .logo {
237 margin: 0 15px; 201 // margin-top: -20px;
238 cursor: pointer; 202 .header-logo {
203 width: 40px;
204 float: left;
205 vertical-align: middle;
206 }
207 h4 {
208 float: left;
209 vertical-align: middle;
210 line-height: 40px;
211 font-size: 22px;
212 color: #fff;
213 text-indent: 6px;
214 letter-spacing: 2px;
215 font-family: albbsht;
216 }
217 }
218
219 .backdrop {
220 flex: 1;
221 width: 60%;
222 background: url("../../image/backdrop.png");
223 background-size: 100% 100%;
224 height: $headerHeight;
239 } 225 }
240 226
241 .shutdown { 227 .hamburger-container {
242 font-size: 20px; 228 line-height: 43px;
243 margin-left: 15px; 229 height: 100%;
230 float: left;
244 cursor: pointer; 231 cursor: pointer;
232 transition: background 0.3s;
233 -webkit-tap-highlight-color: transparent;
234
235 &:hover {
236 background: rgba(0, 0, 0, 0.025);
237 }
245 } 238 }
246 239
247 .organization-item { 240 .breadcrumb-container {
248 margin-right: 40px; 241 float: left;
249 margin-top: -40px !important;
250 } 242 }
251 243
252 .item { 244 .right-menu {
253 margin-right: 40px; 245 float: right;
254 margin-top: -20px; 246 height: 100%;
255 line-height: 18.4px; 247 line-height: 50px;
256 cursor: pointer; 248 display: flex;
257 position: relative; 249 align-items: center;
258 250
259 .item-box { 251 .function {
260 position: absolute; 252 margin: 0 15px;
261 top: -5px;
262 left: 3px;
263 width: 100%;
264 min-width: 25px;
265 height: 25px;
266 cursor: pointer; 253 cursor: pointer;
267 z-index: 100;
268 } 254 }
269 }
270 255
271 &:focus { 256 .shutdown {
272 outline: none; 257 font-size: 20px;
273 } 258 margin-left: 15px;
259 cursor: pointer;
260 }
274 261
275 .right-menu-item { 262 .organization-item {
276 display: inline-block; 263 margin-right: 40px;
277 font-size: 18px; 264 margin-top: -40px !important;
278 color: #fff; 265 }
279 vertical-align: text-bottom;
280 266
281 &.hover-effect { 267 .item {
268 margin-right: 40px;
269 margin-top: -20px;
270 line-height: 18.4px;
282 cursor: pointer; 271 cursor: pointer;
283 transition: background 0.3s; 272 position: relative;
284 display: flex;
285 align-items: center;
286 273
287 &:hover { 274 .item-box {
288 background: rgba(0, 0, 0, 0.025); 275 position: absolute;
276 top: -5px;
277 left: 3px;
278 width: 100%;
279 min-width: 25px;
280 height: 25px;
281 cursor: pointer;
282 z-index: 100;
289 } 283 }
290 } 284 }
291 }
292 285
293 .avatar-wrapper { 286 &:focus {
294 position: relative; 287 outline: none;
295 display: flex;
296 height: 40px;
297 align-items: center;
298 color: #ffffff;
299 p {
300 font-size: 14px;
301 height: 40px;
302 span {
303 display: block;
304 line-height: 20px;
305 text-align: right;
306 }
307 } 288 }
308 .user-avatar { 289
309 cursor: pointer; 290 .right-menu-item {
310 width: 35px; 291 display: inline-block;
311 height: 35px; 292 font-size: 18px;
312 border-radius: 50%; 293 color: #fff;
294 vertical-align: text-bottom;
295
296 &.hover-effect {
297 cursor: pointer;
298 transition: background 0.3s;
299 display: flex;
300 align-items: center;
301
302 &:hover {
303 background: rgba(0, 0, 0, 0.025);
304 }
305 }
313 } 306 }
314 307
315 .el-icon-caret-bottom { 308 .avatar-wrapper {
316 cursor: pointer; 309 position: relative;
317 position: absolute; 310 display: flex;
318 right: -15px; 311 height: 40px;
319 top: 17px; 312 align-items: center;
320 font-size: 12px; 313 color: #ffffff;
314 p {
315 font-size: 14px;
316 height: 40px;
317 span {
318 display: block;
319 line-height: 20px;
320 text-align: right;
321 }
322 }
323 .user-avatar {
324 cursor: pointer;
325 width: 35px;
326 height: 35px;
327 border-radius: 50%;
328 }
329
330 .el-icon-caret-bottom {
331 cursor: pointer;
332 position: absolute;
333 right: -15px;
334 top: 17px;
335 font-size: 12px;
336 }
321 } 337 }
322 } 338 }
323 } 339 }
324 }
325 </style> 340 </style>
......
...@@ -2,32 +2,45 @@ ...@@ -2,32 +2,45 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="ruleForm" label-width="80px"> 5 <el-form :model="ruleForm" label-width="100px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="6">
8 <el-form-item label="电子签名"> 8 <el-form-item label="用户名称：">
9 <el-input v-model="ruleForm.dzqm"></el-input> 9 {{ruleForm.name}}
10 </el-form-item> 10 </el-form-item>
11 </el-col> 11 </el-col>
12 <el-col :span="19" class="btnColRight"> 12 <el-col :span="6">
13 <el-form-item> 13 <el-form-item label="组织机构：">
14 <el-button type="primary" native-type="submit">查询</el-button> 14 {{ruleForm.organizationName}}
15 </el-form-item>
16 </el-col>
17 <el-col :span="6">
18 <el-form-item label="部门：">
19 {{ruleForm.departmentName}}
20 </el-form-item>
21 </el-col>
22 </el-row>
23 <el-row>
24 <el-col :span="24">
25 <el-form-item label="签名路径：">
26 <img :src="ruleForm.dzqmurl" class="signature-image">
15 </el-form-item> 27 </el-form-item>
16 </el-col> 28 </el-col>
17 </el-row> 29 </el-row>
18 </el-form> 30 </el-form>
19 </div> 31 </div>
32
20 <el-upload 33 <el-upload
21 class="upload-demo" 34 class="upload-demo"
22 action="" 35 action=""
23 :limit="1" 36 :limit="1"
24 multiple 37 multiple
38 :key="key"
25 :auto-upload="false" 39 :auto-upload="false"
26 accept=".jpg, .png" 40 accept=".jpg, .png, .jpeg"
27 :on-change="handleChange" 41 :on-change="handleChange"
28 :before-upload="beforeUpload" 42 :before-upload="beforeUpload"
29 :file-list="fileList" 43 :show-file-list="false"
30 list-type="picture"
31 drag> 44 drag>
32 <i class="el-icon-upload"></i> 45 <i class="el-icon-upload"></i>
33 <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div> 46 <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
...@@ -38,36 +51,51 @@ ...@@ -38,36 +51,51 @@
38 </template> 51 </template>
39 <script> 52 <script>
40 import { dzqmUpload } from '@/api/dzqm' 53 import { dzqmUpload } from '@/api/dzqm'
54 import { getUserInfo } from '@/api/user'
41 export default { 55 export default {
42 name: "dzqm", 56 name: "dzqm",
43 data () { 57 data () {
44 return { 58 return {
45 ruleForm: { 59 ruleForm: {},
46 dzqm: "" 60 key: 0,
47 },
48 fileList: [], // 已上传文件列表
49 } 61 }
50 }, 62 },
63 mounted () {
64 this.getUserInfo()
65 },
51 methods: { 66 methods: {
67 async getUserInfo () {
68 let res = await getUserInfo()
69 this.ruleForm = res.result
70 },
52 beforeUpload (file) { 71 beforeUpload (file) {
53 // 上传文件之前的钩子，返回false则停止上传 72 this.files = file;
54 const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; 73 const allowedExtensions = ['jpg', 'jpeg', 'png'];
55 const isLt2M = file.size / 1024 / 1024 < 5; 74 const maxFileSizeMB = 5;
56 if (!isJPGorPNG) { 75
57 this.$message.error('上传图片只能是 JPG/PNG 格式!'); 76 const extension = allowedExtensions.includes(file.name.split('.').pop().toLowerCase());
58 return false; 77 const isLt5M = file.size / 1024 / 1024 < maxFileSizeMB;
59 } 78
60 if (!isLt2M) { 79 if (!extension) {
61 this.$message.error('上传图片大小不能超过 5MB!'); 80 this.$message.warning('上传模板只能是 jpg、jpeg、png 格式!');
62 return false; 81 } else if (!isLt5M) {
82 this.$message.warning(`上传模板大小不能超过 ${maxFileSizeMB}MB!`);
63 } 83 }
64 return true; 84
85 return extension && isLt5M;
65 }, 86 },
66 async handleChange (file) { 87 async handleChange (file) {
67 var formdata = new FormData(); 88 var formdata = new FormData();
68 formdata.append("file", file.raw); 89 formdata.append("file", file.raw);
69 dzqmUpload(formdata).then(res => { 90 dzqmUpload(formdata).then(res => {
70 console.log(res); 91 if (res.code == 200) {
92 this.$message({
93 message: '上传成功！',
94 type: 'success'
95 })
96 this.key++
97 this.ruleForm.dzqmurl = res.message
98 }
71 }) 99 })
72 } 100 }
73 } 101 }
...@@ -75,5 +103,10 @@ ...@@ -75,5 +103,10 @@
75 </script> 103 </script>
76 <style scoped lang="scss"> 104 <style scoped lang="scss">
77 @import "~@/styles/public.scss"; 105 @import "~@/styles/public.scss";
106 .signature-image {
107 width: 100%;
108 max-height: 360px;
109 object-fit: contain;
110 }
78 </style> 111 </style>
79 112
...\ No newline at end of file ...\ No newline at end of file
......