TableEditHasCode.jsx

import React, { useContext, useState, useEffect, useRef } from 'react';
import { connect, history } from 'umi';
import useFormTable from '@/useHooks/useFormTable';
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 { dispatchHandle } from '@/utils/publicHandle';
import utilsStyles from '@/utils/utils.less';
import { isInteger } from '@/utils/common';
import { dicFindUtils,DictBizType,ApproveType } from '@/utils/utils';
const EditableContext = React.createContext();
const { Search } = Input;
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={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: dataIndex ==='remarks' ? false : true,
            message: `${title} 不能为空`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          padding: '4px 14px',
          lineHeight: '20px',
          height: '30px',
          border:'1px solid #d9d9d9'
        }}
        onClick={toggleEdit}
      >
        {children ? children : '请输入'}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

const TableEditHasCode = (props) => {
  const {
    tableData,
    setTableData,
    optColumns,
    dispatch,
    dict: { dicTotalsList },
    onUpdateData,
  } = props;
  // const [ standData, setStandData ] = useState([]);//库存台账
  console.log(`props is:`, props);
  const [selectedRows, setSelectedRows] = useState([]);
  const [form] = Form.useForm();
   const formItemLabel = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setSelectedRows(selectedRows);
      onUpdateData(selectedRows);
    },
    // onSelect: (record, selected, selectedRows) => {
    //   console.log(record, selected, selectedRows);
    // },
    // onSelectAll: (selected, selectedRows, changeRows) => {
    //   console.log(selected, selectedRows, changeRows);
    // },
     getCheckboxProps: (record) => ({
        disabled: !Boolean(record.materialSupplier?.materialPrice),
        name: record.name,
  }),
  };
   const getListItems = (payload = {}) => {
     dispatchHandle(dispatch, 'ware/warehouse_service_account_post', {
      ...payload,
      pageSize:10
     }, (res) => {
        
    });
  };
   // 查询表单
  const { tableProps, search } = useFormTable(getListItems, {
    form,
  });

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  const handleSave = (row) => {
    const { pickList } = props.ware;
    let copyData = pickList && pickList.list;
    const newData = [...copyData];
    const index = newData.findIndex((item) => row.key === item.id);
    const item = newData[index];
    //这里需要修改字段
    if (!isInteger(row.i)) {
      message.info('领取数量必须是整数且大于0!', 1.5);
      return false;
    }
    row.isAbove = parseInt(row.i) > parseInt(row.h) ? true : false; //判断是否有没有超过库存的数字
    newData.splice(index, 1, { ...item, ...row });
    console.log(`best newData is:`, newData);
    // //变更后的当前list,然后重新搞成分页的
    let tempData = {
      list: newData,
      pagination:pickList.pagination
    }
     dispatchHandle(dispatch, 'ware/setModelsState', { pickList: tempData });
  };

  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,
      }),
    };
  });
  console.log(`columns now is:`, columns);
  const handleClose = {};
  const handleSubmit = {};
  const winW = window.innerWidth;

 

  // useEffect(() => {
  //     //发生变更
  //   let wareList = props.ware.wareList;
  //   console.log(`wareList is:`, wareList);
  //   let tempTableData = {
  //     list: wareList.list,
  //     pagination:wareList.pagination
  //   };
  //   console.log(tempTableData);
  //   setStandData(tempTableData);
  // }, [props.ware.wareList]);
   const {
      ware: { pickList },
      loading,
  } = props;
  console.log(`pickList is:`, pickList);
    const materialType = dicFindUtils(dicTotalsList, DictBizType.materielType); //物料类型
  return (
    <>
      <div style={{ paddingBottom: 20 }}>
        <Form form={form} onValuesChange = {search.submit}>
                <Row>
                    <Col span={12} >
                        <Form.Item label="物料类型" {...formItemLabel} name="materialType">
                            <Select value="全部" allowClear placeholder='请选择'>
                                  { materialType && materialType.map(item => {
                                      return <Select.Option value={item.id} key={item.id}>
                                          {item.dicValue}
                                        </Select.Option>
                                  })}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={12} >
                        <Form.Item label="物料品名" {...formItemLabel} name='search'>
                            <Search placeholder ='请输入' allowClear />
                        </Form.Item>
                     </Col>
               </Row>
           </Form> 
        <Table
          rowKey={(record) => record.id}
          rowSelection={{ ...rowSelection }}
          components={components}
         {...tableProps}
          rowClassName={(record, index) => {
            return `editable-row ${record.isAbove ? utilsStyles.aboveTr : ''}`;
          }}
          dataSource={pickList.list}
          scroll={{
            x: winW < 1400 ? '130%' : '100%',
          }}
          pagination={pickList.pagination}
          columns={columns}
          className="custom-table-setting"
          // footer={() => {
          //   return (
          //     <div
          //       style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
          //     >
          //       <div className="spaceLeft">
          //         <span style={{ fontSize: 14 }}>
          //           已选择<span style={{ margin: '0 10px', color: '#5ca6f3' }}>2</span>项
          //         </span>
          //         <span style={{ marginLeft: 60 }}>总价格：3000000</span>
          //       </div>
          //       <div className="spaceRight">
          //         <Alert
          //           type="warning"
          //           message="物料超出库存的部分进入采购阶段请耐心等待"
          //           showIcon
          //         />
          //       </div>
          //     </div>
          //   );
          // }}
        />
      </div>
      {/* <OperateFooterBar handleClose={handleClose} handleSubmit={handleSubmit} /> */}
    </>
  );
};
export default connect(({ ware,dict,loading }) => ({
  ware,dict,
  loading
}))(TableEditHasCode);