11111

src/components/EditableFormItem/index.jsx

@@ -0,0 +1,47 @@
+import consts from '@/basic/consts'
+import { apiUpdateContract } from '@/services/contact'
+import { Input, Form } from 'antd'
+import React, { useState, useEffect, useRef } from 'react'
+import './index.less'
+
+const EditableFormItem = ({ children, dataIndex, record }) => {
+  const [editing, setEditing] = useState(false)
+  const inputRef = useRef(null)
+  useEffect(() => {
+    if (editing) {
+      inputRef.current.focus()
+    }
+  }, [editing])
+
+  const toggleEdit = () => {
+    setEditing(!editing)
+  }
+
+  const handleConfirm = async value => {
+    const { code = -1 } = await apiUpdateContract({ [dataIndex]: value })
+    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)
+    }
+  }
+
+  return editing ? (
+    <Form.Item name={dataIndex} noStyle initialValue={record}>
+      <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+    </Form.Item>
+  ) : (
+    <div className="editable-cell-value-wrap" onClick={toggleEdit}>
+      {children}
+    </div>
+  )
+}
+
+export default EditableFormItem

src/components/EditableFormItem/index.less

@@ -0,0 +1,10 @@
+.editable-cell-value-wrap {
+  padding: 5px 12px;
+  cursor: pointer;
+}
+
+.editable-cell-value-wrap:hover {
+  padding: 4px 11px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}

src/components/Editcell/index.jsx

@@ -1,81 +0,0 @@
-import { Input, Form } from 'antd'
-import React, { useState, useEffect, useRef } from 'react'
-import { connect } from 'dva'
-
-const EditableCell = ({
-  title,
-  editable,
-  children,
-  dataIndex,
-  record,
-  handleSave,
-  ...restProps
-}) => {
-  const [editing, setEditing] = useState(false)
-  const inputRef = useRef(null)
-  const [form] = Form.useForm()
-  useEffect(() => {
-    if (editing) {
-      inputRef.current.focus()
-    }
-  }, [editing])
-
-  const toggleEdit = () => {
-    setEditing(!editing)
-    form.setFieldsValue({
-      [dataIndex]: record[dataIndex]
-    })
-  }
-
-  const save = async () => {
-    try {
-      const values = await form.validateFields()
-      toggleEdit()
-      handleSave({ ...record, ...values })
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo)
-    }
-  }
-
-  let childNode = children
-  if (editable) {
-    childNode = editing ? (
-      <Form form={form}>
-        <Form.Item name={dataIndex} rules={[{ required: true, message: `${title} is required.` }]}>
-          <Input ref={inputRef} onPressEnter={save} onBlur={save} />
-        </Form.Item>
-      </Form>
-    ) : (
-      <div
-        className="editable-cell-value-wrap"
-        style={{
-          paddingRight: 24
-        }}
-        onClick={toggleEdit}>
-        {children}
-      </div>
-    )
-  }
-
-  return <td {...restProps}>{childNode}</td>
-}
-
-const Editcell = props => {
-  return (
-    <div>
-      <Form name="basic">
-        <Form.Item label="Username" name="username">
-          <Input />
-        </Form.Item>
-        <Form.Item label="Password" name="Password">
-          <Input.Password />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}
-
-export default connect(({ district, loading }) => ({
-  options: district.data,
-  loadingDistrict: loading.effects['district/fetch']
-}))(Editcell)

src/components/Editcell/index.less

@@ -1,18 +0,0 @@
-.editable-cell {
-  position: relative;
-}
-
-.editable-cell-value-wrap {
-  padding: 5px 12px;
-  cursor: pointer;
-}
-
-.editable-row:hover .editable-cell-value-wrap {
-  padding: 4px 11px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
-  border: 1px solid #434343;
-}

src/pages/Customer/Company/index.jsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import { Card } from 'antd'
-import LazyCascader from '@/components/LazyCascader'
-import Editcell from '@/components/Editcell'
+import { Form } from 'antd'
+import EditableFormItem from '@/components/EditableFormItem'
 
 const Company = () => {
   return (
     <Card bordered={false}>
-      dasdasddad
-      <br/>
-      <br/>
-      <LazyCascader />
-      <div className="zh-pd-20">
-        <Editcell />
-      </div>
+      <Form>
+        <Form.Item label="name">
+          <EditableFormItem dataIndex="name" record="哈哈哈哈哈哈">
+            哈哈哈哈哈哈
+          </EditableFormItem>
+        </Form.Item>
+      </Form>
     </Card>
   )
 }

src/services/contact.js

@@ -6,11 +6,11 @@ import consts from '@/consts'
  * @param {*} payload 载荷
  */
 export async function queryContact(payload) {
-    const params = { page: 1, size: consts.PAGE_SIZE, ...payload }
-    const data = await request('/api/client/list', {
-        params: { ...params }
-    })
-    return data
+  const params = { page: 1, size: consts.PAGE_SIZE, ...payload }
+  const data = await request('/api/client/list', {
+    params: { ...params }
+  })
+  return data
 }
 
 /**
@@ -18,7 +18,16 @@ export async function queryContact(payload) {
  * @param {string} id 联系人记录id
  */
 export async function apiContactDetail(id) {
-    const params = { id }
-    const data = await request('/api/client/detail', { params })
-    return data
+  const params = { id }
+  const data = await request('/api/client/detail', { params })
+  return data
+}
+
+/**
+ * 更新联系人
+ * @param {*} payload 载荷
+ */
+export async function apiUpdateContract(payload) {
+  const data = await request.post('/api/client/update', { data: { ...payload } })
+  return data
 }