ylj20011123 c1f19fdafc update
2025-08-07 18:42:46 +08:00

804 lines
32 KiB
TypeScript

// 商城订单管理
import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useRef, useState } from "react";
import { Col, Modal, Row, type FormInstance } from "antd";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import PageTitleBox from "@/components/PageTitleBox";
import moment from 'moment'
import { handeGetMERCHANTSList, handeGetNestingAUTOTYPEList, handeGetSALEBILLList, handeGetSaleBillWholeList, handeGetSALEDETAILList } from "../service";
import './style.less'
import Draggable from "react-draggable";
import ProForm, { ProFormSelect, ProFormText } from "@ant-design/pro-form";
import orderIcon from '@/assets/detail/orderIcon.png'
import closeIcon from '@/assets/detail/closeIcon.png'
import { convertTreeFieldToNumber, handleSetlogSave } from "@/utils/format";
import OrderDetailModal from "../BookingMealOrder/components/orderDetailModal";
import { highlightText } from "@/utils/highlightText";
const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolean, searchReq?: any }> = (props) => {
const { currentUser, isComponent, searchReq } = props
const draggleRef = React.createRef<any>()
const actionRef = useRef<ActionType>();
const formRef = useRef<FormInstance>();
const modalRef = useRef<FormInstance>();
// 查询的条件
const [searchParams, setSearchParams] = useState<any>()
const [currentRow, setCurrentRow] = useState<any>();
const [modalVisible, handleModalVisible] = useState<boolean>();
const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
// 弹出框拖动效果
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
// 当前查询的文字
const [currentSearchText, setCurrentSearchText] = useState<string>('')
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 columns: any = [
{
dataIndex: 'searchText',
title: '查询内容',
hideInTable: true,
fieldProps: {
placeholder: "请输入供货商/购买的商品/订单编号"
}
},
{
title: '查询时间',
dataIndex: 'search_date',
valueType: 'dateRange',
hideInTable: true,
hideInDescriptions: true,
search: {
transform: (value) => {
return {
ORDER_DATE_Start: value[0],
ORDER_DATE_End: value[1],
};
},
},
fieldProps: {
ranges: {
"本月": [moment().startOf('M'), moment()],
"上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
"近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
"近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
}
},
// initialValue: [moment().add(-1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
initialValue: [moment().startOf('M'), moment()],
},
{
title: "订单状态",
dataIndex: "orderStatus",
valueType: "select",
valueEnum: {
"0": "全部",
"1005": "订单待支付",
"1010": "订单待发货",
"2010": "订单已发货",
"3000": "订单已完成",
"8000": "退款申请中",
"8900": "订单已退款",
"9000": "订单已关闭",
"9999": "订单已撤销"
},
initialValue: '0',
hideInTable: true,
},
{
title: "订单类型",
dataIndex: "orderType",
valueType: "select",
valueEnum: {
"0": "全部",
"3000": "零售商城",
"3001": "工会商城",
"3002": "品诺商城",
"3010": "积分商城"
},
initialValue: '0',
hideInTable: true,
},
{
title: "支付方式",
dataIndex: "PAYMETHOD",
valueType: "select",
valueEnum: {
"0": "全部",
"支付宝": "支付宝",
"微信": "微信",
"积分兑换": "积分兑换",
"余额支付": "余额支付",
},
initialValue: '0',
hideInTable: true,
},
{
title: "序号",
dataIndex: "index",
valueType: "index",
hideInSearch: true,
align: "center",
width: 60,
},
{
title: "供货商",
dataIndex: "MERCHANTS_NAME",
width: 200,
hideInSearch: true,
ellipsis: true,
align: "center",
render: (_, record) => {
return highlightText(record?.MERCHANTS_NAME, currentSearchText)
}
},
{
title: "收货人员",
dataIndex: "ORDER_PERSON",
width: 150,
hideInSearch: true,
ellipsis: true,
align: "center",
},
{
title: '会员标签',
width: 150,
dataIndex: "MEMBERSHIP_TARGET",
valueType: 'treeSelect',
align: "center",
request: async () => {
const req = {
AUTOTYPE_TYPEID: '2000',
AUTOTYPE_PID: "",
OWNERUNIT_ID: currentUser?.OwnerUnitId,
AUTOTYPE_VALID: 1,
SearchKey: ""
}
const data = await handeGetNestingAUTOTYPEList(req);
console.log('datadatadatadatadata', data);
let res = convertTreeFieldToNumber(data, 'AUTOTYPE_ID')
return res
},
hideInSearch: true,
fieldProps: {
multiple: true,
allowClear: true,
showSearch: true,
filterTreeNode: (input, node) => {
// ✅ 输入时根据 AUTOTYPE_NAME 模糊匹配
return node?.AUTOTYPE_NAME?.toLowerCase()?.includes(input.toLowerCase());
},
treeDefaultExpandAll: true,
fieldNames: {
label: 'AUTOTYPE_NAME',
value: 'AUTOTYPE_ID',
}
}
},
{
title: "联系电话",
dataIndex: "ORDER_PERSONTEL",
width: 150,
hideInSearch: true,
ellipsis: true,
align: "center",
},
{
dataIndex: 'SALEBILL_CODE',
title: '订单编号',
align: 'center',
hideInSearch: true,
width: 200,
ellipsis: true,
render: (_, record) => {
return record?.SALEBILL_CODE ? <a onClick={() => {
console.log('recordrecordrecordrecord', record);
setCurrentRow(record);
handleModalVisible(true)
handleSetlogSave(`查询【${record?.ORDER_PERSON}】编号【${record?.SALEBILL_CODE}】的订单`)
}}>
{/* {record?.SALEBILL_CODE} */}
{highlightText(record?.SALEBILL_CODE, currentSearchText)}
</a> : "-"
}
},
{
title: "订单时间",
dataIndex: "ORDER_DATE",
width: 180,
hideInSearch: true,
ellipsis: true,
align: "center",
render: (_, record) => {
return record?.ORDER_DATE ? moment(record?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
},
sorter: (a, b) => new Date(a.ORDER_DATE).getTime() - new Date(b.ORDER_DATE).getTime(),
defaultSortOrder: 'descend',
},
{
title: "订单状态",
dataIndex: "SALEBILL_STATE",
width: 120,
hideInSearch: true,
ellipsis: true,
valueType: "select",
valueEnum: {
"0": "全部",
"1005": "订单待支付",
"1010": "订单待发货",
"2010": "订单已发货",
"3000": "订单已完成",
"8000": "退款申请中",
"8900": "订单已退款",
"9000": "订单已关闭",
"9999": "订单已撤销"
},
align: "center",
sorter: (a, b) => a.SALEBILL_STATE - b.SALEBILL_STATE
},
{
title: "获得积分",
dataIndex: "MEMBERSHIP_POINT",
width: 120,
hideInSearch: true,
ellipsis: true,
align: "center",
sorter: (a, b) => a.MEMBERSHIP_POINT - b.MEMBERSHIP_POINT
},
{
title: "获得成长值",
dataIndex: "MEMBERGROWTH_VALUE",
width: 120,
hideInSearch: true,
ellipsis: true,
align: "center",
sorter: (a, b) => a.MEMBERGROWTH_VALUE - b.MEMBERGROWTH_VALUE
},
{
title: "购买的商品",
dataIndex: "COMMODITY_NAME",
width: 300,
hideInSearch: true,
ellipsis: true,
align: "center",
render: (_, record) => {
return highlightText(record?.COMMODITY_NAME, currentSearchText)
}
},
{
title: "订单金额",
dataIndex: "ORDER_AMOUNT",
width: 120,
hideInSearch: true,
ellipsis: true,
align: "center",
sorter: (a, b) => a.ORDER_AMOUNT - b.ORDER_AMOUNT
},
{
title: "实付金额",
dataIndex: "PAY_AMOUNT",
width: 120,
hideInSearch: true,
ellipsis: true,
align: "center",
sorter: (a, b) => a.PAY_AMOUNT - b.PAY_AMOUNT
},
{
title: "订单类型",
dataIndex: "SALEBILL_TYPE",
width: 120,
hideInSearch: true,
ellipsis: true,
align: "center",
valueType: 'select',
valueEnum: {
"3000": "零售商城",
"3001": "工会商城",
"3002": "品诺商城",
"3010": "积分商城"
},
// valueEnum: {
// "2000": "充值驿付会员",
// "6000": "预约点餐"
// }
},
{
title: "支付方式",
dataIndex: "PAY_METHOD",
valueType: "select",
valueEnum: {
"0": "全部",
"支付宝": "支付宝",
"微信": "微信",
"积分兑换": "积分兑换",
"余额支付": "余额支付",
},
width: 120,
hideInSearch: true,
ellipsis: true,
align: "center",
},
{
title: '会员标签',
dataIndex: "MEMBERSHIP_TARGET",
valueType: 'treeSelect',
request: async () => {
const req = {
AUTOTYPE_TYPEID: '2000',
AUTOTYPE_PID: "",
OWNERUNIT_ID: currentUser?.OwnerUnitId,
AUTOTYPE_VALID: 1,
SearchKey: ""
}
const data = await handeGetNestingAUTOTYPEList(req);
console.log('datadatadatadatadata', data);
return data
},
hideInTable: true,
fieldProps: {
multiple: true,
allowClear: true,
showSearch: true,
filterTreeNode: (input, node) => {
// ✅ 输入时根据 AUTOTYPE_NAME 模糊匹配
return node?.AUTOTYPE_NAME?.toLowerCase()?.includes(input.toLowerCase());
},
treeDefaultExpandAll: true,
fieldNames: {
label: 'AUTOTYPE_NAME',
value: 'AUTOTYPE_ID',
}
}
},
{
title: '供应商',
dataIndex: "MERCHANTS_IDS",
valueType: 'select',
request: async () => {
const req = {
searchParameter: {
OWNERUNIT_ID: currentUser?.OwnerUnitId,
PROVINCE_CODE: currentUser?.ProvinceCode,
MERCHANTS_TYPE: ""
},
PageIndex: 1,
PageSize: 999999,
}
const data = await handeGetMERCHANTSList(req);
return data.List
},
hideInTable: true,
fieldProps: {
allowClear: true,
showSearch: true,
filterTreeNode: (input, node) => {
// ✅ 输入时根据 AUTOTYPE_NAME 模糊匹配
return node?.MERCHANTS_NAME?.toLowerCase()?.includes(input.toLowerCase());
},
treeDefaultExpandAll: true,
fieldNames: {
label: 'MERCHANTS_NAME',
value: 'MERCHANTS_ID',
}
}
},
// {
// title: "订单编号",
// dataIndex: "SALEBILL_CODE",
// width: 150,
// hideInSearch: true,
// ellipsis: true,
// align: "center",
// },
{
title: "备注说明",
dataIndex: "SALEBILL_DESC",
width: 180,
hideInSearch: true,
ellipsis: true,
align: "center",
}
]
// 订单详情的表格
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,
},
]
// 关闭悬浮框
const handleCloseModal = () => {
handleConfirmLoading(false)
handleModalVisible(false)
setCurrentRow(undefined);
}
return (
<div>
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
<div style={{
width: '100% ',
paddingTop: 0,
paddingBottom: 0,
paddingRight: 0
}}>
<ProTable
actionRef={actionRef}
formRef={formRef}
columns={columns}
bordered
expandable={{
expandRowByClick: true
}}
scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
headerTitle={<PageTitleBox props={props} />} // 列表表头
search={isComponent ? false : {
span: 6,
defaultCollapsed: false
}}
request={async (params) => {
console.log('paramsparamsparams', params);
const req = isComponent ? searchReq : {
SearchParameter: {
OWNERUNIT_ID: currentUser?.OwnerUnitId,
PROVINCE_CODE: currentUser?.ProvinceCode,
SALEBILL_TYPES: params?.orderType === '0' ? '3000,3001,3002,3010' : params?.orderType,
ORDER_DATE_Start: params?.ORDER_DATE_Start || "",
ORDER_DATE_End: params?.ORDER_DATE_End || "",
SALEBILL_STATES: params?.orderStatus === "0" ? "1010,2010,3000" : params?.orderStatus,
CHANNEL_TYPE: params?.PAY_METHOD === "0" ? "" : params?.PAY_METHOD,
SearchKeyValue: params?.searchText || "",
MERCHANTS_IDS: params?.MERCHANTS_IDS || "",
MEMBERSHIP_TARGET: params?.MEMBERSHIP_TARGET && params?.MEMBERSHIP_TARGET.length > 0 ? params?.MEMBERSHIP_TARGET.toString() : ""
},
PageIndex: 1,
PageSize: 999999,
SortStr: "ORDER_DATE desc",
// keyWord: {
// Key: "MERCHANTS_NAME,ORDER_PERSON,ORDER_PERSONTEL,SALEBILL_CODE,COMMODITY_NAME",
// Value: params?.searchText || ""
// },
}
console.log('reqreqreqreqreq', req);
// const data = await handeGetSALEBILLList(req);
const data = await handeGetSaleBillWholeList(req);
console.log('datadatadatadatadata', data);
setCurrentSearchText(params?.searchText || "")
handleSetlogSave(`点击查询按钮`)
if (data.List && data.List.length > 0) {
return { data: data.List, success: true, total: data.TotalCount }
}
return { data: [], success: true }
}}
toolbar={{
}}
/>
</div>
</div>
<OrderDetailModal modalVisible={modalVisible} handleCloseModal={handleCloseModal} currentRow={currentRow} />
{/* <Modal
className="MallOrderManageModal"
title={false}
closeIcon={<div></div>}
destroyOnClose={true}
width={1200}
visible={modalVisible}
confirmLoading={confirmLoading}
afterClose={() => {
formRef.current?.resetFields();
setCurrentRow(undefined);
}}
onCancel={() => {
handleConfirmLoading(false)
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}
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={() => {
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>
<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">
<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">
<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">
<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 },
]}
/>
</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>
</Row>
</div>
</ProForm>
<ProTable
columns={orderDetailColumns}
bordered
search={false}
options={false}
request={async () => {
const req: any = {
searchParameter: {
SALEBILL_ID: currentRow?.SALEBILL_ID
},
PageIndex: 1,
PageSize: 999999,
}
const data = await handeGetSALEDETAILList(req)
console.log('datadatadata', data);
if (data.List && data.List.length > 0) {
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' }}>{currentRow?.TOTAL_COUNT || 0}</td>
<td />
<td style={{ textAlign: 'center', fontWeight: 'bold' }}>{currentRow?.ORDER_AMOUNT?.toFixed(2) || '0.00'}</td>
</tr>
)
}}
/>
</Modal> */}
</div>
)
}
export default connect(({ user }: ConnectState) => ({
currentUser: user.currentUser
}))(MallOrderManage);