Skip to content

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

功能：租赁订单

上级 109a33ba
正在显示 包含 850 行增加 和 427 行删除
src/api/interface/dataDashboardsType.ts
...@@ -46,6 +46,14 @@ export type releaseReportDataType = InterFunction< ...@@ -46,6 +46,14 @@ export type releaseReportDataType = InterFunction<
* 话题发布数量 * 话题发布数量
*/ */
topicReleaseCount?: number; topicReleaseCount?: number;
/**
* 招标信息数量
*/
tenderReleaseCount?: number;
/**
* 新闻发布数量
*/
newsReleaseCount?: number;
} }
>; >;
// 数据看板-加盟信息 // 数据看板-加盟信息
......
src/api/interface/orderManageType.ts
...@@ -1632,3 +1632,335 @@ export type uavPoSellerRemarkType = InterFunction< ...@@ -1632,3 +1632,335 @@ export type uavPoSellerRemarkType = InterFunction<
}, },
any any
>; >;
//租赁-订单列表
type rentReqType = {
deposit: number;
/**
* 卖家企业名称
*/
companyName?: string;
/**
* 确认收货时间
*/
confirmReceiptTime?: Date;
/**
* 下单时间
*/
createTime?: Date;
/**
* 租赁结束时间
*/
endDate?: Date;
/**
* id
*/
id: number;
kdnExpDTO?: {
logisticCode?: string;
shipperCode?: string;
stateEx?: string;
traces?: {
acceptStation?: string;
acceptTime?: string;
action?: string;
location?: string;
}[];
};
/**
* 租赁商品id
*/
leaseGoodsId?: number;
leaseRefundOrder?: {
/**
* 创建时间
*/
createTime?: Date;
/**
* 物流编号
*/
expressCode?: string;
/**
* 快递单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
leaseOrderId?: number;
/**
* 退款原因
*/
reason?: string;
/**
* 归还状态：0已归还 1无需归还
*/
status?: number;
};
/**
* 运费
*/
modeOfDeliveryInfo?: string;
/**
* 订单需付金额
*/
needPayAmount?: number;
/**
* 买家昵称
*/
nickname?: string;
/**
* 订单名称
*/
orderName?: string;
/**
* 订单编号
*/
orderNo?: string;
/**
* 订单实付总额
*/
orderTotalAmount?: number;
/**
* 其他方式支付额度
*/
otherAmount?: number;
/**
* 支付时间
*/
payTime?: Date;
/**
* wechatpay微信，alipay支付宝，offline线下
*/
payType?: string;
/**
* 买家手机号
*/
phoneNum?: string;
/**
* 评价状态
*/
remarkStatus?: number;
/**
* 抵扣佣金余额
*/
salaryAmount?: number;
/**
* 卖家备注
*/
sellerRemark?: string;
/**
* 抵扣云享金余额
*/
shareAmount?: number;
/**
* 订单规格列表
*/
sku: string;
/**
* sku图片
*/
skuImg?: string;
/**
* 租赁开始时间
*/
startDate?: Date;
/**
* 订单状态
*/
statusCode: number;
storeReceiveOrder?: {
/**
* 创建时间
*/
createTime?: Date;
/**
* 物流编号
*/
expressCode?: string;
/**
* 快递单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
leaseOrderId?: number;
/**
* 退款原因
*/
reason?: string;
/**
* 归还状态：0已归还 1无需归还
*/
status?: number;
};
/**
* 卖家id
*/
thirdBackUserAccountId?: number;
uavOrderExpressDTO?: {
/**
* id
*/
id?: number;
/**
* 是否已取件，0未取，1已取
*/
receive?: number;
/**
* 取件时间
*/
receiveTime?: Date;
/**
* 快递编码
*/
sendExpCode?: string;
/**
* 快递编号
*/
sendExpNo?: string;
/**
* 发货-平台操作发货时间
*/
sendTime?: Date;
/**
* 发货-收货详细地址
*/
takeAddress?: string;
/**
* 取货人
*/
takeName?: string;
/**
* 取货人号码
*/
takePhone?: string;
/**
* 地区信息
*/
takeRegion?: string;
/**
* 订单id
*/
uavOrderId?: number;
};
/**
* 最近修改时间
*/
updateTime?: Date;
/**
* 买家id
*/
userAccountId?: number;
/**
* 买家姓名
*/
userName?: string;
/**
* 买家备注
*/
userRemark?: string;
/**
* 购买数量
*/
wareNum: number;
shareCashPledge?: number;
salaryCashPledge?: number;
};
export type rentOrderListType = InterListFunction<
{
/**
* 结束时间
*/
endTime?: string;
/**
* 关键字-订单编号
*/
keyword?: string;
/**
* 开始时间
*/
startTime?: string;
/**
* 订单状态码
*/
statusCode?: number;
/**
* 用户uid
*/
uid?: string;
},
rentReqType
>;
// 租赁-订单字典
export type rentOrderDictType = InterFunction<
any,
{
status: string;
doing: string;
waiting: string;
leaseOrderStatus: null;
}[]
>;
// 租赁-订单详情
export type rentOrderDetailType = InterFunction<
{
/**
* id
*/
id: number;
},
rentReqType
>;
// 租赁订单-发货
export type rentOrderSendType = InterFunction<
{
id: number;
/**
* 快递编码
*/
sendExpCode: string;
/**
* 快递编号
*/
sendExpNo: string;
/**
* 发货-收货详细地址
*/
takeAddress: string;
/**
* 取货人
*/
takeName: string;
/**
* 取货人号码
*/
takePhone: string;
/**
* 地区信息
*/
takeRegion: string;
/**
* 订单id
*/
uavOrderId: number;
},
any
>;
src/api/modules/orderManage.ts
...@@ -38,6 +38,10 @@ import { ...@@ -38,6 +38,10 @@ import {
uavPoSendType, uavPoSendType,
uploadPOrderType, uploadPOrderType,
walletAmountType, walletAmountType,
rentOrderListType,
rentOrderDictType,
rentOrderSendType,
rentOrderDetailType,
} from '~/api/interface/orderManageType'; } from '~/api/interface/orderManageType';
export class OrderManageAPI { export class OrderManageAPI {
...@@ -158,4 +162,14 @@ export class OrderManageAPI { ...@@ -158,4 +162,14 @@ export class OrderManageAPI {
axios.get('/oms/uav-po/userRemark', { params }); axios.get('/oms/uav-po/userRemark', { params });
static setUavPoSellerRemark: uavPoSellerRemarkType = (params) => static setUavPoSellerRemark: uavPoSellerRemarkType = (params) =>
axios.get('/oms/uav-po/sellerRemark', { params }); axios.get('/oms/uav-po/sellerRemark', { params });
// 租赁-订单列表
static getRentOrderList: rentOrderListType = (data) => axios.post('/oms/lease/order/list', data);
// 租赁-订单字典
static getRentOrderDict: rentOrderDictType = () => axios.get('/oms/lease/order/statusList');
// 租赁-订单发货
static rentOrderSend: rentOrderSendType = (data) => axios.post('/oms/lease/order/send', data);
// 租赁-订单详情
static getRentOrderDetail: rentOrderDetailType = (params) =>
axios.get('/oms/lease/order/detail', { params });
} }
src/pages/dataDashboards/components/userInfo/index.scss
...@@ -98,7 +98,7 @@ $design_height:856; ...@@ -98,7 +98,7 @@ $design_height:856;
} }
} }
.card-info{ .card-info{
margin-bottom: 26px; margin-bottom: 10px;
display: flex; display: flex;
padding: 0 40px 0 35px; padding: 0 40px 0 35px;
display: flex; display: flex;
......
src/pages/dataDashboards/components/userInfo/index.tsx
...@@ -93,6 +93,14 @@ const UserInfo = () => { ...@@ -93,6 +93,14 @@ const UserInfo = () => {
<div className='label'>订单发布</div> <div className='label'>订单发布</div>
<div className='value'>{releaseReportData?.orderReleaseCount}</div> <div className='value'>{releaseReportData?.orderReleaseCount}</div>
</div> </div>
<div className='card-info'>
<div className='label'>新闻发布</div>
<div className='value'>{releaseReportData?.newsReleaseCount}</div>
</div>
<div className='card-info'>
<div className='label'>招投标发布</div>
<div className='value'>{releaseReportData?.tenderReleaseCount}</div>
</div>
</div> </div>
</div> </div>
); );
......
src/pages/orderManage/equipmentOrder/comp/confirmReturn/index.tsx 0 → 100644
import { Form, Input, Modal, ModalProps, Radio } from 'antd';
import { FC } from 'react';
import { InterDataType } from '~/api/interface';
import { rentOrderDetailType } from '~/api/interface/orderManageType';
// 租赁订单详情返回类型
type detailType = InterDataType<rentOrderDetailType>;
interface selfProps {
onOk: () => void;
onCancel: () => void;
currentOrderItem: detailType | undefined;
}
const ConfirmReturn: FC<ModalProps & selfProps> = ({ open, onOk, onCancel }) => {
const [form] = Form.useForm<{ damage: number; reason: string }>();
const handleOk = () => {
onOk();
};
const handleCancel = () => {
onCancel();
};
return (
<Modal open={open} title='确认归还' onOk={handleOk} onCancel={handleCancel}>
<Form initialValues={{ damage: 0 }} form={form}>
<Form.Item label='判定' name='damage'>
<Radio.Group>
<Radio value={0}>未破损</Radio>
<Radio value={1}>破损</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='原因' name='reason'>
<Input.TextArea placeholder='请输入原因' maxLength={70} showCount rows={3} />
</Form.Item>
<Form.Item label='图片'>
<div className='image-file'>{}</div>
</Form.Item>
</Form>
</Modal>
);
};
export default ConfirmReturn;
src/pages/orderManage/equipmentOrder/comp/orderDeliver/index.tsx deleted 100644 → 0
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, sendOrderWareType } from '~/api/interface/orderManageType';
import React, { useEffect } from 'react';
import { Col, Form, Input, message, Modal, Radio, Row, Select } from 'antd';
import { Uploader } from '~/components/uploader';
import { PlusOutlined } from '@ant-design/icons';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<sendOrderWareType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderDeliver: React.FC<propType> = (props) => {
OrderDeliver.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
// console.log('确认事件 --->', values);
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await OrderManageAPI.sendOrderWare({
...values,
orderInfoId: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
getListExpressInfo().then();
// console.log('data --->', data);
}, [open]);
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={600}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
autoComplete='new-password'
>
<Form.Item label='收货地址' labelCol={{ span: 4 }}>
{data?.receipt?.takeName} {data?.receipt?.takePhone} {data?.receipt?.detailAddress}
</Form.Item>
<Form.Item label='发货方式' labelCol={{ span: 4 }}>
物流发货
</Form.Item>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='物流单号'
name='sendExNo'
rules={[{ required: true, message: '请输入物流单号' }]}
>
<Input placeholder={'请输入物流单号'} maxLength={20} allowClear />
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='物流公司'
name='sendExCode'
rules={[{ required: true, message: '请选择物流公司' }]}
>
<Select placeholder={'请选择物流公司'} options={expressList} allowClear />
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='归还联系人'
name='renName'
rules={[{ required: true, message: '请输入归还联系人' }]}
>
<Input placeholder={'请输入归还联系人'} maxLength={20} allowClear />
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='归还电话'
name='renPhone'
rules={[
{ required: true, message: '请输入归还联系人电话' },
// 校验手机号
() => ({
validator(_, value) {
if (!value || /^1[3-9]\d{9}$/.test(value)) {
return Promise.resolve();
}
return Promise.reject('请输入正确的手机号');
},
}),
]}
>
<Input
placeholder={'请输入归还联系人电话'}
maxLength={20}
allowClear
type={'number'}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='归还地址'
name='renAddress'
rules={[{ required: true, message: '请输入归还地址' }]}
>
<Input placeholder={'请输入归还地址'} maxLength={20} allowClear />
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='质检照片'
name='imgs'
rules={[{ required: true, message: '请上传质检照片' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={3}
onChange={(e) => {
form.setFieldValue(
'imgs',
e.map((item) => item.url),
);
}}
>
<PlusOutlined />
</Uploader>
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='质检视频'
name='videoUrl'
rules={[{ required: true, message: '请上传质检视频' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
fileSize={10}
onChange={(e) => {
form.setFieldValue('videoUrl', e[0].url);
}}
>
<PlusOutlined />
</Uploader>
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='设备状态'
name='vcuSatus'
rules={[{ required: true, message: '请选择设备状态' }]}
initialValue={0}
>
<Radio.Group
options={[
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
]}
onChange={(e) => {
form.setFieldValue('vcuSatus', e.target.value);
}}
/>
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='操作密码'
name='authPwd'
rules={[{ required: true, message: '请输入操作密码' }]}
>
<Input.Password
placeholder={'请输入操作密码'}
maxLength={20}
allowClear
autoComplete='new-password'
/>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
);
};
export default OrderDeliver;
src/pages/orderManage/equipmentOrder/comp/shipmentsOrder/index.tsx 0 → 100644
import { FC, useEffect, useState } from 'react';
import { Cascader, Form, Input, message, Modal, ModalProps, Select } from 'antd';
import { OrderManageAPI } from '~/api';
import { InterReqType } from '~/api/interface';
import { rentOrderSendType } from '~/api/interface/orderManageType';
import regionData from '~/assets/json/district.json';
// 发货请求类型
type sendMallType = Omit<Exclude<InterReqType<rentOrderSendType>, undefined>, 'takeRegion'> & {
takeRegion: string[];
};
interface selfProps {
currentOrderItem: any;
onCancel: () => void;
onOk: () => void;
}
const ShipmentsOrder: FC<ModalProps & selfProps> = ({ onOk, onCancel, open, currentOrderItem }) => {
const [form] = Form.useForm<sendMallType>();
const [listExpressInfo, setListExpressInfo] = useState<{ label: string; value: string }[]>([]);
//获取物流公司列表
const getExpressList = () => {
OrderManageAPI.listExpressInfo().then(({ result }) => {
setListExpressInfo(result?.map((v) => ({ label: v.exName, value: v.exCode })) || []);
});
};
const handleOk = () => {
form.validateFields().then((value) => {
OrderManageAPI.rentOrderSend({
...value,
uavOrderId: currentOrderItem?.id,
id: currentOrderItem?.uavOrderExpressDTO.id,
takeRegion: value?.takeRegion?.join('/'),
}).then(({ code }) => {
if (code === '200') {
message.success('发货成功');
form.resetFields();
onOk();
}
});
});
};
const handleCancel = () => {
form.resetFields();
onCancel();
};
useEffect(() => {
if (open) {
getExpressList();
}
}, [open]);
useEffect(() => {
if (currentOrderItem && open) {
form.setFieldsValue({
takeName: currentOrderItem.uavOrderExpressDTO.takeName,
takePhone: currentOrderItem.uavOrderExpressDTO.takePhone,
takeRegion: currentOrderItem.uavOrderExpressDTO.takeRegion.split('/'),
takeAddress: currentOrderItem.uavOrderExpressDTO.takeAddress,
});
}
}, [currentOrderItem]);
return (
<Modal open={open} title='发货' onOk={handleOk} onCancel={handleCancel}>
<Form
name='basic'
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
autoComplete='off'
form={form}
>
<Form.Item
label='物流公司'
name='sendExpCode'
rules={[
{
required: true,
message: '请选择物流公司',
},
]}
>
<Select placeholder='请选择物流公司' allowClear options={listExpressInfo}></Select>
</Form.Item>
<Form.Item
label='物流编号'
name='sendExpNo'
rules={[
{
required: true,
message: '请输入物流编号',
},
]}
>
<Input placeholder='请输入物流编号' allowClear maxLength={50} />
</Form.Item>
<Form.Item
label='用户姓名'
name='takeName'
rules={[
{
required: true,
message: '请输入用户姓名',
},
]}
>
<Input placeholder='请输入用户姓名' allowClear maxLength={30} />
</Form.Item>
<Form.Item
label='手机号'
name='takePhone'
rules={[
{
required: true,
message: '请输入手机号',
},
{
pattern: /^1[3-9]\d{9}$/,
message: '手机号格式不正确',
},
]}
>
<Input placeholder='请输入手机号' allowClear maxLength={30} />
</Form.Item>
<Form.Item
label='收货地址'
name='takeRegion'
rules={[
{
required: false,
message: '请选择收货地址',
},
]}
>
<Cascader
options={regionData}
placeholder='请选择收货地址'
allowClear
fieldNames={{
label: 'name',
value: 'name',
children: 'childInfo',
}}
/>
</Form.Item>
<Form.Item
label='详细地址'
name='takeAddress'
rules={[
{
required: false,
message: '请输入详细地址',
},
]}
>
<Input.TextArea maxLength={70} showCount placeholder='请输入详细地址' allowClear />
</Form.Item>
</Form>
</Modal>
);
};
export default ShipmentsOrder;
src/pages/orderManage/equipmentOrder/detail/index.tsx
...@@ -7,20 +7,19 @@ import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurch ...@@ -7,20 +7,19 @@ import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurch
import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation'; import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation';
import { OrderManageAPI } from '~/api'; import { OrderManageAPI } from '~/api';
import { InterDataType } from '~/api/interface'; import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType'; import { rentOrderDetailType } from '~/api/interface/orderManageType';
import DetailTimeLine from '~/pages/orderManage/equipmentOrder/comp/detailTimeLine'; import DetailTimeLine from '~/pages/orderManage/equipmentOrder/comp/detailTimeLine';
// import DetailMessageBox from '~/pages/orderManage/equipmentOrder/comp/detailMessageBox';
// 接口返回的类型 // 接口返回的类型
type DataType = InterDataType<orderDetailType>; type DataType = InterDataType<rentOrderDetailType>;
function EquipmentOrderDetail() { function EquipmentOrderDetail() {
// 路由钩子 // 路由钩子
const navigate = useNavigate(); const navigate = useNavigate();
// 参数钩子 // 参数钩子
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
// 接收到的参数 // 订单id
const orderNo = searchParams.get('orderNo') as string; const [orderId, setOrderId] = useState<number>(0);
// 返回上一页 // 返回上一页
const handleBack = () => { const handleBack = () => {
navigate(-1); navigate(-1);
...@@ -28,19 +27,20 @@ function EquipmentOrderDetail() { ...@@ -28,19 +27,20 @@ function EquipmentOrderDetail() {
// 订单详情 // 订单详情
const [orderDetail, setOrderDetail] = useState<DataType>(null!); const [orderDetail, setOrderDetail] = useState<DataType>(null!);
// 获取订单详情 // 获取订单详情
const getOrderDetail = async () => { const getOrderDetail = (id: number) => {
const res = await OrderManageAPI.orderDetail({ OrderManageAPI.getRentOrderDetail({
orderNo: orderNo, id,
}).then(({ result }) => {
if (result) {
setOrderDetail(result);
}
}); });
if (res && res.code === '200') {
setOrderDetail(res.result);
// console.log('获取订单详情 --->', res.result);
}
}; };
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
getOrderDetail().then(); setOrderId(Number(searchParams.get('id') || 0));
}, [orderNo]); getOrderDetail(Number(searchParams.get('id') || 0));
}, []);
return ( return (
<div className={'order-detail'}> <div className={'order-detail'}>
<div className={'order-head'}> <div className={'order-head'}>
......
src/pages/orderManage/equipmentOrder/index.scss 0 → 100644
.equipment-order{
.mall-sku-item{
display: flex;
align-items: center;
margin-bottom: 10px;
.sku-img{
width: 48px;
height: 48px;
}
.sku-info{
margin-left: 10px;
line-height: 16px;
text-align: left;
.info-name{
color:#1677ff
}
.info-spec{
margin-top: 10px;
span:not(:last-child){
&:after{
content: '；';
}
}
}
}
}
}
src/pages/orderManage/equipmentOrder/index.tsx
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import SearchBox from '~/components/search-box'; import SearchBox from '~/components/search-box';
import { Button, Image, Table, Tooltip } from 'antd'; import { Button, Image, Table } from 'antd';
import { ColumnsType } from 'antd/es/table'; import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import qs from 'query-string'; import qs from 'query-string';
import { InterListType, InterReqType } from '~/api/interface'; import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType } from '~/api/interface/orderManageType'; import { rentOrderListType } from '~/api/interface/orderManageType';
import { OrderManageAPI } from '~/api'; import { OrderManageAPI } from '~/api';
import OrderDeliver from 'src/pages/orderManage/equipmentOrder/comp/orderDeliver'; import ShipmentsOrder from './comp/shipmentsOrder';
import ConfirmReturn from './comp/confirmReturn';
import OrderConfirm from '~/pages/orderManage/equipmentOrder/comp/orderConfirm'; import OrderConfirm from '~/pages/orderManage/equipmentOrder/comp/orderConfirm';
import OrderClosed from '~/pages/orderManage/equipmentOrder/comp/orderClosed'; import OrderClosed from '~/pages/orderManage/equipmentOrder/comp/orderClosed';
import OrderRefund from '~/pages/orderManage/equipmentOrder/comp/orderRefund'; import OrderRefund from '~/pages/orderManage/equipmentOrder/comp/orderRefund';
import TableItem from '~/components/order/selfTableItem';
import './index.scss';
import { filterObjAttr } from '~/utils';
import dayjs from 'dayjs';
// 表格数据类型 // 表格数据类型
type TableType = InterListType<listPcWechatOrderType>; type TableType = InterListType<rentOrderListType>;
// 请求数据的类型 // 请求数据的类型
type ReqType = InterReqType<listPcWechatOrderType>; type ReqType = InterReqType<rentOrderListType>;
// 搜索表单的数据 // 搜索表单的数据
let query: ReqType = {}; let query: ReqType = {};
// 订单状态
const orderStatus = [
{ value: '100', label: '等待买家付款', button: '关闭订单' },
{ value: '200', label: '等待卖家发货', button: '去发货' },
{ value: '300', label: '待买家收货' },
{ value: '400', label: '待归还' },
{ value: '500', label: '等待卖家确认', button: '确认收货' },
{ value: '600', label: '交易完成' },
{ value: '700', label: '退款中', button: '退款审批' },
{ value: '999', label: '订单关闭' },
{ value: '1000', label: '已取消' },
];
function EquipmentOrderView() { function EquipmentOrderView() {
// 路由钩子 // 路由钩子
const navigate = useNavigate(); const navigate = useNavigate();
// 发货弹窗是否显示 // 发货弹窗是否显示
const [deliverVisible, setDeliverVisible] = useState<boolean>(false); const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
// 确认归还
const [confirmReturnShow, setConfirmReturnShow] = useState<boolean>(false);
// 收货弹窗是否显示 // 收货弹窗是否显示
const [confirmVisible, setConfirmVisible] = useState<boolean>(false); const [confirmVisible, setConfirmVisible] = useState<boolean>(false);
// 关闭弹窗是否显示 // 关闭弹窗是否显示
...@@ -58,18 +53,17 @@ function EquipmentOrderView() { ...@@ -58,18 +53,17 @@ function EquipmentOrderView() {
// 表格数据 // 表格数据
const [tableData, setTableData] = useState<TableType>([]); const [tableData, setTableData] = useState<TableType>([]);
// 需要编辑的数据 // 需要编辑的数据
const [editData, setEditData] = useState<TableType[0]>(); // 用于编辑 const [currentOrderItem, setCurrentOrderItem] = useState<TableType[0]>();
// 加载列表 // 加载列表
const getTableList = async (value = {}) => { const getTableList = (value = {}) => {
// 只需要修改这个地方的接口即可 // 只需要修改这个地方的接口即可
const res = await OrderManageAPI.listPcWechatOrder({ OrderManageAPI.getRentOrderList({
pageNo: pagination.current, pageNo: pagination.current,
pageSize: pagination.pageSize, pageSize: pagination.pageSize,
...value, ...value,
...query, ...query,
}); }).then(({ result }) => {
if (res && res.code === '200') { const { list, pageNo, totalCount, pageSize, totalPage } = result; // 解构
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({ setPagination({
total: totalCount, total: totalCount,
current: pageNo, current: pageNo,
...@@ -77,18 +71,17 @@ function EquipmentOrderView() { ...@@ -77,18 +71,17 @@ function EquipmentOrderView() {
totalPage, totalPage,
}); });
setTableData(list); setTableData(list);
// console.log('加载列表 --->', list); });
}
}; };
// 翻页 // 翻页
const paginationChange = (pageNo: number, pageSize: number) => { const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then(); getTableList({ pageNo, pageSize });
}; };
// 表单提交 // 表单提交
const onFinish = (data: ReqType) => { const onFinish = (data: ReqType) => {
pagination.current = 1; pagination.current = 1;
query = data; query = filterObjAttr(data, ['rangeTime']);
getTableList(data).then(); getTableList(query);
}; };
// 订单状态筛选 // 订单状态筛选
const statusChangeEvent = (i: number) => { const statusChangeEvent = (i: number) => {
...@@ -97,8 +90,8 @@ function EquipmentOrderView() { ...@@ -97,8 +90,8 @@ function EquipmentOrderView() {
} else { } else {
setStatusCodeButtonIndex(i); setStatusCodeButtonIndex(i);
} }
query = { ...query, tranStatus: tranStatusList[i].value }; query = { ...query, statusCode: Number(tranStatusList[i].value) };
getTableList().then(); getTableList();
}; };
// 跳转订单详情 // 跳转订单详情
const handleDetail = (record: TableType[0]) => { const handleDetail = (record: TableType[0]) => {
...@@ -106,129 +99,211 @@ function EquipmentOrderView() { ...@@ -106,129 +99,211 @@ function EquipmentOrderView() {
navigate(`/orderManage/equipmentOrder/detail?${qs.stringify(search)}`); navigate(`/orderManage/equipmentOrder/detail?${qs.stringify(search)}`);
}; };
// 获取订单状态 // 获取订单状态
const getOrderStatus = async () => { const getOrderStatus = () => {
const res = await OrderManageAPI.listTranStatus({}); OrderManageAPI.getRentOrderDict().then(({ result }) => {
if (res && res.code === '200') { const arr = result.map((item) => ({ value: item.status, label: item.waiting }));
const arr = res.result.map((item) => ({ value: item.status, label: item.waiting }));
setTranStatusList([{ value: undefined, label: '全部订单' }, ...arr]); setTranStatusList([{ value: undefined, label: '全部订单' }, ...arr]);
// console.log('getOrderStatus --->', arr); });
}
};
// 是否显示按钮
const showStatusButton = (code: string) => {
return orderStatus
.filter((i) => i.button)
.map((i) => i.value)
.includes(code);
};
// 转化按钮文字
const getStatusButton = (code: string) => {
return orderStatus.filter((i) => i.button).find((i) => i.value === code)?.button || code;
};
// 点击事件
const handleAction = (data: TableType[0]) => {
const { tranStatus } = data;
setEditData(data);
if (tranStatus === '100') {
setClosedVisible(true);
}
if (tranStatus === '200') {
setDeliverVisible(true);
}
if (tranStatus === '500') {
setConfirmVisible(true);
}
if (tranStatus === '700') {
setRefundVisible(true);
}
}; };
// 关闭弹窗 // 获取租赁订单详情
const handleClosed = () => { const getRentDetail = (id: number) => {
setEditData(undefined); OrderManageAPI.getRentOrderDetail({ id }).then(({ result }) => {
setDeliverVisible(false); if (result) {
setConfirmVisible(false); setCurrentOrderItem(result);
setClosedVisible(false); }
setRefundVisible(false); });
paginationChange(pagination.current, pagination.pageSize);
}; };
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
query = {}; query = {};
getOrderStatus().then(); getOrderStatus();
getTableList().then(); getTableList();
}, []); }, []);
// 操作按钮列表
const operateBtnList = [
{
label: '发货',
status: 200,
onClick: (item: TableType[0]) => {
getRentDetail(item.id);
setDeliverVisible(true);
},
},
{
label: '确认归还',
status: 500,
onClick: (item: TableType[0]) => {
getRentDetail(item.id);
setConfirmReturnShow(true);
},
},
{
label: '确认退款',
status: 800,
onClick: (item: TableType[0]) => {},
},
];
// 获取当前按钮对象
const getOperateBtnItem = (code: number) => {
return operateBtnList.find((i) => i.status === code);
};
// 发货
const shipmentsOrderOk = () => {
setDeliverVisible(false);
getTableList(query);
};
const shipmentsOrderCancel = () => {
setDeliverVisible(false);
};
//确认归还
const confirmReturnCancel = () => {
setConfirmReturnShow(false);
};
const confirmReturnOk = () => {
setConfirmReturnShow(false);
};
// 表格结构 // 表格结构
const columns: ColumnsType<TableType[0]> = [ const columns: ColumnsType<TableType[0]> = [
{ {
title: '商品', title: '商品',
dataIndex: 'wareTitle',
align: 'center', align: 'center',
width: 250, width: '20%',
render: (_text, record) => ( render: (_text, record) => (
<div style={{ display: 'flex', alignItems: 'center' }}> <TableItem
<Image src={record.wareImg} style={{ width: 48, height: 48 }} /> tr={
<div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}> <div className='mall-sku-item'>
<div style={{ color: '#1677ff' }}>{record.wareTitle}</div> <Image src={record.skuImg} className='sku-img' />
<div>{record.wareNo}</div> <div className='sku-info'>
<div>订单编号：{record.orderNo}</div> <div className='info-name'>{record.orderName}</div>
<div>创建时间：{record.createTime}</div> <div className='info-spec'>
</div> {Object.entries(JSON.parse(record.sku)).map((v, index) => (
</div> <span key={index}>{v.join('：')}</span>
))}
</div>
</div>
</div>
}
td={
<div>
<span>订单编号：</span>
<span>{record.orderNo}</span>
</div>
}
/>
), ),
}, },
{ {
title: '单价(元)', title: '租期',
dataIndex: 'unitPrice',
align: 'center', align: 'center',
render: (text) => `￥${text.toLocaleString()}`, width: '20%',
render: (_text, record) => (
<TableItem
tr={
<div>
<div>{`${record.startDate}至${record.endDate}`}</div>
<div>({dayjs(record.endDate).diff(dayjs(record.startDate), 'day')}天)</div>
</div>
}
td={<div>{`创建时间:${record.createTime}`}</div>}
/>
),
}, },
{ {
title: '数量', title: '数量',
align: 'center',
dataIndex: 'wareNum', dataIndex: 'wareNum',
render: (text) => <TableItem tr={text} />,
},
{
title: '单价',
align: 'center', align: 'center',
dataIndex: 'unitPrice',
render: (text) => <TableItem tr={<span>¥{text?.toLocaleString()}</span>} />,
}, },
{ {
title: '买家', title: '买家',
dataIndex: 'userName',
align: 'center', align: 'center',
width: '130px', width: '130px',
render: (_text, record) => ( render: (_text, record) => (
<> <TableItem
<div>{record.uid}</div> tr={
<div> <div>
{record.buyerName || record.nickName}({record.buyerPhone}) <div>{record.userName}</div>
</div> </div>
</> }
/>
), ),
}, },
{ {
title: '订单状态', title: '订单状态',
dataIndex: 'waiting', dataIndex: 'statusCode',
align: 'center', align: 'center',
render: (text: number) => (
<TableItem tr={tranStatusList.find((v) => v.value === String(text))?.label} />
),
}, },
{ {
title: '实收款', title: '押金',
dataIndex: 'shouldPay', dataIndex: 'deposit',
align: 'center', align: 'center',
render: (text) => `￥${text.toLocaleString()}`, width: '10%',
render: (text: number, record) => (
<TableItem
tr={
<div>
<div>￥{(text * record.wareNum).toLocaleString()}</div>
<div>
{record.shareCashPledge ? (
<span>云享金抵扣：￥{record.shareCashPledge.toLocaleString()}</span>
) : (
''
)}
{record.salaryCashPledge ? (
<span>余额抵扣：￥{record.salaryCashPledge.toLocaleString()}</span>
) : (
''
)}
</div>
</div>
}
/>
),
}, },
{ {
title: '相关运营', title: '实付款',
dataIndex: 'userName', dataIndex: 'orderTotalAmount',
align: 'center', align: 'center',
render: (_text, _record) => `--`, width: '10%',
render: (text, record) => (
<TableItem
tr={
<div>
<div>￥{text.toLocaleString()}</div>
<div>
{record.shareAmount ? (
<span>云享金抵扣：￥{record.shareAmount.toLocaleString()}</span>
) : (
''
)}
{record.salaryAmount ? (
<span>余额抵扣：￥{record.salaryAmount.toLocaleString()}</span>
) : (
''
)}
</div>
</div>
}
/>
),
}, },
{ {
title: '推荐人', title: '推荐人',
dataIndex: 'userName', dataIndex: 'userName',
align: 'center', align: 'center',
render: (_text, _record) => `--`, render: (_text, _record) => <TableItem tr={''} />,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
}, },
{ {
title: '备注', title: '备注',
...@@ -236,60 +311,57 @@ function EquipmentOrderView() { ...@@ -236,60 +311,57 @@ function EquipmentOrderView() {
align: 'center', align: 'center',
ellipsis: true, ellipsis: true,
width: '100px', width: '100px',
render: (text) => ( render: (text) => <TableItem tr={text} />,
<Tooltip placement='top' title={text}>
<div className='remark-wrap'>{text}</div>
</Tooltip>
),
}, },
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center',
fixed: 'right', fixed: 'right',
width: '130px', width: '130px',
onHeaderCell: () => ({
style: {
textAlign: 'center',
},
}),
onCell: () => ({
style: {
textAlign: 'right',
},
}),
render: (_text, record) => ( render: (_text, record) => (
<> <TableItem
{showStatusButton(record?.tranStatus) && ( tr={
<Button <>
type={'link'} {getOperateBtnItem(record.statusCode) ? (
disabled={['999', '1000'].includes(record?.tranStatus)} <Button
onClick={() => handleAction(record)} type='link'
> onClick={() => getOperateBtnItem(record.statusCode)?.onClick(record)}
{getStatusButton(record?.tranStatus)} >
</Button> {getOperateBtnItem(record.statusCode)?.label}
)} </Button>
<Button type={'link'} onClick={() => handleDetail(record)}> ) : (
详情 ''
</Button> )}
</> <Button type='link' onClick={() => handleDetail(record)}>
详情
</Button>
</>
}
/>
), ),
}, },
]; ];
return ( return (
<> <div className='equipment-order'>
<SearchBox <SearchBox
search={[ search={[
{ {
label: '订单编号', label: '关键字',
name: 'orderNo', name: 'keyword',
type: 'input', type: 'input',
placeholder: '请输入订单编号', placeholder: '请输入订单编号',
}, },
{ {
label: '买家账号',
name: 'buyerAccount',
type: 'input',
placeholder: '请输入用户账号',
},
{
label: '相关销售',
name: 'saleId',
type: 'Select',
placeholder: '请选择相关销售',
options: [],
},
{
label: '时间', label: '时间',
name: 'rangeTime', name: 'rangeTime',
type: 'rangePicker', type: 'rangePicker',
...@@ -331,25 +403,27 @@ function EquipmentOrderView() { ...@@ -331,25 +403,27 @@ function EquipmentOrderView() {
}} }}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }} // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/> />
{/*发货弹窗*/} {/*发货*/}
<OrderDeliver <ShipmentsOrder
open={deliverVisible} open={deliverVisible}
title={'卖家发货'} currentOrderItem={currentOrderItem}
data={editData} onCancel={shipmentsOrderOk}
closed={handleClosed} onOk={shipmentsOrderCancel}
/> />
{/*收货弹窗*/} {/*确认归还*/}
<OrderConfirm <ConfirmReturn
open={confirmVisible} open={confirmReturnShow}
title={'确认收货'} onOk={confirmReturnOk}
data={editData} onCancel={confirmReturnCancel}
closed={handleClosed} currentOrderItem={currentOrderItem}
/> />
{/*关闭订单*/} {/*收货弹窗*/}
<OrderClosed open={closedVisible} title={'关闭订单'} data={editData} closed={handleClosed} /> {/*<OrderConfirm open={confirmVisible} title={'确认收货'} data={editData} closed={} />*/}
{/*退款弹窗*/} {/*/!*关闭订单*!/*/}
<OrderRefund open={refundVisible} title={'退款审批'} data={editData} closed={handleClosed} /> {/*<OrderClosed open={closedVisible} title={'关闭订单'} data={editData} closed={} />*/}
</> {/*/!*退款弹窗*!/*/}
{/*<OrderRefund open={refundVisible} title={'退款审批'} data={editData} closed={} />*/}
</div>
); );
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论