// 商城订单管理 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() const actionRef = useRef(); const formRef = useRef(); const modalRef = useRef(); // 查询的条件 const [searchParams, setSearchParams] = useState() const [currentRow, setCurrentRow] = useState(); const [modalVisible, handleModalVisible] = useState(); const [confirmLoading, handleConfirmLoading] = useState(false) // 弹出框的内容表单是否在提交 // 弹出框拖动效果 const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置 const [disabled, setDraggleDisabled] = useState() // 是否拖动 // 当前查询的文字 const [currentSearchText, setCurrentSearchText] = useState('') 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 ? { console.log('recordrecordrecordrecord', record); setCurrentRow(record); handleModalVisible(true) handleSetlogSave(`查询【${record?.ORDER_PERSON}】编号【${record?.SALEBILL_CODE}】的订单`) }}> {/* {record?.SALEBILL_CODE} */} {highlightText(record?.SALEBILL_CODE, currentSearchText)} : "-" } }, { 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 (
} // 列表表头 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={{ }} />
{/*
} 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 onDraggaleStart(event, uiData)} handle=".bookingOrderModalTop" >
{modal}
}} >
订单详情
{ handleCloseModal() }} />
订单信息
{ 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 ( 合计 {currentRow?.TOTAL_COUNT || 0} {currentRow?.ORDER_AMOUNT?.toFixed(2) || '0.00'} ) }} /> */} ) } export default connect(({ user }: ConnectState) => ({ currentUser: user.currentUser }))(MallOrderManage);