Skip to content

A
admin
提交 196886f0 作者: 龚洪江
操作

功能：租赁联调（100%）

上级 b26c4e6b
正在显示 包含 1508 行增加 和 106 行删除
src/api/interface/commonType.ts
......@@ -177,5 +177,4 @@ type locationType = {
level: number;
childInfo: locationType[];
};
export type getSecondDistrictInfoType = InterFunction<any, locationType[]>;
src/api/interface/goodsType.ts
......@@ -93,8 +93,6 @@ export type detailGoodsType = InterFunction<
id: number;
}
>;
//商品-其它服务列表
export type otherServiceType = InterFunction<any, { id: number; saleServiceName: string }[]>;
//商品-规格单位
export type skuUnitType = InterFunction<any, { id: number; unitName: string }[]>;
//商品-批量上下架
......
src/api/interface/rentManageType.ts
......@@ -48,22 +48,22 @@ export type addRentGoodsType = InterFunction<
deviceModeId: number;
leasePartsList: { name: string; number: number; price: number }[];
level: number;
logisticsCompany: number;
logisticsCompany: string;
maxLeaseTerm: number;
minLeaseTerm: number;
modeOfDelivery: number;
priceStock: {
cashPledge: number;
maxDaysRental: number;
ninetyDaysRental: number;
maxDaysRental?: number;
ninetyDaysRental?: number;
productSpec: string;
sevenDaysRental: number;
showPrice: number;
skuImage: string;
stock: number;
sevenDaysRental?: number;
showPrice?: number;
skuImage?: string;
stock?: number;
stockOut: number;
thirtyDaysRental: number;
threeDaysRental: number;
thirtyDaysRental?: number;
threeDaysRental?: number;
}[];
productDetails: string;
productParam: string;
......@@ -78,5 +78,108 @@ export type addRentGoodsType = InterFunction<
},
any
>;
//租赁商品-列表
type rentGoodsType = {
brandInfoId: number;
deviceModeId: number;
leasePartsList: { id: number; name: string; number: number; price: number }[];
level: number;
logisticsCompany: string;
maxLeaseTerm: number;
minLeaseTerm: number;
modeOfDelivery: number;
priceStock: {
cashPledge: number;
maxDaysRental?: number;
ninetyDaysRental?: number;
productSpec: string;
sevenDaysRental?: number;
showPrice?: number;
skuImage?: string;
stock?: number;
stockOut: number;
thirtyDaysRental?: number;
threeDaysRental?: number;
id: number;
}[];
productDetails: string;
productParam: string;
productTypeId: number;
resourcesList: { id: number; type: number; url: string }[];
returnAddress: number;
sellingPoint: string;
shelfStatus: number;
shipAddress: number;
tradeName: string;
specAttrList: {
id: number;
specName: string;
specValuesList: { specName: string; id: number }[];
}[];
id: number;
createTime: string;
};
export type leaseGoodsListType = InterItemFunction<
{
brandInfoId?: number;
districtCode?: number;
productTypeId?: number;
shelfStatus?: number;
tradeName?: string;
},
rentGoodsType[]
>;
//租赁-商品-编辑
export type editLeaseGoodsType = InterFunction<
{
brandInfoId: number;
deviceModeId: number;
leasePartsList: { id?: number; name: string; number: number; price: number }[];
level: number;
logisticsCompany: string;
maxLeaseTerm: number;
minLeaseTerm: number;
modeOfDelivery: number;
priceStock: {
cashPledge: number;
maxDaysRental?: number;
ninetyDaysRental?: number;
productSpec: string;
sevenDaysRental?: number;
showPrice?: number;
skuImage?: string;
stock?: number;
stockOut: number;
thirtyDaysRental?: number;
threeDaysRental?: number;
id?: number;
}[];
productDetails: string;
productParam: string;
productTypeId: number;
resourcesList: { type: number; url: string }[];
returnAddress: number;
sellingPoint: string;
shelfStatus: number;
shipAddress: number;
tradeName: string;
specAttrList: {
id: number;
specName: string;
specValuesList: { id: number; specName: string }[];
}[];
id: number;
},
any
>;
//租赁-商品-详情
export type leaseGoodsDetailsType = InterFunction<{ id: number }, rentGoodsType>;
//租赁-商品-租期信息
export type leaseTermInfoType = InterFunction<any, { id: number; leaseDate: string }[]>;
//租赁-商品-物流-配送方式
export type otherServiceType = InterFunction<any, { id: number; saleServiceName: string }[]>;
//租赁-商品-上下架-批量
export type batchOnShelfOrTakeDownType = InterFunction<{ goodsIds: number[]; status: number }, any>;
//租赁-商品-删除-批量
export type batchRemoveWareInfoType = InterFunction<number[], any>;
src/api/interface/systemManageType.ts
......@@ -299,3 +299,44 @@ export type listMenuInfoType = InterFunction<any, menType>;
export type listRoleMenuInfoType = InterFunction<{ roleId: number }, any>;
//账号权限-修改角色菜单权限
export type updateRoleMenuInfoType = InterFunction<{ menuInfoIds: number[]; roleId: number }, any>;
//地址管理-列表
export type addressListType = InterFunction<
any,
{
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
type: number;
id: number;
districtCode: string;
}[]
>;
//地址管理-添加地址
export type addressInsetType = InterFunction<
{
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
type: number;
districtCode: string;
},
any
>;
//地址管理-编辑地址
export type editAddressType = InterFunction<
{
id?: number;
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
type: number;
districtCode: string;
},
any
>;
//地址管理-删除地址
export type deleteAddressType = InterFunction<{ id: number }, any>;
src/api/modules/goodsAPI.ts
......@@ -10,7 +10,6 @@ import {
listGoodsType,
listPageGoodsInfoType,
mallGoodsDetailsType,
otherServiceType,
removeMallGoodsType,
skuUnitType,
upOrDownShelfType,
......@@ -38,10 +37,6 @@ class GoodsAPI {
static getSkuUnit: skuUnitType = () => {
return axios.get('/pms/mall/goods/getSkuUnit');
};
// 商品-其它服务列表
static getOtherServiceList: otherServiceType = () => {
return axios.get('/pms/goods/listOtherService');
};
// 商品-批量上下架
static batchOnShelfOrTakeDown: batchOnShelfOrTakeDownType = (data) => {
return axios.post('/pms/goods/batchOnShelfOrTakeDown', data);
......
src/api/modules/rentManageAPI.ts
......@@ -2,16 +2,22 @@ import {
addRentGoodsType,
addRentModeType,
addType,
batchRemoveWareInfoType,
editBrandInfoType,
editLeaseGoodsType,
getTypeListType,
leaseGoodsDetailsType,
leaseGoodsListType,
leaseTermInfoType,
listBrandInfoType,
otherServiceType,
rentMakeAddType,
rentModeListType,
rentTypeEditType,
rentTypeRemoveType,
} from '~/api/interface/rentManageType';
import axios from '../request';
import { batchOnShelfOrTakeDownType } from '~/api/interface/goodsType';
export class RentManageAPI {
//租赁-类型-新增
......@@ -43,7 +49,26 @@ export class RentManageAPI {
// 租赁-商品-新增
static addRentGoods: addRentGoodsType = (data) =>
axios.post('/pms/lease/goods/addLeaseGoods', data);
//租赁-商品-列表
static getLeaseGoodsList: leaseGoodsListType = (data) =>
axios.post('/pms/lease/goods/leaseGoodsList', data);
//租赁-商品-编辑
static editLeaseGoods: editLeaseGoodsType = (data) =>
axios.post('/pms/lease/goods/editLeaseGoods', data);
//租赁-商品-详情
static getLeaseGoodsDetails: leaseGoodsDetailsType = (params) =>
axios.get('/pms/lease/goods/leaseGoodsDetails', { params });
// 租赁-商品-租期信息
static getLeaseTermInfo: leaseTermInfoType = () =>
axios.post('/pms/lease/goods/getLeaseTermInfo');
//租赁-商品-上下架-批量
static batchOnShelfOrTakeDown: batchOnShelfOrTakeDownType = (data) =>
axios.post('/pms/lease/goods/batchOnShelfOrTakeDown', data);
////租赁-商品-删除-批量
static batchRemoveWareInfo: batchRemoveWareInfoType = (data) =>
axios.post('/pms/lease/goods/batchRemoveWareInfo', data);
// 商品-其它服务列表
static getOtherServiceList: otherServiceType = () => {
return axios.get('/pms/goods/listOtherService');
};
}
src/api/modules/systemManage.ts
import {
addressInsetType,
addressListType,
bindingCompanyMemberType,
deleteAddressType,
deleteRoleInfoType,
editAddressType,
getCompanyInfoByIdType,
getSecondDistrictInfo,
insertBAccountType,
......@@ -104,4 +108,15 @@ export class SystemManageAPI {
//账号权限-修改角色菜单权限
static updateRoleMenuInfo: updateRoleMenuInfoType = (data) =>
axios.post('/userapp/role/updateRoleMenuInfo', data);
// 地址管理-新增
static addressInset: addressInsetType = (data) => axios.post('/oms/user-address/insert', data);
// 地址管理-列表
static getAddressList: addressListType = (data) =>
axios.post('/oms/user-address/selectList', data);
// 地址管理-编辑
static editAddress: editAddressType = (data) => axios.post('/oms/user-address/update', data);
// 地址管理-删除
static deleteAddress: deleteAddressType = (params) =>
axios.get('/oms/user-address/deleteById', { params });
}
src/components/EditableCell/index.tsx
import { Form, InputNumber, Input, Select, Radio } from 'antd';
import { Form, InputNumber, Input, Select, Radio, Switch } from 'antd';
import React from 'react';
import { Uploader } from '~/components/uploader';
import { UploadOutlined } from '@ant-design/icons';
......@@ -8,7 +8,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea';
inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea' | 'switch';
record: any;
index: number;
children: React.ReactNode;
......@@ -82,6 +82,8 @@ const EditableCell: React.FC<
showCount
/>
);
case 'switch':
return <Switch />;
default:
return <Input placeholder={`请输入${placeholder || title}`} maxLength={maxLength} />;
}
......
src/pages/rentManage/rentGoods/rentAddOrEdit/components/accessoryList/index.scss 0 → 100644
.accessory-list{
&-title{
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/accessoryList/index.tsx 0 → 100644
import './index.scss';
import { Button, Col, Form, Row, Table } from 'antd';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { InterDataType, InterReqType } from '~/api/interface';
import { addRentGoodsType, leaseGoodsDetailsType } from '~/api/interface/rentManageType';
import EditableCell from '~/components/EditableCell';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
//租赁商品详情返回类型
type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
//租赁-清单类型
type leasePartsListType = Exclude<
InterReqType<addRentGoodsType>,
undefined
>['leasePartsList'][0] & { id?: number };
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
interface selfProps {
ref: any;
rentGoodsDetails: rentGoodsDetailType | undefined;
}
const AccessoryList = forwardRef<any, selfProps>(({ rentGoodsDetails }, ref) => {
const [accessoryTableForm] = Form.useForm<{ [x: string]: string | number }>();
const accessoryTableDefaultColumns: (ColumnTypes[number] & {
editable?: boolean;
dataIndex?: string;
inputType?: string;
rules?: any;
maxLength?: number;
})[] = [
{
title: '序号',
align: 'center',
render: (_: any, _record: any, index: number) => index + 1,
},
{
title: '名称',
editable: true,
dataIndex: 'name',
align: 'center',
},
{
title: '数量',
editable: true,
dataIndex: 'number',
align: 'center',
inputType: 'number',
},
{
title: '参考价格',
editable: true,
dataIndex: 'price',
align: 'center',
inputType: 'number',
},
{
title: '操作',
align: 'center',
render: (_: any, _record: any, index: number) => (
<>
{index === accessoryTableData.length - 1 ? (
<Button
type='primary'
icon={<PlusOutlined />}
style={{ marginRight: '5px' }}
onClick={addAccessoryTableClick}
></Button>
) : (
''
)}
{index ? (
<Button
type='primary'
icon={<MinusOutlined />}
onClick={() => deleteAccessoryTableClick(index)}
></Button>
) : (
''
)}
</>
),
},
];
const accessoryTableColumns = accessoryTableDefaultColumns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: any) => ({
record,
dataIndex: col.dataIndex,
title: col.title,
editing: col.editable,
inputType: col.inputType,
rules: col.rules,
}),
};
});
const [accessoryTableData, setAccessoryTableData] = useState<leasePartsListType[]>([
{ id: Math.random(), name: '', number: 0, price: 0 },
]);
useImperativeHandle(ref, () => ({
accessoryTableFormSubmit,
}));
//新加一行
const addAccessoryTableClick = () => {
setAccessoryTableData([
...accessoryTableData,
{ id: Math.random(), name: '', number: 0, price: 0 },
]);
};
//删除一行
const deleteAccessoryTableClick = (index: number) => {
accessoryTableData.splice(index, 1);
setAccessoryTableData([...accessoryTableData]);
};
//配件清单表单提交
const accessoryTableFormSubmit = () => {
return new Promise((resolve, reject) => {
accessoryTableForm
.validateFields()
.then((value: any) => {
resolve(
accessoryTableData.reduce((pre: leasePartsListType[], cur) => {
if (value['name' + cur.id] || value['price' + cur.id] || value['number' + cur.id]) {
pre.push({
name: value['name' + cur.id],
price: value['price' + cur.id],
number: value['number' + cur.id],
id: rentGoodsDetails
? rentGoodsDetails.leasePartsList.some((v) => v.id === cur.id)
? cur.id
: undefined
: undefined,
});
}
return pre;
}, []),
);
})
.catch((err) => {
reject(err);
});
});
};
useEffect(() => {
if (rentGoodsDetails) {
if (rentGoodsDetails.leasePartsList) {
setAccessoryTableData(rentGoodsDetails.leasePartsList);
const defaultFormValue: { [x: string]: string | undefined | number } =
rentGoodsDetails.leasePartsList.reduce(
(pre: { [x: string]: string | undefined | number }, cur) => {
pre['name' + cur.id] = cur.name || undefined;
pre['number' + cur.id] = cur.number || undefined;
pre['price' + cur.id] = cur.price || undefined;
return pre;
},
{},
);
accessoryTableForm.setFieldsValue(defaultFormValue);
}
}
}, [rentGoodsDetails]);
return (
<div className='accessory-list'>
<div className='accessory-list-title'>配件清单</div>
<Row>
<Col span={2}></Col>
<Col span={11}>
<Form form={accessoryTableForm}>
<Table
columns={accessoryTableColumns as ColumnTypes}
bordered
dataSource={accessoryTableData}
rowKey='id'
pagination={false}
components={{
body: {
cell: EditableCell,
},
}}
/>
</Form>
</Col>
</Row>
</div>
);
});
export default AccessoryList;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/addressInfo/index.tsx
import './index.scss';
import { Form, Radio, Select } from 'antd';
import { Button, Col, Form, Radio, Row, Select } from 'antd';
import { OrderManageAPI, RentManageAPI, SystemManageAPI } from '~/api';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import AddOrEditAddressModal from '~/pages/systemManage/addressManage/components/addOrEditAddressModal';
import { InterDataType } from '~/api/interface';
import { leaseGoodsDetailsType } from '~/api/interface/rentManageType';
const AddressInfo = () => {
//租赁商品详情返回类型
type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
interface selfProps {
ref: any;
rentGoodsDetails: rentGoodsDetailType | undefined;
}
const AddressInfo = forwardRef<any, selfProps>(({ rentGoodsDetails }, ref) => {
const [addressInfoForm] = Form.useForm<{
shipAddress: number;
returnAddress: number;
logisticsCompany: string;
modeOfDelivery: number;
}>();
const [addOrEditAddressModalShow, setAddOrEditAddressModalShow] = useState<boolean>(false);
const [addressOptionList, setAddressOptionList] = useState<
{ label: string; value: number; districtCode: string }[]
>([]);
const [expressOptionList, setExpressOptionList] = useState<{ label: string; value: string }[]>(
[],
);
//配送方式
const [shippingMethodList, setShippingMethodList] = useState<
{ id: number; saleServiceName: string }[]
>([]);
useImperativeHandle(ref, () => ({
addressInfoFormSubmit,
}));
//地址列表
const getAddressList = () => {
SystemManageAPI.getAddressList({}).then(({ result }) => {
if (result) {
const optionList = result.map((v) => ({
label: v.takeName + v.takePhone + `(${v.takeRegion.split('/').join('') + v.takeAddress})`,
value: v.id,
districtCode: v.districtCode,
}));
const addressItemObj = result.find((v) => v.type === 1);
if (addressItemObj) {
addressInfoForm.setFieldsValue({
returnAddress: addressItemObj.id,
shipAddress: addressItemObj.id,
});
}
setAddressOptionList(optionList);
}
});
};
//物流公司列表
const getListExpressInfo = () => {
OrderManageAPI.listExpressInfo().then(({ result }) => {
if (result) {
const optionList = result.map((v) => ({
label: v.exName,
value: v.exCode,
}));
setExpressOptionList(optionList);
}
});
};
//物流-配送方式
const getOtherService = () => {
RentManageAPI.getOtherServiceList().then(({ result }) => {
setShippingMethodList(result || []);
});
};
//物流表单提交
const addressInfoFormSubmit = () => {
return new Promise((resolve, reject) => {
addressInfoForm
.validateFields()
.then((values) => {
resolve({
...values,
districtCode: addressOptionList.find((v) => v.value === values.shipAddress)
?.districtCode,
});
})
.then((err) => {
reject(err);
});
});
};
//新增地址弹窗
const addAddressClick = () => [setAddOrEditAddressModalShow(true)];
const addOrEditAddressModalOk = () => {
getAddressList();
setAddOrEditAddressModalShow(false);
};
const addOrEditAddressModalCancel = () => {
setAddOrEditAddressModalShow(false);
};
useEffect(() => {
getAddressList();
getListExpressInfo();
getOtherService();
}, []);
useEffect(() => {
if (rentGoodsDetails) {
addressInfoForm.setFieldsValue({
shipAddress: rentGoodsDetails.shipAddress,
returnAddress: rentGoodsDetails.returnAddress,
logisticsCompany: rentGoodsDetails.logisticsCompany,
modeOfDelivery: rentGoodsDetails.modeOfDelivery,
});
}
}, [rentGoodsDetails]);
return (
<div className='address-info'>
<div className='address-info-title'>物流信息</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='发货地址'>
<Select placeholder='请选择发货地址'>
<Select.Option>1</Select.Option>
</Select>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }} form={addressInfoForm}>
<Form.Item
label='发货地址'
name='shipAddress'
rules={[{ required: true, message: '请选择发货地址' }]}
>
<Select placeholder='请选择发货地址' options={addressOptionList}></Select>
</Form.Item>
<Form.Item label='归还地址'>
<Select placeholder='请选择归还地址'>
<Select.Option>1</Select.Option>
</Select>
<Form.Item>
<Row>
<Col span={5}></Col>
<Col>
<Button type='link' icon={<PlusOutlined />} onClick={addAddressClick}>
新增地址
</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
label='归还地址'
name='returnAddress'
rules={[{ required: true, message: '请选择归还地址' }]}
>
<Select placeholder='请选择归还地址' options={addressOptionList}></Select>
</Form.Item>
<Form.Item label='寄出物流'>
<Select placeholder='请选择寄出物流'>
<Select.Option>1</Select.Option>
</Select>
<Form.Item>
<Row>
<Col span={5}></Col>
<Col>
<Button type='link' icon={<PlusOutlined />} onClick={addAddressClick}>
新增地址
</Button>
</Col>
</Row>
</Form.Item>
<Form.Item label='寄出物流'>
<Select placeholder='请选择寄出物流'>
<Select.Option>1</Select.Option>
</Select>
<Form.Item
label='寄出物流'
name='logisticsCompany'
rules={[{ required: true, message: '请选择寄出物流' }]}
>
<Select placeholder='请选择寄出物流' options={expressOptionList}></Select>
</Form.Item>
<Form.Item label='配送方式（寄出）'>
<Form.Item
label='配送方式（寄出）'
name='modeOfDelivery'
rules={[{ required: true, message: '请选择配送方式（寄出）' }]}
>
<Radio.Group>
<Radio>包邮</Radio>
<Radio>到付（租户支付）</Radio>
{shippingMethodList.map((v) => (
<Radio value={v.id} key={v.id}>
{v.saleServiceName}
</Radio>
))}
</Radio.Group>
</Form.Item>
</Form>
<AddOrEditAddressModal
open={addOrEditAddressModalShow}
onOk={addOrEditAddressModalOk}
onCancel={addOrEditAddressModalCancel}
/>
</div>
);
};
});
export default AddressInfo;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/footerOperate/index.scss 0 → 100644
.rent-footer-operate{
background: #fff;
height: 70px;
position: fixed;
bottom: 10px;
left: 180px;
right: 10px;
box-shadow: 0 -5px 1px -5px rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
button{
height: 40px;
width: 80px;
&:first-child{
margin-right: 50px;
}
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/footerOperate/index.tsx 0 → 100644
import './index.scss';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { FC } from 'react';
interface selfProps {
saveRentGoods: () => void;
}
const FooterOperate: FC<selfProps> = ({ saveRentGoods }) => {
const navigate = useNavigate();
//返回
const backRoute = () => {
navigate(-1);
};
return (
<div className='rent-footer-operate'>
<Button onClick={backRoute}>返回</Button>
<Button type='primary' onClick={saveRentGoods}>
保存
</Button>
</div>
);
};
export default FooterOperate;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.tsx
import { Form, Input, Radio } from 'antd';
import './index.scss';
import { forwardRef, useEffect, useImperativeHandle } from 'react';
import { InterDataType } from '~/api/interface';
import { leaseGoodsDetailsType } from '~/api/interface/rentManageType';
//租赁商品详情返回类型
type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
type goodsInfoForm = {
tradeName: string;
sellingPoint: string;
level: number;
shelfStatus: number;
};
interface selfProps {
ref: any;
rentGoodsDetails: rentGoodsDetailType | undefined;
}
const GoodsInfo = () => {
const GoodsInfo = forwardRef<any, selfProps>(({ rentGoodsDetails }, ref) => {
const qualityList = [
{
label: '全新',
......@@ -33,13 +42,41 @@ const GoodsInfo = () => {
];
const [form] = Form.useForm<goodsInfoForm>();
useImperativeHandle(ref, () => ({
submitGoodsInfoForm,
}));
const submitGoodsInfoForm = () => {
return new Promise((resolve, reject) => {
form
.validateFields()
.then((value) => {
resolve(value);
})
.catch((error) => {
reject(error);
});
});
};
useEffect(() => {
if (rentGoodsDetails) {
form.setFieldsValue({
tradeName: rentGoodsDetails.tradeName,
sellingPoint: rentGoodsDetails.sellingPoint,
level: rentGoodsDetails.level,
shelfStatus: rentGoodsDetails.shelfStatus,
});
}
}, [rentGoodsDetails]);
return (
<div className='goods-info'>
<div className='goods-info-title'>商品信息</div>
<Form
labelCol={{ span: 2 }}
wrapperCol={{ span: 10 }}
initialValues={{ level: 0 }}
initialValues={{ level: 0, shelfStatus: 1 }}
form={form}
>
<Form.Item
......@@ -74,5 +111,5 @@ const GoodsInfo = () => {
</Form>
</div>
);
};
});
export default GoodsInfo;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentAttr/index.scss
......@@ -4,4 +4,14 @@
font-weight: bold;
line-height: 40px;
}
.rent-goods-video-wrap{
position: relative;
width: 200px;
img{
position: absolute;
right: 0;
top: 0;
transform: translate(50%,-25%);
}
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/index.scss
.goods-info {
&-operate {
margin-top: 50px;
display: flex;
justify-content: center;
button {
width: 100px;
height: 40px;
&:first-child {
margin-right: 50px;
}
}
}
.rent-create-edit{
padding-bottom: 80px;
}
src/pages/rentManage/rentGoods/rentAddOrEdit/index.tsx
......@@ -2,17 +2,99 @@ import GoodsInfo from './components/goodsInfo';
import RentAttr from './components/rentAttr';
import SkuInfo from './components/skuInfo';
import AddressInfo from './components/addressInfo';
import FooterOperate from './components/footerOperate';
import AccessoryList from './components/accessoryList';
import './index.scss';
import { useEffect, useRef, useState } from 'react';
import { RentManageAPI } from '~/api';
import { filterObjAttr } from '~/utils';
import { message } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { InterDataType } from '~/api/interface';
import { leaseGoodsDetailsType } from '~/api/interface/rentManageType';
//租赁商品详情返回类型
type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
const RentAddOrEdit = () => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const goodsInfoRef = useRef<any>();
const rentAttrRef = useRef<any>();
const skuInfoRef = useRef<any>();
const accessoryListRef = useRef<any>();
const addressInfoRef = useRef<any>();
//租赁商品-编辑-id
const [rentGoodsId, setRentGoodsId] = useState<number>(-1);
//租赁-编辑-商品详情
const [rentGoodsDetails, setRentGoodsDetails] = useState<rentGoodsDetailType>();
// 保存
const saveRentGoods = () => {
Promise.all([
goodsInfoRef.current.submitGoodsInfoForm(),
rentAttrRef.current.submitAttrForm(),
skuInfoRef.current.skuFormSubmit(),
accessoryListRef.current.accessoryTableFormSubmit(),
addressInfoRef.current.addressInfoFormSubmit(),
]).then((values) => {
const resourcesList = [
{ type: 0, url: values[1].mainImage },
...(values[1].subImage?.map((v: string) => ({ type: 1, url: v })) || []),
...(values[1].goodsVideo ? [{ type: 2, url: values[1].goodsVideo }] : []),
];
values[2].priceStock = values[2].priceStock.map((v: any) => ({
...v,
stockOut: v.stockOut ? 1 : 0,
}));
RentManageAPI[rentGoodsId ? 'editLeaseGoods' : 'addRentGoods']({
...values[0],
...filterObjAttr(values[1], ['goodsImage', 'goodsVideo']),
...values[2],
leasePartsList: values[3],
...values[4],
resourcesList,
id: rentGoodsId ? rentGoodsId : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success(rentGoodsId ? '编辑成功' : '新增成功');
navigate(-1);
}
});
});
};
//获取租赁商品详情
const getRentGoodsDetail = (id: number) => {
RentManageAPI.getLeaseGoodsDetails({ id }).then(({ result }) => {
if (result) {
setRentGoodsDetails({ ...result });
}
});
};
useEffect(() => {
if (searchParams.get('id')) {
getRentGoodsDetail(Number(searchParams.get('id')));
setRentGoodsId(Number(searchParams.get('id')));
}
}, []);
return (
<div className='rent-create-edit'>
{/*商品信息*/}
<GoodsInfo />
<GoodsInfo ref={goodsInfoRef} rentGoodsDetails={rentGoodsDetails} />
{/*商品属性*/}
<RentAttr />
<RentAttr ref={rentAttrRef} rentGoodsDetails={rentGoodsDetails} />
{/*价格库存信息*/}
<SkuInfo />
<SkuInfo ref={skuInfoRef} rentGoodsDetails={rentGoodsDetails} />
{/*配件清单*/}
<AccessoryList ref={accessoryListRef} rentGoodsDetails={rentGoodsDetails} />
{/*物流信息*/}
<AddressInfo />
<AddressInfo ref={addressInfoRef} rentGoodsDetails={rentGoodsDetails} />
{/*底部操作栏*/}
<FooterOperate saveRentGoods={saveRentGoods} />
</div>
);
};
......
src/pages/rentManage/rentGoods/rentList/index.scss 0 → 100644
.rent-goods-info{
display: flex;
.info-meta{
margin-left: 5px;
word-break: break-all;
.title{
margin-bottom: 10px;
}
}
}
src/pages/systemManage/addressManage/components/addOrEditAddressModal/index.tsx 0 → 100644
import { Cascader, Form, Input, message, Modal, ModalProps, Switch } from 'antd';
import { FC, useEffect } from 'react';
import districtData from '~/assets/json/district.json';
import { InterDataType, InterReqType } from '~/api/interface';
import { addressInsetType, addressListType } from '~/api/interface/systemManageType';
import { SystemManageAPI } from '~/api';
interface selfProps {
onOk: () => void;
onCancel: () => void;
currentAddressItem?: addressType[0] | undefined;
}
//新增地址参数类型
type addAddressParameterType = Exclude<InterReqType<addressInsetType>, undefined>;
//地址列表返回类型
type addressType = InterDataType<addressListType>;
const AddOrEditAddressModal: FC<ModalProps & selfProps> = ({
open,
onCancel,
onOk,
currentAddressItem,
}) => {
const [form] = Form.useForm<
Omit<addAddressParameterType, 'takeRegion' | 'type' | 'districtCode'> & {
takeRegion: string[];
type: boolean;
districtCode: number[];
}
>();
const handleOk = () => {
form.validateFields().then((values) => {
SystemManageAPI[currentAddressItem ? 'editAddress' : 'addressInset']({
...values,
districtCode: values.districtCode[2].toString(),
takeRegion: getDistrictName(values.districtCode),
type: values.type ? 1 : 0,
id: currentAddressItem ? currentAddressItem.id : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success('新增地址成功');
form.resetFields();
onOk();
}
});
});
};
const handleCancel = () => {
onCancel();
};
//根据省市区code查询省市区名称
const getDistrictName = (codeArr: number[]) => {
const getFlatDistrictData = (districtData: any[]) => {
return districtData.reduce((pre: any, cur: any) => {
pre.push(cur);
if (cur.childInfo) {
pre.push(...getFlatDistrictData(cur.childInfo));
}
return pre;
}, []);
};
const flatDistrictData: any = getFlatDistrictData(districtData);
return codeArr.map((v) => flatDistrictData.find((i: any) => i.id === v)?.name).join('/');
};
useEffect(() => {
if (currentAddressItem) {
form.setFieldsValue({
takeName: currentAddressItem.takeName,
takePhone: currentAddressItem.takePhone,
districtCode: [
Number(currentAddressItem.districtCode.substring(0, 2) + '0000'),
Number(currentAddressItem.districtCode.substring(0, 4) + '00'),
Number(currentAddressItem.districtCode),
],
takeAddress: currentAddressItem.takeAddress,
type: !!currentAddressItem.type,
});
}
}, [currentAddressItem]);
return (
<Modal
open={open}
title={currentAddressItem ? '编辑地址' : '新增地址'}
onOk={handleOk}
onCancel={handleCancel}
>
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
<Form.Item label='姓名' name='takeName' rules={[{ required: true, message: '请输入姓名' }]}>
<Input placeholder='请输入姓名' maxLength={30} />
</Form.Item>
<Form.Item
label='手机号'
name='takePhone'
rules={[
{ required: true, message: '请输入手机号' },
// 校验手机号
() => ({
validator(_, value) {
if (!value || /^1[3-9]\d{9}$/.test(value)) {
return Promise.resolve();
}
return Promise.reject('请输入正确的手机号');
},
}),
]}
>
<Input placeholder='请输入手机号' maxLength={11} />
</Form.Item>
<Form.Item
label='所在地区'
name='districtCode'
rules={[{ required: true, message: '请选择所在地区' }]}
>
<Cascader
placeholder='请选择所在地区'
options={districtData}
fieldNames={{ label: 'name', value: 'id', children: 'childInfo' }}
/>
</Form.Item>
<Form.Item
label='详细地址'
name='takeAddress'
rules={[{ required: true, message: '请输入详细地址' }]}
>
<Input.TextArea rows={4} showCount placeholder='请输入详细地址' maxLength={70} />
</Form.Item>
<Form.Item label='设为默认地址' name='type'>
<Switch />
</Form.Item>
</Form>
</Modal>
);
};
export default AddOrEditAddressModal;
src/pages/systemManage/addressManage/index.tsx 0 → 100644
import SearchBox from '~/components/search-box';
import { Button, message, Modal, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import AddOrEditAddressModal from '~/pages/systemManage/addressManage/components/addOrEditAddressModal';
import { useEffect, useState } from 'react';
import { SystemManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { addressListType } from '~/api/interface/systemManageType';
//地址列表返回类型
type addressType = InterDataType<addressListType>;
const AddressManage = () => {
const tableColumns: ColumnsType<addressType[0]> = [
{
title: '姓名',
align: 'center',
dataIndex: 'takeName',
},
{
title: '电话',
align: 'center',
dataIndex: 'takePhone',
},
{
title: '所在地区',
align: 'center',
dataIndex: 'takeRegion',
},
{
title: '详细地址',
align: 'center',
dataIndex: 'takeAddress',
},
{
title: '状态',
align: 'center',
dataIndex: 'type',
render: (text: number) => (text ? '默认' : ''),
},
{
title: '操作',
align: 'center',
render: (_: any, record) => (
<>
<Button type='link' onClick={() => addOrEditAddressModalClick(record)}>
编辑
</Button>
<Button type='link' onClick={() => deleteAddressClick(record)}>
删除
</Button>
</>
),
},
];
const [addressList, setAddressList] = useState<addressType>([]);
const [addOrEditAddressModalShow, setAddOrEditAddressModalShow] = useState<boolean>(false);
const [currentAddressItem, setCurrentAddressItem] = useState<addressType[0]>();
const getAddressList = () => {
SystemManageAPI.getAddressList({}).then(({ result }) => {
setAddressList(result);
});
};
//新增，编辑地址
const addOrEditAddressModalClick = (record?: addressType[0]) => {
setCurrentAddressItem(record ? { ...record } : undefined);
setAddOrEditAddressModalShow(true);
};
const addOrEditAddressModalCancel = () => {
setAddOrEditAddressModalShow(false);
};
const addOrEditAddressModalOk = () => {
getAddressList();
setAddOrEditAddressModalShow(false);
};
//地址删除
const deleteAddressClick = (record: addressType[0]) => {
Modal.confirm({
title: '提示',
content: '确认删除该地址吗？',
onOk: () => {
SystemManageAPI.deleteAddress({ id: record.id }).then(({ code }) => {
if (code === '200') {
message.success('删除成功');
getAddressList();
}
});
},
});
};
useEffect(() => {
getAddressList();
}, []);
return (
<div className='address-manage'>
<SearchBox
child={
<Button
type='primary'
icon={<PlusOutlined />}
onClick={() => addOrEditAddressModalClick()}
>
新增地址
</Button>
}
/>
<Table bordered columns={tableColumns} dataSource={addressList} rowKey='id' />
{/*新增编辑地址*/}
<AddOrEditAddressModal
open={addOrEditAddressModalShow}
onCancel={addOrEditAddressModalCancel}
onOk={addOrEditAddressModalOk}
currentAddressItem={currentAddressItem}
/>
</div>
);
};
export default AddressManage;
src/router/router.tsx
......@@ -35,6 +35,7 @@ import {
BankOutlined,
VerifiedOutlined,
AccountBookOutlined,
EnvironmentOutlined,
} from '@ant-design/icons';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
......@@ -98,7 +99,8 @@ const ServiceIntroduceView = React.lazy(
); //服务介绍
const RentListView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentList')); //租赁列表
const RentAddOrEditView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentAddOrEdit')); //租赁新增、编辑、详情
const RentAddOrEditView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentAddOrEdit')); //租赁新增、编辑
const RentDetailView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentDetail')); //租赁详情
const RentTypeView = React.lazy(() => import('~/pages/rentManage/rentType')); //租赁-类型管理
const RentMakeView = React.lazy(() => import('~/pages/rentManage/rentMake')); //租赁-品牌管理
const RentModeView = React.lazy(() => import('~/pages/rentManage/rentMode')); //租赁-型号管理
......@@ -106,7 +108,7 @@ const RentModeView = React.lazy(() => import('~/pages/rentManage/rentMode')); //
const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
const MallAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'),
); //商城商品新增、编辑、租赁商品详情
); //商城商品新增、编辑
const MallGoodsDetailsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsDetails')); //商城商品（新）
const ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList')); //产品列表
......@@ -153,6 +155,7 @@ const CompanyDetailView = React.lazy(
import AccountLimit from '~/pages/systemManage/limitManage/roleList'; //账号权限
import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
import CustomListDetail from '~/pages/customManage/customList/detail';
const AddressManageView = React.lazy(() => import('~/pages/systemManage/addressManage'));
// const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
// const IndustryDetailView = React.lazy(
......@@ -734,17 +737,17 @@ export const routerList: Array<RouteObjectType> = [
hidden: true,
},
},
// {
// path: '/rentManage/rentGoods/detail',
// element: withLoadingComponent(<RentAddOrEditView />),
// errorElement: <ErrorPage />,
// meta: {
// id: 10136,
// icon: <SmileOutlined />,
// title: '租赁商品详情',
// hidden: true,
// },
// },
{
path: '/rentManage/rentGoods/detail',
element: withLoadingComponent(<RentDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10176,
icon: <SmileOutlined />,
title: '租赁商品详情',
hidden: true,
},
},
{
path: '/rentManage/rentType',
element: withLoadingComponent(<RentTypeView />),
......@@ -1163,6 +1166,17 @@ export const routerList: Array<RouteObjectType> = [
hidden: true,
},
},
{
path: '/systemManage/addressManage',
element: withLoadingComponent(<AddressManageView />),
errorElement: <ErrorPage />,
meta: {
id: 1450,
title: '地址管理',
icon: <EnvironmentOutlined />,
develop: true,
},
},
],
},
];
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论