cldV2_console/src/pages/Business/Contact/index.tsx

import React, { useState } from 'react'
import { Button } from 'antd'
import ProForm, { ModalForm, ProFormText } from '@ant-design/pro-form'
import type { ProFormColumnsType } from '@ant-design/pro-form'
import { EditableProTable } from '@ant-design/pro-table'
import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
// import type { ColumnsType } from 'antd/lib/table'

enum modalType {
  CREATE = 0,
  UPDATE = 1
}

interface StageSettingsType {
  id: React.Key
  name?: string
  stage?: string
  percentage?: number
}
const Contact = () => {
  const [state, setState] = useState({
    id: '',
    contactList: [],
    visible: false,
    type: modalType.CREATE
  })

  const defaultStageSettingsData = [
    {
      id: 1,
      stage: '结束',
      name: '赢单',
      percentage: 100
    },
    {
      id: 2,
      stage: '结束',
      name: '赢单',
      percentage: 0
    },
    {
      id: 3,
      stage: '结束',
      name: '无效',
      percentage: 0
    }
  ]
  const columns: ProFormColumnsType<StageSettingsType>[] = [
    {
      title: '阶段',
      dataIndex: 'stage',
      width: '15%'
    },
    {
      title: '阶段名称',
      dataIndex: 'name',
      width: '45%'
    },
    {
      title: '赢单率',
      dataIndex: 'percentage',
      width: '30%',
      valueType: 'text',
      fieldProps: {
        addonAfter: '%'
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: '10%'
    }
  ]

  // const mainColumns: ColumnsType = [
  //   {
  //     dataIndex: ''
  //   }
  // ]
  return (
    <div className="h-full w-full flex flex-row">
      <ShowTitleMenu itemTitle="商机状态组" />
      <div className="w-max-3/4">
        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
          <div className="absolute right-7 top-7 z-100">
            <Button
              type="primary"
              onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
              添加新组
            </Button>
          </div>
          {/* <Table columns={}></Table> */}
        </div>
      </div>
      <ModalForm
        visible={state.visible}
        onVisibleChange={show => setState({ ...state, visible: show })}
        title={state.type === modalType.CREATE ? '创建商机角' : '更新商机角'}>
        <ProFormText name="name" label="组名称" required />
        <ProFormText name="department" label="应用部门" required />
        <ProForm.Item label="阶段设置" name="stageSettings" initialValue={defaultStageSettingsData}>
          <EditableProTable<StageSettingsType>
            rowKey="id"
            toolBarRender={false}
            columns={columns}
            recordCreatorProps={{
              newRecordType: 'dataSource',
              position: 'top',
              record: index => ({
                id: Date.now(),
                stage: `阶段${index - 2}`
              })
            }}
            editable={{
              type: 'multiple',
              actionRender: (row, _, dom) => {
                return [dom.delete]
              }
            }}
          />
        </ProForm.Item>
      </ModalForm>
    </div>
  )
}

export default Contact