GHHub/src/views/account/Management.jsx

import { useState } 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 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

const permissionData = [
  {
    title: '海外供应商',
    value: 'oversea-0',
    key: 'oversea-0',
    children: [
      {
        title: '所有海外功能',
        value: 'oversea-0-0',
        key: 'oversea-0-0',
      },
    ],
  },
  {
    title: '机票管理',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: '录入机票价格',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: '产品管理',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: '搜索供应商产品',
        value: 'B-1-0',
        key: 'B-1-0',
      },
      {
        title: '录入产品价格',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: '新增产品描述',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: '复制供应商产品信息',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
  {
    title: '账号管理',
    value: '2-1',
    key: '2-1',
    children: [
      {
        title: '搜索账号',
        value: '2-1-01',
        key: '2-1-01',
      },
      {
        title: '新增账号',
        value: '2-1-11',
        key: '2-1-11',
      },
      {
        title: '禁用账号',
        value: '2-1-21',
        key: '2-1-21',
      },
      {
        title: '重置账号密码',
        value: '2-1-31',
        key: '2-1-31',
      },
      {
        title: '新增角色',
        value: '2-1-41',
        key: '2-1-41',
      },
    ],
  },
]

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',
      render: roleRender
    },
    {
      title: t('account:lastLogin'),
      dataIndex: 'lastLogin',
    },
    {
      title: t('account:action'),
      dataIndex: 'account:action',
      render: actionRender
    },
  ]

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

  function roleRender(text) {
    return (
      <Button type='link' onClick={() => setRoleModalOpen(true)}>{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 onPermissionChange = (newValue) => {
    console.log('onChange ', newValue)
    setPermissionValue(newValue)
  }

  const [permissionValue, setPermissionValue] = useState(['0-0-0'])
  const [isAccountModalOpen, setAccountModalOpen] = useState(false)
  const [isRoleModalOpen, setRoleModalOpen] = useState(false)
  const [dataLoading, setDataLoading] = useState(false)
  const [roleAllList, setRoleAllList] = useState([])

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

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

  const onAccountSeleted = async (account) => {
    accountForm.setFieldsValue(account)
    selectAccount(account)
    console.info(account)
    const roleList = await fetchRoleList()
    setRoleAllList(roleList.map(r => {
      return {
        value: r.role_id,
        label: r.role_name,
        disabled: r.role_id === 1
      }
    }))
    setAccountModalOpen(true)
  }

  const onAccountFinish = (values) => {
    console.log(values)
    saveOrUpdateAccount(values)
      .catch(ex => {
        console.info(ex.message)
        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) => {
    modal.confirm({
      title: 'Do you want to reset password?',
      icon: <ExclamationCircleFilled />,
      content: `Username: ${account.username}, Realname: ${account.realname}`,
      onOk() {
        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
          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