management/src/pages/Management/Setting/index.tsx

import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import SvgIcon from '@/components/SvgIcon'
import { iUserInfo } from '@/types/setting'
import consts from '@/utils/consts'
import { Button, Input, Table, Tooltip } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { apiAccountEdit, apiAccountEnable, apiAccountList } from './api'
import UserModal from './components/Modal'
import styles from './index.module.scss'
interface iModalStatus {
  visible: boolean
  loading: boolean
  type: string
}
export default function Info() {
  const initUserState = {
    account: '',
    accountGroup: undefined,
    company: '',
    csrf: '',
    enable: 0,
    id: '',
    isAdmin: 0,
    mobile: '',
    name: '',
    password: '',
    position: '',
    projectId: '',
    role: '',
    telephone: ''
  }
  const { Search } = Input
  const [ userList, setUserList ] = useState<iUserInfo[]>([ {
    "account": "",
    "accountGroup": 0,
    "company": "",
    "csrf": "",
    "enable": 0,
    "id": "",
    "isAdmin": 0,
    "mobile": "",
    "name": "",
    "password": "",
    "position": "",
    "projectId": "",
    "role": "",
    "telephone": ""
  } ])
  const initData = async () => {
    const { code = -1, data } = await apiAccountList()
    if (code === consts.RET_CODE.SUCCESS) {
      setUserList(data.sort((a: iUserInfo, b: iUserInfo) => b.isAdmin - a.isAdmin))
    }
  }
  const [ row, setRow ] = useState<iUserInfo>(initUserState)
  useEffect(() => {
    initData()
  }, [])
  const [ modalStatus, setModalStatus ] = useState<iModalStatus>({
    visible: false,
    loading: false,
    type: ''
  })
  const onCreate = async (values: iUserInfo) => {
    setModalStatus({ ...modalStatus, loading: true })
    const { code = -1 } = await apiAccountEdit(modalStatus.type, values)
    if (code === consts.RET_CODE.SUCCESS) {
      initData()
    }
    setModalStatus({
      ...modalStatus,
      visible: false,
      loading: false,
      type: ''
    })
  }
  const onCancel = () => {
    setModalStatus({ ...modalStatus, visible: false })

  }
  const editHandler = (user: iUserInfo) => {
    setRow(user)
    setModalStatus({ ...modalStatus, visible: true, type: 'edit' })
  }
  const enableHandler = async (record: iUserInfo, enable: 0 | 1) => {
    const { code = -1 } = await apiAccountEnable({ id: record.id, enable })
    if ( code === consts.RET_CODE.SUCCESS) {
      // setUserList([ ...userList, { ...record, enable } ])
      initData()
    }
  }
  const columns: ColumnsType<iUserInfo> = [
    {
      title: '账号',
      dataIndex: 'account',
      // eslint-disable-next-line react/display-name
      render: (text:any, record: iUserInfo) => {
        return (
          <div>
            <span>{text}</span>
            {
              record.isAdmin ?
                <Tooltip title="管理员"><span className="pi-mg-left-5"><SvgIcon iconClass="user-circle" fontSize="13"></SvgIcon></span></Tooltip>
              : ''
            }
          </div>
        )
      }
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '单位',
      dataIndex: 'company'
    },
    {
      title: '职位',
      dataIndex: 'postition'
    },
    {
      title: '手机',
      dataIndex: 'mobile'
    },
    {
      title: '电话',
      dataIndex: 'telephone'
    },
    {
      title: '操作',
      align: 'center',
      // eslint-disable-next-line react/display-name
      render: (_: any, record: iUserInfo) => {
        return (
          <div>
            <Button size="small" className="pi-mg-right-5" onClick={() => editHandler(record)}>编辑</Button>
            {
              !record.isAdmin ?
              record.enable ?
              <Button danger size="small" onClick={() => enableHandler(record, 0)}>停用</Button>
              : <Button size="small" className={styles.greenBtn} onClick={() => enableHandler(record, 1)}>启用</Button>
              : ''
            }
          </div>
        )
      }
    }
  ]
  return (
    <div className="content-wrap">
      <Header>
        <Slot position="right">
          <Button type="primary" size="small" onClick={() => {
            setRow({ ...row, ...initUserState })
            setModalStatus({ ...modalStatus, visible: true, type: 'add' })
          }}>添加账号</Button>
        </Slot>
        <Slot position="left">
          <Search placeholder="账号/姓名/单位/手机 搜索" loading={false} size="small"></Search>
        </Slot>
      </Header>
      <div className={styles.SettingContent}>
        <Table<iUserInfo>
          dataSource={userList}
          columns={columns}
          bordered
          rowClassName={(record: iUserInfo) => !record.enable ? 'pi-red' : ''}
          rowKey={record => record.id}
        ></Table>
      </div>
      <UserModal {...modalStatus} userInfo={row} onCreate={onCreate} onCancel={onCancel} initData={initData}></UserModal>
    </div>
  )
}