152 lines
4.8 KiB
TypeScript
152 lines
4.8 KiB
TypeScript
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 }]}
|
||
width="xl"
|
||
/>
|
||
<ProFormText name="abbreviation" label="商品简称" width="xl" />
|
||
<ProFormText name="brief" label="商品概述" width="xl" />
|
||
<ProFormText name="prodNumber" label="商品编码" width="xl" />
|
||
<ProFormText name="brand" label="品牌" width="xl" />
|
||
<ProFormText name="shopId" label="商品所有权" width="xl" />
|
||
<ProFormText name="categoryName" label="关联类目" width="xl" />
|
||
<ProForm.Item
|
||
name="tag"
|
||
label="商品标签"
|
||
tooltip="设置卖点标签，单标签限xx字符，最多x个标签"
|
||
layout="horizontal"
|
||
width="xl"
|
||
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="主图"
|
||
width="xl"
|
||
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"
|
||
width="xl"
|
||
extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
|
||
// getValueFromEvent={(e) => e.fileList}
|
||
>
|
||
<UploadImages />
|
||
</ProForm.Item>
|
||
<ProForm.Item
|
||
style={{ width: '100%' }}
|
||
name="whiteImg"
|
||
label="白底图"
|
||
width="xl"
|
||
extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
|
||
// getValueFromEvent={(e) => e.fileList}
|
||
>
|
||
<UploadImages />
|
||
</ProForm.Item>
|
||
<ProForm.Item
|
||
name="video"
|
||
label="主视频"
|
||
width="xl"
|
||
extra="仅支持.MP4 .MOV 格式，建议比例1:1、16:9，限1个"
|
||
// getValueFromEvent={(e) => e.fileList}
|
||
>
|
||
<UploadVideo />
|
||
</ProForm.Item>
|
||
<ProForm.Item
|
||
name="content"
|
||
label="图文介绍"
|
||
rules={[{ required: true }]}
|
||
width="xl"
|
||
// getValueFromEvent={(e) => e.fileList}
|
||
>
|
||
<TinymceEditor />
|
||
</ProForm.Item>
|
||
</ProFormGroup>
|
||
<ProFormGroup title="三、营销与传播">
|
||
<ProFormText
|
||
name="seoShortName"
|
||
label="短标题"
|
||
colProps={{
|
||
span: 20,
|
||
}}
|
||
/>
|
||
<ProFormText name="seoSearch" label="SEO标题" width={'xl'} />
|
||
<ProFormTextArea name="keyword" label="商品关键词" width={'xl'} />
|
||
<Divider />
|
||
|
||
<ProForm.Item
|
||
style={{ width: '100%' }}
|
||
name="shareImage"
|
||
label="分享图"
|
||
width="xl"
|
||
extra="仅支持.jpg .png 格式，限1张"
|
||
>
|
||
<UploadImages />
|
||
</ProForm.Item>
|
||
<ProFormTextArea
|
||
name="shareContent"
|
||
label="分享话术"
|
||
placeholder={'请输入分享话术'}
|
||
width={'xl'}
|
||
/>
|
||
</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;
|