Browse Source

feat: 管理员修改密码增加表单校验,新密码与确认密码的自定义校验逻辑。

lanjianrong 3 years ago
parent
commit
ca6c6b003b
1 changed files with 44 additions and 11 deletions
  1. 44 11
      src/pages/System/AdminUpdate/index.tsx

+ 44 - 11
src/pages/System/AdminUpdate/index.tsx

@@ -2,39 +2,72 @@ import { updateSetting } from '@/services/api/system'
 import { PageContainer } from '@ant-design/pro-layout'
 import { Card, Form, Input, Button, message } from 'antd'
 import React from 'react'
+import { useRequest } from 'umi'
 
 const AdminUpdate = () => {
   const [form] = Form.useForm()
+  const { run: tryUpdate } = useRequest(updateSetting, {
+    manual: true,
+    onSuccess: () => message.success('更新成功'),
+    onError: e => {
+      console.log(e)
+    }
+  })
   return (
     <PageContainer title={false}>
       <Card>
         <div className="text-2xl mb-7">管理员</div>
         <Form
           labelCol={{ span: 2 }}
-          wrapperCol={{ span: 8 }}
+          wrapperCol={{ span: 3 }}
           layout="horizontal"
           form={form}
           initialValues={{ username: 'admin' }}
-          onFinish={async values => {
-            await updateSetting(values)
-            form.resetFields()
-            message.success('更新成功')
-            return true
-          }}>
+        >
           <Form.Item label="帐号" name="username">
             <Input disabled />
           </Form.Item>
-          <Form.Item label="旧密码" name="password">
+          <Form.Item
+            label="旧密码"
+            name="password"
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
             <Input.Password placeholder="请输入" />
           </Form.Item>
-          <Form.Item label="新密码" name="newPassword">
+          <Form.Item
+            label="新密码"
+            name="newPassword"
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
             <Input.Password placeholder="请输入" />
           </Form.Item>
-          <Form.Item label="确认新密码" name="confirmPassword">
+          <Form.Item
+            label="确认新密码"
+            name="confirmPassword"
+            rules={[
+              { required: true, message: '请输入密码' },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue('newPassword') === value) {
+                    return Promise.resolve()
+                  }
+                  return Promise.reject(new Error('两次输入的密码不一致!'))
+                }
+              })
+            ]}
+          >
             <Input.Password placeholder="请输入" />
           </Form.Item>
           <Form.Item wrapperCol={{ offset: 2, span: 8 }}>
-            <Button type="primary" htmlType="submit">
+            <Button
+              type="primary"
+              onClick={() => {
+                form.validateFields().then(async values => {
+                  await tryUpdate(values)
+                  form.resetFields()
+                })
+              }}
+            >
               确认修改
             </Button>
           </Form.Item>