修改密码

psdc-ui/src/api/system/userInfo.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+/** 获取设备*/
+export function getUpdatePwd() {
+    return request.put('/system/user/profile/updatePwd')
+}

psdc-ui/src/views/system/user/profile/index.vue

@@ -41,17 +41,28 @@
             <el-card>
                <template v-slot:header>
                  <div class="clearfix">
-                   <span>基本资料</span>
+                   <span>修改密码</span>
                  </div>
                </template>
-               <el-tabs v-model="activeTab">
-                  <el-tab-pane label="基本资料" name="userinfo">
-                     <userInfo :user="state.user" />
-                  </el-tab-pane>
-                  <el-tab-pane label="修改密码" name="resetPwd">
-                     <resetPwd />
-                  </el-tab-pane>
-               </el-tabs>
+                <el-form ref="formResetPwd" :model="userResetPwd" label-width="80px" :rules="rules">
+                  <el-form-item label="旧密码" prop="oldPassword">
+                    <el-input v-model="userResetPwd.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
+                  </el-form-item>
+                  <el-form-item label="新密码" prop="newPassword">
+                    <el-input v-model="userResetPwd.newPassword" placeholder="请输入新密码" type="password" show-password/>
+                  </el-form-item>
+                  <el-form-item label="确认密码" prop="confirmPassword">
+                    <el-input v-model="userResetPwd.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" size="mini" @click="submitResetPwd">保存</el-button>
+                  </el-form-item>
+                </el-form>
+<!--               <el-tabs v-model="activeTab">-->
+<!--                  <el-tab-pane label="修改密码" name="resetPwd">-->
+<!--                     <resetPwd />-->
+<!--                  </el-tab-pane>-->
+<!--               </el-tabs>-->
             </el-card>
          </el-col>
       </el-row>
@@ -59,13 +70,20 @@
 </template>
 
 <script setup name="Profile">
+import {ref,reactive} from "vue"
 import { getUserProfile } from "@/api/system/user";
+import { getUpdatePwd } from "@/api/system/userInfo";
 
-const activeTab = ref("userinfo");
+// const activeTab = ref("userinfo");
 const state = reactive({
   user: {},
   roleGroup: {},
-  postGroup: {}
+  postGroup: {},
+  userResetPwd:{
+    oldPassword: undefined,
+    newPassword: undefined,
+    confirmPassword: undefined
+  },
 });
 
 function getUser() {
@@ -76,5 +94,55 @@ function getUser() {
   });
 };
 
+//新旧密码表单
+const userResetPwd = reactive({
+    oldPassword: undefined,
+    newPassword: undefined,
+    confirmPassword: undefined
+})
+
+//规则
+const rules = reactive({
+  oldPassword: [
+    {required: true, message: "旧密码不能为空", trigger: "blur"}
+  ],
+  newPassword: [
+    {required: true, message: "新密码不能为空", trigger: "blur"},
+    {min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"}
+  ],
+  confirmPassword: [
+    {required: true, message: "确认密码不能为空", trigger: "blur"},
+    // {required: true, validator: equalToPassword, trigger: "blur"}
+  ]
+})
+
+//保存按钮
+function submitResetPwd() {
+  // this.$refs["formResetPwd"].validate(valid => {
+  //   if (valid) {
+      // userResetPwd().then(response => {
+      //   if (response.data.code === 200){
+      //     this.$message.success(response.data.msg)
+      //     this.$router.push({ path: "/Logout" });
+      //   }else {
+      //     this.$message.error(response.data.msg)
+      //   }
+      // });
+      getUpdatePwd({
+        oldPassword: '123456',
+        newPassword: '16341526'
+      }).then((res)=>{
+        console.log(res)
+    //   })
+    // }
+  })
+}
+
 getUser();
 </script>
+
+<style lang="scss" scoped>
+::v-deep .el-form-item__label{
+  color: #606266 !important;
+}
+</style>