修改密码

src/views/user_management/user/add.vue

@@ -12,6 +12,11 @@
             <el-input v-model="form.name" />
           </el-form-item>
         </el-col>
+        <el-col :span="12" v-if="!userId">
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form.password" />
+          </el-form-item>
+        </el-col>
         <el-col :span="12">
           <el-form-item label="手机号" prop="mobile">
             <el-input v-model="form.mobile" />
@@ -99,6 +104,7 @@ const form = ref({
   mobile: "",
   email: "",
   userType: "",
+  password: "",
 });
 const rules = {
   username: [
@@ -110,6 +116,10 @@ const rules = {
     { required: true, message: "姓名不能为空", trigger: "blur" },
     { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
   ],
+  password: [
+    { required: true, message: "密码不能为空", trigger: "blur" },
+    { min: 6, max: 18, message: "密码长度为6-18位", trigger: "blur" },
+  ],
   mobile: [
     { required: true, message: "手机号码不能为空", trigger: "blur" },
     { pattern: MOBILE_PHONE, message: "请输入正确的手机号码", trigger: "blur" },

src/views/user_management/user/components/change_password.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-dialog v-model="visible" title="修改密码" width="600px" @close="fnClose">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <!-- <el-form-item label="旧密码" prop="password">
+        <el-input v-model="form.password" type="password" />
+      </el-form-item> -->
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input v-model="form.newPassword" type="password" />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="newPasswordConfirm">
+        <el-input v-model="form.newPasswordConfirm" type="password" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="fnSubmit">确认修改</el-button>
+      <el-button @click="fnClose">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useForm from "@/hooks/useForm.js";
+import { setChangePassword } from "@/request/api.js";
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+const emits = defineEmits(["submit"]);
+const visible = defineModel("visible", { type: Boolean, required: true });
+const props = defineProps({
+  userId: {
+    type: String,
+    required: true,
+  },
+});
+const form = ref({
+  // password: "",
+  newPassword: "",
+  newPasswordConfirm: "",
+});
+const { formRef, validate, reset } = useForm();
+const validatePass = (_rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请再次输入新密码"));
+  } else if (value !== form.value.newPassword) {
+    callback(new Error("两次输入密码不一致!"));
+  } else {
+    callback();
+  }
+};
+const rules = {
+  // password: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
+  newPassword: [
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { min: 6, max: 18, message: "密码长度为6-18位", trigger: "blur" },
+  ],
+  newPasswordConfirm: [
+    { required: true, validator: validatePass, trigger: "blur" },
+  ],
+};
+const fnClose = () => {
+  reset();
+  visible.value = false;
+};
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    await setChangePassword({ ...form.value, userId: props.userId });
+    ElMessage.success("修改成功");
+    fnClose();
+    emits("submit");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped lang="scss"></style>

src/views/user_management/user/index.vue

@@ -31,9 +31,9 @@
           type="primary"
           text
           link
-          @click="fnResetPassword(row.userId, row.username)"
+          @click="fnResetPassword(row.userId)"
         >
-          重置密码
+          修改密码
         </el-button>
         <el-button
           type="danger"
@@ -56,6 +56,11 @@
         </el-button>
       </template>
     </app-table>
+    <change-password
+      v-model:visible="passwordDialog.visible"
+      :user-id="passwordDialog.userId"
+      @submit="resetPagination"
+    ></change-password>
   </div>
 </template>
 
@@ -68,10 +73,11 @@ import useListData from "@/hooks/useListData.js";
 import {
   getUserList,
   setUserDelete,
-  setUserResetPassword,
+  // setUserResetPassword,
 } from "@/request/user_management.js";
 import AppTable from "@/components/table/index.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
+import changePassword from "./components/change_password.vue";
 const router = useRouter();
 const roleList = ref([]);
 const { list, pagination, searchForm, getData, resetPagination, tableRef } =
@@ -84,14 +90,22 @@ const options = [
   const resData = await getRoleListAll();
   roleList.value = resData.roleList;
 })();
-const fnResetPassword = async (userId, name) => {
+const passwordDialog = ref({
-  await ElMessageBox.confirm(
+  visible: false,
-    `"确定要将【${name}】的密码重置为[Aqsc@0335]吗?"`,
+  userId: "",
-    { type: "warning" }
+});
-  );
+const fnResetPassword = async (userId) => {
-  await setUserResetPassword({ userId });
+  passwordDialog.value.visible = true;
-  ElMessage.success("重置成功");
+  passwordDialog.value.userId = userId;
-  resetPagination();
+
+  // await ElMessageBox.prompt("请输入新密码", "提示");
+  // await ElMessageBox.confirm(
+  //   `"确定要将【${name}】的密码重置为[Aqsc@0335]吗?"`,
+  //   { type: "warning" }
+  // );
+  // await setUserResetPassword({ userId, newPassword });
+  // ElMessage.success("重置成功");
+  // resetPagination();
 };
 const fnDelete = async (userId, name) => {
   let ids = [];