Skip to content

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

feat: 样式改版

parent 4509a81c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 106 deletions
src/constants/order.ts
View file @ c5b23e14
......@@ -49,4 +49,20 @@ export const ORDER_TYPE_BIDDING_CONTRACT = 10;
/**
* 采购招标合同
*/
export const ORDER_TYPE_TENDER_CONTRACT = 11;
\ No newline at end of file
export const ORDER_TYPE_TENDER_CONTRACT = 11;
/**
* 对应中文
*/
export const ORDER_TYPE = {
[ORDER_TYPE_INQUIRYT_PURCHASE]: '询价采购',
[ORDER_TYPE_DEMAND_PURCHASE]: '需求采购',
[ORDER_TYPE_STORE_PURCHASE]: '现货采购',
[ORDER_TYPE_CENTRAL_PURCHASE]: '集采',
[ORDER_TYPE_CHANNEL_DIRECT_MINING]: '渠道直采',
[ORDER_TYPE_CHANNEL_STORE]: '渠道现货',
[ORDER_TYPE_POINTS]: '积分兑换',
[ORDER_TYPE_CHANNEL_POINTS]: '渠道积分兑换',
[ORDER_TYPE_INQUIRY_CONTRACT]: '采购询价合同',
[ORDER_TYPE_BIDDING_CONTRACT]: '采购竞价合同',
[ORDER_TYPE_TENDER_CONTRACT]: '采购招标合同',
};
\ No newline at end of file
src/pages/afterService/components/BasicInfo/index.less 0 → 100644
View file @ c5b23e14
.basicInfo {
:global {
.ant-descriptions-item-content {
white-space: break-spaces;
}
}
}
\ No newline at end of file
src/pages/afterService/components/BasicInfo/index.tsx 0 → 100644
View file @ c5b23e14
/*
* @Author: XieZhiXiong
* @Date: 2021-05-11 10:46:57
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-11 15:46:24
* @Description: 申请单基础信息
*/
import React, { CSSProperties } from 'react';
import { Descriptions } from 'antd';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import styles from './index.less';
export interface ColumnProps {
span?: number,
contentStyle?: CSSProperties,
labelStyle?: CSSProperties,
}
export interface DataItem {
/**
* 标题
*/
title: React.ReactNode,
/**
* 值
*/
value: React.ReactNode,
/**
* DescriptionItem props
*/
columnProps?: ColumnProps,
}
interface IProps extends MellowCardProps {
/**
* 数据
*/
data: DataItem[],
};
const defaultColumnProps: ColumnProps = {
labelStyle: {
width: 104,
},
};
const AfterServiceBasicInfo: React.FC<IProps> = (props: IProps) => {
const { data, ...rest } = props;
return (
<MellowCard
title="基本信息"
bodyStyle={{
paddingBottom: 0,
}}
className={styles.basicInfo}
{...rest}
>
<Descriptions column={3}>
{data.map((item, index) => (
<Descriptions.Item
key={index}
label={item.title}
{...({...defaultColumnProps, ...item.columnProps} || defaultColumnProps)}
>
{item.value}
</Descriptions.Item>
))}
</Descriptions>
</MellowCard>
);
};
export default AfterServiceBasicInfo;
src/pages/afterService/components/FileList/index.tsx
View file @ c5b23e14
......@@ -2,26 +2,27 @@
* @Author: XieZhiXiong
* @Date: 2020-11-03 11:49:34
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-02-09 14:41:48
* @LastEditTime: 2021-05-11 15:47:53
* @Description: 附件列表
*/
import React from 'react';
import { Upload } from 'antd';
import { FileData } from '@/utils';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import styles from './index.less';
interface FileListProps {
interface FileListProps extends MellowCardProps {
fileList: FileData[];
};
const FileList: React.FC<FileListProps> = ({
fileList = [],
fileList = [],
...rest
}) => {
return (
<MellowCard
title="相关不良原因举证附件"
fullHeight
{...rest}
>
<Upload
className={styles.file}
......
src/pages/afterService/components/FlowRecords/index.less
View file @ c5b23e14
.flow-records {
:global {
.ant-radio-button-wrapper:hover {
color: #6B778C;
}
.ant-radio-group-solid {
.ant-radio-button-wrapper-checked {
background: #6B778C;
border-color: #6B778C;
&:hover {
background: #6B778C;
border-color: #6B778C;
}
}
}
}
}
\ No newline at end of file
src/pages/afterService/components/FlowRecords/index.tsx
View file @ c5b23e14
import React, { useEffect, useState } from 'react';
import {
Tabs,
Badge,
Tabs,
Badge,
Radio,
} from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import StatusTag from '@/components/StatusTag';
import styles from './index.less';
......@@ -37,17 +39,15 @@ export interface InnerHistoryData {
totalCount: number,
};
interface FlowRecordsProps {
interface FlowRecordsProps extends MellowCardProps {
/**
* 获取外部流转记录
*/
fetchOuterHistory?: (params: { [key: string]: any }) => Promise<OuterHistoryData>;
/**
* 获取内部流转记录
*/
fetchInnerHistory: (params: { [key: string]: any }) => Promise<InnerHistoryData>;
/**
* 外部状态map
*/
......@@ -65,6 +65,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
fetchInnerHistory,
outerStatusMap = {},
innerStatusColorMap = {},
...rest
}) => {
const [outerPage, setOuterPage] = useState(1);
const [outerSize, setOuterSize] = useState(PAGE_SIZE);
......@@ -74,6 +75,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
const [innerSize, setInnerSize] = useState(PAGE_SIZE);
const [innerLoading, setInnerLoading] = useState(false);
const [innerData, setInnerData] = useState<InnerHistoryData>({ data: [], totalCount: 0 });
const [radioValue, setRadioValue] = useState<('inner' | 'outer')>('inner');
const outerColumns: EditableColumns[] = [
{
......@@ -217,11 +219,47 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
});
};
const handleRadioChange = (e: RadioChangeEvent) => {
const { value } = e.target;
setRadioValue(value);
};
const options = [
(
outerData.data
&& outerData.data.length
? {
label: '外部状态',
value: 'outer',
disabled: !outerData.data || !outerData.data.length,
}
: null
),
{
label: '内部状态',
value: 'inner',
},
].filter(Boolean);
return (
<MellowCard>
<Tabs onChange={() => {}}>
{outerData.data && outerData.data.length > 0 ? (
<Tabs.TabPane tab="外部流转记录" key="1">
<MellowCard
title="流转记录"
extra={(
<Radio.Group
options={options}
onChange={handleRadioChange}
value={radioValue}
optionType="button"
buttonStyle="solid"
size="small"
/>
)}
className={styles['flow-records']}
{...rest}
>
{outerData.data && outerData.data.length > 0 ? (
<>
{radioValue === 'outer' ? (
<PolymericTable
rowKey="step"
dataSource={outerData.data}
......@@ -234,23 +272,23 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
}}
onPaginationChange={handleOuterPaginationChange}
/>
</Tabs.TabPane>
) : null}
<Tabs.TabPane tab="内部流转记录" key="2">
<PolymericTable
rowKey="step"
dataSource={innerData.data}
columns={innerColumns}
loading={innerLoading}
pagination={{
current: innerPage,
pageSize: innerSize,
total: innerData.totalCount,
}}
onPaginationChange={handleInnerPaginationChange}
/>
</Tabs.TabPane>
</Tabs>
) : null}
</>
) : null}
{radioValue === 'inner' ? (
<PolymericTable
rowKey="step"
dataSource={innerData.data}
columns={innerColumns}
loading={innerLoading}
pagination={{
current: innerPage,
pageSize: innerSize,
total: innerData.totalCount,
}}
onPaginationChange={handleInnerPaginationChange}
/>
) : null}
</MellowCard>
);
};
......
src/pages/afterService/components/OuterCirculation/index.tsx
View file @ c5b23e14
......@@ -2,26 +2,35 @@
* @Author: XieZhiXiong
* @Date: 2020-09-29 10:47:07
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-01-06 11:44:39
* @LastEditTime: 2021-05-10 16:30:10
* @Description: 外部流转组件
*/
import React from 'react';
import React, { HTMLAttributes } from 'react';
import { Steps, Empty } from 'antd';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import styles from './index.less';
interface OuterCirculation {
steps: {
title: string,
description: string,
status: 'finish' | 'wait',
}[];
export interface StepsItem {
title: string,
description: string,
status: 'finish' | 'wait',
}
interface OuterCirculation extends MellowCardProps {
/**
* 步骤
*/
steps: StepsItem[];
/**
* 当前高亮
*/
current: number;
};
}
const OuterCirculation: React.FC<OuterCirculation> = ({
steps = [],
current,
current,
...rest
}) => {
if (!Array.isArray(steps)) {
......@@ -31,6 +40,7 @@ const OuterCirculation: React.FC<OuterCirculation> = ({
return (
<MellowCard
title="外部流转"
{...rest}
>
<div className={styles.steps}>
{(steps && steps.length > 0) ? (
......
src/pages/afterService/components/ProductList/index.tsx
View file @ c5b23e14
......@@ -6,23 +6,36 @@
* @Description: 商品列表
*/
import React from 'react';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
interface HistoryListHistoryListProps {
interface HistoryListHistoryListProps extends MellowCardProps {
/**
* 数据
*/
dataSource: {
[key: string]: any,
}[];
// 标题
/**
* 标题
*/
title?: string;
// 表格列
/**
* 表格列
*/
columns: EditableColumns[];
// rowKey
/**
* 行 key
*/
rowKey?: string;
// 目标路径
/**
* 订单详情前缀
*/
target?: string;
// loading
/**
* Table loading
*/
loading?: boolean;
};
......@@ -33,11 +46,13 @@ const ProductList: React.FC<HistoryListHistoryListProps> = ({
rowKey = 'id',
target,
loading = false,
...rest
}) => {
return (
<MellowCard
title={title}
{...rest}
>
<PolymericTable
rowKey={rowKey}
......
src/pages/afterService/components/ReturnAddressInfo/index.tsx
View file @ c5b23e14
......@@ -6,7 +6,7 @@
* @Description: 退货地址信息
*/
import React, { useEffect } from 'react';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import { createAsyncFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
......@@ -31,47 +31,76 @@ export interface Values {
receiveUserTel: string | undefined,
};
interface ReturnAddressInfo {
// 是否是编辑的
interface ReturnAddressInfo 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 ReturnAddressInfo: React.FC<ReturnAddressInfo> = ({
isEdit = false,
deliveryAddress = {},
shippingAddress = {},
onSubmit,
onFormSubmit,
...rest
}) => {
useEffect(() => {
......@@ -137,6 +166,7 @@ const ReturnAddressInfo: React.FC<ReturnAddressInfo> = ({
<MellowCard
title="退货收货地址"
fullHeight
{...rest}
>
<NiceForm
initialValues={{
......@@ -181,8 +211,8 @@ const ReturnAddressInfo: React.FC<ReturnAddressInfo> = ({
const deliveryTypeValue = 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/ReturnAnalysis/index.tsx
View file @ c5b23e14
......@@ -6,14 +6,13 @@
* @Description: 退货收货统计、退货发货明细
*/
import React, { useState } from 'react';
import { Tabs, Button, Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import { Tabs, 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';
......@@ -31,7 +30,7 @@ import styles from './index.less';
const { TabPane } = Tabs;
const { confirm } = Modal;
interface ReturnInfoProps {
interface ReturnInfoProps extends MellowCardProps {
/**
* 退货收货统计
*/
......@@ -88,6 +87,7 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
innerStatus,
target,
isEdit = false,
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
......@@ -258,7 +258,7 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
};
return (
<MellowCard>
<MellowCard {...rest}>
<Tabs defaultActiveKey="2">
<TabPane
tab={`退货${!isPurchaser ? '收货' : '发货'}统计`}
......
src/pages/afterService/components/ReturnDetailInfo/index.tsx
View file @ c5b23e14
......@@ -8,7 +8,7 @@
import React, { useState } from 'react';
import { Row, Col, Modal, Button, Upload, Descriptions } from 'antd';
import { CaretRightOutlined, CaretDownOutlined, RightOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import StatusTag from '@/components/StatusTag';
......@@ -24,7 +24,7 @@ import {
} from '@/constants';
import Stamp from '../Stamp';
import CheckVoucherModal from '../CheckVoucherModal';
import RefundModal, { RefundModalProps } from '../RefundModal';
import RefundModal from '../RefundModal';
import {
REFUND_INNER_STATUS_NO_REFUND,
REFUND_INNER_STATUS_REFUND_FAILED,
......@@ -37,11 +37,13 @@ import styles from './index.less';
const { confirm } = Modal;
interface ReturnDetailInfoProps {
interface ReturnDetailInfoProps extends MellowCardProps {
/**
* 数据
*/
dataSource: {
[key: string]: any,
}[];
/**
* 退款事件
*/
......@@ -54,11 +56,6 @@ interface ReturnDetailInfoProps {
* 是否是采购商
*/
isPurchaser?: boolean;
/**
* 退货申请单内部状态
*/
innerStatus: number;
/**
* 退货申请单外部状态
*/
......@@ -79,7 +76,6 @@ interface ReturnDetailInfoProps {
* 供应商角色id
*/
supplierRoleId: number,
/**
* 是否可操作的
*/
......@@ -97,6 +93,7 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
supplierId,
supplierRoleId,
isEdit = false,
...rest
}) => {
const [visibleResult, setVisibleResult] = useState(false);
const [notReceivedLoading, setNotReceivedLoading] = useState(false);
......@@ -278,7 +275,7 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
};
return (
<MellowCard title="退款明细">
<MellowCard title="退款明细" {...rest}>
<PolymericTable
rowKey={record => `${record.orderNo}+${record.productId}`}
dataSource={dataSource}
......
src/pages/afterService/components/Score/index.tsx
View file @ c5b23e14
......@@ -6,7 +6,7 @@
* @Description: 评价
*/
import React from 'react';
import MellowCard from '@/components/MellowCard';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import { Gauge } from '@/components/Charts';
// 满分 5分
......@@ -28,7 +28,7 @@ const TITLE_MAP = {
5: '非常满意',
};
interface ScoreProps {
interface ScoreProps extends MellowCardProps {
/**
* 分数
*/
......@@ -42,11 +42,12 @@ interface ScoreProps {
const Score: React.FC<ScoreProps> = ({
score = 0,
content,
...rest
}) => {
return (
<MellowCard
title="售后评价"
fullHeight
{...rest}
>
<Gauge
title={`${score}分`}
......
src/pages/afterService/exchangeApplication/components/DetailInfo/index.tsx
View file @ c5b23e14
......@@ -483,7 +483,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
phone: detailInfo?.returnGoodsAddress?.sendUserTel,
fullAddress: detailInfo?.returnGoodsAddress?.sendAddress,
}}
onSubmit={() => {}}
onFormSubmit={() => {}}
isEdit={isEditAddress && detailInfo?.innerStatus === EXCHANGE_INNER_STATUS_UNCOMMITTED}
/>
</Suspense>
......
src/pages/afterService/exchangeManage/components/DetailInfo/index.tsx
View file @ c5b23e14
......@@ -546,7 +546,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
fullAddress: detailInfo?.returnGoodsAddress?.sendAddress,
}}
isEdit={isEditAddress && detailInfo?.innerStatus === EXCHANGE_INNER_STATUS_UNCOMMITTED}
onSubmit={handleReturnAddressSubmit}
onFormSubmit={handleReturnAddressSubmit}
/>
</Suspense>
</Col>
......
src/pages/afterService/returnApplication/components/DetailInfo/index.less
View file @ c5b23e14
.detailInfo {
&-desc {
:global {
.ant-descriptions-item-content {
white-space: break-spaces;
}
}
height: 50px;
overflow-y: auto;
}
}
\ No newline at end of file
src/pages/afterService/returnManage/components/DetailInfo/index.tsx
View file @ c5b23e14
......@@ -576,7 +576,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
phone: detailInfo?.returnGoodsAddress?.sendUserTel,
fullAddress: detailInfo?.returnGoodsAddress?.sendAddress,
}}
onSubmit={handleReturnAddressSubmit}
onFormSubmit={handleReturnAddressSubmit}
isEdit={isEditAddress && detailInfo?.innerStatus === RETURN_INNER_STATUS_UNCOMMITTED}
/>
</Suspense>
......
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