11111

src/components/EditableForm/editableForm.jsx

@@ -0,0 +1,17 @@
+import { Row } from 'antd'
+import React from 'react'
+import EditableFormItem from './EditableFormItem'
+
+
+const EditableForm = ({ dataSource, columns }) => {
+
+  return (
+      <Row>
+        {columns.map(column => (
+          <EditableFormItem key={column.dataIndex} label={column.label} dataIndex={column.dataIndex} record={dataSource[column.dataIndex]} span={column.span || 24 }/>
+        ))}
+      </Row>
+  )
+}
+
+export default EditableForm

src/components/EditableForm/editableFormItem.jsx

@@ -4,7 +4,7 @@ import { Input, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import './index.less'
 
-const EditableFormItem = ({ label, dataIndex, record, dataId, width = '100%' }) => {
+const EditableFormItem = ({ label, dataIndex, record, dataId, span = 24 }) => {
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
   const [val, setVal] = useState(record)
@@ -46,12 +46,14 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, width = '100%' })
   )
 
   return (
-    <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>
-      <Col span={22}>{cell}</Col>
-    </Row>
+    <Col span={span}>
+      <Row>
+        <Col span={2} className="zh-text-right zh-mg-bottom-8">
+          <span className="zh-lh-32 zh-mg-right-10">{label}:</span>
+        </Col>
+        <Col span={22}>{cell}</Col>
+      </Row>
+    </Col>
   )
 }
 

src/components/EditableForm/index.jsx

@@ -1,5 +1,5 @@
-import EditableForm from './editableForm'
-import EditableFormItem from './editableFormItem'
+import EditableForm from './EditableForm'
+import EditableFormItem from './EditableFormItem'
 
 export default EditableForm
 

src/pages/Customer/Company/index.jsx

@@ -3,47 +3,34 @@ import { Card, Row, Col } from 'antd'
 import EditableForm, { EditableFormItem } from '@/components/EditableForm'
 
 const Company = () => {
-  //   const labelMap = {
-  //     address: "地址",
-  // clientname: "姓名",
-  // companyId: "c",
-  // companyname: "客户名称",
-  // createTime: "2021-02-09",
-  // department: "部门",
-  // district: "联系人地区",
-  // email: "邮箱",
-  // fax: "传真",
-  // gender: "性别",
-  // id: "MczlAdziNdzcIpO0O0O",
-  // keynum: null,
-  // landmarks: "联系人地标",
-  // local: null,
-  // mark: "备注",
-  // nicename: "昵称",
-  // office: "办公室",
-  // position: "职务",
-  // priority: 5,
-  // qq: "QQ",
-  // ride: "联系人乘车",
-  // servicetime: null,
-  // staffId: "NcDlEdO0O0Oi",
-  // staffName: "蔡频",
-  // stay: "联系人住宿",
-  // tag: null,
-  // telephone: "手机",
-  // tooltip: null,
-  // unit: null,
-  // webservice: null
-  //   }
-  //   const keys = []
+
+  const record = {
+    address: '珠海',
+    clientName: '啊实打实大',
+    age: 16
+  }
+
+  const columns = [
+    {
+      dataIndex: 'address',
+      label: '珠海',
+      span: 12
+    },
+    {
+      dataIndex: 'clientName',
+      label: '名字',
+      span: 12
+    },
+    {
+      dataIndex: 'age',
+      label: '年龄'
+    }
+  ]
   return (
     <Card bordered={false}>
-      {/* <EditableForm>
-        {keys.map(key => {
-          <EditableFormItem label={labelMap[key]} dataIndex={key} record={client[key]} />
-        })}
-      </EditableForm> */}
-      <div>
+      <EditableForm dataSource={record} columns={columns} />
+
+      {/* <div>
         <Row>
           <Col span={12}>
             <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
@@ -52,7 +39,7 @@ const Company = () => {
             <EditableFormItem label="名字" dataIndex="name" record="哈哈哈" widhth="50%" />
           </Col>
         </Row>
-      </div>
+      </div> */}
     </Card>
   )
 }