xie_fang_tong_admin/src/pages/ScreenAdvertisement/banner.tsx

/* eslint-disable no-param-reassign */
import { CaretDownOutlined, CaretUpOutlined, 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, Switch, Image, Space } from 'antd';
import React, { useRef, useState } from 'react';
import { Access, useAccess } from 'umi';
import { addOrUpdateBannerUsingPost, changeBannerStateUsingGet, getBannerPageUsingPost, moveBannerUsingGet, removeBannerUsingGet } from '@/services/pop-b2b2c/pbcBannerController';
import UpdateBannerForm from './components/UpdateBannerForm';
import Constants from '@/constants';

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

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

  try {
    const msg = await addOrUpdateBannerUsingPost(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;
  }
};
const handleUpdateState = async (id: number, state: number) => {
  const hide = message.loading('正在保存');
  if (!id) return false;
  try {
    const msg = await changeBannerStateUsingGet({ pbcId: id, pbcState: state });
    hide();
    if (msg.retcode) {
      message.success(!id ? '新增成功！' : '保存成功！');
      return true;
    }
    message.error(msg.retmsg);
    return false;
  } catch (error) {
    hide();
    message.error(!id ? '新增失败，请重试！' : '保存失败，请重试！');
    return false;
  }
};
/**
 * 移动节点
 * @param id
 */
const handleMoveBanner = async (id: number, type: string) => {
  const hide = message.loading('正在保存');
  if (!id) return false;

  try {
    const msg = await moveBannerUsingGet({
      type,
      pbcId: id,
    });
    hide();
    if (msg.retcode) {
      message.success('保存成功，即将刷新');
    } else {
      message.error(msg.retmsg ?? '保存失败，请重试');
    }
    return true;
  } catch (error) {
    hide();
    message.error('保存失败，请重试');
    return false;
  }
};
/**
 * 删除节点
 * @param id
 */
const handleRemove = async (id?: number) => {
  const hide = message.loading('正在删除');
  if (!id) return false;

  try {
    const msg = await removeBannerUsingGet({
      pbcId: 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 actionRef = useRef<ActionType>();
  const [stepFormValues, setStepFormValues] = useState({});
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const columns: ProColumns<API.PbcBanner_>[] = [
    {
      title: '标题',
      dataIndex: 'pbcTitle',
    },
    {
      title: '预览',
      dataIndex: 'pbcBannerImage',
      search: false,
      width: 220,
      render: (text) => {
        const str = text?.toString()
        return str && <Image style={{ objectFit: 'contain' }} src={str} width={200} height={200} />
      }
    },
    {
      title: '类型',
      dataIndex: 'pbcBannerType',
      valueEnum: Constants.pbcBannerType,
      search: false
    },
    {
      title: '链接',
      dataIndex: 'pbcLink',
      search: false
    },
    {
      title: '排序',
      dataIndex: 'pbcSort',
      search: false,
      width: 70,
      render: (text: any, record) => <Space>
        <span>{text + 1}</span>
        <Space direction='vertical'>
          <Button onClick={async () => {
            const success = await handleMoveBanner(record.pbcId || 0, 'up');
            if (success) {
              actionRef.current?.reload();
            }
          }} icon={<CaretUpOutlined />} />
          <Button onClick={async () => {
            const success = await handleMoveBanner(record.pbcId || 0, 'down');
            if (success) {
              actionRef.current?.reload();
            }
          }} icon={<CaretDownOutlined />} />
        </Space>
      </Space>
    },
    {
      title: '创建时间',
      dataIndex: 'pbcCreateAt',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      render: (text, record) => (
        <span>
          <Access key="config" accessible={access.adBannerUpdate}>
            <Switch
              checked={record.pbcState === 1}
              onChange={async (value) => {
                const success = await handleUpdateState(record.pbcId || 0, value ? 1 : 2);

                if (success) {
                  if (actionRef.current) {
                    actionRef.current.reload();
                  }
                }
              }}
            />
          </Access>
          <Access key="config" accessible={access.adBannerAdd}>
            <Button
              type="link"
              onClick={() => {
                handleUpdateModalVisible(true);
                setStepFormValues(record);
              }}
            >
              编辑
            </Button>
          </Access>
          <Access key="remove" accessible={access.adBannerDelete}>
            <Popconfirm
              title="确定删除该banner?"
              onConfirm={async () => {
                const success = await handleRemove(record.pbcId);
                if (success) {
                  actionRef.current?.reload();
                }
              }}
            >
              <Button type="link" danger>
                删除
              </Button>
            </Popconfirm>
          </Access>
        </span>
      ),
    },
  ];
  return (
    <PageContainer
      header={{
        title: '',
        breadcrumb: {},
      }}
    >
      <ProTable<API.PbcBanner_>
        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.adBannerAdd}>
                <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 ? (
        <UpdateBannerForm
          onSubmit={async (value: any) => {
            const success = await handleUpdate(value);

            if (success) {
              handleUpdateModalVisible(false);
              setStepFormValues({});
              actionRef.current?.reload();
            }
          }}
          onCancel={() => {
            message.destroy();
            handleUpdateModalVisible(false);
          }}
          afterClose={() => {
            setStepFormValues({});
          }}
          updateModalVisible={updateModalVisible}
          values={stepFormValues}
        />
      ) : null}
    </PageContainer>
  );
};

export default TableList;