cloudNew/src/pages/examine/index/index.tsx

import { connect } from "umi";
import { Children, useRef, useState } from "react";
import { Button, message, Modal, Popconfirm, Space, type FormInstance } from "antd";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import moment from "moment";
import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree";
import { handleGetAddExamineType, handleGetDeleteExamineType, handleGetEditExamineType, handleGetExamineTypeList, handleGetExamineTypeTreeList } from "./service";
import { ProForm, ProFormSwitch, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-components";
import AddBigType from "./components/addBigType";


const examineIndex: React.FC<{ currentUser: any }> = (props) => {
    const { currentUser } = props

    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    // 弹出框的表单实例
    const modalRef = useRef<FormInstance>()
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()
    // 打开新增的悬浮框
    const [openAddModal, setOpenAddModal] = useState<boolean>(false)
    // 当前行数据
    const [currentRow, setCurrentRow] = useState<any>()
    const [columnsStateMap, setColumnsStateMap] = useState<any>({
        operator: { show: false }
    })

    const columns: any = [
        {
            title: <div style={{ textAlign: 'center' }}>分类名称</div>,
            dataIndex: "name",
            align: 'left',
            ellipsis: true,
            width: 200,
            hideInSearch: true
        },
        {
            title: <div style={{ textAlign: 'center' }}>分类注释</div>,
            dataIndex: "description",
            align: 'left',
            ellipsis: true,
            width: 250,
            hideInSearch: true
        },
        {
            title: "有效状态",
            dataIndex: "status",
            ellipsis: true,
            align: 'center',
            width: 150,
            valueType: "select",
            valueEnum: {
                "1": "有效",
                "0": "无效"
            },
            initialValue: "1",
            render: (_: any, record: { status: any; }) => {
                return record?.status ? '有效' : '无效'
            }
        },
        {
            title: "创建时间",
            dataIndex: "createdAt",
            ellipsis: true,
            align: 'center',
            width: 200,
            hideInSearch: true,
            render: (_: any, record: { status: any; }) => {
                return record?.createdAt ? moment(record?.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'
            }
        },
        {
            title: "更新时间",
            dataIndex: "updatedAt",
            ellipsis: true,
            align: 'center',
            width: 200,
            hideInSearch: true,
            render: (_: any, record: { status: any; }) => {
                return record?.updatedAt ? moment(record?.updatedAt).format('YYYY-MM-DD  HH:mm:ss') : '-'
            }
        },
        {
            title: "操作人",
            dataIndex: "operator",
            ellipsis: true,
            align: 'center',
            width: 200,
            hideInSearch: true,
            render: (_: any, record: { status: any; }) => {
                return record?.operator ? record?.operator : '-'
            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            align: 'center',
            fixed: "right",
            hideInSearch: true,
            width: 150,
            render: (_: any, record: any) => {
                return <Space>
                    <a onClick={() => {
                        console.log('record', record);
                        setCurrentRow(record)
                        setOpenAddModal(true)
                    }}>编辑</a>
                    <Popconfirm
                        title={"确认删除？"}
                        onConfirm={() => {
                            console.log('record', record);
                            handleDeleteType(record.id)
                        }}
                    >
                        <a>删除</a>
                    </Popconfirm>

                </Space>
            }
        }
    ]

    // 删除分类
    const handleDeleteType = async (id: number) => {
        let req: any = {
            id: id
        }
        console.log('req', req);
        const data = await handleGetDeleteExamineType(req)
        if (data.Result_Code === 100) {
            message.success('删除成功！')
            actionRef.current?.reload()
        } else {
            message.error(data.Result_Desc)
        }
    }

    // 若children没有值 则变为null
    const handleGetNoChildren = (list: any) => {
        if (list && list.length > 0) {
            list.forEach((item) => {
                if (item.children && item.children.length > 0) {
                    item.children = handleGetNoChildren(item.children)
                } else {
                    item.children = null
                }
            })
        }
        return list
    }

    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
                        }}
                        rowKey={(record) => {
                            return `${record?.id}`
                        }}
                        scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
                        headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>考评分类管理</span>}
                        search={{ span: 6 }}
                        request={async (params) => {
                            console.log('params', params);


                            const req = {
                                status: params?.status === '1' ? true : params?.status === '0' ? false : ""
                            }
                            let data = await handleGetExamineTypeTreeList(req)
                            console.log('table', data);
                            if (data && data.length > 0) {
                                data = handleGetNoChildren(data)
                                return { data, success: true }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [
                                <Button type="primary" onClick={(e) => {
                                    console.log('current', currentRow);
                                    setOpenAddModal(true)
                                }}>
                                    新增分类
                                </Button>
                            ]
                        }}
                        columnsState={{
                            value: columnsStateMap,
                            onChange: setColumnsStateMap,
                        }}
                    />
                </div>
            </div>



            <AddBigType parentRow={currentRow} openAddModal={openAddModal}
                setOpenAddModal={setOpenAddModal}
                parentActionRef={actionRef}
                setParentRow={setCurrentRow} />

        </div>
    )
}

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