feat: 新增重置密码弹窗

src/views/system/user/modules/user-operate-drawer.vue

@@ -115,11 +115,11 @@ async function handleSubmit() {
     const { error } = await fetchCreateUser({
       deptId,
       userName,
+      password,
       nickName,
       email,
       phonenumber,
       sex,
-      password,
       status,
       remark
     });
@@ -135,7 +135,6 @@ async function handleSubmit() {
       email,
       phonenumber,
       sex,
-      password,
       status,
       remark
     });
@@ -156,7 +155,7 @@ watch(visible, () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+  <NDrawer v-model:show="visible" display-directive="show" :width="800" class="max-w-90%">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <NSpin :show="loading">
         <NForm ref="formRef" :model="model" :rules="rules">
@@ -184,7 +183,7 @@ watch(visible, () => {
           <NFormItem v-if="operateType === 'add'" :label="$t('page.system.user.userName')" path="userName">
             <NInput v-model:value="model.userName" :placeholder="$t('page.system.user.form.userName.required')" />
           </NFormItem>
-          <NFormItem :label="$t('page.system.user.password')" path="password">
+          <NFormItem v-if="operateType === 'add'" :label="$t('page.system.user.password')" path="password">
             <NInput
               v-model:value="model.password"
               type="password"
@@ -216,7 +215,7 @@ watch(visible, () => {
       <template #footer>
         <NSpace :size="16">
           <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
-          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
         </NSpace>
       </template>
     </NDrawerContent>

src/views/system/user/modules/user-password-drawer.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import { fetchResetUserPassword } from '@/service/api/system';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'UserPasswordDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData?: Api.System.User | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { patternRules } = useFormRules();
+
+type Model = Api.System.UserOperateParams & { deptName: string };
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    deptId: null,
+    userName: '',
+    nickName: '',
+    deptName: '',
+    password: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'password'>;
+
+const rules: Record<RuleKey, App.Global.FormRule[]> = {
+  password: [{ ...patternRules.pwd }]
+};
+
+function handleUpdateModelWhenEdit() {
+  Object.assign(model, props.rowData);
+  model.password = '';
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  const { userId, password } = model;
+
+  // request
+  const { error } = await fetchResetUserPassword(userId!, password!);
+  if (error) return;
+
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent title="重置密码" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem :label="$t('page.system.user.nickName')" path="nickName">
+          <NInput v-model:value="model.nickName" disabled />
+        </NFormItem>
+        <NFormItem :label="$t('page.system.user.deptName')" path="deptName">
+          <NInput v-model:value="model.deptName" disabled />
+        </NFormItem>
+        <NFormItem :label="$t('page.system.user.userName')" path="userName">
+          <NInput v-model:value="model.userName" disabled />
+        </NFormItem>
+        <NFormItem :label="$t('page.system.user.password')" path="password">
+          <NInput
+            v-model:value="model.password"
+            type="password"
+            show-password-on="click"
+            :placeholder="$t('page.system.user.form.password.required')"
+          />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>