Skip to content

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

联调：行业方案，品牌，产品管理联调

上级 66945260
正在显示 包含 831 行增加 和 173 行删除
src/api/interface.ts
// 分页通用接口
export interface PaginationProps {
pageSize?: number;
pageNo?: number;
pageSize: number;
pageNo: number;
}
// 通用返回接口(分页)
......@@ -39,17 +39,17 @@ export interface ResponseType<D> {
// 通用接口封装函数(分页) 建议用这个
export interface InterListFunction<D extends object, T> {
(req: D & PaginationProps): Promise<ResponseListType<T>>;
(req: D & Partial<PaginationProps>): Promise<ResponseListType<T>>;
}
// 通用接口封装函数(不分页) 建议用这个
export interface InterFunction<D extends object, T> {
(req: D): Promise<ResponseType<T>>;
(req?: D): Promise<ResponseType<T>>;
}
// 通用接口封装函数(分页了，但又没有分页) 建议用这个
export interface InterItemFunction<D extends object, T> {
(req: D & PaginationProps): Promise<ResponseItemType<T>>;
(req: D & Partial<PaginationProps>): Promise<ResponseItemType<T>>;
}
// 返回类型封装
......
src/api/interface/produceManageType.ts
import { InterItemFunction } from '~/api/interface';
import { InterFunction, InterItemFunction } from '~/api/interface';
export type MakeListType = InterItemFunction<
any,
......@@ -31,6 +31,54 @@ export type productListType = InterItemFunction<
}[];
}[]
>;
//产品-新增
export type addProductType = InterFunction<
{
categoryId: number;
directoryId: number;
model: string;
productBrandId: number;
productName: string;
},
null
>;
//产品-编辑
export type editProductType = InterFunction<
{
categoryId: number;
directoryId: number;
model: string;
productBrandId: number;
productName: string;
id?: number;
},
any
>;
//产品-删除
export type deleteProductType = InterFunction<{ id: number }, null>;
//产品-详情
export type productDetailType = InterFunction<
{ id: number },
{
id: number;
productName: string;
productBrandId: number;
productBrand: string;
model: string;
categoriesId: number;
categoryName: string;
directoryId: number;
directoryName: string;
productSpecList: {
id: number;
partNo: string;
specImage: string;
specName: string;
versionDesc: string;
productSkuId: number;
}[];
}
>;
//产品-规格-列表
export type ProductSpecListType = InterItemFunction<
{ productSkuId: number },
......@@ -43,3 +91,55 @@ export type ProductSpecListType = InterItemFunction<
productSkuId: number;
}[]
>;
//产品-规格-新增
export type productSpecAddType = InterFunction<
{
partNo: string;
productSkuId: number;
specImage: string;
specName: string;
versionDesc: string;
},
null
>;
//产品-规格-编辑
export type productSpecEditType = InterFunction<
{
partNo: string;
productSkuId: number;
specImage: string;
specName: string;
versionDesc: string;
id?: number;
},
null
>;
//产品-规格-删除
export type productSpecDeleteType = InterFunction<{ id: number }, any>;
//产品-规格-配置价格
export type productSpecPriceType = InterFunction<
{
leaseTerm?: number;
productSpecId?: number;
specPrice: { cooperationTag: number; price: number }[];
type: number;
},
null
>;
//产品-规格-获取配置价格
export type getProductSpecPriceType = InterFunction<
{ leaseTerm?: number; productSpecId?: number; type: number },
{ id: number; cooperationTag: number; price: number; leaseTerm: number }[]
>;
//产品-规格-配置价格修改
export type editProductSpecPriceType = InterFunction<
{
leaseTerm?: number;
productSpecId?: number;
specPrice: { cooperationTag: number; price: number }[];
type: number;
},
null
>;
//加盟标签-列表
export type cooperationTagType = InterFunction<any, { id: number; tagName: string }[]>;
src/api/modules/categoryManage.ts
import axios from '../request';
import { categoryListType, GoodsInfo } from '~/api/interface/categoryManage';
import { categoryListType, directoryListType, GoodsInfo } from '~/api/interface/categoryManage';
export class CategoryManageAPI {
// 分类目录
......@@ -8,6 +8,10 @@ export class CategoryManageAPI {
params,
});
};
// 分类目录(类型)
static getDirectoryListClone: directoryListType = (params) => {
return axios.get('/pms/classify/getDirectoryList', { params });
};
//目录列表不含分页
static getDirectoryList = (params: { type: number }) => {
......
src/api/modules/makeManage.ts
......@@ -9,21 +9,21 @@ import axios from '../request';
export class MakeManageAPI {
// 品牌-新增
static addBrandInfo: MakeAddType = (params) => {
return axios.get('uavgoods/brand/addBrandInfo', { params });
return axios.get('/pms/brand/addBrandInfo', { params });
};
// 品牌-编辑
static editBrandInfo: MakeEditType = (params) => {
return axios.get('uavgoods/brand/editBrandInfo', { params });
return axios.get('/pms/brand/editBrandInfo', { params });
};
// 品牌-列表
static getListBrandInfo: MakeListType = (params) => {
return axios.get('uavgoods/brand/listBrandInfo', { params });
return axios.get('/pms/brand/listBrandInfo', { params });
};
// 品牌刪除
static deleteBrandInfo: MakeDeleteType = (params) => {
return axios.get('uavgoods/brand/deleteBrandInfo', { params });
return axios.get('/pms/brand/deleteBrandInfo', { params });
};
}
src/api/modules/produceManageAPI.ts
import axios from '../request';
import {
MakeListType,
addProductType,
cooperationTagType,
deleteProductType,
editProductSpecPriceType,
editProductType,
getProductSpecPriceType,
productDetailType,
productListType,
productSpecAddType,
productSpecDeleteType,
productSpecEditType,
ProductSpecListType,
productSpecPriceType,
} from '~/api/interface/produceManageType';
import dayjs from 'dayjs';
export class ProduceManageAPI {
// 产品管理-分页列表
......@@ -11,41 +22,53 @@ export class ProduceManageAPI {
return axios.post('/pms/product/spec/listPageProductSku', data);
};
// 产品sku管理-删除产品sku
static removeProductSku = (params: unknown) => {
return axios.get('uavgoods/product/spec/removeProductSku', { params });
};
static directoryList = () => {
return axios.get('uavgoods/directory/directoryList');
};
// 分类列表(属于商品)
static getListGoodsTypeList = (type: number): any => {
return axios.get(`uavgoods/mgoods/getGoodsTypeInfoList/${type}`);
};
// 品牌-列表
static getListBrandInfo: MakeListType = (params) => {
return axios.get('uavgoods/brand/listBrandInfo', { params });
static removeProductSku: deleteProductType = (params) => {
return axios.get('/pms/product/spec/removeProductSku', { params });
};
// 产品sku管理-新增产品sku
static addProductSku = (data: unknown) => {
return axios.post('uavgoods/product/spec/addProductSku', data);
static addProductSku: addProductType = (data) => {
return axios.post('/pms/product/spec/addProductSku', data);
};
// 产品sku管理-编辑产品sku
static editProductSku = (data: unknown) => {
return axios.post('uavgoods/product/spec/editProductSku', data);
static editProductSku: editProductType = (data) => {
return axios.post('/pms/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 });
static getProductSkuDetail: productDetailType = (params) => {
return axios.get('/pms/product/spec/getProductSkuDetail', { params });
};
// 产品规格管理---删除规格
static removeProductSpec: productSpecDeleteType = (params) => {
return axios.get('/pms/product/spec/removeProductSpec', { params });
};
//产品规格管理---新增规格
static addProductSpec: productSpecAddType = (data) => {
return axios.post('/pms/product/spec/addOrEditProductSpec', data);
};
//产品规格管理---编辑规格
static editProductSpec: productSpecEditType = (data) => {
return axios.post('/pms/product/spec/addOrEditProductSpec', data);
};
// 产品sku管理-产品规格管理-分页列表
static listPageProductSpec: ProductSpecListType = (params) => {
return axios.get('/pms/product/spec/listPageProductSpec', { params });
};
//产品sku管理-产品规格管理-价格配置
static setProductSpecPrice: productSpecPriceType = (data) => {
return axios.post('/pms/product/spec/productSpecCPQ', data);
};
//产品sku管理-产品规格管理-获取价格配置
static getProductSpecPrice: getProductSpecPriceType = (data) => {
return axios.post('/pms/product/spec/getProductSpecCPQ', data);
};
//产品sku管理-产品规格管理-价格配置修改
static editProductSpecPrice: editProductSpecPriceType = (data) => {
return axios.post('/pms/product/spec/updateProductSpecCPQ', data);
};
//加盟标签-列表
static getCooperationListTag: cooperationTagType = () => {
return axios.get('/userapp/cooperation/listTag');
};
}
src/api/request.ts
......@@ -13,7 +13,7 @@ const service = axios.create({
});
service.interceptors.request.use(
(config: any) => {
const token = Cookies.get('SHAREFLY-TOKEN');
const token = Cookies.get('SHAREFLY_TOKEN');
// console.log('token --->', token);
if (token) {
config.headers.token = token;
......
src/pages/mallManage/industryManage/industryDetail/components/addOrEditSpecModal/index.tsx
......@@ -50,7 +50,7 @@ const AddOrEditSpecModal: FC<ModalProps & PropsType> = ({
{
title: '序号',
align: 'center',
render: (text: string, record: selfProduceItemType, index: number) => {
render: (_text: string, _record: selfProduceItemType, index: number) => {
return (pagination.pageNo - 1) * pagination.pageSize + index + 1;
},
},
......
src/pages/mallManage/industryManage/industryDetail/components/productListModal/index.tsx
......@@ -18,7 +18,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
title: '序号',
align: 'center',
width: '50px',
render: (text: string, record: productInventoryListType[0], index: number) => {
render: (_text: string, _record: productInventoryListType[0], index: number) => {
return index + 1;
},
},
......@@ -27,7 +27,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
dataIndex: 'productName',
align: 'center',
width: '100px',
render: (text: string, record: productInventoryListType[0]) => {
render: (_text: string, record: productInventoryListType[0]) => {
return record.productSku.productName;
},
},
......@@ -36,7 +36,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
dataIndex: 'typeName',
align: 'center',
width: '100px',
render: (text: string, record: productInventoryListType[0]) => {
render: (_text: string, record: productInventoryListType[0]) => {
return record.productSku.goodsTypeId;
},
},
......@@ -45,7 +45,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
dataIndex: 'model',
align: 'center',
width: '100px',
render: (text: string, record: productInventoryListType[0]) => {
render: (_text: string, record: productInventoryListType[0]) => {
return record.productSku.model;
},
},
......@@ -54,7 +54,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
dataIndex: 'productBrand',
align: 'center',
width: '100px',
render: (text: string, record: productInventoryListType[0]) => {
render: (_text: string, record: productInventoryListType[0]) => {
return record.productSku.productName;
},
},
......@@ -62,7 +62,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
title: '产品规格',
// align: "left",
width: '200px',
render: (text: string, record) => {
render: (_text: string, record) => {
if (record.select === 0) {
return '不指定';
}
......
src/pages/mallManage/industryManage/industryDetail/index.tsx
......@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { ColumnsType } from 'antd/es/table';
import { IndustryManageAPI } from '~/api';
import { useSearchParams } from 'react-router-dom';
import { inventoryType } from '../industryList/propsType';
// import { inventoryType } from '../industryList/propsType';
import { InterDataType, PaginationProps } from '~/api/interface';
import {
industryDetailType,
......@@ -48,13 +48,13 @@ function IndustryDetail() {
// 方案规格
const [industrySpecData, setIndustrySpecData] = useState<industrySpecType>([]);
// 产品清单弹窗显示
const [visibleList, setVisibleList] = useState<boolean>(false);
// const [visibleList, setVisibleList] = useState<boolean>(false);
// 产品规格清单
const [listData, setListData] = useState<inventoryType[]>([]);
// const [listData, setListData] = useState<inventoryType[]>([]);
// 配置价格弹窗显示
const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
// const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
// 当前配置价格数据
const [priceData, setPriceData] = useState([]);
// const [priceData, setPriceData] = useState([]);
// 新增编辑规格弹窗是否显示
const [addOrEditSpecModalShow, setAddOrEditSpecModalShow] = useState<boolean>(false);
//关联产品弹窗
......@@ -81,8 +81,8 @@ function IndustryDetail() {
title: '规格图片',
dataIndex: 'specImage',
align: 'center',
render: (text: string, record) => {
return <Image width={50} height={50} src={record.specImage} alt='图片' />;
render: (text) => {
return <Image width={50} height={50} src={text} alt='图片' />;
},
},
{
......@@ -101,13 +101,13 @@ function IndustryDetail() {
title: '操作',
align: 'center',
width: '250px',
render: (text: string, record: any) => {
render: (_text, record) => {
return (
<div>
<Button
type='link'
onClick={() => {
handlePrice(record);
// handlePrice(record);
}}
>
配置价格
......@@ -139,20 +139,20 @@ function IndustryDetail() {
});
// 关闭产品清单
const handleListClosed = () => {
setListData([]);
setVisibleList(false);
};
// const handleListClosed = () => {
// setListData([]);
// setVisibleList(false);
// };
// 打开配置价格弹窗
const handlePrice = (arr: any) => {
setPriceData(arr);
setVisiblePrice(true);
};
// const handlePrice = (arr: any) => {
// setPriceData(arr);
// setVisiblePrice(true);
// };
// 关闭配置价格弹窗
const handlePriceClosed = () => {
setPriceData([]);
setVisiblePrice(false);
};
// const handlePriceClosed = () => {
// setPriceData([]);
// setVisiblePrice(false);
// };
// 打开新增弹窗
const handleAdd = () => {
setAddOrEditSpecModalShow(true);
......
src/pages/mallManage/makeManage/makeList/index.tsx
import { Button, Table } from 'antd';
import { useEffect, useState } from 'react';
import { Button, message, Modal, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
// import AddOrEditMakeModal from './components/addOrEditMakeModal';
import type { ColumnsType } from 'antd/es/table';
import AddOrEditMakeModal from './components/addOrEditMakeModal';
import { MakeManageAPI } from '~/api';
import { MakeItemEntity } from '~/api/interface/makeManage';
import { PaginationProps } from '~/api/interface';
const MakeList = () => {
const columns: ColumnsType<any> = [
const MakeManage = () => {
const columns: ColumnsType<MakeItemEntity> = [
{
title: '品牌名称',
align: 'center',
......@@ -18,28 +22,130 @@ const MakeList = () => {
{
title: '操作',
align: 'center',
render: () => (
render: (_text: string, record: MakeItemEntity) => (
<>
<Button type='link'>编辑</Button>
<Button type='link' danger>
<Button type='link' onClick={() => editMake(record)}>
编辑
</Button>
<Button type='link' danger onClick={() => deleteMake(record)}>
删除
</Button>
</>
),
},
];
const [tableData, setTableData] = useState<MakeItemEntity[]>([]);
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
// add or edit modal is show
const [currentMakeItem, setCurrentMakeItem] = useState<MakeItemEntity>();
const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false);
// 新建
const addMakeClick = () => {
setAddOrEditModalShow(true);
};
// add or edit modal event
const addOrEditModalOk = () => {
getListBrandInfo({
pageSize: pagination.pageSize,
pageNo: pagination.pageNo,
});
setAddOrEditModalShow(false);
setCurrentMakeItem(undefined);
};
const addOrEditModalCancel = () => {
setCurrentMakeItem(undefined);
setAddOrEditModalShow(false);
};
// 品牌-列表
const getListBrandInfo = (data: Pick<PaginationProps, 'pageSize' | 'pageNo'>) => {
MakeManageAPI.getListBrandInfo(data).then(({ result }) => {
setTableData(result.list || []);
pagination.pageNo = data.pageNo;
pagination.pageSize = data.pageSize;
pagination.totalCount = result.totalCount;
setPagination(pagination);
});
};
// 分页
const paginationChange = (pageNo: number, pageSize: number) => {
getListBrandInfo({
pageSize,
pageNo,
});
};
// edit
const editMake = (record: MakeItemEntity) => {
setCurrentMakeItem(record);
setAddOrEditModalShow(true);
};
// delete
const deleteMake = (record: MakeItemEntity) => {
Modal.confirm({
content: '是否删除该品牌？',
onOk: () => {
MakeManageAPI.deleteBrandInfo({ id: record.id }).then(({ code, message: msg }) => {
if (code === '200') {
message.success('删除成功');
if (tableData.length === 1 && pagination.pageNo !== 1) {
pagination.pageNo--;
}
getListBrandInfo({
pageSize: pagination.pageSize,
pageNo: pagination.pageNo,
});
} else {
message.error(msg);
}
});
},
});
};
useEffect(() => {
getListBrandInfo({
pageSize: pagination.pageSize,
pageNo: pagination.pageNo,
});
}, []);
return (
<div className='make-list'>
<div className='make-list-operate'>
<Button type='primary' icon={<PlusOutlined />}>
新增
<div className='make-manage'>
<Button
icon={<PlusOutlined />}
type='primary'
onClick={addMakeClick}
style={{ marginBottom: '10px' }}
>
新建
</Button>
</div>
<div className='make-list-content' style={{ marginTop: '10px' }}>
<Table bordered columns={columns} />
</div>
{/*<AddOrEditMakeModal />*/}
<Table
columns={columns}
bordered
rowKey='id'
dataSource={tableData}
pagination={{
total: pagination.totalCount,
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} 条数据`,
}}
/>
<AddOrEditMakeModal
open={addOrEditModalShow}
onOk={addOrEditModalOk}
handleCancel={addOrEditModalCancel}
title={currentMakeItem ? '编辑品牌' : '新建品牌'}
makeItem={currentMakeItem}
/>
</div>
);
};
export default MakeList;
export default MakeManage;
src/pages/mallManage/produceManage/produceDetail/components/addOrEditProduceSpecModal/index.tsx 0 → 100644
import React, { FC, useEffect, useState } from 'react';
import { Form, Input, Modal, message, ModalProps } from 'antd';
import { Uploader } from '~/components/uploader';
import { UploadOutlined } from '@ant-design/icons';
import { ProduceManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { ProductSpecListType } from '~/api/interface/produceManageType';
//产品规格返回类型
type specType = InterDataType<ProductSpecListType>['list'];
interface PropsType {
onCancel: () => void;
onOk: () => void;
data: specType[0] | undefined;
productSkuId: number;
}
const AddOrEditProduceSpecModal: FC<ModalProps & PropsType> = ({
open,
onCancel,
data,
onOk,
productSkuId,
}) => {
// 表格事件
const [form] = Form.useForm();
//文件列表
const [fileList, setFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
// 关闭弹窗
const handleClosed = () => {
form.resetFields();
setFileList([]);
onCancel();
};
// 触发表单验证
const handleSubmit = () => {
form
.validateFields()
.then((values) => {
const obj = { ...data, ...values, productSkuId };
ProduceManageAPI[!obj.id ? 'addProductSpec' : 'editProductSpec'](obj).then(({ code }) => {
if (code === '200') {
message.success('操作成功');
form.resetFields();
setFileList([]);
onOk();
}
});
})
.catch((err) => {
message.warning(err.errorFields[0].errors[0]).then();
});
};
//上传成功
const uploadSuccess = (
value: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
form.setFieldsValue({
specImage: value[0].url,
});
};
// componentsDidMounted
useEffect(() => {
if (data) {
form.setFieldsValue({
...data,
});
setFileList([
{
uid: Math.random(),
name: 'img',
id: Math.random(),
url: data.specImage,
},
]);
}
}, [data]);
return (
<div>
<Modal
open={open}
title='新增'
onCancel={handleClosed}
onOk={handleSubmit}
destroyOnClose
width={800}
>
<Form
name='form'
form={form}
layout='horizontal'
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
>
<Form.Item
name='specName'
label='规格名称'
rules={[{ required: true, message: '请输入规格名称' }]}
>
<Input placeholder='请输入规格名称' allowClear maxLength={30} />
</Form.Item>
<Form.Item
name='specImage'
label='规格图片'
rules={[{ required: true, message: '请上传规格图片' }]}
>
<Uploader
fileUpload
listType='picture-card'
onChange={uploadSuccess}
defaultFileList={fileList}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item
name='partNo'
label='产品料号'
rules={[{ required: true, message: '请输入产品料号' }]}
>
<Input placeholder='请输入产品料号' allowClear maxLength={50} />
</Form.Item>
<Form.Item
name='versionDesc'
label='版本描述'
rules={[{ required: true, message: '请输入版本描述' }]}
>
<Input placeholder='请输入版本描述' allowClear maxLength={50} />
</Form.Item>
</Form>
</Modal>
</div>
);
};
export default AddOrEditProduceSpecModal;
src/pages/mallManage/produceManage/produceDetail/components/setProduceSpecPriceModal/index.tsx 0 → 100644
import React, { FC, useEffect, useState } from 'react';
import { Form, Input, message, Modal, Select, Row, Col, Button, ModalProps, Card } from 'antd';
import { ProduceManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { cooperationTagType, ProductSpecListType } from '~/api/interface/produceManageType';
import { filterObjAttr } from '~/utils';
//加盟标签返回类型
type cooperationTagResponseType = InterDataType<cooperationTagType>;
//产品规格返回类型
type specType = InterDataType<ProductSpecListType>['list'][0];
interface PropsType {
onCancel: () => void;
data: specType | undefined;
}
const { Option } = Select;
const SetProduceSpecPriceModal: FC<ModalProps & PropsType> = ({ open, onCancel, data }) => {
const tabList = [
{
key: '0',
tab: '销售价格',
},
{
key: '1',
tab: '租赁价格',
},
];
//当前tab
const [currentTab, setCurrentTab] = useState<string>('0');
// 表格事件
const [form] = Form.useForm();
// 等级标签列表
const [tagInfoList, setTagInfoList] = useState<cooperationTagResponseType>([]);
// 选择的列表
const [selectList, setSelectList] = useState<number[]>([]);
//是否编辑
const [isEdit, setIsEdit] = useState<boolean>(false);
// 获取当前规格的价格
const getProductSpecPrice = (type: number, productSpecId?: number, leaseTerm?: number) => {
ProduceManageAPI.getProductSpecPrice({ type, productSpecId, leaseTerm }).then(({ result }) => {
setIsEdit(!!result.length);
const levelNumber: number[] = result
.filter((v) => v.cooperationTag != 0)
.map((v) => v.cooperationTag);
const Obj: any = result.reduce((pre: any, cur) => {
pre[cur.cooperationTag] = cur.price;
return { ...pre };
}, {});
if (result.length) {
form.setFieldsValue({ ...Obj, level: levelNumber });
} else {
form.setFieldsValue({
0: undefined,
level: undefined,
});
}
const arr = result
.map((i) => {
return i.cooperationTag;
})
.filter((i: number) => i !== 0);
setSelectList(arr);
});
};
// 获取等级标签
const getTagNameList = () => {
ProduceManageAPI.getCooperationListTag().then(({ result }) => {
setTagInfoList(result || []);
});
};
// 选择器点击事件
const handleChange = (value: number[]) => {
setSelectList(value);
};
// 将val转换为label
const transValtoLabel = (id: number) => {
const item = tagInfoList.find((i) => i.id === id);
return item ? item.tagName : id;
};
// 关闭弹窗
const handleClosed = () => {
setCurrentTab('0');
const data = Object.fromEntries(
selectList.map((i) => {
return [i, undefined];
}),
);
form.setFieldsValue({
0: undefined,
...data,
});
setSelectList([]);
onCancel();
};
// 触发表单验证
const handleSubmit = () => {
form
.validateFields()
.then(async (values) => {
const specPrice = Object.keys(filterObjAttr(values, ['leaseTerm', 'level'])).reduce(
(pre: any, cur: string) => {
return [...pre, { price: values[cur], cooperationTag: Number(cur) }];
},
[],
);
ProduceManageAPI[isEdit ? 'editProductSpecPrice' : 'setProductSpecPrice']({
specPrice,
productSpecId: data?.id,
type: Number(currentTab),
leaseTerm: values.leaseTerm,
}).then(({ code }) => {
if (code === '200') {
message.success('操作成功');
handleClosed();
}
});
})
.catch((err) => {
message.warning(err.errorFields[0].errors[0]).then();
});
};
// 价格正则
const priceValidator = (_rule: any, value: any) => {
const regExp = /^[1-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/;
const bol: boolean = regExp.test(value);
if (!value) {
return Promise.reject(new Error('请输入定价金额'));
}
if (!bol) {
return Promise.reject(
new Error('金额应为数字,小数最多两位,整数最多八位,不能输入0开头的整数'),
);
}
return Promise.resolve();
};
//tab change
const onTabChange = (key: string) => {
form.resetFields();
switch (key) {
case '0':
getProductSpecPrice(Number(key), data?.id);
break;
case '1':
getProductSpecPrice(Number(key), data?.id, 0);
break;
}
setSelectList([]);
setCurrentTab(key);
};
//租期选择
const rentDateChange = (value: string) => {
getProductSpecPrice(Number(currentTab), data?.id, Number(value));
};
// componentsDidMounted
useEffect(() => {
if (data) {
getTagNameList();
getProductSpecPrice(Number(currentTab), data?.id);
}
}, [data]);
return (
<Modal
open={open}
title='配置价格'
destroyOnClose
width={768}
onCancel={handleClosed}
footer={[
<Button key='1' type='default' onClick={handleClosed}>
取消
</Button>,
<Button key='2' type='primary' onClick={handleSubmit}>
确认
</Button>,
]}
>
<Card tabList={tabList} onTabChange={onTabChange}>
<Form
name='form'
form={form}
layout='horizontal'
labelWrap
initialValues={{ leaseTerm: 0 }}
>
{currentTab === '1' && (
<Form.Item
label='租期'
labelCol={{ span: 5 }}
wrapperCol={{ span: 15 }}
name='leaseTerm'
rules={[{ required: true, message: '请选择租期' }]}
>
<Select onChange={rentDateChange}>
<Select.Option value={0}>1-7天</Select.Option>
<Select.Option value={1}>8-15天</Select.Option>
<Select.Option value={2}>16-30天</Select.Option>
<Select.Option value={3}>31天以上</Select.Option>
</Select>
</Form.Item>
)}
<Form.Item
label='渠道等级'
name='level'
rules={[{ required: true, message: '请选择渠道等级' }]}
labelCol={{ span: 5 }}
wrapperCol={{ span: 15 }}
>
<Select
placeholder='请选择渠道等级'
allowClear
mode='multiple'
onChange={handleChange}
value={selectList}
>
{tagInfoList.map((i, j) => (
<Option value={i.id} key={j}>
{i.tagName}
</Option>
))}
</Select>
</Form.Item>
<Row>
<Col span={20}>
<Form.Item
name='0'
label='市场单价'
rules={[{ required: true, validator: priceValidator }]}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
<Input placeholder='请输入市场单价' maxLength={11} allowClear />
</Form.Item>
</Col>
<Col span={4}>
<div style={{ margin: '6px 0 0 10px' }}>元/件</div>
</Col>
</Row>
{selectList.map((i, j) => (
<Row key={j}>
<Col span={20}>
<Form.Item
name={i}
label={transValtoLabel(i)}
rules={[{ required: true, validator: priceValidator }]}
key={j}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
<Input placeholder='请输入定价金额' maxLength={11} allowClear />
</Form.Item>
</Col>
<Col span={4}>
<div style={{ margin: '6px 0 0 10px' }}>元/件</div>
</Col>
</Row>
))}
</Form>
</Card>
</Modal>
);
};
export default SetProduceSpecPriceModal;
src/pages/mallManage/produceManage/produceList/components/addOrEditProduceModal/index.tsx
import React, { useEffect, useState } from 'react';
import { Form, Input, Modal, message, Select } from 'antd';
import React, { FC, useEffect, useState } from 'react';
import { Form, Input, Modal, message, Select, ModalProps } from 'antd';
import { CategoryManageAPI, ProduceManageAPI } from '~/api';
import { ProductSkuType, MakeItemEntity } from '../../propsType';
import { InterDataType } from '~/api/interface';
import { InterDataType, InterReqType } from '~/api/interface';
import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
import { MakeListType } from '~/api/interface/makeManage';
import { addProductType } from '~/api/interface/produceManageType';
import { filterObjAttr } from '~/utils';
//目录返回类型
type directoryType = InterDataType<directoryListType>;
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//品牌返回类型
type makeListType = InterDataType<MakeListType>['list'];
//表单类型
type addMakeParameterType = InterReqType<addProductType>;
interface PropsType {
visible: boolean;
closed: any;
data: ProductSkuType | undefined;
makeList: MakeItemEntity[];
closed: () => void;
data: (addMakeParameterType & { id: number; categoriesId: number }) | undefined;
decList: directoryType;
makeList: makeListType;
onOk: () => void;
}
const { Option } = Select;
function AddOrEditProduceModal(props: PropsType) {
// 父组件传参
const { visible, closed, data, makeList, decList } = props;
const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({
open,
closed,
data,
decList,
makeList,
onOk,
}) => {
// 产品类型下拉列表
const [productTypeSelectList, setProductTypeSelectList] = useState<categoryType>([]);
// 表格事件
const [form] = Form.useForm();
const [form] = Form.useForm<addMakeParameterType>();
// 关闭弹窗
const handleClosed = async () => {
form.resetFields();
......@@ -36,15 +47,17 @@ function AddOrEditProduceModal(props: PropsType) {
const handleSubmit = () => {
form
.validateFields()
.then(async (values) => {
const obj = { ...data, ...values };
const res: any = await ProduceManageAPI[!obj.id ? 'addProductSku' : 'editProductSku'](obj);
if (res && res.code === '200') {
.then((values) => {
const obj: any = { ...data, ...values };
ProduceManageAPI[!obj.id ? 'addProductSku' : 'editProductSku'](
filterObjAttr(obj, ['categoriesId']),
).then(({ code }) => {
if (code === '200') {
message.success('操作成功');
await handleClosed();
} else {
message.warning(res.message);
form.resetFields();
onOk();
}
});
})
.catch((err) => {
message.warning(err.errorFields[0].errors[0]).then();
......@@ -60,20 +73,21 @@ function AddOrEditProduceModal(props: PropsType) {
};
// 目录修改
const decSelectChange = (value: number) => {
form.setFieldValue('goodsTypeId', undefined);
form.setFieldValue('categoryId', undefined);
getCategoryListByDirectory(value);
};
// componentsDidMounted
useEffect(() => {
if (!data) return;
if (data) {
getCategoryListByDirectory(data.directoryId);
form.setFieldsValue({
...data,
});
}
}, [data]);
return (
<Modal
open={visible}
open={open}
title={data?.id ? '编辑' : '新增'}
onCancel={handleClosed}
onOk={handleSubmit}
......@@ -108,7 +122,7 @@ function AddOrEditProduceModal(props: PropsType) {
</Select>
</Form.Item>
<Form.Item
name='goodsTypeId'
name='categoryId'
label='产品类型'
rules={[{ required: true, message: '请选择产品类型' }]}
>
......@@ -156,5 +170,5 @@ function AddOrEditProduceModal(props: PropsType) {
</Form>
</Modal>
);
}
};
export default AddOrEditProduceModal;
src/pages/mallManage/produceManage/produceList/index.tsx
......@@ -3,36 +3,36 @@ import './index.scss';
import { Button, Form, Input, message, Modal, Select, Table } from 'antd';
import { useNavigate } from 'react-router-dom';
import { ColumnsType } from 'antd/es/table';
import { CategoryManageAPI, ProduceManageAPI } from '~/api';
import { CategoryManageAPI, MakeManageAPI, ProduceManageAPI } from '~/api';
import AddOrEditProduce from './components/addOrEditProduceModal';
import { MakeItemEntity } from './propsType';
import { InterDataType, PaginationProps } from '~/api/interface';
import { productListType } from '~/api/interface/produceManageType';
import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { addProductType, productListType } from '~/api/interface/produceManageType';
import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
import { MakeListType } from '~/api/interface/makeManage';
//产品列表返回类型
type produceListType = InterDataType<productListType>['list'];
//产品列表参数类型
type produceParametersType = Omit<InterReqType<productListType>, 'pageSize' | 'pageNo'>;
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//目录返回类型
type directoryType = InterDataType<directoryListType>;
//品牌返回类型
type makeListType = InterDataType<MakeListType>['list'];
//新增编辑表单类型
type addMakeParameterType = InterReqType<addProductType>;
const { Option } = Select;
const { confirm } = Modal;
// 搜索表单的数据
let query: any = {};
// 表单提交
interface FormType {
productName?: string;
goodsTypeId?: number;
}
function ProduceManage() {
// 路由操作
const navigate = useNavigate();
// 表格数据
const [tableData, setTableData] = useState<produceListType>([]);
//筛选表单
const [query, setQuery] = useState<produceParametersType>();
// 加载中
const [loading, setLoading] = useState<boolean>(false);
// 产品类型下拉列表
......@@ -40,9 +40,11 @@ function ProduceManage() {
// 新增弹窗是否显示
const [visibleAddEdit, setVisibleAddEdit] = useState(false);
// 新增弹窗内容
const [addEditData, setAddEditData] = useState<produceListType[0]>();
const [addEditData, setAddEditData] = useState<
addMakeParameterType & { id: number; categoriesId: number }
>();
// 品牌列表
const [makeList, setMakeList] = useState<MakeItemEntity[]>([]);
const [makeList, setMakeList] = useState<makeListType>([]);
// 目录列表
const [decList, setDecList] = useState<directoryType>([]);
// 表格结构
......@@ -66,7 +68,7 @@ function ProduceManage() {
align: 'center',
width: '15%',
fixed: 'right',
render: (text: string, record) => {
render: (_text: string, record) => {
return (
<div>
<Button type='link' onClick={() => handleDetail(record)}>
......@@ -99,42 +101,61 @@ function ProduceManage() {
};
// 新增弹窗
const handleAdd = () => {
getMakeList();
setVisibleAddEdit(true);
setAddEditData(undefined);
};
// 编辑弹窗
const handleEdit = (record: produceListType[0]) => {
getMakeList();
setVisibleAddEdit(true);
setAddEditData(record);
setAddEditData({
id: record.id,
categoryId: record.categoriesId,
directoryId: record.directoryId,
model: record.model,
productBrandId: record.productBrandId,
productName: record.productName,
categoriesId: record.categoriesId,
});
};
// 关闭弹窗
const handleAddEditClosed = () => {
setVisibleAddEdit(false);
setAddEditData(undefined);
paginationChange(pagination.pageNo, pagination.pageSize);
};
const addOrEditProduceOk = () => {
setVisibleAddEdit(false);
setAddEditData(undefined);
getProduceList(query);
};
// 删除产品
const handleDelete = (record: produceListType[0]) => {
confirm({
title: '提示',
content: '删除后此数据将会丢失，确定删除吗？',
async onOk() {
const res: any = await ProduceManageAPI.removeProductSku({ id: record.id });
if (res && res.code === '200') {
await message.success('操作成功');
await paginationChange(pagination.pageNo, pagination.pageSize);
} else {
message.error(res.message);
onOk() {
ProduceManageAPI.removeProductSku({ id: record.id }).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo != 1 && tableData.length === 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getProduceList(query);
}
});
},
});
};
//产品列表
const getProduceList = () => {
const getProduceList = (query?: produceParametersType) => {
setLoading(true);
ProduceManageAPI.listPageProductSku({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
...query,
}).then(({ result }) => {
setLoading(false);
setTableData(result.list || []);
setPagination(pagination);
});
......@@ -143,29 +164,31 @@ function ProduceManage() {
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo;
pagination.pageSize = pageSize;
getProduceList();
getProduceList(query);
};
// 表单提交
const onFinish = (val: FormType) => {
const onFinish = (val: produceListType) => {
// 在这里对提交的数据做处理，如range转为开始和结束时间
const data = Object.fromEntries(
// 过滤为空项
Object.entries({
...val,
}).filter((i) => i[1] !== '' && i[1] !== undefined && i[1] !== null),
}).filter(
(i) => (typeof i[1] === 'string' && i[1] !== '') || (i[1] !== undefined && i[1] !== null),
),
);
query = data;
// getTableList(data).then();
setQuery(data);
getProduceList(data);
};
// 获取品牌列表
//品牌列表
const getMakeList = () => {
ProduceManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 999999 }).then(({ code, result }) => {
MakeManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 9999 }).then(({ result }) => {
setMakeList(result.list || []);
});
};
// 目录列表
const getDirectoryList = () => {
CategoryManageAPI.getDirectoryList({ type: 4 }).then(({ result }) => {
CategoryManageAPI.getDirectoryListClone({ type: 4 }).then(({ result }) => {
setDecList(result || []);
});
};
......@@ -185,7 +208,7 @@ function ProduceManage() {
};
// componentDidMount
useEffect(() => {
getProduceList();
getProduceList(query);
getDirectoryList();
}, []);
......@@ -245,11 +268,12 @@ function ProduceManage() {
}}
/>
<AddOrEditProduce
visible={visibleAddEdit}
open={visibleAddEdit}
closed={handleAddEditClosed}
data={addEditData}
makeList={makeList}
decList={decList}
onOk={addOrEditProduceOk}
/>
</div>
);
......
src/pages/mallManage/produceManage/produceList/propsType.ts deleted 100644 → 0
// 产品sku管理-分页列表
export interface ProductSkuType {
createTime: string;
goodsTypeId: number;
id: number;
model: string;
productBrand: number;
productName: string;
typeName: string;
productBrandId: number;
directoryId: number;
directoryName: string;
}
// 产品sku管理-产品规格管理-分页列表
export interface ProductSpecType {
createTime: string;
id: number;
partNo: string;
productSkuId: number;
specImage: string;
specName: string;
versionDesc: string;
}
// 品牌管理-列表
export type MakeItemEntity = {
createTime: string;
brandName: string;
id: number;
};
src/router/privateRouter.tsx
......@@ -11,7 +11,7 @@ function PrivateRouter() {
const beforeEach = () => {
// TODO: 判断是否登录 (需要改为实时获取地址栏的路由)
const path = location.pathname;
const token = Cookies.get('SHAREFLY-TOKEN');
const token = Cookies.get('SHAREFLY_TOKEN');
if (!token && path !== '/login') {
location.replace('/login');
return;
......
src/utils/index.ts
......@@ -35,7 +35,7 @@ export const urlToBase64 = (url: string) => {
};
// 过滤对象属性
export const filterObjAttr = (obj: any, key: string[]) => {
return Object.keys(obj).reduce((pre: any, cur: string) => {
return Object.keys(JSON.parse(JSON.stringify(obj))).reduce((pre: any, cur: string) => {
if (!key.includes(cur)) {
pre[cur] = obj[cur];
}
......
vite.config.ts
......@@ -12,6 +12,7 @@ export default defineConfig({
proxy: {
'/api': {
// target: 'http://192.168.3.111:8077', // 后端女oms
// target: 'http://192.168.3.17:8099', // 狗旺
target: 'https://test.iuav.shop',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论