|
|
|
|
@ -27,6 +27,7 @@ import { getLabelListForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductLa
|
|
|
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
|
import './index.less'
|
|
|
|
|
import CropImage from '@/components/CropImage';
|
|
|
|
|
import { useAccess, useModel, history } from '@umijs/max';
|
|
|
|
|
|
|
|
|
|
interface DraggableUploadListItemProps {
|
|
|
|
|
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
|
|
|
@ -63,6 +64,10 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
const params = useParams();
|
|
|
|
|
const [cities] = useState(() => getCities())
|
|
|
|
|
const [isEdit] = useState(() => !!params.id)
|
|
|
|
|
const access: any = useAccess();
|
|
|
|
|
|
|
|
|
|
const { initialState } = useModel('@@initialState');
|
|
|
|
|
const { currentUser } = initialState || { currentUser: {} };
|
|
|
|
|
|
|
|
|
|
const [colorData, setColorData] = useState<API.PbcCommonData[]>()
|
|
|
|
|
const [commonDataList, setCommonDataList] = useState<API.PbcCommonData[]>()
|
|
|
|
|
@ -128,27 +133,61 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
getTags()
|
|
|
|
|
}, [pbcBusinessId])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (access.isBusiness) {
|
|
|
|
|
formRef.current?.setFieldValue('pbcBusinessId', currentUser?.pbcBusinessId);
|
|
|
|
|
setPbcBusinessId(currentUser?.pbcBusinessId)
|
|
|
|
|
}
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (isEdit && params.id) {
|
|
|
|
|
productDetailForAdminUsingGet({ productId: parseInt(params.id) }).then((res) => {
|
|
|
|
|
if (res.retcode && res.data) {
|
|
|
|
|
const data = res.data;
|
|
|
|
|
|
|
|
|
|
let commonData: any = {}
|
|
|
|
|
if (data.productCommonDataList) {
|
|
|
|
|
for (let i = 0; i < data.productCommonDataList.length; i++) {
|
|
|
|
|
const element = data.productCommonDataList[i];
|
|
|
|
|
if (element.pbcSystemInputType === 'select') {
|
|
|
|
|
commonData[`value${i}`] = element.pbcCommonDataSystemValue
|
|
|
|
|
} else {
|
|
|
|
|
commonData[`value${i}`] = element.pbcCommonDataSystem
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 处理表单数据
|
|
|
|
|
const formData = {
|
|
|
|
|
...data,
|
|
|
|
|
...commonData,
|
|
|
|
|
pbcState: data.pbcState ? `${data.pbcState}` : null,
|
|
|
|
|
pbcProductCategoryIdList: [data.pbcProductTopCategoryId, data.pbcProductParentCategoryId, data.pbcProductCategoryId],
|
|
|
|
|
pbcZone: data.pbcProductOriginalProvince ? [data.pbcProductOriginalProvince, data.pbcProductOriginalCity] : undefined,
|
|
|
|
|
pbcProductImages: data.pbcProductImages ? data.pbcProductImages.split(',').map((url: string) => ({
|
|
|
|
|
uid: url,
|
|
|
|
|
name: url,
|
|
|
|
|
name: url.substring(url.lastIndexOf('/') + 1),
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: url,
|
|
|
|
|
response: { data: url }
|
|
|
|
|
})) : [],
|
|
|
|
|
pbcProductDetailImages: data.pbcProductDetailImages ? data.pbcProductDetailImages.split(',').map((url: string) => ({
|
|
|
|
|
uid: url,
|
|
|
|
|
name: url,
|
|
|
|
|
name: url.substring(url.lastIndexOf('/') + 1),
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: url,
|
|
|
|
|
response: { data: url }
|
|
|
|
|
})) : [],
|
|
|
|
|
pbcProductVideoThumbnail: data.pbcProductVideoThumbnail ? [{
|
|
|
|
|
uid: data.pbcProductVideoThumbnail,
|
|
|
|
|
name: data.pbcProductVideoThumbnail.substring(data.pbcProductVideoThumbnail.lastIndexOf('/') + 1),
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: data.pbcProductVideoThumbnail,
|
|
|
|
|
response: { data: data.pbcProductVideoThumbnail }
|
|
|
|
|
}] : [],
|
|
|
|
|
pbcProductDetailVideos: data.pbcProductDetailVideos ? data.pbcProductDetailVideos.split(',').map((url: string) => ({
|
|
|
|
|
uid: url,
|
|
|
|
|
name: url.substring(url.lastIndexOf('/') + 1),
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: url,
|
|
|
|
|
response: { data: url }
|
|
|
|
|
@ -256,7 +295,6 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
if (commonDataList) {
|
|
|
|
|
for (let i = 0; i < commonDataList.length; i++) {
|
|
|
|
|
const element = commonDataList[i];
|
|
|
|
|
console.log(values[`value${i}`])
|
|
|
|
|
let name = ''
|
|
|
|
|
if (element.pbcSystemInputType === 'select' && element.commonDataValueList) {
|
|
|
|
|
name = element.commonDataValueList.find(e => e.pbcId === values[`value${i}`])?.pbcSystemValue || ''
|
|
|
|
|
@ -288,6 +326,8 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
productCommonDataList: specItems,
|
|
|
|
|
pbcProductImages: values.pbcProductImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
|
|
|
|
|
pbcProductDetailImages: values.pbcProductDetailImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
|
|
|
|
|
pbcProductVideoThumbnail: values.pbcProductVideoThumbnail && values.pbcProductVideoThumbnail.length > 0 ? values.pbcProductVideoThumbnail[0].response.data : '',
|
|
|
|
|
pbcProductDetailVideos: values.pbcProductDetailVideos && values.pbcProductDetailVideos.length > 0 ? values.pbcProductDetailVideos.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(',') : '',
|
|
|
|
|
pbcZone: undefined,
|
|
|
|
|
colorItems: undefined,
|
|
|
|
|
specItems: undefined,
|
|
|
|
|
@ -295,9 +335,11 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
}
|
|
|
|
|
const msg = await addOrUpdateProductForAdminUsingPost(params)
|
|
|
|
|
if (msg.retcode) {
|
|
|
|
|
if (!isEdit) {
|
|
|
|
|
formRef.current?.resetFields()
|
|
|
|
|
}
|
|
|
|
|
message.success("保存成功！")
|
|
|
|
|
history.back();
|
|
|
|
|
history.push('/product/list')
|
|
|
|
|
return true
|
|
|
|
|
} else {
|
|
|
|
|
message.error(msg.retmsg)
|
|
|
|
|
@ -324,11 +366,12 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
header={{
|
|
|
|
|
title: '',
|
|
|
|
|
}}
|
|
|
|
|
footerToolBarProps={{ portalDom: false }}
|
|
|
|
|
footer={[
|
|
|
|
|
<Button
|
|
|
|
|
key="back"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
history.back();
|
|
|
|
|
history.push('/product/list')
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
返回
|
|
|
|
|
@ -351,6 +394,7 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请选择所属商户' }
|
|
|
|
|
]}
|
|
|
|
|
disabled={access.isBusiness}
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
formRef.current?.setFieldValue('labelAssociationList', [])
|
|
|
|
|
setPbcBusinessId(value as number)
|
|
|
|
|
@ -621,10 +665,7 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
},
|
|
|
|
|
onPreview: async (file) => {
|
|
|
|
|
|
|
|
|
|
if (file.uid === '-1') {
|
|
|
|
|
window.open(file.url);
|
|
|
|
|
}
|
|
|
|
|
if (file.response && file.response.retcode) {
|
|
|
|
|
if (file.response && file.response.data) {
|
|
|
|
|
window.open(file.response.data);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -662,11 +703,7 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
return isLt2M || Upload.LIST_IGNORE;
|
|
|
|
|
},
|
|
|
|
|
onPreview: async (file) => {
|
|
|
|
|
|
|
|
|
|
if (file.uid === '-1') {
|
|
|
|
|
window.open(file.url);
|
|
|
|
|
}
|
|
|
|
|
if (file.response && file.response.retcode) {
|
|
|
|
|
if (file.response && file.response.data) {
|
|
|
|
|
window.open(file.response.data);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -680,6 +717,100 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
</DndContext>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={20}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<ProFormUploadButton
|
|
|
|
|
label="封面视频"
|
|
|
|
|
name="pbcProductVideoThumbnail"
|
|
|
|
|
max={1}
|
|
|
|
|
fieldProps={{
|
|
|
|
|
name: 'file',
|
|
|
|
|
accept: 'video/mp4',
|
|
|
|
|
multiple: false,
|
|
|
|
|
headers: {
|
|
|
|
|
authorization: localStorage.getItem('token') ?? '',
|
|
|
|
|
},
|
|
|
|
|
action: process.env.BASE_URL + '/oss/imgUpload',
|
|
|
|
|
beforeUpload(file: RcFile) {
|
|
|
|
|
const isLt100M = file.size / 1024 / 1024 < 100;
|
|
|
|
|
if (!isLt100M) {
|
|
|
|
|
message.error('视频大小不能超过100MB!');
|
|
|
|
|
}
|
|
|
|
|
return isLt100M || Upload.LIST_IGNORE;
|
|
|
|
|
},
|
|
|
|
|
onPreview: async (file) => {
|
|
|
|
|
const url = file.url || (file.response && file.response.data);
|
|
|
|
|
if (url) {
|
|
|
|
|
const videoWindow = window.open('', '_blank');
|
|
|
|
|
if (videoWindow) {
|
|
|
|
|
videoWindow.document.write(`
|
|
|
|
|
<html>
|
|
|
|
|
<body style=\"margin:0;display:flex;align-items:center;justify-content:center;height:100vh;background:#000;\">
|
|
|
|
|
<video src=\"${url}\" controls autoplay style=\"max-width:100vw;max-height:100vh;\"></video>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
message.warning('无法预览该视频');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: false, message: '请上传封面视频' },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={20}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductDetailVideos")}>
|
|
|
|
|
<SortableContext items={formRef.current?.getFieldValue("pbcProductDetailVideos") ? formRef.current?.getFieldValue("pbcProductDetailVideos").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
|
|
|
|
|
<ProFormUploadButton
|
|
|
|
|
label="详情视频"
|
|
|
|
|
name="pbcProductDetailVideos"
|
|
|
|
|
fieldProps={{
|
|
|
|
|
name: 'file',
|
|
|
|
|
accept: 'video/mp4',
|
|
|
|
|
multiple: true,
|
|
|
|
|
headers: {
|
|
|
|
|
authorization: localStorage.getItem('token') ?? '',
|
|
|
|
|
},
|
|
|
|
|
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
|
|
|
|
|
action: process.env.BASE_URL + '/oss/imgUpload',
|
|
|
|
|
beforeUpload(file: RcFile) {
|
|
|
|
|
const isLt100M = file.size / 1024 / 1024 < 100;
|
|
|
|
|
if (!isLt100M) {
|
|
|
|
|
message.error('视频大小不能超过100MB!');
|
|
|
|
|
}
|
|
|
|
|
return isLt100M || Upload.LIST_IGNORE;
|
|
|
|
|
},
|
|
|
|
|
onPreview: async (file) => {
|
|
|
|
|
const url = file.url || (file.response && file.response.data);
|
|
|
|
|
if (url) {
|
|
|
|
|
const videoWindow = window.open('', '_blank');
|
|
|
|
|
if (videoWindow) {
|
|
|
|
|
videoWindow.document.write(`
|
|
|
|
|
<html>
|
|
|
|
|
<body style=\"margin:0;display:flex;align-items:center;justify-content:center;height:100vh;background:#000;\">
|
|
|
|
|
<video src=\"${url}\" controls autoplay style=\"max-width:100vw;max-height:100vh;\"></video>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
message.warning('无法预览该视频');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: false, message: '请上传详情视频' },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</SortableContext>
|
|
|
|
|
</DndContext>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
{commonDataList ? commonDataList.map((e, index) => <Row key={e.pbcId} align="middle" gutter={20}>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<ProFormText width="sm" disabled name={`name${index}`} initialValue={e.pbcSystemName} placeholder="请输入规格名称" rules={[
|
|
|
|
|
|
