AddSparePartModal.jsx

import React, { useState, useEffect } from "react"
import { Card, Form, Row, Col, Input, Tabs, Button, Table, Tag, Divider, Modal, Popconfirm, Tooltip, Select, TreeSelect } from "antd"
import { connect } from 'umi'

import { SearchOutlined } from "@ant-design/icons"
import { dispatchHandle } from "@/utils/publicHandle";
import useFormTable from '@/useHooks/useFormTable';
import { dicFindUtils, DictBizType } from '@/utils/utils'

import style from "../index.less"

const { TabPane } = Tabs;
const { TextArea, Search } = Input
const { Option } = Select

const AddSparePartModal = (props) => {
    const {
        dispatch,
        visible,
        loading,
        setVisible,
        id,
        searches,
        systemData,
        type,
        dict: {
            dicTotalsList
        },
        maintaining: {
            materialList,
            deviceSystemList,
            supplierList
        }
    } = props;
    const [form] = Form.useForm()
    const data = [{ name: "1" }, { name: "2" }]
    const getListItem = (payload = {}) => {
        payload.noCodeLab = false;
        dispatchHandle(
            dispatch,
            'maintaining/warehouse_service_account_post',
            payload
        )
    }
    const { tableProps, search } = useFormTable(getListItem, {
        form
    })
    // 新增备件列表
    const sparePartColumns = [
        {
            title: '物料编号',
            dataIndex: ['materialInfo', 'materialCode'],
            key: 'id',
        },
        {
            title: '品名',
            dataIndex: ['materialInfo', 'materialName'],
            key: 'name',
        },
        {
            title: '类型',
            dataIndex: ['materialInfo', 'materialType'],
            key: 'type',
        },
        {
            title: '品牌',
            dataIndex: ['materialSupplier', 'brand'],
            key: 'brand',
        },
        {
            title: '规格',
            dataIndex: ['materialInfo', 'mmodel'],
            key: 'specs',
        },
        {
            title: '单位',
            dataIndex: ['materialInfo', 'munit'],
            key: 'unit',
        },
        {
            title: '库存数量',
            dataIndex: 'stockNum',
            key: 'inventoryNum',
            render: text => <a style={{ color: '#138900' }}>{text}</a>
        },
        {
            title: '单价(元)',
            dataIndex: ['materialSupplier', 'materialPrice'],
            key: 'unitPrice',
            render: text => <a style={{ color: '#138900' }}>{text}</a>
        },
        {
            title: '供应商',
            dataIndex: ['materialSupplier', 'supplierName'],
            key: 'supplier',
        },
        // {
        //     title: '操作',
        //     key: 'action',
        //     fixed: 'right',
        //     align: 'center',
        //     dataIndex: 'action',
        //     render: (text, record) => <Popconfirm title='确定移除此项？' onConfirm={() => deleteConfirm(record)}>
        //         <a style={{ color: '#138900' }}>移除</a>
        //     </Popconfirm>

        // },

    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState([])// 选中的行的key值
    const [selectedRow, setSelectedRow] = useState([])// 选中的行
    // 新增备件table所选项发生变化
    const newRowSelections = {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys);
            setSelectedRow(selectedRows)
        }
    }
    const [confirmLoading, setConfirmLoading] = useState(false)
    const sparePartHandleOk = () => {
        setConfirmLoading(true)
        const list = selectedRow.map(i => ({
            materielId: i?.materialInfoId,
            planNumber: id
        }))
        const payload = {
            list,
            planNumber: id
        }
        dispatchHandle(
            dispatch,
            'maintaining/operation_service_m_curing_plan_addMaterie_patch',
            payload,
            () => {
                setVisible(false)
                setConfirmLoading(false)
                searches.submit()
            }
        )
    };
    const sparePartHandleCancel = () => {
        setVisible(false)
        setConfirmLoading(false)
    };
    const formItemLayout = {
        wrapperCol: {
            span: 18
        },
        labelCol: {
            span: 6
        }
    }
    // 设备类型
    const deviceType = dicFindUtils(dicTotalsList, DictBizType.deviceType);
    const materialType = dicFindUtils(dicTotalsList, DictBizType.materielType); //物料类型
    return <Card className={style.spare_part_modal
    } >
        <Modal
            confirmLoading={confirmLoading}
            title="添加备件"
            visible={visible}
            onOk={sparePartHandleOk}
            onCancel={sparePartHandleCancel}
            width='80%'
            className={style.add_new_spare_part}
            getContainer={false}
        >
            <Form form={form} onValuesChange={search.submit} style={{ padding: '9px 0' }}>
                <Row>
                    <Col span={10}>
                        <Form.Item label="物料类型" name="materialType" {...formItemLayout}>
                            <Select placeholder="请选择" allowClear>
                                {materialType && materialType.map(item => {
                                    return <Option value={item.id} key={item.id}>
                                        {item.dicValue}
                                    </Option>
                                })}
                            </Select>
                        </Form.Item>

                    </Col>
                    <Col span={10}>
                        <Form.Item label="物料品名" name="search" {...formItemLayout}>
                            <Input placeholder="请输入" suffix={<SearchOutlined style={{ color: '#d1d1d1' }} />} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Divider style={{ margin: "0 0 10px" }} />
            <Table
                loading={loading}
                columns={sparePartColumns}
                dataSource={materialList.list}
                rowSelection={newRowSelections}
                scroll={{
                    x: 1300
                }}
                pagination={materialList.pagination}
                {...tableProps}
                footer={() => {
                    return (
                        <div
                            style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}
                        >
                            <span style={{ fontSize: 14 }}>
                                已选数量：<span style={{ margin: '0 10px', color: '#5ca6f3' }}>{selectedRowKeys.length}</span>
                            </span>
                        </div>
                    );
                }}
            />
            {/* <p className={style.selected_num}><span>已选数量：</span><i>{selectedRowKeys.length}</i></p> */}
        </Modal>
    </Card >
}

export default connect(({ maintaining, dict, loading }) => ({
    dict,
    maintaining,
    loading: loading.effects['maintaining/warehouse_service_account_post']
}))(AddSparePartModal)