AddStockTransfer.jsx 5.72 KB
import React, { useEffect, useState } from "react"
import { Form, Select, Input, Button, Modal, message, Table, Image, Row, Col } from "antd"
import { SearchOutlined } from "@ant-design/icons"
import { connect } from 'umi'

// import EditableTableHasFooter from "./EditableTableHasFooter"
import useFormTable from '@/useHooks/useFormTable'
import { dicFindUtils, DictBizType } from '@/utils/utils';
import { dispatchHandle } from '@/utils/publicHandle'

import style from "../index.less";

const { Option } = Select

const AddStockTransfer = (props) => {
    const {
        visible,
        setVisible,
        getMaterial,
        outWarehouseId,
        dispatch,
        loading,
        dict: { dicTotalsList },
        allocating: {
            materialList
        }
    } = props;
    const [form] = Form.useForm()
    const [tableData, setTableData] = useState([]); // 单元格可编辑的数据
    const getListItem = (payload = {}) => {
        payload.noCodeLab = false;
        payload.warehouseId = outWarehouseId;
        dispatchHandle(// 物料
            dispatch,
            'allocating/warehouse_service_account_post',
            payload,
            res => {
                setTableData(res)
            }
        )
    }
    const { tableProps, search } = useFormTable(getListItem, {
        form, manual: true
    })
    useEffect(() => {
        if(visible){
            getListItem({pageSize: 5})
        }
    }, [visible])
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, record, index) => <span>{index + 1}</span>
        },
        {
            title: '物料图片',
            dataIndex: ['materialInfo', 'picture'],
            render: text => (
                <Image
                    width="50px"
                    height="50px"
                    src={text || ''}
                    alt=""
                    placeholder={true}
                />
            )
        },
        {
            title: '物料名称',
            dataIndex: ['materialInfo', 'materialCode'],
        },
        {
            title: '品名',
            dataIndex: ['materialInfo', 'materialName'],
        },
        {
            title: '规格/型号',
            dataIndex: ['materialInfo', 'mmodel'],
        },
        {
            title: '供应商',
            dataIndex: ['materialSupplier', 'supplierName'],
        },
        {
            title: '单位',
            dataIndex: ['materialInfo', 'munit'],
        },
        {
            title: '单价(元)',
            dataIndex: ['materialSupplier', 'materialPrice'],
        },
        {
            title: '现有库存',
            dataIndex: 'stockNum',
        },
        {
            title: '调拨金额',
            dataIndex: 'money',
        },
        {
            title: '备注',
            dataIndex: 'remarks',
            render: text => <span>{text || '---'}</span>
        }

    ];
    // 点击确定按钮
    const [selectedIds, setSelectedIds] = useState([])
    const [selectedRow, setSelectedRow] = useState([])
    const rowSelection = {
        selectedRowKeys: selectedIds,
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectedIds(selectedRowKeys)
            setSelectedRow(selectedRows)
        }
    }
    // 添加货品modal显示隐藏
    const handleOk = () => {
        if (selectedRow.length > 0) {
            getMaterial(selectedRow)
            setVisible(false)
        } else {
            message.warn("请选择您需要添加的货品!")
        }
    }
    const handleCancel = () => {
        setVisible(false)
    }
    // const onValuesChange = (a , b) => {
    //     getListItem({...b})
    // }
    const formItemLayout = {
        wrapperCol: {
            span: 18
        },
        labelCol: {
            span: 6
        }
    }
    const materialType = dicFindUtils(dicTotalsList, DictBizType.materielType); //物料类型
    return <Modal
        title="添加货品"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="80%"
        destroyOnClose={true}
        centered={true}
    >
        <div className={style.add_stock_transfer}>
            <Form form={form} onValuesChange={search.submit} className={style.con_search}>
                <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>
            <Table
                loading={loading}
                columns={columns}
                dataSource={materialList.list || []}
                pagination={materialList.pagination}
                rowSelection={rowSelection}
                {...tableProps}
            />
        </div>
    </Modal>
}

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