fix: 结算-编辑单价

src/pages/balance/businessReconciliation/readyReconciliation/index.tsx

 import React, { useRef, useState, useCallback } from 'react'
-import { Card, Typography, Space, Button, Table, message } from 'antd'
-import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons'
+import { Card, Typography, Space, Button, Table, message, Form, InputNumber, FormInstance } from 'antd'
+import { CaretRightOutlined, CaretDownOutlined, EditOutlined } from '@ant-design/icons'
 import { ColumnType } from 'antd/lib/table/interface';
 import StandardTable from '@/components/StandardTable';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
@@ -13,13 +13,12 @@ import AuthButton from '@/components/AuthButton';
 import { formatTimeString } from '@/utils'
 import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
 import { priceFormat } from '@/utils/numberFomat'
-import { getSettleAccountsBusinessReconciliationToReconciliationList, getSettleAccountsBusinessReconciliationItemPayType } from '@/services/SettleV2Api'
+import { getSettleAccountsBusinessReconciliationToReconciliationList, getSettleAccountsBusinessReconciliationItemPayType, postSettleAccountsBusinessReconciliationUpdatePrice } from '@/services/SettleV2Api'
 import { createFormActions } from '@formily/antd'
 import { getIntl, history } from 'umi';
 
 import { fetchOptions } from '../../common';
 
-
 const intl = getIntl();
 const { Link, Text } = Typography;
 
@@ -27,8 +26,69 @@ const { Link, Text } = Typography;
 
 const formActions = createFormActions();
 
+
+interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+  form: FormInstance
+  editing: boolean
+  dataIndex: string
+  title: any
+  record: any
+  index: number
+  children: React.ReactNode
+  handleSave: <T>(arg: T) => void
+}
+const EditableCell: React.FC<EditableCellProps> = ({
+  editing,
+  form,
+  dataIndex,
+  title,
+  record,
+  index,
+  children,
+  handleSave,
+  ...restProps
+}) => {
+  const save = async () => {
+    try {
+      const values = await form.validateFields()
+      handleSave({ ...record, ...values })
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo)
+    }
+  }
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <Form.Item
+          name={dataIndex}
+          style={{ margin: 0 }}
+          rules={[
+            {
+              validator: async (_, value) => {
+                const _pattern = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
+                if (!value) {
+                  return Promise.reject(new Error(`${title}不为空或大于0`))
+                }
+                if (!_pattern.test(value)) {
+                  return Promise.reject(new Error('最多保留2位小数'))
+                }
+                return Promise.resolve()
+              },
+            },
+          ]}
+        >
+          <InputNumber onPressEnter={save} onBlur={save} />
+        </Form.Item>
+      ) : (
+        children
+      )}
+    </td>
+  )
+}
+
 const ReadyReconciliation: React.FC = () => {
   const ref = useRef<any>({})
+  const [form] = Form.useForm()
   const [childSelectedRowKeys, setChildSelectedRowKeys] = useState<any>([])
   const [selectedRowKeys, setSelectedRowKeys] = useState<any>([])
   const [childSelectedRows, setChildSelectedRows] = useState<any>([])
@@ -40,6 +100,13 @@ const ReadyReconciliation: React.FC = () => {
     return data
   }
 
+  const [editingKey, setEditingKey] = useState('')
+
+  const isEditing = (record) => `${record?.parentId}_${record?.productId}` === editingKey
+  const handleEdit = (record) => {
+    form.setFieldsValue({ ...record })
+    setEditingKey(`${record?.parentId}_${record?.productId}`)
+  }
   const columns: ColumnType<any>[] = [{
     title: intl.formatMessage({ id: 'balance.dingdanhao' }),
     key: 'billNo',
@@ -98,8 +165,8 @@ const ReadyReconciliation: React.FC = () => {
     dataIndex: 'billTypeName',
     render: (text: any, record: any) => <StatusTag type='primary' title={text} />
   }];
-
-  const childColumns: ColumnType<any>[] = [{
+  
+  const childColumns: (ColumnType<any> & { editable?: boolean })[] = [{
     title: intl.formatMessage({ id: 'balance.jiesuanfangshi' }),
     key: 'payWayName',
     dataIndex: 'payWayName',
@@ -147,7 +214,13 @@ const ReadyReconciliation: React.FC = () => {
     title: `${intl.formatMessage({ id: 'balance.danjia' })}(${intl.formatMessage({ id: 'balance.hanshui' })})`,
     key: 'price',
     dataIndex: 'price',
-    render: (text: any) => priceFormat(text, 5)
+    editable: true,
+    render: (text: any, record) => (
+      <Space>
+        <Typography.Text>{priceFormat(text)}</Typography.Text>
+        <EditOutlined onClick={() => handleEdit(record)} />
+      </Space>
+    ),
   }, {
     title: intl.formatMessage({ id: 'balance.shouhuoshuliang' }),
     key: 'receiveQuantity',
@@ -275,6 +348,38 @@ const ReadyReconciliation: React.FC = () => {
     setChildSelectedRowKeys(childArr);
   }
 
+  const handleSave = (record) => {
+    const param = {
+      billNo: record?.billNo,
+      receiveNo: record?.receiveNo,
+      productNo: record?.productNo,
+      price: record?.price,
+    }
+    postSettleAccountsBusinessReconciliationUpdatePrice(param).then((res) => {
+      if (res.code !== 1000) {
+        return
+      }
+      setEditingKey('')
+      ref.current.reloadCurrent()
+    })
+  }
+  const childEditColumns = childColumns.map((col) => {
+    if (!col.editable) {
+      return col
+    }
+    return {
+      ...col,
+      onCell: (record) => ({
+        record,
+        form,
+        editing: isEditing(record),
+        dataIndex: col.dataIndex,
+        title: col.title,
+        handleSave,
+      }),
+    }
+  })
+
   const handleParentSelectChange = (record, selected, selectedRow, nativeEvent) => {
     let patentArr = [...selectedRowKeys];
     let patentRowArr = [...selectedRows];
@@ -347,18 +452,25 @@ const ReadyReconciliation: React.FC = () => {
 
   const childRenderTable = (record) => {
     return (
-      <Table
-        columns={childColumns}
-        size="middle"
-        dataSource={record['products'] || []}
-        rowKey='productId'
-        rowSelection={{
-          selectedRowKeys: childSelectedRowKeys,
-          onSelect: handleChildSelectChange,
-          onSelectAll: handleChildSelectAll,
-        }}
-        pagination={false}
-      />
+      <Form form={form} component={false}>
+        <Table
+          components={{
+            body: {
+              cell: EditableCell,
+            },
+          }}
+          columns={childEditColumns as (ColumnType<any> & { editable?: boolean })[]}
+          size="middle"
+          dataSource={record['products'] || []}
+          rowKey='productId'
+          rowSelection={{
+            selectedRowKeys: childSelectedRowKeys,
+            onSelect: handleChildSelectChange,
+            onSelectAll: handleChildSelectAll,
+          }}
+          pagination={false}
+        />
+      </Form>
     )
   }
 
@@ -396,10 +508,7 @@ const ReadyReconciliation: React.FC = () => {
         orderNo: selectedRows[key].billNo,
       };
       const _products = [];
-      console.log(_item.products, '_item.products')
-      console.log(selectedRows, 'childKey1')
       for (let childKey in _item.products) {
-        console.log(selectedRows, 'childKey2')
         if (childSelectedRowKeys.includes(_item.products[childKey].productId)) {
           _products.push({ ..._item.products[childKey], expectPayTime: formatTimeString(_item.products[childKey]?.expectPayTime, 'YYYY-MM-DD') });
         }
@@ -409,7 +518,6 @@ const ReadyReconciliation: React.FC = () => {
         _rows.push(_item);
       }
     }
-    console.log(_rows)
     history.push('/memberCenter/balance/businessReconciliation/readyAdd/add', { rows: _rows })
   }