Skip to content

J
jinfa-platform
Commit 7c932fe2 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

chore: 完善展示

parent fa266fc5
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 233 deletions
src/components/AuditProcess/index.less
View file @ 7c932fe2
.steps {
padding-top: 2px;
overflow: auto;
}
\ No newline at end of file
src/components/AuditProcess/index.tsx
View file @ 7c932fe2
......@@ -5,15 +5,16 @@
* @LastEditTime: 2021-01-13 15:36:08
* @Description: 内外部流转记录组件
*/
import React from 'react';
import React, { useState } from 'react';
import {
Steps,
Tabs,
} from 'antd';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import ButtonSwitch from '@/components/ButtonSwitch';
import styles from './index.less';
interface AuditProcessProp {
interface AuditProcessProp extends MellowCardProps {
outerVerifyCurrent?: number;
innerVerifyCurrent?: number;
outerVerifySteps?: {
......@@ -38,15 +39,48 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
outerVerifySteps = [],
innerVerifySteps = [],
customTitleKey,
customKey
}) => (
<MellowCard>
<Tabs onChange={() => {}}>
{
outerVerifySteps?.length &&
<Tabs.TabPane tab="外部审核流程" key="1">
<Steps style={{ marginTop: 30, overflow: "auto", paddingTop: 5, paddingBottom: 5, }} progressDot current={outerVerifyCurrent}>
{outerVerifySteps.map(item => (
customKey,
...rest
}) => {
const [radioValue, setRadioValue] = useState<('inner' | 'outer')>('inner');
const handleRadioChange = (value: ('inner' | 'outer')) => {
setRadioValue(value);
};
const options = [
(
outerVerifySteps
&& outerVerifySteps.length
? {
label: '外部流转',
value: 'outer',
disabled: !outerVerifySteps || !outerVerifySteps.length,
}
: null
),
{
label: '内部流转',
value: 'inner',
},
].filter(Boolean);
return (
<MellowCard
title="流转进度"
extra={(
<ButtonSwitch
options={options}
onChange={handleRadioChange}
value={radioValue}
/>
)}
{...rest}
>
{radioValue === 'outer' ? (
<div className={styles.steps}>
<Steps progressDot current={outerVerifyCurrent}>
{outerVerifySteps && outerVerifySteps.map(item => (
<Steps.Step
key={customKey ? item[customKey] : item.step}
title={customTitleKey ? item[customTitleKey] : item.stepName}
......@@ -55,13 +89,12 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
/>
))}
</Steps>
</Tabs.TabPane>
}
{
innerVerifySteps?.length &&
<Tabs.TabPane tab="内部审核流程" key="2">
<Steps style={{ marginTop: 30, overflow: "auto", paddingTop: 5, paddingBottom: 5, }} progressDot current={innerVerifyCurrent}>
{innerVerifySteps.map(item => (
</div>
) : null}
{radioValue === 'inner' ? (
<div className={styles.steps}>
<Steps progressDot current={innerVerifyCurrent}>
{innerVerifySteps && innerVerifySteps.map(item => (
<Steps.Step
key={customKey ? item[customKey] : item.step}
title={customTitleKey ? item[customTitleKey] : item.stepName}
......@@ -70,10 +103,10 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
/>
))}
</Steps>
</Tabs.TabPane>
}
</Tabs>
</MellowCard>
);
</div>
) : null}
</MellowCard>
)
};
export default AuditProcess;
src/pages/afterService/components/ExchangeAddressInfo/index.tsx
View file @ 7c932fe2
......@@ -6,20 +6,17 @@
* @Description: 换货收货地址
*/
import React, { useEffect } from 'react';
import MellowCard from '@/components/MellowCard';
import { createAsyncFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import { createAsyncFormActions, FormEffectHooks } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { useLinkageUtils } from '@/utils/formEffectUtils';
import NiceForm from '@/components/NiceForm';
import { schema } from './schema';
import styles from './index.less';
const modalFormActions = createAsyncFormActions();
const {
onFieldValueChange$,
onFieldInputChange$,
onFormInit$,
} = FormEffectHooks;
export interface Values {
......@@ -31,47 +28,76 @@ export interface Values {
sendUserTel: string | undefined,
};
interface ExchangeAddressInfo {
// 是否是编辑的
interface ExchangeAddressInfo extends MellowCardProps {
/**
* 是否是编辑的
*/
isEdit?: boolean;
// 换货收货地址
/**
* 换货收货地址
*/
deliveryAddress: {
// id
/**
* id
*/
id?: number;
// 配送方式
/**
* 配送方式
*/
deliveryType?: number;
// 收件人姓名
/**
* 收件人姓名
*/
name: string;
// phone
/**
* phone
*/
phone: string;
// 完整地址
/**
* 完整地址
*/
fullAddress: string;
},
// 换货发货地址
/**
* 换货发货地址
*/
shippingAddress: {
// id
/**
* id
*/
id?: number;
// 配送方式
/**
* 配送方式
*/
deliveryType?: number;
// 收件人姓名
/**
* 收件人姓名
*/
name: string;
// phone
/**
* phone
*/
phone: string;
// 完整地址
/**
* 完整地址
*/
fullAddress: string;
},
// onSubmit
onSubmit: (values: Values) => void;
/**
* 提交事件
*/
onFormSubmit: (values: Values) => void;
};
const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
isEdit = false,
deliveryAddress = {},
shippingAddress = {},
onSubmit,
isEdit = false,
deliveryAddress = {},
shippingAddress = {},
onFormSubmit,
...rest
}) => {
useEffect(() => {
......@@ -179,7 +205,7 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
return (
<MellowCard
title="换货收货地址"
fullHeight
{...rest}
>
<NiceForm
initialValues={{
......@@ -192,7 +218,7 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
Address,
ShippingAddress,
}}
effects={($, { setFieldState, getFieldValue }) => {
effects={($, { getFieldValue }) => {
useAsyncSelect('*(shippingAddress,pickupAddress)', fetchShipperAddress, ['label', 'value']);
const linkage = useLinkageUtils();
......@@ -223,8 +249,8 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
break
};
if (onSubmit) {
onSubmit({
if (onFormSubmit) {
onFormSubmit({
deliveryType: value,
id: undefined,
isDefault: undefined,
......@@ -247,8 +273,8 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
const deliveryTypeValue = await getFieldValue('deliveryType');
const fullData = originAsyncData.find(item => item.id === value);
if (onSubmit) {
onSubmit({
if (onFormSubmit) {
onFormSubmit({
deliveryType: deliveryTypeValue,
id: fullData ? fullData.id : undefined,
isDefault: fullData ? fullData.isDefault : undefined,
......
src/pages/afterService/components/ExchangeDeliverInfo/index.tsx
View file @ 7c932fe2
......@@ -6,14 +6,15 @@
* @Description: 换货发货统计、换货发货明细
*/
import React, { useState } from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import { Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import { SummaryData, Detailed } from './interface';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import ButtonSwitch from '@/components/ButtonSwitch';
import {
EXCHANGE_INNER_STATUS_UNCONFIRMED_REPLACE_DELIVERY,
EXCHANGE_INNER_STATUS_UNCONFIRMED_REPLACE_RECEIVE,
......@@ -26,10 +27,9 @@ import {
} from '../../constants';
import styles from './index.less';
const { TabPane } = Tabs;
const { confirm } = Modal;
interface ExchangeDeliverInfoProps {
interface ExchangeDeliverInfoProps extends MellowCardProps {
/**
* 换货发货统计
*/
......@@ -77,17 +77,19 @@ interface ExchangeDeliverInfoProps {
};
const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
summary = [],
detailed = [],
isPurchaser = false,
onConfirmExchangeBack,
onConfirmExchangeDeliver,
onConfirmExchangeReceive,
innerStatus,
summary = [],
detailed = [],
isPurchaser = false,
onConfirmExchangeBack,
onConfirmExchangeDeliver,
onConfirmExchangeReceive,
innerStatus,
target,
isEdit = false,
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
const summaryColumns: EditableColumns[] = [
{
......@@ -247,26 +249,45 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
onConfirmExchangeBack(id);
}
};
const handleRadioChange = (value: ('1' | '2')) => {
setRadioValue(value);
};
const options = [
{
label: `换货${!isPurchaser ? '发货' : '收货'}统计`,
value: '1',
},
{
label: `换货${!isPurchaser ? '发货' : '收货'}明细`,
value: '2',
},
];
return (
<MellowCard>
<Tabs defaultActiveKey="2">
<TabPane
tab={`换货${!isPurchaser ? '发货' : '收货'}统计`}
key="1"
>
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
</TabPane>
<TabPane
tab={`换货${!isPurchaser ? '发货' : '收货'}明细`}
key="2"
>
<MellowCard
title="换货收货信息"
extra={(
<ButtonSwitch
options={options}
onChange={handleRadioChange}
value={radioValue}
/>
)}
{...rest}
>
{radioValue === '1' ? (
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
) : null}
{radioValue === '2' ? (
<>
<Radio.Group
options={
detailed.map(item => ({
......@@ -397,8 +418,8 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
/>
</div>
))}
</TabPane>
</Tabs>
</>
) : null}
</MellowCard>
);
};
......
src/pages/afterService/components/ExchangeReceivedInfo/index.tsx
View file @ 7c932fe2
......@@ -6,17 +6,17 @@
* @Description: 换货收货统计、换货发货明细
*/
import React, { useState } from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import { Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
ClockCircleOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons';
import { Link } from 'umi';
import { SummaryData, Detailed } from './interface';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import ButtonSwitch from '@/components/ButtonSwitch';
import {
EXCHANGE_INNER_STATUS_UNCONFIRMED_RETURN_DELIVERY,
EXCHANGE_INNER_STATUS_UNCONFIRMED_RETURN_RECEIVE,
......@@ -29,10 +29,9 @@ import {
} from '../../constants';
import styles from './index.less';
const { TabPane } = Tabs;
const { confirm } = Modal;
interface ExchangeReceivedInfoProps {
interface ExchangeReceivedInfoProps extends MellowCardProps {
/**
* 退货收货统计
*/
......@@ -80,17 +79,19 @@ interface ExchangeReceivedInfoProps {
};
const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
summary = [],
detailed = [],
isPurchaser = false,
onConfirmReturnBack,
onConfirmReturnDeliver,
onConfirmReturnReceive,
innerStatus,
target,
summary = [],
detailed = [],
isPurchaser = false,
onConfirmReturnBack,
onConfirmReturnDeliver,
onConfirmReturnReceive,
innerStatus,
target,
isEdit = false,
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
const summaryColumns: EditableColumns[] = [
{
......@@ -258,25 +259,44 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
}
};
const handleRadioChange = (value: ('1' | '2')) => {
setRadioValue(value);
};
const options = [
{
label: `退货${!isPurchaser ? '收货' : '发货'}统计`,
value: '1',
},
{
label: `退货${!isPurchaser ? '收货' : '发货'}明细`,
value: '2',
},
];
return (
<MellowCard>
<Tabs defaultActiveKey="2">
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}统计`}
key="1"
>
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
</TabPane>
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}明细`}
key="2"
>
<MellowCard
title="退货发货信息"
extra={(
<ButtonSwitch
options={options}
onChange={handleRadioChange}
value={radioValue}
/>
)}
{...rest}
>
{radioValue === '1' ? (
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={summary}
columns={summaryColumns}
loading={false}
pagination={null}
/>
) : null}
{radioValue === '2' ? (
<>
<Radio.Group
options={
detailed.map(item => ({
......@@ -407,8 +427,8 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
/>
</div>
))}
</TabPane>
</Tabs>
</>
) : null}
</MellowCard>
);
};
......
src/pages/afterService/components/FlowRecords/index.tsx
View file @ 7c932fe2
......@@ -38,13 +38,21 @@ export interface InnerHistoryData {
interface FlowRecordsProps extends MellowCardProps {
/**
* 外部流转记录，不能与 fetchOuterHistory 共存
*/
outerHistory?: OuterHistoryItem[];
/**
* 内部流转记录，不能与 fetchInnerHistory 共存
*/
innerHistory?: InnerHistoryItem[];
/**
* 获取外部流转记录
*/
fetchOuterHistory?: (params: { [key: string]: any }) => Promise<OuterHistoryData>;
/**
* 获取内部流转记录
*/
fetchInnerHistory: (params: { [key: string]: any }) => Promise<InnerHistoryData>;
fetchInnerHistory?: (params: { [key: string]: any }) => Promise<InnerHistoryData>;
/**
* 外部状态map
*/
......@@ -57,10 +65,12 @@ interface FlowRecordsProps extends MellowCardProps {
const PAGE_SIZE = 10;
const FlowRecords: React.FC<FlowRecordsProps> = ({
fetchOuterHistory,
fetchInnerHistory,
outerStatusMap = {},
const FlowRecords: React.FC<FlowRecordsProps> = ({
outerHistory,
innerHistory,
fetchOuterHistory,
fetchInnerHistory,
outerStatusMap = {},
innerStatusColorMap = {},
...rest
}) => {
......@@ -162,6 +172,10 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
];
const getOuterHistory = params => {
if (outerHistory) {
setOuterData({ data: outerHistory, totalCount: outerHistory.length });
return;
}
if (fetchOuterHistory) {
setOuterLoading(true);
fetchOuterHistory(params).then(res => {
......@@ -175,6 +189,10 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
};
const getInnerHistory = params => {
if (innerHistory) {
setInnerData({ data: innerHistory, totalCount: innerHistory.length });
return;
}
if (fetchInnerHistory) {
setInnerLoading(true);
fetchInnerHistory(params).then(res => {
......@@ -192,11 +210,14 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
current: outerPage,
pageSize: outerSize,
});
}, [outerHistory]);
useEffect(() => {
getInnerHistory({
current: innerPage,
pageSize: innerSize,
});
} ,[]);
}, [innerHistory]);
const handleOuterPaginationChange = (current, pageSize) => {
setOuterPage(current);
......
src/pages/afterService/components/OuterCirculation/index.tsx
View file @ 7c932fe2
......@@ -44,7 +44,7 @@ const OuterCirculation: React.FC<OuterCirculation> = ({
>
<div className={styles.steps}>
{(steps && steps.length > 0) ? (
<Steps style={{ marginTop: 30 }} progressDot current={current}>
<Steps progressDot current={current}>
{steps.map((item, index) => (
<Steps.Step
key={index}
......
src/pages/afterService/components/OuterCirculationRecord/index.tsx deleted 100644 → 0
View file @ fa266fc5
/*
* @Author: XieZhiXiong
* @Date: 2020-09-29 15:04:46
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-01-22 11:45:59
* @Description: 外部流转记录
*/
import React from 'react';
import { REPAIR_OUTER_STATUS } from '@/constants';
import MellowCard from '@/components/MellowCard';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import StatusTag from '@/components/StatusTag';
import { REPAIR_OUTER_STATUS_TAG_MAP } from '../../constants';
interface OuterCirculationRecordProps {
dataSource: {
roleName: string,
status: number | string,
operate: string,
operateTime: string,
opinion: string,
}[];
onPaginationChange?: (page: number, size: number) => void;
};
const OuterCirculationRecord: React.FC<OuterCirculationRecordProps> = ({
dataSource = [],
onPaginationChange,
}) => {
const columns: EditableColumns[] = [
{
title: '序号',
dataIndex: 'order',
align: 'center',
render: (_, record, index) => index + 1,
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
render: (text, record) => <StatusTag type={REPAIR_OUTER_STATUS_TAG_MAP[record.statusCode]} title={text} />
},
{
title: '操作',
dataIndex: 'operate',
align: 'center',
ellipsis: true,
},
{
title: '操作时间',
dataIndex: 'operateTime',
align: 'center',
},
{
title: '审核意见',
dataIndex: 'opinion',
align: 'center',
ellipsis: true,
},
];
const handlePaginationChange = (page, size) => {
if (onPaginationChange) {
onPaginationChange(page, size);
}
};
return (
<MellowCard
title="外部流转记录"
>
<PolymericTable
rowKey="step"
dataSource={dataSource}
columns={columns}
loading={false}
pagination={null}
/>
</MellowCard>
);
};
export default OuterCirculationRecord;
\ No newline at end of file
src/pages/afterService/components/RepairAddressInfo/index.tsx
View file @ 7c932fe2
......@@ -2,15 +2,15 @@
* @Author: XieZhiXiong
* @Date: 2020-11-03 13:53:58
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-16 17:59:26
* @LastEditTime: 2021-05-12 17:09:35
* @Description: 维修地址
*/
import React from 'react';
import { Descriptions } from 'antd';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import styles from './index.less';
export interface RepairAddressInfoProps {
export interface RepairAddressInfoProps extends MellowCardProps {
info: {
id: string;
// 收件人
......@@ -23,15 +23,16 @@ export interface RepairAddressInfoProps {
};
const RepairAddressInfo: React.FC<RepairAddressInfoProps> = ({
info = {},
info = {},
...rest
}) => {
return (
<MellowCard
title="维修地址"
fullHeight
{...rest}
>
<Descriptions column={1} className={styles.desc}>
<Descriptions.Item label="维修地址">
<Descriptions.Item label="维修地址" labelStyle={{ width: 106 }}>
<p>{info.receiverName || ''} / {info.phone || ''}</p>
<p>{info.fullAddress || ''}</p>
</Descriptions.Item>
......
src/pages/afterService/components/ReturnAddressInfo/index.tsx
View file @ 7c932fe2
......@@ -192,7 +192,7 @@ const ReturnAddressInfo: React.FC<ReturnAddressInfo> = ({
deliveryAddressShow: deliveryAddress,
}}
previewPlaceholder=" "
effects={($, { setFieldState, getFieldValue }) => {
effects={($, { getFieldValue }) => {
useAsyncSelect('deliveryAddress', fetchDeliveryAddress, ['label', 'value']);
const linkage = useLinkageUtils();
......@@ -241,10 +241,6 @@ const ReturnAddressInfo: React.FC<ReturnAddressInfo> = ({
}
});
}}
// expressionScope={{
// Address,
// DeliveryAddress,
// }}
components={{
Address,
DeliveryAddress,
......
src/pages/afterService/components/ReturnAnalysis/index.tsx
View file @ 7c932fe2
......@@ -2,11 +2,11 @@
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-12 14:54:59
* @LastEditTime: 2021-05-12 18:37:13
* @Description: 退货收货统计、退货发货明细
*/
import React, { useState } from 'react';
import { Tabs, Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import { Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
ExclamationCircleOutlined,
} from '@ant-design/icons';
......@@ -30,7 +30,6 @@ import {
} from '../../constants';
import styles from './index.less';
const { TabPane } = Tabs;
const { confirm } = Modal;
interface ReturnInfoProps extends MellowCardProps {
/**
......@@ -92,7 +91,7 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
const [radioValue, setRadioValue] = useState<('1' | '2')>('1');
const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
const summaryColumns: EditableColumns[] = [
{
......
src/pages/afterService/returnApplication/returnPrSubmit/components/ReturnForm/index.tsx
View file @ 7c932fe2
......@@ -189,11 +189,13 @@ const ReturnForm: React.FC<BillsFormProps> = ({
title: '单价',
dataIndex: 'price',
align: 'center',
render: (text) => `¥ ${text}`,
},
{
title: '金额',
dataIndex: 'price',
dataIndex: 'money',
align: 'center',
render: (text) => `¥ ${text}`,
},
{
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