111

src/components/EditableFormItem/index.jsx

@@ -1,12 +1,13 @@
 import consts from '@/basic/consts'
 import { apiUpdateContract } from '@/services/contact'
-import { Input, Form, Row, Col } from 'antd'
+import { Input, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import './index.less'
 
-const EditableFormItem = ({ label, dataIndex, record }) => {
+const EditableFormItem = ({ label, dataIndex, record, dataId, width = '100%' }) => {
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
+  const [val, setVal] = useState(record)
   useEffect(() => {
     if (editing) {
       inputRef.current.focus()
@@ -18,33 +19,34 @@ const EditableFormItem = ({ label, dataIndex, record }) => {
   }
 
   const handleConfirm = async value => {
-    const { code = -1 } = await apiUpdateContract({ [dataIndex]: value })
+    const { code = -1 } = await apiUpdateContract({ [dataIndex]: value, id: dataId })
     if (code === consts.RET_CODE.SUCCESS) {
       toggleEdit()
     }
   }
   const save = async e => {
     const { value = '' } = e.currentTarget
-    try {
-      toggleEdit()
-      await handleConfirm(value)
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo)
+    toggleEdit()
+    if (value === val) {
+      return
     }
+    setVal(value)
+    await handleConfirm(value)
   }
 
   const cell = editing ? (
     // <Form.Item name={dataIndex} noStyle initialValue={record}>
     //   <Input ref={inputRef} onPressEnter={save} onBlur={save} />
     // </Form.Item>
-    <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+    <Input ref={inputRef} onPressEnter={save} onBlur={save} value={val} />
   ) : (
     <div className="editable-cell-value-wrap" onClick={toggleEdit}>
       {record}
     </div>
   )
+
   return (
-    <Row>
+    <Row style={{ width }}>
       <Col span={2} className="zh-text-right zh-mg-bottom-8">
         <span className="zh-lh-32 zh-mg-right-10">{label}:</span>
       </Col>

src/components/EditableForm/index.jsx

@@ -0,0 +1,6 @@
+import EditableForm from './editableForm'
+import EditableFormItem from './editableFormItem'
+
+export default EditableForm
+
+export { EditableFormItem }

src/pages/Customer/Company/index.jsx

@@ -1,13 +1,56 @@
 import React from 'react'
 import { Card } from 'antd'
-import { Form } from 'antd'
-import EditableFormItem from '@/components/EditableFormItem'
+import EditableForm, { EditableFormItem } from '@/components/EditableForm'
 
 const Company = () => {
+  //   const labelMap = {
+  //     address: "地址",
+  // clientname: """,
+  // companyId: "c",
+  // companyname: null,
+  // createTime: "2021-02-09",
+  // department: null,
+  // district: null,
+  // email: "",
+  // fax: null,
+  // gender: "男",
+  // id: "MczlAdziNdzcIpO0O0O",
+  // keynum: null,
+  // landmarks: "",
+  // local: null,
+  // mark: "",
+  // nicename: "",
+  // office: null,
+  // position: null,
+  // priority: 5,
+  // qq: "",
+  // ride: "",
+  // servicetime: null,
+  // staffId: "NcDlEdO0O0Oi",
+  // staffName: "蔡频",
+  // stay: "",
+  // tag: null,
+  // telephone: "",
+  // tooltip: null,
+  // unit: null,
+  // webservice: null
+  //   }
+  //   const keys = []
   return (
     <Card bordered={false}>
-      <EditableFormItem label="名字" dataIndex="name" record="哈哈哈哈" />
-      <EditableFormItem label="联系人地址" dataIndex="name" record="哈哈大大的哈哈" />
+      {/* <EditableForm>
+        {keys.map(key => {
+          <EditableFormItem label={labelMap[key]} dataIndex={key} record={client[key]} />
+        })}
+      </EditableForm> */}
+      <div>
+        <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
+        <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
+        <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
+        <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
+        <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
+        <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
+      </div>
     </Card>
   )
 }