GHHub/src/views/account/Management.jsx

import { useState, useEffect } from 'react'
import { Row, Col, Space, Button, Table, Select, TreeSelect, Typography, Modal, App, Form, Input } from 'antd'
import { ExclamationCircleFilled } from '@ant-design/icons'
import { useTranslation } from 'react-i18next'
import useFormStore from '@/stores/Form'
import useAuthStore from '@/stores/Auth'
import dayjs from 'dayjs'
import { isEmpty } from '@/utils/commons'
import useAccountStore from '@/stores/Account'
import { fetchRoleList } from '@/stores/Account'
import SearchForm from '@/components/SearchForm'
import RequireAuth from '@/components/RequireAuth'
import { PERM_ROLE_NEW } from '@/config'

const { Title } = Typography

function Management() {
  const { t } = useTranslation()

  const accountListColumns = [
    {
      title: t('account:username'),
      dataIndex: 'username',
      render: accountRender
    },
    {
      title: t('account:realname'),
      dataIndex: 'realname',
    },
    {
      title: t('account:travelAgency'),
      dataIndex: 'travelAgency',
    },
    {
      title: t('account:email'),
      dataIndex: 'email',
    },
    {
      title: t('account:role'),
      dataIndex: 'role'
    },
    {
      title: t('account:lastLogin'),
      dataIndex: 'lastLogin',
      render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD HH:mm:ss'))
    },
    {
      title: t('account:action'),
      dataIndex: 'account:action',
      render: actionRender
    },
  ]

  function accountRender(text, account) {
    return (
      <Button type='link' onClick={() => onAccountSeleted(account)}>{text}</Button>
    )
  }

  function actionRender(text, account) {
    return (
      <Space key='actionRenderSpace' size='middle'>
        <Button type='link' key='disable' onClick={() => showDisableConfirm(account)}>{t('account:action.disable')}</Button>
        <Button type='link' key='resetPassword' onClick={() => showResetPasswordConfirm(account)}>{t('account:action.resetPassword')}</Button>
      </Space>
    )
  }

  const [isAccountModalOpen, setAccountModalOpen] = useState(false)
  const [dataLoading, setDataLoading] = useState(false)
  const [roleAllList, setRoleAllList] = useState([])

  const [accountForm] = Form.useForm()
  const [searchAccountByCriteria, accountList, disableAccount, saveOrUpdateAccount, resetAccountPassword] =
    useAccountStore((state) =>
      [state.searchAccountByCriteria, state.accountList, state.disableAccount, state.saveOrUpdateAccount, state.resetAccountPassword])

  const { notification, modal } = App.useApp()

  useEffect (() => {
    fetchRoleList()
      .then((roleList) => {
        setRoleAllList(roleList.map(r => {
          return {
            value: r.role_id,
            label: r.role_name,
            disabled: r.role_id === 1
          }
        }))
      })
  }, [])

  const onAccountSeleted = async (account) => {
    accountForm.setFieldsValue(account)
    setAccountModalOpen(true)
  }

  const onAccountFinish = (values) => {
    console.log(values)
    saveOrUpdateAccount(values)
      .catch(ex => {
        notification.error({
          message: 'Notification',
          description: ex.message,
          placement: 'top',
          duration: 4,
        })
      })
  }

  const onAccountFailed = (error) => {
    console.log('Failed:', error)
    // form.resetFields()
  }

  const showDisableConfirm = (account) => {
    modal.confirm({
      title: 'Do you want to disable this account?',
      icon: <ExclamationCircleFilled />,
      content: `Username: ${account.username}, Realname: ${account.realname}`,
      onOk() {
        disableAccount(account.userId)
      },
      onCancel() {
      },
    })
  }

  const showResetPasswordConfirm = (account) => {
    const randomPassword = account.username + (Math.floor(Math.random() * 900) + 100)
    modal.confirm({
      title: 'Do you want to reset password?',
      icon: <ExclamationCircleFilled />,
      content: `Username: ${account.username}, Realname: ${account.realname}`,
      onOk() {
        resetAccountPassword(account.userId, randomPassword)
          .then(() => {
            notification.info({
              message: '新密码：' + randomPassword,
              description: `请复制密码给 [${account.realname}]`,
              placement: 'top',
              duration: 60,
            })
          })
        console.log('ResetPassword')
      },
      onCancel() {
      },
    })
  }

  return (
    <>
      <Modal
        centered
        okButtonProps={{
          autoFocus: true,
          htmlType: 'submit',
        }}
        title={t('account:management.newAccount')}
        open={isAccountModalOpen} onOk={() => setAccountModalOpen(false)} onCancel={() => setAccountModalOpen(false)}
        destroyOnClose={true}
        clearOnDestroy={true}
        modalRender={(dom) => (
          <Form
          name='AccountForm'
          form={accountForm}
          layout='vertical'
          size='large'
          style={{
            maxWidth: 600,
          }}
          onFinish={onAccountFinish}
          onFinishFailed={onAccountFailed}
          autoComplete='off'
        >
            {dom}
          </Form>
        )}
      >
      <Form.Item name='userId' className='hidden' ><Input /></Form.Item>
      <Form.Item name='lmi_sn' className='hidden' ><Input /></Form.Item>
      <Form.Item name='lmi2_sn' className='hidden' ><Input /></Form.Item>
        <Form.Item
          label={t('account:management.username')}
          name='username'
          rules={[
            {
              required: true,
              message: t('account:Validation.username'),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t('account:management.realname')}
          name='realname'
          rules={[
            {
              required: true,
              message: t('account:Validation.realname'),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t('account:management.email')}
          name='email'
          rules={[
            {
              required: true,
              message: t('account:Validation.email'),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t('account:management.travelAgency')}
          name='travelAgencyId'
          rules={[
            {
              required: true,
              message: t('account:Validation.travelAgency'),
            },
          ]}
        >
          <Select options={[{ value: 33032, label: 'test海外地接B' }]}></Select>
        </Form.Item>
        <Form.Item
          label={t('account:management.role')}
          name='roleId'
          rules={[
            {
              required: true,
              message: t('account:Validation.role'),
            },
          ]}
        >
          <Select options={roleAllList}>
          </Select>
        </Form.Item>
      </Modal>
      <Space direction='vertical' style={{ width: '100%' }}>
        <Title level={3}>{t('account:management.tile')}</Title>
        <SearchForm
          fieldsConfig={{
            shows: ['username', 'realname', 'dates'],
            fieldProps: {
              dates: { label: t('group:ArrivalDate') },
            },
          }}
          onSubmit={(err, formValues, filedsVal) => {
            console.info(formValues)
            setDataLoading(true)
            searchAccountByCriteria(formValues)
              .catch(ex => {
                notification.error({
                  message: 'Notification',
                  description: ex.message,
                  placement: 'top',
                  duration: 4,
                })
              })
              .finally(() => {
                setDataLoading(false)
              })
          }}
        />
        <Row>
          <Col span={24}>
            <Space>
              <Button onClick={() => setAccountModalOpen(true)}>{t('account:management.newAccount')}</Button>
            </Space>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Table
              bordered
              loading={dataLoading}
              rowKey='username'
              pagination={{
                showQuickJumper: true,
                showLessItems: true,
                showSizeChanger: true,
                showTotal: (total) => { return t('Total') + `：${total}` }
              }}
              onChange={(pagination) => { onSearchClick(pagination.current) }}
              columns={accountListColumns} dataSource={accountList}
            />
          </Col>
        </Row>
      </Space>
    </>
  )
}

export default Management