添加联系人框架修改+联系人form表单的修改

src/components/EditableForm/editableFormItem.jsx

@@ -54,10 +54,10 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span = 24 }) => {
   return (
     <Col span={span}>
       <Row>
-        <Col span={2} className="zh-text-right zh-mg-bottom-8">
+        <Col flex="100px" 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>
+        <Col flex="auto">{cell}</Col>
       </Row>
     </Col>
   )

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -1,5 +1,6 @@
 import { Form, Row, Col, Input, Button, Cascader, Select, Tag } from 'antd'
 import React, { useEffect,useRef,useState } from 'react'
+import EditableForm from '@/components/EditableForm'
 // eslint-disable-next-line import/no-unresolved
 // import '../Contacts/index.scss'
 
@@ -7,10 +8,113 @@ const ContanctForm = props => {
   const actionRef = useRef()
   const [form] = Form.useForm()
   const { client } = props
+  const record = {
+    clientname: '啊实打实大',
+    address: '珠海',
+    age: 16
+  }
+
+  const columns = [
+    {
+      dataIndex: 'clientname',
+      label: '姓名',
+      span: 24
+    },
+    {
+      dataIndex: 'companyname',
+      label: '客户名称',
+      span: 24
+    },
+    {
+      dataIndex: 'gender',
+      label: '性别',
+      span: 12
+    },
+    {
+      dataIndex: 'nicename',
+      label: '昵称',
+      span: 12
+    },
+    {
+      dataIndex: 'telephone',
+      label: '手机',
+      span: 12
+    },
+    {
+      dataIndex: 'qq',
+      label: 'QQ',
+      span: 12
+    },
+    {
+      dataIndex: 'phone',
+      label: '电话',
+      span: 12
+    },
+    {
+      dataIndex: 'email',
+      label: '邮箱',
+      span: 12
+    },
+    {
+      dataIndex: 'fax',
+      label: '传真',
+      span: 12
+    },
+    {
+      dataIndex: 'department',
+      label: '部门',
+      span: 12
+    },
+    {
+      dataIndex: 'position',
+      label: '职务',
+      span: 12
+    },
+    {
+      dataIndex: 'office',
+      label: '办公室',
+      span: 24
+    },
+    {
+      dataIndex: 'address',
+      label: '联系人地址',
+      span: 24
+    },
+    {
+      dataIndex: 'ride',
+      label: '联系人乘车',
+      span: 24
+    },
+    {
+      dataIndex: 'landmarks',
+      label: '联系人地标',
+      span: 24
+    },
+    {
+      dataIndex: 'stay',
+      label: '联系人住宿',
+      span: 24
+    },
+    {
+      dataIndex: 'mark',
+      label: '备注',
+      span: 24
+    },
+    {
+      dataIndex: 'gerenbiaoqian',
+      label: '个人标签',
+      span: 24
+    },
+    {
+      dataIndex: 'xiezuobiaoqian',
+      label: '协作标签',
+      span: 24
+    }
+  ]
 
   useEffect(() => {
-    // console.log(client)
-    form.setFieldsValue(client)
+    console.log(client)
+    // form.setFieldsValue(client)
   }, [client])
   const residences = [
     {
@@ -50,23 +154,24 @@ const ContanctForm = props => {
     <div>
       <Row>
         <Col span={12}>
-          <h2>刘泽富</h2>
+          <h2>{client.clientname}</h2>
         </Col>
         {/* className={[ 'text-right', styles.textMuted ]} */}
         <Col span={12} className="zh-text-right zh-gray">
           陈特 创建于 2019年5月6日 14:55
         </Col>
       </Row>
-      <Form layout="vertical" form={form}>
+      <EditableForm dataSource={record} columns={columns} />
+      {/* <Form layout="vertical" form={form}>
         <Form.Item label="姓名" name="clientname" rules={[{ required: false, message: '姓名' }]}>
           <Input value="刘泽富" />
         </Form.Item>
-        {/* <Form.Item
+        <Form.Item
           label="联系人地区"
           name="district"
           rules={[{ required: false, message: '地区' }]}>
           <Cascader options={residences} />
-        </Form.Item> */}
+        </Form.Item>
         <Form.Item
           label="客户名称"
           name="companyname"
@@ -177,22 +282,7 @@ const ContanctForm = props => {
             <Tag color="#FF69B4">协作标签2</Tag>
           </span>
         </Form.Item>
-      </Form>
-      {/* <Button
-        type="primary"
-        className="ant-btn ant-btn-primary"
-        onClick={() => {
-          form
-            .validateFields()
-            .then(values => {
-              onCreate(values)
-            })
-            .catch(err => {
-              console.log(err)
-            })
-        }}>
-        确定
-      </Button> */}
+      </Form> */}
     </div>
   )
 }

src/pages/Customer/Company/index.jsx

@@ -23,7 +23,8 @@ const Company = () => {
     },
     {
       dataIndex: 'age',
-      label: '年龄'
+      label: '年龄',
+      span: 24
     }
   ]
   return (

src/pages/Customer/Contact/components/AddContact/index.jsx

@@ -8,7 +8,7 @@ const Addcontact = props => {
   const { visible, onCancel, onConfirm, loading } = props
   const { Option } = Select
   const layout = {
-    labelCol: { span: 6 }
+    labelCol: { flex: "100px" }
   }
   function handleChange(value) {
     console.log(`selected ${value}`)
@@ -30,7 +30,7 @@ const Addcontact = props => {
         }}>
         <Form {...layout} form={form} name="basic">
           <Row>
-            <Col span={12}>
+            <Col span={24}>
               <Form.Item
                 label="姓名"
                 name="clientName"
@@ -38,7 +38,7 @@ const Addcontact = props => {
                 <Input />
               </Form.Item>
             </Col>
-            <Col span={12} />
+            {/* <Col span={12} /> */}
             <Col span={12}>
               <Form.Item label="联系人地区" name="" rules={[{ message: '联系人地区' }]}>
                 <LazyCascader key="LazyCascader" />
@@ -101,7 +101,7 @@ const Addcontact = props => {
                 <Input />
               </Form.Item>
             </Col>
-            <Col span={12}>
+            <Col span={24}>
               <Form.Item label="备注" name="mark" rules={[{ message: '备注' }]}>
                 <Input />
               </Form.Item>