tashow-manager/src/pages/prod/list/components/prod-info.tsx

import {
  ProForm,
  ProFormGroup,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Divider } from 'antd';
import React from 'react';
import TagEditor from '@/components/TagEditor';
import TinymceEditor from '@/components/Tinymce';
import UploadImages from '@/components/Upload/UploadImages';
import UploadVideo from '@/components/Upload/UploadVideo';
import type { Prod } from '@/services/prod/prod-manager';

interface ProdInfoProps<T> {
  onRefresh?: (type?: string) => void;
  data?: T;
}

const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
  console.log(props, 'ProdInfo');
  return (
    <>
      <ProFormGroup title="一、基础信息">
        <ProFormText
          name="prodName"
          label="商品名字"
          rules={[{ required: true }]}
          colProps={{
            span: 24,
          }}
        />
        <ProFormText
          name="abbreviation"
          label="商品简称"
          colProps={{
            span: 24,
          }}
        />
        <ProFormText
          name="brief"
          label="商品概述"
          colProps={{
            span: 24,
          }}
        />
        <ProFormText
          name="prodNumber"
          label="商品编码"
          colProps={{
            span: 24,
          }}
        />
        <ProFormText
          name="brand"
          label="品牌"
          colProps={{
            span: 24,
          }}
        />
        <ProFormText
          name="shopId"
          label="商品所有权"
          colProps={{
            span: 24,
          }}
        />
        <ProFormText
          name="categoryName"
          label="关联类目"
          colProps={{
            span: 24,
          }}
        />
        <ProForm.Item
          name="tag"
          label="商品标签"
          tooltip="设置卖点标签，单标签限xx字符，最多x个标签"
          layout="horizontal"
          colProps={{
            span: 24,
          }}
          required={false}
          // getValueFromEvent={(e) => e.fileList}
        >
          <TagEditor
            placeholder="输入标签名称"
            maxCount={10}
            tagProps={{
              color: 'blue',
            }}
          />
        </ProForm.Item>
      </ProFormGroup>
      <ProFormGroup title="二、内容展示">
        <ProForm.Item
          style={{ width: '100%' }}
          name="pic"
          label="主图"
          colProps={{
            span: 24,
          }}
          extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
          // rules={[{ required: true }]}
          // getValueFromEvent={(e) => e.fileList}
        >
          <UploadImages />
        </ProForm.Item>
        <ProForm.Item
          style={{ width: '100%' }}
          name="imgs"
          label="轮播图"
          layout="horizontal"
          colProps={{
            span: 24,
          }}
          extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
          // getValueFromEvent={(e) => e.fileList}
        >
          <UploadImages maxCount={7} />
        </ProForm.Item>
        <ProForm.Item
          style={{ width: '100%' }}
          name="whiteImg"
          label="白底图"
          colProps={{
            span: 24,
          }}
          extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
          // getValueFromEvent={(e) => e.fileList}
        >
          <UploadImages />
        </ProForm.Item>
        <ProForm.Item
          style={{ width: '100%' }}
          name="video"
          label="主视频"
          colProps={{
            span: 24,
          }}
          extra="仅支持.MP4 .MOV 格式，建议比例1:1、16:9，限1个"
          // getValueFromEvent={(e) => e.fileList}
        >
          <UploadVideo />
        </ProForm.Item>
        <ProForm.Item
          name="content"
          label="图文介绍"
          rules={[{ required: true }]}
          colProps={{
            span: 24,
          }}
          // getValueFromEvent={(e) => e.fileList}
        >
          <TinymceEditor />
        </ProForm.Item>
      </ProFormGroup>
      <ProFormGroup title="三、营销与传播">
        <ProFormText
          name="seoShortName"
          label="短标题"
          colProps={{
            span: 24,
          }}
        />
        <ProFormText name="seoSearch" label="SEO标题" width={'xl'} />
        <ProFormTextArea name="keyword" label="商品关键词" width={'xl'} />
        <Divider />

        <ProForm.Item
          colProps={{
            span: 24,
          }}
          name="shareImage"
          label="分享图"
          width="xl"
          extra="仅支持.jpg .png 格式，限1张"
        >
          <UploadImages />
        </ProForm.Item>
        <ProFormTextArea
          name="shareContent"
          label="分享话术"
          placeholder={'请输入分享话术'}
          colProps={{
            span: 24,
          }}
        />
      </ProFormGroup>
      <ProFormGroup>
        <ProFormSelect name="status" label="商品状态" readonly />
        <ProFormText name="prodId" label="商品ID" readonly />
        <ProFormText name="createTime" label="创建时间" readonly />
        <ProFormText name="creator" label="创建人" readonly />
        <ProFormText name="updateTime" label="更新时间" readonly />
        <ProFormText name="updater" label="更新人" readonly />
        <ProFormText name="version" label="版本号" readonly />
      </ProFormGroup>
    </>
  );
};

export default React.memo(ProdInfo) as <_T extends Record<string, any>>(
  props: ProdInfoProps<Prod>,
) => React.ReactElement;