Commit 660a745c authored by LeeJiancong's avatar LeeJiancong
parents 8cfc1bbb bf7a40ed
......@@ -224,12 +224,21 @@ const TranactionRoute = {
name: 'readyAddOrder',
component: '@/pages/transaction/purchaseOrder/readyAddOrder'
},
// 新增或者修改订单
{
path: '/memberCenter/tranactionAbility/purchaseOrder/orderDetail',
name: 'orderDetail',
hideInMenu: true,
component: '@/pages/transaction/purchaseOrder/orderDetail'
},
// 订单查看
{
path: '/memberCenter/tranactionAbility/purchaseOrder/orderPreview',
name: 'orderPreview',
hideInMenu: true,
noMargin: true,
component: '@/pages/transaction/purchaseOrder/orderPreview'
},
// 一级审核
{
path: '/memberCenter/tranactionAbility/purchaseOrder/firstApprovedOrder',
......
......@@ -687,6 +687,14 @@ export enum SaleOrderInsideWorkState {
FILLING_ORDER,
}
// 支付外部状态
export enum PayOutWorkState {
READY_PAY = 1,
READY_CONFIRM_RESULT,
CONFIRM_ACCOUNT,
CONFIRM_NOT_ACCOUNT
}
// 采购订单外部显示文案
export const PurchaseOrderOutWorkStateTexts = {
"-1": "取消订单",
......@@ -745,3 +753,10 @@ export const SaleOrderInsideWorkStateTexts = {
21: '确认回单',
22: '订单归档',
}
export const PayOutWorkStateTexts = {
1: '待支付',
2: '待确认支付结果',
3: '确认到账',
4: '确认未到账'
}
......@@ -147,6 +147,7 @@ export default {
'menu.tranactionAbility.purchaseOrder.purchaseOrderSearch': '订单查询',
'menu.tranactionAbility.purchaseOrder.readyAddOrder': '待新增订单',
'menu.tranactionAbility.purchaseOrder.orderDetail': '订单详情',
'menu.tranactionAbility.purchaseOrder.orderPreview': '查看订单',
'menu.tranactionAbility.purchaseOrder.firstApprovedOrder': '待审核订单(一级)',
'menu.tranactionAbility.purchaseOrder.secondApprovedOrder': '待审核订单(二级)',
'menu.tranactionAbility.purchaseOrder.readyConfirmContract': '待确认电子合同',
......
......@@ -128,7 +128,7 @@ const PositionSetting:React.FC<PositionSettingProps> = (props) => {
const fetchProductList = async (params) => {
const shopType = addSchemaAction.getFieldValue('shopType')
const res = await PublicApi.getProductCommodityCommonGetCommodityDetailList({
const res = await PublicApi.getProductCommodityCommonGetCommodityListBySeller({
...params,
shopType,
environment: 1,
......
......@@ -35,9 +35,9 @@ const OrderDetailHeader:React.FC<OrderDetailHeaderProps> = ({headerTitle, extraR
</Col>
}
<Col flex={1}>
<Col style={{flex: 1}}>
<Row justify='space-between' align='middle' style={{paddingTop: 14}}>
<Col flex={1}>
<Col style={{flex: 1}}>
<div className={style.titleAvatorText}>{headerTitle.titleLabel}{headerTitle.titleValue}</div>
<Row>
{detailList.map(v => {
......@@ -53,27 +53,7 @@ const OrderDetailHeader:React.FC<OrderDetailHeaderProps> = ({headerTitle, extraR
</Row>
</Col>
</Row>
{/* <Row>
<Col flex={1} offset={3}>哈哈</Col>
{ extraRight && <Col>{extraRight}</Col> }
</Row> */}
</div>
// <div>
// <div>
// <Row align='middle'>
// <Col style={{marginRight: 24}}><ArrowLeftOutlined onClick={() => history.goBack()}/></Col>
// <Col style={{marginRight: 24}} className={selfStyle.titleAvator}>{MEMBER_ROLE_MAPS[formValue.roleType][0]}</Col>
// <div className={selfStyle.fontBold18}>{MEMBER_ROLE_MAPS[formValue.roleType]}</div>
// </Row>
// </div>
// <div>
// <Row style={{marginTop: 24, fontSize: 14}}>
// <Col span={10} offset={2}>会员类型:{MEMBER_TYPE_MAPS[formValue.memberType]}</Col>
// <Col>会员角色:{formValue.name}</Col>
// </Row>
// </div>
// </div>
)
}
......
import React from 'react'
import { Tag } from 'antd'
import { PurchaseOrderInsideWorkStateTexts, PurchaseOrderOutWorkStateTexts, PurchaseOrderInsideWorkState, PurchaseOrderOutWorkState, SaleOrderInsideWorkState, SaleOrderInsideWorkStateTexts } from '@/constants'
import { PurchaseOrderInsideWorkStateTexts, PurchaseOrderOutWorkStateTexts, PurchaseOrderInsideWorkState, PurchaseOrderOutWorkState, SaleOrderInsideWorkState, SaleOrderInsideWorkStateTexts, PayOutWorkStateTexts } from '@/constants'
export interface IStatusColor {
[key: string]: {
......@@ -12,7 +12,7 @@ export interface IStatusColor {
// 用于标签状态控制
export interface StatusColorsProps {
status: number,
type: 'out' | 'inside' | 'saleInside'
type: 'out' | 'inside' | 'saleInside' | 'payOut'
}
export enum ORDER_EXAMINE_ENUM {
......@@ -90,7 +90,8 @@ const matchStatusColor = (status: number): string => {
const typeMaps = {
'out': PurchaseOrderOutWorkStateTexts,
'inside': PurchaseOrderInsideWorkStateTexts,
'saleInside': SaleOrderInsideWorkStateTexts
'saleInside': SaleOrderInsideWorkStateTexts,
'payOut': PayOutWorkStateTexts
}
// 订单内部状态显示
......
import React from 'react'
import { Result } from 'antd'
import styles from '../index.less'
import { AlipaySquareFilled } from '@ant-design/icons';
const Alipay = () => {
return(
......@@ -8,10 +9,21 @@ const Alipay = () => {
<Result
title="请使用法人手机号注册的支付宝账号登录支付"
extra={[
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>,
<div className={styles.info_wran}>扫描下面的二维码,然后按照支付宝APP的</div>,
<div className={styles.alipay_qrcode} />,
<div><AlipayCircleOutlined />支付宝扫一扫</div>
<div key='key'>
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
<div className={styles.info_wran}>扫描下面的二维码,然后按照支付宝APP的</div>
<div className={styles.alipay_qrcode} />
<div className={styles.alipay_wran}>
<AlipaySquareFilled
style={{
fontSize: '24px',
color: '#3f7ed2',
marginRight: '8px'
}}
/>
支付宝扫一扫
</div>
</div>
]}
/>
</div>
......
import React from 'react'
import { Button, Row, Col } from 'antd'
import { Button, Row, Col, Form, Input, Select } from 'antd'
import styles from '../index.less'
import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons';
const Corporate = () => {
return(
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{color: '#C0C4CC'}} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
</Row>
const { Option } = Select;
const [form] = Form.useForm();
// 测试表当提交效果
const onSubmit = async () => {
const value = await form.validateFields();
console.log(value)
}
return (
<>
{/**认证方式*/}
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
</Row>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
</div>
</div>
</div>
{/**经办人认证*/}
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称:</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码:</div>
<div className={styles.item_control}>4324324325425435</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
<div className={styles.info_item}>
<div className={styles.info_item_title}>经办人信息核验</div>
<div className={styles.info_item_con}>
<Form form={form}>
<Form.Item label='经办人' name='name' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
<Input />
</Form.Item>
<Form.Item label='身份证号码' name='num' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
<Input />
</Form.Item>
<Form.Item label='手机号码' colon={false} required={true}>
<Row gutter={24}>
<Col span={7}>
<Form.Item style={{width: '150px'}} name='code' rules={[{ required: true, message: '请选择区号' }]}>
<Select style={{ width: '100%' }}>
<Option value="Zhejiang">Zhejiang</Option>
<Option value="Jiangsu">Jiangsu</Option>
</Select>
</Form.Item>
</Col>
<Col span={17}>
<Form.Item style={{width: '398px'}} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
<Input />
</Form.Item>
</Col>
</Row>
</Form.Item>
</Form>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary' onClick={onSubmit}>下一步</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
......
......@@ -16,6 +16,17 @@
padding-bottom: 8px;
}
.bank_btn {
width: 380px;
margin: auto !important;
text-align: left;
button {
&:first-child {
margin-right: 24px;
}
}
}
.alipay_qrcode {
width: 240px;
height: 240px;
......@@ -27,6 +38,61 @@
box-sizing: border-box;
}
.alipay_wran {
display: flex;
align-items: center;
justify-content: center;
}
.bank_info_le {
width: 420px;
margin: 24px auto 0px !important;
padding: 12px 24px 0px;
}
.info_phone_number {
width: 340px;
padding: 12px 24px;
margin: 24px auto !important;
background-color: #FAFBFC;
& > div {
text-align: left;
&:first-child {
color: #909399;
font-size: 12px;
padding: 12px 0px 6px;
}
&:last-child {
color: '#303133';
font-size: 32px;
font-weight: 500;
}
}
}
.bank_info {
width: 420px;
margin: 24px auto !important;
background-color: #FAFBFC;
padding: 12px 24px;
.bank_info_item {
display: flex;
padding: 12px 0px;
.bank_info_label {
width: 140px;
color: #909399;
text-align: left;
}
.bank_info_control {
width: 232px;
text-align: left;
}
}
}
.info_item {
.info_item_title {
position: relative;
......@@ -65,8 +131,23 @@
color: #303133;
button {
&:last-child {
margin-left: 24px;
&:first-child {
margin-right: 24px;
}
}
}
}
:global {
.ant-form-item {
width: 748px;
.ant-form-item-label {
width: 176px;
text-align: left;
& > label {
color: #909399;
}
}
}
......
import React from 'react'
import { Result, Button, Form, Input } from 'antd'
import styles from '../index.less'
const PublicAccount = () => {
return (
<>
<div className={styles.info_wrap}>
{/** 对公账户确认*/}
<Result
title="请确认您公司的对公银行账号与开户银行"
extra={[
<div key='key'>
<div className={styles.info_wran}>点击下一步后,系统将向您的对公账号转入一笔金额为随机的款项,</div>
<div className={styles.info_wran}>后续您需要填写这笔款项的具体金额,以便完成企业认证。</div>
<div className={styles.bank_info}>
<div className={styles.bank_info_item}>
<div className={styles.bank_info_label}>账户名称:</div>
<div className={styles.bank_info_control}>温州市隆昌皮具有限公司</div>
</div>
<div className={styles.bank_info_item}>
<div className={styles.bank_info_label}>银行账号:</div>
<div className={styles.bank_info_control}>622203 43324 42343</div>
</div>
<div className={styles.bank_info_item}>
<div className={styles.bank_info_label}>开户行:</div>
<div className={styles.bank_info_control}>中国建设银行广州市分行营业部</div>
</div>
</div>
<div className={styles.bank_btn}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 对公账户打款*/}
<Result
title="请输入您公司的对公银行账号收到的转账金额,以便完成企业认证"
extra={[
<div key='key'>
<div className={styles.info_wran}>受银行结算时间的影响,到账时间为5分钟-72小时不等,请耐心等候</div>
<div className={styles.info_wran}>如果打款未到账,可在4小时后&nbsp;<span style={{ color: '#00B37A' }}>重新申请打款</span></div>
<div className={styles.bank_info_le} style={{ backgroundColor: '#FFF', marginBottom: '0px' }}>
<Form>
<Form.Item colon={false} label='转账金额' name="PRICE" rules={[{ required: true, message: '请输入转账金额' }]}>
<Input placeholder='请输入您收到的转账金额' />
</Form.Item>
</Form>
</div>
<div className={styles.bank_btn} style={{ width: '230px' }}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 系统将向法人手机号码发送验证短信*/}
<Result
title="系统将向法人手机号码发送验证短信"
extra={[
<div key='key'>
<div className={styles.info_wran}>法人收到验证短信后,根据短信中的链接,在手机端完成委托书签署</div>
<div className={styles.info_phone_number}>
<div>法人手机号:</div>
<div>+86 186 7700 2345</div>
</div>
<div className={styles.bank_btn} style={{ textAlign: 'center' }}>
<Button type='primary'>发送授权短信</Button>
<Button style={{ width: '116px' }}>返回</Button>
</div>
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 系统将向当前会员手机号码发送短信验证码*/}
<Result
title="系统将向当前会员手机号码发送短信验证码"
extra={[
<div key='key'>
<div className={styles.info_wran}>会员收到短信验证码后,填写验证码完成认证</div>
<div className={styles.info_phone_number}>
<div>法人手机号:</div>
<div>+86 186 7700 2345</div>
</div>
<Form>
<Form.Item noStyle>
<Input placeholder='请输入您收到的转账金额' />
</Form.Item>
</Form>
<div className={styles.bank_btn} style={{ textAlign: 'center' }}>
<Button type='primary'>开始认证</Button>
<Button style={{ width: '116px' }}>上一步</Button>
</div>
</div>
]}
/>
</div>
</>
)
}
export default PublicAccount
......@@ -4,8 +4,9 @@ import ReutrnEle from '@/components/ReturnEle';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StepComponents from '../components/steps'
import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
import Corporate from '../components/Corporate'
import Alipay from '../components/Alipay'
import Corporate from '../components/corporate'
import Alipay from '../components/alipay'
import PublicAccount from '../components/publicAccount'
const EnterpriseCertified = () => {
return (
......@@ -16,7 +17,8 @@ const EnterpriseCertified = () => {
<StepComponents />
<EnterpriseInfoCheck />
<Corporate />
<Alipay />
{/**<Alipay />*/}
<PublicAccount />
</PageHeaderWrapper>
)
}
......
import React from 'react'
import { Tag } from 'antd'
import { PurchaseOrderInsideWorkStateTexts, PurchaseOrderOutWorkStateTexts, PurchaseOrderInsideWorkState, PurchaseOrderOutWorkState } from '@/constants'
import { PurchaseOrderInsideWorkStateTexts, PurchaseOrderOutWorkStateTexts, PurchaseOrderInsideWorkState, PurchaseOrderOutWorkState, SaleOrderInsideWorkState, SaleOrderInsideWorkStateTexts } from '@/constants'
export interface IStatusColor {
[key: string]: {
......@@ -12,7 +12,7 @@ export interface IStatusColor {
// 用于标签状态控制
export interface StatusColorsProps {
status: number,
type: 'out' | 'inside'
type: 'out' | 'inside' | 'saleInside'
}
export enum ORDER_EXAMINE_ENUM {
......@@ -87,11 +87,16 @@ const matchStatusColor = (status: number): string => {
// 默认返回错误的状态颜色
return maps[status] || StatusColorsMaps.error
}
const typeMaps = {
'out': PurchaseOrderOutWorkStateTexts,
'inside': PurchaseOrderInsideWorkStateTexts,
'saleInside': SaleOrderInsideWorkStateTexts
}
// 订单内部状态显示
const StatusColors:React.FC<StatusColorsProps> = (props) => {
const { status, type } = props
const statusText = type === 'inside' ? PurchaseOrderInsideWorkStateTexts : PurchaseOrderOutWorkStateTexts
const statusText = typeMaps[type]
const statusShowColor = matchStatusColor(status)
return (<Tag color={statusShowColor}>{statusText[status]}</Tag>)
}
......
......@@ -13,7 +13,7 @@ export const baseOrderListColumns: any[] = [
key: 'orderNo',
render: (text, record) => {
// 查看订单, 需根据状态显示不同schema
return <EyePreview url={`/memberCenter/tranactionAbility/purchaseOrder/orderDetail?page_type=-1&id=${record.id}&preview=1`}>
return <EyePreview url={`/memberCenter/tranactionAbility/purchaseOrder/orderPreview?page_type=-1&id=${record.id}&preview=1`}>
{text}
</EyePreview>
}
......
......@@ -5,6 +5,7 @@ import { history } from 'umi'
import { PublicApi } from '@/services/api'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import { PurchaseOrderInsideWorkState } from '@/constants'
import { PURCHASE_ORDER_STATUS } from '../../orderPreview/constant'
// 业务hooks, 待新增订单
export const useSelfTable = () => {
......@@ -13,7 +14,7 @@ export const useSelfTable = () => {
const handleSubmit = async (record) => {
if (record.interiorState === PurchaseOrderInsideWorkState.ONE_LEVEL_AUDIT_ORDER) {
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderDetail?id=${record.id}&preview=0&page_type=1`)
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderPreview?id=${record.id}&preview=0&page_type=${PURCHASE_ORDER_STATUS.ONE_LEVEL_APPROVED_ORDER}`)
}
// await PublicApi.postOrderQuotationBeReviewed({id})
// ref.current.reload()
......
......@@ -3,7 +3,7 @@ import { PublicApi } from '@/services/api'
export const fetchOrderApi = {
// 弹窗获取商品列表
async getProductList(params) {
const { data } = await PublicApi.getProductCommodityCommonGetCommodityDetailList(params)
const { data } = await PublicApi.getProductCommodityCommonGetCommodityListByBuyer(params)
return data
},
......
......@@ -142,6 +142,7 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
v.price = 1
v.isMemberPrice = Number(v.isMemberPrice)
v.memberPrice = parseInt(v.memberPrice)
v.productId = v.id
return v
}),
needTheInvoice: Number(value.needTheInvoice),
......
import React from 'react'
import { Modal } from 'antd'
import NiceForm from '@/components/NiceForm'
import { createFormActions } from '@formily/antd'
export interface OrderElectronModalProps {}
const schemaActions = createFormActions()
//@todo 尚未完成
const OrderElectronModal:React.FC<OrderElectronModalProps> = (props) => {
return (
<Modal>
<NiceForm
actions={schemaActions}
schema={{
type: 'object',
properties: {
NO_SUBMIT: {
type: 'object',
"x-component": "mega-layout",
"x-component-props": {
labelAlign: 'top'
},
properties: {
}
}
}
}}
/>
</Modal>
)
}
OrderElectronModal.defaultProps = {}
export default OrderElectronModal
\ No newline at end of file
.card-list {
font-size: 14px;
line-height: 20px;
margin-top: 24px;
}
.card-list_title {
font-size: 14px;
color: #909399;
}
.fullHeight {
height: 100%;
}
\ No newline at end of file
import React, { useContext, useEffect, useState, useMemo } from 'react'
import { Row, Col, Tag } from 'antd'
import MellowCard from '@/components/MellowCard'
import { OrderDetailContext } from '../../context'
import { formatTimeString } from '@/utils'
import { DELIVERY_TYPE } from '@/constants'
import style from './index.less'
import { PublicApi } from '@/services/api'
export interface OrderMergeInfoProps {}
const payInfo = [
{ title: '交付日期', name: 'deliveryTime', render: (text) => formatTimeString(text) },
{ title: '交付地址', name: 'deliveryAddresId', render: (_, record) =>
<div>
<Row>
<Col>{record.receiverName}</Col>
<Col> / </Col>
<Col>{record.phone}</Col>
{record.isDefault && <Col style={{marginLeft: 6}}><Tag color='default'>默认</Tag></Col>}
</Row>
<div style={{color: '#6B778C'}}>{record.fullAddress}</div>
</div>
},
{ title: '提货方式', name: 'deliveryType', render: (text) => DELIVERY_TYPE[text] },
{ title: '自提地址', name: 'pickUpAddress' },
{ title: '运费', name: 'freight' }
]
const otherInfo = [
{ title: '包装要求', name: 'pageRequire' },
{ title: '其他要求', name: 'restsRequire' },
]
const electronInfo = [
{ title: '电子合同', name: 'none' },
]
const RenderCard = ({infoList, dataSource}) => infoList.map(v => dataSource[v.name] ? <Row key={v.name} className={style['card-list']}>
<Col span={6} className={style['card-list_title']}>{v.title}</Col>
<Col flex={1}>{v.render ? v.render(dataSource[v.name], dataSource) : dataSource[v.name]}</Col>
</Row> : null)
const OrderMergeInfo:React.FC<OrderMergeInfoProps> = (props) => {
const orderDetailCtx = useContext(OrderDetailContext)
const address = useMemo(async () => {
const { data } = await PublicApi.getLogisticsSelectListReceiverAddress()
return data
}, [])
const { data, ctl } = orderDetailCtx
return (
<Row style={{marginTop: 24}}>
<Col span={12}>
<MellowCard title='交易信息' blockClassName={style.fullHeight} className={style.fullHeight}>
<RenderCard infoList={payInfo} dataSource={data}/>
</MellowCard>
</Col>
<Col span={6} push={1}>
<MellowCard title='其他信息' blockClassName={style.fullHeight} className={style.fullHeight}>
<RenderCard infoList={otherInfo} dataSource={data}/>
</MellowCard>
</Col>
<Col span={4} push={2}>
<MellowCard title='电子合同' blockClassName={style.fullHeight} className={style.fullHeight}>
<RenderCard infoList={electronInfo} dataSource={data}/>
</MellowCard>
</Col>
</Row>
)
}
OrderMergeInfo.defaultProps = {}
export default OrderMergeInfo
\ No newline at end of file
.payRadio {
min-width: 130px;
padding: 4px 6px;
background: #fff;
text-align: center;
font-size: 14px;
color: #42526E;
border:1px solid rgba(235,236,240,1);
cursor: pointer;
margin-right: 12px;
margin-bottom: 12px;
&:last-child {
margin-right: 0;
}
&.active {
border-color: #00B382;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border: 6px solid transparent;
border-right: 6px solid #00B382;
border-bottom: 6px solid #00B382;
}
}
}
.radioBox {
display: flex;
flex-wrap: wrap;
}
\ No newline at end of file
import React, { useState, useEffect, useContext, useRef } from 'react'
import { Modal, Steps, Row, Col, Radio, message, Upload, Button } from 'antd'
import style from './index.less'
import { OrderDetailContext } from '../../context'
import cx from 'classnames'
import { UploadOutlined } from '@ant-design/icons'
import { UPLOAD_TYPE } from '@/constants'
import { usePageStatus } from '@/hooks/usePageStatus'
import { PublicApi } from '@/services/api'
import { history } from 'umi'
export interface OrderPayModalProps {
currentRef: any,
confirm?()
}
const HeaderTitle = ({current}) => {
return <div style={{padding: '0 40px'}}>
<Steps size='small' current={current}>
<Steps.Step title='选择支付方式'></Steps.Step>
<Steps.Step title='进行支付'></Steps.Step>
</Steps>
</div>
}
const transformPayData = (originData, data): any => {
const result = originData.reduce((prev, next) => {
const findItem = data.find(v => v.id === next.channel) || null
if (!findItem) {
return prev
}
if (prev[next.payWay]) {
prev[next.payWay].push({ label: next.way, value: next.id })
} else {
prev[next.payWay] = [
{ label: findItem.way, value: next.id, channel: next.channel }
]
}
return prev
}, {})
return result
}
const payTextList = ["",
'线上支付',
'线下支付',
'授信支付',
'货到付款'
]
const OrderPayModal:React.FC<OrderPayModalProps> = (props) => {
const formRef = useRef<any>({})
const { id } = usePageStatus()
const { data, payList } = useContext(OrderDetailContext)
const transformPayList: any = transformPayData(data.paymentInformationResponses, payList)
const [visible, setVisible] = useState(false)
const [checked, setChecked] = useState<any>({})
const [current, setCurrent] = useState(0)
const { currentRef, confirm } = props
useEffect(() => {
if (currentRef) {
currentRef.current = {
visible,
setVisible
}
}
}, [])
useEffect(() => {
if (!visible) {
setCurrent(0)
setChecked(null)
}
}, [visible])
const handleConfirm = async () => {
if (current === 0) {
if (checked.id) {
if (checked.channel === 5) {
setCurrent(1)
} else {
message.error('暂只支持线下支付方式')
}
} else {
message.error('请先选择支付方式')
}
return ;
}
// 开始提交数据
const payOrderUrls = formRef.current.urlList
const paymentInformationId = checked.id
if (!payOrderUrls || payOrderUrls.length === 0) {
message.error('请先上传凭证')
return ;
}
if (!paymentInformationId) {
message.error('未选择支付方式')
return ;
}
const params = {
id: Number(id),
payOrderUrls,
paymentInformationId
}
const { code } = await PublicApi.postOrderPendingOrderPay(params)
if (code === 1000) {
history.goBack()
}
confirm && confirm()
}
const handleCancel = () => {
if (current === 0) {
setVisible(false)
} else {
setCurrent(0)
}
}
const handleUploadChange = (e) => {
const { fileList } = e
const urlList = fileList.map(v => v.response && v.response.code === 1000 ? v.response.data : '')
formRef.current.urlList = urlList
}
return (
<Modal
width={704}
title={<HeaderTitle current={current}/>}
visible={visible}
onOk={handleConfirm}
onCancel={handleCancel}
cancelText={current === 0 ? '取消' : '上一步'}
okText={current === 0 ? '下一步' : '确认'}
>
{ current === 0 &&
transformPayList && Object.entries(transformPayList).map(([key, value]) => <Row key={key} style={{marginBottom: 24}}>
<Col span={6} style={{color: '#6B778C', fontSize: 14}}>{payTextList[key]}</Col>
<Col style={{flex: 1}}>
<div className={style.radioBox}>
{
(value as any[]).map(v =>
<div key={v.value} className={cx(style.payRadio, (checked && v.value === checked.id) ? style.active : '')} onClick={() => setChecked({id: v.value, channel: v.channel})}>{v.label}</div>
)
}
</div>
</Col>
</Row>)
}
{
current === 1 &&
<div>
<p>上传支付凭证</p>
<Upload
name='file'
action='/api/file/file/upload'
headers={{
authorization: 'authorization-text'
}}
data={{
fileType: UPLOAD_TYPE
}}
onChange={handleUploadChange}
showUploadList
>
<Button icon={<UploadOutlined />} type='dashed'>上传凭证</Button>
</Upload>
</div>
}
</Modal>
)
}
OrderPayModal.defaultProps = {}
export default OrderPayModal
\ No newline at end of file
.fontGray {
font-size: 12px;
color: #909399;
margin-bottom: 10px;
}
.bignumber {
font-size: 24px;
color: #303133;
margin-bottom: 10px;
}
.smallnumber {
font-size: 16px;
color: #303133;
line-height: 24px;
}
\ No newline at end of file
import React, { useContext, useEffect, useState } from 'react'
import style from './index.less'
import { Tabs, Row, Col } from 'antd'
import { OrderDetailContext } from '../../context'
import MellowCard from '@/components/MellowCard'
import StatusColors from '../../../components/StatusColors'
import { PublicApi } from '@/services/api'
export interface OrderPayTabsProps {}
const TabPane = Tabs.TabPane
const TabHeader = ({dataSource}) => {
return <Row justify='space-between' style={{minWidth: 216}}>
<Col>
<div className={style.fontGray}>支付比例</div>
<div className={style.bignumber}>{dataSource.payRatio}%</div>
<div className={style.smallnumber}>{dataSource.payPrice || 0}</div>
</Col>
<Col>
<StatusColors status={5} type='out'/>
</Col>
</Row>
}
// 支付信息
const payTextList = ["",
'线上支付',
'线下支付',
'授信支付',
'货到付款'
]
const OrderPayTabs:React.FC<OrderPayTabsProps> = (props) => {
const { data, payList } = useContext(OrderDetailContext)
return (
<MellowCard style={{marginTop: 24}} bordered={false}>
<Tabs defaultActiveKey='1'>
{ data.paymentInformationResponses && data.paymentInformationResponses.map(v => <TabPane key={v.id} tab={<TabHeader dataSource={v}/>}>
<Row>
<Col className={style.fontGray} span={4}>支付环节: </Col>
<Col>{v.payNode}</Col>
</Row>
<Row>
<Col className={style.fontGray} span={4}>支付方式: </Col>
<Col>{payTextList[v.payWay]}</Col>
</Row>
<Row>
<Col className={style.fontGray} span={4}>支付渠道: </Col>
<Col>{payList.find(j => j.id === v.channel)?.way}</Col>
</Row>
</TabPane>) }
</Tabs>
</MellowCard>
)
}
OrderPayTabs.defaultProps = {}
export default OrderPayTabs
\ No newline at end of file
.cancel {
color: #909399;
font-size: 12px;
cursor: pointer;
margin: 0 4px;
}
.confirm {
color: #00B37A;
font-size: 12px;
cursor: pointer;
}
\ No newline at end of file
import React, { useContext, useState, useRef, useEffect } from 'react'
import { StandardTable } from 'god'
import { Card, Table, Form, Input, Row, Col, Button, Modal } from 'antd'
import { OrderDetailContext } from '../../context'
import { EditOutlined, SettingOutlined } from '@ant-design/icons'
import style from './index.less'
import { PublicApi } from '@/services/api'
import styled from 'styled-components'
import ModalForm from '@/components/ModalForm'
import { createFormActions } from '@formily/antd'
import MellowCard from '@/components/MellowCard'
export interface OrderProductTableProps {
editable: boolean
}
// 订单商品cell切换
const EditableContext = React.createContext<any>({});
interface Item {
key: string;
name: string;
age: string;
address: string;
}
interface EditableRowProps {
index: number;
}
const RowStyle = styled(props => <Row style={{marginTop: 12}} justify='end' {...props}>
{props.children}
</Row>)`
.ant-col {
text-align: center
}
.ant-col div {
margin-bottom: 12px;
}
`
const modalPriceActions = createFormActions()
// 总计金额联动框
export const MoneyTotalBox = ({ dataSource, preview }) => {
const { orderProductRequests = [], receiverAddressId } = dataSource || {}
const sum = orderProductRequests.reduce((prev, next) => prev + parseInt((next.price || 0)), 0)
// const modelRef = useRef<any>({})
const [freePrice, setFreePrice] = useState<number>(0)
// const handleSetting = () => {
// modelRef.current.setVisible(true)
// }
// const handleConfirm = () => {
// setFreePrice(parseInt(modalPriceActions.getFieldValue('freePrice') || 0))
// modelRef.current.setVisible(false)
// }
useEffect(() => {
// 存在商品 并且有选择收货地址,则开始计算运费
if (orderProductRequests && orderProductRequests.length > 0 && receiverAddressId) {
// 筛选配送方式为物流的商品并且使用了运费模板
const logsiticsDataMaps = orderProductRequests.filter(v => v.logistics && v.logistics.useTemplate && v.logistics.deliveryType === 1)
if (logsiticsDataMaps.length > 0) {
PublicApi.postLogisticsFreightRemoteAddDetail({
orderProductList: logsiticsDataMaps.map(v => ({
templateId: v.templateId,
weight: v.weight
})),
receiverAddressId
}, {ttl: 10 * 1000, useCache: true, ctlType: 'none'}).then(res => {
if (res.code === 1000) {
setFreePrice(res.data)
}
})
}
}
}, [orderProductRequests])
return <RowStyle>
<Col span={2}>
<div>合计金额</div>
<div>{sum}</div>
</Col>
<Col span={2}>
{/* <div>运费 { !preview && <SettingOutlined style={{marginLeft: 8}} onClick={handleSetting}/> }</div> */}
<div>运费</div>
<div>{freePrice}</div>
</Col>
<Col span={2}>
<div>总计金额</div>
<div>{sum + freePrice}</div>
</Col>
{/* <ModalForm
modalTitle='设置运费'
currentRef={modelRef}
initialValues={freePrice}
schema={{
type: 'object',
properties: {
NO_SUBMIT_LAYOUT: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
labelAlign: 'top'
},
properties: {
freePrice: {
type: 'string',
title: '设置运费',
"x-props": {
addonBefore: '¥'
}
}
}
}
}
}}
actions={modalPriceActions}
confirm={handleConfirm}
/> */}
</RowStyle>
}
const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
const [form] = Form.useForm();
return (
<Form form={form} component={false}>
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
</Form>
);
};
interface EditableCellProps {
title: React.ReactNode;
editable: boolean;
children: React.ReactNode;
dataIndex: string;
record: Item;
handleSave: (record: Item) => void;
}
const EditableCell: React.FC<EditableCellProps> = ({
title,
editable,
children,
dataIndex,
record,
handleSave,
...restProps
}) => {
const [editing, setEditing] = useState(false);
const inputRef = useRef<any>({});
const form = useContext(EditableContext);
useEffect(() => {
if (editing) {
inputRef.current.focus();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
form.setFieldsValue({ [dataIndex]: record[dataIndex] });
};
const save = async e => {
try {
const values = await form.validateFields();
values.price = parseInt(values.price)
toggleEdit();
handleSave({ ...record, ...values });
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
const cancel = () => {
console.log('cancel')
setEditing(false)
}
let childNode = children;
if (editable) {
childNode = editing ? (
<Form.Item
style={{ margin: 0, width: 140 }}
name={dataIndex}
rules={[
{
required: true,
message: `单价是必填的`,
},
]}
>
<Input type='number' ref={inputRef} onBlur={save} onPressEnter={save}/>
</Form.Item>
) : (
<div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
{children}
<EditOutlined/>
</div>
);
}
return <td {...restProps}>{childNode}</td>;
};
const OrderProductTable:React.FC<OrderProductTableProps> = ({editable}) => {
const { ctl, data, preview } = useContext(OrderDetailContext)
const { orderProductRequests = [] } = data || {}
const productComponents = {
body: {
row: EditableRow,
cell: EditableCell
}
}
const asyncGetMemberPrice = async (asyncData: any[]) => {
return await Promise.all(asyncData.filter(v => v.memberPrice === undefined).map(async v => {
const {code, data} = await PublicApi.getMemberManageUpperCreditParamGet({
parentMemberId: v.memberId,
parentMemberRoleId: v.memberRoleId
}, {ttl: 60 * 1000, useCache: true})
return code === 1000 ? { value: (data.parameter * 100) + '%', id: v.id } : { value: '', id: 0 }
}
))
}
useEffect(() => {
// 过滤 会员折扣不存在的列表
const hasPriceList = orderProductRequests.filter(v => !v.memberPrice)
if (hasPriceList.length > 0) {
asyncGetMemberPrice(hasPriceList).then((asyncData) => {
const newData = orderProductRequests.map((v, i) => {
if (!v.memberPrice) {
v.memberPrice = asyncData.find(j => j.id === v.id)?.value || ''
}
return v
})
ctl.setData({
...data,
orderProductRequests: newData
})
})
}
}, [orderProductRequests])
const handleSave = row => {
const newData = [...orderProductRequests];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
ctl.setData({
...data,
orderProductRequests: newData
})
};
const productInfoColumns: any[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '商品名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '品类',
dataIndex: 'customerCategoryName',
align: 'center',
key: 'customerCategoryName',
},
{
title: '品牌',
dataIndex: 'brandName',
align: 'center',
key: 'brandName',
},
{
title: '单位',
dataIndex: 'unit',
align: 'center',
key: 'unit',
},
{
title: '单价(元)',
dataIndex: 'price',
align: 'left',
key: 'price'
},
{
title: '会员折扣',
dataIndex: 'memberPrice',
align: 'center',
key: 'memberPrice',
render: (text, record) => record.isMemberPrice ? (text + '%') : null
},
{
title: '采购数量',
dataIndex: 'purchaseCount',
align: 'center',
key: 'purchaseCount',
editable: true
},
{
title: '含税',
dataIndex: 'none',
align: 'center',
key: 'none',
},
{
title: '金额',
dataIndex: 'price',
align: 'center',
key: 'price',
},
// 接口调用
{
title: '配送方式',
dataIndex: 'logistics',
align: 'center',
key: 'logistics',
render: text => (text && text.render) || ''
}
]
const columns = !editable ? productInfoColumns : productInfoColumns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave: handleSave,
}),
};
});
return (
<MellowCard title='订单商品' style={{marginTop: 24}} bordered={false}>
<Table
columns={productInfoColumns}
dataSource={orderProductRequests}
components={productComponents}
rowKey='id'
pagination={false}
/>
<MoneyTotalBox dataSource={data} preview={preview}/>
</MellowCard>
)
}
OrderProductTable.defaultProps = {}
export default OrderProductTable
\ No newline at end of file
import React, { useContext } from 'react'
import { Tabs, Table } from 'antd'
import StatusColors from '../../../components/StatusColors'
import { formatTimeString } from '@/utils'
import { OrderDetailContext } from '../../context'
import MellowCard from '@/components/MellowCard'
export interface OrderTransformRecordProps {}
const outOrderCols: any[] = [
{
title: '流转顺序号',
dataIndex: 'no',
align: 'center',
key: 'no',
render: (_, __, index: number) => index + 1
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '状态',
dataIndex: 'state',
align: 'center',
key: 'state',
render: text => <StatusColors status={text} type='out'/>
// @todo 需传递工作流状态重新render
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'operationTime',
align: 'center',
key: 'operationTime',
render: time => formatTimeString(time)
},
{
title: '审核意见',
dataIndex: 'auditOpinion',
align: 'center',
key: 'auditOpinion',
},
]
const sideOrderCols: any[] = [
{
title: '流转记录',
dataIndex: 'no',
align: 'center',
key: 'no',
render: (_, __, index: number) => index + 1
},
{
title: '操作人',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '部门',
dataIndex: 'department',
align: 'center',
key: 'department',
},
{
title: '职位',
dataIndex: 'position',
align: 'center',
key: 'position',
},
{
title: '状态',
dataIndex: 'state',
align: 'center',
key: 'state',
render: text => <StatusColors status={text} type='inside'/>
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'operationTime',
align: 'center',
key: 'operationTime',
},
{
title: '审核意见',
dataIndex: 'auditOpinion',
align: 'center',
key: 'auditOpinion',
},
]
// 订单流转记录
const OrderTransformRecord:React.FC<OrderTransformRecordProps> = (props) => {
const { data } = useContext(OrderDetailContext)
const { externalProcurementOrderLogResponses, interiorProcurementOrderLogResponses } = data
return (
<MellowCard style={{marginTop: 24}} bordered={false}>
<Tabs defaultActiveKey="1" animated={false}>
<Tabs.TabPane tab='外部订单流转记录' key="1">
<Table
columns={outOrderCols}
dataSource={externalProcurementOrderLogResponses}
pagination={false}
rowKey="id"
/>
</Tabs.TabPane>
<Tabs.TabPane tab='内部订单流转记录' key="2">
<Table
columns={outOrderCols}
dataSource={interiorProcurementOrderLogResponses}
pagination={false}
rowKey="id"
/>
</Tabs.TabPane>
</Tabs>
</MellowCard>
)
}
OrderTransformRecord.defaultProps = {}
export default OrderTransformRecord
\ No newline at end of file
import React from 'react'
import { formatTimeString } from '@/utils'
import { Row, Space, Popover } from 'antd'
import { DELIVERY_TYPE, OrderModalType, PurchaseOrderOutWorkStateTexts } from '@/constants'
import { EnvironmentOutlined } from '@ant-design/icons'
import { PublicApi } from '@/services/api'
/**
* 销售订单状态枚举
*/
export enum SALE_ORDER_STATUS {
PREVIEW_ORDER = -1,
READY_APPROVED_ORDER,
ONE_LEVEL_APPROVED_ORDER,
TWO_LEVEL_APPROVED_ORDER,
CONFIRM_ORDER,
CONFIRM_PAY_RESULT_ORDER,
ADD_SALE_ORDER,
ADD_LOG_ORDER,
CONFIRM_DELIVE_GOODS_ORDER,
CONFIRM_RETURN_ORDER,
RETURN_DOCUMENT_ORDER
}
// 采购订单枚举
export enum PURCHASE_ORDER_STATUS {
PREVIEW_ORDER = -1,
ONE_LEVEL_APPROVED_ORDER = 1,
TWO_LEVEL_APPROVED_ORDER,
READY_SUBMIT_ORDER,
READY_CONFIRM_ELECTRON_ORDER,
READY_PAY_ORDER,
READY_DELEVED_ORDER,
READY_RETURN_DOCUMENT
}
export const SALE_ORDER_STATUS_TITLE = {
"-1": '查看订单',
0: "待审核订单",
1: "审核订单(一级)",
2: "审核订单(二级)",
3: "确认订单",
4: "订单确认支付结果",
5: "新增销售发货单",
6: "新增物流单",
7: "订单发货确认",
8: "确认回单",
9: "订单归档",
}
// 简单控制价格区间的组件
// @todo 后续需要优化, 样式,目录文件等。
const PriceComp = (props) => {
const { priceSection = {} } = props
const priceTransKeys = Object.keys(priceSection)
// 出现0-0 表示没有单价区间范围
if (priceTransKeys.length === 1 && priceTransKeys[0] === '0-0') {
return <span style={{color: '#E63F3B'}}>{'¥' + priceSection[priceTransKeys[0]]}</span>
}
return <div>
{
priceTransKeys.map(v => <Row key={v} justify='space-between'>
<span style={{color: '#606266'}}>{v.replace('-', '~')}:</span>
<span style={{color: '#E63F3B', marginLeft: 40}}>{priceSection[v]}</span>
</Row>)
}
</div>
}
/***********控制订单模式联动其他字段的数组集合 *******/
export const orderCombination = {
// 需从外部页面传入参数生成的订单联动, 用于禁用下单模式的手动选择
queryPageOrderModal: [
OrderModalType.PURCHASE_ORDER,
OrderModalType.CHANNEL_DIRECT_PURCHASE_ORDER,
OrderModalType.CHANNEL_SPOT_PURCHASE_ORDER
],
// 是否显示报价单字段
showQuotationNoOrder: [
OrderModalType.INQUIRY_QUOTATION_ORDER,
OrderModalType.DEMAND_QUOTATION_ORDER,
OrderModalType.CONSOLIDATED_ORDER
],
// 是否显示报价单按钮
showQuotationNoOrderBtn: [
OrderModalType.INQUIRY_QUOTATION_ORDER,
OrderModalType.DEMAND_QUOTATION_ORDER,
OrderModalType.CONSOLIDATED_ORDER,
],
// 是否显示供应会员按钮
showSupplyMembersNameBtn: [
OrderModalType.HAND_ORDER,
OrderModalType.CHANNEL_DIRECT_MINING_ORDER,
OrderModalType.CHANNEL_SPOT_MANUAL_ORDER,
OrderModalType.CONSOLIDATED_ORDER
]
}
export const orderTypeLabel = ['',
'询价采购',
'需求采购',
'现货采购',
'集采',
'积分兑换',
'渠道直采',
'渠道现货',
'渠道积分兑换'
]
// 支付方式
export const payTypeLabel = [
{
label: '线上支付',
value: 1
},
{
label: '线下支付',
value: 2
},
{
label: '授信支付',
value: 3
},
{
label: '货到付款',
value: 4
},
]
export const memberColumns: any[] = [
{
title: '会员ID',
dataIndex: 'memberId',
align: 'center',
key: 'memberId',
},
{
title: '会员名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '公司类型',
dataIndex: 'memberTypeName',
align: 'center',
key: 'memberTypeName',
},
{
title: '公司角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '公司等级',
dataIndex: 'levelTag',
align: 'center',
key: 'levelTag',
},
]
export const inquiryColumns: any[] = [
{
title: '报价单号',
dataIndex: 'quotationNo',
align: 'center',
key: 'quotationNo',
},
{
title: '询价单号',
dataIndex: 'inquiryListNo',
align: 'center',
key: 'inquiryListNo',
},
{
title: '报价单摘要',
dataIndex: 'details',
align: 'center',
key: 'details',
},
{
title: '询价会员',
dataIndex: 'memberName',
align: 'center',
key: 'memberName',
},
{
title: '单据时间',
dataIndex: 'voucherTime',
align: 'center',
key: 'voucherTime',
render: _ => formatTimeString(_)
}
]
export const paymentInformationColumns: any[] = [
{
title: '支付次数',
dataIndex: 'payCount',
align: 'center',
key: 'payCount'
},
{
title: '支付环节',
dataIndex: 'payNode',
align: 'center',
key: 'payNode'
},
{
title: '外部状态',
dataIndex: 'externalState',
align: 'center',
key: 'externalState',
render: text => PurchaseOrderOutWorkStateTexts[text]
},
{
title: '支付比例',
dataIndex: 'payRatio',
key: 'payRatio',
editable: true,
forceEdit: true,
formItem: 'input',
formItemProps: {
addonAfter: '%'
},
width: 200,
render: text => text + '%'
},
{
title: '支付金额',
dataIndex: 'payPrice',
align: 'center',
key: 'payPrice'
},
{
title: '支付方式',
dataIndex: 'payWay',
key: 'payWay',
formItem: 'select',
editable: true,
forceEdit: true,
formItemProps: {
options: []
},
width: 200
},
{
title: '支付渠道',
dataIndex: 'channel',
key: 'channel',
formItem: 'select',
editable: true,
forceEdit: true,
width: 200
},
]
// 商品列表
export const productInfoColumns: any[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '商品名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '品类',
dataIndex: 'customerCategoryName',
align: 'center',
key: 'customerCategoryName',
},
{
title: '品牌',
dataIndex: 'brandName',
align: 'center',
key: 'brandName',
},
{
title: '单位',
dataIndex: 'unitName',
align: 'center',
key: 'unitName',
},
{
title: '单价(元)',
dataIndex: 'unitPrice',
align: 'left',
key: 'unitPrice',
render: text => <PriceComp priceSection={text}/>
},
{
title: '会员折扣',
dataIndex: 'memberPrice',
align: 'center',
key: 'memberPrice',
render: (text, record) => record.isMemberPrice ? text : null
},
{
title: '采购数量',
dataIndex: 'purchaseCount',
align: 'center',
key: 'purchaseCount',
formItem: 'input',
editable: true,
width: 140
},
{
title: '含税',
dataIndex: 'none',
align: 'center',
key: 'none',
},
{
title: '金额',
dataIndex: 'price',
align: 'center',
key: 'price',
},
// 接口调用
{
title: '配送方式',
dataIndex: 'logistics',
align: 'center',
key: 'logistics',
render: text => (text && text.render) || ''
},
{
title: '操作',
dataIndex: 'ctl',
align: 'center',
key: 'ctl',
},
]
export const mergeOrderColumns: any[] = [
{
title: '订单号',
dataIndex: 'orderNo',
align: 'center',
key: 'orderNo',
},
{
title: '订单摘要',
dataIndex: 'orderThe',
align: 'center',
key: 'orderThe',
},
{
title: '采购商名称',
dataIndex: 'supplyMembersName',
align: 'center',
key: 'supplyMembersName',
},
{
title: '下单时间',
dataIndex: 'createTime',
align: 'center',
key: 'createTime',
},
{
title: '活动时间',
dataIndex: 'none',
align: 'center',
key: 'none',
},
{
title: '活动名称',
dataIndex: 'none',
align: 'center',
key: 'none',
}
]
\ No newline at end of file
import { createContext } from 'react';
export const OrderDetailContext = createContext<any>({})
\ No newline at end of file
import React, { useState, useEffect, useContext, useRef } from 'react'
import OrderDetailHeader from '../../components/OrderDetailHeader'
import { Button, Row, Col } from 'antd'
import { Link, history } from 'umi'
import { orderTypeLabel, SALE_ORDER_STATUS, PURCHASE_ORDER_STATUS } from './constant'
import { formatTimeString } from '@/utils'
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
import { PublicApi } from '@/services/api'
import AuditProcess from '@/components/AuditProcess'
import { findLastIndexFlowState } from '../utils'
import OrderDetailWrapper from '../../components/OrderDetailWrapper'
import { GlobalConfig } from '@/global/config'
import OrderProductTable from './components/orderProductTable'
import { OrderDetailContext } from './context'
import OrderMergeInfo from './components/orderMergeInfo'
import OrderTransformRecord from './components/orderTransformRecord'
import OrderPayTabs from './components/orderPayTabs'
import StatusColors from '../components/StatusColors'
import ModalForm from '@/components/ModalForm'
import { createFormActions } from '@formily/antd'
import OrderPayModal from './components/orderPayModal'
export interface CommonOrderDetailProps {}
const approvedActions = createFormActions()
const btnApprovedTitles = [PURCHASE_ORDER_STATUS.ONE_LEVEL_APPROVED_ORDER, PURCHASE_ORDER_STATUS.TWO_LEVEL_APPROVED_ORDER, PURCHASE_ORDER_STATUS.READY_SUBMIT_ORDER]
const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
const [formData, setFormData] = useState<any>(null)
const [payList, setPaylist] = useState<any[]>([])
let { id, pageStatus, page_type = PURCHASE_ORDER_STATUS.PREVIEW_ORDER } = usePageStatus()
page_type = parseInt(page_type)
const approvedRef = useRef<any>({})
const payRef = useRef<any>({})
useEffect(() => {
if (id) {
PublicApi.getOrderPurchaseOrderDetails({id}).then(({data, code}) => {
if (code === 1000) {
setFormData(data)
}
})
PublicApi.getPayPayWayList().then(res => {
const { code, data } = res
if (code === 1000) {
setPaylist(data)
}
})
}
}, [])
const formContext = {
preview: pageStatus === PageStatus.PREVIEW,
data: formData,
payList,
ctl: {
setData: setFormData
}
}
const handleSubmit = async (values) => {
let result: any = {}
const caseData = typeof page_type === 'string' ? parseInt(page_type) : page_type
switch(caseData) {
case PURCHASE_ORDER_STATUS.ONE_LEVEL_APPROVED_ORDER: {
const params = {
id: Number(id),
...values
}
result = await PublicApi.postOrderProcurementOrderReviewed(params)
break;
}
case PURCHASE_ORDER_STATUS.TWO_LEVEL_APPROVED_ORDER: {
const params = {
id: Number(id),
...values
}
result = await PublicApi.postOrderProcurementOrderReviewedTwo(params)
break;
}
case PURCHASE_ORDER_STATUS.READY_SUBMIT_ORDER: {
// 提交订单时, 需直接写死参数
const params = {
id: Number(id),
state: -1
}
result = await PublicApi.postOrderProcurementOrderSubmit(params)
break;
}
case PURCHASE_ORDER_STATUS.READY_CONFIRM_ELECTRON_ORDER: {
const params = {
id: parseInt(id),
state: 1
}
result = await PublicApi.postOrderElectronicContractsAffirm(params)
break;
}
case PURCHASE_ORDER_STATUS.READY_PAY_ORDER: {
const params = {
id: parseInt(id),
state: 1
}
result = await PublicApi.postOrderConfirmedPaymentResultsOrder(params)
break;
}
}
if (result.code === 1000) {
approvedRef.current.setVisible(false)
history.goBack()
}
}
const handleStartApply = () => {
if (page_type === PURCHASE_ORDER_STATUS.ONE_LEVEL_APPROVED_ORDER ||
page_type === PURCHASE_ORDER_STATUS.TWO_LEVEL_APPROVED_ORDER
) {
approvedRef.current.setVisible(true)
}
// 提交订单状态时 无需用户选择
if (page_type === PURCHASE_ORDER_STATUS.READY_SUBMIT_ORDER) {
handleSubmit({})
}
if (page_type === PURCHASE_ORDER_STATUS.READY_PAY_ORDER) {
payRef.current.setVisible(true)
}
// 确认电子合同
if (page_type === PURCHASE_ORDER_STATUS.READY_CONFIRM_ELECTRON_ORDER) {
handleSubmit({})
}
}
const extraRight = formData && pageStatus !== PageStatus.PREVIEW && <div>
<Button type='primary' onClick={handleStartApply}>
{btnApprovedTitles.includes(page_type) ? '提交审核' : '提交'}
</Button>
{
page_type === PURCHASE_ORDER_STATUS.READY_PAY_ORDER &&
<div style={{textAlign: 'right'}}>
<p style={{marginTop: 12, fontSize: 12, color: '#6B778C'}}>本次需支付</p>
<p>{formData.sumPrice}</p>
</div>
}
</div>
const detailList = [
{ label: '对应报价单号', name: 'quotationNo', span: 8, render: text => <Link to={'/'}>{text}</Link> },
{ label: '订单摘要', name: 'orderThe', span: 8 },
{ label: '供应会员', name: 'supplyMembersName', span: 8, render: text => <Link to={'/'}>{text}</Link> },
{ label: '下单模式', name: 'orderModel', span: 8, render: text => GlobalConfig.web.orderMode[text].label },
{ label: '订单类型', name: 'type', span: 8, render: text => orderTypeLabel[text] },
{ label: '下单时间', name: 'createTime', span: 8, render: text => formatTimeString(text) },
{ label: '外部状态', name: 'externalState', span: 8, render: text => <StatusColors type='out' status={text}/> },
{ label: '内部状态', name: 'interiorState', span: 8, render: text => <StatusColors type='inside' status={text}/> },
]
const headerTiTle = formData ? {
picName: '单',
titleLabel: '订单号: ',
titleValue: formData.orderNo
} : null
const handleConfirmApproved = () => {
approvedActions.submit()
}
const editableProductTable = pageStatus !== PageStatus.PREVIEW
return formData ? (
<div>
<OrderDetailContext.Provider value={formContext}>
<OrderDetailHeader headerTitle={headerTiTle} detailList={detailList} detailData={formData} extraRight={extraRight}/>
<OrderDetailWrapper>
<div className='gray-wrap'>
{/* 工作流进度 */}
{ pageStatus !== PageStatus.ADD && formData && <AuditProcess
customTitleKey='operationalProcess'
customKey='state'
outerVerifyCurrent={findLastIndexFlowState(formData.externalWorkflowFlowRecordLogResponses)}
innerVerifyCurrent={findLastIndexFlowState(formData.interiorWorkflowFlowRecordLogResponses)}
outerVerifySteps={formData.externalWorkflowFlowRecordLogResponses}
innerVerifySteps={formData.interiorWorkflowFlowRecordLogResponses}
></AuditProcess> }
{/* 商品列表 */}
<OrderProductTable editable={editableProductTable}/>
{/* 支付信息 todo */}
<OrderPayTabs/>
{/* 杂项 */}
<OrderMergeInfo/>
{/* 订单流转记录 */}
<OrderTransformRecord/>
</div>
</OrderDetailWrapper>
{/* 提交时触发的弹窗集合 */}
<ModalForm
modalTitle='单据审核'
currentRef={approvedRef}
confirm={handleConfirmApproved}
actions={approvedActions}
schema={{
type: 'object',
properties: {
NO_SUBMIT: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
labelAlign: 'top',
},
properties: {
state: {
type: 'radio',
enum: [
{ label: '审核通过', value: 1 },
{ label: '审核不通过', value: 0 },
],
default: 1,
"x-linkages": [
{
type: 'value:visible',
target: 'cause',
condition: "{{$value === 0}}"
}
]
},
cause: {
type: 'textarea',
"x-component-props": {
rows: 4,
placeholder: '在此输入你的原因, 最多60个汉字'
},
title: '审核不通过原因',
"x-rules": [
{
required: true,
message: '请输入审核不通过原因'
},
{
limitByte: true,
maxByte: 30
}
]
}
}
}
}
}}
onSubmit={handleSubmit}
/>
<OrderPayModal
currentRef={payRef}
/>
</OrderDetailContext.Provider>
</div>
) : null
}
CommonOrderDetail.defaultProps = {}
export default CommonOrderDetail
\ No newline at end of file
......@@ -9,7 +9,7 @@ export const useSelfTable = () => {
//@todo 是否签约电子签章, 如果没有,需跳转至签约页面
const isSignUp = true
if (isSignUp) {
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderDetail?page_type=4&id=${record.id}&preview=1`)
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderPreview?page_type=4&id=${record.id}&preview=0`)
} else {
}
......
import React, { useRef } from 'react'
import { history } from 'umi'
import { Button, Row, Col } from 'antd'
import { history, Link } from 'umi'
import { Button, Row, Col, Progress } from 'antd'
import { PublicApi } from '@/services/api'
import EyePreview from '@/components/EyePreview'
import { formatTimeString } from '@/utils'
import { ORDER_TYPE } from '@/constants'
import { ORDER_TYPE, PurchaseOrderOutWorkState } from '@/constants'
import StatusColors from '../../components/StatusColors'
import { FieldTimeOutlined } from '@ant-design/icons'
import {
......@@ -26,7 +26,7 @@ const CircleChart = props => {
const dv = new DataView();
const userData = [
{ type: '总金额', value: sumPrice - alreadyPay },
{ type: '总金额', value: (sumPrice - alreadyPay) || 100 },
{ type: '已支付', value: alreadyPay }
];
......@@ -55,7 +55,7 @@ const CircleChart = props => {
// 业务hooks, 待支付订单
export const useSelfTable = () => {
const ref = useRef<any>({})
const showOutPayState = PurchaseOrderOutWorkState.PAY_ORDER || PurchaseOrderOutWorkState.CONFIRM_NOT_ARRIVED_ACCOUNT
const payOrderColumns: any[] = [
{
title: '订单号',
......@@ -88,7 +88,7 @@ export const useSelfTable = () => {
},
{
title: '总金额/已支付(元)',
align: 'center',
align: 'left',
dataIndex: 'sumPrice',
key: 'sumPrice',
render: (text, record) => <Row justify='space-between'>
......@@ -102,8 +102,6 @@ export const useSelfTable = () => {
</Row>,
width: 200
},
{ title: '已支付', align: 'center', dataIndex: 'alreadyPay', key: 'alreadyPay' },
{ title: '当前支付', align: 'center', dataIndex: 'currentPayments', render: (text, record) => text},
{
title: '订单类型',
align: 'center',
......@@ -125,16 +123,25 @@ export const useSelfTable = () => {
key: 'interiorState',
render: (text) => <StatusColors status={text} type='inside'/>
},
{
title: '操作',
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => <>
<Button type='link' onClick={() => handleConfirm(record)}>支付</Button>
<Button type='link' onClick={() => handleCancel(record.id)}>取消订单</Button>
</>
}
{ title: '当前支付', align: 'center', dataIndex: 'currentPayments', width: 140, render: (text, record) => <>
<Row justify='space-between'>
<Col>{record.currentPayments} / {record.sum}</Col>
<Col>
{record.currentPayments !== record.sum && showOutPayState}<Link to={`/memberCenter/tranactionAbility/purchaseOrder/orderPreview?page_type=5&id=${record.id}&preview=0`}>去支付</Link>
</Col>
</Row>
<Progress percent={Math.ceil(record.currentPayments / record.sum)} showInfo={false} />
</>},
// {
// title: '操作',
// align: 'center',
// dataIndex: 'ctl',
// key: 'ctl',
// render: (text, record) => <>
// <Button type='link' onClick={() => handleConfirm(record)}>支付</Button>
// <Button type='link' onClick={() => handleCancel(record.id)}>取消订单</Button>
// </>
// }
]
const handleConfirm = async (record) => {
......
......@@ -11,7 +11,7 @@ export const useSelfTable = () => {
const ref = useRef<any>({})
const [rowSelection, rowSelectionCtl] = useRowSelectionTable({customKey: 'id'})
const handleSubmit = async (id) => {
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderDetail?id=${id}&preview=1&page_type=3`)
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderPreview?id=${id}&preview=0&page_type=3`)
}
// 取消订单
......
......@@ -10,7 +10,7 @@ export const useSelfTable = () => {
const ref = useRef<any>({})
const handleSubmit = async (record) => {
if (record.interiorState === PurchaseOrderInsideWorkState.TWO_LEVEL_AUDIT_ORDER) {
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderDetail?id=${record.id}&preview=0&page_type=2`)
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderPreview?id=${record.id}&preview=0&page_type=2`)
}
}
const secondColumns: any[] = baseOrderListColumns.concat([
......
......@@ -3,7 +3,7 @@ import { PublicApi } from '@/services/api'
export const fetchOrderApi = {
// 弹窗获取商品列表
async getProductList(params) {
const { data } = await PublicApi.getProductCommodityCommonGetCommodityDetailList(params)
const { data } = await PublicApi.getProductCommodityCommonGetCommodityListByBuyer(params)
return data
},
......
import React, { useState, useEffect, useContext } from 'react'
import { Modal, List, Avatar, Button, Space } from 'antd'
import { usePageStatus } from '@/hooks/usePageStatus'
import { OrderDetailContext } from '../../context'
import { PayOutWorkState } from '@/constants'
import { PublicApi } from '@/services/api'
import { history } from 'umi'
export interface OrderPayResultModalProps {
type: 'default' | 'preview',
currentRef: any
}
const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRef}) => {
const { data } = useContext(OrderDetailContext)
const { id } = usePageStatus()
const [visible, setVisible] = useState(false)
const canCtlData = data.paymentInformationResponses.find(v => v.externalState === PayOutWorkState.READY_CONFIRM_RESULT) || {}
useEffect(() => {
if (currentRef) {
currentRef.current = {
visible,
setVisible
}
}
}, [])
const handleCancel = () => {
setVisible(false)
}
const handleConfirm = async (isReady) => {
const params = {
state: isReady,
id,
paymentInformationId: canCtlData.id
}
const { code } = await PublicApi.postOrderConfirmedPaymentResultsOrder(params)
if (code === 1000) {
history.goBack()
}
}
return (
<Modal
title={type === 'default' ? '确认支付结果' : '查看支付结果'}
visible={visible}
footer={type === 'default' ? <Space>
<Button onClick={handleCancel}>取消</Button>
<Button onClick={() => handleConfirm(0)} type='dashed'>确认未到账</Button>
<Button onClick={() => handleConfirm(1)} type='primary'>确认到账</Button>
</Space> : null}
>
<List
itemLayout="horizontal"
dataSource={canCtlData.payOrderUrls || []}
renderItem={item => (
<List.Item extra={<Button type='link'>预览</Button>}>
{item}
</List.Item>
)}
/>
</Modal>
)
}
OrderPayResultModal.defaultProps = {}
export default OrderPayResultModal
\ No newline at end of file
import React, { useContext, useEffect, useState } from 'react'
import style from './index.less'
import { Tabs, Row, Col } from 'antd'
import { Tabs, Row, Col, Button } from 'antd'
import { OrderDetailContext } from '../../context'
import MellowCard from '@/components/MellowCard'
import StatusColors from '../../../components/StatusColors'
import StatusColors from '@/pages/transaction/components/StatusColors'
import { PublicApi } from '@/services/api'
import { PayOutWorkState } from '@/constants'
import { Link } from 'umi'
export interface OrderPayTabsProps {}
const TabPane = Tabs.TabPane
const TabHeader = ({dataSource}) => {
return <Row justify='space-between' style={{minWidth: 216}}>
<Col>
<div className={style.fontGray}>支付比例</div>
<div className={style.bignumber}>{dataSource.payRatio}%</div>
<div className={style.smallnumber}>{dataSource.payPrice || 0}</div>
</Col>
<Col>
<StatusColors status={5} type='out'/>
</Col>
</Row>
return <div>
<Row justify='space-between' style={{minWidth: 216}}>
<Col>
<div className={style.fontGray}>支付比例</div>
<div className={style.bignumber}>{dataSource.payRatio}%</div>
</Col>
<Col>
<StatusColors status={dataSource.externalState} type='payOut'/>
</Col>
</Row>
<Row justify='space-between' align='middle' style={{width: '100%'}}>
<Col className={style.smallnumber}>{dataSource.payPrice || 0}</Col>
<Col>
{ dataSource.externalState === PayOutWorkState.READY_PAY && <a>查看</a> }
</Col>
</Row>
</div>
}
// 支付信息
......
import React, { useState, useEffect, useContext } from 'react'
import React, { useState, useEffect, useContext, useRef } from 'react'
import OrderDetailHeader from '../../components/OrderDetailHeader'
import { Button, Row, Col } from 'antd'
import { Link, history } from 'umi'
import { OrderModalType } from '@/constants'
import { OrderModalType, SaleOrderInsideWorkState } from '@/constants'
import { orderTypeLabel, SALE_ORDER_STATUS } from './constant'
import { formatTimeString } from '@/utils'
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
......@@ -17,13 +17,17 @@ import MellowCard from '@/components/MellowCard'
import OrderMergeInfo from './components/orderMergeInfo'
import OrderTransformRecord from './components/orderTransformRecord'
import OrderPayTabs from './components/orderPayTabs'
import StatusColors from '../components/StatusColors'
import StatusColors from '@/pages/transaction/components/StatusColors'
import OrderPayResultModal from './components/orderPayResultModal'
export interface CommonOrderDetailProps {}
const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
const [formData, setFormData] = useState<any>(null)
const { id, pageStatus, page_type = SALE_ORDER_STATUS.READY_APPROVED_ORDER } = usePageStatus()
let { id, pageStatus, page_type = SALE_ORDER_STATUS.READY_APPROVED_ORDER } = usePageStatus()
page_type = Number(page_type)
const payResultVisible = useRef<any>({})
const [payResultType, setPayResultType] = useState<'default' | 'preview'>('default')
useEffect(() => {
if (id) {
PublicApi.getOrderPurchaseOrderDetails({id}).then(({data, code}) => {
......@@ -91,6 +95,7 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
result = await PublicApi.postOrderConfirmedPaymentResultsOrder(params)
break;
}
}
if (result.code === 1000) {
......@@ -98,7 +103,15 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
}
}
const extraRight = <Button type='primary' onClick={handleSubmit}>提交审核</Button>
const startPush = () => {
if (page_type === SALE_ORDER_STATUS.CONFIRM_PAY_RESULT_ORDER) {
payResultVisible.current.setVisible(true)
return
}
handleSubmit()
}
const extraRight = <Button type='primary' onClick={startPush}>提交审核</Button>
const detailList = [
{ label: '对应报价单号', name: 'quotationNo', span: 8, render: text => <Link to={'/'}>{text}</Link> },
{ label: '订单摘要', name: 'orderThe', span: 8 },
......@@ -143,6 +156,8 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
<OrderTransformRecord/>
</div>
</OrderDetailWrapper>
<OrderPayResultModal currentRef={payResultVisible} type={payResultType}/>
</OrderDetailContext.Provider>
</div>
) : null
......
......@@ -5,7 +5,7 @@ import { PublicApi } from '@/services/api'
import EyePreview from '@/components/EyePreview'
import { formatTimeString } from '@/utils'
import { ORDER_TYPE } from '@/constants'
import StatusColors from '../../components/StatusColors'
import StatusColors from '@/pages/transaction/components/StatusColors'
import { FieldTimeOutlined } from '@ant-design/icons'
import {
Chart,
......@@ -138,7 +138,7 @@ export const useSelfTable = () => {
]
const handleConfirm = async (record) => {
history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderDetail?page_type=5&id=${record.id}&preview=1`)
history.push(`/memberCenter/tranactionAbility/saleOrder/orderDetail?page_type=4&id=${record.id}&preview=0`)
}
const handleCancel = async (id) => {
......
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