StaTermAssociated.jsx

import { Card, Row, Form, Modal, Col, Select, Button, Table, Divider, Popconfirm } from 'antd';
import React, { useState, useEffect } from 'react';
import { PlusOutlined, ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import AssociatedModal from '../Modal/AssociatedModal';
import useFormTable from '@/useHooks/useFormTable';
import { dispatchHandle } from '@/utils/publicHandle';
import useUpdateEffect from '@/useHooks/useUpdateEffect';
import { connect,useRequest } from 'umi';


const { confirm } = Modal;

const StaTermAssociated = (props) => {
    const {type} = props;

    const [form] = Form.useForm();
    const [selectIds, setSelectIds] = useState([]);
    const [modalVisible, setModalVisibal] = useState(false);
    const [modalType, setModalType] = useState('');
    const [changeOption, setChangeOption] = useState(1);

    const {
        dispatch,
        idItem,
        standardId,
        opsInspection: { inspectionRelationList, inspectionDetails }
    } = props;
  
    //关联表 列表
    const getListItems = (payload = {}) => {
        payload.standardId = idItem
        dispatchHandle(
            dispatch,
            'opsInspection/operation_service_m_standard_equipment_relation_pageList_post',
            payload
        )
    }
    const { tableProps, search } = useFormTable(getListItems, {
        form,
    });
 

    //表格删除
    const itemDelete = id => {
        dispatchHandle(
            dispatch, 
            'opsInspection/operation_service_m_standard_equipment_relation_delete_post',
             [id], 
             () => {
            search.refresh();
        });
    };
    const StandardDelete = () => {
        const payload=selectIds
        confirm({
            //centered: true,
            title: '删除提示',
            content: '是否删除关联设备',
            onOk() {
                dispatchHandle(
                    dispatch,
                    'opsInspection/operation_service_m_standard_equipment_relation_delete_post',
                    payload,
                   () => {
                        search.refresh()
                    });
            },
        });
    }

    const handleAdd = () => {
        setModalVisibal(true);
        setModalType('standard')
    }

    const handleCancel = () => {
        setModalVisibal(false);
        //重新取值
        
    }
    const ChangeOptions = (value) => {
        setChangeOption(value)
    }

    const rowSelection = {
        selectedRowKeys: selectIds,
        onChange: (selectedRowKeys,) => {
            setSelectIds(selectedRowKeys);
        }
    };
   
    console.log(`selectIds555 is`, selectIds)
    let columnsEquip = [
        {
            title: '序号', dataIndex: 'index', key: 'index',
            render: (text, record, index) => <span>{index + 1}</span>
        },
        {
            title: '设备编号', dataIndex: 'nodeNumber',
        },
        {
            title: '财产编码', dataIndex: 'belongingsCode',
        },
        {
            title: '设备名称', dataIndex: 'nodeName',
        },
        { title: '类型', dataIndex: 'nodeType', },
        { title: '设备系统', dataIndex: 'belongingSystem', },
        { title: '建筑', dataIndex: 'buildingName' },
        { title: '型号规格', dataIndex: 'model'},
        { title: '在用客户', dataIndex: 'activeCustomersName' },
    ];
    if(type !== 'view') {
        columnsEquip = [
            ...columnsEquip,
            {
                title: '操作', dataIndex: 'option7', key: 'option7',
                render: (text,record) => {
                        return (
                        <>
                        <Popconfirm title="确认移除此关联设备吗?" onConfirm={() => itemDelete(record.id)}>
                            <a>移除</a>
                        </Popconfirm>
                        
                    </>
                    )}
                ,
            }
        ]
    };
    return (
        <div >
            <Card style={{ marginTop: '15px' }}>
                <h3 style={{ marginBottom: '20px' }} >| 标准关联设备</h3>
                {
                    type !=='view' && <Form form={form} onFinish={search.submit} style={{ marginTop: '10px' }}>
                        <Row>
                            <Col span={10}>
                                <Form.Item label='' style={{ marginBottom: '5px' }}>
                                    <Button type='primary' onClick={handleAdd} style={{ marginRight: '15px' }}><PlusOutlined />添加</Button>
                                    <Button type="default" onClick={StandardDelete} danger style={{ marginRight: '15px' }}>移除</Button>
                                    {/* <Button >导入</Button> */}
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                }
                <Table
                    bordered
                    rowSelection={ type !== 'view' ? rowSelection : null }
                    columns={columnsEquip}
                    dataSource={inspectionRelationList.list}
                    pagination={inspectionRelationList.pagination}
                    rowKey={record => record.id}
                    {...tableProps}
                />
            </Card>
            <AssociatedModal
                addVisible={modalVisible}
                handleClose={handleCancel}
                onFinish={search.submit}
                getContainer={false}
                modalType='standard'
            />
        </div>
    )
}

export default connect(({ opsInspection, loading }) => ({
    opsInspection,
    loading: loading.models.opsInspection
}))(StaTermAssociated);