Skip to content

A
admin
提交 49786f14 作者: 龚洪江
操作

功能：删除上版代码

上级 468aa2e3
正在显示 包含 0 行增加 和 443 行删除
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/old-index.tsx deleted 100644 → 0
import { Button, Popconfirm, Table, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import { FC, useState } from 'react';
import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
//商品sku规格类型
type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
//单位返回类型
type unitType = InterDataType<skuUnitType>;
interface selfProps {
addOrEditSkuClick: () => void;
skuTableData: goodsSpecType[];
skuUnitList: unitType;
deleteSkuClick: (record: goodsSpecType) => void;
editSkuClick: (record: goodsSpecType) => void;
}
const SkuInfo: FC<selfProps> = ({
addOrEditSkuClick,
skuTableData,
skuUnitList,
deleteSkuClick,
editSkuClick,
}) => {
const tableColumns: ColumnsType<goodsSpecType> = [
{
title: '序号',
align: 'center',
render: (_text: string, _record, index: number) => index + 1,
},
{
title: '规格名称',
align: 'center',
dataIndex: 'specName',
},
{
title: '选择方式',
align: 'center',
dataIndex: 'chooseType',
render: (text: number) => (text ? '多选' : '单选'),
},
{
title: '是否必选',
align: 'center',
dataIndex: 'must',
render: (text: number) => (text ? '必选' : '非必选'),
},
{
title: '规格单位',
align: 'center',
dataIndex: 'skuUnitId',
render: (text: number) => skuUnitList.find((v) => v.id === text)?.unitName || '',
},
{
title: '规格值',
align: 'center',
dataIndex: 'goodsSpecValuesList',
render: (text: goodsSpecType['goodsSpecValuesList']) =>
text.map((v) => (
<Tag key={v.id}>
{v.specValueName}
{v.partNo ? `(${v.partNo})` : ''}
</Tag>
)),
},
{
title: '操作',
align: 'center',
render: (_text: string, record) => (
<>
<Button type='link' onClick={() => editSkuClick(record)}>
编辑
</Button>
<Popconfirm
placement='topLeft'
title={'删除规格'}
description={'确认删除该规格吗？'}
onConfirm={() => deleteSkuClick(record)}
okText='确定'
cancelText='取消'
>
<Button type='link' danger>
删除
</Button>
</Popconfirm>
</>
),
},
];
const [pagination, setPagination] = useState<PaginationProps>({
pageNo: 1,
pageSize: 10,
});
//分页
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo;
pagination.pageSize = pageSize;
setPagination({ ...pagination });
};
return (
<div className='sku-info'>
<div className='sku-info-operate' style={{ margin: ' 20px 0 ' }}>
<Button
type='primary'
icon={<PlusOutlined></PlusOutlined>}
onClick={() => addOrEditSkuClick()}
>
添加规格
</Button>
</div>
<Table
bordered
columns={tableColumns}
dataSource={skuTableData.slice(
(pagination.pageNo - 1) * pagination.pageSize,
pagination.pageNo * pagination.pageSize,
)}
rowKey='id'
pagination={{
total: skuTableData.length,
pageSize: pagination.pageSize,
current: pagination.pageNo,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
</div>
);
};
export default SkuInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index-old.tsx deleted 100644 → 0
import BaseInfo from '~/components/goods/commonAddOrEdit/baseInfo';
import StockSku from '~/components/goods/commonAddOrEdit/stockSku';
import OtherInfo from '~/components/goods/commonAddOrEdit/otherInfo';
import GoodsIntroduce from '~/components/goods/commonAddOrEdit/goodsIntroduce';
import AddOrEditSkuModal from '~/components/goods/commonAddOrEdit/addOrEditSkuModal';
import { Button, message } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './index.scss';
import { useEffect, useRef, useState } from 'react';
import { CategoryManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { categoryListType } from '~/api/interface/categoryManage';
import {
customizeEntity,
detailGoodsType,
skuUnitType,
specEntity,
} from '~/api/interface/goodsType';
import goodsAPI from '~/api/modules/goodsAPI';
import { filterObjAttr } from '~/utils';
import GoodsAPI from '~/api/modules/goodsAPI';
import { UploadFile } from 'antd/es/upload/interface';
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//产品-规格单位返回类型
type unitType = InterDataType<skuUnitType>;
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
const GoodsAddOrEditOrDetail = () => {
const [searchParams] = useSearchParams();
//基本信息ref
const baseInfoRef = useRef<any>();
const navigate = useNavigate();
//当前目录
const [currentDesc, setCurrentDesc] = useState<number>(-1);
//分类
const [categoryList, setCategoryList] = useState<categoryType>([]);
//添加、编辑库存规格弹窗
const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState(false);
//库存规格数据
const [specData, setSpecData] = useState<specEntity[]>([]);
const [goodsSpecCopy, setGoodsSpecCopy] = useState<specEntity[]>([]);
//产品规格-单位
const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
//其它服务
const [otherService, setOtherService] = useState<number[]>([]);
// 当前操作行数据
const [curtRowData, setCurtRowData] = useState<Partial<specEntity>>({});
//商品详情
const [goodsDetail, setGoodsDetail] = useState<goodsDetailType>();
//产品介绍
const [productIntroduce, setProductIntroduce] = useState<string>('');
//是否商品详情
const [isDetail, setIsDetail] = useState<boolean>(false);
//添加、编辑规格
const addOrEditSkuShowEvent = (record?: specEntity) => {
const baseInfoForm = baseInfoRef.current.baseInform;
setCurrentDesc(baseInfoForm.getFieldValue('directoryId') || -1);
if (!baseInfoForm.getFieldValue('directoryId')) {
return message.warning('请先选择目录');
}
if (record) {
setCurtRowData({ ...record });
}
setAddOrEditSkuModalShow(true);
};
//删除规格
const deleteSkuEvent = (record: specEntity) => {
const index = specData.findIndex((v) => v.id === record.id);
specData.splice(index, 1);
setSpecData([...specData]);
};
const addOrEditSkuModalCancel = () => {
setAddOrEditSkuModalShow(false);
setCurtRowData({});
};
const addOrEditSkuModalOk = (data: specEntity) => {
if (Object.keys(curtRowData).length != 0) {
const index: number = specData.findIndex((i) => i.id === data.id);
specData.splice(index, 1, data);
setSpecData([...specData]);
} else {
setSpecData([...specData, data]);
}
addOrEditSkuModalCancel();
};
//根据目录获取分类列表
const getCategoryList = (directoryId: number) => {
CategoryManageAPI.getCategoryList({ directoryId, type: 4, pageSize: 9999, pageNo: 1 }).then(
({ result }) => {
setCategoryList(result.list || []);
},
);
};
//产品-单位
const getSkuUnit = () => {
goodsAPI.getSkuUnit().then(({ result }) => {
setSkuUnitList(result || []);
});
};
//其它服务选择
const otherServiceSelect = (ids: number[]) => {
setOtherService(ids);
};
//获取产品详情
const getRichText = (html?: string) => {
setProductIntroduce(html || '');
};
//商品详情
const getGoodsDetail = (goodsInfoId: number) => {
GoodsAPI.getGoodsDetail({ goodsInfoId, type: 0 }).then(({ result }) => {
setGoodsDetail(result);
getCategoryList(result.directoryId);
const specList: specEntity[] = result.goodsSpec.reduce((pre: any, cur: specEntity) => {
// 自定义
if (cur.flag === 1) {
const cusList: customizeEntity[] =
cur.productSpecList &&
cur.productSpecList.reduce((preProd: any, curProd: customizeEntity, index: number) => {
const obj: UploadFile = {
uid: `img${index}`,
status: 'done',
url: curProd.specImage,
name: 'image',
};
preProd.push({ ...curProd, fileList: [obj] });
return preProd;
}, []);
cur.customizeInfo = cusList;
} else {
const specId: number[] =
result.directoryId === 2
? cur.industrySpecList &&
cur.industrySpecList.map((curIndu: any) => {
return {
mallSpecId: curIndu.industrySpecId,
specName: curIndu.specName,
partNo: curIndu.partNo,
id: curIndu.id,
};
})
: cur.productSpecList &&
cur.productSpecList.map((item: any) => {
return {
mallSpecId: item.productSpec,
specName: item.specName,
partNo: item.partNo,
id: item.id,
};
});
cur.specIds = specId;
}
pre.push({ ...cur, productName: cur.skuName });
return pre;
}, []);
setGoodsSpecCopy(result.goodsSpec);
setOtherService(result.otherService.map((v) => v.saleServiceId));
setSpecData(specList);
});
};
//保存
const saveSubmit = () => {
const baseInfoForm = baseInfoRef.current.baseInform;
baseInfoForm.validateFields().then((values: any) => {
if (specData.length === 0) {
return message.warning('清添加库存规格');
}
//主图
values.images = [
{
imgType: 0,
imgUrl: values.mainImg[0].url,
id: goodsDetail
? goodsDetail.images.some((i) => i.id === values.mainImg[0].id)
? values.mainImg[0].id
: undefined
: undefined,
},
];
//副图
if (values.subImg) {
values.images.push(
...values.subImg.map((v: any) => ({
imgType: 1,
imgUrl: v.url,
id: goodsDetail
? goodsDetail.images.some((i) => i.id === v.id)
? v.id
: undefined
: undefined,
})),
);
}
//分类
values.categoryByOne = values.masterTypeId[0];
values.categoryByTwo = values.masterTypeId[1] || undefined;
// 过滤对象属性
const goodsSpecVO: specEntity[] = specData.reduce((pre: any, cur: specEntity) => {
cur.customizeInfo = cur.customizeInfo?.reduce((cusPre: any, cusCur: customizeEntity) => {
const bol: boolean = goodsSpecCopy.some((i: specEntity) => {
return i.customizeInfo?.some((i: customizeEntity) => i.id === cusCur.id);
});
cusPre = [
...cusPre,
bol ? filterObjAttr(cusCur, ['fileList']) : filterObjAttr(cusCur, ['id', 'fileList']),
];
return cusPre;
}, []);
// 存在对象属性改变！
cur.specIds = cur.specIds?.reduce((preSpec: any, curSpec: any) => {
preSpec = [...preSpec, filterObjAttr(curSpec, ['specName', 'partNo'])];
return preSpec;
}, []);
// 是否新增
const isAdd: boolean = goodsSpecCopy.every((i: specEntity) => i.id != cur.id);
// 是否修改了某一条
const isEdit: boolean = goodsSpecCopy.every(
(i: specEntity) => i.categoryId != cur.categoryId,
);
pre = [
...pre,
!isAdd
? isEdit
? filterObjAttr(cur, ['industrySpecList', 'productSpecList', 'skuName', 'id'])
: filterObjAttr(cur, ['industrySpecList', 'productSpecList', 'skuName'])
: filterObjAttr(cur, ['id', 'skuName']),
];
return pre;
}, []);
goodsAPI[goodsDetail ? 'editGoods' : 'addGoods']({
...filterObjAttr(values, ['mainImg', 'subImg', 'video', 'masterTypeId', 'id', 'goodsDesc']),
productSpec: goodsSpecVO,
goodsType: 0,
goodsDetailVO: { goodsDesc: values.goodsDesc, productDesc: productIntroduce },
otherService: otherService,
id: goodsDetail ? goodsDetail.id : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success(goodsDetail ? '编辑成功' : '新增成功');
navigate(-1);
}
});
});
};
//返回
const backRoute = () => {
navigate(-1);
};
useEffect(() => {
if (searchParams.get('id')) {
getGoodsDetail(Number(searchParams.get('id')));
}
setIsDetail(!!searchParams.get('isDetail'));
getSkuUnit();
}, []);
return (
<div className='goods-info'>
{/* 基本信息*/}
<BaseInfo
ref={baseInfoRef}
categoryList={categoryList}
getCategoryList={getCategoryList}
goodsDetail={goodsDetail}
isDetail={isDetail}
goodsType={0}
/>
{/* 库存规格*/}
<StockSku
addOrEditSku={addOrEditSkuShowEvent}
specData={specData}
skuUnitList={skuUnitList}
deleteSku={deleteSkuEvent}
isDetail={isDetail}
/>
{/*其它信息*/}
<OtherInfo
otherServiceSelect={otherServiceSelect}
goodsDetail={goodsDetail}
isDetail={isDetail}
/>
{/*产品介绍图*/}
<GoodsIntroduce getRichText={getRichText} goodsDetail={goodsDetail} isDetail={isDetail} />
{/*库存规格，添加、编辑弹窗*/}
<AddOrEditSkuModal
currentDesc={currentDesc}
open={addOrEditSkuModalShow}
handleCancel={addOrEditSkuModalCancel}
handleOk={addOrEditSkuModalOk}
skuUnitList={skuUnitList}
curtRowData={curtRowData}
goodsType={0}
/>
<div className='goods-info-operate'>
{!isDetail && (
<Button type='primary' onClick={saveSubmit}>
保存
</Button>
)}
<Button onClick={backRoute}>返回</Button>
</div>
</div>
);
};
export default GoodsAddOrEditOrDetail;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论