Skip to content

A
admin
提交 e0bc6424 作者: 龚洪江
操作

修复：跨域代理，商品页面

上级 746a63de
正在显示 包含 998 行增加 和 78 行删除
env/.env.development
#请求接口地址 #请求接口地址
#VITE_REQUEST_BASE_URL='https://www.iuav.shop' #VITE_REQUEST_BASE_URL='https://www.iuav.shop'
VITE_REQUEST_BASE_URL='https://test.iuav.shop' VITE_REQUEST_BASE_URL='/api'
#旧版接口地址 #旧版接口地址
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
#VITE_REQUEST_BASE_URL='https://test.iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://test.iuav.mmcuav.cn'
......
src/api/modules/produceManageAPI.ts
...@@ -30,4 +30,18 @@ export class ProduceManageAPI { ...@@ -30,4 +30,18 @@ export class ProduceManageAPI {
static editProductSku = (data: unknown) => { static editProductSku = (data: unknown) => {
return axios.post('uavgoods/product/spec/editProductSku', data); return axios.post('uavgoods/product/spec/editProductSku', data);
}; };
// 产品规格管理---删除规格
static removeProductSpec = (params: unknown) => {
return axios.get('uavgoods/product/spec/removeProductSpec', { params });
};
// 产品sku管理-编辑单个产品sku时的信息回显
static getProductSkuDetail = (params: unknown) => {
return axios.get('uavgoods/product/spec/getProductSkuDetail', { params });
};
// 产品sku管理-产品规格管理-分页列表
static listPageProductSpec = (params: unknown) => {
return axios.get('uavgoods/product/spec/listPageProductSpec', { params });
};
} }
src/common/hook/optionHook/index.tsx
import { useEffect, useState } from 'react';
import { RoleAPI } from '@/api';
import { limitEntity } from '@/api/modules/role'; import { limitEntity } from '@/api/modules/role';
function useOptionShow(id: number) { function useOptionShow(id: number) {
// const [show, setShow] = useState<boolean>(false);
return (JSON.parse(localStorage.getItem('routeList') as string) || []).some( return (JSON.parse(localStorage.getItem('routeList') as string) || []).some(
(v: limitEntity) => v.id === id, (v: limitEntity) => v.id === id,
); );
// useEffect(() => {
// RoleAPI.getListCuserMenuInfo().then((res: any) => {
// const bol: boolean = res.result.some((v: limitEntity) => v.id === id);
// setShow(bol);
// });
// }, []);
// return show;
} }
export default useOptionShow; export default useOptionShow;
src/components/goods/commonGoodsList/index.tsx 0 → 100644
import SearchBox, { searchColumns } from '~/components/search-box';
import { useState } from 'react';
import { Button, Card, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
DeleteOutlined,
PlusOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
const GoodsList = () => {
const tabList = [
{
key: '1',
tab: '全部',
},
{
key: '2',
tab: '上架中',
},
{
key: '3',
tab: '仓库中',
},
];
const [activeTabKey, setActiveTabKey] = useState<string>('1');
const [searchColumns] = useState<searchColumns[]>([
{
label: '商品名称',
placeholder: '请输入商品名称',
name: '',
type: 'input',
},
{
label: '所属目录',
placeholder: '请选择所属目录',
name: '',
type: 'select',
options: [],
},
{
label: '创建时间',
placeholder: '请输入选择创建时间',
name: '',
type: 'rangePicker',
},
]);
const tableColumns: ColumnsType<any> = [
{ title: '序号', align: 'center' },
{ title: '图片', align: 'center' },
{ title: '商品名称', align: 'center' },
{ title: '所属目录', align: 'center' },
{ title: '创建时间', align: 'center' },
{ title: '状态', align: 'center' },
{
title: '操作',
align: 'center',
render: () => (
<>
<Button type='link'>编辑</Button>
<Button type='link'>详情</Button>
</>
),
},
];
const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
const onTabChange = (key: string) => {
setActiveTabKey(key);
};
return (
<div className='goods-list'>
<SearchBox
search={searchColumns}
child={
<Button type='primary' icon={<PlusOutlined />}>
新增商品
</Button>
}
/>
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上架
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下架
</Button>
<Button danger icon={<DeleteOutlined />}>
删除
</Button>
</div>
<Table columns={tableColumns} bordered dataSource={tableData} />
</Card>
</div>
);
};
export default GoodsList;
src/pages/mallManage/industryManage/industryDetail/index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import qs from 'query-string';
import { Button, Descriptions, message, Table } from 'antd';
import { useNavigate } from 'react-router-dom';
import { ColumnsType } from 'antd/es/table';
// import { ListModal } from '@/pages/goodsManage/industryManage/comp/listModal';
// import { PriceModal } from '@/pages/goodsManage/industryManage/comp/priceModal';
// import { AddEditDetailModal } from '@/pages/goodsManage/industryManage/comp/addEditDetailModal';
import useOption from '~/common/hook/optionHook';
import { IndustryManageAPI } from '~/api';
import { IndustrySkuType, IndustrySpecType, inventoryType } from '../industryList/propsType';
// import DeleteModal from '@/components/DeleteModal';
// eslint-disable-next-line react/no-unused-prop-types
function IndustryDetail(props: any) {
// const productSkuId = Number(qs.parse(props.location.search).id);
const navigate = useNavigate();
// 行业列表对象
const [industryTypeObj, setIndustryTypeObj] = useState<{}>({});
// 产品类型对象
const [productTypeObj, setProductTypeObj] = useState<{}>({});
// 基本信息
const [detailData, setDetailData] = useState<IndustrySkuType>();
// 表格数据
const [tableData, setTableData] = useState<IndustrySpecType[]>([]);
// 图片是否放大
const [visibleImg, setVisibleImg] = useState<boolean>(false);
// 当前放大图片
const [currentImgList, setCurrentImgList] = useState<{ src: string }[]>([]);
// 产品清单弹窗显示
const [visibleList, setVisibleList] = useState<boolean>(false);
// 产品规格清单
const [listData, setListData] = useState<inventoryType[]>([]);
// 配置价格弹窗显示
const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
// 当前配置价格数据
const [priceData, setPriceData] = useState([]);
// 新增编辑规格弹窗是否显示
const [visibleAddEdit, setVisibleAddEdit] = useState<boolean>(false);
// 删除行业规格弹窗是否显示
const [visibleDeleteSpec, setVisibleDeleteSpec] = useState<boolean>(false);
// 当前行业规格id
const [industrySpecId, setIndustrySpecId] = useState<number>();
// 新增编辑规格弹窗数据
const [addEditData, setAddEditData] = useState<IndustrySpecType>({
createTime: '',
id: 0,
industrySkuId: 0,
list: [],
specImage: '',
specName: '',
productSkuId: 0,
});
// 按钮权限
const btnAdd = useOption(22205);
const btnSetPrice = useOption(22206);
const btnEdit = useOption(22207);
const btnDelete = useOption(22208);
// 预览图片
const previewImage = (url: string) => {
setVisibleImg(true);
setCurrentImgList([{ src: url }]);
};
// 关闭图片放大
const setVisibleEvent = () => {
setVisibleImg(false);
};
// 查看产品清单
const handleList = async (id: number) => {
const obj = await getIndustrySpecDetail(id);
setListData(obj?.list || []);
setVisibleList(true);
};
// 关闭产品清单
const handleListClosed = () => {
setListData([]);
setVisibleList(false);
};
// 打开配置价格弹窗
const handlePrice = (arr: any) => {
setPriceData(arr);
setVisiblePrice(true);
};
// 关闭配置价格弹窗
const handlePriceClosed = () => {
setPriceData([]);
setVisiblePrice(false);
};
// 打开新增弹窗
const handleAdd = () => {
setAddEditData({
createTime: undefined,
id: 0,
productSkuId,
industrySkuId: 0,
list: [],
specImage: '',
specName: '',
});
setVisibleAddEdit(true);
};
// 打开编辑弹窗
const handleEdit = async (id: number) => {
const obj: any = await getIndustrySpecDetail(id);
setAddEditData({ ...obj, productSkuId });
setVisibleAddEdit(true);
};
// 关闭新增编辑弹窗
const handleAddEditClosed = async (isRefresh: boolean) => {
// setAddEditData({ id: 0, img: "", list: [], name: "" });
setVisibleAddEdit(false);
if (isRefresh) {
await getDetailData();
await getTableList();
}
};
// 打开删除行业规格弹窗
const openDeleteDialog = (id: number) => {
setVisibleDeleteSpec(true);
setIndustrySpecId(id);
};
// 关闭删除行业规格弹窗
const handleDeleteSpecClosed = () => {
setVisibleDeleteSpec(false);
};
// 删除行业规格
const handleDeleteSpec = async () => {
const res: any = await IndustryManageAPI.removeIndustrySpec({ id: industrySpecId });
if (res.code === '200') {
if (res.result) {
message.info({
content: (
<div style={{ textAlign: 'left' }}>
{res.result.goodsName && (
<div>
<div style={{ color: 'red' }}>删除失败，已被商品关联</div>
<div style={{ display: 'flex' }}>
<div>关联的商品为：</div>
<div>{res.result.goodsName.join('、')}</div>
</div>
</div>
)}
</div>
),
// className: "custom-class",
duration: 3,
});
} else {
message.success('操作成功');
getTableList().then();
}
handleDeleteSpecClosed();
} else {
message.error(res.message);
handleDeleteSpecClosed();
}
};
// 表格结构
const columns: ColumnsType<IndustrySpecType> = [
{ title: '规格名称', dataIndex: 'specName', align: 'center' },
{
title: '规格图片',
dataIndex: 'specImage',
align: 'center',
render: (text: string) => {
return (
<img
style={{ width: '50px', height: '50px' }}
src={text}
alt='图片'
onClick={() => {
previewImage(text);
}}
/>
);
},
},
{
title: '产品清单',
dataIndex: 'id',
align: 'center',
render: (id: number) => {
return (
<Button type='link' onClick={() => handleList(id)}>
查看产品清单
</Button>
);
},
},
{
title: '操作',
align: 'center',
width: '250px',
render: (text: string, record: IndustrySpecType) => {
return (
<div>
{btnSetPrice ? (
<Button
type='link'
onClick={() => {
handlePrice(record);
}}
>
配置价格
</Button>
) : (
''
)}
{btnEdit ? (
<Button
type='link'
onClick={() => {
handleEdit(record.id);
}}
>
编辑
</Button>
) : (
''
)}
{btnDelete ? (
<Button
type='link'
onClick={() => {
openDeleteDialog(record.id);
}}
>
删除
</Button>
) : (
''
)}
</div>
);
},
},
];
// 表格分页配置
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 获取所属行业下拉列表
const getFirstIndustryTypeInfo = async () => {
const res: any = await IndustryManageAPI.getFirstIndustryTypeInfo({});
if (res && res.code === '200') {
const obj = res.result.reduce((prev: any, curt: any) => {
prev[curt.goodsMasterTypeId] = curt.goodsMasterType;
return prev;
}, {});
setIndustryTypeObj(obj);
}
};
// 获取产品类型
const getFirstProductTypeInfo = async () => {
const res: any = await IndustryManageAPI.getFirstProductTypeInfo({});
if (res && res.code === '200') {
const obj = res.result.reduce((prev: any, curt: any) => {
prev[curt.goodsMasterTypeId] = curt.goodsMasterType;
return prev;
}, {});
setProductTypeObj(obj);
}
};
// 获取产品清单详情
const getIndustrySpecDetail = async (id: number) => {
const res: any = await IndustryManageAPI.getIndustrySpecDetail({
industrySpecId: id,
});
if (res && res.code === '200') {
const { specImage, specName, productInventoryList, createTime, id, industrySkuId } =
res.result;
const list =
productInventoryList &&
productInventoryList.map((item: inventoryType) => {
return {
...item.productSku,
sku: item.productSpecList,
radio: item.select,
typeName: productTypeObj[item.productSku.goodsTypeId as keyof typeof productTypeObj],
id: item.productSkuId,
};
});
// console.log("当前数据--->", list);
const obj = { list, specImage, specName, createTime, id, industrySkuId };
return obj;
}
};
useEffect(() => {
// const sku: SkuType[] = [1, 2, 3].map((i, j) => {
// return {
// id: [469, 466, 458][j],
// name: `入云龙【红黑】${i}`,
// img:
// i % 2 === 1
// ? "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/test111.gif"
// : "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/111.gif",
// desc: "上盖丝印",
// no: "3.1.29.0068-G",
// };
// });
// const list: ArrType[] = [1, 2, 3, 4].map((i, j) => {
// return {
// id: i,
// skuId: [
// "772189430646845440",
// "771012649717870592",
// "771037713385402368",
// "771016084857040896",
// ][j],
// name: `入云龙${i}`,
// type: "无人机",
// num: "SN_000001",
// brand: "科比特",
// radio: j % 2 === 1 ? 1 : 2,
// sku: j % 2 === 1 ? [] : sku,
// };
// });
// const arr: ListType[] = [1, 2, 3, 4, 5].map((i) => {
// return {
// id: i,
// name: `升级方案${i}`,
// img:
// i % 2 === 1
// ? "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/test111.gif"
// : "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/111.gif",
// list,
// };
// });
// console.log("数据源 --->", arr);
// setTableData(arr);
(async () => {
// await getFirstIndustryTypeInfo();
// await getFirstProductTypeInfo();
// await getDetailData();
// await getTableList();
})();
}, []);
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// 获取方案规格数据
const getTableList = async (value = {}) => {
const res: any = await IndustryManageAPI.listPageIndustrySpec({
pageNo: pagination.current,
pageSize: pagination.pageSize,
productSkuId,
});
if (res && res.code === '200') {
setTableData(res.result.list || []);
}
};
// 获取基本信息
const getDetailData = async () => {
const { id } = qs.parse(props.location.search);
const res: any = await IndustryManageAPI.getIndustrySkuDetail({ id });
if (res && res.code === '200') {
setDetailData(res.result);
}
};
return (
<div className='detail-wrap'>
<Descriptions
title='一、基本信息'
bordered
column={1}
size='middle'
labelStyle={{ width: '200px' }}
style={{ width: '100%' }}
extra={
<Button type='primary' onClick={handleBack}>
返回
</Button>
}
>
<Descriptions.Item label='方案名称'>{detailData?.solutionName}</Descriptions.Item>
<Descriptions.Item label='所属行业'>
{' '}
{industryTypeObj[detailData?.goodsTypeId as keyof typeof industryTypeObj] || ''}
</Descriptions.Item>
<Descriptions.Item label='描述'>{detailData?.description}</Descriptions.Item>
</Descriptions>
<Descriptions
title='二、方案规格'
column={1}
size='middle'
labelStyle={{ width: '200px' }}
style={{ marginTop: '20px' }}
>
{btnAdd ? (
<Descriptions.Item>
<Button type='primary' onClick={handleAdd}>
新增规格
</Button>
</Descriptions.Item>
) : (
''
)}
<Descriptions.Item>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
style={{ width: '100%' }}
bordered
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
// onChange: (page: number, pageSize: number) =>
// paginationChange(page, pageSize),
showTotal: (total, range) =>
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
</Descriptions.Item>
</Descriptions>
{/*<ListModal visible={visibleList} closed={handleListClosed} data={listData} />*/}
{/*<PriceModal visible={visiblePrice} closed={handlePriceClosed} data={priceData} />*/}
{/*<AddEditDetailModal*/}
{/* visible={visibleAddEdit}*/}
{/* closed={handleAddEditClosed}*/}
{/* data={addEditData}*/}
{/*/>*/}
{/*<DeleteModal*/}
{/* visible={visibleDeleteSpec}*/}
{/* onCancel={handleDeleteSpecClosed}*/}
{/* onOK={handleDeleteSpec}*/}
{/*/>*/}
</div>
);
}
export default IndustryDetail;
src/pages/mallManage/industryManage/industryList/index.tsx
...@@ -23,7 +23,7 @@ function IndustryList() { ...@@ -23,7 +23,7 @@ function IndustryList() {
// 路由操作 // 路由操作
const navigate = useNavigate(); const navigate = useNavigate();
// 表格数据 // 表格数据
const [tableData, setTableData] = useState<IndustrySkuType[]>([]); const [tableData, setTableData] = useState<any>([{ id: 1 }]);
// 加载中 // 加载中
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
// 行业列表 // 行业列表
...@@ -33,7 +33,7 @@ function IndustryList() { ...@@ -33,7 +33,7 @@ function IndustryList() {
// 跳转详情 // 跳转详情
const handleDetail = (record: { id: number }) => { const handleDetail = (record: { id: number }) => {
navigate({ navigate({
pathname: '/goodsManage/industryManage/detail', pathname: '/mallManage/industryDetail',
search: `id=${record.id}`, search: `id=${record.id}`,
}); });
// console.log(record); // console.log(record);
...@@ -69,27 +69,15 @@ function IndustryList() { ...@@ -69,27 +69,15 @@ function IndustryList() {
render: (text: string, record) => { render: (text: string, record) => {
return ( return (
<div> <div>
{btnDetail ? ( <Button type='link' onClick={() => handleDetail(record)}>
<Button type='link' onClick={() => handleDetail(record)}> 详情
详情 </Button>
</Button> <Button type='link' onClick={() => handleEdit(record)}>
) : ( 编辑
'' </Button>
)} <Button type='link' onClick={() => openDeleteModal(record)}>
{btnEdit ? ( 删除
<Button type='link' onClick={() => handleEdit(record)}> </Button>
编辑
</Button>
) : (
''
)}
{btnDelete ? (
<Button type='link' onClick={() => openDeleteModal(record)}>
删除
</Button>
) : (
''
)}
</div> </div>
); );
}, },
...@@ -234,11 +222,11 @@ function IndustryList() { ...@@ -234,11 +222,11 @@ function IndustryList() {
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
query = {}; // query = {};
(async () => { // (async () => {
await getFirstIndustryTypeInfo(); // await getFirstIndustryTypeInfo();
await getTableList(); // await getTableList();
})(); // })();
}, []); }, []);
return ( return (
......
src/pages/mallManage/mallGoods/goodsList/index.tsx 0 → 100644
import CommonGoodsList from '~/components/goods/commonGoodsList';
const GoodsList = () => {
return (
<div className='goods-list'>
<CommonGoodsList />
</div>
);
};
export default GoodsList;
src/pages/mallManage/produceManage/produceDetail/index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import qs from 'query-string';
import { Button, Descriptions, message, Table, Modal } from 'antd';
import { ColumnsType } from 'antd/es/table';
// import { PriceModal } from '@/pages/goodsManage/productManage/comp/priceModal';
// import { AddEditDetailModal } from '@/pages/goodsManage/productManage/comp/addEditDetailModal';
import useOption from '~/common/hook/optionHook';
import { ProductSkuType, ProductSpecType } from '../produceList/propsType';
import { ProduceManageAPI } from '~/api';
const { confirm } = Modal;
function ProduceDetail(props: any) {
// 基本信息
const [detailData, setDetailData] = useState<ProductSkuType>();
// 表格数据
const [tableData, setTableData] = useState<ProductSpecType[]>([]);
// 图片是否放大
const [visibleImg, setVisibleImg] = useState<boolean>(false);
// 当前放大图片
const [currentImgList, setCurrentImgList] = useState<{ src: string }[]>([]);
// 产品清单弹窗显示
const [visibleList, setVisibleList] = useState<boolean>(false);
// 当前放大图片
const [listData, setListData] = useState([]);
// 配置价格弹窗显示
const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
// 当前配置价格数据
const [priceData, setPriceData] = useState([]);
// 配置价格弹窗显示
const [visibleAddEdit, setVisibleAddEdit] = useState<boolean>(false);
// 当前配置价格数据
const [addEditData, setAddEditData] = useState<ProductSpecType>();
// 按钮权限
const btnAdd = useOption(22155);
const btnSetPrice = useOption(22156);
const btnEdit = useOption(22157);
const btnDelete = useOption(22158);
// 预览图片
const previewImage = (url: string) => {
setVisibleImg(true);
setCurrentImgList([{ src: url }]);
};
// 关闭图片放大
const setVisibleEvent = () => {
setVisibleImg(false);
};
// 查看产品清单
const handleList = (arr: any) => {
setListData(arr);
setVisibleList(true);
};
// 关闭产品清单
const handleListClosed = () => {
setListData([]);
setVisibleList(false);
};
// 打开配置价格弹窗
const handlePrice = (arr: any) => {
setPriceData(arr);
setVisiblePrice(true);
};
// 关闭配置价格弹窗
const handlePriceClosed = () => {
setPriceData([]);
setVisiblePrice(false);
};
// 打开新增弹窗
const handleAdd = () => {
const { id } = qs.parse(props.location.search);
setAddEditData({
createTime: '',
id: 0,
partNo: '',
productSkuId: id as unknown as number,
specImage: '',
specName: '',
versionDesc: '',
});
setVisibleAddEdit(true);
};
// 打开编辑弹窗
const handleEdit = (arr: ProductSpecType) => {
setAddEditData(arr);
setVisibleAddEdit(true);
};
// 关闭新增编辑弹窗
const handleAddEditClosed = () => {
paginationChange(pagination.current, pagination.pageSize);
setAddEditData(undefined);
setVisibleAddEdit(false);
};
// 删除产品
const handleDelete = (record: ProductSpecType) => {
confirm({
title: '提示',
content: '删除后此数据将会丢失，确定删除吗？',
async onOk() {
const res: any = await ProduceManageAPI.removeProductSpec({ id: record.id });
if (res.code !== '200') {
return message.error(res.message);
}
if (!res.result) {
await message.success('操作成功');
await paginationChange(pagination.current, pagination.pageSize);
return;
}
message.info({
content: (
<div style={{ textAlign: 'left' }}>
{res.result.goodsName && (
<div>
<div style={{ color: 'red' }}>删除失败，已被商品关联</div>
<div>关联商品为： {res.result.goodsName.join(',')}</div>
</div>
)}
{res.result.industrySkuName && (
<div>
<div style={{ color: 'red' }}>删除失败，已被方案关联</div>
<div>关联方案SKU为： {getTipInfo(res.result.industrySkuName)}</div>
</div>
)}
</div>
),
duration: 2,
// key: date,
// onClick: () => {
// message.destroy(date);
// },
});
},
});
};
// 表格结构
const columns: ColumnsType<ProductSpecType> = [
{ title: '规格名称', dataIndex: 'specName', align: 'center' },
{
title: '规格图片',
dataIndex: 'specImage',
align: 'center',
render: (text: string) => {
return (
<img
style={{ width: '50px', height: '50px' }}
src={text}
alt='图片'
onClick={() => {
previewImage(text);
}}
/>
);
},
},
{ title: '版本描述', dataIndex: 'versionDesc', align: 'center' },
{ title: '料号', dataIndex: 'partNo', align: 'center' },
{
title: '操作',
align: 'center',
width: '250px',
render: (text: string, record: ProductSpecType) => {
return (
<div>
{btnSetPrice ? (
<Button
type='link'
onClick={() => {
handlePrice(record);
}}
>
配置价格
</Button>
) : (
''
)}
{btnEdit ? (
<Button
type='link'
onClick={() => {
handleEdit(record);
}}
>
编辑
</Button>
) : (
''
)}
{btnDelete ? (
<Button type='link' onClick={() => handleDelete(record)}>
删除
</Button>
) : (
''
)}
</div>
);
},
},
];
// 表格分页配置
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 获取基本信息
const getDetailData = async () => {
const { id } = qs.parse(props.location.search);
const res: any = await ProduceManageAPI.getProductSkuDetail({ id });
if (res && res.code === '200') {
setDetailData(res.result);
}
};
// 获取表格数据
// 新版通用部分(ES6+ for React) ZhangLK 2022/08/30 Start
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
const res: any = await ProduceManageAPI.listPageProductSpec({
pageNo: pagination.current,
pageSize: pagination.pageSize,
...value,
productSkuId: qs.parse(props.location.search).id,
});
if (res && res.code === '200') {
// console.log("res -->", res);
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({
total: totalCount,
pageSize,
current: pageNo,
totalPage,
});
setTableData(list);
} else {
message.warning(res.message);
}
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
};
// 返回上一页
const handleBack = () => {
history.go(-1);
};
// 获取提示信息
const getTipInfo = (data: any) => {
return data.map((v: any) => `${v.industrySkuName}(${v.industrySpecNames})`).join('、');
};
useEffect(() => {
// if (!props.location.search) return;
// getDetailData().then();
// getTableList().then();
}, []);
return (
<div className='detail-wrap'>
<Descriptions
title='一、基本信息'
bordered
column={1}
size='middle'
labelStyle={{ width: '200px' }}
style={{ width: '100%' }}
extra={
<Button type='primary' onClick={handleBack}>
返回
</Button>
}
>
<Descriptions.Item label='产品名称'>{detailData?.productName}</Descriptions.Item>
<Descriptions.Item label='产品目录'>{detailData?.directoryName}</Descriptions.Item>
<Descriptions.Item label='产品类型'>{detailData?.typeName}</Descriptions.Item>
<Descriptions.Item label='型号'>{detailData?.model}</Descriptions.Item>
<Descriptions.Item label='产品品牌'>{detailData?.productBrand}</Descriptions.Item>
</Descriptions>
<Descriptions
title='二、方案规格'
column={1}
size='middle'
labelStyle={{ width: '200px' }}
style={{ marginTop: '20px' }}
>
{btnAdd ? (
<Descriptions.Item>
<Button type='primary' onClick={handleAdd}>
新增规格
</Button>
</Descriptions.Item>
) : (
''
)}
<Descriptions.Item>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
style={{ width: '100%' }}
bordered
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) =>
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
</Descriptions.Item>
</Descriptions>
{/*<PriceModal visible={visiblePrice} closed={handlePriceClosed} data={priceData} />*/}
{/*<AddEditDetailModal*/}
{/* visible={visibleAddEdit}*/}
{/* closed={handleAddEditClosed}*/}
{/* data={addEditData}*/}
{/*/>*/}
</div>
);
}
export default ProduceDetail;
src/pages/mallManage/produceManage/produceList/index.tsx
...@@ -24,7 +24,7 @@ function ProduceManage() { ...@@ -24,7 +24,7 @@ function ProduceManage() {
// 路由操作 // 路由操作
const navigate = useNavigate(); const navigate = useNavigate();
// 表格数据 // 表格数据
const [tableData, setTableData] = useState<ProductSkuType[]>([]); const [tableData, setTableData] = useState<any>([{ id: 1 }]);
// 加载中 // 加载中
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
// 产品类型下拉列表 // 产品类型下拉列表
...@@ -42,7 +42,7 @@ function ProduceManage() { ...@@ -42,7 +42,7 @@ function ProduceManage() {
// 跳转详情 // 跳转详情
const handleDetail = (record: ProductSkuType) => { const handleDetail = (record: ProductSkuType) => {
navigate({ navigate({
pathname: '/goodsManage/productManage/detail', pathname: '/mallManage/produceDetail',
search: `id=${record.id}`, search: `id=${record.id}`,
}); });
}; };
...@@ -104,27 +104,15 @@ function ProduceManage() { ...@@ -104,27 +104,15 @@ function ProduceManage() {
render: (text: string, record) => { render: (text: string, record) => {
return ( return (
<div> <div>
{btnDetail ? ( <Button type='link' onClick={() => handleDetail(record)}>
<Button type='link' onClick={() => handleDetail(record)}> 详情
详情 </Button>
</Button> <Button type='link' onClick={() => handleEdit(record)}>
) : ( 编辑
'' </Button>
)} <Button type='link' onClick={() => handleDelete(record)}>
{btnEdit ? ( 删除
<Button type='link' onClick={() => handleEdit(record)}> </Button>
编辑
</Button>
) : (
''
)}
{btnDelete ? (
<Button type='link' onClick={() => handleDelete(record)}>
删除
</Button>
) : (
''
)}
</div> </div>
); );
}, },
...@@ -220,12 +208,12 @@ function ProduceManage() { ...@@ -220,12 +208,12 @@ function ProduceManage() {
}; };
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
query = {}; // query = {};
getMakeList(); // getMakeList();
getDescList(); // getDescList();
(async () => { // (async () => {
await getTableList(); // await getTableList();
})(); // })();
}, []); }, []);
return ( return (
......
src/pages/mallManage/rentGoods/rentList/index.tsx 0 → 100644
import CommonGoodsList from '~/components/goods/commonGoodsList';
const RentList = () => {
return (
<div className='rent-list'>
<CommonGoodsList />
</div>
);
};
export default RentList;
src/router/router.tsx
...@@ -36,18 +36,25 @@ import CustomMoneyView from '~/pages/customManage/customMoney'; ...@@ -36,18 +36,25 @@ import CustomMoneyView from '~/pages/customManage/customMoney';
import CustomMoneyDetail from '~/pages/customManage/customMoney/detail'; import CustomMoneyDetail from '~/pages/customManage/customMoney/detail';
// 活动 // 活动
const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理 const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
// 服务
const ServiceListView = React.lazy(() => import('~/pages/mallManage/serviceManage/serviceList')); //商品管理
const ServiceListView = React.lazy(() => import('~/pages/mallManage/serviceManage/serviceList')); //服务列表
const ServiceDetailView = React.lazy( const ServiceDetailView = React.lazy(
() => import('~/pages/mallManage/serviceManage/serviceDetail'), () => import('~/pages/mallManage/serviceManage/serviceDetail'),
); ); //服务详情
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 ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList')); const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
// 行业 const ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList')); //产品列表
const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); const ProduceDetailView = React.lazy(
() => import('~/pages/mallManage/produceManage/produceDetail'),
); //产品详情
const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
const IndustryDetailView = React.lazy(
() => import('~/pages/mallManage/industryManage/industryDetail'),
); //行业详情
// 订单 // 订单
const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单 const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
...@@ -202,23 +209,61 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -202,23 +209,61 @@ export const routerList: Array<RouteObjectType> = [
}, },
}, },
{ {
path: '/mallManage/rentList',
element: withLoadingComponent(<RentListView />),
meta: {
id: 10130,
icon: <SmileOutlined />,
title: '租赁商品',
},
},
{
path: '/mallManage/mallGoods',
element: withLoadingComponent(<MallGoodsView />),
meta: {
id: 10140,
icon: <SmileOutlined />,
title: '商城商品',
},
},
{
path: '/mallManage/produceList', path: '/mallManage/produceList',
element: withLoadingComponent(<ProduceListView />), element: withLoadingComponent(<ProduceListView />),
meta: { meta: {
id: 10130, id: 10150,
icon: <SmileOutlined />, icon: <SmileOutlined />,
title: '产品管理', title: '产品管理',
}, },
}, },
{ {
path: '/mallManage/produceDetail',
element: withLoadingComponent(<ProduceDetailView />),
meta: {
id: 10160,
icon: <SmileOutlined />,
title: '产品详情',
hidden: true,
},
},
{
path: '/mallManage/industryList', path: '/mallManage/industryList',
element: withLoadingComponent(<IndustryListView />), element: withLoadingComponent(<IndustryListView />),
meta: { meta: {
id: 10140, id: 10170,
icon: <SmileOutlined />, icon: <SmileOutlined />,
title: '行业方案', title: '行业方案',
}, },
}, },
{
path: '/mallManage/industryDetail',
element: withLoadingComponent(<IndustryDetailView />),
meta: {
id: 10180,
icon: <SmileOutlined />,
title: '行业详情',
hidden: true,
},
},
], ],
}, },
{ {
......
vite.config.ts
...@@ -9,6 +9,13 @@ export default defineConfig({ ...@@ -9,6 +9,13 @@ export default defineConfig({
plugins: [react(), tsconfigPaths()], plugins: [react(), tsconfigPaths()],
server: { server: {
host: '0.0.0.0', host: '0.0.0.0',
proxy: {
'/api': {
target: 'https://test.iuav.shop',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
}, },
envDir: resolve(__dirname, 'env'), envDir: resolve(__dirname, 'env'),
resolve: { resolve: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论