Skip to content

J
jinfa-admin
Commit 93cdbde3 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

chore: 删除不必要的代码及优化展示

parent d9b3f0b1
Hide whitespace changes
Inline Side-by-side
Showing with 519 additions and 590 deletions
src/pages/exchangeManage/components/ExchangeAddressInfo/index.tsx
View file @ 93cdbde3
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2020-11-06 09:54:04
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-04 18:04:07
* @LastEditTime: 2021-02-02 10:26:13
* @Description: 换货收货地址
*/
import React from 'react';
......@@ -64,7 +64,7 @@ interface ExchangeAddressInfo {
},
// onSubmit
onSubmit?: (values: Values) => void;
onSubmit: (values: Values) => void;
};
const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
......@@ -125,6 +125,7 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
shippingAddress: shippingAddress.id,
pickupAddress: shippingAddress.id,
}}
previewPlaceholder=" "
expressionScope={{
Address,
ShippingAddress,
......@@ -136,7 +137,7 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
// 联动配送方式
onFieldValueChange$('deliveryType').subscribe(fieldState => {
const { name, value } = fieldState;
const { value } = fieldState;
switch (value) {
// 物流
......@@ -172,10 +173,28 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
default:
break
};
if (onSubmit) {
onSubmit({
deliveryType: value,
id: undefined,
isDefault: undefined,
sendAddress: undefined,
sendUserName: undefined,
sendUserTel: undefined,
});
}
});
onFieldInputChange$('deliveryType').subscribe(fieldState => {
const { name, value } = fieldState;
if (value) {
linkage.value('*(shippingAddress,pickupAddress)', undefined);
}
});
onFieldValueChange$('*(shippingAddress,pickupAddress)').subscribe(fieldState => {
const { name, value, originAsyncData = [] } = fieldState;
onFieldInputChange$('*(shippingAddress,pickupAddress)').subscribe(fieldState => {
const { value, originAsyncData = [] } = fieldState;
const deliveryTypeValue = getFieldValue('deliveryType');
const fullData = originAsyncData.find(item => item.id === value);
......@@ -195,6 +214,7 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
actions={modalFormActions}
schema={schema}
onSubmit={handleSubmit}
colon
/>
</MellowCard>
);
......
src/pages/exchangeManage/components/ExchangeAddressInfo/schema/index.ts
View file @ 93cdbde3
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 15:56:35
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-25 15:19:36
* @Description:
*/
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE, DELIVERY_TYPE_ENUM } from '@/constants';
export const schema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 8,
wrapperCol: 16,
labelAlign: 'left',
},
properties: {
deliveryType: {
title: '配送方式',
type: 'string',
default: 1,
enum: DELIVERY_TYPE_ENUM,
'x-component-props': {
style: {
width: '80%',
},
},
},
deliveryAddress: {
type: 'object',
title: '换货收货地址',
'x-component': 'Children',
'x-component-props': {
children: '{{Address}}',
},
},
shippingAddress: {
type: 'string',
title: '换货发货地址',
enum: [],
'x-component-props': {
placeholder: '请选择',
style: {
width: '80%',
},
},
'x-rules': [
{
required: true,
message: '请选择换货发货地址',
},
],
},
pickupAddress: {
type: 'string',
title: '换货自提地址',
enum: [],
'x-component-props': {
placeholder: '请选择',
style: {
width: '80%',
},
},
'x-rules': [
{
required: true,
message: '请选择换货自提地址',
},
],
},
shippingAddressShow: {
type: 'object',
title: '换货发货地址',
visible: false,
'x-component': 'Children',
'x-component-props': {
children: '{{ShippingAddress}}',
},
},
},
},
},
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 15:56:35
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-01-21 14:14:26
* @Description:
*/
import { ISchema } from '@formily/antd';
import { DELIVERY_TYPE_ENUM } from '@/constants';
export const schema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 6,
wrapperCol: 16,
labelAlign: 'left',
},
properties: {
deliveryType: {
title: '配送方式',
type: 'string',
enum: DELIVERY_TYPE_ENUM,
'x-component-props': {
placeholder: '请选择',
style: {
width: '80%',
},
},
'x-rules': [
{
required: true,
message: '请选择配送方式',
},
],
},
deliveryAddress: {
type: 'object',
title: '换货收货地址',
'x-component': 'Children',
'x-component-props': {
children: '{{Address}}',
},
},
shippingAddress: {
type: 'string',
title: '换货发货地址',
visible: false,
enum: [],
'x-component-props': {
placeholder: '请选择',
style: {
width: '80%',
},
},
'x-rules': [
{
required: true,
message: '请选择换货发货地址',
},
],
},
pickupAddress: {
type: 'string',
title: '换货自提地址',
visible: false,
enum: [],
'x-component-props': {
placeholder: '请选择',
style: {
width: '80%',
},
},
'x-rules': [
{
required: true,
message: '请选择换货自提地址',
},
],
},
shippingAddressShow: {
type: 'object',
title: '换货发货地址',
visible: false,
'x-component': 'Children',
'x-component-props': {
children: '{{ShippingAddress}}',
},
},
},
},
},
};
\ No newline at end of file
src/pages/exchangeManage/components/ExchangeDeliverInfo/index.tsx
View file @ 93cdbde3
......@@ -38,30 +38,12 @@ interface ExchangeDeliverInfoProps {
* 是否是采购商
*/
isPurchaser?: boolean;
/**
* 确认退货回单
*/
onConfirmExchangeBack?: (id: number) => void;
/**
* 确认退货发货
*/
onConfirmExchangeDeliver?: (id: number) => Promise<any>;
/**
* 确认退货收货
*/
onConfirmExchangeReceive?: (id: number) => Promise<any>;
};
const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
summary = [],
detailed = [],
isPurchaser = false,
onConfirmExchangeBack,
onConfirmExchangeDeliver,
onConfirmExchangeReceive,
}) => {
const summaryColumns: EditableColumns[] = [
......@@ -78,6 +60,7 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......@@ -135,6 +118,7 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......@@ -177,38 +161,6 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
};
const handleConfirmExchangeDeliver = (id) => {
if (onConfirmExchangeDeliver) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认换货发货？`,
onOk() {
return onConfirmExchangeDeliver(id);
},
});
}
};
const handleConfirmExchangeReceive = (id) => {
if (onConfirmExchangeReceive) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认换货收货？`,
onOk() {
return onConfirmExchangeReceive(id);
},
});
}
};
const handleConfirmExchangeBack = (id) => {
if (onConfirmExchangeBack) {
onConfirmExchangeBack(id);
}
};
return (
<MellowCard>
<Tabs defaultActiveKey="2">
......@@ -268,39 +220,7 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
<Badge color={'#6C9CEB'} text={item.innerStatusName} />
</Descriptions.Item>
<Descriptions.Item>
{item.innerStatus === MAIL_INNER_STATUS_UNCONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmExchangeDeliver(item.deliveryId)}
>
确认换货发货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmExchangeReceive(item.deliveryId)}
>
确认换货收货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_RECEIVING && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmExchangeBack(item.deliveryId)}
>
确认换货回单
</a>
)}
</Descriptions.Item>
</Descriptions>
</Col>
......
src/pages/exchangeManage/components/ExchangeReceivedInfo/index.tsx
View file @ 93cdbde3
......@@ -79,6 +79,7 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......@@ -136,6 +137,7 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......@@ -276,39 +278,7 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
<Badge color={'#6C9CEB'} text={item.innerStatusName} />
</Descriptions.Item>
<Descriptions.Item>
{item.innerStatus === MAIL_INNER_STATUS_UNCONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnDeliver(item.deliveryId)}
>
确认退货发货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnReceive(item.deliveryId)}
>
确认退货收货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_RECEIVING && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnBack(item.deliveryId)}
>
确认退货回单
</a>
)}
</Descriptions.Item>
</Descriptions>
</Col>
......
src/pages/exchangeManage/query/detail.tsx
View file @ 93cdbde3
......@@ -121,6 +121,7 @@ const DetailInfo: React.FC = () => {
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......
src/pages/repairManage/constants.ts
View file @ 93cdbde3
/*
* @Author: XieZhiXiong
* @Date: 2020-12-18 16:55:17
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-18 16:55:17
* @Description:
*/
import {
REPAIR_OUTER_STATUS_UNCOMMITTED,
REPAIR_OUTER_STATUS_UNCONFIRMED,
REPAIR_OUTER_STATUS_FAILED,
REPAIR_OUTER_STATUS_SUCCESS,
REPAIR_OUTER_STATUS_FINISHED,
REPAIR_INNER_STATUS_UNCOMMITTED,
REPAIR_INNER_STATUS_COMMITTED,
REPAIR_INNER_STATUS_SUCCESS_1,
REPAIR_INNER_STATUS_SUCCESS_2,
REPAIR_INNER_STATUS_FAILED,
REPAIR_INNER_STATUS_CONFIRM_SUCCESS,
REPAIR_INNER_STATUS_CONFIRM_FAILED,
REPAIR_INNER_STATUS_FINISHED,
} from '@/constants';
// 售后维修外部状态 StatusTag map
export const REPAIR_OUTER_STATUS_TAG_MAP = {
[REPAIR_OUTER_STATUS_UNCOMMITTED]: 'default',
[REPAIR_OUTER_STATUS_UNCONFIRMED]: 'success',
[REPAIR_OUTER_STATUS_FAILED]: 'danger',
[REPAIR_OUTER_STATUS_SUCCESS]: 'primary',
[REPAIR_OUTER_STATUS_FINISHED]: 'success',
};
// 售后维修内部部状态 Badge map
export const REPAIR_INNER_STATUS_BADGE_MAP = {
[REPAIR_INNER_STATUS_UNCOMMITTED]: '#669EDE',
[REPAIR_INNER_STATUS_COMMITTED]: '#41CC9E',
[REPAIR_INNER_STATUS_SUCCESS_1]: '#41CC9E',
[REPAIR_INNER_STATUS_SUCCESS_2]: '#41CC9E',
[REPAIR_INNER_STATUS_FAILED]: '#EF6260',
[REPAIR_INNER_STATUS_CONFIRM_SUCCESS]: '#6C9CEB',
[REPAIR_INNER_STATUS_CONFIRM_FAILED]: '#EF6260',
[REPAIR_INNER_STATUS_FINISHED]: '#41CC9E',
/*
* @Author: XieZhiXiong
* @Date: 2020-12-18 16:55:17
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-02-02 10:27:36
* @Description:
*/
import {
REPAIR_OUTER_STATUS_UNCOMMITTED,
REPAIR_OUTER_STATUS_UNCONFIRMED,
REPAIR_OUTER_STATUS_FAILED,
REPAIR_OUTER_STATUS_SUCCESS,
REPAIR_OUTER_STATUS_FINISHED,
REPAIR_INNER_STATUS_UNCOMMITTED,
REPAIR_INNER_STATUS_COMMIT_SUCCESS,
REPAIR_INNER_STATUS_SUCCESS_1,
REPAIR_INNER_STATUS_SUCCESS_2,
REPAIR_INNER_STATUS_FAILED_2,
REPAIR_INNER_STATUS_CONFIRM_SUCCESS,
REPAIR_INNER_STATUS_CONFIRM_FAILED,
REPAIR_INNER_STATUS_FINISHED,
REPAIR_INNER_STATUS_COMMIT_FAILED,
REPAIR_INNER_STATUS_FAILED_1,
} from '@/constants';
// 售后维修外部状态 StatusTag map
export const REPAIR_OUTER_STATUS_TAG_MAP = {
[REPAIR_OUTER_STATUS_UNCOMMITTED]: 'default',
[REPAIR_OUTER_STATUS_UNCONFIRMED]: 'success',
[REPAIR_OUTER_STATUS_FAILED]: 'danger',
[REPAIR_OUTER_STATUS_SUCCESS]: 'primary',
[REPAIR_OUTER_STATUS_FINISHED]: 'success',
};
// 售后维修内部部状态 Badge map
export const REPAIR_INNER_STATUS_BADGE_MAP = {
[REPAIR_INNER_STATUS_UNCOMMITTED]: '#669EDE',
[REPAIR_INNER_STATUS_COMMIT_SUCCESS]: '#41CC9E',
[REPAIR_INNER_STATUS_SUCCESS_1]: '#41CC9E',
[REPAIR_INNER_STATUS_SUCCESS_2]: '#41CC9E',
[REPAIR_INNER_STATUS_FAILED_2]: '#EF6260',
[REPAIR_INNER_STATUS_CONFIRM_SUCCESS]: '#6C9CEB',
[REPAIR_INNER_STATUS_CONFIRM_FAILED]: '#EF6260',
[REPAIR_INNER_STATUS_FINISHED]: '#41CC9E',
[REPAIR_INNER_STATUS_COMMIT_FAILED]: '#EF6260',
[REPAIR_INNER_STATUS_FAILED_1]: '#EF6260',
};
\ No newline at end of file
src/pages/repairManage/query/detail.tsx
View file @ 93cdbde3
......@@ -67,6 +67,7 @@ const DetailInfo: React.FC = () => {
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......
src/pages/returnManage/components/DetailInfo/index.tsx
View file @ 93cdbde3
......@@ -128,6 +128,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......
src/pages/returnManage/components/ReturnAnalysis/index.tsx
View file @ 93cdbde3
/*
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-09 11:35:12
* @Description: 退货收货统计、退货发货明细
*/
import React from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
ClockCircleOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons';
import { SummaryData, Detailed } from './interface';
import MellowCard from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import {
MAIL_INNER_STATUS_UNCONFIRMED_DELIVER,
MAIL_INNER_STATUS_CONFIRMED_DELIVER,
MAIL_INNER_STATUS_CONFIRMED_RECEIVING,
} from '../../constants';
import styles from './index.less';
const { TabPane } = Tabs;
const { confirm } = Modal;
interface ReturnInfoProps {
/**
* 退货收货统计
*/
summary: SummaryData[],
/**
* 退货发货明细
*/
detailed: Detailed[],
/**
* 是否是采购商
*/
isPurchaser?: boolean;
/**
* 确认退货回单
*/
onConfirmReturnBack?: (id: number) => void;
/**
* 确认退货发货
*/
onConfirmReturnDeliver?: (id: number) => Promise<any>;
/**
* 确认退货收货
*/
onConfirmReturnReceive?: (id: number) => Promise<any>;
};
const ReturnInfo: React.FC<ReturnInfoProps> = ({
summary = [],
detailed = [],
isPurchaser = false,
onConfirmReturnBack,
onConfirmReturnDeliver,
onConfirmReturnReceive,
}) => {
const summaryColumns: EditableColumns[] = [
{
title: '订单号',
dataIndex: 'orderNo',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: '商品ID',
dataIndex: 'productId',
align: 'center',
},
{
title: '商品名称',
dataIndex: 'productName',
align: 'center',
},
{
title: '品类',
dataIndex: 'category',
align: 'center',
},
{
title: '品牌',
dataIndex: 'brand',
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
},
{
title: '退货数量',
dataIndex: 'returnCount',
align: 'center',
},
{
title: '已退货发货',
dataIndex: 'deliveryCount',
align: 'center',
},
{
title: '未退货发货',
dataIndex: 'unDeliveryCount',
align: 'center',
},
{
title: '已退货收货',
dataIndex: 'receiveCount',
align: 'center',
},
{
title: '差异数量',
dataIndex: 'differenceCount',
align: 'center',
},
];
const detailedColumns: EditableColumns[] = [
{
title: '批次号',
dataIndex: 'batch',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: '退货发货单号',
dataIndex: 'deliveryNo',
align: 'center',
},
{
title: '发货时间',
dataIndex: 'deliveryTime',
align: 'center',
},
{
title: '物流单号',
dataIndex: 'logisticsOrderNo',
align: 'center',
},
{
title: '物流公司',
dataIndex: 'logisticsName',
align: 'center',
},
{
title: '退货入库单号',
dataIndex: 'storageNo',
align: 'center',
},
{
title: '入库时间',
dataIndex: 'storageTime',
align: 'center',
},
{
title: '内部状态',
dataIndex: 'innerStatusName',
align: 'center',
},
];
const handleBatchChange = value => {
};
const handleConfirmReturnDeliver = (id) => {
if (onConfirmReturnDeliver) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认退货发货？`,
onOk() {
return onConfirmReturnDeliver(id);
},
});
}
};
const handleConfirmReturnReceive = (id) => {
if (onConfirmReturnReceive) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认退货收货？`,
onOk() {
return onConfirmReturnReceive(id);
},
});
}
};
const handleConfirmReturnBack = (id) => {
if (onConfirmReturnBack) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认退货回单？`,
onOk() {
return onConfirmReturnBack(id);;
},
});
}
};
return (
<MellowCard>
<Tabs defaultActiveKey="2">
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}统计`}
key="1"
>
<PolymericTable
rowKey="id"
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
</TabPane>
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}明细`}
key="2"
>
<Radio.Group
options={
detailed.map(item => ({
label: `第 ${item.batch} 批次`,
value: item.batch,
}))
}
defaultValue={1}
onChange={handleBatchChange}
optionType="button"
/>
{detailed.map(item => (
<div key={item.batch}>
<div className={styles.detailedWrap}>
<Row align="middle">
<Col span={16}>
<Descriptions>
<Descriptions.Item label="退货发货单号">
<a>{item.deliveryNo}</a>
</Descriptions.Item>
<Descriptions.Item label="物流单号">
<a>{item.logisticsOrderNo}</a>
</Descriptions.Item>
<Descriptions.Item label="退货入库单号">{item.storageNo}</Descriptions.Item>
<Descriptions.Item label="发货时间">{item.deliveryTime}</Descriptions.Item>
<Descriptions.Item label="物流公司">
{item.logisticsName}
</Descriptions.Item>
<Descriptions.Item label="入库时间">
{item.storageTime}
</Descriptions.Item>
</Descriptions>
</Col>
<Col span={8}>
<Descriptions column={2}>
<Descriptions.Item label="内部状态">
<Badge color={'#6C9CEB'} text={item.innerStatusName} />
</Descriptions.Item>
<Descriptions.Item>
{item.innerStatus === MAIL_INNER_STATUS_UNCONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnDeliver(item.deliveryId)}
>
确认退货发货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnReceive(item.deliveryId)}
>
确认退货收货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_RECEIVING && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnBack(item.deliveryId)}
>
确认退货回单
</a>
)}
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</div>
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={item.detailList}
columns={detailedColumns}
loading={false}
pagination={null}
/>
</div>
))}
</TabPane>
</Tabs>
</MellowCard>
);
};
export default ReturnInfo;
/*
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-09 11:35:12
* @Description: 退货收货统计、退货发货明细
*/
import React from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
ClockCircleOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons';
import { SummaryData, Detailed } from './interface';
import MellowCard from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import {
MAIL_INNER_STATUS_UNCONFIRMED_DELIVER,
MAIL_INNER_STATUS_CONFIRMED_DELIVER,
MAIL_INNER_STATUS_CONFIRMED_RECEIVING,
} from '../../constants';
import styles from './index.less';
const { TabPane } = Tabs;
const { confirm } = Modal;
interface ReturnInfoProps {
/**
* 退货收货统计
*/
summary: SummaryData[],
/**
* 退货发货明细
*/
detailed: Detailed[],
/**
* 是否是采购商
*/
isPurchaser?: boolean;
/**
* 确认退货回单
*/
onConfirmReturnBack?: (id: number) => void;
/**
* 确认退货发货
*/
onConfirmReturnDeliver?: (id: number) => Promise<any>;
/**
* 确认退货收货
*/
onConfirmReturnReceive?: (id: number) => Promise<any>;
};
const ReturnInfo: React.FC<ReturnInfoProps> = ({
summary = [],
detailed = [],
isPurchaser = false,
onConfirmReturnBack,
onConfirmReturnDeliver,
onConfirmReturnReceive,
}) => {
const summaryColumns: EditableColumns[] = [
{
title: '订单号',
dataIndex: 'orderNo',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: '商品ID',
dataIndex: 'productId',
align: 'center',
},
{
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
dataIndex: 'category',
align: 'center',
},
{
title: '品牌',
dataIndex: 'brand',
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
},
{
title: '退货数量',
dataIndex: 'returnCount',
align: 'center',
},
{
title: '已退货发货',
dataIndex: 'deliveryCount',
align: 'center',
},
{
title: '未退货发货',
dataIndex: 'unDeliveryCount',
align: 'center',
},
{
title: '已退货收货',
dataIndex: 'receiveCount',
align: 'center',
},
{
title: '差异数量',
dataIndex: 'differenceCount',
align: 'center',
},
];
const detailedColumns: EditableColumns[] = [
{
title: '批次号',
dataIndex: 'batch',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: '退货发货单号',
dataIndex: 'deliveryNo',
align: 'center',
},
{
title: '发货时间',
dataIndex: 'deliveryTime',
align: 'center',
},
{
title: '物流单号',
dataIndex: 'logisticsOrderNo',
align: 'center',
},
{
title: '物流公司',
dataIndex: 'logisticsName',
align: 'center',
},
{
title: '退货入库单号',
dataIndex: 'storageNo',
align: 'center',
},
{
title: '入库时间',
dataIndex: 'storageTime',
align: 'center',
},
{
title: '内部状态',
dataIndex: 'innerStatusName',
align: 'center',
},
];
const handleBatchChange = value => {
};
const handleConfirmReturnDeliver = (id) => {
if (onConfirmReturnDeliver) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认退货发货？`,
onOk() {
return onConfirmReturnDeliver(id);
},
});
}
};
const handleConfirmReturnReceive = (id) => {
if (onConfirmReturnReceive) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认退货收货？`,
onOk() {
return onConfirmReturnReceive(id);
},
});
}
};
const handleConfirmReturnBack = (id) => {
if (onConfirmReturnBack) {
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `是否确认退货回单？`,
onOk() {
return onConfirmReturnBack(id);;
},
});
}
};
return (
<MellowCard>
<Tabs defaultActiveKey="2">
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}统计`}
key="1"
>
<PolymericTable
rowKey="id"
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
</TabPane>
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}明细`}
key="2"
>
<Radio.Group
options={
detailed.map(item => ({
label: `第 ${item.batch} 批次`,
value: item.batch,
}))
}
defaultValue={1}
onChange={handleBatchChange}
optionType="button"
/>
{detailed.map(item => (
<div key={item.batch}>
<div className={styles.detailedWrap}>
<Row align="middle">
<Col span={16}>
<Descriptions>
<Descriptions.Item label="退货发货单号">
<a>{item.deliveryNo}</a>
</Descriptions.Item>
<Descriptions.Item label="物流单号">
<a>{item.logisticsOrderNo}</a>
</Descriptions.Item>
<Descriptions.Item label="退货入库单号">{item.storageNo}</Descriptions.Item>
<Descriptions.Item label="发货时间">{item.deliveryTime}</Descriptions.Item>
<Descriptions.Item label="物流公司">
{item.logisticsName}
</Descriptions.Item>
<Descriptions.Item label="入库时间">
{item.storageTime}
</Descriptions.Item>
</Descriptions>
</Col>
<Col span={8}>
<Descriptions column={2}>
<Descriptions.Item label="内部状态">
<Badge color={'#6C9CEB'} text={item.innerStatusName} />
</Descriptions.Item>
<Descriptions.Item>
{item.innerStatus === MAIL_INNER_STATUS_UNCONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnDeliver(item.deliveryId)}
>
确认退货发货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_DELIVER && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnReceive(item.deliveryId)}
>
确认退货收货
</a>
)}
{item.innerStatus === MAIL_INNER_STATUS_CONFIRMED_RECEIVING && (
<a
style={{
textAlign: 'right',
display: 'block',
}}
onClick={() => handleConfirmReturnBack(item.deliveryId)}
>
确认退货回单
</a>
)}
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</div>
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={item.detailList}
columns={detailedColumns}
loading={false}
pagination={null}
/>
</div>
))}
</TabPane>
</Tabs>
</MellowCard>
);
};
export default ReturnInfo;
src/pages/returnManage/components/ReturnDetailInfo/index.tsx
View file @ 93cdbde3
......@@ -110,6 +110,7 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
title: '商品名称',
dataIndex: 'productName',
align: 'center',
ellipsis: true,
},
{
title: '品类',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment