527修改密码

src/components/layout/openpage.vue

@@ -87,7 +87,7 @@
           </div>
           
         </template>
-        <el-form label-width="100px" class="userinfo-form">
+        <el-form :label-width="labelWidth" class="userinfo-form">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item :label="$t('dialog.username')">
@@ -122,20 +122,66 @@
       </template>
 
     </el-dialog>
+
+    <!-- 修改密码 -->
+    <el-dialog v-model="dialog.changePassword" align-center :append-to-body="true" 
+      width="500" class="dialog_class" draggable>
+
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header ">
+          <!-- <el-image :src="icon" fit="contain"></el-image> -->
+          <h4 :id="titleId" :class="titleClass">{{ $t('dialog.changePassword') }}</h4>
+        </div>
+      </template>
+      
+      <el-card class="userinfo-card" shadow="never">
+        
+        <el-form :label-width="labelWidth1">
+          <el-form-item :label="`${$t('dialog.oldPassword')}：`">
+            <el-input v-model="pwd.oldPassword" 
+            type="password"
+            show-password 
+            :placeholder="$t('dialog.inputOldPassword')" />
+          </el-form-item>
+          <el-form-item :label="`${$t('dialog.newPassword')}：`">
+            <el-input v-model="pwd.newPassword" 
+            type="password"
+            show-password 
+            :placeholder="$t('dialog.inputNewPassword')" />
+          </el-form-item>
+          <el-form-item :label="`${$t('dialog.confirmNewPassword')}：`">
+            <el-input v-model="pwd.confirmNewPassword" 
+            type="password"
+            show-password
+            :placeholder="$t('dialog.inputConfirmNewPassword')" />
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <template #footer>
+        <span class="lastbtn">
+          <el-button @click="dialog.changePassword = false">{{ $t('dialog.cancel') }}</el-button>
+          <el-button @click="ChangePassword">
+            {{ $t('dialog.ok') }}
+          </el-button>
+        </span>
+      </template>
+
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import myheader from '@/components/layout/header.vue'
 import { RouterView, RouterLink,useRouter } from "vue-router"
-import { request, uploadFile } from "@/utils/request";
+import { request, enPassword } from "@/utils/request";
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/store/user'
 import { removeToken,removeUserId} from "@/utils/token";
 import { ArrowDown,User,Key,SwitchButton } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 
 import set from '@/assets/img/set.png'
 import ceng from '@/assets/img/ceng.png'
@@ -148,11 +194,25 @@ const userStore = useUserStore();
 
 const nickName = userStore.userInfo.nickName || 'User';
 
+const labelWidth = computed(() => {
+  return locale.value === 'zh-CN' ? '80px' : '120px'
+})
+
+const labelWidth1 = computed(() => {
+  return locale.value === 'zh-CN' ? '90px' : '140px'
+})
+
 let dialog = ref({
   userinfoDialog: false,
   changePassword: false,
 });
 
+let pwd = ref({
+  oldPassword: '',
+  newPassword: '',
+  confirmNewPassword: ''
+})
+
 const activeIndex = computed(() => {
   // 获取当前路由的所有匹配路径
   const matched = router.currentRoute.value.matched
@@ -166,7 +226,41 @@ const handleProfile = () => {
 }
 
 const handleChangePassword = () => {
-  // router.push('/change-password');
+  dialog.value.changePassword = true;
+  pwd.value.oldPassword = '';
+  pwd.value.newPassword = '';
+  pwd.value.confirmNewPassword = '';
+}
+
+const ChangePassword = () => {
+  if (!pwd.value.oldPassword) {
+    ElMessage.error(t('dialog.inputOldPassword'));
+    return;
+  }else if(!pwd.value.newPassword) {
+    ElMessage.error(t('dialog.inputNewPassword'));
+    return;
+  }else if(!pwd.value.confirmNewPassword) {
+    ElMessage.error(t('dialog.inputConfirmNewPassword'));
+    return;
+  }
+  if (pwd.value.newPassword !== pwd.value.confirmNewPassword) {
+    ElMessage.error(t('dialog.passwordMismatch'));
+    return;
+  }
+
+  const params = {
+      transCode: "B00003",
+      oldPassword: enPassword(pwd.value.oldPassword),
+      newPassword: enPassword( pwd.value.newPassword),
+    } 
+
+  request(params).then(res => {
+    ElMessage.success(t('dialog.passwordChangeSuccess'));
+    dialog.value.changePassword = false;
+  }).catch(error => {
+    console.error(error);
+    ElMessage.error(t('dialog.passwordChangeFailed'));
+  });
 }
 
 const handleLogout = () => {

src/locales/en.json

@@ -25,6 +25,10 @@
     "title": "Login",
     "subtitle": "Web-Based Engine System-Level Simulation Software",
     "username": "Username",
+    "inputusername": "Please enter your username",
+    "inputpassword": "Please enter your password",
+    "checknamepwd": "Please enter username and password",
+    "loginError": "Login failed, please check your username and password",
     "password": "Password",
     "rememberMe": "Remember Me",
     "loginButton": "Login",
@@ -72,6 +76,16 @@
     "delete": "Delete",
     "save": "Save",
     "userinfo": "User Info",
+    "changePassword": "Change Password",
+    "oldPassword": "Old Password",
+    "newPassword": "New Password",
+    "confirmNewPassword": "Confirm Again",
+    "inputOldPassword": "Please enter old password",
+    "inputNewPassword": "Please enter new password",
+    "inputConfirmNewPassword": "Please confirm new password",
+    "passwordMismatch": "Passwords do not match",
+    "passwordChangeSuccess": "Password changed successfully",
+    "passwordChangeFailed": "Password change failed",
     "username": "Username",
     "nickname": "Nickname",
     "email": "Email",

src/locales/zh-CN.json

@@ -26,6 +26,10 @@
     "subtitle": "基于Web的引擎系统级仿真软件",
     "username": "用户名",
     "password": "密码",
+    "inputusername": "请输入用户名",
+    "inputpassword": "请输入密码",
+    "checknamepwd": "请输入用户名和密码",
+    "loginError": "登录失败，请检查您的用户名和密码",
     "rememberMe": "记住密码",
     "loginButton": "登录",
     "forgotPassword": "忘记密码？",
@@ -72,6 +76,16 @@
     "delete": "删除",
     "save": "保存",
     "userinfo": "个人信息",
+    "changePassword": "修改密码",
+    "oldPassword": "原密码",
+    "newPassword": "新密码",
+    "confirmNewPassword": "确认密码",
+    "inputOldPassword": "请输入原密码",
+    "inputNewPassword": "请输入新密码",
+    "inputConfirmNewPassword": "请确认新密码",
+    "passwordMismatch": "两次输入的密码不一致",
+    "passwordChangeSuccess": "密码修改成功",
+    "passwordChangeFailed": "密码修改失败",
     "username": "用户名",
     "nickname": "昵称",
     "email": "邮箱",

src/views/login/index.vue

@@ -24,19 +24,25 @@
             hide-required-asterisk
             label-position="left"
           >
-            <el-form-item prop="username" :label="`${$t('login.username')}：`" style="margin-bottom: 20px;" label-width="100px">
+            <el-form-item prop="username" 
+            :label="`${$t('login.username')}：`" 
+            style="margin-bottom: 20px;" 
+            label-width="100px">
               <el-input
                 v-model="loginForm.username"
-                placeholder=""
+                :placeholder="$t('login.inputusername')"
                 prefix-icon="User"
                 clearable
               />
             </el-form-item>
 
-            <el-form-item prop="password" :label="`${$t('login.password')}：`" style="margin-bottom: 20px;" label-width="100px">
+            <el-form-item prop="password" 
+            :label="`${$t('login.password')}：`" 
+            style="margin-bottom: 20px;" 
+            label-width="100px">
               <el-input
                 v-model="loginForm.password"
-                placeholder=""
+                :placeholder="$t('login.inputpassword')"
                 prefix-icon="Lock"
                 show-password
                 clearable
@@ -85,6 +91,11 @@ import { useUserStore } from '@/store/user'
 
 import loginbg from '@/assets/img/login-bg.png'
 import loginLogo from '@/assets/img/login-logo.png'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+
+
 // 表单引用
 const loginFormRef = ref(null)
 
@@ -116,6 +127,11 @@ const loginRules = reactive({
 const handleLogin = () => {
   loginFormRef.value.validate(valid => {
     if (!valid) return
+    // 检查是否有输入用户名和密码
+    if (!loginForm.username || !loginForm.password) {
+      ElMessage.error(t('login.checknamepwd'));
+      return;
+    }
     if (loginForm.remember) {
         secureStorage.set('savedUsername', loginForm.username)
         secureStorage.set('savedPassword', loginForm.password)
@@ -133,7 +149,7 @@ const handleLogin = () => {
       password: enPassword(loginForm.password),
       type: "",
     }
-    console.log(params)
+    // console.log(params)
     request(params)
     .then((res) => {
       setToken(res.clientToken)
@@ -154,8 +170,8 @@ const handleLogin = () => {
       router.push({ path: "/" })
     })
     .catch((err) => {
-      console.error('错误信息：',err);
-      ElMessage.error(err.returnMsg);
+      // console.error('错误信息：',err);
+      ElMessage.error(t('login.loginError'));
       loading.value = false;
     })
     .finally(() => {

src/views/project/index.vue

@@ -98,10 +98,10 @@
     </div>
     </template>
     <div>
-    <el-form-item :label="`${$t('project.name')}: `" label-width="120px">
+    <el-form-item :label="`${$t('project.name')}：`" :label-width="labelWidth">
         <el-input v-model="newproject.name" class="w-50 m-2" placeholder="请输入" maxlength="100"/>
     </el-form-item>
-    <el-form-item :label="`${$t('project.description')}: `" label-width="120px">
+    <el-form-item :label="`${$t('project.description')}：`" :label-width="labelWidth">
         <el-input v-model="newproject.description" class="w-50 m-2" placeholder="请输入" maxlength="500"/>
     </el-form-item>
     </div>
@@ -124,7 +124,12 @@ import { ElMessage, ElButton, ElDialog, ElSelect, ElMessageBox } from 'element-p
 import {Search} from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+
+const { t, locale } = useI18n()
+
+const labelWidth = computed(() => {
+  return locale.value === 'zh-CN' ? '60px' : '110px'
+})
 
 let projectlists = ref([]);
 let selectedRows = ref([]);