op-admin-ui/src/components/HttpUtil/path.tsx

import type {
  EditableFormInstance,
  ProColumns,
} from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-components';
import React from 'react';


/**
 * @author bianlanzhou
 * @since 2022-09-09
 * @description api path
 */
class ApiPath extends React.Component {
  state = {
    data: [],
    formRef: React.createRef<EditableFormInstance<ApiQueryParamType>>(),
  }

  /** 获取数据 */
  getData = () => {
    return this.state.formRef.current?.getRowsData?.()?.filter((item: any) => item.index >= 0)
  }
  render() {
    const columns: ProColumns<ApiPathParamType>[] = [
      {
        title: '参数值',
        key: 'key',
        dataIndex: 'key',
        formItemProps: () => {
          return {
            rules: [{ required: true, message: '此项为必填项' }],
          };
        },
        width: '40%',
      },

      {
        title: '描述',
        dataIndex: 'decs',
        width: '50%',
      },

      {
        title: '操作',
        valueType: 'option',
        width: '15%',
        render: (text, record, _, action) => [
          <a
            key="editable"
            onClick={() => {
              action?.startEditable?.(record.id, record);
            }}
          >
            编辑
          </a>,
          <a
            key="delete"
            onClick={() => {
              const tableDataSource = this.state.formRef.current?.getFieldValue(
                'table',
              ) as ApiPathParamType[];
              this.state.formRef.current?.setFieldsValue({
                table: tableDataSource.filter((item) => item.id !== record.id),
              });
            }}
          >
            删除
          </a>,
        ],
      },
    ]
    return (
      <>
        <EditableProTable<ApiPathParamType>
          rowKey="id"
          scroll={{
            x: 960,
          }}
          editableFormRef={this.state.formRef}
          maxLength={5}
          name="path"
          controlled={false}
          recordCreatorProps={
            {
              position: 'bottom',
              record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
            }
          }
          toolBarRender={() => []}
          columns={columns}
          editable={{
            type: 'multiple',
          }}
        />
      </>
    )
  }
}

export default ApiPath;