xie_fang_tong_admin/src/pages/RoleList/index.tsx

/* eslint-disable no-param-reassign */
import {
  deleteRoleUsingPost,
  freshAuthorityUsingPost,
  queryRoleByPageUsingPost,
  updateRoleUsingPost,
} from '@/services/pop-b2b2c/pbcRoleController';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, message, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';
import { Access, useAccess, useModel } from 'umi';
import UpdateForm from './components/UpdateForm';

/**
 * 查询表格
 * @param param0
 */
const fetchData = async (params: API.PbcRoleDTO) => {
  const msg = await queryRoleByPageUsingPost(params);
  return {
    data: msg.data?.records,
    total: msg.data?.total,
    success: msg.retcode,
  } as any;
};

/**
 * 更新节点
 * @param fields
 */
const handleUpdate = async (fields: API.PbcRoleDTO) => {
  const hide = message.loading('正在保存');

  try {
    const msg = await updateRoleUsingPost(fields);
    hide();
    if (msg.retcode) {
      message.success(!fields.pbcId ? '添加成功' : '保存成功');
      return true;
    }
    message.error(msg.retmsg);
    return false;
  } catch (error) {
    hide();
    message.error(!fields.pbcId ? '添加失败' : '保存失败');
    return false;
  }
};
/**
 * 删除节点
 * @param id
 */
const handleRemove = async (id?: number) => {
  const hide = message.loading('正在删除');
  if (!id) return false;

  try {
    const msg = await deleteRoleUsingPost({
      roleId: id,
    });
    hide();
    if (msg.retcode) {
      message.success('删除成功，即将刷新');
    } else {
      message.error(msg.retmsg ?? '删除失败，请重试');
    }
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

// eslint-disable-next-line @typescript-eslint/ban-types
const TableList: React.FC<{}> = () => {
  const access: any = useAccess();
  const { refresh } = useModel('@@initialState');
  const actionRef = useRef<ActionType>();
  const [stepFormValues, setStepFormValues] = useState({});
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const columns: ProColumns<API.PbcRole>[] = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '创建时间',
      dataIndex: 'pbcCreateAt',
      valueType: 'date',
      search: false,
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      render: (text, record) => (
        <span>
          <Access key="config" accessible={access.roleSave}>
            <Button
              type="link"
              onClick={() => {
                handleUpdateModalVisible(true);
                setStepFormValues(record);
              }}
            >
              编辑
            </Button>
          </Access>
          <Access key="remove" accessible={access.roleDelete}>
            <Popconfirm
              title="确定删除该角色?"
              onConfirm={async () => {
                const success = await handleRemove(record.pbcId);
                if (success) {
                  const res = await freshAuthorityUsingPost();
                  if (res.retcode) {
                    // 刷新权限
                    refresh();
                  }
                  actionRef.current?.reload();
                }
              }}
            >
              <Button type="link" danger>
                删除
              </Button>
            </Popconfirm>
          </Access>
        </span>
      ),
    },
  ];
  return (
    <PageContainer
      header={{
        title: '',
        breadcrumb: {},
      }}
    >
      <ProTable<API.PbcRole>
        columns={columns}
        actionRef={actionRef}
        request={fetchData}
        rowKey="pbcId"
        size="small"
        bordered
        search={{
          labelWidth: 'auto',
          span: 6,
          optionRender: ({ searchText }, { form }) => {
            return [
              <Button
                key="button"
                type="primary"
                onClick={() => {
                  form?.submit();
                }}
              >
                {searchText}
              </Button>,
              <Access key="add" accessible={access.roleSave}>
                <Button
                  icon={<PlusOutlined />}
                  type="primary"
                  onClick={() => {
                    handleUpdateModalVisible(true);
                    setStepFormValues({ id: undefined });
                  }}
                >
                  新增
                </Button>
              </Access>,
            ];
          },
        }}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true,
        }}
        scroll={{
          y: 'calc(100vh - 320px)',
        }}
        dateFormatter="string"
        options={false}
        toolBarRender={() => []}
      />
      {stepFormValues && Object.keys(stepFormValues).length ? (
        <UpdateForm
          onSubmit={async (value: any) => {
            const success = await handleUpdate(value);

            if (success) {
              const res = await freshAuthorityUsingPost();
              if (res.retcode) {
                // 刷新权限
                refresh();
              }
              handleUpdateModalVisible(false);
              setStepFormValues({});
              actionRef.current?.reload();
            }
          }}
          onCancel={() => {
            message.destroy();
            handleUpdateModalVisible(false);
          }}
          afterClose={() => {
            setStepFormValues({});
          }}
          updateModalVisible={updateModalVisible}
          values={stepFormValues}
        />
      ) : null}
    </PageContainer>
  );
};

export default TableList;