可编辑表格组件

export default withError(() => {
  const { t } = useTranslation();
  const [searchForm] = Form.useForm();
  const { getContactDeptList } = useContactActions();

  const [data, setData] = useState([]);

  // 组织机构树
  const contactList = useSelector<ReduxState, any>((state) => state.contact?.contactList)

  const [deptId, setDeptId] = useState<number>(0);
  // 列表

  const [orderDaily, setOrderDaily] = useState(moment().format("YYYYMMDD"))

  // console.log("EditModelMemo");
  const [form] = Form.useForm();


  useEffect(() => {
    // tree树
    if (!contactList) {
      getContactDeptList();
    }

  }, []);


  const { saveDeptDailyCapacity } = deptDailyCapacityActions()


  const reload = () => {
    const params = {
      deptId,
      orderDaily
    };
    console.log('148', params);
    fetchErpOderList(params).then(res => {
      console.log('140', res);
      unstable_batchedUpdates(() => {
        setData(res)
      })
    }).catch(e => {
      console.log('141', e);

    })
  }



  //获取所有
  useEffect(() => {
    if (deptId > 0)
      reload();
  }, [deptId, orderDaily]);



  const onSelect = (val) => {
    setOrderDaily(val.format('YYYYMMDD'))
  };


  // tree数据加载
  const handleSelectTree = (deptId, e) => {
    setDeptId(deptId);
    setData(null);
  };

  const columns: ProColumns[] = [
    {
      title: '类别',
      dataIndex: 'erpJewelryProductTypeName',
      editable: false,
    },
    {
      title: '已经生产数量',
      dataIndex: 'capacity',
      editable: false,
    },
    {
      title: '产能上限',
      dataIndex: 'capacityLimit',
      valueType: 'text',
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, row, __, action) => [
        <a
          key="edit"
          onClick={() => {
            action?.startEditable?.(row.erpJewelryProductType);
          }}
        >
          编辑
        </a>,
      ],
    }
  ]

  return (
    <PageContainer title={false}>
      <ProCard split="vertical">
        <ProCard colSpan="30%">
          <Row gutter={[16, 16]}>
            <Col span={24}>
              <div className={styles.siteCalendar}>
                <Calendar
                  fullscreen={false}

                  onSelect={onSelect}
                />
              </div>
            </Col>
            <Col span={24}>
              <div>
                {contactList?.children?.length > 0 || contactList ? (
                  <Tree
                    virtual={true}
                    className={styles.orgTree}
                    treeData={[contactList]}
                    fieldNames={{
                      title: 'name',
                      key: 'sid',
                    }}
                    icon={(props: any) =>
                      props.sid == 0 ? (
                        <ApartmentOutlined
                          style={{ fontSize: '12px', paddingRight: '20px' }}
                        />
                      ) : (
                        <ForkOutlined
                          rotate={180}
                          style={{ fontSize: '12px' }}
                        />
                      )
                    }
                    showIcon={true}

                    defaultExpandAll
                    selectedKeys={[deptId]}
                    onSelect={(selectedKeys, e) =>
                      handleSelectTree(selectedKeys[0], e)
                    }
                  />
                ) : (
                  <Spin />
                )}
              </div>
            </Col>
          </Row>
        </ProCard>
        <ProCard colSpan="70%">
          <EditableProTable<[]>
            style={{ height: '100%' }}
            cardBordered
            loading={!data}
            rowKey="erpJewelryProductType"
            columns={columns}
            value={data}
            onChange={setData}
            recordCreatorProps={false}
            editable={{
              form,
              onSave: (key, record: any) => {
                console.log(record);
                console.log(key);
                const payload = {
                  deptId,
                  erpJewelryProductType: record.erpJewelryProductType,
                  capacityLimit: record.capacityLimit
                };
                postCapacityEdit(payload)
                saveDeptDailyCapacity(payload)
                return Promise.resolve()
              },
              actionRender: (row, config, dom) => [dom.save, dom.cancel],
            }}


          />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
})