xie_fang_tong_admin/src/pages/ScreenAdvertisement/index.tsx

/* eslint-disable no-param-reassign */
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Image, message, Popconfirm, Switch } from 'antd';
import React, { useRef, useState } from 'react';
import { Access, useAccess } from 'umi';
import UpdateForm from './components/UpdateForm';
import { addOrUpdateScreenAdvertisementUsingPost, changeAdStateUsingGet, getScreenAdPageUsingPost, removeAdUsingPost } from '@/services/pop-b2b2c/pbcScreenAdvertisementController';

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

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

  try {
    const msg = await addOrUpdateScreenAdvertisementUsingPost(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 changeAdStateUsingGet({ pbcId: id, pbcBusinessState: 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 handleRemove = async (id?: number) => {
  const hide = message.loading('正在删除');
  if (!id) return false;

  try {
    const msg = await removeAdUsingPost({
      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.PbcScreenAdvertisement>[] = [
    {
      title: '标题',
      dataIndex: 'pbcTitle',
    },
    {
      title: '预览',
      dataIndex: 'pbcAdvertisement',
      search: false,
      render: (text) => {
        const str = text?.toString()
        if (str?.substring(str.lastIndexOf('.')) === '.mp4') {
          return <video onClick={() => window.open(str)} style={{ objectFit: 'contain' }} src={str} width={200} height={200} />
        } else {
          return <Image style={{ objectFit: 'contain' }} src={str} width={200} height={200} />
        }
      }
    },
    {
      title: '创建时间',
      dataIndex: 'pbcCreateAt',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      render: (text, record) => (
        <span>
          <Access key="config" accessible={access.adScreenUpdate}>
            <Switch
              checked={record.pbcBusinessState === 1}
              onChange={async (value) => {
                const success = await handleUpdateState(record.pbcId || 0, value ? 1 : 0);

                if (success) {
                  if (actionRef.current) {
                    actionRef.current.reload();
                  }
                }
              }}
            />
          </Access>
          <Access key="config" accessible={access.adScreenAdd}>
            <Button
              type="link"
              onClick={() => {
                handleUpdateModalVisible(true);
                setStepFormValues(record);
              }}
            >
              编辑
            </Button>
          </Access>
          <Access key="remove" accessible={access.adScreenDelete}>
            <Popconfirm
              title="确定删除该开屏广告?"
              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.PbcScreenAdvertisement>
        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.adScreenAdd}>
                <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) {
              handleUpdateModalVisible(false);
              setStepFormValues({});
              actionRef.current?.reload();
            }
          }}
          onCancel={() => {
            message.destroy();
            handleUpdateModalVisible(false);
          }}
          afterClose={() => {
            setStepFormValues({});
          }}
          updateModalVisible={updateModalVisible}
          values={stepFormValues}
        />
      ) : null}
    </PageContainer>
  );
};

export default TableList;