import React, { useContext, useState, useEffect, useRef } from 'react'; import { Form, Card, Tabs, Badge, Spin, Row, Col, Input, Select, Button, Table, InputNumber, message, Alert, } from 'antd'; import { DownloadOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'; import OperateFooterBar from '@/components/Table/OperateFooterBar'; import utilsStyles from '@/utils/utils.less'; import { isInteger } from '@/utils/common'; import { connect, history } from 'umi'; import style from '../index.less' const EditableContext = React.createContext(); const EditableRow = ({ index, ...props }) => { const [form] = Form.useForm(); return ( <Form form={form} component={false}> <EditableContext.Provider value={form}> <tr {...props} /> </EditableContext.Provider> </Form> ); }; const EditableCell = ({ title, editable, children, dataIndex, record, handleSave, ...restProps }) => { const [editing, setEditing] = useState(false); const inputRef = useRef(); const form = useContext(EditableContext); useEffect(() => { if (editing) { inputRef.current.focus(); } }, [editing]); const toggleEdit = () => { setEditing(!editing); form.setFieldsValue({ [dataIndex]: record[dataIndex], }); }; const save = async (e) => { try { const values = await form.validateFields(); toggleEdit(); handleSave({ ...record, ...values }); } catch (errInfo) { console.log('保存失败:', errInfo); } }; let childNode = children; if (editable) { childNode = editing ? ( <Form.Item style={{ marginBottom: 0, }} name={dataIndex} className={style.explain_error} help='' rules={[ { required: true, message: `${title} 不能为空`, }, ]} > <InputNumber ref={inputRef} onPressEnter={save} onBlur={save} placeholder="请输入数量" style={{width: '100%'}}/> </Form.Item> ) : ( <div className="editable-cell-value-wrap" style={{ padding: '4px 14px', lineHeight: '22px', border: '1px solid #cbcbcb', textAlign: 'center', }} onClick={toggleEdit} > {children} </div> ); } return <td {...restProps}>{childNode}</td>; }; const TableEditHasCode = (props) => { const { tableData, setTableData, optColumns, setSelectedKeys, hasFooter , selectedRowKeys , totalMoney , setSelectedRow } = props; const rowSelection = { onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); setSelectedKeys(selectedRowKeys) setSelectedRow(selectedRows) }, onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); }, onSelectAll: (selected, selectedRows, changeRows) => { console.log(selected, selectedRows, changeRows); }, }; const components = { body: { row: EditableRow, cell: EditableCell, }, }; const handleSave = (row) => { const newData = [...tableData]; const index = newData.findIndex((item) => row.key === item.key); const item = newData[index]; //这里需要修改字段 if (!isInteger(row.num)) { message.info('需求数量必须是正整数!', 1.5); return false; } row.isAbove = parseInt(row.num) > parseInt(row.i) ? true : false; //判断是否有没有超过库存的数字 newData.splice(index, 1, { ...item, ...row }); console.log(`best newData is:`, newData); setTableData(newData); }; const columns = optColumns.map((col) => { if (!col.editable) { return col; } return { ...col, onCell: (record) => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave: handleSave, }), }; }); const handleClose = {}; const handleSubmit = {}; const winW = window.innerWidth; return ( <> <div style={{ paddingBottom: 20 }}> <Table rowKey={(record) => record.id} rowSelection={{ ...rowSelection }} components={components} rowClassName={(record, index) => { return `editable-row ${record.isAbove ? utilsStyles.aboveTr : ''}`; }} dataSource={tableData} scroll={{ x: winW < 1400 ? '130%' : '105%', }} pagination={[]} columns={columns} className="custom-table-setting" footer={hasFooter && (() => { return ( <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} > <div className="spaceLeft"> <span style={{ fontSize: 14 }}> 已选数量<span style={{ margin: '0 10px', color: '#5ca6f3' }}>{(selectedRowKeys && selectedRowKeys.length) || 0}</span>项 </span> <span style={{ marginLeft: 60 }}>{`总价格:${totalMoney || 0}`}元</span> </div> {/* <div className="spaceRight"> <Alert type="warning" message="物料超出库存的部分进入采购阶段请耐心等待" showIcon /> </div> */} </div> ); })} /> </div> {/* <OperateFooterBar handleClose={handleClose} handleSubmit={handleSubmit} /> */} </> ); }; export default connect(({ ware, loading }) => ({ ware, loading }))(TableEditHasCode);