ProcessModal.jsx

import React, { useEffect, useState } from 'react';
import { Modal, Table, Tooltip, notification, Space, Popconfirm } from 'antd';
import {
    PlusSquareFilled,
    EditTwoTone,
    DeleteOutlined,
} from '@ant-design/icons';
import styles from './incident.less';
import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api';
import AddFlowsModal from './AddFlowsModal'
const ProcessModal = props => {
    const { callBackSubmit = () => { }, title1, visible, onCancel, formObj, maxLength} = props;
    const [tableData, setTableData] = useState([])
    const [addVisible, setAddVisible] = useState(false)
    const [isType, setIsType] = useState(''); // 弹窗类型
    const [record1, setRecord1] = useState('')
    const [obj, setObj] = useState('')
    const [flag, setFlag] = useState(0)


    const columns = [
        {
            title: () => (<span style={{fontWeight:'bold'}}>流程名称</span>),
            dataIndex: 'FlowName',
            key: 'FlowName',
            width: 150,
            ellipsis: true,
            // render: item => (
            //     <div
            //         ref={r => {
            //             if (r) {
            //                 r.innerHTML = item;
            //             }
            //         }}
            //     />
            // )
        }
        ,
        {
            title: () => (<span style={{fontWeight:'bold'}}>受理权限</span>),
            dataIndex: 'FlowRoles',
            key: 'FlowRoles',
            width: 400,
            ellipsis: true,
            // render: item => (
            //     <div
            //         ref={r => {
            //             if (r) {
            //                 r.innerHTML = item;
            //             }
            //         }}
            //     />
            // )
        },
        {
            title: () => (<span style={{fontWeight:'bold'}}>操作</span>),
            key: 'action',
            aligin: 'center',
            render: record => (
                <Space size="middle">

                    <Tooltip title="编辑用户">
                        <EditTwoTone
                            onClick={() => editEventType(record)}
                            style={{ fontSize: '16px' }}
                        />
                    </Tooltip>
                    <Tooltip title="删除">
                        <Popconfirm
                            placement="bottomRight"
                            title={
                                <p>
                                    即将删除事件流程，是否确认删除？
                                </p>
                            }
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => deleteEventType(record)}
                        >
                            <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                        </Popconfirm>
                    </Tooltip>
                </Space>
            )

        }
    ]

    useEffect(() => {
        GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
            if (res.msg === 'Ok') {
                console.log(res.data)
                setTableData(res.data)
            }
        })
    },[visible,flag])
    const addIncident = () => {
        console.log(formObj.ID)
        setObj(formObj.ID)
        setAddVisible(true)
        setIsType('add')
    }
    const editEventType = record => {
        setObj(formObj.ID)
        setRecord1(record)
        setIsType('edit');
        setAddVisible(true)
    }
    const deleteEventType = record => {
        console.log(record)
        CM_Event_RemoveEvenFlow({ eventFlowIds: record.ID }).then(res=>{
            if (res.msg === '') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '删除成功',
                    
                });
                setFlag(flag+1)
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
    }
    const onOK = () => {
        setAddVisible(false)
        GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
            if (res.msg === 'Ok') {
                console.log(res.data)
                setTableData(res.data)
            }
        })
    }
    const onSumbit = () => {
        callBackSubmit()
    }
    return (
        <Modal
            title={`${title1}受理流程和权限`}
            visible={visible}
            width="800px"
            onCancel={onCancel}
            onOk={onSumbit}
            
        >
            <Tooltip title="添加事件类型">
                <PlusSquareFilled
                    onClick={() => addIncident()}
                    style={{
                        color: '#1890FF',
                        fontSize: '25px',
                        verticalAlign: 'middle',
                        marginLeft: '25px',
                        marginBottom: '10px'
                    }}
                />
            </Tooltip>
            <Table
                size="small"
                rowKey='ID'
                bordered
                style={{ height: '15rem', overflowY: 'scroll', width: '700px', marginLeft: '25px' }}
                onRow={record => {
                    return {
                      onDoubleClick: event => {event.stopPropagation(); editEventType(record)}, //双击
                    };
                  }}
                columns={columns}
                dataSource={tableData}
                pagination={false}
            />
            <AddFlowsModal
                visible={addVisible}
                obj={obj}
                formObj={formObj}
                type={isType} 
                record={record1}
                maxLength={maxLength}
                onClose={() => setAddVisible(false)}
                callBackSubmit={onOK}
                placement="right"
            />
        </Modal>
    )
}
export default ProcessModal;