471 lines
22 KiB
TypeScript
471 lines
22 KiB
TypeScript
import { connect } from "umi";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import { Col, FormInstance, Modal, Row } from "antd";
|
|
import { useRef, useState } from "react";
|
|
import Draggable from "react-draggable";
|
|
import React from "react";
|
|
import ProForm, { ProFormSelect, ProFormText } from "@ant-design/pro-form";
|
|
import moment from 'moment'
|
|
import orderIcon from '@/assets/detail/orderIcon.png'
|
|
import closeIcon from '@/assets/detail/closeIcon.png'
|
|
import ProTable from "@ant-design/pro-table";
|
|
import { handeGetSALEBILLList, handeGetSALEDETAILList } from "../../service";
|
|
import './style.less'
|
|
|
|
type DetailProps = {
|
|
modalVisible: boolean //显示属性
|
|
handleCloseModal: any // 关闭调用的方法
|
|
currentRow: any
|
|
detailType?: any // 判断是不是点餐的订单详情 可以显示不同内容
|
|
}
|
|
const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailType }: DetailProps) => {
|
|
const formRef = useRef<FormInstance>();
|
|
const draggleRef = React.createRef<any>()
|
|
const modalRef = useRef<FormInstance>();
|
|
|
|
const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
|
|
// const [currentRow, setCurrentRow] = useState<any>();
|
|
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
|
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
|
// 订单详情
|
|
const [orderDetail, setOrderDetail] = useState<any>()
|
|
|
|
const onDraggaleStart = (event, uiData) => {
|
|
const { clientWidth, clientHeight } = window.document.documentElement;
|
|
const targetRect = draggleRef.current?.getBoundingClientRect();
|
|
if (!targetRect) {
|
|
return;
|
|
}
|
|
setBounds({
|
|
left: -targetRect.left + uiData.x,
|
|
right: clientWidth - (targetRect.right - uiData.x),
|
|
top: -targetRect.top + uiData.y,
|
|
bottom: clientHeight - (targetRect.bottom - uiData.y),
|
|
});
|
|
};
|
|
|
|
// 订单详情的表格
|
|
const orderDetailColumns: any = [
|
|
{
|
|
dataIndex: "index",
|
|
title: "序号",
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
valueType: "index",
|
|
width: 70,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_NAME',
|
|
title: '商品名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_BARCODE',
|
|
title: '商品条码',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'ORDER_COUNT',
|
|
title: '数量',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'AVERAGE_PRICE',
|
|
title: '单价',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'ORDER_AMOUNT',
|
|
title: '金额',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<Modal
|
|
className="BookingMealOrderDetailModal"
|
|
title={false}
|
|
closeIcon={<div></div>}
|
|
destroyOnClose={true}
|
|
width={1200}
|
|
bodyStyle={{
|
|
maxHeight: '850px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
visible={modalVisible}
|
|
confirmLoading={confirmLoading}
|
|
afterClose={() => {
|
|
formRef.current?.resetFields();
|
|
// setCurrentRow(undefined);
|
|
}}
|
|
onCancel={() => {
|
|
handleConfirmLoading(false)
|
|
if (handleCloseModal) {
|
|
handleCloseModal()
|
|
}
|
|
// handleModalVisible(false)
|
|
// setCurrentRow(undefined);
|
|
}}
|
|
footer={false}
|
|
modalRender={(modal) => {
|
|
return <Draggable
|
|
disabled={disabled}
|
|
bounds={bounds}
|
|
onStart={(event, uiData) => onDraggaleStart(event, uiData)}
|
|
handle=".bookingOrderModalTop"
|
|
>
|
|
<div ref={draggleRef}>{modal}</div>
|
|
</Draggable>
|
|
}}
|
|
>
|
|
<ProForm
|
|
layout={'horizontal'}
|
|
formRef={modalRef}
|
|
submitter={false}
|
|
// request={async () => {
|
|
// console.log('currentRow', currentRow);
|
|
// if (currentRow) {
|
|
// return {
|
|
// ...currentRow
|
|
// }
|
|
// } else {
|
|
// return {}
|
|
// }
|
|
// }}
|
|
initialValues={currentRow ? {
|
|
...currentRow,
|
|
ORDER_DATE: currentRow?.ORDER_DATE ? moment(currentRow?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : ''
|
|
} : {}}
|
|
>
|
|
<div className="bookingOrderModalTop">
|
|
<div className="modalTopLeft">
|
|
<img className="memberIcon" src={orderIcon} />
|
|
<span className="modalTitle">订单详情</span>
|
|
</div>
|
|
<div className="modalTopRight">
|
|
<img className="memberIcon" src={closeIcon} onClick={() => {
|
|
if (handleCloseModal) {
|
|
handleCloseModal()
|
|
}
|
|
}} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bookingOrderModalCenter">
|
|
<div className="smallTitle">订单信息</div>
|
|
|
|
<Row gutter={8}>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"SALEBILL_CODE"}
|
|
label={"订单编码"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
{
|
|
detailType === 'food' ?
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"SERVERPART_NAME"}
|
|
label={"服务区"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col> : ""
|
|
}
|
|
{
|
|
detailType === 'food' ?
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"SHOPNAME"}
|
|
label={"门店"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col> : ""
|
|
}
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormSelect
|
|
name={"CHANNEL_TYPE"}
|
|
label={"支付渠道"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"ORDER_DATE"}
|
|
label={"下单时间"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"RECORD_COUNT"}
|
|
label={"商品种类"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"TOTAL_COUNT"}
|
|
label={"商品件数"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem SALEBILLSTATE">
|
|
<ProFormText
|
|
name={"ORDER_AMOUNT"}
|
|
label={"订单金额"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"COUPON_AMOUNT"}
|
|
label={"优惠金额"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"PACK_AMOUNT"}
|
|
label={"打包金额"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"CONSUME_SCORE"}
|
|
label={"使用积分"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem SALEBILLSTATE">
|
|
<ProFormText
|
|
name={"PAY_AMOUNT"}
|
|
label={"实付金额"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"COST_AMOUNT"}
|
|
label={"成本金额"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem SALEBILLSTATE">
|
|
{
|
|
detailType === 'food' ?
|
|
<ProFormSelect
|
|
name={"SALEBILL_STATE"}
|
|
label={"订单状态"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
options={[
|
|
{ label: "订单待支付", value: 1005 },
|
|
{ label: "订单待制作", value: 1010 },
|
|
{ label: "订单待取餐", value: 2000 },
|
|
{ label: "订单已完成", value: 3000 },
|
|
{ label: "退款申请中", value: 8000 },
|
|
{ label: "订单已退款", value: 8900 },
|
|
{ label: "订单已关闭", value: 9000 },
|
|
{ label: "订单已撤销", value: 9999 },
|
|
]}
|
|
/> :
|
|
<ProFormSelect
|
|
name={"SALEBILL_STATE"}
|
|
label={"订单状态"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
options={[
|
|
{ label: "订单待支付", value: 1005 },
|
|
{ label: "订单待发货", value: 1010 },
|
|
{ label: "订单已发货", value: 2010 },
|
|
{ label: "订单已完成", value: 3000 },
|
|
{ label: "退款申请中", value: 8000 },
|
|
{ label: "订单已退款", value: 8900 },
|
|
{ label: "订单已关闭", value: 9000 },
|
|
{ label: "订单已撤销", value: 9999 },
|
|
]}
|
|
/>
|
|
}
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormSelect
|
|
name={"COMMENT_STATE"}
|
|
label={"订单评价状态"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
options={[
|
|
{ label: "未评价", value: 0 },
|
|
{ label: "已评价", value: 1 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormSelect
|
|
name={"TAKE_TYPE"}
|
|
label={"取餐方式"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
options={[
|
|
{ label: "堂食", value: 1000 },
|
|
{ label: "预约", value: 2000 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormSelect
|
|
name={"PACK_TYPE"}
|
|
label={"就餐方式"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
options={[
|
|
{ label: "堂食", value: 1000 },
|
|
{ label: "打包", value: 2000 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormSelect
|
|
name={"TAKE_NUMBER"}
|
|
label={"取餐码"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8} className="memberInfoDetailItem">
|
|
<ProFormText
|
|
name={"ORDER_PERSON"}
|
|
label={"收货人"}
|
|
readonly
|
|
style={{ marginBottom: '16px' }}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</ProForm>
|
|
|
|
<ProTable
|
|
columns={orderDetailColumns}
|
|
bordered
|
|
search={false}
|
|
options={false}
|
|
request={async () => {
|
|
let SALEBILL_ID: string = ''
|
|
console.log('currentRowcurrentRow', currentRow);
|
|
|
|
if (!currentRow?.SALEBILL_ID) {
|
|
const req: any = {
|
|
searchParameter: {
|
|
SALEBILL_CODE: currentRow?.TICKET_CODE
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 1,
|
|
}
|
|
const data = await handeGetSALEBILLList(req)
|
|
console.log('dasdas', data);
|
|
let obj: any = data.List && data.List.length > 0 ? data.List[0] : null
|
|
SALEBILL_ID = obj.SALEBILL_ID
|
|
setOrderDetail(obj)
|
|
|
|
modalRef.current?.setFieldsValue({
|
|
SALEBILL_CODE: obj.SALEBILL_CODE || "",
|
|
CHANNEL_TYPE: obj.CHANNEL_TYPE || "",
|
|
ORDER_DATE: obj.ORDER_DATE ? moment(obj.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : "",
|
|
RECORD_COUNT: obj.RECORD_COUNT || "",
|
|
TOTAL_COUNT: obj.TOTAL_COUNT || "",
|
|
ORDER_AMOUNT: obj.ORDER_AMOUNT || "",
|
|
COUPON_AMOUNT: obj.COUPON_AMOUNT || "",
|
|
PACK_AMOUNT: obj.PACK_AMOUNT || "",
|
|
CONSUME_SCORE: obj.CONSUME_SCORE || "",
|
|
PAY_AMOUNT: obj.PAY_AMOUNT || "",
|
|
COST_AMOUNT: obj.COST_AMOUNT || "",
|
|
SALEBILL_STATE: obj.SALEBILL_STATE || "",
|
|
COMMENT_STATE: obj.COMMENT_STATE || "",
|
|
TAKE_TYPE: obj.TAKE_TYPE || "",
|
|
PACK_TYPE: obj.PACK_TYPE || "",
|
|
TAKE_NUMBER: obj.TAKE_NUMBER || "",
|
|
})
|
|
}
|
|
|
|
const req: any = {
|
|
searchParameter: {
|
|
SALEBILL_ID: currentRow?.SALEBILL_ID || SALEBILL_ID
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
}
|
|
const data = await handeGetSALEDETAILList(req)
|
|
console.log('datadatadata', data);
|
|
if (data.List && data.List.length > 0) {
|
|
if (currentRow?.SALEBILL_ID) {
|
|
let TOTAL_COUNTSUM: number = 0
|
|
let ORDER_AMOUNTSUM: number = 0
|
|
data.List.forEach((item: any) => {
|
|
TOTAL_COUNTSUM += item.ORDER_COUNT
|
|
ORDER_AMOUNTSUM += item.ORDER_AMOUNT
|
|
})
|
|
|
|
|
|
setOrderDetail({
|
|
TOTAL_COUNT: TOTAL_COUNTSUM.toFixed(2),
|
|
ORDER_AMOUNT: ORDER_AMOUNTSUM
|
|
})
|
|
}
|
|
return { data: data.List, success: true, total: data.TotalCount }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
summary={() => {
|
|
// extra 是 request 返回的 extra 字段
|
|
return (
|
|
<tr>
|
|
<td colSpan={2} style={{ textAlign: 'center', fontWeight: 'bold' }}>合计</td>
|
|
<td />
|
|
<td style={{ textAlign: 'center', fontWeight: 'bold' }}>{orderDetail?.TOTAL_COUNT || orderDetail?.ORDER_COUNT || 0}</td>
|
|
<td />
|
|
<td style={{ textAlign: 'center', fontWeight: 'bold' }}>{orderDetail?.ORDER_AMOUNT?.toFixed(2) || '0.00'}</td>
|
|
</tr>
|
|
)
|
|
}}
|
|
/>
|
|
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user, }: ConnectState) => ({
|
|
currentUser: user.currentUser,
|
|
}))(OrderDetailModal);
|