newCloud/src/pages/ahjgPage/inventoryInformation/components/inventoryDetail.tsx

import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { FormInstance, Modal } from "antd";
import { useRef, useState } from "react";
import React from "react";
import Draggable from "react-draggable";
import ProTable, { ActionType } from "@ant-design/pro-table";
import { handleGetShopInventoryList } from "../../service";
import InventoryDetailModal from "../../InventoryDetails/components/InventoryDetailModal";

type DetailProps = {
    onShow: any
    onCancel: any
    parentRow: any
    currentUser: any
    ServerpartId: any  // 服务区id
    shopId: any // 门店id
}
const inventoryDetail = ({ onShow, onCancel, parentRow, currentUser, ServerpartId, shopId }: DetailProps) => {
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const draggleRef = React.createRef<any>()

    // 弹出框拖动效果
    const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
    const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
    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 [currentRow, setCurrentRow] = useState<any>()
    // 显示详情
    const [showDetail, setShowDetail] = useState<boolean>()


    const columns: any = [
        {
            title: "序号",
            dataIndex: "index",
            valueType: 'index',
            align: 'center',
            width: 80,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>服务区名称</div>,
            dataIndex: "Serverpart_Name",
            align: 'center',
            width: 120,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>门店名称</div>,
            dataIndex: "ServerpartShop_Name",
            align: 'left',
            width: 150,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>商品名称</div>,
            dataIndex: "COMMODITY_NAME",
            align: 'left',
            width: 250,
            ellipsis: true,
            hideInSearch: true,
            render: (_, record) => {
                return record?.COMMODITY_NAME ?
                    <a onClick={() => {
                        console.log('record', record);
                        setCurrentRow(record)
                        setShowDetail(true)
                    }}>
                        {record?.COMMODITY_NAME}
                    </a> : ""
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>商品条码</div>,
            dataIndex: "COMMODITY_BARCODE",
            align: 'center',
            width: 120,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>规格</div>,
            dataIndex: "COMMODITY_RULE",
            align: 'center',
            width: 120,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>剩余数量</div>,
            dataIndex: "OVERPLUSCOUNT",
            align: 'right',
            width: 120,
            valueType: 'digit',
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>含税进价</div>,
            dataIndex: "OVERPLUS_AMOUNT",
            align: 'right',
            width: 120,
            valueType: 'digit',
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>除税进价</div>,
            dataIndex: "OVERPLUS_PRICE",
            align: 'right',
            width: 120,
            valueType: 'digit',
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>含税售价</div>,
            dataIndex: "OVERPLUS_XS_AMOUNT",
            align: 'right',
            width: 120,
            valueType: 'digit',
            ellipsis: true,
            hideInSearch: true,
        },
    ]

    const handleModalCancel = () => {
        setCurrentRow(null)
        setShowDetail(false)
    }

    return (
        <div>
            <Modal
                title={
                    <div
                        className="COMMODITYINFOTitle"
                        style={{
                            width: '100%',
                            cursor: 'move',
                        }}
                        onMouseOver={() => {
                            if (disabled) {
                                setDraggleDisabled(false)
                            }
                        }}
                        onMouseOut={() => {
                            setDraggleDisabled(true)
                        }}
                        onFocus={() => { }}
                        onBlur={() => { }}
                    >进销存信息</div>
                }
                destroyOnClose={true}
                width={'80%'}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
                visible={onShow}
                onCancel={() => {
                    if (onCancel) {
                        onCancel()
                    }
                }}
                footer={false}
                modalRender={(modal) => {
                    return <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                        handle=".COMMODITYINFOTitle"
                    >
                        <div ref={draggleRef}>{modal}</div>
                    </Draggable>
                }}
            >
                <ProTable
                    actionRef={actionRef}
                    formRef={formRef}
                    columns={columns}
                    bordered
                    search={false}
                    options={false}
                    request={async () => {
                        console.log('parentRowparentRowparentRowparentRow', parentRow);
                        const req: any = {
                            ProvinceCode: currentUser?.ProvinceCode,
                            ServerpartId: ServerpartId ? ServerpartId.toString() : "",
                            ServerpartShopId: shopId || "",
                            CommodityBarcode: parentRow?.COMMODITY_BARCODE,
                        }
                        const data = await handleGetShopInventoryList(req)
                        console.log('datadatadatadata', data);
                        if (data && data.length > 0) {
                            return { data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                />
            </Modal>



            {/* 进销存明细的悬浮框 */}
            <InventoryDetailModal onShow={showDetail} parentRow={currentRow} onCancel={handleModalCancel} come={'inventory'} />
        </div>
    )
}

export default connect(({ user, }: ConnectState) => ({
    currentUser: user.currentUser,
}))(inventoryDetail);