fix(修复issue): 🐛 https://gitee.com/huge-dream/django-vue3-admin/issues/I6OS1E

web/src/views/system/personal/index.vue

@@ -13,7 +13,9 @@
 						</div>
 						<div class="personal-user-right">
 							<el-row>
-                <el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{state.personalForm.username}}，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
+								<el-col :span="24" class="personal-title mb18"
+									>{{ currentTime }}，{{ state.personalForm.username }}，生活变的再糟糕，也不妨碍我变得更好！
+								</el-col>
 								<el-col :span="24">
 									<el-row>
 										<el-col :xs="24" :sm="8" class="personal-item mb6">
@@ -54,9 +56,7 @@
 					<div class="personal-info-box">
 						<ul class="personal-info-ul">
 							<li v-for="(v, k) in state.newsInfoList" :key="k" class="personal-info-li">
-                <div class="personal-info-li-title">
+								<div class="personal-info-li-title">[{{ v.creator_name }},{{ v.create_datetime }}] {{ v.title }}</div>
-                  [{{v.creator_name}},{{v.create_datetime}}]  {{v.title}}
-                </div>
 							</li>
 						</ul>
 					</div>
@@ -155,37 +155,18 @@
 				center
 			>
 				<el-form-item label="原密码" required prop="oldPassword">
-            <el-input
+					<el-input v-model="userPasswordInfo.oldPassword" placeholder="请输入原始密码" clearable></el-input>
-                v-model="userPasswordInfo.oldPassword"
-                placeholder="请输入原始密码"
-                clearable
-            ></el-input>
 				</el-form-item>
 				<el-form-item required prop="newPassword" label="新密码">
-            <el-input
+					<el-input type="password" v-model="userPasswordInfo.newPassword" placeholder="请输入新密码" show-password clearable></el-input>
-                type="password"
-                v-model="userPasswordInfo.newPassword"
-                placeholder="请输入新密码"
-                show-password
-                clearable
-            ></el-input>
 				</el-form-item>
 				<el-form-item required prop="newPassword2" label="确认密码">
-            <el-input
+					<el-input type="password" v-model="userPasswordInfo.newPassword2" placeholder="请再次输入新密码" show-password clearable></el-input>
-                type="password"
-                v-model="userPasswordInfo.newPassword2"
-                placeholder="请再次输入新密码"
-                show-password
-                clearable
-            ></el-input>
 				</el-form-item>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
-         <el-button type="primary" @click="settingPassword">
+					<el-button type="primary" @click="settingPassword"> <i class="fa fa-check"></i>提交 </el-button>
-              <i class="fa fa-check"></i>提交
-            </el-button>
-
 				</span>
 			</template>
 		</el-dialog>
@@ -195,26 +176,28 @@
 <script setup lang="ts" name="personal">
 import { reactive, computed, onMounted, ref } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
-import * as api from './api'
+import * as api from './api';
-import {ElMessage } from "element-plus";
+import { ElMessage } from 'element-plus';
-import {getBaseURL} from "/@/utils/baseUrl";
+import { getBaseURL } from '/@/utils/baseUrl';
 import { Session } from '/@/utils/storage';
+import { useRouter } from 'vue-router';
+
 // 当前时间提示语
 const currentTime = computed(() => {
 	return formatAxis(new Date());
 });
-const userInfoFormRef = ref()
+const userInfoFormRef = ref();
 const rules = reactive({
 	name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
-  mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }]
+	mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }],
-})
+});
 // 定义变量内容
 const uploadAvatar = reactive({
 	action: getBaseURL() + 'api/system/file/',
 	headers: {
-    Authorization: 'JWT ' + Session.get('token')
+		Authorization: 'JWT ' + Session.get('token'),
 	},
-})
+});
 const state = reactive<PersonalState>({
 	newsInfoList: [],
 	personalForm: {
@@ -226,119 +209,119 @@ const state = reactive<PersonalState>({
 		gender: '',
 		dept_info: {
 			dept_id: 0,
-      dept_name:''
+			dept_name: '',
 		},
-    role_info:[{
+		role_info: [
+			{
 				id: 0,
-      name:''
+				name: '',
-    }]
+			},
+		],
 	},
 });
 
 /**
  * 跳转消息中心
  */
-import {useRouter } from "vue-router";
+const route = useRouter();
-import {Session} from "/@/utils/storage";
-const route = useRouter()
 const msgMore = () => {
-  route.push({path:'/messageCenter'})
+	route.push({ path: '/messageCenter' });
-}
+};
 
 /**
  * 获取用户个人信息
  */
 const getUserInfo = function () {
 	api.GetUserInfo({}).then((res: any) => {
-    const {data} = res
+		const { data } = res;
 		state.personalForm.avatar = data.avatar || '';
 		state.personalForm.username = data.username || '';
 		state.personalForm.name = data.name || '';
 		state.personalForm.email = data.email || '';
 		state.personalForm.mobile = data.mobile || '';
-    state.personalForm.gender = data.gender || '';
+		state.personalForm.gender = data.gender;
 		state.personalForm.dept_info.dept_name = data.dept_info.dept_name || '';
 		state.personalForm.role_info = data.role_info || [];
-  })
+	});
-}
+};
 
 /**
  * 更新用户信息
  * @param formEl
  */
 const submitForm = async () => {
-  if (!userInfoFormRef.value) return
+	if (!userInfoFormRef.value) return;
 	await userInfoFormRef.value.validate((valid, fields) => {
 		if (valid) {
 			api.updateUserInfo(state.personalForm).then((res: any) => {
-        ElMessage.success('更新成功')
+				ElMessage.success('更新成功');
-        getUserInfo()
+				getUserInfo();
-      })
+			});
 		} else {
-      ElMessage.error('表单验证失败,请检查~')
+			ElMessage.error('表单验证失败,请检查~');
-    }
-  })
 		}
+	});
+};
 
 /**
  * 获取消息通知
  */
 const getMsg = () => {
 	api.GetSelfReceive({}).then((res: any) => {
-    const {data} = res
+		const { data } = res;
 		state.newsInfoList = data || [];
-  })
+	});
-}
+};
 onMounted(() => {
 	getUserInfo();
 	getMsg();
-})
+});
 
 /**************************密码修改部分************************/
-const passwordFormShow = ref(false)
+const passwordFormShow = ref(false);
-const userPasswordFormRef = ref()
+const userPasswordFormRef = ref();
 const userPasswordInfo = reactive({
 	oldPassword: '',
 	newPassword: '',
-  newPassword2: ''
+	newPassword2: '',
-})
+});
 
 const validatePass = (rule, value, callback) => {
-  const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}')
+	const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
 	if (value === '') {
-    callback(new Error('请输入密码'))
+		callback(new Error('请输入密码'));
 	} else if (value === userPasswordInfo.oldPassword) {
-    callback(new Error('原密码与新密码一致'))
+		callback(new Error('原密码与新密码一致'));
 	} else if (!pwdRegex.test(value)) {
-    callback(new Error('您的密码复杂度太低(密码中必须包含字母、数字)'))
+		callback(new Error('您的密码复杂度太低(密码中必须包含字母、数字)'));
 	} else {
 		if (userPasswordInfo.newPassword2 !== '') {
-      userPasswordFormRef.value.validateField('newPassword2')
+			userPasswordFormRef.value.validateField('newPassword2');
-    }
-    callback()
 		}
+		callback();
 	}
+};
 const validatePass2 = (rule, value, callback) => {
 	if (value === '') {
-    callback(new Error('请再次输入密码'))
+		callback(new Error('请再次输入密码'));
 	} else if (value !== userPasswordInfo.newPassword) {
-    callback(new Error('两次输入密码不一致!'))
+		callback(new Error('两次输入密码不一致!'));
 	} else {
-    callback()
+		callback();
-  }
 	}
+};
 
 const passwordRules = reactive({
 	oldPassword: [
 		{
 			required: true,
 			message: '请输入原密码',
-      trigger: 'blur'
+			trigger: 'blur',
-    }
+		},
 	],
 	newPassword: [{ validator: validatePass, trigger: 'blur' }],
-  newPassword2: [{ validator: validatePass2, trigger: 'blur' }]
+	newPassword2: [{ validator: validatePass2, trigger: 'blur' }],
-})
+});
 
 /**
  * 重新设置密码
@@ -347,16 +330,15 @@ const settingPassword= ()=>{
 	userPasswordFormRef.value.validate((valid) => {
 		if (valid) {
 			api.UpdatePassword(userPasswordInfo).then((res: any) => {
-        ElMessage.success('密码修改成功')
+				ElMessage.success('密码修改成功');
-      })
+			});
 		} else {
 			// 校验失败
 			// 登录表单校验失败
-      ElMessage.error('表单校验失败，请检查')
+			ElMessage.error('表单校验失败，请检查');
 		}
-  })
+	});
-}
+};
-
 </script>
 
 <style scoped lang="scss">