Skip to content

J
jinfa-platform
Commit f7d588f6 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix: 待发货订单添加售后功能

parent 19bf4ad3
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 75 deletions
src/locales/en-US/order.ts
View file @ f7d588f6
......@@ -8,6 +8,7 @@ export default {
'purchaseOrder.operation2': 'After-sales',
'purchaseOrder.operation3': 'Evaluation',
'purchaseOrder.operation4': 'Adjust delivery time',
'purchaseOrder.operation5': 'Invite friends to join a group',
'purchaseOrder.addressTitle': 'Delivery address',
'purchaseOrder.operation': 'Operation',
'purchaseOrder.export': 'Export',
......
src/locales/ko-KR/order.ts
View file @ f7d588f6
......@@ -8,6 +8,7 @@ export default {
'purchaseOrder.operation2': '판매 후',
'purchaseOrder.operation3': '평가',
'purchaseOrder.operation4': '배송 시간 조정',
'purchaseOrder.operation5': '친한 친구를 초청하여 단체 모임을 결성하다',
'purchaseOrder.addressTitle': '배송 주소',
'purchaseOrder.operation': '조작하다',
'purchaseOrder.export': '내보내기',
......
src/locales/zh-CN/order.ts
View file @ f7d588f6
......@@ -8,6 +8,7 @@ export default {
'purchaseOrder.operation2': '售后',
'purchaseOrder.operation3': '评价',
'purchaseOrder.operation4': '调整送货时间',
'purchaseOrder.operation5': '邀请好友拼团',
'purchaseOrder.addressTitle': '送货地址',
'purchaseOrder.operation': '操作',
'purchaseOrder.export': '导出',
......
src/pages/transaction/purchaseOrder/components/saleAfter/index.tsx 0 → 100644
View file @ f7d588f6
import { Col, Modal, ModalProps, Row } from 'antd'
import React from 'react'
import styled from 'styled-components'
import cx from 'classnames'
import { useIntl } from 'umi'
interface dataProps {
id: number,
name: string,
}
interface SaleAfterProps extends ModalProps {
/** 售后项数据源 */
showDataSource: dataProps[],
/** 点击售后项的回调 */
onClickItem: (id: number) => void,
/** 当前选中id */
currentSelectedKey: number,
}
const SelectStyles = styled((props) => <div className='select-list' {...props}></div>)`
.select_style_border {
border: 1px solid #EEF0F3;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 32px;
height: 32px;
position:relative;
}
.select_style_border.active {
border: 1px solid #00B382;
color: #00B37A;
}
.select_style_border.active::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid #00B37A;
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
`
/**
* 订单售后弹框
* @param props
* @returns
*/
const SaleAfter: React.FC<SaleAfterProps> = (props) => {
const intl = useIntl()
const {
showDataSource = [],
onClickItem,
currentSelectedKey,
...restProps
} = props
return (<Modal
title={intl.formatMessage({ id: 'purchaseOrder.modalTitle1' })}
{...restProps}
>
<div style={{ width: '100%' }}>
<SelectStyles>
{
showDataSource.map(v => <div key={v.id} onClick={() => onClickItem(v.id)} className={cx('select_style_border', currentSelectedKey === v.id ? 'active' : '')}>
<div>
<Row style={{ color: '#303133' }}>
<Col>{v.name}</Col>
</Row>
</div>
</div>)
}
</SelectStyles>
</div>
</Modal>)
}
SaleAfter.defaultProps = {}
export default SaleAfter
src/pages/transaction/purchaseOrder/index.tsx
View file @ f7d588f6
......@@ -21,38 +21,9 @@ import { ORDER_TYPE_POINTS } from '@/constants/order'
import { getAuth } from '@/utils/auth'
import moment from 'moment'
import { getOrderBuyerGetDeliveryTime, getOrderBuyerPage, postOrderBuyerCancel, postOrderBuyerUpdateDeliveryTime } from '@/services/OrderNewV2Api'
import SaleAfter from './components/saleAfter'
const SelectStyles = styled((props) => <div className='select-list' {...props}></div>)`
.select_style_border {
border: 1px solid #EEF0F3;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 32px;
height: 32px;
position:relative;
}
.select_style_border.active {
border: 1px solid #00B382;
color: #00B37A;
}
.select_style_border.active::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid #00B37A;
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
`
// 订单查询
export interface PurchaseOrderProps { }
......@@ -195,7 +166,6 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
}
}
const handleExport = async () => {
const p = {...fetchParams.current}
delete p.current
......@@ -307,31 +277,14 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
}}
/>
</Card>
<Modal
title={intl.formatMessage({ id: 'purchaseOrder.modalTitle1' })}
<SaleAfter
visible={saleVisible}
showDataSource={showDataSource}
currentSelectedKey={checkedId}
onOk={handleOk}
onCancel={()=>setSaleVisible(false)}
>
<div style={{ width: '100%' }}>
<SelectStyles>
{
showDataSource.map(v => <div key={v.id} onClick={() => setCheckedId(v.id)} className={cx('select_style_border', checkedId === v.id ? 'active' : '')}>
<div>
<Row style={{ color: '#303133' }}>
<Col>{v.name}</Col>
{/* <Col style={{ marginLeft: 6 }}>
{
renderProcessType(v)
}
</Col> */}
</Row>
</div>
</div>)
}
</SelectStyles>
</div>
</Modal>
onClickItem={(id) => setCheckedId(id)}
/>
<ModalForm
title={intl.formatMessage({ id: 'purchaseOrder.modalTitle2' })}
currentRef={destoryRef}
......
src/pages/transaction/purchaseOrder/orderCollectSrm/components/contractModalTable/index.tsx
View file @ f7d588f6
......@@ -108,7 +108,7 @@ const ContractModalTable:React.FC<ContractModalTableProps> = (props) => {
}
return (
<ModalTable
modalTitle={intl.formatMessage({id: 'purchaseOrder.orderCollect.requisition.button1'})}
modalTitle={intl.formatMessage({id: 'purchaseOrder.orderCollect.requisition.button1'})}
columns={contractColumns}
visible={visible}
confirm={handleConfirm}
......@@ -118,7 +118,8 @@ const ContractModalTable:React.FC<ContractModalTableProps> = (props) => {
modalType='contractByDefault'
searchName="contractNo"
tableProps={{
rowKey: 'id'
rowKey: 'id',
scroll: { x: true }
}}
resetModal={{
destroyOnClose: true,
......
src/pages/transaction/purchaseOrder/readyDelevedOrder/index.tsx
View file @ f7d588f6
import React from 'react'
import { Card } from 'antd'
import React, { useState } from 'react'
import { Card, message } from 'antd'
import { StandardTable } from 'god'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { useSelfTable } from './model/useSelfTable'
......@@ -8,8 +8,12 @@ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilte
import { FORM_FILTER_PATH } from '@/formSchema/const'
import Submit from '@/components/NiceForm/components/Submit'
import DateRangePickerUnix from '@/components/NiceForm/components/DateRangePickerUnix'
import '../index.less'
import { getOrderBuyerValidateDeliveryPage } from '@/services/OrderNewV2Api'
import { useIntl, history } from 'umi'
import TableOperation from '@/components/TableOperation'
import { ORDER_TYPE_POINTS } from '@/constants/order'
import SaleAfter from '../components/saleAfter'
import '../index.less'
// 待发货订单
......@@ -21,15 +25,95 @@ const fetchTableData = async (params) => {
}
const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
const intl = useIntl()
const {
columns
} = useSelfTable()
const [saleVisible, setSaleVisible] = useState<boolean>(false)
const [checkedId, setCheckedId] = useState<number>()
const [recordId, setRecordId] = useState<any>()
const [orderType, setOrderType] = useState<any>()
const [showDataSource, setShowDataSource] = useState([
{ id: 1, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName1' })},
{ id: 2, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName2' })},
{ id: 3, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName3' })},
])
// 售后唤起弹窗
const handleSaleAfter = ({ orderId, orderType }) => {
setSaleVisible(true)
setRecordId(orderId)
setOrderType(orderType)
if(orderType === ORDER_TYPE_POINTS) {
setShowDataSource(() => [
{ id: 1, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName1' }) },
])
} else {
setShowDataSource(() => [
{ id: 1, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName1' }) },
{ id: 2, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName2' }) },
{ id: 3, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName3' }) }
])
}
}
const handleOk = () => {
if(checkedId) {
switch(checkedId) {
case 1:
history.push(`/memberCenter/afterService/exchangeApplication/exchangePrSubmit/add?orderId=${recordId}&orderType=${orderType}`)
break;
case 2:
history.push(`/memberCenter/afterService/returnApplication/returnPrSubmit/add?orderId=${recordId}&orderType=${orderType}`)
break;
case 3:
history.push(`/memberCenter/afterService/repairApplication/repairPrSubmit/add?orderId=${recordId}&orderType=${orderType}`)
break;
}
} else {
message.error(intl.formatMessage({ id: 'purchaseOrder.error' }))
}
}
const secondColumns = () => {
if(columns) {
return columns.concat([
{
title: intl.formatMessage({id:'purchaseOrder.operation'}),
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => renderOptionButton(record)
}
])
}
}
/** 参照后台数据生成 */
const renderOptionButton = (record: any) => {
const buttonGroup = {
[intl.formatMessage({id: 'purchaseOrder.operation2'})]: record.showAfterSales,
[intl.formatMessage({id: 'purchaseOrder.operation5'})]: record.showInvite,
}
const operationHandler = {
[intl.formatMessage({id: 'purchaseOrder.operation2'})]: () => handleSaleAfter(record),
[intl.formatMessage({id: 'purchaseOrder.operation5'})]: () => {},
}
return (
<TableOperation
buttonTextFieldMap={buttonGroup}
operationHandler={operationHandler}
/>
)
}
return <PageHeaderWrapper>
<Card>
<StandardTable
fetchTableData={params => fetchTableData(params)}
columns={columns}
columns={secondColumns()}
rowKey={'orderNo'}
formilyLayouts={{
justify: 'space-between'
......@@ -54,6 +138,14 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
}}
/>
</Card>
<SaleAfter
visible={saleVisible}
showDataSource={showDataSource}
currentSelectedKey={checkedId}
onOk={handleOk}
onCancel={()=>setSaleVisible(false)}
onClickItem={(id) => setCheckedId(id)}
/>
</PageHeaderWrapper>
}
......
src/pages/transaction/purchaseOrder/readyDelevedOrder/model/useSelfTable.tsx
View file @ f7d588f6
......@@ -71,22 +71,22 @@ export const useSelfTable = () => {
key: 'innerStatus',
render: (text, record) => <StatusColors status={text} type='saleInside' text={record['innerStatusName']} />,
},
{
title: intl.formatMessage({ id: 'saleOrder.caozuo', defaultMessage: '操作' }),
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => <>
{
record.showInvite &&
<Button type='link' onClick={() => handleConfirm(record)}>{intl.formatMessage({ id: 'saleOrder.haoyoupintuan', defaultMessage: '邀请好友拼团' })}</Button>
}
{
record.showAfterSales &&
<Button type='link' onClick={() => handleConfirm(record)}>{intl.formatMessage({ id: 'saleOrder.shouhou', defaultMessage: '售后' })}</Button>
}
</>
}
// {
// title: intl.formatMessage({ id: 'saleOrder.caozuo', defaultMessage: '操作' }),
// align: 'center',
// dataIndex: 'ctl',
// key: 'ctl',
// render: (text, record) => <>
// {
// record.showInvite &&
// <Button type='link' onClick={() => handleConfirm(record)}>{intl.formatMessage({ id: 'saleOrder.haoyoupintuan', defaultMessage: '邀请好友拼团' })}</Button>
// }
// {
// record.showAfterSales &&
// <Button type='link' onClick={() => handleConfirm(record)}>{intl.formatMessage({ id: 'saleOrder.shouhou', defaultMessage: '售后' })}</Button>
// }
// </>
// }
]
const handleConfirm = async (record) => {
......
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