update

user_web/src/components/user/UserRight.vue

@@ -70,12 +70,47 @@ onMounted(function() {
 });
 
 
+// 模态框是否显示 - 修改密码
+let showDialogUpdatePassword = ref(false);
+
+
+// 用于表单验证规则必须要的对象
+let ruleFormRefUpdatePassword = ref();
+
+/**
+ * 添加，最后提交的数据
+ */
+let updateParamsUpdatePassword = ref({
+    // 密码
+    "newPassword": null,
+    // 确认密码
+    "newPassword2": null
+});
+
+/**
+ * 添加，字段相关验证规则
+ */
+let updateRulesUpdatePassword = ref({
+    newPassword: [{ required: true, message: '请填写密码', trigger: 'blur' }],
+    newPassword2: [{ required: true, message: '请填写确认密码', trigger: 'blur' }],
+});
+
 /**
  * 修改密码
+ * @param formEl
  */
-const updatePassword = () => {
+const updatePassword = (formEl) => {
+
+    if (!formEl) return
+    formEl.validate((valid, fields) => {
+        if (valid) {
+            console.log("开始出发提交", updateParamsUpdatePassword.value);
+
+            
 
-    console.log("修改密码");
+
+        }
+    })
 
 }
 
@@ -99,15 +134,35 @@ const updatePassword = () => {
             {{ userName }}
             <img class="imgDown" src="../../assets/res/img/user/down.png"  />
         </div>
-
         
         <div
         v-show="open == true"
         v-on:mousemove="windowsEvent()" v-on:mouseout="windowsExitEvent()"
         class="list">
-            <div class="select" @click="updatePassword" >修改密码</div>
+            <div class="select" @click="showDialogUpdatePassword = true" >修改密码</div>
             <div class="select" v-on:click="exitEvent()" >退出登陆</div>
         </div>
+        
+        <!-- 修改模态框 -->
+        <el-dialog v-model="showDialogUpdatePassword" class="dialog">
+            <template #header>
+                <div class="dialog-title">修改密码</div>
+            </template>
+            <div class="dialogBody">
+                <el-form ref="ruleFormRefUpdatePassword" :model="updateParamsUpdatePassword" :rules="updateRulesUpdatePassword">
+                    <el-form-item label="新的密码" prop="newPassword">
+                        <el-input v-model="updateParamsUpdatePassword.newPassword" type="password" clearable placeholder="请填写密码"></el-input>
+                    </el-form-item>
+                    <el-form-item label="确认新密码" prop="newPassword2">
+                        <el-input v-model="updateParamsUpdatePassword.newPassword2" type="password" clearable placeholder="请填写确认密码"></el-input>
+                    </el-form-item>
+                </el-form>
+                <div class="dialogFoot">
+                    <el-button color="#EAEAEA" @click="showDialogUpdatePassword = false" style="margin-right: 0.6rem">取消</el-button>
+                    <el-button color="#2C68FF" @click="updatePassword(ruleFormRefUpdatePassword)">确认</el-button>
+                </div>
+            </div>
+        </el-dialog>
 
     </div>