Skip to content

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

功能：商品sku新增编辑

上级 65a8690f
正在显示 包含 134 行增加 和 185 行删除
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx
......@@ -3,19 +3,13 @@ import { useEffect, useRef, useState } from 'react';
import BaseInfo from './components/baseInfo';
import SkuInfo from './components/skuInfo';
import IntroduceInfo from './components/introduceInfo';
import SkuAddOrEditModal from './components/skuAddOrEditModal';
import './index.scss';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { baseInfoType } from './components/baseInfo';
import { InterDataType, InterReqType } from '~/api/interface';
import { addMallGoodsType, mallGoodsDetailsType, skuUnitType } from '~/api/interface/goodsType';
import { InterDataType } from '~/api/interface';
import { mallGoodsDetailsType } from '~/api/interface/goodsType';
import GoodsAPI from '~/api/modules/goodsAPI';
import { filterObjAttr } from '~/utils';
//商品sku规格类型
type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
//单位返回类型
type unitType = InterDataType<skuUnitType>;
//商品详情-返回类型
type goodsDetailType = InterDataType<mallGoodsDetailsType>;
......@@ -23,16 +17,9 @@ const GoodsAddOrEditOrDetail = () => {
const baseInfoRef = useRef<any>();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const skuInfoRef = useRef<any>();
//单位列表
const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
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>('');
//商品id
......@@ -40,30 +27,6 @@ const GoodsAddOrEditOrDetail = () => {
//商品详情
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) => {
setGoodsDetails(richText);
......@@ -78,18 +41,7 @@ const GoodsAddOrEditOrDetail = () => {
{
key: '2',
label: `商品规格`,
children: (
// (旧)
// <SkuInfo
// addOrEditSkuClick={addOrEditSkuClick}
// skuTableData={skuTable}
// skuUnitList={skuUnitList}
// deleteSkuClick={deleteSkuClick}
// editSkuClick={addOrEditSkuClick}
// />
//（新）
<SkuInfo />
),
children: <SkuInfo ref={skuInfoRef} goodsDetailsInfo={goodsDetailsInfo} />,
},
{
key: '3',
......@@ -117,11 +69,14 @@ const GoodsAddOrEditOrDetail = () => {
});
break;
case '2':
if (skuTable.length) {
setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
} else {
message.warning('请添加规格');
}
skuInfoRef.current
.submitSku()
.then(() => {
setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
})
.catch(() => {
message.warning('请添加规格');
});
break;
case '3':
break;
......@@ -136,62 +91,45 @@ const GoodsAddOrEditOrDetail = () => {
const backRoute = () => {
navigate(-1);
};
//单位列表
const getSkuUnit = () => {
GoodsAPI.getSkuUnit().then(({ result }) => {
setSkuUnitList(result || []);
});
};
//商品保存
const saveGoods = () => {
baseInfoRef.current
.getForm()
.validateFields()
.then((values: baseInfoType) => {
if (skuTable.length) {
const skuList = skuTable.map((v) => ({
...v,
id: goodsDetailsInfo
? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id
: undefined,
goodsSpecValuesList: v.goodsSpecValuesList.map((i) => ({
...i,
id: goodsDetailsInfo
? goodsDetailsInfo.goodsSpecList
.find((j) => j.id === v.id)
?.goodsSpecValuesList.find((k) => k.id === i.id)?.id
: undefined,
goodsSpecId: goodsDetailsInfo
? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id
: undefined,
})),
}));
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('商品规格未添加');
}
Promise.all([
baseInfoRef.current.getForm().validateFields(),
skuInfoRef.current ? skuInfoRef.current.submitSku() : getDefaultSku(),
])
.then((values: any) => {
const addGoodsEditReq = {
...filterObjAttr(values[0], ['mainImgList', 'subImgList', 'videoList', 'categoryId']),
resourcesList: [
...values[0].mainImgList.map((v: any) => ({ type: 0, url: v.url })),
...(values[0].subImgList?.map((v: any) => ({ type: 1, url: v.url })) || []),
...(values[0].videoList?.map((v: any) => ({ type: 2, url: v.url })) || []),
],
categoryPrimaryId: values[0].categoryId[0],
categorySubId: values[0].categoryId.length === 2 ? values[0].categoryId[1] : undefined,
goodsDetails,
...values[1],
id: goodsId || undefined,
};
GoodsAPI[goodsId ? 'editMallGoods' : 'addMallGoods'](addGoodsEditReq).then(({ code }) => {
if (code === '200') {
message.success(goodsId ? '编辑商品成功' : '新增商品成功');
navigate(-1);
}
});
})
.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 = () => {
.filter((v) => v.type === 2)
.map((v) => ({ id: v.id, name: 'video', uid: v.id, url: v.url }));
setGoodsDetailsInfo(JSON.parse(JSON.stringify(result)));
setSkuTable(result.goodsSpecList);
setGoodsDetails(result.goodsDetails || '');
baseInfoRef.current.getForm().setFieldsValue({
tradeName: result.tradeName,
......@@ -228,9 +165,21 @@ const GoodsAddOrEditOrDetail = () => {
baseInfoRef.current.mediaData.setVideoFileList(videoList);
});
};
//编辑未点击规格时数据处理
const getDefaultSku = () => {
return new Promise((resolve, reject) => {
if (goodsDetailsInfo) {
resolve({
priceStock: goodsDetailsInfo.priceStock,
specAttrList: goodsDetailsInfo.specAttrList,
});
} else {
reject('请上传商品规格');
}
});
};
useEffect(() => {
getSkuUnit();
if (searchParams.get('id')) {
setGoodsId(Number(searchParams.get('id')));
getMallGoodsDetails(Number(searchParams.get('id')));
......@@ -258,14 +207,6 @@ const GoodsAddOrEditOrDetail = () => {
返回
</Button>
</div>
{/*新增、编辑sku弹窗*/}
<SkuAddOrEditModal
open={addOrEditSkuModalShow}
onCancel={addOrEditSkuModalCancel}
onHandleOk={addOrEditSkuModalOk}
skuUnitList={skuUnitList}
currentSku={currentSku}
/>
</div>
);
};
......
src/pages/mallManage/rentGoods/rentList/index.tsx → src/pages/rentManage/rentGoods/rentList/index.tsx
......@@ -188,19 +188,19 @@ const RentList = () => {
};
//新增商品
const toAddRentGoods = () => {
navigate({ pathname: '/mallManage/rentGoods/add' });
navigate({ pathname: '/rentManage/rentGoods/add' });
};
//编辑商品
const toEditGoods = (id: number) => {
navigate({
pathname: '/mallManage/rentGoods/edit',
pathname: '/rentManage/rentGoods/edit',
search: `id=${id}`,
});
};
//商品详情
const toRentGoodsDetail = (id: number) => {
navigate({
pathname: '/mallManage/rentGoods/detail',
pathname: '/rentManage/rentGoods/detail',
search: `id=${id}&isDetail=1`,
});
};
......
src/router/router.tsx
......@@ -96,10 +96,13 @@ const ServiceDetailView = React.lazy(
const ServiceIntroduceView = React.lazy(
() => 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(
() => 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 MallAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'),
......@@ -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',
element: withLoadingComponent(<MallGoodsView />),
errorElement: <ErrorPage />,
......@@ -730,25 +690,73 @@ export const routerList: Array<RouteObjectType> = [
title: '品牌管理',
},
},
// {
// path: '/mallManage/industryList',
// element: withLoadingComponent(<IndustryListView />),
// meta: {
// id: 10180,
// icon: <SmileOutlined />,
// title: '行业方案',
// },
// },
// {
// path: '/mallManage/industryDetail',
// element: withLoadingComponent(<IndustryDetailView />),
// meta: {
// id: 10190,
// icon: <SmileOutlined />,
// title: '行业详情',
// hidden: true,
// },
// },
],
},
{
path: '/rentManage',
element: <LayoutView />,
errorElement: <ErrorPage />,
meta: {
id: 10001,
icon: <ShopOutlined />,
title: '租赁管理',
develop: true,
},
children: [
{
path: '/rentManage/rentGoods',
element: withLoadingComponent(<RentListView />),
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论