You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
18 KiB
TypeScript
451 lines
18 KiB
TypeScript
9 months ago
|
import Constants from '@/constants';
|
||
|
|
import { getPbcBusinessListUsingPost } from '@/services/pop-b2b2c/pbcBusinessController';
|
||
|
|
import { listAdminTreeUsingGet } from '@/services/pop-b2b2c/pbcCategoryController';
|
||
|
|
import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonDataController';
|
||
|
|
import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
|
||
|
|
import { getCities } from '@/utils/cities';
|
||
|
|
import {
|
||
|
|
ProCard,
|
||
|
|
ProForm,
|
||
|
|
ProFormCascader,
|
||
|
|
ProFormDigit,
|
||
|
|
ProFormInstance,
|
||
|
|
ProFormList,
|
||
|
|
ProFormSelect,
|
||
|
|
ProFormText,
|
||
|
|
ProFormTextArea,
|
||
|
|
ProFormUploadButton,
|
||
|
|
} from '@ant-design/pro-components';
|
||
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
||
|
|
import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
|
||
|
|
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||
|
|
import { Button, Col, message, Row } from 'antd';
|
||
|
|
import Upload, { RcFile, UploadFile } from 'antd/es/upload';
|
||
|
|
import React, { useRef, useState } from 'react';
|
||
|
|
import { CSS } from '@dnd-kit/utilities';
|
||
|
|
|
||
|
|
interface DraggableUploadListItemProps {
|
||
|
|
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
||
|
|
file: UploadFile<any>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {
|
||
|
|
let { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||
|
|
id: file.uid,
|
||
|
|
});
|
||
|
|
|
||
|
|
const style: React.CSSProperties = {
|
||
|
|
transform: CSS.Translate.toString(transform),
|
||
|
|
transition,
|
||
|
|
cursor: 'move',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={setNodeRef}
|
||
|
|
style={style}
|
||
|
|
// prevent preview event when drag end
|
||
|
|
className={isDragging ? 'is-dragging' : ''}
|
||
|
|
{...attributes}
|
||
|
|
{...listeners}
|
||
|
|
>
|
||
|
|
{/* hide error tooltip when dragging */}
|
||
|
|
{file.status === 'error' && isDragging ? originNode.props.children : originNode}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Detail: React.FC<any> = () => {
|
||
|
|
const [cities] = useState(() => getCities())
|
||
|
|
|
||
|
|
const [colorData, setColorData] = useState<API.PbcCommonData[]>()
|
||
|
|
const [commonDataList, setCommonDataList] = useState<API.PbcCommonData[]>()
|
||
|
|
|
||
|
|
const formRef = useRef<ProFormInstance>();
|
||
|
|
|
||
|
|
const onSave = () => {
|
||
|
|
formRef.current?.submit()
|
||
|
|
const values = formRef.current?.getFieldsValue()
|
||
|
|
console.log(values.colorItems)
|
||
|
|
console.log(values.specItems)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleCategoryChange = (value: any[], items: API.PbcCategory[]) => {
|
||
|
|
const [c1, c2, c3] = items
|
||
|
|
formRef.current?.setFieldsValue({
|
||
|
|
pbcProductTopCategoryName: c1?.pbcCategoryName,
|
||
|
|
pbcProductParentCategoryName: c2?.pbcCategoryName,
|
||
|
|
pbcProductCategoryName: c3?.pbcCategoryName,
|
||
|
|
})
|
||
|
|
if (value.length === 3) {
|
||
|
|
getRecordByL3CategoryIdUsingGet({ l3CategoryId: value[2] }).then(res => {
|
||
|
|
if (res.retcode && res.data) {
|
||
|
|
setColorData(res.data.colorData)
|
||
|
|
setCommonDataList(res.data.commonDataList)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const onSubmit = async (values: any) => {
|
||
|
|
let pbcProductOriginalProvince = undefined, pbcProductOriginalCity = undefined;
|
||
|
|
if (values?.pbcZone?.length) {
|
||
|
|
([pbcProductOriginalProvince, pbcProductOriginalCity] = values.pbcZone);
|
||
|
|
}
|
||
|
|
const [pbcProductTopCategoryId, pbcProductParentCategoryId, pbcProductCategoryId] = values.pbcProductCategoryIdList
|
||
|
|
console.log(values.colorItems)
|
||
|
|
console.log(values.specItems)
|
||
|
|
const specItems: API.PbcProductCommonData[] = []
|
||
|
|
if (colorData && values.colorItems && values.colorItems.length > 0) {
|
||
|
|
for (let i = 0; i < values.colorItems.length; i++) {
|
||
|
|
const element = values.colorItems[i];
|
||
|
|
specItems.push({
|
||
|
|
pbcCommonDataId: colorData.length > 0 ? colorData[0].pbcId : undefined,
|
||
|
|
pbcSystemName: '颜色',
|
||
|
|
pbcSystemInputType: 'text',
|
||
|
|
pbcCommonDataSystem: element.name,
|
||
|
|
pbcColorImageUrl: element.value.length > 0 ? element.value[0].response.data : ''
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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 || ''
|
||
|
|
}
|
||
|
|
specItems.push({
|
||
|
|
pbcCommonDataId: element.pbcId,
|
||
|
|
pbcSystemName: element.pbcSystemName,
|
||
|
|
pbcSystemInputType: element.pbcSystemInputType,
|
||
|
|
pbcCommonDataValueId: element.pbcSystemInputType === 'select' ? values[`value${i}`] : undefined,
|
||
|
|
pbcCommonDataSystemValue: element.pbcSystemInputType === 'select' ? name : undefined,
|
||
|
|
pbcCommonDataSystem: element.pbcSystemInputType === 'select' ? undefined : values[`value${i}`]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const params: API.PbcProductDTO = {
|
||
|
|
...values,
|
||
|
|
pbcProductOriginalProvince,
|
||
|
|
pbcProductOriginalCity,
|
||
|
|
pbcProductTopCategoryId,
|
||
|
|
pbcProductParentCategoryId,
|
||
|
|
pbcProductCategoryId,
|
||
|
|
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(','),
|
||
|
|
pbcZone: undefined,
|
||
|
|
colorItems: undefined,
|
||
|
|
specItems: undefined,
|
||
|
|
pbcProductCategoryIdList: undefined,
|
||
|
|
}
|
||
|
|
const msg = await addOrUpdateProductForAdminUsingPost(params)
|
||
|
|
if (msg.retcode) {
|
||
|
|
message.success("创建成功！")
|
||
|
|
history.back();
|
||
|
|
return true
|
||
|
|
} else {
|
||
|
|
message.error(msg.retmsg)
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const sensor = useSensor(PointerSensor, {
|
||
|
|
activationConstraint: { distance: 10 },
|
||
|
|
});
|
||
|
|
|
||
|
|
const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => {
|
||
|
|
if (active.id !== over?.id) {
|
||
|
|
const arr = formRef.current?.getFieldValue(fieldName) || []
|
||
|
|
const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
|
||
|
|
const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
|
||
|
|
const newArr = arrayMove(arr, activeIndex, overIndex)
|
||
|
|
formRef.current?.setFieldValue(fieldName, newArr)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageContainer
|
||
|
|
header={{
|
||
|
|
title: '',
|
||
|
|
}}
|
||
|
|
footer={[
|
||
|
|
<Button
|
||
|
|
key="back"
|
||
|
|
onClick={() => {
|
||
|
|
history.back();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
返回
|
||
|
|
</Button>,
|
||
|
|
<Button type="primary" key="submit" onClick={onSave}>
|
||
|
|
保存
|
||
|
|
</Button>
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<ProForm layout="horizontal" labelAlign="left" requiredMark={false} formRef={formRef} onFinish={onSubmit} submitter={false}>
|
||
|
|
<ProFormText name="pbcProductTopCategoryName" hidden />
|
||
|
|
<ProFormText name="pbcProductParentCategoryName" hidden />
|
||
|
|
<ProFormText name="pbcProductCategoryName" hidden />
|
||
|
|
<ProCard title="基本信息" style={{ marginBottom: 12 }}>
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormSelect
|
||
|
|
label="所属商户"
|
||
|
|
name="pbcBusinessId"
|
||
|
|
rules={[
|
||
|
|
{ required: true, message: '请选择所属商户' }
|
||
|
|
]}
|
||
|
|
request={ async () => {
|
||
|
|
const msg = await getPbcBusinessListUsingPost();
|
||
|
|
if (msg.retcode && msg.data) {
|
||
|
|
return msg.data;
|
||
|
|
}
|
||
|
|
return [];
|
||
|
|
}}
|
||
|
|
fieldProps={{
|
||
|
|
showSearch: true,
|
||
|
|
fieldNames: { label: 'pbcBusinessName', value: 'pbcId' }
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormText label="编号" name="pbcProductCode" rules={[
|
||
|
|
{ required: true, message: '请输入商品编号' },
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormText label="名称" name="pbcProductTitle" rules={[
|
||
|
|
{ required: true, message: '请输入商品名称' },
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormCascader label="产地" name="pbcZone" fieldProps={{ options: cities }} />
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormText label="价格" name="pbcProductPrice" rules={[
|
||
|
|
{ required: true, message: '请输入商品价格' },
|
||
|
|
]} fieldProps={{ prefix: '￥' }} />
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormDigit label="库存" name="pbcProductStock" min={0} fieldProps={{ precision: 0 }} rules={[
|
||
|
|
{ required: true, message: '请输入商品库存' },
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormText label="货架号" name="pbcProductShelfNumber" rules={[
|
||
|
|
{ required: true, message: '请输入货架号' }
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormCascader label="类目" name="pbcProductCategoryIdList"
|
||
|
|
request={ async () => {
|
||
|
|
const msg = await listAdminTreeUsingGet({ type: 2 });
|
||
|
|
if (msg.retcode && msg.data) {
|
||
|
|
return msg.data;
|
||
|
|
}
|
||
|
|
return [];
|
||
|
|
}}
|
||
|
|
fieldProps={{fieldNames: { label: 'pbcCategoryName', value: 'pbcId', children: 'children' }, onChange: handleCategoryChange}}
|
||
|
|
rules={[
|
||
|
|
{ required: true, message: '请选择类目' },
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
{colorData ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
|
||
|
|
<ProFormList
|
||
|
|
name="colorItems"
|
||
|
|
creatorButtonProps={{
|
||
|
|
creatorButtonText: '新增',
|
||
|
|
icon: false,
|
||
|
|
type: 'link',
|
||
|
|
style: { width: 'unset' },
|
||
|
|
}}
|
||
|
|
copyIconProps={false}
|
||
|
|
deleteIconProps={{ tooltipText: '删除' }}
|
||
|
|
itemRender={({ listDom, action }) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'inline-flex',
|
||
|
|
marginInlineEnd: 25,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{listDom}
|
||
|
|
{action}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Row align="middle" gutter={20}>
|
||
|
|
<Col span={12}>
|
||
|
|
<ProFormText width="sm" name={['name']} placeholder="请输入颜色名" rules={[
|
||
|
|
{ required: true, message: '请输入颜色名' }
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
<ProFormUploadButton
|
||
|
|
name={['value']}
|
||
|
|
fieldProps={{
|
||
|
|
name: 'file',
|
||
|
|
accept: 'image/*',
|
||
|
|
headers: {
|
||
|
|
authorization: localStorage.getItem('token') ?? '',
|
||
|
|
},
|
||
|
|
action: process.env.BASE_URL + '/oss/imgUpload',
|
||
|
|
beforeUpload(file: RcFile) {
|
||
|
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
||
|
|
if (!isLt2M) {
|
||
|
|
message.error('图片大小不能超过10MB!');
|
||
|
|
}
|
||
|
|
return isLt2M || Upload.LIST_IGNORE;
|
||
|
|
},
|
||
|
|
onPreview: async (file) => {
|
||
|
|
|
||
|
|
if (file.uid === '-1') {
|
||
|
|
window.open(file.url);
|
||
|
|
}
|
||
|
|
if (file.response && file.response.retcode) {
|
||
|
|
window.open(file.response.data);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
listType: 'picture-card',
|
||
|
|
}}
|
||
|
|
rules={[
|
||
|
|
{ required: true, message: '请上传颜色图片' },
|
||
|
|
]}
|
||
|
|
max={1}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</ProFormList>
|
||
|
|
</ProForm.Item> : null}
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={24}>
|
||
|
|
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductImages")}>
|
||
|
|
<SortableContext items={formRef.current?.getFieldValue("pbcProductImages") ? formRef.current?.getFieldValue("pbcProductImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
|
||
|
|
<ProFormUploadButton
|
||
|
|
label="相册图"
|
||
|
|
name="pbcProductImages"
|
||
|
|
fieldProps={{
|
||
|
|
name: 'file',
|
||
|
|
accept: 'image/*',
|
||
|
|
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 isLt2M = file.size / 1024 / 1024 < 10;
|
||
|
|
if (!isLt2M) {
|
||
|
|
message.error('图片大小不能超过10MB!');
|
||
|
|
}
|
||
|
|
return isLt2M || Upload.LIST_IGNORE;
|
||
|
|
},
|
||
|
|
onPreview: async (file) => {
|
||
|
|
|
||
|
|
if (file.uid === '-1') {
|
||
|
|
window.open(file.url);
|
||
|
|
}
|
||
|
|
if (file.response && file.response.retcode) {
|
||
|
|
window.open(file.response.data);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
listType: 'picture-card',
|
||
|
|
}}
|
||
|
|
rules={[
|
||
|
|
{ required: true, message: '请上传相册图' },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</SortableContext>
|
||
|
|
</DndContext>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={24}>
|
||
|
|
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductDetailImages")}>
|
||
|
|
<SortableContext items={formRef.current?.getFieldValue("pbcProductDetailImages") ? formRef.current?.getFieldValue("pbcProductDetailImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
|
||
|
|
<ProFormUploadButton
|
||
|
|
label="详情图"
|
||
|
|
name="pbcProductDetailImages"
|
||
|
|
fieldProps={{
|
||
|
|
name: 'file',
|
||
|
|
accept: 'image/*',
|
||
|
|
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 isLt2M = file.size / 1024 / 1024 < 10;
|
||
|
|
if (!isLt2M) {
|
||
|
|
message.error('图片大小不能超过10MB!');
|
||
|
|
}
|
||
|
|
return isLt2M || Upload.LIST_IGNORE;
|
||
|
|
},
|
||
|
|
onPreview: async (file) => {
|
||
|
|
|
||
|
|
if (file.uid === '-1') {
|
||
|
|
window.open(file.url);
|
||
|
|
}
|
||
|
|
if (file.response && file.response.retcode) {
|
||
|
|
window.open(file.response.data);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
listType: 'picture-card',
|
||
|
|
}}
|
||
|
|
rules={[
|
||
|
|
{ required: true, 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={[
|
||
|
|
{ required: true, message: '请输入规格名称' }
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
<Col span={6}>
|
||
|
|
{e.pbcSystemInputType === 'select' ? <ProFormSelect name={`value${index}`} options={e.commonDataValueList?.map(item => {
|
||
|
|
return {
|
||
|
|
label: item.pbcSystemValue || '',
|
||
|
|
value: item.pbcId
|
||
|
|
}
|
||
|
|
})} /> : <ProFormText width="sm" name={`value${index}`} placeholder="请输入规格描述" />
|
||
|
|
}
|
||
|
|
</Col>
|
||
|
|
</Row>) : null}
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={24}>
|
||
|
|
<ProFormTextArea label="详情描述" name="pbcProductDetail" />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row gutter={20}>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormSelect label="可见范围" name="pbcProductType" valueEnum={Constants.pbcProductType} rules={[
|
||
|
|
{ required: true, message: '请选择可见范围' },
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<ProFormSelect label="状态" name="pbcState" valueEnum={Constants.pbcState} rules={[
|
||
|
|
{ required: true, message: '请选择上下架状态' },
|
||
|
|
]} />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</ProCard>
|
||
|
|
</ProForm>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Detail;
|