import React, {useRef,} from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {ProColumns, ActionType, TableDropdown} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {index} from './service';
type columnsType = {
id:number;
apply_company_name: string;
product_name: string
salesperson_name: string
applicant_name: string
applicant_phone: string
state: number
created_at: any
url:string
}
const TableList: React.FC = () => {
const actionRef = useRef<ActionType>();
const columns: ProColumns<columnsType>[] = [
{
title: '序号',
valueType: "index",
search: false
},
{
title: '申请公司',
dataIndex: 'apply_company_name',
search: false
},
{
title: '项目名称',
dataIndex: 'product_name',
search: false
},
{
title: '杜邦销售姓名',
dataIndex: 'salesperson_name',
},
{
title: '表单填写人姓名',
dataIndex: 'applicant_name',
search: false
},
{
title: '联系电话',
dataIndex: 'applicant_phone',
search:false
},
{
title: '提交时间',
dataIndex: 'created_at',
valueType: 'dateTime',
search: false
},
{
title: '操作',
valueType: 'option',
render: (text, record, _, action) => [// 重点
<a
key="editable"
onClick={() => {
action?.startEditable?.(record.id);
}}
>
编辑
</a>,
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
查看
</a>,
],
},
];
return (
<PageHeaderWrapper>
<ProTable
headerTitle=""
actionRef={actionRef}
rowKey="id"
request={async (params) => {
console.log(params)
const result = await index(params);
return result.data;
}}
options={{fullScreen:true}}
columns={columns}
search={{filterType:"light"}}
/>
</PageHeaderWrapper>
);
};
export default TableList;
ant design pro 可编辑表格
最新推荐文章于 2023-09-17 15:06:03 发布