financial_audit_console/src/pages/System/AdminUpdate/index.tsx

import { updateSetting } from '@/services/api/system'
import consts from '@/utils/consts'
import { PageContainer } from '@ant-design/pro-layout'
import { Card, Form, Input, Button, message } from 'antd'
import React from 'react'
import { history, useRequest } from '@umijs/max'

const AdminUpdate = () => {
  const [form] = Form.useForm()
  const { run: tryUpdate } = useRequest(updateSetting, {
    manual: true,
    onSuccess: () => {
      window.localStorage.removeItem('TOKEN_ID')
      message.info('当前用户密码已修改，请重新登录。')
      history.replace({
        pathname: consts.loginPath
      })
    },
    onError: e => {
      console.log(e)
    }
  })
  return (
    <PageContainer title={false}>
      <Card>
        <div className="text-2xl mb-7">管理员</div>
        <Form
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 3 }}
          layout="horizontal"
          form={form}
          initialValues={{ username: 'admin' }}>
          <Form.Item label="帐号" name="username">
            <Input disabled />
          </Form.Item>
          <Form.Item label="旧密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="请输入" />
          </Form.Item>
          <Form.Item label="新密码" name="newPassword" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="请输入" />
          </Form.Item>
          <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"
              onClick={() => {
                form.validateFields().then(async values => {
                  await tryUpdate(values)
                  form.resetFields()
                })
              }}>
              确定修改
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  )
}

export default AdminUpdate