Skip to content

A
admin
提交 43f628eb 作者: 龚洪江
操作

功能：商品sku新增编辑

上级 65a8690f
正在显示 包含 472 行增加 和 280 行删除
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx
import { Button, Col, Form, Input, Row, Select, Table, Tag } from 'antd'; import { Button, Col, Form, Input, message, Row, Select, Table, Tag } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'; import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { useState } from 'react'; import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { isEmptyBol, regPriceNumber } from '~/utils/validateUtils'; import { isEmptyBol, regPriceNumber } from '~/utils/validateUtils';
import EditableCell from '~/components/EditableCell'; import EditableCell from '~/components/EditableCell';
import { InterReqType } from '~/api/interface'; import { InterDataType, InterReqType } from '~/api/interface';
import { addMallGoodsType } from '~/api/interface/goodsType'; import { addMallGoodsType, mallGoodsDetailsType } from '~/api/interface/goodsType';
import { filterObjAttr } from '~/utils';
type EditableTableProps = Parameters<typeof Table>[0]; type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>; type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
...@@ -18,13 +19,31 @@ type specificationFormListType = { ...@@ -18,13 +19,31 @@ type specificationFormListType = {
specificationValueList: { name: string; id: number; specificationName: string }[]; specificationValueList: { name: string; id: number; specificationName: string }[];
}; };
//规格表格类型 //规格表格类型
type skuTableType = Exclude<InterReqType<addMallGoodsType>, undefined>['priceStock']; type skuTableType = Exclude<InterReqType<addMallGoodsType>, undefined>['priceStock'][0] & {
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[];
};
//商品详情-返回类型
type goodsDetailType = InterDataType<mallGoodsDetailsType>;
interface selfProps {
ref: any;
goodsDetailsInfo: goodsDetailType | undefined;
}
const SkuInfo = () => { const SkuInfo = forwardRef<any, selfProps>(({ goodsDetailsInfo }, ref) => {
//规格项表单
const [form] = Form.useForm<{ [x: string]: string }>(); const [form] = Form.useForm<{ [x: string]: string }>();
//可编辑表格表单
const [skuValueForm] = Form.useForm<{ [x: string]: string }>();
//表格数据 //表格数据
const [tableData, setTableData] = useState<skuTableType>([]); const [tableData, setTableData] = useState<(skuTableType & { [key: string]: string })[]>([]);
//表格-列 //销售价格正则校验
const salePriceValidator = (_rules: any, value: number) => { const salePriceValidator = (_rules: any, value: number) => {
if (!isEmptyBol(value)) { if (!isEmptyBol(value)) {
if (regPriceNumber(value.toString())) { if (regPriceNumber(value.toString())) {
...@@ -69,17 +88,22 @@ const SkuInfo = () => { ...@@ -69,17 +88,22 @@ const SkuInfo = () => {
return Promise.resolve(); return Promise.resolve();
} }
}; };
const defaultColumns: (ColumnTypes[number] & { //表格-列
editable?: boolean; const [defaultColumns, setDefaultColumns] = useState<
dataIndex?: string; (ColumnTypes[number] & {
inputType?: string; editable?: boolean;
radioOption?: { name: string; id: number }[]; dataIndex?: string;
rules?: any; inputType?: string;
maxLength?: number; radioOption?: { name: string; id: number }[];
})[] = [ rules?: any;
maxLength?: number;
children?: any;
})[]
>([
{ {
title: '商品规格', title: '商品规格',
align: 'center', align: 'center',
children: [],
}, },
{ {
title: '图片', title: '图片',
...@@ -89,7 +113,7 @@ const SkuInfo = () => { ...@@ -89,7 +113,7 @@ const SkuInfo = () => {
inputType: 'uploader', inputType: 'uploader',
}, },
{ {
title: '料号', title: 'sku编号',
align: 'center', align: 'center',
editable: true, editable: true,
dataIndex: 'skuNo', dataIndex: 'skuNo',
...@@ -119,50 +143,51 @@ const SkuInfo = () => { ...@@ -119,50 +143,51 @@ const SkuInfo = () => {
rules: [{ required: false, validator: stockPriceValidator }], rules: [{ required: false, validator: stockPriceValidator }],
inputType: 'number', inputType: 'number',
}, },
{ ]);
title: '操作', const covertColumns = () => {
align: 'center', return defaultColumns.map((col) => {
width: '10%', if (!col.editable) {
render: (_text: string, _record: any, index: number) => <></>, return col;
}, }
]; return {
const columns = defaultColumns.map((col) => { ...col,
if (!col.editable) { onCell: (record: any) => ({
return col; record,
} dataIndex: col.dataIndex,
return { title: col.title,
...col, editing: col.editable,
onCell: (record: any) => ({ radioOption: col.radioOption,
record, inputType: col.inputType,
dataIndex: col.dataIndex, uploadSuccess: col.inputType === 'uploader' ? uploadSuccess : undefined,
title: col.title, rules: col.rules,
editing: col.editable, }),
radioOption: col.radioOption, };
inputType: col.inputType, });
uploadSuccess: col.inputType === 'uploader' ? uploadSuccess : undefined, };
rules: col.rules,
}),
};
});
//规格表单数组 //规格表单数组
const [specificationFormList, setSpecificationFormList] = useState<specificationFormListType[]>([ const [specificationFormList, setSpecificationFormList] = useState<specificationFormListType[]>([
{ {
id: Math.random(), id: Math.random(),
name: `specification1`, name: `specName`,
optionList: [], optionList: [],
specificationValueList: [], specificationValueList: [],
addSpecificationValueShow: false, addSpecificationValueShow: false,
}, },
]); ]);
useImperativeHandle(ref, () => ({
submitSku,
getForm: () => skuValueForm,
}));
//新增规格项目 //新增规格项目
const addSpecificationClick = () => { const addSpecificationClick = () => {
setSpecificationFormList([ setSpecificationFormList([
...specificationFormList, ...specificationFormList,
{ {
id: Math.random(), id: Math.random(),
name: `specification${specificationFormList.length + 1}`, name: `specName${specificationFormList.length + 1}`,
optionList: [], optionList: [],
specificationValueList: [], specificationValueList: [],
addSpecificationValueShow: false, addSpecificationValueShow: false,
...@@ -177,9 +202,11 @@ const SkuInfo = () => { ...@@ -177,9 +202,11 @@ const SkuInfo = () => {
}; };
//规格项名称输入完成 //规格项名称输入完成
const specificationPressEnter = (e: any, index: number) => { const specificationPressEnter = (e: any, index: number) => {
specificationFormList[index].optionList = [{ label: e.target.value, value: e.target.value }]; specificationFormList[index].optionList = e.target.value
? [{ label: e.target.value, value: e.target.value }]
: [];
const obj = Object.create(null); const obj = Object.create(null);
obj[specificationFormList[index].name] = e.target.value; obj[specificationFormList[index].name] = e.target.value || undefined;
form.setFieldsValue(obj); form.setFieldsValue(obj);
setSpecificationFormList([...specificationFormList]); setSpecificationFormList([...specificationFormList]);
}; };
...@@ -188,7 +215,14 @@ const SkuInfo = () => { ...@@ -188,7 +215,14 @@ const SkuInfo = () => {
specificationFormList[index].addSpecificationValueShow = true; specificationFormList[index].addSpecificationValueShow = true;
setSpecificationFormList([...specificationFormList]); setSpecificationFormList([...specificationFormList]);
}; };
//存在
const specificationValuePressEnter = (e: any, index: number) => { const specificationValuePressEnter = (e: any, index: number) => {
const isExist = specificationFormList[index].specificationValueList.some(
(v) => v.name === e.target.value,
);
if (isExist) {
return message.warning('该规格值已存在');
}
specificationFormList[index].specificationValueList.push({ specificationFormList[index].specificationValueList.push({
id: Math.random(), id: Math.random(),
name: e.target.value, name: e.target.value,
...@@ -213,42 +247,73 @@ const SkuInfo = () => { ...@@ -213,42 +247,73 @@ const SkuInfo = () => {
//组合数据 //组合数据
const combineSpecificationValue = () => { const combineSpecificationValue = () => {
let combineSpecificationList: any = []; let combineSpecificationList: any = [];
const combineList = specificationFormList.reduce((pre: any, cur, currentIndex) => { let tableDataList: any = [];
// 首次组合两个数据 if (specificationFormList.length > 1) {
if (currentIndex === 0 && specificationFormList.length > 1) { const combineList = specificationFormList.reduce((pre: any, cur, currentIndex) => {
combineSpecificationList = combineEvent( // 首次组合两个数据
cur.specificationValueList, if (currentIndex === 0 && specificationFormList.length > 1) {
specificationFormList[currentIndex + 1].specificationValueList, combineSpecificationList = combineEvent(
); cur.specificationValueList,
//二维数组拆分为对象 specificationFormList[currentIndex + 1].specificationValueList,
combineSpecificationList = getCombineObj(combineSpecificationList); );
// 两个数据以上的组合 //二维数组拆分为对象
} else if (currentIndex < specificationFormList.length - 1) { combineSpecificationList = getCombineObj(combineSpecificationList);
// 上一次的组合作为下一次组合的参数 // 两个数据以上的组合
combineSpecificationList = combineEvent( } else if (
combineSpecificationList, currentIndex < specificationFormList.length - 1 &&
specificationFormList[currentIndex + 1].specificationValueList, specificationFormList[currentIndex + 1].specificationValueList.length
); ) {
//二维数组拆分为对象 // 上一次的组合作为下一次组合的参数
combineSpecificationList = getCombineObj(combineSpecificationList); combineSpecificationList = combineEvent(
} combineSpecificationList,
pre = combineSpecificationList; specificationFormList[currentIndex + 1].specificationValueList,
return pre; );
}, []); //二维数组拆分为对象
console.log('组合数据-->', combineList); combineSpecificationList = getCombineObj(combineSpecificationList);
const tableDataList = combineList.reduce((pre: any, cur: any) => { }
pre.push( pre = combineSpecificationList;
cur.reduce((a: any, b: any, currentIndex: number) => { return pre;
}, []);
tableDataList = combineList.reduce((pre: any, cur: any) => {
const tabCovertObj = cur.reduce((a: any, b: any, currentIndex: number) => {
a['name' + (currentIndex + 1)] = b.name; a['name' + (currentIndex + 1)] = b.name;
a['specificationName' + (currentIndex + 1)] = b.specificationName; a['specificationName' + (currentIndex + 1)] = b.specificationName;
a['id'] = Math.random();
return a; return a;
}, {}), }, {});
//判断表格中是否已存在该条（缓存）
const tableItemObj = tableData.find((i) =>
Object.getOwnPropertyNames(tabCovertObj).every((key) => i[key] === tabCovertObj[key]),
);
pre.push({
...tabCovertObj,
id: tableItemObj ? tableItemObj.id : Math.random(), //存在则用之前的id，不存在新建id
fileList: tableItemObj ? tableItemObj.fileList : [],
});
return pre;
}, []);
} else {
//当存在一个规格项时
tableDataList = specificationFormList[0].specificationValueList.map((v) => {
const obj = Object.create(null);
obj['name1'] = v.name;
obj['specificationName1'] = v.specificationName;
//判断表格中是否已存在该条（缓存）
const tableItemObj = tableData.find((i) =>
Object.getOwnPropertyNames(obj).every((key) => i[key] === obj[key]),
);
obj['id'] = Math.random();
return tableItemObj ? tableItemObj : obj; //存在则用之前的一条，不存在新建一条
});
}
if (tableDataList.length) {
//过滤规格值为空的
const filterSpecificationFormList = specificationFormList.filter(
(v) => v.specificationValueList.length,
); );
return pre; setTableFormDefault(tableDataList);
}, []); mergeTableRow(filterSpecificationFormList);
console.log('表格数据-->', tableDataList); }
setTableData(tableDataList); setTableData([...tableDataList]);
}; };
//组合数据拆分为对象 //组合数据拆分为对象
...@@ -268,12 +333,184 @@ const SkuInfo = () => { ...@@ -268,12 +333,184 @@ const SkuInfo = () => {
}, []); }, []);
}; };
//两数组排列组合（通用）
const combineEvent = (list1: any, list2: any) => { const combineEvent = (list1: any, list2: any) => {
return list1.reduce((pre: any, cur: any) => pre.concat(list2.map((v: any) => [cur, v])), []); return list1.reduce((pre: any, cur: any) => pre.concat(list2.map((v: any) => [cur, v])), []);
}; };
//表头拆分及合并列
const mergeTableRow = (filterSpecificationFormList: specificationFormListType[]) => {
const columns = filterSpecificationFormList.map((v, index) => ({
title: v.optionList[0].value,
dataIndex: 'name' + (index + 1),
align: 'center',
onCell: (_: any, i: number) => {
//合并列
if (index < filterSpecificationFormList.length - 1) {
const count: number = filterSpecificationFormList
.slice(index + 1, filterSpecificationFormList.length)
.reduce((pre: number, cur) => {
return pre * cur.specificationValueList.length;
}, 1);
return {
rowSpan: count !== 1 ? ((i + 1) % count === 1 ? count : 0) : 1,
};
} else {
return {
rowSpan: 1,
};
}
},
}));
defaultColumns[0].children = columns;
setDefaultColumns([...defaultColumns]);
};
//规格值上传图片返回 //规格值上传图片返回
const uploadSuccess = () => {}; const uploadSuccess = (
record: skuTableType,
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
const tableIndex: number = tableData.findIndex((v) => v.id === record.id);
if (tableIndex !== -1) {
tableData[tableIndex].fileList = fileList;
const obj = Object.create(null);
obj['skuImage' + record.id] = fileList.length ? fileList[0].url : undefined;
skuValueForm.setFieldsValue(obj);
setTableData([...tableData]);
}
};
//提交验证
const submitSku = () => {
return new Promise((resolve, reject) => {
form
.validateFields()
.then(() => {
const specificationFormItemIndex = specificationFormList.findIndex(
(v) => !v.specificationValueList.length,
);
if (specificationFormItemIndex !== -1) {
return message.warning(`请为规格项${specificationFormItemIndex}添加规格值`);
} else {
//规格项数据转化
const specAttrList = specificationFormList.map((v) => ({
specName: v.optionList[0].value,
id: goodsDetailsInfo
? goodsDetailsInfo.specAttrList.find((i) => i.id === v.id)?.id
: undefined,
specValuesList: v.specificationValueList.map((j) => ({
specName: j.name,
id: goodsDetailsInfo
? goodsDetailsInfo.specAttrList
.find((i) => i.id === v.id)
?.specValuesList.find((i) => i.id === j.id)?.id
: undefined,
})),
}));
skuValueForm
.validateFields()
.then((value) => {
//规格值数据转化
const priceStock = tableData.reduce((pre: any, cur: any) => {
//规格名，规格值组合类型
const productSpec = specificationFormList.reduce(
(a: { [x: string]: string }, b, currentIndex) => {
a[b.optionList[0].value] = cur['name' + (currentIndex + 1)];
return a;
},
{},
);
pre.push({
...Object.getOwnPropertyNames(value).reduce((a: any, b) => {
if (b.includes(cur.id)) {
a[b.replace(cur.id, '')] = value[b];
}
return a;
}, {}),
productSpec: JSON.stringify(productSpec),
});
return pre;
}, []);
resolve({ priceStock, specAttrList });
})
.catch((err) => {
reject(err);
});
}
})
.catch((err) => {
reject(err);
});
});
};
//排列组合规格值表单默认数据
const setTableFormDefault = (tableDataList: (skuTableType & { [key: string]: string })[]) => {
const tableFormDefault = tableDataList.reduce((pre: any, cur) => {
return {
...pre,
...Object.getOwnPropertyNames(filterObjAttr(cur, ['id'])).reduce((a: any, b) => {
a[b + cur.id] = cur[b];
return a;
}, {}),
};
}, {});
skuValueForm.setFieldsValue(tableFormDefault);
};
useEffect(() => {
if (goodsDetailsInfo) {
//转化数据
const covertSpecAttrList = goodsDetailsInfo.specAttrList.map((v, index) => ({
id: v.id,
name: 'specName' + index,
optionList: [{ label: v.specName, value: v.specName }],
specificationValueList: v.specValuesList.map((i) => ({
id: i.id,
name: i.specName,
specificationName: v.specName,
})),
addSpecificationValueShow: false,
}));
//规格项表单数据默认数据
const specFormDefault = goodsDetailsInfo.specAttrList.reduce(
(pre: any, cur: any, currentIndex) => {
pre['specName' + currentIndex] = cur.specName;
return pre;
},
{},
);
form.setFieldsValue(specFormDefault);
setSpecificationFormList([...covertSpecAttrList]);
mergeTableRow(covertSpecAttrList);
const tableDataList: (skuTableType & { [key: string]: string })[] =
goodsDetailsInfo.priceStock.map((v) => ({
id: v.id,
salePrice: v.salePrice,
skuImage: v.skuImage,
skuNo: v.skuNo,
stock: v.stock,
channelPrice: v.channelPrice,
fileList: v.skuImage
? [{ id: Math.random(), uid: Math.random(), url: v.skuImage, name: '规格图片' }]
: [],
...Object.getOwnPropertyNames(JSON.parse(v.productSpec)).reduce(
(pre: any, cur, currentIndex) => {
pre['name' + (currentIndex + 1)] = JSON.parse(v.productSpec)[cur];
pre['specificationName' + (currentIndex + 1)] = cur;
return pre;
},
{},
),
}));
setTableFormDefault(tableDataList);
setTableData(tableDataList);
}
}, [goodsDetailsInfo]);
return ( return (
<div className='sku-info'> <div className='sku-info'>
...@@ -288,6 +525,7 @@ const SkuInfo = () => { ...@@ -288,6 +525,7 @@ const SkuInfo = () => {
wrapperCol={{ span: 18 }} wrapperCol={{ span: 18 }}
labelCol={{ span: 5 }} labelCol={{ span: 5 }}
name={v.name} name={v.name}
rules={[{ required: true, message: `请输入规格项${index + 1}` }]}
> >
<Select <Select
placeholder='请输入规格项，按回车键完成' placeholder='请输入规格项，按回车键完成'
...@@ -382,22 +620,27 @@ const SkuInfo = () => { ...@@ -382,22 +620,27 @@ const SkuInfo = () => {
</Col> </Col>
</Row> </Row>
</Form> </Form>
<Form> {tableData.length ? (
<Table <Form form={skuValueForm}>
style={{ marginTop: '10px' }} <Table
rowKey='id' style={{ marginTop: '10px' }}
columns={columns as ColumnTypes} rowKey='id'
components={{ columns={covertColumns() as ColumnTypes}
body: { components={{
cell: EditableCell, body: {
}, cell: EditableCell,
}} },
bordered }}
dataSource={tableData} bordered
pagination={false} dataSource={tableData}
/> pagination={false}
</Form> size='small'
/>
</Form>
) : (
''
)}
</div> </div>
); );
}; });
export default SkuInfo; export default SkuInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx
...@@ -3,19 +3,13 @@ import { useEffect, useRef, useState } from 'react'; ...@@ -3,19 +3,13 @@ import { useEffect, useRef, useState } from 'react';
import BaseInfo from './components/baseInfo'; import BaseInfo from './components/baseInfo';
import SkuInfo from './components/skuInfo'; import SkuInfo from './components/skuInfo';
import IntroduceInfo from './components/introduceInfo'; import IntroduceInfo from './components/introduceInfo';
import SkuAddOrEditModal from './components/skuAddOrEditModal';
import './index.scss'; import './index.scss';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { baseInfoType } from './components/baseInfo'; import { InterDataType } from '~/api/interface';
import { InterDataType, InterReqType } from '~/api/interface'; import { mallGoodsDetailsType } from '~/api/interface/goodsType';
import { addMallGoodsType, mallGoodsDetailsType, skuUnitType } from '~/api/interface/goodsType';
import GoodsAPI from '~/api/modules/goodsAPI'; import GoodsAPI from '~/api/modules/goodsAPI';
import { filterObjAttr } from '~/utils'; import { filterObjAttr } from '~/utils';
//商品sku规格类型
type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
//单位返回类型
type unitType = InterDataType<skuUnitType>;
//商品详情-返回类型 //商品详情-返回类型
type goodsDetailType = InterDataType<mallGoodsDetailsType>; type goodsDetailType = InterDataType<mallGoodsDetailsType>;
...@@ -23,16 +17,9 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -23,16 +17,9 @@ const GoodsAddOrEditOrDetail = () => {
const baseInfoRef = useRef<any>(); const baseInfoRef = useRef<any>();
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const skuInfoRef = useRef<any>();
//单位列表
const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
const [tabSelectKeys, setTabSelectKeys] = useState<string>('1'); const [tabSelectKeys, setTabSelectKeys] = useState<string>('1');
//新增、编辑sku弹窗
const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState<boolean>(false);
//当前编辑sku
const [currentSku, setCurrentSku] = useState<goodsSpecType>();
//skuTable数据
const [skuTable, setSkuTable] = useState<goodsSpecType[]>([]);
//商品介绍详情 //商品介绍详情
const [goodsDetails, setGoodsDetails] = useState<string>(''); const [goodsDetails, setGoodsDetails] = useState<string>('');
//商品id //商品id
...@@ -40,30 +27,6 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -40,30 +27,6 @@ const GoodsAddOrEditOrDetail = () => {
//商品详情 //商品详情
const [goodsDetailsInfo, setGoodsDetailsInfo] = useState<goodsDetailType>(); const [goodsDetailsInfo, setGoodsDetailsInfo] = useState<goodsDetailType>();
//新增、编辑sku弹窗显示
// const addOrEditSkuClick = (record?: goodsSpecType) => {
// setCurrentSku(record ? { ...record } : undefined);
// setAddOrEditSkuModalShow(true);
// };
const addOrEditSkuModalCancel = () => {
setAddOrEditSkuModalShow(false);
};
const addOrEditSkuModalOk = (values: goodsSpecType) => {
setAddOrEditSkuModalShow(false);
const skuTableIndex: number = skuTable.findIndex((v) => v.id === values.id);
if (skuTableIndex !== -1) {
skuTable.splice(skuTableIndex, 1, values);
setSkuTable([...skuTable]);
} else {
setSkuTable([...skuTable, { ...values }]);
}
};
//sku删除
// const deleteSkuClick = (record: goodsSpecType) => {
// const skuIndex: number = skuTable.findIndex((v) => v.id === record.id);
// skuTable.splice(skuIndex, 1);
// setSkuTable([...skuTable]);
// };
//商品详情获取 //商品详情获取
const getIntroduceInfo = (richText: string) => { const getIntroduceInfo = (richText: string) => {
setGoodsDetails(richText); setGoodsDetails(richText);
...@@ -78,18 +41,7 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -78,18 +41,7 @@ const GoodsAddOrEditOrDetail = () => {
{ {
key: '2', key: '2',
label: `商品规格`, label: `商品规格`,
children: ( children: <SkuInfo ref={skuInfoRef} goodsDetailsInfo={goodsDetailsInfo} />,
// (旧)
// <SkuInfo
// addOrEditSkuClick={addOrEditSkuClick}
// skuTableData={skuTable}
// skuUnitList={skuUnitList}
// deleteSkuClick={deleteSkuClick}
// editSkuClick={addOrEditSkuClick}
// />
//（新）
<SkuInfo />
),
}, },
{ {
key: '3', key: '3',
...@@ -117,11 +69,14 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -117,11 +69,14 @@ const GoodsAddOrEditOrDetail = () => {
}); });
break; break;
case '2': case '2':
if (skuTable.length) { skuInfoRef.current
setTabSelectKeys((Number(tabSelectKeys) + 1).toString()); .submitSku()
} else { .then(() => {
message.warning('请添加规格'); setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
} })
.catch(() => {
message.warning('请添加规格');
});
break; break;
case '3': case '3':
break; break;
...@@ -136,62 +91,45 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -136,62 +91,45 @@ const GoodsAddOrEditOrDetail = () => {
const backRoute = () => { const backRoute = () => {
navigate(-1); navigate(-1);
}; };
//单位列表
const getSkuUnit = () => {
GoodsAPI.getSkuUnit().then(({ result }) => {
setSkuUnitList(result || []);
});
};
//商品保存 //商品保存
const saveGoods = () => { const saveGoods = () => {
baseInfoRef.current Promise.all([
.getForm() baseInfoRef.current.getForm().validateFields(),
.validateFields() skuInfoRef.current ? skuInfoRef.current.submitSku() : getDefaultSku(),
.then((values: baseInfoType) => { ])
if (skuTable.length) { .then((values: any) => {
const skuList = skuTable.map((v) => ({ const addGoodsEditReq = {
...v, ...filterObjAttr(values[0], ['mainImgList', 'subImgList', 'videoList', 'categoryId']),
id: goodsDetailsInfo resourcesList: [
? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id ...values[0].mainImgList.map((v: any) => ({ type: 0, url: v.url })),
: undefined, ...(values[0].subImgList?.map((v: any) => ({ type: 1, url: v.url })) || []),
goodsSpecValuesList: v.goodsSpecValuesList.map((i) => ({ ...(values[0].videoList?.map((v: any) => ({ type: 2, url: v.url })) || []),
...i, ],
id: goodsDetailsInfo categoryPrimaryId: values[0].categoryId[0],
? goodsDetailsInfo.goodsSpecList categorySubId: values[0].categoryId.length === 2 ? values[0].categoryId[1] : undefined,
.find((j) => j.id === v.id) goodsDetails,
?.goodsSpecValuesList.find((k) => k.id === i.id)?.id ...values[1],
: undefined, id: goodsId || undefined,
goodsSpecId: goodsDetailsInfo };
? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id GoodsAPI[goodsId ? 'editMallGoods' : 'addMallGoods'](addGoodsEditReq).then(({ code }) => {
: undefined, if (code === '200') {
})), message.success(goodsId ? '编辑商品成功' : '新增商品成功');
})); navigate(-1);
const addGoodsEditReq = { }
...filterObjAttr(values, ['mainImgList', 'subImgList', 'videoList', 'categoryId']), });
resourcesList: [
...values.mainImgList.map((v) => ({ type: 0, url: v.url })),
...(values.subImgList?.map((v) => ({ type: 1, url: v.url })) || []),
...(values.videoList?.map((v) => ({ type: 2, url: v.url })) || []),
],
categoryPrimaryId: values.categoryId[0],
categorySubId: values.categoryId.length === 2 ? values.categoryId[1] : undefined,
goodsDetails,
goodsSpecList: skuList,
id: goodsId || undefined,
};
GoodsAPI[goodsId ? 'editMallGoods' : 'addMallGoods'](addGoodsEditReq).then(({ code }) => {
if (code === '200') {
message.success(goodsId ? '编辑商城成功' : '新增商品成功');
navigate(-1);
}
});
} else {
message.warning('商品规格未添加');
}
}) })
.catch((error: any) => { .catch((error: any) => {
message.error(error.errorFields[0].errors[0]); baseInfoRef.current
.getForm()
.validateFields()
.then(() => {
setTabSelectKeys('2');
})
.catch(() => {
setTabSelectKeys('1');
});
message.error(error?.errorFields?.[0].errors[0] || error);
}); });
}; };
//商品详情 //商品详情
...@@ -207,7 +145,6 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -207,7 +145,6 @@ const GoodsAddOrEditOrDetail = () => {
.filter((v) => v.type === 2) .filter((v) => v.type === 2)
.map((v) => ({ id: v.id, name: 'video', uid: v.id, url: v.url })); .map((v) => ({ id: v.id, name: 'video', uid: v.id, url: v.url }));
setGoodsDetailsInfo(JSON.parse(JSON.stringify(result))); setGoodsDetailsInfo(JSON.parse(JSON.stringify(result)));
setSkuTable(result.goodsSpecList);
setGoodsDetails(result.goodsDetails || ''); setGoodsDetails(result.goodsDetails || '');
baseInfoRef.current.getForm().setFieldsValue({ baseInfoRef.current.getForm().setFieldsValue({
tradeName: result.tradeName, tradeName: result.tradeName,
...@@ -228,9 +165,21 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -228,9 +165,21 @@ const GoodsAddOrEditOrDetail = () => {
baseInfoRef.current.mediaData.setVideoFileList(videoList); baseInfoRef.current.mediaData.setVideoFileList(videoList);
}); });
}; };
//编辑未点击规格时数据处理
const getDefaultSku = () => {
return new Promise((resolve, reject) => {
if (goodsDetailsInfo) {
resolve({
priceStock: goodsDetailsInfo.priceStock,
specAttrList: goodsDetailsInfo.specAttrList,
});
} else {
reject('请上传商品规格');
}
});
};
useEffect(() => { useEffect(() => {
getSkuUnit();
if (searchParams.get('id')) { if (searchParams.get('id')) {
setGoodsId(Number(searchParams.get('id'))); setGoodsId(Number(searchParams.get('id')));
getMallGoodsDetails(Number(searchParams.get('id'))); getMallGoodsDetails(Number(searchParams.get('id')));
...@@ -258,14 +207,6 @@ const GoodsAddOrEditOrDetail = () => { ...@@ -258,14 +207,6 @@ const GoodsAddOrEditOrDetail = () => {
返回 返回
</Button> </Button>
</div> </div>
{/*新增、编辑sku弹窗*/}
<SkuAddOrEditModal
open={addOrEditSkuModalShow}
onCancel={addOrEditSkuModalCancel}
onHandleOk={addOrEditSkuModalOk}
skuUnitList={skuUnitList}
currentSku={currentSku}
/>
</div> </div>
); );
}; };
......
src/pages/mallManage/rentGoods/rentList/index.tsx → src/pages/rentManage/rentGoods/rentList/index.tsx
...@@ -188,19 +188,19 @@ const RentList = () => { ...@@ -188,19 +188,19 @@ const RentList = () => {
}; };
//新增商品 //新增商品
const toAddRentGoods = () => { const toAddRentGoods = () => {
navigate({ pathname: '/mallManage/rentGoods/add' }); navigate({ pathname: '/rentManage/rentGoods/add' });
}; };
//编辑商品 //编辑商品
const toEditGoods = (id: number) => { const toEditGoods = (id: number) => {
navigate({ navigate({
pathname: '/mallManage/rentGoods/edit', pathname: '/rentManage/rentGoods/edit',
search: `id=${id}`, search: `id=${id}`,
}); });
}; };
//商品详情 //商品详情
const toRentGoodsDetail = (id: number) => { const toRentGoodsDetail = (id: number) => {
navigate({ navigate({
pathname: '/mallManage/rentGoods/detail', pathname: '/rentManage/rentGoods/detail',
search: `id=${id}&isDetail=1`, search: `id=${id}&isDetail=1`,
}); });
}; };
......
src/router/router.tsx
...@@ -96,10 +96,13 @@ const ServiceDetailView = React.lazy( ...@@ -96,10 +96,13 @@ const ServiceDetailView = React.lazy(
const ServiceIntroduceView = React.lazy( const ServiceIntroduceView = React.lazy(
() => import('~/pages/mallManage/serviceManage/serviceIntroduce'), () => import('~/pages/mallManage/serviceManage/serviceIntroduce'),
); //服务介绍 ); //服务介绍
const RentListView = React.lazy(() => import('~/pages/mallManage/rentGoods/rentList')); //租赁列表
const RentListView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentList')); //租赁列表
const RentAddOrEditOrDetailView = React.lazy( const RentAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/rentGoods/rentAddOrEditOrDetail'), () => import('~/pages/rentManage/rentGoods/rentAddOrEditOrDetail'),
); //租赁新增、编辑、详情 ); //租赁新增、编辑、详情
const RentTypeView = React.lazy(() => import('~/pages/rentManage/rentType')); //类型管理
const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品 const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
const MallAddOrEditOrDetailView = React.lazy( const MallAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'), () => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'),
...@@ -614,49 +617,6 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -614,49 +617,6 @@ export const routerList: Array<RouteObjectType> = [
}, },
}, },
{ {
path: '/mallManage/rentGoods',
element: withLoadingComponent(<RentListView />),
errorElement: <ErrorPage />,
meta: {
id: 1030,
icon: <SmileOutlined />,
title: '租赁商品',
},
},
{
path: '/mallManage/rentGoods/add',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10135,
icon: <SmileOutlined />,
title: '租赁商品新增',
hidden: true,
},
},
{
path: '/mallManage/rentGoods/edit',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品编辑',
hidden: true,
},
},
{
path: '/mallManage/rentGoods/detail',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品详情',
hidden: true,
},
},
{
path: '/mallManage/mallGoods', path: '/mallManage/mallGoods',
element: withLoadingComponent(<MallGoodsView />), element: withLoadingComponent(<MallGoodsView />),
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
...@@ -730,25 +690,73 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -730,25 +690,73 @@ export const routerList: Array<RouteObjectType> = [
title: '品牌管理', title: '品牌管理',
}, },
}, },
// { ],
// path: '/mallManage/industryList', },
// element: withLoadingComponent(<IndustryListView />), {
// meta: { path: '/rentManage',
// id: 10180, element: <LayoutView />,
// icon: <SmileOutlined />, errorElement: <ErrorPage />,
// title: '行业方案', meta: {
// }, id: 10001,
// }, icon: <ShopOutlined />,
// { title: '租赁管理',
// path: '/mallManage/industryDetail', develop: true,
// element: withLoadingComponent(<IndustryDetailView />), },
// meta: { children: [
// id: 10190, {
// icon: <SmileOutlined />, path: '/rentManage/rentGoods',
// title: '行业详情', element: withLoadingComponent(<RentListView />),
// hidden: true, errorElement: <ErrorPage />,
// }, meta: {
// }, id: 1030,
icon: <SmileOutlined />,
title: '租赁商品',
},
},
{
path: '/rentManage/rentGoods/add',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10135,
icon: <SmileOutlined />,
title: '租赁商品新增',
hidden: true,
},
},
{
path: '/rentManage/rentGoods/edit',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品编辑',
hidden: true,
},
},
{
path: '/rentManage/rentGoods/detail',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品详情',
hidden: true,
},
},
{
path: '/rentManage/rentType',
element: withLoadingComponent(<RentTypeView />),
errorElement: <ErrorPage />,
meta: {
id: 10137,
icon: <SmileOutlined />,
title: '类型管理',
develop: true,
},
},
], ],
}, },
{ {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论