2022-11-18 ant-design/pro-compon

import services from '@/services/demo';

import {

ActionType,

  FooterToolbar,

  PageContainer,

  ProDescriptions,

  ProDescriptionsItemProps,

  ProTable,

}from '@ant-design/pro-components';

import {Button, Divider, Drawer, message }from 'antd';

import React, {useRef, useState }from 'react';

import CreateFormfrom './components/CreateForm';

import UpdateForm, { FormValueType }from './components/UpdateForm';

const {addUser, queryUserList, deleteUser, modifyUser } =

services.UserController;

/**

* 添加节点

* @param fields

*/

const handleAdd =async (fields: API.UserInfo) => {

const hide =message.loading('正在添加');

  try {

await addUser({ ...fields });

    hide();

    message.success('添加成功');

return true;

  }catch (error) {

hide();

    message.error('添加失败请重试！');

return false;

  }

};

/**

* 更新节点

* @param fields

*/

const handleUpdate =async (fields: FormValueType) => {

const hide =message.loading('正在配置');

  try {

await modifyUser(

{

userId: fields.id ||'',

      },

      {

name: fields.name ||'',

        nickName: fields.nickName ||'',

        email: fields.email ||'',

      },

    );

    hide();

    message.success('配置成功');

return true;

  }catch (error) {

hide();

    message.error('配置失败请重试！');

return false;

  }

};

/**

*  删除节点

* @param selectedRows

*/

const handleRemove =async (selectedRows: API.UserInfo[]) => {

const hide =message.loading('正在删除');

  if (!selectedRows)return true;

  try {

await deleteUser({

userId: selectedRows.find((row) => row.id)?.id ||'',

    });

    hide();

    message.success('删除成功，即将刷新');

return true;

  }catch (error) {

hide();

    message.error('删除失败，请重试');

return false;

  }

};

const TableList: React.FC = () => {

const [createModalVisible, handleModalVisible] =useState(false);

  const [updateModalVisible, handleUpdateModalVisible] =

useState(false);

  const [stepFormValues, setStepFormValues] =useState({});

  const actionRef =useRef();

  const [row, setRow] =useState();

  const [selectedRowsState, setSelectedRows] =useState([]);

  const columns: ProDescriptionsItemProps[] = [

{

title:'名称',

      dataIndex:'name',

      tip:'名称是唯一的 key',

      formItemProps: {

rules: [

{

required:true,

            message:'名称为必填项',

          },

        ],

      },

    },

    {

title:'昵称',

      dataIndex:'nickName',

      valueType:'text',

    },

    {

title:'性别',

      dataIndex:'gender',

      hideInForm:true,

      valueEnum: {

0: {text:'男', status:'MALE' },

        1: {text:'女', status:'FEMALE' },

      },

    },

    {

title:'操作',

      dataIndex:'option',

      valueType:'option',

      render: (_, record) => (

<>

            onClick={() => {

handleUpdateModalVisible(true);

              setStepFormValues(record);

            }}

>

            配置

          <Divider type="vertical" />

          <a href="">订阅警报

      ),

    },

  ];

  return (

      header={{

title:'CRUD 示例',

      }}

>

      <ProTable

headerTitle="查询表格"

        actionRef={actionRef}

rowKey="id"

        search={{

labelWidth:120,

        }}

toolBarRender={() => [

            key="1"

            type="primary"

            onClick={() =>handleModalVisible(true)}

>

            新建

          </Button>,

        ]}

request={async (params, sorter, filter) => {

const { data, success } =await queryUserList({

...params,

            // FIXME: remove @ts-ignore

            // @ts-ignore

            sorter,

            filter,

          });

          return {

data: data?.list || [],

            success,

          };

        }}

columns={columns}

rowSelection={{

onChange: (_, selectedRows) =>setSelectedRows(selectedRows),

        }}

/>

      {selectedRowsState?.length >0 && (

          extra={

              已选择{' '}

<a style={{fontWeight:600 }}>{selectedRowsState.length}</a>{' '}

项 

          }

>

            onClick={async () => {

await handleRemove(selectedRowsState);

              setSelectedRows([]);

              actionRef.current?.reloadAndRest?.();

            }}

>

            批量删除

          <Button type="primary">批量审批

      )}

        onCancel={() =>handleModalVisible(false)}

modalVisible={createModalVisible}

>

        <ProTable

onSubmit={async (value) => {

const success =await handleAdd(value);

            if (success) {

handleModalVisible(false);

              if (actionRef.current) {

actionRef.current.reload();

              }

}

}}

rowKey="id"

          type="form"

          columns={columns}

/>

      {stepFormValues &&Object.keys(stepFormValues).length ? (

          onSubmit={async (value) => {

const success =await handleUpdate(value);

            if (success) {

handleUpdateModalVisible(false);

              setStepFormValues({});

              if (actionRef.current) {

actionRef.current.reload();

              }

}

}}

onCancel={() => {

handleUpdateModalVisible(false);

            setStepFormValues({});

          }}

updateModalVisible={updateModalVisible}

values={stepFormValues}

/>

      ) :null}

        width={600}

visible={!!row}

onClose={() => {

setRow(undefined);

        }}

closable={false}

>

        {row?.name && (

<ProDescriptions

column={2}

title={row?.name}

request={async () => ({

data: row || {},

            })}

params={{

id:row?.name,

            }}

columns={columns}

/>

        )}

  );

};

export default TableList;