fe_service_ebtp_frontend/src/pages/CommonInfo/Supplier/MailingAddress/index.tsx

import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, Card, message, Popconfirm } from 'antd';
import React, { useState } from 'react';
import { useRef } from 'react';
import NewAddress from './components/NewAddress';
import { deleteAddress, getAddressList } from './service';
import { handleAdd, handleUpdate } from './utils';
/**
 * 供应商信息管理-常用邮寄地址管理
 */

const MailingAddress: React.FC<{}> = () => {
  //表格控制
  const actionRef = useRef<ActionType>();
  //新建&修改邮寄地址弹窗控制
  const [addressVisible, setAddressVisible] = useState<boolean>(false);
  //存储行数据
  const [addressLineData, setaddressLineData] = useState<any>({});
  //存储修改和删除弹窗标题
  const [addressModalTitle, setAddressModalTitle] = useState<any>('');
  //弹窗的访问遮罩
  const [spinLoading, setSpinLoading] = useState<boolean>(false);
  const columns: ProColumns<any>[] = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      width: 80,
    },
    {
      title: '所在地区',
      dataIndex: 'region',
      key: 'region',
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '发票收件人',
      dataIndex: 'addressee',
      key: 'addressee',
    },
    {
      title: '收件人电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 140,
      render: (_, record) => [
        <a
          key="editable"
          onClick={() => {
            setaddressLineData(record);
            setAddressModalTitle('编辑邮寄地址');
            setAddressVisible(true);
          }}
        >
          编辑
        </a>,
        <Popconfirm
          title="确定要删除吗？"
          onConfirm={() => toDelete(record)}
          okText="确定"
          cancelText="取消"
          key="del"
        >
          <a key="view">删除</a>
        </Popconfirm>,
      ],
    },
  ];
  const toDelete = async (value: any) => {
    if (value != undefined) {
      const success = await deleteAddress(value.id);
      if (success) {
        message.success('删除成功');
        if (actionRef.current) {
          actionRef.current.reload();
        }
      } else {
        message.success('删除失败');
      }
    }
  };

  return (
    <Card bodyStyle={{ padding: '12px 12px' }}>
      <Button
        type="primary"
        style={{ float: 'right', marginBottom: 10, zIndex: 99 }}
        onClick={() => {
          setAddressModalTitle('新建邮寄地址');
          setAddressVisible(true);
        }}
      >
        新建邮寄地址信息
      </Button>
      <ProTable<any>
        columns={columns}
        actionRef={actionRef}
        search={false}
        options={false}
        params={{
          companyId: '9527',
        }}
        //调用分页方法
        request={async (params) => {
          let value = {
            data: [],
            success: false,
            total: 0,
            pageSize: 10,
            current: 1,
          };
          await getAddressList(params).then((res) => {
            value.data = res.data.records;
            value.success = res.success;
            value.total = res.data.total;
            value.pageSize = res.data.size;
            value.current = res.data.current;
            value.data.forEach((element: any, index: any) => {
              if (res.data.current == 1) {
                element.key = index + 1;
              } else {
                element.key = res.data.size * (res.data.current - 1) + index + 1;
              }
            });
          });
          return value;
        }}
        rowKey="id"
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <NewAddress
        title={addressModalTitle}
        onCancel={() => {
          setaddressLineData({});
          setAddressVisible(false);
        }}
        onSubmit={async (value) => {
          setSpinLoading(true);
          let param = {
            ...value,
            companyId: '9527',
          };
          let success: any = false;
          if (value.id == '' || value.id == undefined) {
            success = await handleAdd(param);
          } else {
            success = await handleUpdate(param);
          }
          if (success) {
            setSpinLoading(false);
            setaddressLineData({});
            setAddressVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        modalVisible={addressVisible}
        values={addressLineData}
        loading={spinLoading}
      />
    </Card>
  );
};
export default MailingAddress;