feat: EditForm增加对应的类型文件

src/components/EditableForm/src/editableForm.jsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { Row } from 'antd'
-import EditableFormItem from './editableFormItem'
-import { isNullOrUnDef } from '@/utils/is'
-
-const EditableForm = ({ dataSource, columns, type, tartgetUrl, editable }) => {
-  const newColumns = columns.map(item => {
-    const newItem = { ...item }
-
-    // 控制col span
-    if (isNullOrUnDef(item.span)) {
-      newItem.span = 24
-    }
-
-    // 默认取用全局-editable
-    if (!isNullOrUnDef(editable)) {
-      newItem.editable = editable
-    } else if (isNullOrUnDef(item.editable)) {
-      // 采用布局-editable 默认为true
-      newItem.editable = true
-    }
-
-    // 默认组件
-    if (isNullOrUnDef(item.editCellType)) {
-      newItem.editCellType = 'input'
-    }
-
-    return newItem
-  })
-  return (
-    <Row>
-      {newColumns.map(column => {
-        return (
-          <EditableFormItem
-            type={type}
-            key={column.dataIndex}
-            label={column.label}
-            dataSource={dataSource}
-            editable={column.editable}
-            disable={column.disable}
-            dataIndex={column.dataIndex}
-            span={column.span}
-            editCellType={column.editCellType}
-            customCell={column.customCell}
-            requestUrl={tartgetUrl}
-          />
-        )
-      })}
-    </Row>
-  )
-}
-
-export default EditableForm

src/components/EditableForm/src/editableForm.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Row } from 'antd'
+import EditableFormItem from './editableFormItem'
+import { isNullOrUnDef } from '@/utils/is'
+import type { ActionPayload } from '@/types/typing'
+
+export type EditCellType =
+  | 'cascader'
+  | 'input'
+  | 'select'
+  | 'textarea'
+  | 'custom'
+  | 'datePicker'
+  | 'treeSelect'
+
+export type EditableColumsType<T> = {
+  dataIndex: keyof T
+  label: string
+  /** 参数antd Col span https://ant-design.antgroup.com/components/grid-cn/#API*/
+  span?: number
+  /** 组件渲染类型, 默认-input */
+  editCellType?: EditCellType
+  /** 只有当 editCellType为custom时才生效 */
+  customCell?: () => React.ReactNode
+  /** 优先采用全局配置 */
+  editable?: boolean
+}
+
+type EditableFormProps<T> = {
+  dataSource: T
+  columns: EditableColumsType<T>
+  /** 触发接口请求的url */
+  tartgetUrl?: string
+  /** 操作成功触发dva更新的payload */
+  type?: ActionPayload
+  /** 全局编辑模式 */
+  editable?: boolean
+  /** 数据源的唯一字段，默认: id*/
+  dataField?: string
+}
+
+function EditableForm<T>({
+  dataSource,
+  columns,
+  type,
+  tartgetUrl,
+  editable,
+  dataField = 'id'
+}: EditableFormProps<T>) {
+  const newColumns = columns.map((item: EditableColumsType<T>) => {
+    const newItem = { ...item }
+
+    // 控制col span
+    if (isNullOrUnDef(item.span)) {
+      newItem.span = 24
+    }
+
+    // 默认取用全局配置中的editable
+    if (!isNullOrUnDef(editable)) {
+      newItem.editable = editable
+    } else if (isNullOrUnDef(item.editable)) {
+      // 采用局部配置中的editable 默认为true
+      newItem.editable = true
+    }
+
+    // 默认组件
+    if (isNullOrUnDef(item.editCellType)) {
+      newItem.editCellType = 'input'
+    }
+
+    return newItem
+  })
+  return (
+    <Row>
+      {newColumns.map(column => {
+        return (
+          <EditableFormItem
+            type={type}
+            key={column.dataIndex}
+            label={column.label}
+            dataSource={dataSource}
+            editable={column.editable}
+            dataIndex={column.dataIndex}
+            span={column.span}
+            editCellType={column.editCellType}
+            customCell={column.customCell}
+            requestUrl={tartgetUrl}
+            dataField={dataField}
+          />
+        )
+      })}
+    </Row>
+  )
+}
+
+export default EditableForm

src/components/EditableForm/src/editableFormItem.jsx

@@ -10,9 +10,27 @@ import ChangeTreeSelect from './components/ChangeTreeSelect'
 import ChangeDatePicker from './components/ChangeDatePicker'
 import './index.less'
 import { isArray, isNull } from '@/utils/is'
+import classNames from 'classnames'
+import type { ActionPayload } from '@/types/typing'
+import type { EditCellType } from './editableForm'
 
 const extraValArr = ['cascader', 'select', 'treeSelect'] // 需要设置ExtraVal的类型
-const EditableFormItem = ({
+
+type EditableFormItemProps<T> = {
+  type: ActionPayload
+  label: string
+  dataSource: T
+  editable: boolean
+  key: keyof T
+  dataIndex: keyof T
+  span: number
+  editCellType: EditCellType
+  customCell?: () => React.ReactNode
+  requestUrl?: string
+  dataField: string
+}
+
+function EditableFormItem<T>({
   type,
   label,
   dataSource,
@@ -21,11 +39,12 @@ const EditableFormItem = ({
   editable,
   editCellType,
   requestUrl,
-  customCell
-}) => {
+  customCell,
+  dataField
+}: EditableFormItemProps<T>) {
   const dispatch = useDispatch()
   const record = dataSource[dataIndex]
-  const dataId = dataSource.id
+  const dataId = dataSource[dataField]
   const options = useOptions(dataIndex)
   const [editing, setEditing] = useState(false)
   const iRef = useRef(null)
@@ -89,9 +108,7 @@ const EditableFormItem = ({
       if (extraValArr.includes(editCellType)) {
         if (Array.isArray(v)) {
           return record?.reduce((prev, curr) => {
-            return `${prev}${prev ? '，' : ''}${
-              options?.find(item => item.value === curr)?.label || ''
-            }`
+            return `${prev}${prev ? '，' : ''}${options?.find(item => item.value === curr)?.label || ''}`
           }, '')
         }
         return findTreeNode(options, v)
@@ -171,9 +188,7 @@ const EditableFormItem = ({
         cell = <ChangeSelect ref={iRef} defaultValue={state.val} options={options} onSave={save} />
         break
       case 'treeSelect':
-        cell = (
-          <ChangeTreeSelect ref={iRef} defaultValue={state.val} options={options} onSave={save} />
-        )
+        cell = <ChangeTreeSelect ref={iRef} defaultValue={state.val} options={options} onSave={save} />
         break
       case 'textarea':
         cell = (
@@ -188,12 +203,7 @@ const EditableFormItem = ({
         break
       case 'datePicker':
         cell = (
-          <ChangeDatePicker
-            defaultOpen={true}
-            onSave={save}
-            defaultValue={state.val}
-            allowClear={false}
-          />
+          <ChangeDatePicker defaultOpen={true} onSave={save} defaultValue={state.val} allowClear={false} />
         )
         break
       default:
@@ -215,10 +225,7 @@ const EditableFormItem = ({
     }
 
     cell = (
-      <div
-        className={['editable-cell-value-wrap', !editable ? 'disable' : ''].join(' ')}
-        onClick={toggleEdit}
-      >
+      <div className={classNames('editable-cell-value-wrap', { disable: !editable })} onClick={toggleEdit}>
         {content}
       </div>
     )

src/pages/Customer/Client/components/ClientDetail/LowerList.tsx

@@ -131,7 +131,7 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
       dataIndex: 'operationType',
       key: 'operationType',
       ellipsis: true,
-      width: 100
+      width: 120
     },
     {
       title: '操作内容',

src/pages/Customer/Company/components/CompanyDetail/LowerList.tsx

@@ -51,7 +51,7 @@ const CompanyLowerList: React.FC<CompanyLowerListProps> = ({ logList: { log: log
       dataIndex: 'operationType',
       key: 'operationType',
       ellipsis: true,
-      width: 100
+      width: 120
     },
     {
       title: '操作内容',

src/types/typing.d.ts

@@ -135,3 +135,8 @@ export type MessageType = {
   userid: string
   [key: string]: any
 }
+
+export type ActionPayload = {
+  main: string
+  target: string
+}