FEV2 / fw-cms

import React, { useState } from 'react';
import { Divider, message, Popconfirm, Table, Tooltip, Switch, Tag, Popover } from 'antd';
import { InfoCircleTwoTone } from '@ant-design/icons'
import { disableRoleApi, enableRoleApi, deleteRoleApi } from '../api'
import { useStore } from '../index';
import { RoleTypeEnum, roleTypeTag, roleRangeType, UseTypeColorEnum, UseTypeEnum } from '../entity';

const { Column } = Table;

export default function RoleList() {
  const { list, setList, paginationConfig, errMsg, loading, setLoading, setCurrentItem, setModalVisible, setRoleAuthVisible } = useStore();

  // 初始化 switch 按钮的 loading 属性
  const [switchLoading, setSwitchLoading] = useState(false);

  const handleModalVisible = (flag: boolean, itemData: any) => {
    setCurrentItem(itemData);
    setModalVisible(flag);
  }

  const handleAuthModal = (flag: boolean, record: any) => {
    setCurrentItem(record);
    setRoleAuthVisible(flag);
  }

  // 删除系统
  const handleDelete = (record: any) => {
    deleteRoleApi(record.id).then(res => {
      setLoading(true);
    });
  };
  // 禁用或启用角色
  const handleChangeStatus = (record: any) => {
    const api = record.status ? disableRoleApi : enableRoleApi;
    api(record.id).then(res => {
      setSwitchLoading(false);
      message.success(record.status ? "禁用成功" : "启用成功")
      const tempList = list.map((item: any) => {
        if (item.id === record.id) {
          return { ...item, status: record.status === 0 ? 1 : 0 };
        }
        return item;
      });
      setList(tempList);
    });
  }

  return (
    <Table
      locale={{ emptyText: errMsg || '暂无数据' }}
      dataSource={list}
      pagination={paginationConfig}
      rowKey={record => record.id.toString()}
      loading={loading}
      size="small"
    >
      <Column
        title="角色信息"
        dataIndex="roleName"
        align="left"
        width="35%"
        render={(roleName, record: Role.Info) => (
          <Popover placement="topLeft" content={(
            <span>
              <span>
                <span style={{ color: '#999' }}>角色ID：</span>
                <span style={{ color: '#333' }}>{record.id || '--'}</span>
              </span><br />
              <span>
                <span style={{ color: '#999' }}>角色名称：</span>
                <span style={{ color: '#333' }}>{roleName || '--'}</span>
              </span><br />
              <span>
                <span style={{ color: '#999' }}>角色编码：</span>
                <span style={{ color: '#333' }}>{record.roleCode || '--'}</span>
              </span>
              {record.remark ?
                <>
                  <br />
                  <span>
                    <span style={{ color: '#999' }}>备注信息：</span>
                    <span style={{ color: '#333' }}>{record.remark || '--'}</span>
                  </span>
                </> : null}
            </span>
          )}>
            <span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>角色ID：</span>
                <span style={{ color: '#333' }}>{record.id || '--'}</span>
              </span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>角色名称：</span>
                <span style={{ color: '#333' }}>
                  {record.remark ? <><InfoCircleTwoTone translate="yes" />&nbsp;&nbsp;</> : null}
                  {roleName || '--'}
                </span>
              </span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>角色编码：</span>
                <span style={{ color: '#333' }}>{record.roleCode || '--'}</span>
              </span>
            </span>
          </Popover>
        )}
      />
      <Column
        title="其他信息"
        align="left"
        width="35%"
        render={(record: Role.Info) => (
          <Popover placement="topLeft" content={(
            <span>
              <span>
                <span style={{ color: '#999' }}>角色类型：</span>
                {record.roleType ? <Tag color={roleTypeTag[record.roleType]}>{RoleTypeEnum[record.roleType]}</Tag> : '-'}
              </span><br />
              <span>
                <span style={{ color: '#999' }}>角色用途：</span>
                {record.useType ? <Tag color={UseTypeColorEnum[record.useType]}>{UseTypeEnum[record.useType]}</Tag> : '-'}
              </span><br />
              <span>
                <span style={{ color: '#999' }}>所属系统：</span>
                <span style={{ color: '#333' }}>{record.sysRangeList ? record.sysRangeList.map(i => i.sysName || '').join(',') : '-'}</span>
              </span><br />
              <span>
                <span style={{ color: '#999' }}>范围类型：</span>
                <span style={{ color: '#333' }}>{record.authRange ? record.authRange.split(',').map((r: string) => Number(r)).map((t: number) => roleRangeType[t]).join(',') : '-'}</span>
              </span>
            </span>
          )}>
            <span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>角色类型：</span>
                {record.roleType ? <Tag color={roleTypeTag[record.roleType]}>{RoleTypeEnum[record.roleType]}</Tag> : '-'}
              </span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>角色用途：</span>
                {record.useType ? <Tag color={UseTypeColorEnum[record.useType]}>{UseTypeEnum[record.useType]}</Tag> : '-'}
              </span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>所属系统：</span>
                <span style={{ color: '#333' }}>{record.sysRangeList ? record.sysRangeList.map(i => i.sysName || '').join(',') : '-'}</span>
              </span>
              <span className="span_limit_1">
                <span style={{ color: '#999' }}>范围类型：</span>
                <span style={{ color: '#333' }}>{record.authRange ? record.authRange.split(',').map((r: string) => Number(r)).map((t: number) => roleRangeType[t]).join(',') : '-'}</span>
              </span>
            </span>
          </Popover>
        )}
      />
      <Column
        title="状态"
        align="left"
        dataIndex="status"
        render={(val, record) => {
          return (
            <>
              <Popconfirm
                placement="top"
                title={`确认${val ? "禁用" : "启用"}？`}
                onConfirm={() => handleChangeStatus(record)}
                onCancel={() => setSwitchLoading(false)}
              >
                <Switch
                  checkedChildren="已启用"
                  unCheckedChildren="已禁用"
                  checked={!!val}
                  size="small"
                  loading={switchLoading}
                  onClick={() => setSwitchLoading(true)}
                />
              </Popconfirm>
            </>
          )
        }}
      />
      <Column
        title="操作"
        align="left"
        render={(text, record: Role.Info) => (
          <React.Fragment>
            <a onClick={() => handleModalVisible(true, record)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={() => handleAuthModal(true, record)}>授权</a>
            <Divider type="vertical" />
            <Popconfirm
              title={`是否删除【${record.roleName}】?`}
              onConfirm={() => handleDelete(record)}
              okText="确定"
              cancelText="取消"
            >
              <a href="">删除</a>
            </Popconfirm>
          </React.Fragment>
        )}
      />
    </Table >

  );
}