feat: 编辑表格相关修改

src/components/EditableForm/editableForm.jsx

@@ -2,7 +2,7 @@ import { Row } from 'antd'
 import React from 'react'
 import EditableFormItem from './EditableFormItem'
 
-const EditableForm = ({ dataSource, columns }) => {
+const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
   const newColumns = columns.map(item => {
     const newItem = { ...item }
 
@@ -35,6 +35,7 @@ const EditableForm = ({ dataSource, columns }) => {
             dataId={dataSource.id}
             editable={column.editable}
             editCellType={column.editCellType}
+            requestUrl={tartgetUrl}
           />
         )
       })}

src/components/EditableForm/editableFormItem.jsx

@@ -1,10 +1,10 @@
 import consts from '@/basic/consts'
-import { apiUpdateContract } from '@/services/contact'
+import { editFormApi } from '@/services/common'
 import { Input, Row, Col, Select } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import './index.less'
 
-const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType }) => {
+const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType, requestUrl }) => {
 
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
@@ -35,7 +35,7 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
   }
 
   const handleConfirm = async value => {
-    const { code = -1 } = await apiUpdateContract({ [dataIndex]: value, id: dataId })
+    const { code = -1 } = await editFormApi(requestUrl, { [dataIndex]: value, id: dataId })
     if (code === consts.RET_CODE.SUCCESS) {
       toggleEdit()
     }
@@ -61,17 +61,17 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
   let cell = null
 
   if (editing) {
+    const options = (
+      <>
+        <Option key="男" vlaue="男">男</Option>
+        <Option key="女" vlaue="女">女</Option>
+      </>
+    )
     switch (editCellType) {
       case 'cascader':
         // cell = ()
         break
       case 'select':
-        const options = (
-          <>
-            <Option key="男" vlaue="男">男</Option>
-            <Option key="女" vlaue="女">女</Option>
-          </>
-        )
         cell = (
           <Select
             defaultValue={val}

src/components/LazyCascader/index.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { connect } from 'dva'
 
 const LazyCascader = props => {
-  const { options, dispatch, onSelect, ...resetProps } = props
+  const { options, dispatch, onChange, ...resetProps } = props
   useEffect(() => {
     if (!options.length) {
       dispatch({
@@ -12,9 +12,13 @@ const LazyCascader = props => {
     }
   }, [])
 
+  const triggerChange = value => {
+    if (onChange) {
+      onChange(value)
+    }
+  }
   const handleOnChange = value => {
-    const [province = '', city = '', area = ''] = value
-    onSelect({ province, city, area })
+    triggerChange(value)
   }
 
   const loadData = selectedOptions => {
@@ -42,6 +46,12 @@ const LazyCascader = props => {
   )
 }
 
+export const validCascaderRule = (_, value) => {
+  if (!value || !value.length) {
+    return Promise.reject(new Error('请选择地区'))
+  }
+  return Promise.resolve(value)
+}
 export default connect(({ district }) => ({
   options: district.data
 }))(LazyCascader)

src/components/PopContent/Companys/CompanyForm.jsx

@@ -70,7 +70,7 @@ const CompanyForm = props => {
         {customer.staffName} 创建于 {customer.createTime}
         </Col>
       </Row>
-      <EditableForm dataSource={customer} columns={columns} />
+      <EditableForm dataSource={customer} columns={columns} tartgetUrl="/api/customer/update"/>
     </div>
   )
 }

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -109,10 +109,6 @@ const ContanctForm = props => {
     }
   ]
 
-  useEffect(() => {
-    // console.log(client)
-    // form.setFieldsValue(client)
-  }, [client])
   return (
     <div>
       <Row>
@@ -124,7 +120,7 @@ const ContanctForm = props => {
           {client.staffName} 创建于{client.createTime}
         </Col>
       </Row>
-      <EditableForm dataSource={client} columns={columns} />
+      <EditableForm dataSource={client} columns={columns} tartgetUrl="/api/client/update"/>
     </div>
   )
 }

src/components/PopContent/Contacts/index.jsx

@@ -9,23 +9,22 @@ import useAutoTable from '@/hooks/useAutoTable'
 import consts from '@/consts'
 
 const Popcontent = props => {
-  const { visible, onClose,collapsed, id = '' } = props
+  const { visible, onClose, collapsed, id = '' } = props
   const needSubtractHeight = 55 // 需要被裁掉的高度
   // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
-  const [x,y] = useAutoTable(collapsed, needSubtractHeight)
-
+  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
 
   // 浏览器实际宽度
   const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
   const [state, setState] = useState({
     client: {},
-    log:[],
-    serviceLog:[]
+    log: [],
+    serviceLog: []
   })
 
   const initData = async () => {
     const {
-      data: { client = {},log = [],serviceLog = [] },
+      data: { client = {}, log = [], serviceLog = [] },
       code = -1
     } = await apiContactDetail(id)
     if (code === consts.RET_CODE.SUCCESS) {
@@ -45,13 +44,13 @@ const Popcontent = props => {
   }, [visible])
   return (
     <div>
-      <div className='sheet-box'>
+      <div className="sheet-box">
         <Drawer
           title="联系人"
           placement="right"
           bodyStyle={{
-            height:y,
-            overflowY:'hidden'
+            height: y,
+            overflowY: 'hidden'
           }}
           width={clientWidth}
           closable
@@ -60,14 +59,14 @@ const Popcontent = props => {
           // mask={false}
         >
           <Row>
-            <Col span={12} className="sheet-box-left" style={{ height:y-25,overflowY:'auto' }}>
+            <Col span={12} className="sheet-box-left" style={{ height: y - 25, overflowY: 'auto' }}>
               <div className="sheet-left-panel zh-pd-right-15">
                 <ContanctForm client={state.client} />
               </div>
             </Col>
             <Col span={12}>
               <ContanctTabList />
-              <ContanctLowerList  log={state.log} servicelist={state.serviceLog}/>
+              <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
             </Col>
           </Row>
         </Drawer>

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { Form, Input, Modal, Row, Col, Select } from 'antd'
-import LazyCascader from '@/components/LazyCascader'
+import LazyCascader, { validCascaderRule } from '@/components/LazyCascader'
 import { useForm } from 'antd/lib/form/Form'
 
 const Addcontact = props => {
@@ -8,7 +8,7 @@ const Addcontact = props => {
   const { visible, onCancel, onConfirm, loading } = props
   const { Option } = Select
   const layout = {
-    labelCol: { flex: "100px" }
+    labelCol: { flex: '100px' }
   }
   function handleChange(value) {
     console.log(`selected ${value}`)
@@ -40,16 +40,26 @@ const Addcontact = props => {
             </Col>
             {/* <Col span={12} /> */}
             <Col span={12}>
-              <Form.Item label="联系人地区" name="" rules={[{ message: '联系人地区' }]}>
-                <LazyCascader key="LazyCascader" />
+              <Form.Item
+                label="联系人地区"
+                name="district"
+                rules={[
+                  { required: true, message: '请选择地区' },
+                  { validator: validCascaderRule }
+                ]}>
+                <LazyCascader />
               </Form.Item>
             </Col>
             <Col span={12} />
             <Col span={12}>
               <Form.Item label="性别" name="gender" rules={[{ message: '性别' }]}>
                 <Select onChange={handleChange}>
-                  <Option key="男" value="男">男</Option>
-                  <Option key="女" value="女">女</Option>
+                  <Option key="男" value="男">
+                    男
+                  </Option>
+                  <Option key="女" value="女">
+                    女
+                  </Option>
                 </Select>
               </Form.Item>
             </Col>

src/pages/Customer/Contact/index.jsx

@@ -22,7 +22,7 @@ const Contact = props => {
   const [state, setState] = useState({
     data: [],
     journal: [],
-    servicelog:[],
+    servicelog: [],
     total: 0,
     id: '',
     visible: false
@@ -31,6 +31,20 @@ const Contact = props => {
     visible: false,
     loading: false
   })
+  const initData = async payload => {
+    const {
+      code = -1,
+      data: { client = [], log = [], serviceLog = [], total = 0 } = {
+        client: [],
+        log: [],
+        serviceLog: [],
+        total: 0
+      }
+    } = await queryContact(payload)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, data: client, journal: log, servicelist: serviceLog, total })
+    }
+  }
 
   const handleAddClient = async values => {
     setAddClient({ ...addClient, loading: true })
@@ -43,15 +57,7 @@ const Contact = props => {
     setAddClient({ ...addClient, loading: false, visible: false })
     await initData()
   }
-  const initData = async payload => {
-    const {
-      code = -1,
-      data: { client = [], log = [], serviceLog = [], total = 0 } = { client: [], log: [], serviceLog: [], total: 0 }
-    } = await queryContact(payload)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, data: client, journal: log, servicelist: serviceLog, total })
-    }
-  }
+
   // 展示drawer
   const showDrawer = id => {
     // console.log(id);
@@ -341,7 +347,7 @@ const Contact = props => {
     initData({ search: value })
   }
 
-  const handleOnselect = payload => {
+  const onDistrictChange = payload => {
     initData({ ...payload })
   }
   return (
@@ -365,7 +371,7 @@ const Contact = props => {
               onSearch: handleSearch
             },
             actions: [
-              <LazyCascader onSelect={handleOnselect} key="LazyCascader" />,
+              <LazyCascader onChange={onDistrictChange} key="LazyCascader" />,
               <Button
                 key="button"
                 type="primary"

src/services/common.js

@@ -0,0 +1,11 @@
+import request from "@/basic/utils/request"
+
+/**
+ * 编辑表单提交
+ * @param {*} payload 载荷
+ */
+ export async function editFormApi(url, payload) {
+    const data = await request.post(url, { data: { ...payload } })
+    return data
+  }
+  

src/services/company.js

@@ -33,11 +33,3 @@ export async function apiAddCompany(id) {
   return data
 }
 
-/**
- * 更新客户
- * @param {*} payload 载荷
- */
-export async function apiUpdateCompany(payload) {
-  const data = await request.post('/api/customer/update', { data: { ...payload } })
-  return data
-}

src/services/contact.js

@@ -24,15 +24,6 @@ export async function apiContactDetail(id) {
 }
 
 /**
- * 更新联系人
- * @param {*} payload 载荷
- */
-export async function apiUpdateContract(payload) {
-  const data = await request.post('/api/client/update', { data: { ...payload } })
-  return data
-}
-
-/**
  * 新增联系人
  * @param {*} payload 载荷
  */