cloudMenu/src/pages/BusinessConfiguration/components/ChosePlayers.tsx

import { ActionType, ProCard, ProTable } from "@ant-design/pro-components"
import { useEffect, useImperativeHandle, useRef, useState } from "react"
import { getOnwer, getUserTypeTree, handleGetUserList } from "@/pages/serverpartAssets/service";
import { Tree } from "antd";
import './style.less'

const ChosePlayers = ({ actionRef, onRef, defaultPerson }: { actionRef?: any, onRef: any, defaultPerson: any }) => {
    const tableRef = useRef<ActionType>();
    // 是否显示账号分类查询树
    // 左侧业务类型数据
    const [treeView, setTreeView] = useState<any>()
    // 选择的部门
    const [selectedId, setSelectedId] = useState<any>()
    // 选择的行
    const [selectedRowKeys, setSelectedRowKeys] = useState<any>()
    // 选择的行的详情
    const [selectedRowDetail, setSelectedRowDetial] = useState<any>()

    // 表格内容
    const columns: any = [
        {
            title: '查询账号',
            dataIndex: 'searchKey',
            hideInDescriptions: true,
            hideInTable: true,
            fieldProps: {
                placeholder: '请输入账号/用户名称/业主单位/手机号/经营单位'
            }
        },
        {
            title: '账号部门',
            dataIndex: 'USERTYPE_ID',
            hideInSearch: true,
            hideInDescriptions: true,
            valueType: "treeSelect",
            fieldProps: {
                options: treeView,
            },
        },
        {
            title: '账号',
            dataIndex: 'USER_PASSPORT',
            sorter: (a, b) => {
                return (a.USER_PASSPORT || '').localeCompare((b.USER_PASSPORT || ''))
            },
            hideInSearch: true,
        },
        {
            title: '用户名称',
            dataIndex: 'USER_NAME',
            sorter: (a, b) => {
                return (a.USER_NAME || '').localeCompare((b.USER_NAME || ''))
            },
            hideInDescriptions: true,
            hideInSearch: true,
        },
        {
            title: '手机号',
            dataIndex: 'USER_MOBILEPHONE',
            hideInSearch: true
        },
        {
            title: '状态',
            dataIndex: 'USER_STATUS',
            hideInSearch: true,
            filters: true,
            onFilter: true,
            valueType: 'select',
            initialValue: 1,
            valueEnum: {
                all: { text: '全部', status: 'Default' },
                0: { text: '无效', status: 'Default' },
                1: { text: '有效', status: 'Processing' },
            },

        },
        {
            title: '业主单位',
            dataIndex: 'PROVINCE_UNIT',
            hideInSearch: true,
            ellipsis: true,
            sorter: (a, b) => {
                return (a.PROVINCE_UNIT || '').localeCompare((b.PROVINCE_UNIT || ''))
            },
            valueType: "select",
            request: async () => {
                let data = await getOnwer({ ProvinceCode: "530000", DataType: 1 })
                if (data && data.length > 0) {
                    data.forEach((item: any) => {
                        item.value = item.value.toString()
                    })
                }
                return data
            }
        },
        {
            title: '备注',
            dataIndex: 'USER_DESC',
            hideInSearch: true,
            render: (_, record) => {
                return record?.USER_DESC
            }
        }
    ]

    useEffect(() => {
        getUserTypeTree({ UserTypePattern: 1000, ShowStatus: true }).then((res: any) => {
            console.log('fdsklfja', res);
            setTreeView(res)
        })
    }, [])

    useEffect(() => {
        console.log('defaultPersondefaultPerson', defaultPerson);

        if (defaultPerson && defaultPerson.length > 0) {
            setSelectedRowDetial(defaultPerson)
            let keyList: any = []
            defaultPerson.forEach((item: any) => {
                keyList.push(item.USER_ID)
            })
            setSelectedRowKeys(keyList)
        }
    }, [defaultPerson])

    useImperativeHandle(onRef, () => ({
        selectedRowKeys,
        selectedRowDetail
    }))

    return (
        <div className="ChosePlayersBox" style={{ backgroundColor: '#fff', display: 'flex', width: '100%', height: '700px' }}>
            <ProCard
                style={{ width: "300px" }}
                className="ChosePlayersLeft"
                bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: "300px" }}
                colSpan={"300px"}
                headerBordered
            >
                {treeView && treeView.length > 0 ? <Tree
                    checkable
                    treeData={[{
                        label: '云南省',
                        value: 0,
                        key: '0-0',
                        children: treeView
                    }]}
                    fieldNames={{
                        title: "label",
                        key: "key"
                    }}
                    blockNode
                    defaultExpandedKeys={['0-0']}
                    onCheck={(checkedKeys: React.Key[] | any, info) => {
                        const selectedIds = info.checkedNodes.filter((n: any) => n?.type === 1)
                        let res: any = selectedIds.map(n => n?.value)?.toString() || ''
                        console.log('reqs', res);
                        setSelectedId(res)
                    }}
                /> : ''}
            </ProCard>
            <div style={{
                width: 'calc(100% - 300px)',
                paddingTop: 0,
                paddingBottom: 0,
                paddingRight: 0
            }}>
                <ProTable
                    rowKey="USER_ID"
                    actionRef={tableRef}
                    scroll={{ x: "100%", y: '430px' }}
                    options={false}
                    request={async (params, sorter) => {
                        if (!selectedId) return []
                        const req: any = {
                            SearchParameter: {
                                UserTypeIds: selectedId,
                                USER_STATUS: 1
                            },
                            PageIndex: 1,
                            PageSize: 999999,
                            keyWord: params.searchKey ? { key: "USER_PASSPORT,USER_NAME,USER_MOBILEPHONE,PROVINCE_UNIT,BUSINESSMAN_NAME", value: params.searchKey } : null,
                        }
                        const data = await handleGetUserList(req)
                        console.log('dsajkdjas;da', data);
                        if (data && data.length > 0) {
                            return { data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                    columns={columns}
                    rowSelection={{
                        selectedRowKeys: selectedRowKeys,
                        onChange: (e: any, detail: any) => {
                            setSelectedRowDetial(detail)
                            setSelectedRowKeys(e)
                        },
                        preserveSelectedRowKeys: true,
                    }}
                />
            </div>
        </div>
    )
}
export default ChosePlayers;