提交 850dee5d 作者: 龚洪江

Merge branch 'develop'

# Conflicts:
#	src/api/interface/dataDashboardsType.ts
......@@ -14,4 +14,4 @@ patches:
images:
- name: REGISTRY/NAMESPACE/IMAGE:TAG
newName: mmc-registry.cn-shenzhen.cr.aliyuncs.com/sharefly-dev/admin
newTag: 6fbb4c210cb5b7bffe02b2d4e1e5d440b72d5241
newTag: d56a5b90a7944c70db606f48b90da8bfea6d1730
......@@ -46,8 +46,14 @@ export type releaseReportDataType = InterFunction<
* 话题发布数量
*/
topicReleaseCount?: number;
newsReleaseCount?: number;
/**
* 招标信息数量
*/
tenderReleaseCount?: number;
/**
* 新闻发布数量
*/
newsReleaseCount?: number;
}
>;
// 数据看板-加盟信息
......
......@@ -1632,3 +1632,457 @@ export type uavPoSellerRemarkType = InterFunction<
},
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;
}[];
};
returnKdnExpDTO?: {
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;
};
storeDamageOrder?: {
/**
* 创建时间
*/
createTime?: Date;
/**
* 物流编号
*/
expressCode?: string;
/**
* 快递单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
leaseOrderId?: number;
/**
* 退款原因
*/
reason?: string;
/**
* 归还状态:0已归还 1无需归还
*/
status?: number;
modifiedDeposit?: number;
};
confirmReceipt?: {
/**
* 创建时间
*/
createTime?: string;
/**
* 物流编号
*/
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
>;
// 租赁订单-平台确认归还
export type rentPfConfirmOrderWareType = InterFunction<
{
/**
* 商家确认商品是否破损 0:未破损 1:破损
*/
damage?: number;
/**
* 扣除的押金
*/
deductionAmount?: number;
/**
* 物流编码
*/
expressCode?: string;
/**
* 物流单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
orderId?: number;
/**
* 原因
*/
reason?: string;
/**
* 归还状态 0已归还 1无需归还(注:发货后申请退款需要传,归还商品的时候不需要)
*/
status?: number;
},
any
>;
......@@ -38,6 +38,11 @@ import {
uavPoSendType,
uploadPOrderType,
walletAmountType,
rentOrderListType,
rentOrderDictType,
rentOrderSendType,
rentOrderDetailType,
rentPfConfirmOrderWareType,
} from '~/api/interface/orderManageType';
export class OrderManageAPI {
......@@ -158,4 +163,17 @@ export class OrderManageAPI {
axios.get('/oms/uav-po/userRemark', { params });
static setUavPoSellerRemark: uavPoSellerRemarkType = (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 });
// 租赁订单-平台确认归还
static rentPfConfirmOrderWare: rentPfConfirmOrderWareType = (data) =>
axios.post('/oms/lease/order/pfConfirmOrderWare', data);
}
import { useEffect, useState } from 'react';
import { Header } from 'antd/es/layout/layout';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Dropdown, Image, MenuProps, Modal } from 'antd';
import { DownOutlined, LogoutOutlined, UpOutlined, VerifiedOutlined } from '@ant-design/icons';
import { Button, Dropdown, Image, Modal } from 'antd';
import Logo from '../../../assets/icon/logo_big.png';
import './index.scss';
import { REMOVE_MENU, REMOVE_MENU_ID, SET_COLLAPSE } from '~/store/module/menu';
import { REMOVE_MENU, REMOVE_MENU_ID, SET_COLLAPSE, REMOVE_REQ_MENU } from '~/store/module/menu';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import Cookies from 'js-cookie';
import { FddInterfaceAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { userFddInfoType } from '~/api/interface/fddInterfaceType';
import { decode } from 'js-base64';
import { isRouteById } from '~/utils/isRoute';
// fdd实名认证信息类型
type fddAuthType = InterDataType<userFddInfoType>;
......@@ -29,6 +31,7 @@ export function TitleView() {
// 用户信息
const { userInfo } = useSelector((state: any) => state.UserInfo);
const { reqMenuList } = useSelector((state: any) => state.Menu);
// 菜单栏收起
const setMenuCollapsed = () => {
setIsActive(!isActive);
......@@ -42,14 +45,23 @@ export function TitleView() {
}
});
};
// 获取第三方认证连接
const getCompanyVerifyUrl = () => {
FddInterfaceAPI.getCompanyVerifyUrl({ port: 1 }).then(({ result }) => {
if (result) {
window.open(decode(result), '_blank');
}
});
};
// 右上角按钮
const items: MenuProps['items'] = [
const [items, setItems] = useState<any>([
{
key: '1',
label: (
<Button
type='link'
icon={<LogoutOutlined />}
onClick={() => {
confirm({
title: '退出登录',
......@@ -59,6 +71,7 @@ export function TitleView() {
Cookies.remove('SHAREFLY-TOKEN');
dispatch(REMOVE_MENU());
dispatch(REMOVE_MENU_ID());
dispatch(REMOVE_REQ_MENU());
},
});
}}
......@@ -67,10 +80,22 @@ export function TitleView() {
</Button>
),
},
];
{
key: '2',
label: (
<Button type='link' icon={<VerifiedOutlined />} onClick={getCompanyVerifyUrl}>
实名认证
</Button>
),
},
]);
useEffect(() => {
getAppUserFddInfo();
if (!isRouteById(reqMenuList, 1450)) {
items.splice(1, 1);
setItems([...items]);
}
}, []);
return (
<Header
......
......@@ -11,15 +11,21 @@ interface selfProps {
const LogisticsStepModal: FC<ModalProps & selfProps> = ({ open, onCancel, logisticsStep }) => {
return (
<Modal open={open} title='物流进度' onCancel={onCancel} footer={false}>
<Steps
direction='vertical'
current={(logisticsStep?.traces?.length || 1) - 1}
progressDot
items={logisticsStep?.traces?.map((v) => ({
title: v.acceptStation,
description: v.acceptTime,
}))}
/>
{logisticsStep?.traces?.length ? (
<Steps
direction='vertical'
current={(logisticsStep?.traces?.length || 1) - 1}
progressDot
items={logisticsStep?.traces?.map((v) => ({
title: v.acceptStation,
description: v.acceptTime,
}))}
/>
) : (
<div className='no-data' style={{ color: '#999', textAlign: 'center' }}>
暂无物流
</div>
)}
</Modal>
);
};
......
......@@ -98,7 +98,7 @@ const AddTopicModal: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, curre
name='gambitName'
rules={[{ required: true, message: '请输入名称' }]}
>
<Input placeholder='请输入名称' maxLength={30} prefix='#' />
<Input placeholder='请输入名称' maxLength={20} prefix='#' />
</Form.Item>
<Form.Item
label='图标'
......
import {
Form,
Input,
Modal,
ModalProps,
Radio,
RadioChangeEvent,
Button,
message,
InputNumber,
} from 'antd';
import React, { FC, useState } from 'react';
import { InterDataType } from '~/api/interface';
import { rentOrderDetailType } from '~/api/interface/orderManageType';
import LogisticsStepModal from '~/components/order/productOrder/logisticsStepModal';
import { OrderManageAPI } from '~/api';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile } from 'antd/es/upload/interface';
import { Uploader } from '~/components/uploader';
import { isEmptyBol } from '~/utils/validateUtils';
// 租赁订单详情返回类型
type detailType = InterDataType<rentOrderDetailType>;
interface selfProps {
onOk: () => void;
onCancel: () => void;
currentOrderItem: detailType | undefined;
modalTitle: string;
}
const ConfirmReturn: FC<ModalProps & selfProps> = ({
open,
onOk,
onCancel,
currentOrderItem,
modalTitle,
}) => {
const [form] = Form.useForm<{ damage: number; reason: string }>();
const [isDilapidation, setIsDilapidation] = useState<boolean>(false);
const [logisticsStepModalShow, setLogisticsStepModalShow] = useState<boolean>(false);
const [dilapidationImgList, setDilapidationImgList] = useState<UploadFile[]>([]);
const radioChangeEvent = (e: RadioChangeEvent) => {
setIsDilapidation(!!e.target.value);
};
// 物流弹窗
const logisticsStepModalShowClick = () => {
setLogisticsStepModalShow(true);
};
const logisticsStepModalCancel = () => {
setLogisticsStepModalShow(false);
};
const handleOk = () => {
form.validateFields().then((values) => {
OrderManageAPI.rentPfConfirmOrderWare({
...values,
orderId: currentOrderItem?.id,
}).then(({ code }) => {
if (code === '200') {
message.success('确认归还成功');
form.resetFields();
setDilapidationImgList([]);
setIsDilapidation(false);
onOk();
}
});
});
};
const handleCancel = () => {
onCancel();
form.resetFields();
setDilapidationImgList([]);
setIsDilapidation(false);
};
// 破损图片上传
const uploadDilapidationImg = (value: any) => {
setDilapidationImgList(value);
form.setFieldValue('file', JSON.stringify(value.map((v: any) => v.url)));
};
// 破损金额限制
const priceValidator = (_rule: any, value: any, callback: any) => {
if (isEmptyBol(value)) {
return callback(new Error('金额不能为空'));
}
if (value < 0) {
return callback(new Error('金额不能小于0'));
}
if (value > (currentOrderItem?.deposit || 0) * (currentOrderItem?.wareNum || 0)) {
return callback(
new Error(
`金额不能大于${(currentOrderItem?.deposit || 0) * (currentOrderItem?.wareNum || 0)}`,
),
);
}
callback();
};
return (
<Modal open={open} onOk={handleOk} onCancel={handleCancel} title={modalTitle}>
<Form initialValues={{ damage: 0 }} form={form}>
<Form.Item label='判定' name='damage'>
<Radio.Group onChange={radioChangeEvent}>
<Radio value={0}>未破损</Radio>
<Radio value={1}>破损</Radio>
</Radio.Group>
</Form.Item>
{isDilapidation ? (
<>
<Form.Item
label='扣除金额'
name='deductionAmount'
rules={[{ required: true, validator: priceValidator }]}
>
<InputNumber placeholder='请输入抵扣金额' style={{ width: '200px' }} />
</Form.Item>
<Form.Item
label='破损图片'
name='file'
rules={[{ required: true, message: '请上传破损图片' }]}
>
<Uploader
listType='picture-card'
fileUpload
onChange={uploadDilapidationImg}
defaultFileList={dilapidationImgList}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item
label='破损描述'
name='reason'
rules={[{ required: true, message: '请输入破损描述' }]}
>
<Input.TextArea placeholder='请输入破损描述' maxLength={70} showCount rows={3} />
</Form.Item>
</>
) : (
''
)}
<Form.Item label='物流信息'>
<div>
<Button type='link' onClick={logisticsStepModalShowClick}>
查看详情
</Button>
</div>
</Form.Item>
<LogisticsStepModal
open={logisticsStepModalShow}
onCancel={logisticsStepModalCancel}
logisticsStep={currentOrderItem?.returnKdnExpDTO}
/>
</Form>
</Modal>
);
};
export default ConfirmReturn;
import React, { useEffect, useState } from 'react';
import { Image } from 'antd';
import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
// 列表的类型
type ListType = InterDataType<orderImageDetailType>;
// 设备状态列表
const vcuSatusList = [
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
];
// 0:发货 1:收货 2:归还 3:平台收货
const vcuTypeList = [
{ label: '发货验收', value: 0 },
{ label: '收货验收', value: 1 },
{ label: '归还验收', value: 2 },
{ label: '平台收货', value: 3 },
{ label: '退货申请', value: 4 },
];
const DetailDelivery: React.FC<PropsType> = (props) => {
const { detail } = props;
// 验收信息列表
const [orderImageList, setOrderImageList] = useState<ListType>([]);
// 获取订单验收信息
const getOrderImageDetail = async () => {
const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
if (res && res.code === '200') {
setOrderImageList(res.result);
console.log('获取订单验收信息 --->', res.result);
}
};
// 转换设备状态
const getVcuSatus = (code: number) => {
return vcuSatusList.find((item) => item.value === code)?.label || code;
};
// 转换标题
const getVcuType = (code: number) => {
return vcuTypeList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderImageDetail().then();
}, [detail]);
return (
<div className={'detail-delivery detail-half'}>
{orderImageList.map((i, j) => (
<div key={j}>
<div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
<div className={'detail-text'}>验收状态:{getVcuSatus(i.vcuSatus)}</div>
<div className={'detail-text'}>验收描述:{i.remark || '无'}</div>
<div className={'detail-text'}>验收凭证:</div>
<div className={'detail-image'}>
{i.imgs?.map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
{!i.imgs && <div style={{ height: '30px' }}></div>}
</div>
</div>
))}
</div>
);
};
export default DetailDelivery;
.detail-information{
.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: ';';
}
}
}
}
}
}
import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import React from 'react';
import { Image, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
import { rentOrderDetailType, rentOrderDictType } from '~/api/interface/orderManageType';
import dayjs from 'dayjs';
import './index.scss';
// 表格数据类型
type TableType = any;
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<rentOrderDetailType>;
// 订单状态返回类型
type OrderStatusType = InterDataType<rentOrderDictType>;
// 参数类型
type PropsType = {
detail: DataType;
orderStatusList: OrderStatusType;
};
const DetailInformation: React.FC<PropsType> = (props) => {
const { detail } = props;
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
const DetailInformation: React.FC<PropsType> = ({ detail, orderStatusList }) => {
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'wareTitle',
align: 'center',
width: '20%',
render: (_text: any, record) => (
<div className='mall-sku-item'>
<Image src={record?.skuImg} className='sku-img' />
<div className='sku-info'>
<div className='info-name'>{record?.orderName}</div>
<div className='info-spec'>
{Object.entries(JSON.parse(record?.sku || '[]')).map((v, index) => (
<span key={index}>{v.join(':')}</span>
))}
</div>
</div>
</div>
),
},
{
title: '单价(元)',
dataIndex: 'unitPrice',
align: 'center',
render: (text) => `¥${text.toLocaleString()}`,
render: (text) => `¥${text?.toLocaleString() || 0}`,
},
{
title: '数量',
......@@ -38,58 +53,44 @@ const DetailInformation: React.FC<PropsType> = (props) => {
},
{
title: '订单状态',
dataIndex: 'waiting',
dataIndex: 'statusCode',
align: 'center',
render: (text: number) =>
orderStatusList.find((item) => item.status === text?.toString())?.waiting,
},
{
title: '应收款',
dataIndex: 'shouldPay',
dataIndex: 'orderTotalAmount',
align: 'center',
render: (text) => `¥${text.toLocaleString()}`,
render: (text) => `${text?.toLocaleString() || 0}`,
},
];
useEffect(() => {
if (!detail) return;
setTableData([
{
id: 1,
wareTitle: detail?.wareTitle,
unitPrice: detail?.unitPrice,
wareNum: detail?.wareNum,
waiting: detail?.waiting,
shouldPay: detail?.shouldPay,
},
]);
}, [detail]);
return (
<div className={'detail-information'}>
<div className={'detail-title'}>订单明细</div>
<div className={'detail-text'}>
<span className={'item'}>订单编号:{detail?.orderNo}</span>
<span className={'item'} style={{ display: 'none' }}>
合同编号:UAV202334741131
</span>
<span className={'item'}>
<div className='detail-information'>
<div className='detail-title'>订单明细</div>
<div className='detail-text'>
<span className='item'>订单编号:{detail?.orderNo}</span>
<span className='item'>
订单租期:
{dayjs(detail?.startDate).format('YYYY-MM-DD')}
{' ~ '}
{dayjs(detail?.endDate).format('YYYY-MM-DD')}
</span>
<span className={'item'}>创建时间:{detail?.createTime}</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
bordered
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
<div className='detail-price'>
实收款<span className={'num'}>{detail?.actualPay}</span>
<span className='item'>{`创建时间:${detail?.createTime}`}</span>
</div>
{detail ? (
<Table
size='small'
dataSource={[detail]}
columns={columns}
rowKey='id'
bordered
pagination={false}
/>
) : (
''
)}
</div>
);
};
......
import MessageBox from '~/components/messageBox';
function DetailMessageBox() {
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>订单动态</div>
<MessageBox />
</div>
);
}
export default DetailMessageBox;
import React, { useEffect } from 'react';
import { Button, Image } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import React, { useEffect, useState } from 'react';
import { Button, Steps, Image } from 'antd';
import { rentOrderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
import LogisticsStepModal from '~/components/order/productOrder/logisticsStepModal';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<rentOrderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
......@@ -13,6 +14,8 @@ type PropsType = {
const DetailPurchaser: React.FC<PropsType> = (props) => {
const { detail } = props;
const [logisticsStepModalShow, setLogisticsStepModalShow] = useState<boolean>(false);
const [currentKdnExpDTO, setCurrentKdnExpDTO] = useState<DataType[0]['kdnExpDTO']>();
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
......@@ -20,88 +23,153 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// 物流弹窗
const logisticsStepModalShowClick = (kdnExpDTO: DataType[0]['kdnExpDTO']) => {
setCurrentKdnExpDTO(kdnExpDTO);
setLogisticsStepModalShow(true);
};
const logisticsStepModalCancel = () => {
setLogisticsStepModalShow(false);
};
// componentDidMount
useEffect(() => {
getListExpressInfo().then();
}, []);
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID:{detail?.uid}</div>
<div className={'detail-text'}>姓名: {detail?.buyerName}</div>
<div className={'detail-text'}>手机号: {detail?.buyerPhone}</div>
{/*<div className={'detail-text'}>企业: 浙江科比特创新科技有限公司</div>*/}
<div className={'detail-text'}>备注: {detail?.remark}</div>
<div style={{ display: 'none' }}>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号: UAV202334741131</div>
<div className={'detail-text'}>合同状态: 已归档</div>
<div className={'detail-text'}>
合同操作:
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
</div>
<div className='detail-purchaser detail-half'>
<div className='detail-title'>买家信息</div>
<div className='detail-text'>UID:{detail?.userAccountId}</div>
<div className='detail-text'>姓名: {detail?.nickname}</div>
<div className='detail-text'>手机号: {detail?.phoneNum}</div>
<div className='detail-text'>备注: {detail?.userRemark}</div>
<div className='detail-title'>发货信息</div>
<div className='detail-text'>收货人:{detail?.uavOrderExpressDTO?.takeName}</div>
<div className='detail-text'>手机号:{detail?.uavOrderExpressDTO?.takePhone}</div>
<div className='detail-text'>
收货地址:
{(detail?.uavOrderExpressDTO?.takeRegion?.split('/').join('') || '') +
detail?.uavOrderExpressDTO?.takeAddress}
</div>
<div style={{ display: 'none' }}>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款:</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
{detail?.uavOrderExpressDTO?.sendExpCode && (
<>
<div className='detail-text'>物流单号:{detail?.uavOrderExpressDTO?.sendExpNo}</div>
<div className='detail-text'>
物流公司:{getExpressInfo(detail?.uavOrderExpressDTO?.sendExpCode)}
</div>
<div className='detail-text' style={{ display: 'flex' }}>
<span>物流进度:</span>
<div>
<Steps
direction='vertical'
current={0}
progressDot
items={[
{
title: detail?.kdnExpDTO?.traces?.[0].acceptStation,
description: detail?.kdnExpDTO?.traces?.[0].acceptTime,
},
{
title: `送至${
(detail?.uavOrderExpressDTO?.takeRegion?.split('/').join('') || '') +
detail?.uavOrderExpressDTO?.takeAddress
}`,
},
]}
/>
</div>
<div>
<Button type='link' onClick={() => logisticsStepModalShowClick(detail?.kdnExpDTO)}>
查看详情
</Button>
</div>
</div>
</>
)}
{detail?.confirmReceipt ? (
<div>
<div className='detail-title'>收货信息</div>
{detail?.confirmReceipt.file ? (
<div className='detail-text' style={{ display: 'flex' }}>
<span>图片:</span>
<div
className='image-file'
style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}
>
{JSON.parse(detail?.confirmReceipt.file).map((v: any, index: number) => (
<div style={{ marginRight: '10px', marginBottom: '10px' }} key={index}>
<Image src={v} width={50} height={50} />
</div>
))}
</div>
</div>
) : (
''
)}
<div className='detail-text'>描述:{detail?.confirmReceipt.reason}</div>
</div>
<div className={'detail-text'}>尾款:</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
) : (
''
)}
{detail?.returnKdnExpDTO ? (
<>
<div className='detail-title'>归还信息</div>
<div className='detail-text'>物流单号:{detail?.returnKdnExpDTO?.logisticCode}</div>
<div className='detail-text'>
物流公司:{getExpressInfo(detail?.returnKdnExpDTO?.shipperCode)}
</div>
<div className='detail-text'>
物流进度:
<Button
type='link'
onClick={() => logisticsStepModalShowClick(detail?.returnKdnExpDTO)}
>
查看详情
</Button>
</div>
</>
) : (
''
)}
{detail?.storeDamageOrder ? (
<div>
<div className='detail-title'>破损信息</div>
{detail?.storeDamageOrder.file ? (
<div className='detail-text' style={{ display: 'flex' }}>
<span>图片:</span>
<div
className='image-file'
style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}
>
{JSON.parse(detail?.storeDamageOrder.file).map((v: any, index: number) => (
<div style={{ marginRight: '10px', marginBottom: '10px' }} key={index}>
<Image src={v} width={50} height={50} />
</div>
))}
</div>
</div>
) : (
''
)}
<div className='detail-text'>
扣除金额:¥{detail?.storeDamageOrder?.modifiedDeposit?.toLocaleString() || 0}
</div>
<div className='detail-text'>描述:{detail?.storeDamageOrder.reason}</div>
</div>
<div className={'detail-text'}>全款:</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人:{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号:{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址:{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号:{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司:{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度:-- <Button type={'link'}>查看详情</Button>
</div>
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人:{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号:{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址:{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号:{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司:{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度:-- <Button type={'link'}>查看详情</Button>
</div>
) : (
''
)}
<LogisticsStepModal
open={logisticsStepModalShow}
onCancel={logisticsStepModalCancel}
logisticsStep={currentKdnExpDTO}
/>
</div>
);
};
......
import { OrderManageAPI } from '~/api';
import React, { useEffect, useState } from 'react';
import { Timeline } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
const DetailTimeLine: React.FC<PropsType> = (props) => {
const { detail } = props;
// 流程列表
const [timeLineList, setTimeLineList] = useState<{ label: string; color: string }[]>([]);
// 获取订单流程
const getOrderStatus = async () => {
const res = await OrderManageAPI.listTranStatus({});
if (res && res.code === '200') {
// 转换列表数据(区分完成和未完)
const list = res.result.map((i) => {
if (Number(i.status) < Number(detail?.tranStatus)) {
return {
label: i.doing,
color: '#1890ff',
};
} else {
return {
label: i.waiting,
color: '#ccc',
};
}
});
// 将当前项目变绿
const current = list.findIndex((i) => i.color === '#ccc');
list[current].color = '#52c41a';
setTimeLineList(list);
}
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderStatus().then();
}, [detail]);
return (
<div className={'detail-timeline'} style={{ width: '200px' }}>
<div className={'detail-title'}>订单流程</div>
<Timeline items={timeLineList} mode={'right'} />
</div>
);
};
export default DetailTimeLine;
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, platFormCloseOrderType } from '~/api/interface/orderManageType';
import React from 'react';
import { Form, message, Modal, Select } from 'antd';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<platFormCloseOrderType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderClosed: React.FC<propType> = (props) => {
OrderClosed.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 表单钩子
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.platFormCloseOrder({
...values,
orderInfoId: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={400}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
>
<Form.Item
label='关闭理由'
name='shutReason'
rules={[{ required: true, message: '请选择关闭理由' }]}
>
<Select
placeholder={'请选择关闭理由'}
options={[
{ label: '未及时付款' },
{ label: '买家不想买' },
{ label: '买家信息填写错误,重新下单' },
{ label: '恶意买家,同行捣乱' },
{ label: '缺货' },
{ label: '买家拍错了' },
{ label: '其他原因' },
].map((i) => ({ label: i.label, value: i.label }))}
allowClear
/>
</Form.Item>
</Form>
</Modal>
);
};
export default OrderClosed;
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, pfConfirmOrderWareType } from '~/api/interface/orderManageType';
import React, { useEffect } from 'react';
import { Col, Form, Input, message, Modal, Radio, Row } from 'antd';
import { Uploader } from '~/components/uploader';
import { PlusOutlined } from '@ant-design/icons';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<pfConfirmOrderWareType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderConfirm: React.FC<propType> = (props) => {
OrderConfirm.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.pfConfirmOrderWare({
...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);
}
};
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// 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 }}>
物流归还
</Form.Item>
<Form.Item label='物流单号' labelCol={{ span: 4 }}>
{data?.receipt?.sendExNo}
</Form.Item>
<Form.Item label='物流公司' labelCol={{ span: 4 }}>
{getExpressInfo(data?.receipt?.sendExCode)}
</Form.Item>
<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 OrderConfirm;
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;
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, refundOrderType } from '~/api/interface/orderManageType';
import React from 'react';
import { Form, message, Modal, Radio } from 'antd';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<refundOrderType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderRefund: React.FC<propType> = (props) => {
OrderRefund.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 表单钩子
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.refundOrder({
...values,
orderInfoId: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={400}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
>
<Form.Item
label='是否同意'
name='refund'
rules={[{ required: true, message: '请选择是否同意' }]}
>
<Radio.Group
options={[
{ label: '同意退款', value: true },
{ label: '拒绝退款', value: false },
]}
/>
</Form.Item>
</Form>
</Modal>
);
};
export default OrderRefund;
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;
......@@ -3,24 +3,7 @@
box-sizing: border-box;
.order-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.head-text {
font-size: 13px;
font-weight: 600;
color: #000000;
div {
margin-bottom: 10px;
span {
margin-right: 20px;
}
}
}
text-align: right;
}
.detail-wrap {
......
......@@ -2,25 +2,27 @@ import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/equipmentOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation';
import { OrderManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
import DetailTimeLine from '~/pages/orderManage/equipmentOrder/comp/detailTimeLine';
// import DetailMessageBox from '~/pages/orderManage/equipmentOrder/comp/detailMessageBox';
import { rentOrderDetailType, rentOrderDictType } from '~/api/interface/orderManageType';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<rentOrderDetailType>;
// 订单状态返回类型
type OrderStatusType = InterDataType<rentOrderDictType>;
function EquipmentOrderDetail() {
// 路由钩子
const navigate = useNavigate();
// 参数钩子
const [searchParams] = useSearchParams();
// 接收到的参数
const orderNo = searchParams.get('orderNo') as string;
// 订单id
// const [orderId, setOrderId] = useState<number>(0);
// 订单状态字典
const [orderStatusList, setOrderStatusList] = useState<OrderStatusType>([]);
// 返回上一页
const handleBack = () => {
navigate(-1);
......@@ -28,42 +30,38 @@ function EquipmentOrderDetail() {
// 订单详情
const [orderDetail, setOrderDetail] = useState<DataType>(null!);
// 获取订单详情
const getOrderDetail = async () => {
const res = await OrderManageAPI.orderDetail({
orderNo: orderNo,
const getOrderDetail = (id: number) => {
OrderManageAPI.getRentOrderDetail({
id,
}).then(({ result }) => {
if (result) {
setOrderDetail(result);
}
});
};
// 获取订单状态
const getOrderStatus = () => {
OrderManageAPI.getRentOrderDict().then(({ result }) => {
setOrderStatusList(result || []);
});
if (res && res.code === '200') {
setOrderDetail(res.result);
// console.log('获取订单详情 --->', res.result);
}
};
// componentDidMount
useEffect(() => {
getOrderDetail().then();
}, [orderNo]);
// setOrderId(Number(searchParams.get('id') || 0));
getOrderDetail(Number(searchParams.get('id') || 0));
getOrderStatus();
}, []);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号:{orderDetail?.orderNo}</span>
<span style={{ display: 'none' }}>合同编号:UAV202334741131</span>
</div>
<div>
<span>当前状态:{orderDetail?.waiting}</span>
<span>创建时间:{orderDetail?.createTime}</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
<div className='order-detail'>
<div className='order-head'>
<Button type='primary' onClick={() => handleBack()}>
返回
</Button>
</div>
<div className={'detail-wrap'}>
<div className='detail-wrap'>
<DetailPurchaser detail={orderDetail} />
<DetailDelivery detail={orderDetail} />
<DetailTimeLine detail={orderDetail} />
{/*<DetailMessageBox />*/}
<DetailInformation detail={orderDetail} />
<DetailInformation detail={orderDetail} orderStatusList={orderStatusList} />
</div>
</div>
);
......
.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: ';';
}
}
}
}
}
}
......@@ -5,43 +5,32 @@ import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import qs from 'query-string';
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType } from '~/api/interface/orderManageType';
import { rentOrderListType } from '~/api/interface/orderManageType';
import { OrderManageAPI } from '~/api';
import OrderDeliver from 'src/pages/orderManage/equipmentOrder/comp/orderDeliver';
import OrderConfirm from '~/pages/orderManage/equipmentOrder/comp/orderConfirm';
import OrderClosed from '~/pages/orderManage/equipmentOrder/comp/orderClosed';
import OrderRefund from '~/pages/orderManage/equipmentOrder/comp/orderRefund';
import ShipmentsOrder from './comp/shipmentsOrder';
import ConfirmReturn from './comp/confirmReturn';
import TableItem from '~/components/order/selfTableItem';
import './index.scss';
import { filterObjAttr } from '~/utils';
import dayjs from 'dayjs';
import { CommentOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
type TableType = InterListType<rentOrderListType>;
// 请求数据的类型
type ReqType = InterReqType<listPcWechatOrderType>;
type ReqType = InterReqType<rentOrderListType>;
// 搜索表单的数据
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() {
// 路由钩子
const navigate = useNavigate();
const { userInfo } = useSelector((state: any) => state.UserInfo);
// 发货弹窗是否显示
const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
// 收货弹窗是否显示
const [confirmVisible, setConfirmVisible] = useState<boolean>(false);
// 关闭弹窗是否显示
const [closedVisible, setClosedVisible] = useState<boolean>(false);
// 退款弹窗是否显示
const [refundVisible, setRefundVisible] = useState<boolean>(false);
// 确认归还
const [confirmReturnShow, setConfirmReturnShow] = useState<boolean>(false);
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 订单状态搜索列表
......@@ -58,18 +47,17 @@ function EquipmentOrderView() {
// 表格数据
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,
pageSize: pagination.pageSize,
...value,
...query,
});
if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
}).then(({ result }) => {
const { list, pageNo, totalCount, pageSize, totalPage } = result; // 解构
setPagination({
total: totalCount,
current: pageNo,
......@@ -77,18 +65,17 @@ function EquipmentOrderView() {
totalPage,
});
setTableData(list);
// console.log('加载列表 --->', list);
}
});
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
getTableList({ pageNo, pageSize });
};
// 表单提交
const onFinish = (data: ReqType) => {
pagination.current = 1;
query = data;
getTableList(data).then();
query = filterObjAttr(data, ['rangeTime']);
getTableList(query);
};
// 订单状态筛选
const statusChangeEvent = (i: number) => {
......@@ -97,8 +84,8 @@ function EquipmentOrderView() {
} else {
setStatusCodeButtonIndex(i);
}
query = { ...query, tranStatus: tranStatusList[i].value };
getTableList().then();
query = { ...query, statusCode: Number(tranStatusList[i].value) };
getTableList();
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
......@@ -106,129 +93,228 @@ function EquipmentOrderView() {
navigate(`/orderManage/equipmentOrder/detail?${qs.stringify(search)}`);
};
// 获取订单状态
const getOrderStatus = async () => {
const res = await OrderManageAPI.listTranStatus({});
if (res && res.code === '200') {
const arr = res.result.map((item) => ({ value: item.status, label: item.waiting }));
const getOrderStatus = () => {
OrderManageAPI.getRentOrderDict().then(({ result }) => {
const arr = result.map((item) => ({ value: item.status, label: item.waiting }));
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 = () => {
setEditData(undefined);
setDeliverVisible(false);
setConfirmVisible(false);
setClosedVisible(false);
setRefundVisible(false);
paginationChange(pagination.current, pagination.pageSize);
// 获取租赁订单详情
const getRentDetail = (id: number) => {
OrderManageAPI.getRentOrderDetail({ id }).then(({ result }) => {
if (result) {
setCurrentOrderItem(result);
}
});
};
// componentDidMount
useEffect(() => {
query = {};
getOrderStatus().then();
getTableList().then();
getOrderStatus();
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]) => {
getRentDetail(item.id);
setConfirmReturnShow(true);
},
},
];
// 获取当前按钮对象
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);
getTableList(query);
};
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'wareTitle',
align: 'center',
width: 250,
width: '20%',
render: (_text, record) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Image src={record.wareImg} style={{ width: 48, height: 48 }} />
<div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}>
<div style={{ color: '#1677ff' }}>{record.wareTitle}</div>
<div>{record.wareNo}</div>
<div>订单编号:{record.orderNo}</div>
<div>创建时间:{record.createTime}</div>
</div>
</div>
<TableItem
tr={
<div className='mall-sku-item'>
<Image src={record.skuImg} className='sku-img' />
<div className='sku-info'>
<div className='info-name'>{record.orderName}</div>
<div className='info-spec'>
{Object.entries(JSON.parse(record.sku)).map((v, index) => (
<span key={index}>{v.join(':')}</span>
))}
</div>
</div>
</div>
}
td={
<div>
<span>订单编号:</span>
<span>{record.orderNo}</span>
</div>
}
/>
),
},
{
title: '单价(元)',
dataIndex: 'unitPrice',
title: '租期',
align: 'center',
render: (text) => `¥${text.toLocaleString()}`,
width: '15%',
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: '数量',
align: 'center',
dataIndex: 'wareNum',
render: (text) => <TableItem tr={text} />,
},
{
title: '单价',
align: 'center',
dataIndex: 'unitPrice',
render: (text) => <TableItem tr={<span>¥{text?.toLocaleString()}</span>} />,
},
{
title: '买家',
dataIndex: 'userName',
align: 'center',
width: '130px',
render: (_text, record) => (
<>
<div>{record.uid}</div>
<div>
{record.buyerName || record.nickName}({record.buyerPhone})
</div>
</>
<TableItem
tr={
<div>
<div>
{record.userName || record.nickname}({record.userAccountId})
</div>
<div>{record.phoneNum}</div>
{record.userRemark ? (
<div>
<Tooltip placement='top' title={record.userRemark}>
<Button icon={<CommentOutlined />}></Button>
</Tooltip>
</div>
) : (
''
)}
</div>
}
/>
),
},
{
title: '订单状态',
dataIndex: 'waiting',
dataIndex: 'statusCode',
align: 'center',
width: '10%',
render: (text: number) => (
<TableItem tr={tranStatusList.find((v) => v.value === String(text))?.label} />
),
},
{
title: '实收款',
dataIndex: 'shouldPay',
title: '押金',
dataIndex: 'deposit',
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: '相关运营',
dataIndex: 'userName',
title: '实付款',
dataIndex: 'orderTotalAmount',
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: '推荐人',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
render: (_text, _record) => <TableItem tr={''} />,
},
{
title: '备注',
......@@ -236,60 +322,58 @@ function EquipmentOrderView() {
align: 'center',
ellipsis: true,
width: '100px',
render: (text) => (
<Tooltip placement='top' title={text}>
<div className='remark-wrap'>{text}</div>
</Tooltip>
),
render: (text) => <TableItem tr={text} />,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: '130px',
onHeaderCell: () => ({
style: {
textAlign: 'center',
},
}),
onCell: () => ({
style: {
textAlign: 'right',
},
}),
render: (_text, record) => (
<>
{showStatusButton(record?.tranStatus) && (
<Button
type={'link'}
disabled={['999', '1000'].includes(record?.tranStatus)}
onClick={() => handleAction(record)}
>
{getStatusButton(record?.tranStatus)}
</Button>
)}
<Button type={'link'} onClick={() => handleDetail(record)}>
详情
</Button>
</>
<TableItem
tr={
<>
{getOperateBtnItem(record.statusCode) ? (
<Button
type='link'
onClick={() => getOperateBtnItem(record.statusCode)?.onClick(record)}
disabled={!!userInfo.roleInfo.superAdmin}
>
{getOperateBtnItem(record.statusCode)?.label}
</Button>
) : (
''
)}
<Button type='link' onClick={() => handleDetail(record)}>
详情
</Button>
</>
}
/>
),
},
];
return (
<>
<div className='equipment-order'>
<SearchBox
search={[
{
label: '订单编号',
name: 'orderNo',
label: '关键字',
name: 'keyword',
type: 'input',
placeholder: '请输入订单编号',
},
{
label: '买家账号',
name: 'buyerAccount',
type: 'input',
placeholder: '请输入用户账号',
},
{
label: '相关销售',
name: 'saleId',
type: 'Select',
placeholder: '请选择相关销售',
options: [],
},
{
label: '时间',
name: 'rangeTime',
type: 'rangePicker',
......@@ -331,25 +415,22 @@ function EquipmentOrderView() {
}}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
{/*发货弹窗*/}
<OrderDeliver
{/*发货*/}
<ShipmentsOrder
open={deliverVisible}
title={'卖家发货'}
data={editData}
closed={handleClosed}
currentOrderItem={currentOrderItem}
onCancel={shipmentsOrderCancel}
onOk={shipmentsOrderOk}
/>
{/*收货弹窗*/}
<OrderConfirm
open={confirmVisible}
title={'确认收货'}
data={editData}
closed={handleClosed}
{/*确认归还*/}
<ConfirmReturn
open={confirmReturnShow}
onOk={confirmReturnOk}
onCancel={confirmReturnCancel}
currentOrderItem={currentOrderItem}
modalTitle={currentOrderItem?.statusCode === 500 ? '确认归还' : '确认退款'}
/>
{/*关闭订单*/}
<OrderClosed open={closedVisible} title={'关闭订单'} data={editData} closed={handleClosed} />
{/*退款弹窗*/}
<OrderRefund open={refundVisible} title={'退款审批'} data={editData} closed={handleClosed} />
</>
</div>
);
}
......
......@@ -4,7 +4,7 @@ import { InterDataType } from '~/api/interface';
import { listMenuInfoType } from '~/api/interface/systemManageType';
import { SystemManageAPI } from '~/api';
import { store } from '~/store';
import { SET_MENU } from '~/store/module/menu';
import { SET_MENU, SET_REQ_MENU } from '~/store/module/menu';
//菜单类型
type menuType = InterDataType<listMenuInfoType>;
......@@ -16,6 +16,7 @@ export const authRouterList = async () => {
const { result } = await SystemManageAPI.getListRoleMenuInfo({
roleId: Number(localStorage.getItem('roleId')),
});
store.dispatch(SET_REQ_MENU([result]));
const ids: number[] = getAllKeys([result]);
const getRouteList = (data: RouteObjectType[]) => {
return data.reduce((pre: RouteObjectType[], cur) => {
......
......@@ -170,7 +170,6 @@ import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
import CustomListDetail from '~/pages/customManage/customList/detail';
import ServiceCategoryDetail from '~/pages/categoryManage/serviceCategoryList/detail';
const AddressManageView = React.lazy(() => import('~/pages/systemManage/addressManage'));
const RealNameAuthView = React.lazy(() => import('~/pages/systemManage/realNameAuth'));
// const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
// const IndustryDetailView = React.lazy(
......@@ -1312,17 +1311,6 @@ export const routerList: Array<RouteObjectType> = [
icon: <EnvironmentOutlined />,
},
},
{
path: '/systemManage/realNameAuth',
element: withLoadingComponent(<RealNameAuthView />),
errorElement: <ErrorPage />,
meta: {
id: 1450,
title: '实名认证',
icon: <VerifiedOutlined />,
develop: true,
},
},
],
},
];
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
menuList: [],
reqMenuList: [], //请求的菜单
menuList: [], //过滤后的菜单
collapsedActive: false,
roleId: localStorage.getItem('roleId') ? Number(localStorage.getItem('roleId')) : -1,
};
......@@ -13,12 +14,18 @@ export const menuSlice = createSlice({
SET_MENU(state, action) {
state.menuList = action.payload;
},
SET_REQ_MENU(state, action) {
state.reqMenuList = action.payload;
},
SET_COLLAPSE(state, action) {
state.collapsedActive = action.payload;
},
REMOVE_MENU(state) {
state.menuList = [];
},
REMOVE_REQ_MENU(state) {
state.reqMenuList = [];
},
SET_MENU_ID(state, action) {
state.roleId = action.payload;
localStorage.setItem('roleId', action.payload);
......@@ -29,7 +36,14 @@ export const menuSlice = createSlice({
},
});
export const { SET_MENU, SET_COLLAPSE, REMOVE_MENU, SET_MENU_ID, REMOVE_MENU_ID } =
menuSlice.actions;
export const {
SET_MENU,
SET_COLLAPSE,
REMOVE_MENU,
SET_MENU_ID,
REMOVE_MENU_ID,
REMOVE_REQ_MENU,
SET_REQ_MENU,
} = menuSlice.actions;
export const Menu = menuSlice.reducer;
......@@ -24,3 +24,7 @@ export const isRoute = (list: any, pathname: string) => {
(v.children && isRoute(v.children, pathname)),
);
};
export const isRouteById = (list: any, id: number) => {
return list.some((v: any) => v.id === id || (v.children && isRouteById(v.children, id)));
};
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论