boluo-admin-main/src/pages/table-list/give-vip/index.tsx

import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ProColumns,
  ProFormInstance,
  ProFormText,
  ProFormDigit,
  ProFormRadio,
  ProFormDependency,
} from '@ant-design/pro-components';
import { ModalForm, PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';

import { TIME_FORMAT } from '@/constants/global';
import { postGiveVip, getGiveVipList, getProductList } from '@/services/list';

const ProductTypeText: Record<API.ProductType, string> = {
  VIP: '主播',
  BOSSVIP: 'BOSSVIP',
  GROUP_BATCH_PUSH: 'GROUP_BATCH_PUSH',
  BOSS_VIP_NEW: '企业',
};

const TableList: React.FC = () => {
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  const [productVipList, setProductVipList] = useState<API.ProductSpecListItem[]>([]);
  const [productBossVipList, setProductBossVipList] = useState<API.ProductSpecListItem[]>([]);
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const getProducts = async () => {
    try {
      const [vipList, bossVipList] = await Promise.all([getProductList('VIP'), getProductList('BOSS_VIP_NEW')]);
      setProductVipList(vipList);
      setProductBossVipList(bossVipList);
    } catch (e) {
    } finally {
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  const columns: ProColumns<API.GiveVipListItem>[] = [
    {
      title: '用户ID',
      dataIndex: 'userId',
      valueType: 'textarea',
      search: true,
    },
    {
      title: '用户手机号',
      dataIndex: 'userPhone',
      valueType: 'textarea',
      search: true,
    },
    {
      title: '类型',
      dataIndex: 'productType',
      valueType: 'textarea',
      search: false,
      renderText: productType => ProductTypeText[productType as API.ProductType],
    },
    {
      title: '会员',
      dataIndex: 'productSpecId',
      valueType: 'textarea',
      search: false,
      renderText: (productSpecId: string, record: API.GiveVipListItem) => {
        let product;
        if (record.productType === 'VIP') {
          product = productVipList.find(it => it.productSpecId === productSpecId);
        }
        if (record.productType === 'BOSS_VIP_NEW') {
          product = productBossVipList.find(it => it.productSpecId === productSpecId);
        }
        return product ? product.productName : productSpecId || '-';
      },
    },
    {
      title: '赠送个数',
      dataIndex: 'giveCount',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '赠送时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      renderText(created: string) {
        return dayjs(created).format(TIME_FORMAT);
      },
      search: false,
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.GiveVipListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getGiveVipList}
        columns={columns}
        toolBarRender={() => [
          <Button
            type="primary"
            key="add"
            icon={<PlusOutlined />}
            onClick={() => {
              handleUpdateModalOpen(true);
              formRef.current?.resetFields();
            }}
          >
            新增
          </Button>,
        ]}
      />
      <ModalForm
        title="新增赠送"
        width="400px"
        formRef={formRef}
        open={updateModalOpen}
        initialValues={{ giveCount: 1, productType: 'VIP' }}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async formData => {
          const params: API.PostGiveVip = {
            userId: formData.userId,
            userPhone: formData.userPhone,
            productType: formData.productType,
            productSpecId: formData.productSpecId,
            giveCount: formData.giveCount,
          };
          console.log('update confirm', formData, params);
          try {
            await postGiveVip(params);
            actionRef.current?.reload();
            formRef.current?.resetFields();
          } catch (e) {}
          handleUpdateModalOpen(false);
        }}
      >
        <ProFormText name="userId" label="用户ID" rules={[{ message: '请输入用户ID', required: true }]} />
        <ProFormRadio.Group
          label="选择类型"
          name="productType"
          fieldProps={{
            onChange: () => {
              formRef.current?.setFieldsValue({
                productSpecId: undefined,
              });
            },
          }}
          options={[
            {
              value: 'VIP',
              label: ProductTypeText.VIP,
            },
            {
              value: 'BOSS_VIP_NEW',
              label: ProductTypeText.BOSS_VIP_NEW,
            },
          ]}
        />
        <ProFormDependency name={['productType']}>
          {({ productType }) => {
            return (
              <ProFormRadio.Group
                name="productSpecId"
                label="选择会员"
                options={(productType === 'VIP' ? productVipList : productBossVipList).map(it => ({
                  value: it.productSpecId,
                  label: it.productName,
                }))}
                rules={[{ required: true, message: '必填项' }]}
              />
            );
          }}
        </ProFormDependency>
        <ProFormDigit name="giveCount" label="赠送会员个数" min={1} fieldProps={{ precision: 0 }} />
      </ModalForm>
    </PageContainer>
  );
};
export default TableList;