Commit a5d255d2 authored by XieZhiXiong's avatar XieZhiXiong

静态页面开发中...

parent 5e562b00
......@@ -23,6 +23,8 @@ const route: RouterChild = {
path: '/memberCenter/afterService/exchangeManage/exchangeQuery/detail',
name: 'exchangeQueryDetail',
component: '@/pages/afterService/exchangeManage/exchangeQuery/detail',
hideInMenu: true,
noMargin: true,
},
// 待提交审核换货申请单
{
......
/*
* @Author: XieZhiXiong
* @Date: 2020-11-06 09:54:04
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-12 14:10:48
* @Description: 退货地址信息
*/
import React from 'react';
import MellowCard from '@/components/MellowCard';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import NiceForm from '@/components/NiceForm';
import { schema } from './schema';
import styles from './index.less';
const modalFormActions = createFormActions();
const {
onFieldValueChange$,
onFieldInputChange$,
} = FormEffectHooks;
interface ExchangeAddressInfo {
// 是否是编辑的
isEdit?: boolean;
};
const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
isEdit = false,
}) => {
const handleSubmit = values => {
};
return (
<MellowCard
title="换货收货地址"
fullHeight
>
<NiceForm
effects={($, { setFieldState }) => {
}}
editable={isEdit}
actions={modalFormActions}
schema={schema}
onSubmit={handleSubmit}
/>
</MellowCard>
);
};
export default ExchangeAddressInfo;
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 15:56:35
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-09 16:19:24
* @Description:
*/
import { ISchema } from '@formily/antd';
export const schema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 6,
full: true,
labelAlign: 'left',
},
properties: {
shippingAddress: {
type: 'string',
title: '换货收货地址',
enum: [],
required: true,
'x-component-props': {
placeholder: '请选择',
},
},
},
},
},
};
\ No newline at end of file
.detailedWrap {
padding: 25px 24px 9px;
margin-bottom: 16px;
background-color: #F7F8FA;
}
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-12 11:28:37
* @Description: 换货发货统计、换货发货明细
*/
import React from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge } from 'antd';
import { CaretRightOutlined, CaretDownOutlined, RightOutlined } from '@ant-design/icons';
import MellowCard from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import StatusTag from '@/components/StatusTag';
import Stamp from '../Stamp';
import DescribeLine from '../DescribeLine';
import styles from './index.less';
const { TabPane } = Tabs;
interface ExchangeDeliverInfoProps {
// 换货发货统计
summary: { [key: string]: any }[],
// 换货发货明细
detailed: {
[key: string]: any,
}[],
};
const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
summary = [],
detailed = [],
}) => {
const summaryColumns: EditableColumns[] = [
{
title: '订单号',
dataIndex: 'orderNo',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: 'ID',
dataIndex: 'id',
align: 'center',
},
{
title: '商品名称',
dataIndex: 'productName',
align: 'center',
},
{
title: '品类',
dataIndex: 'category',
align: 'center',
},
{
title: '品牌',
dataIndex: 'brand',
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
},
{
title: '换货数量',
dataIndex: 'num',
align: 'center',
},
{
title: '已换货发货',
dataIndex: 'returnAmount2',
align: 'center',
},
{
title: '未换货发货',
dataIndex: 'status3',
align: 'center',
},
{
title: '已换货收货',
dataIndex: 'reason2',
align: 'center',
},
{
title: '差异数量',
dataIndex: 'reason1',
align: 'center',
},
];
const detailedColumns: EditableColumns[] = [
{
title: '订单号',
dataIndex: 'orderNo',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: 'ID',
dataIndex: 'id',
align: 'center',
},
{
title: '商品名称',
dataIndex: 'productName',
align: 'center',
},
{
title: '品类',
dataIndex: 'category',
align: 'center',
},
{
title: '品牌',
dataIndex: 'brand',
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
},
{
title: '换货数量',
dataIndex: 'num',
align: 'center',
},
{
title: '换货发货数量',
dataIndex: 'returnAmount2',
align: 'center',
},
{
title: '换货入库数量',
dataIndex: 'status3',
align: 'center',
},
{
title: '差异数量',
dataIndex: 'reason1',
align: 'center',
},
];
return (
<MellowCard>
<Tabs defaultActiveKey="2">
<TabPane
tab="换货发货统计"
key="1"
>
<PolymericTable
rowKey="id"
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
</TabPane>
<TabPane
tab="换货发货明细"
key="2"
>
<div className={styles.detailedWrap}>
<Row align="middle">
<Col span={16}>
<Descriptions>
<Descriptions.Item label="退货发货单号">
<a>FH5421036</a>
</Descriptions.Item>
<Descriptions.Item label="物流单号">
<a>WL0954548</a>
</Descriptions.Item>
<Descriptions.Item label="退货入库单号">RK535435</Descriptions.Item>
<Descriptions.Item label="发货时间">2020-08-25 15:35</Descriptions.Item>
<Descriptions.Item label="物流公司">
顺丰
</Descriptions.Item>
<Descriptions.Item label="入库时间">
2020-08-25 15:35
</Descriptions.Item>
</Descriptions>
</Col>
<Col span={8}>
<Descriptions column={2}>
<Descriptions.Item label="内部状态">
<Badge color={'#6C9CEB'} text="待确认售后完成" />
</Descriptions.Item>
<Descriptions.Item>
<a
style={{
textAlign: 'right',
display: 'block',
}}
>
确认换货回单
</a>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</div>
<PolymericTable
rowKey="id"
dataSource={detailed}
columns={detailedColumns}
loading={false}
pagination={null}
/>
</TabPane>
</Tabs>
</MellowCard>
);
};
export default ExchangeDeliverInfo;
.detailedWrap {
padding: 25px 24px 9px;
margin-bottom: 16px;
background-color: #F7F8FA;
}
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-12 13:43:52
* @Description: 退货收货统计、退货发货明细
*/
import React from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge } from 'antd';
import { CaretRightOutlined, CaretDownOutlined, RightOutlined } from '@ant-design/icons';
import MellowCard from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import StatusTag from '@/components/StatusTag';
import Stamp from '../Stamp';
import DescribeLine from '../DescribeLine';
import styles from './index.less';
const { TabPane } = Tabs;
interface ExchangeReceivedInfoProps {
// 退货收货统计
summary: { [key: string]: any }[],
// 退货发货明细
detailed: {
[key: string]: any,
}[],
};
const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
summary = [],
detailed = [],
}) => {
const summaryColumns: EditableColumns[] = [
{
title: '订单号',
dataIndex: 'orderNo',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: 'ID',
dataIndex: 'id',
align: 'center',
},
{
title: '商品名称',
dataIndex: 'productName',
align: 'center',
},
{
title: '品类',
dataIndex: 'category',
align: 'center',
},
{
title: '品牌',
dataIndex: 'brand',
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
},
{
title: '换货数量',
dataIndex: 'num',
align: 'center',
},
{
title: '已退货发货',
dataIndex: 'returnAmount2',
align: 'center',
},
{
title: '未退货发货',
dataIndex: 'status3',
align: 'center',
},
{
title: '已退货收货',
dataIndex: 'reason2',
align: 'center',
},
{
title: '差异数量',
dataIndex: 'reason1',
align: 'center',
},
];
const detailedColumns: EditableColumns[] = [
{
title: '订单号',
dataIndex: 'orderNo',
render: (text, record) => (
<EyePreview
url={``}
>
{text}
</EyePreview>
),
},
{
title: 'ID',
dataIndex: 'id',
align: 'center',
},
{
title: '商品名称',
dataIndex: 'productName',
align: 'center',
},
{
title: '品类',
dataIndex: 'category',
align: 'center',
},
{
title: '品牌',
dataIndex: 'brand',
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
},
{
title: '换货数量',
dataIndex: 'num',
align: 'center',
},
{
title: '退货发货数量',
dataIndex: 'returnAmount2',
align: 'center',
},
{
title: '退货入库数量',
dataIndex: 'status3',
align: 'center',
},
{
title: '差异数量',
dataIndex: 'reason1',
align: 'center',
},
];
return (
<MellowCard>
<Tabs defaultActiveKey="2">
<TabPane
tab="退货收货统计"
key="1"
>
<PolymericTable
rowKey="id"
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
</TabPane>
<TabPane
tab="退货收货明细"
key="2"
>
<div className={styles.detailedWrap}>
<Row align="middle">
<Col span={16}>
<Descriptions>
<Descriptions.Item label="退货发货单号">
<a>FH5421036</a>
</Descriptions.Item>
<Descriptions.Item label="物流单号">
<a>WL0954548</a>
</Descriptions.Item>
<Descriptions.Item label="退货入库单号">RK535435</Descriptions.Item>
<Descriptions.Item label="发货时间">2020-08-25 15:35</Descriptions.Item>
<Descriptions.Item label="物流公司">
顺丰
</Descriptions.Item>
<Descriptions.Item label="入库时间">
2020-08-25 15:35
</Descriptions.Item>
</Descriptions>
</Col>
<Col span={8}>
<Descriptions column={2}>
<Descriptions.Item label="内部状态">
<Badge color={'#6C9CEB'} text="待确认售后完成" />
</Descriptions.Item>
<Descriptions.Item>
<a
style={{
textAlign: 'right',
display: 'block',
}}
>
确认退货回单
</a>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</div>
<PolymericTable
rowKey="id"
dataSource={detailed}
columns={detailedColumns}
loading={false}
pagination={null}
/>
</TabPane>
</Tabs>
</MellowCard>
);
};
export default ExchangeReceivedInfo;
import React from 'react';
import {
Tabs,
Badge,
} from 'antd';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import MellowCard from '@/components/MellowCard';
import StatusTag from '@/components/StatusTag';
import {
CREDIT_INNER_STATUS,
CREDIT_OUTER_STATUS,
} from '@/constants';
import {
} from '../../constants';
import styles from './index.less';
export interface InnerHistoryItem {
step: number;
operator: string;
department: string;
jobTitle: string;
status: number;
operate: string;
operateTime: string,
opinion: string;
};
export interface OuterHistoryItem {
roleName: string;
status: number;
operate: string;
operateTime: string;
opinion: string;
};
interface FlowRecordsProps {
outerHistory?: OuterHistoryItem[];
innerHistory: InnerHistoryItem[];
};
const FlowRecords: React.FC<FlowRecordsProps> = ({ outerHistory = [], innerHistory }) => {
const outerColumns: EditableColumns[] = [
{
title: '序号',
dataIndex: 'index',
align: 'center',
render: (_, record, index) => index + 1,
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
render: (text, record) => (
<StatusTag type={'success'} title={'待提交'} />
),
},
{
title: '操作',
dataIndex: 'operate',
align: 'center',
},
{
title: '操作时间',
dataIndex: 'operateTime',
align: 'center',
ellipsis: true,
},
{
title: '审核意见',
dataIndex: 'opinion',
align: 'center',
ellipsis: true,
},
];
const innerColumns: EditableColumns[] = [
{
title: '序号',
dataIndex: 'step',
align: 'center',
},
{
title: '操作人',
dataIndex: 'operator',
align: 'center',
},
{
title: '部门',
dataIndex: 'department',
align: 'center',
},
{
title: '职位',
dataIndex: 'jobTitle',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
render: (text, record) => (
<Badge color={'#EF6260'} text={'待退货发货'} />
),
},
{
title: '操作',
dataIndex: 'operate',
align: 'center',
},
{
title: '操作时间',
dataIndex: 'operateTime',
align: 'center',
ellipsis: true,
},
{
title: '审核意见',
dataIndex: 'opinion',
align: 'center',
ellipsis: true,
},
];
return (
<MellowCard>
<Tabs onChange={() => {}}>
{outerHistory ? (
<Tabs.TabPane tab="外部流转记录" key="1">
<PolymericTable
rowKey="operateTime"
dataSource={outerHistory}
columns={outerColumns}
loading={false}
pagination={null}
/>
</Tabs.TabPane>
) : null}
<Tabs.TabPane tab="内部流转记录" key="2">
<PolymericTable
rowKey="operateTime"
dataSource={innerHistory}
columns={innerColumns}
loading={false}
pagination={null}
/>
</Tabs.TabPane>
</Tabs>
</MellowCard>
);
};
export default FlowRecords;
\ No newline at end of file
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2020-11-06 09:54:04
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-09 16:27:40
* @LastEditTime: 2020-11-12 13:48:08
* @Description: 退货地址信息
*/
import React from 'react';
......@@ -40,7 +40,7 @@ const ReturnAddressInfo: React.FC<ReturnAddressInfo> = ({
return (
<MellowCard
title="收货地址"
title="退货收货地址"
fullHeight
>
<NiceForm
......
......@@ -27,12 +27,13 @@ import ReturnInfoDrawer from '../../../components/ReturnInfoDrawer';
import { } from '../../../constants';
const ProductList = React.lazy(() => import('../../../components/ProductList'));
const ReturnInfo = React.lazy(() => import('../../../components/ReturnInfo'));
const ReturnDetailInfo = React.lazy(() => import('../../../components/ReturnDetailInfo'));
const ExchangeReceivedInfo = React.lazy(() => import('../../../components/ExchangeReceivedInfo'));
const ExchangeDeliverInfo = React.lazy(() => import('../../../components/ExchangeDeliverInfo'));
const FileList = React.lazy(() => import('../../../components/FileList'));
const ReturnAddressInfo = React.lazy(() => import('../../../components/ReturnAddressInfo'));
const ExchangeAddressInfo = React.lazy(() => import('../../../components/ExchangeAddressInfo'));
const Score = React.lazy(() => import('../../../components/Score'));
const OuterCirculationRecord = React.lazy(() => import('../../../components/OuterCirculationRecord'));
const FlowRecords = React.lazy(() => import('../../../components/FlowRecords'));
interface DetailInfoProps {
// 记录id
......@@ -53,11 +54,6 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
}) => {
const [detailInfo, setDetailInfo] = useState<GetAsReturnGoodsGetDetailBySupplierResponse>(null);
const [infoLoading, setInfoloading] = useState(false);
const [visibleOrderDetial, setVisibleReturnInfo] = useState<boolean>(false);
const handleCheckOrderDetial = record => {
setVisibleReturnInfo(true);
};
const handleReturn = record => {
if (!isEdit) {
......@@ -109,32 +105,22 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
align: 'center',
},
{
title: '采购单价',
dataIndex: 'price',
align: 'center',
},
{
title: '采购金额',
dataIndex: 'amount',
align: 'center',
},
{
title: '已支付金额',
dataIndex: 'payAmount',
align: 'center',
},
{
title: '退货数量',
title: '换货数量',
dataIndex: 'num',
align: 'center',
},
{
title: '退货金额',
dataIndex: 'returnAmount',
title: '换货原因',
dataIndex: 'reason',
align: 'center',
},
{
title: '是否退货',
title: '是否需要退货',
dataIndex: 'status',
align: 'center',
render: (text, record) => (
......@@ -147,38 +133,23 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</>
),
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
render: (text, record) => (
<>
<Button
type="link"
onClick={() => handleCheckOrderDetial(record)}
>
查看详情
</Button>
</>
),
},
];
// 获取退货申请详情
// 获取货申请详情
const getDetailInfo = () => {
if (!id) {
return;
}
setInfoloading(true);
PublicApi.getAsReturnGoodsGetDetailBySupplier({
returnId: id,
}).then(res => {
if (res.code === 1000) {
setDetailInfo(res.data);
}
}).finally(() => {
setInfoloading(false);
});
// setInfoloading(true);
// PublicApi.getAsReturnGoodsGetDetailBySupplier({
// returnId: id,
// }).then(res => {
// if (res.code === 1000) {
// setDetailInfo(res.data);
// }
// }).finally(() => {
// setInfoloading(false);
// });
};
useEffect(() => {
......@@ -233,6 +204,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
>
<Row gutter={[24, 24]}>
<Col span={24}>
{/* 审核流程 */}
<Suspense fallback={null}>
<AuditProcess
outerVerifySteps={
......@@ -262,9 +234,10 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</Col>
<Col span={24}>
{/* 换货商品 */}
<Suspense fallback={null}>
<ProductList
title="退货商品"
title="货商品"
columns={productColumns}
dataSource={[
{
......@@ -277,14 +250,19 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</Col>
<Col span={24}>
{/* 退货发货信息 */}
<Suspense fallback={null}>
<ReturnInfo
received={[]}
deliver={[
<ExchangeReceivedInfo
summary={[
{
orderNo: '123',
id: 1,
},
]}
detailed={[
{
orderNo: '123',
childData: [],
id: 1,
},
]}
/>
......@@ -292,12 +270,19 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</Col>
<Col span={24}>
{/* 换货发货信息 */}
<Suspense fallback={null}>
<ReturnDetailInfo
dataSource={[
<ExchangeDeliverInfo
summary={[
{
orderNo: '123',
id: 1,
},
]}
detailed={[
{
orderNo: '123',
id: 1,
},
]}
/>
......@@ -309,18 +294,28 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
gutter={24}
>
<Col span={6}>
{/* 相关不良原因举证附件 */}
<Suspense fallback={null}>
<FileList />
</Suspense>
</Col>
<Col span={12}>
<Col span={6}>
{/* 退货收货地址 */}
<Suspense fallback={null}>
<ReturnAddressInfo isEdit={isEdit} />
</Suspense>
</Col>
<Col span={6}>
{/* 换货收货地址 */}
<Suspense fallback={null}>
<ExchangeAddressInfo isEdit={isEdit} />
</Suspense>
</Col>
<Col span={6}>
{/* 售后评价 */}
<Suspense fallback={null}>
<Score />
</Suspense>
......@@ -329,16 +324,15 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</Col>
<Col span={24}>
{/* 内、外部流转记录 */}
<Suspense fallback={null}>
<OuterCirculationRecord dataSource={[]} />
<FlowRecords
outerHistory={[]}
innerHistory={[]}
/>
</Suspense>
</Col>
</Row>
<ReturnInfoDrawer
visible={visibleOrderDetial}
onClose={() => setVisibleReturnInfo(false)}
/>
</PageHeaderWrapper>
</Spin>
);
......
......@@ -6,10 +6,9 @@ const ExchangeQueryDetail: React.FC = () => {
const { id, creditId } = usePageStatus();
return (
// <DetailInfo
// id={id}
// />
<div>123</div>
<DetailInfo
id={id}
/>
);
};
......
......@@ -26,7 +26,7 @@ import { } from '../../../constants';
const OuterCirculation = React.lazy(() => import('../../../components/OuterCirculation'));
const ProductList = React.lazy(() => import('../../../components/ProductList'));
const ReturnInfo = React.lazy(() => import('../../../components/ReturnInfo'));
const ReturnAnalysis = React.lazy(() => import('../../../components/ReturnAnalysis'));
const ReturnDetailInfo = React.lazy(() => import('../../../components/ReturnDetailInfo'));
const FileList = React.lazy(() => import('../../../components/FileList'));
const ReturnAddressInfo = React.lazy(() => import('../../../components/ReturnAddressInfo'));
......@@ -249,7 +249,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
<Col span={24}>
<Suspense fallback={null}>
<ReturnInfo
<ReturnAnalysis
received={[]}
deliver={[
{
......
......@@ -27,7 +27,7 @@ import ReturnInfoDrawer from '../../../components/ReturnInfoDrawer';
import { } from '../../../constants';
const ProductList = React.lazy(() => import('../../../components/ProductList'));
const ReturnInfo = React.lazy(() => import('../../../components/ReturnInfo'));
const ReturnAnalysis = React.lazy(() => import('../../../components/ReturnAnalysis'));
const ReturnDetailInfo = React.lazy(() => import('../../../components/ReturnDetailInfo'));
const FileList = React.lazy(() => import('../../../components/FileList'));
const ReturnAddressInfo = React.lazy(() => import('../../../components/ReturnAddressInfo'));
......@@ -278,7 +278,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
<Col span={24}>
<Suspense fallback={null}>
<ReturnInfo
<ReturnAnalysis
received={[]}
deliver={[
{
......
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