desc: 增加修改个人信息弹窗

src/api/management/user.js

@@ -136,6 +136,15 @@ export function getUserinfoMobile(id, data) {
 	});
 }
 
+// 发送手机验证码
+export function getUserinfoMobileCode(data) {
+	return request({
+		url: `/api/userinfo/mobile/code`,
+		method: 'post',
+		data: data
+	});
+}
+
 // 更新用户邮箱
 export function getUserinfoEmail(id, data) {
 	return request({
@@ -144,3 +153,20 @@ export function getUserinfoEmail(id, data) {
 		data: data
 	});
 }
+
+// 发送邮箱验证码
+export function getUserinfoEmailCode(email) {
+	return request({
+		url: `/api/userinfo/email/code?email=${email}`,
+		method: 'post'
+	});
+}
+
+// 更新用户登陆密码
+export function getUserinfoPassword(id, data) {
+	return request({
+		url: `/api/userinfo/${id}/password`,
+		method: 'put',
+		data: data
+	});
+}

src/i18n/langs/en/global.js

@@ -43,6 +43,18 @@ export default {
 	code: 'Code',
 	status: 'State',
 	remarks: 'Remarks',
+	sendCode: 'Send verification code',
+	verificationCode: 'verification code',
+	enterEmail: 'Please enter email',
+	passWord: 'passWord',
+	newPassWord: 'new password',
+	enterPassWord: 'Please enter your new password',
+	enterMobile: 'Please enter your cell phone number',
+	enterNickname: 'Please enter nickname',
+	enterName: 'Please enter name',
+	passWordLength: 'New password length cannot be less than 5 digits',
+	passWordSome: 'The new password is different twice',
+	codeFaile: 'Failed to obtain captcha',
 	selectionTime: 'Selection of time',
 	permissionNumber: 'Number of permissions',
 	pleaseInputPermissionNumber: 'Please enter the number of permissions',

src/i18n/langs/zh/global.js

@@ -43,6 +43,18 @@ export default {
 	code: '编码',
 	status: '状态',
 	remarks: '说明',
+	sendCode: '发送验证码',
+	verificationCode: '验证码',
+	enterEmail: '请输入邮箱',
+	passWord: '密码',
+	newPassWord: '新密码',
+	enterPassWord: '请输入新密码',
+	enterMobile: '请输入手机号',
+	enterNickname: '请输入昵称',
+	enterName: '请输入名称',
+	passWordLength: '新密码长度不能低于5位',
+	passWordSome: '新密码两次不相同',
+	codeFaile: '获取验证码失败',
 	selectionTime: '选择时间',
 	permissionNumber: '权限个数',
 	pleaseInputPermissionNumber: '请输入权限个数',

src/layout/components/Entry.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="avatar-container">
-	  <!-- style="right: 80px;" -->
+    <!-- style="right: 80px;" -->
     <el-menu-item v-for="item in entryList" v-show="!item.hidden" :key="item.name" class="avatar-wrapper" index="" @click="item.handle">
       <span style="color: white;">{{ $t(item.name) }}</span>
     </el-menu-item>

src/layout/components/Logout.vue

@@ -7,9 +7,9 @@
       <i class="el-icon-caret-bottom" style="color: #909399;" />
     </div>
     <el-dropdown-menu slot="dropdown" class="user-dropdown">
-      <!-- <el-dropdown-item>
+      <el-dropdown-item>
         <span style="display:block;" @click="handleDetail">{{ $t('global.personalDetails') }}</span>
-      </el-dropdown-item> -->
+      </el-dropdown-item>
       <el-dropdown-item>
         <span style="display:block;" @click="language">{{ $t('global.language') }}</span>
       </el-dropdown-item>

src/layout/components/userInfo.vue

@@ -2,106 +2,158 @@
   <el-dialog v-dialogDrag :title="$t('global.personalDetails')" :visible.sync="visible" width="470px" :before-close="doClose" class="userInfo_box">
     <div>
       <div class="form_box">
-        <div class="title">名称:</div>
+        <div class="title">{{ $t('global.name') }}:</div>
         <div class="content">
           <div v-show="nameShow" class="show_box">
             <span>{{ userInfo.name }}</span>
             <i class="el-icon-edit" @click="switcherName" />
           </div>
           <div v-show="!nameShow" class="flex_box">
-            <el-input v-model="editInfo.name" placeholder="请输入名称" size="mini" class="input_box" />
+            <el-input v-model="editInfo.name" :placeholder="$t('global.enterName')" maxlength="20" size="mini" class="input_box" />
             <div class="button_box">
-              <el-button size="mini" class="button_box" @click="saveName">{{ $t('global.save') }}</el-button>
+              <el-button size="mini" class="button_box" :disabled="!editInfo.name" @click="saveName">{{ $t('global.save') }}</el-button>
               <el-button size="mini" class="button_box" type="text" @click="switcherName">{{ $t('global.cancel') }}</el-button>
             </div>
           </div>
         </div>
       </div>
       <div class="form_box">
-        <div class="title">昵称:</div>
+        <div class="title">{{ $t('global.nickName') }}:</div>
         <div class="content">
           <div v-show="nickNameShow" class="show_box">
             <span>{{ userInfo.nickname }}</span>
             <i class="el-icon-edit" @click="switcherNickname" />
           </div>
           <div v-show="!nickNameShow" class="flex_box">
-            <el-input v-model="editInfo.nickname" placeholder="请输入昵称" size="mini" class="input_box" />
+            <el-input v-model="editInfo.nickname" :placeholder="$t('global.enterNickname')" maxlength="20" size="mini" class="input_box" />
             <div class="button_box">
-              <el-button size="mini" class="button_box" @click="saveNickName">{{ $t('global.save') }}</el-button>
+              <el-button size="mini" class="button_box" :disabled="!editInfo.nickname" @click="saveNickName">{{ $t('global.save') }}</el-button>
               <el-button size="mini" class="button_box" type="text" @click="switcherNickname">{{ $t('global.cancel') }}</el-button>
             </div>
           </div>
         </div>
       </div>
       <div class="form_box">
-        <div class="title">手机号:</div>
+        <div class="title">{{ $t('global.mobile') }}:</div>
         <div class="content">
           <div v-show="mobileShow" class="show_box">
             <span>{{ userInfo.mobile }}</span>
             <i class="el-icon-edit" @click="switcherMobile" />
           </div>
           <div v-show="!mobileShow" class="flex_box">
-            <el-input v-model="editInfo.mobile" placeholder="请输入手机号" size="mini" class="input_box" />
-            <el-input v-model="editInfo.mobile" placeholder="验证码" size="mini" class="code_box" style="margin-top: 10px;" />
-            <el-button size="mini" style="margin-top: 10px; margin-right: 10px;" @click="sendMobileCode">发送验证码</el-button>
+            <el-input v-model="editInfo.mobile" :placeholder="$t('global.enterMobile')" maxlength="11" size="mini" class="input_box" />
+            <el-input v-model="mobileCode" :placeholder="$t('global.verificationCode')" size="mini" class="code_box" style="margin-top: 10px;" />
+            <el-button size="mini" style="margin-top: 10px; margin-right: 10px;" :disabled="mobileCodeTime != 0" @click="sendMobileCode">
+              {{ $t('global.sendCode') }}
+              <span v-if="mobileCodeTime">{{ mobileCodeTime }}</span>
+            </el-button>
             <div class="button_box" style="margin-top: 10px;">
-              <el-button size="mini" class="button_box" @click="saveMobile">{{ $t('global.save') }}</el-button>
+              <el-button size="mini" class="button_box" :disabled="!mobileCode" @click="saveMobile">{{ $t('global.save') }}</el-button>
               <el-button size="mini" class="button_box" type="text" @click="switcherMobile">{{ $t('global.cancel') }}</el-button>
             </div>
           </div>
         </div>
       </div>
       <div class="form_box">
-        <div class="title">邮箱:</div>
+        <div class="title">{{ $t('global.email') }}:</div>
         <div class="content">
           <div v-show="emailShow" class="show_box">
             <span>{{ userInfo.email }}</span>
             <i class="el-icon-edit" @click="switcherEmail" />
           </div>
           <div v-show="!emailShow" class="flex_box">
-            <el-input v-model="editInfo.email" placeholder="请输入邮箱" size="mini" class="input_box" />
-            <el-input v-model="editInfo.mobile" placeholder="验证码" size="mini" class="code_box" style="margin-top: 10px;" />
-            <el-button size="mini" style="margin-top: 10px; margin-right: 10px;" @click="sendMobileCode">发送验证码</el-button>
+            <el-input v-model="editInfo.email" :placeholder="$t('global.enterEmail')" size="mini" class="input_box" />
+            <el-input v-model="emailCode" :placeholder="$t('global.verificationCode')" size="mini" class="code_box" style="margin-top: 10px;" />
+            <el-button size="mini" style="margin-top: 10px; margin-right: 10px;" :disabled="emailCodeTime != 0" @click="sendEmailCode">
+              {{ $t('global.sendCode') }}
+              <span v-if="emailCodeTime">{{ emailCodeTime }}</span>
+            </el-button>
             <div class="button_box" style="margin-top: 10px;">
-              <el-button size="mini" class="button_box" @click="saveEmail">{{ $t('global.save') }}</el-button>
+              <el-button size="mini" class="button_box" :disabled="!emailCode" @click="saveEmail">{{ $t('global.save') }}</el-button>
               <el-button size="mini" class="button_box" type="text" @click="switcherEmail">{{ $t('global.cancel') }}</el-button>
             </div>
           </div>
         </div>
       </div>
+      <div class="form_box">
+        <div class="title">{{ $t('global.passWord') }}:</div>
+        <div class="content">
+          <div v-show="passwordShow" class="show_box">
+            <span>******</span>
+            <i class="el-icon-edit" @click="switcherPassWord" />
+          </div>
+          <div v-show="!passwordShow" class="flex_box">
+            <!-- <div class="passWord_box">
+              <span>原密码:</span>
+              <el-input v-model="oldPassWord" placeholder="请输入原密码" maxlength="8" show-password size="mini" class="input_box" />
+            </div> -->
+            <div class="passWord_box">
+              <span>{{ $t('global.newPassWord') }}:</span>
+              <el-input v-model="newPassWord1" :placeholder="$t('global.enterPassWord')" maxlength="20" show-password size="mini" class="input_box" />
+            </div>
+            <div class="passWord_box">
+              <span>{{ $t('global.newPassWord') }}:</span>
+              <el-input v-model="newPassWord2" :placeholder="$t('global.enterPassWord')" maxlength="20" show-password size="mini" class="input_box" />
+            </div>
+            <span class="tip_box">{{ tip }}</span>
+            <div class="button_box" style="width: 150px;">
+              <el-button size="mini" class="button_box" @click="savePassWord">{{ $t('global.save') }}</el-button>
+              <el-button size="mini" class="button_box" type="text" @click="switcherPassWord">{{ $t('global.cancel') }}</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="doClose">{{ $t('global.confirm') }}</el-button>
+      <el-button type="primary" @click="doClose">{{ $t('global.close') }}</el-button>
     </span>
   </el-dialog>
 </template>
 
 <script>
-// import getUserinfoName from '@/api/management/user';
+import md5 from 'js-md5';
+import { getInfo } from '@/api/login';
+import { getDesignToken } from '@/utils/auth'; // 验权
+import { getUserinfoName, getUserinfoNickname, getUserinfoMobile, getUserinfoMobileCode, getUserinfoEmailCode, getUserinfoEmail, getUserinfoPassword } from '@/api/management/user';
+import { setInterval, clearInterval } from 'timers';
 
 export default {
 	data() {
 		return {
 			visible: false,
 			userInfo: {
-				name: '周渊远',
-				nickname: 'zyy',
-				mobile: '15691852838',
-				email: '1787816799@qq.com'
+				name: '',
+				nickname: '',
+				mobile: '',
+				email: '',
+				passWord: ''
 			},
 			editInfo: {
-				name: '周渊远',
-				nickname: 'zyy',
-				mobile: '15691852838',
-				email: '1787816799@qq.com'
+				name: '',
+				nickname: '',
+				mobile: '',
+				email: '',
+				passWord: ''
 			},
+			nationCode: '86',
 			nameShow: true,
 			nickNameShow: true,
 			mobileShow: true,
 			emailShow: true,
+			passwordShow: true,
+			mobileCode: null,
+			emailCode: null,
+
+			oldPassWord: null,
+			newPassWord1: null,
+			newPassWord2: null,
 
 			mobileCodeTime: 0,
-			emailCodeTime: 0
+			emailCodeTime: 0,
+
+			emailTime: null,
+			mobileTime: null,
+			tip: ''
 		};
 	},
 	computed: {
@@ -112,75 +164,169 @@ export default {
 	methods: {
 		doShow() {
 			this.visible = true;
+			getInfo(getDesignToken()).then(response => {
+				const user = response.data;
+				this.userInfo = {
+					name: user.name,
+					nickname: user.nickname,
+					mobile: user.mobile,
+					email: user.email,
+					passWord: ''
+				};
+				this.oldPassWord = user.password;
+				this.nationCode = user.nationCode ? user.nationCode : '86';
+			}).catch(error => {
+				console.log(error, '请求个人信息失败');
+			});
 		},
 		doClose() {
 			this.visible = false;
 		},
 		switcherName() {
+			this.editInfo.name = this.userInfo.name;
 			this.nameShow = !this.nameShow;
 		},
 		async saveName() {
 			if (this.editInfo.name) {
-				// try {
-				// 	const res = await getUserinfoName(this.info.id, this.name);
-				// 	console.log(res);
-				this.userInfo.name = this.editInfo.name;
-				this.nameShow = !this.nameShow;
-				// } catch (error) {
-				// 	console.log(error, '错误');
-				// }
+				try {
+					await getUserinfoName(this.info.id, this.editInfo.name);
+					this.userInfo.name = this.editInfo.name;
+					this.nameShow = !this.nameShow;
+					this.$store.commit('SET_NAME', this.editInfo.name);
+				} catch (error) {
+					console.log(error, '错误');
+				}
 			}
 		},
 
 		switcherNickname() {
+			this.editInfo.nickname = this.userInfo.nickname;
 			this.nickNameShow = !this.nickNameShow;
 		},
 		async saveNickName() {
 			if (this.editInfo.nickname) {
-				// try {
-				// 	const res = await getUserinfoNickname(this.info.id, this.name);
-				// 	console.log(res);
-				this.userInfo.name = this.editInfo.nickname;
-				this.nickNameShow = !this.nickNameShow;
-				// 	this.nameShow = !this.nameShow;
-				// } catch (error) {
-				// 	console.log(error, '错误');
-				// }
+				try {
+					await getUserinfoNickname(this.info.id, this.editInfo.nickname);
+					this.userInfo.nickname = this.editInfo.nickname;
+					this.nickNameShow = !this.nickNameShow;
+					this.$store.commit('SET_NICKNAME', this.editInfo.nickname);
+				} catch (error) {
+					console.log(error, '错误');
+				}
 			}
 		},
 
 		switcherMobile() {
+			this.editInfo.mobile = this.userInfo.mobile;
 			this.mobileShow = !this.mobileShow;
 		},
 		async saveMobile() {
-			if (this.editInfo.mobile) {
-				// try {
-				// 	const res = await getUserinfoMobile(this.info.id, this.name);
-				// 	console.log(res);
-				this.userInfo.name = this.editInfo.mobile;
-				this.mobileShow = !this.mobileShow;
-				// } catch (error) {
-				// 	console.log(error, '错误');
-				// }
+			if (this.editInfo.mobile && this.mobileCode) {
+				try {
+					const params = {
+						mobile: this.editInfo.mobile,
+						nationCode: this.nationCode,
+						validCode: this.mobileCode
+					};
+					await getUserinfoMobile(this.info.id, params);
+					this.userInfo.mobile = this.editInfo.mobile;
+					this.mobileShow = !this.mobileShow;
+					this.mobileCode = '';
+				} catch (error) {
+					console.log(error, '错误');
+				}
 			}
 		},
-		sendMobileCode() {
-
+		async sendMobileCode() {
+			const param = {
+				mobile: this.editInfo.mobile,
+				nationCode: this.nationCode
+			};
+			try {
+				this.mobileCodeTime = 30;
+				this.mobileTime = setInterval(() => {
+					this.mobileCodeTime--;
+					if (this.mobileCodeTime <= 0) {
+						this.mobileCodeTime = 0;
+						clearInterval(this.mobileTime);
+						this.mobileTime = null;
+					}
+				}, 1000);
+				await getUserinfoMobileCode(param);
+			} catch (error) {
+				this.$messageBox(this.$t('global.codeFaile'));
+			}
 		},
 
 		switcherEmail() {
+			this.editInfo.email = this.userInfo.email;
 			this.emailShow = !this.emailShow;
 		},
 		async saveEmail() {
-			if (this.editInfo.email) {
-				// try {
-				// 	const res = await getUserinfoEmail(this.info.id, this.name);
-				// 	console.log(res);
-				this.userInfo.name = this.editInfo.email;
-				this.emailShow = !this.emailShow;
-				// } catch (error) {
-				// 	console.log(error, '错误');
-				// }
+			if (this.editInfo.email && this.emailCode) {
+				try {
+					const params = {
+						email: this.editInfo.email,
+						validCode: this.emailCode
+					};
+					await getUserinfoEmail(this.info.id, params);
+					this.userInfo.email = this.editInfo.email;
+					this.emailShow = !this.emailShow;
+					this.emailCode = '';
+				} catch (error) {
+					this.$messageBox('更新邮箱失败');
+				}
+			}
+		},
+		async sendEmailCode() {
+			try {
+				this.emailCodeTime = 30;
+				this.emailTime = setInterval(() => {
+					this.emailCodeTime--;
+					if (this.emailCodeTime <= 0) {
+						this.emailCodeTime = 0;
+						clearInterval(this.emailTime);
+						this.emailTime = null;
+					}
+				}, 1000);
+				await getUserinfoEmailCode(this.editInfo.email);
+			} catch (error) {
+				this.$messageBox(this.$t('global.codeFaile'));
+			}
+		},
+
+		switcherPassWord() {
+			this.passwordShow = !this.passwordShow;
+			this.tip = '';
+		},
+		async savePassWord() {
+			this.tip = '';
+			if (this.newPassWord1.length <= 5 || this.newPassWord2.length <= 5) {
+				this.tip = this.$t('global.passWordLength');
+			} else {
+				this.uploadPassword();
+			}
+		},
+		async uploadPassword() {
+			console.log(this.newPassWord1, this.newPassWord2);
+			if (this.newPassWord1 == this.newPassWord2) {
+				// 请求更新密码
+				const param = {
+					password: md5(this.newPassWord2)
+				};
+				if (this.oldPassWord) {
+					param['oldPassword'] = this.oldPassWord;
+				}
+				try {
+					await getUserinfoPassword(this.info.id, param);
+					this.passwordShow = !this.passwordShow;
+					this.newPassWord1 = '';
+					this.newPassWord2 = '';
+				} catch (error) {
+					console.log(error, 11);
+				}
+			} else {
+				this.tip = this.$t('global.passWordSome');
 			}
 		}
 	}
@@ -193,6 +339,13 @@ export default {
 		align-items: center;
 		flex-wrap: wrap;
 	}
+	.tip_box{
+		height: 20px;
+		display: block;
+		width: 100%;
+		line-height: 20px;
+		color: #e47f7f;
+	}
 	.form_box{
 		width: 100%;
 		overflow: hidden;
@@ -237,6 +390,13 @@ export default {
 			line-height: 0;
 			height: 28px;
 		}
+
+		.passWord_box{
+			height: 28px;
+			line-height: 28px;
+			margin-bottom: 10px;
+		}
+
 	}
 </style>
 <style rel="stylesheet/scss" lang="scss">

src/store/modules/map.js

@@ -75,6 +75,7 @@ function queryEffectedModels(map, device, effectedDeviceList) {
 	}
 }
 
+// 保存草稿地图绘制关系检测
 function saveMapDeviceDefaultRelations(state) {
 	if (state && state.map) {
 		const map = state.map;

src/utils/baseUrl.js

@@ -3,9 +3,9 @@ export function getBaseUrl() {
 	let BASE_API;
 	if (process.env.NODE_ENV === 'development') {
 		// BASE_API = 'https://joylink.club/jlcloud';
-		// BASE_API = 'https://test.joylink.club/jlcloud';
+		BASE_API = 'https://test.joylink.club/jlcloud';
 		// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
-		BASE_API = 'http://192.168.3.6:9000'; // 旭强
+		// BASE_API = 'http://192.168.3.6:9000'; // 旭强
 		// BASE_API = 'http://192.168.3.41:9000'; // 王兴杰
 	} else {
 		BASE_API = process.env.VUE_APP_BASE_API;

src/views/map/mapdraft/mapedit/index.vue

@@ -231,7 +231,6 @@ export default {
 
 					this.mapSaveing = true;
 					this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => {
-						// map.switchList = [];
 						saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(response => {
 							this.$message.success(this.$t('tip.saveSuccessfully'));
 							this.mapSaveing = false;
@@ -246,6 +245,10 @@ export default {
 								this.initAutoSaveTask();
 							}
 						});
+					}).catch(error => {
+						console.log(error, '错误提示');
+						this.mapSaveing = false;
+						this.$messageBox(this.$t('tip.saveFailed'));
 					});
 				}
 			}