react中ProTable

import {  PageContainer, ProColumns, ProTable,ProForm ,  ProFormText,} from '@ant-design/pro-components';
import { Button,Switch ,Modal, Checkbox, Form, Input} from 'antd';
import {useRef,useState} from 'react'
import type { ProFormInstance } from '@ant-design/pro-components';
import { getUserList} from '@/services/system/user';
const HomePage: React.FC = () => {
  
  type FieldType = {
    nickName?: string;
    userName?: string;
    remember?: string;
  };
  //创建一个弹框
  const [ModalShow, setModalShow] = useState(false)
    //创建一个表单实例，可以使用表单的方法
    const [form1] = Form.useForm();
  const formTableRef = useRef();
  const columns: ProColumns[] = [

    {
     title: '名字1',                            //表头显示的名称
     dataIndex: 'nickName',                    // 后端字段，列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    //  width: '20%',
    //  filters: [                            // 表头的筛选菜单项
    //     { text: '男', value: '男' },
    //     { text: '女', value: '女' },
    //    ],
    valueType: 'text',
    //  hideInSearch : true,               // 设置搜索栏是否显示 true为隐藏 false为显示
    //  hideInTable : true,                // 设置表格中是否显示  true为隐藏 false为显示
    //  valueEnum: {                          //搜索栏当前列值的枚举
    //    false: { text: '禁用', status: 'Error' },     //false是后台传的值，text是页面显示的，status是antd提供的状态，具体看api
    //    true: { text: '启用', status: 'Success' },
    //  },
    render:(_,record)=>{
      return (
        record.nickName + record.remark

      )
    }
},
{
  title: '名字',                            //表头显示的名称
  dataIndex: 'userName',                    // 后端字段，列数据在数据项中对应的路径，支持通过数组查询嵌套路径
  // width: '20%',
  // hideInSearch : true,               // 设置搜索栏是否显示 true为隐藏 false为显示
  // hideInTable : true,                // 设置表格中是否显示  true为隐藏 false为显示
  valueType: 'text',
},
{
  title:'性别',
  dataIndex: 'sex',
  render:(_,r) =>{
    return (
      <span>{r.sex == 1 ? '男' : '女'}</span>
    )
  }
},
{
  title: '操作',                            //表头显示的名称
  dataIndex: 'option',                    // 后端字段，列数据在数据项中对应的路径，支持通过数组查询嵌套路径
  // width: '20%',
  // hideInSearch : true,               // 设置搜索栏是否显示 true为隐藏 false为显示
  // hideInTable : true,                // 设置表格中是否显示  true为隐藏 false为显示
  valueType: 'option',
  render:(_,r) =>[
    <Button
          type="link"
          size="small"
          key="edit"
          onClick={()=>{edit(r)}}
        >
          编辑
        </Button>
  ]
},
];
const add = () =>{
  console.log('555')
  setModalShow(true)
}
const edit = (r) =>{
  setModalShow(true)
console.log(r,'r')
// 回显数据
form1.setFieldsValue({
  nickName: r.nickName,
  userName: r.userName,
})

}
const onFinish = (value) =>{
  console.log(value,'value')
}
const onFinishFailed = (error) =>{
  console.log(error,'error')
}
const handleOk = () => {
  // form1.submit();
};
// const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
//   console.log('Success:', values);
// };

// const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
//   console.log('Failed:', errorInfo);
// };
const defaultData = [{nickName:'男',userName:'张三',userId:'111'},{nickName:'男',userName:'张三',userId:'222'}]
   const actionRef = useRef();
   return (<PageContainer>
         	 {/* //布局标签 */}
            <ProTable   
            rowKey="userId"               //表格行 key 的取值，可以是字符串或一个函数
            key="userList"
            formRef={formTableRef}
            defaultData= {defaultData}                      //表格Pro组件
            headerTitle="查询表格"            //表头
            actionRef={actionRef}            //用于触发刷新操作等
                   
            toolBarRender={() => [           //位于表格上方的操作，如“导入/导出/新增”
               <Button type="primary" key="add" onClick={()=>{add()}}>
                   新建
               </Button>,
               
              ]}
              request={(params) =>
                getUserList(params).then((res) => {
                  const result = {
                    data: res.rows,
                    total: res.total,
                    success: true,
                  };
                  console.log(result,'result')
                  return result;
                })
              }
            columns={columns}  //上面定义的
           />
           <Modal
        title="Title"
        open={ModalShow}
       
      >
        <p>我是对话框</p>
        <ProForm
        form={form1}
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    submitter={false}
    // initialValues={{ remember: true }}
    onFinish={onFinish}
    autoComplete="off"
  //   submitter={{
  //     render: (props, doms) => {
  //     return [
  //       ...doms,
  //       <Button htmlType="button" onClick={onFill} key="edit">
  //             一键填写
  //           </Button>
  //     ];
  //   },
  // }}
    // onOk={handleOk}
  >
<ProFormText
          name="nickName"
          label='用户昵称'
          placeholder="请输入用户昵称"
          colProps={{ xs: 24, md: 12, xl: 12 }}
          rules={[
            {
              required: true,
              // message: (
              //   <FormattedMessage id="请输入用户昵称！" defaultMessage="请输入用户昵称！" />
              // ),
            },
          ]}
        />

<ProFormText
          name="userName"
          label='用户账号'
          placeholder="请输入用户账号"
          rules={[
            {
              required: true,
            },
          ]}
        />
  </ProForm>
      </Modal>
           </PageContainer>
   )

};
export default HomePage;

import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown ,ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,} from '@ant-design/pro-components';
  import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Dropdown, Space, Tag,Modal, Form, message ,Input, Radio , Image ,Popconfirm, Alert, Flex, Spin, Switch} from 'antd';
import type { PopconfirmProps } from 'antd';
import React,{ useRef ,useEffect,useState} from 'react';
import {UserList,Emit,AddList,DeleteList,EmitsteList} from '@/services/demo/UserController';
export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};

type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

interface Values {
  title?: string;
  content?: string;
  channel_id?: string;
}

const CustomerList: React.FC = () => {
  const [open,setopen] = useState(false)
  const [form] = Form.useForm();
  const [Modeltitle,setModeltitle] = useState('新建数据')
  const [dangqianlist,setdangqianlist] = useState({})
  const { confirm } = Modal;
  const [loading, setLoading] = React.useState<boolean>(false);
  // const [formValues, setFormValues] = useState<Values>();
  //定义变量接收当前人的信息
  const [emItuser, setemItuser] = useState({});
  const actionRef = useRef<ActionType>();
  // 点击提交按钮
  const onCreate = async(values: Values) => {
    if(dangqianlist?.id){
      const obj = {...dangqianlist,...values}
   const res  = await EmitsteList(obj)
   message.success('修改成功');
   setopen(false);
   actionRef.current?.reloadAndRest?.();
    }else{
          const obj = {cover:{
      type: 1,
      images: [
          "http://dummyimage.com/400x400"
      ]
  }}
  const obj1 = {...values,...obj}
 const res = await AddList(obj1)
 message.success('新增成功');
 setopen(false);
 actionRef.current?.reloadAndRest?.();
    }

  };
    // 删除当前数据
    const Clickdelete = async(record) =>{
      // const res =  await DeleteList(record.id)
      // actionRef.current?.reloadAndRest?.();
      // message.success('删除成功');
      confirm({
        title: `是否删除id为${record.id}的数据`,
        icon: <ExclamationCircleFilled />,
        content: '删除数据',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        async onOk() {
               const res =  await DeleteList(record.id)
      actionRef.current?.reloadAndRest?.();
      message.success('删除成功');
        },
        // 取消的事件
        onCancel() {
        },
      });
      }

  const columns: ProColumns<GithubIssueItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '标题',
      dataIndex: 'title',
      copyable: true,
      ellipsis: true,
      tooltip: '标题过长会自动收缩',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    // {
    //   disable: true,
    //   title: '状态',
    //   dataIndex: 'status',
    //   filters: true,
    //   onFilter: true,
    //   ellipsis: true,
    //   render: (_, record) => (
    //     record.status === 1 ? '未解决' : '已解决'
    //   ),
    //   // valueType: 'select',
    //   // valueEnum: {
    //   //   all: { text: '超长'.repeat(50) },
    //   //   open: {
    //   //     text: '未解决',
    //   //     status: 'Error',
    //   //   },
    //   //   closed: {
    //   //     text: '已解决',
    //   //     status: 'Success',
    //   //     disabled: true,
    //   //   },
    //   //   processing: {
    //   //     text: '解决中',
    //   //     status: 'Processing',
    //   //   },
    //   // },
    // },
    // {
    //   disable: true,
    //   title: '标签',
    //   dataIndex: 'labels',
    //   search: false,
    //   renderFormItem: (_, { defaultRender }) => {
    //     return defaultRender(_);
    //   },
    //   render: (_, record) => (
    //     <Space>
    //       {record.labels.map(({ name, color }) => (
    //         <Tag color={color} key={name}>
    //           {name}
    //         </Tag>
    //       ))}
    //     </Space>
    //   ),
    // },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      // valueType: 'date',
      sorter: true,
      // hideInSearch: true,   // 设置搜索栏是否显示 true为隐藏 false为显示
      hideInTable : true, // 设置表格中是否显示  true为隐藏 false为显示
    },
    {
      title: '创建时间',
      key: 'showTime',
      dataIndex: 'pubdate',
      valueType: 'date',
      sorter: true,
      // hideInSearch: true,
    },
    // {
    //   title: '创建时间',
    //   dataIndex: 'created_at',
    //   valueType: 'dateRange',
    //   hideInTable: true,
    //   search: {
    //     transform: (value) => {
    //       return {
    //         startTime: value[0],
    //         endTime: value[1],
    //       };
    //     },
    //   },
    // },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <Button
        type="primary"
          key="editable"
          onClick={()=>ClickEmit(record)}
        >
          编辑
        </Button>,

        <Button  key="deleteable"
        type="primary" danger
        onClick={()=>Clickdelete(record)}
        >
          删除
        </Button>,
        
      ],
    },
  ];

 
  const ClickEmit = async(record) =>{
    setLoading(true)
    setModeltitle('修改数据')
    setopen(true)
  const res = await Emit(record.id)
  setemItuser(res?.data)
  console.log(res,'resss')
  // 给表单的内容赋值
  setdangqianlist(res?.data)
  form.setFieldsValue({title:res?.data?.title,content:res?.data?.content,channel_id:res?.data?.channel_id,imageUrl:res?.data?.cover?.images[0]})
  setLoading(false)
}
  //  useEffect (() =>{
  //   UserList1()
  // })
  const ClickAdd = () =>{
    setopen(true)
    setModeltitle('新增数据')
    setdangqianlist({})
  }

  //点击重置表单的按钮
  const onResetchongzhi = () =>{
    actionRef.current?.reloadAndRest?.();
  }
// 校验方法
const adminEmailVerification = (rule, value, callback)=>{
  console.log(rule)
  console.log(value,'value')
  // if(!value){
  //   callback(new Error('请输入管理员邮箱'));
  //   return
  // } else{
  //   const emailRegex = /^([^@\u4e00-\u9fa5]+)@([^@\\.\u4e00-\u9fa5]+)(\.[^\\.@\u4e00-\u9fa5]+)+$/;  
  //   if(!emailRegex.test(value)){
  //     callback(new Error('邮箱格式错误'));
  //     return
  //   } else{
  //     callback()
  //     this.emailSuffixVerification()
  //   }
  // }
  // callback()
  // return
}
  return (
    <>
    
      <ProTable<GithubIssueItem>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async ( params, sort, filter) => {
        console.log(params,sort, filter);
        //自定义分页，一定要把字段名填对
      const res  = await UserList({per_page:params.pageSize,page:params.current});
      console.log(res?.data?.results,'res')
      
        return {
          data:res?.data?.results,
          success:res?.message === 'OK' ? true : false,
          total: res?.data?.total_count
        }
      }}
      editable={{
        type: 'multiple',
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
        defaultValue: {
          option: { fixed: 'right', disable: true },
        },
        onChange(value) {
          console.log('value====: ', value);
        },
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      form={{
        // 由于配置了 transform，提交的参数与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      onReset= {onResetchongzhi}
      pagination={{
        // showSizeChanger: false,
        // pageSize: 10,
        // onChange: (page,pageSize) => console.log(page,pageSize,'page789'),
      }}

      dateFormatter="string"
      headerTitle="高级表格"
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          onClick={ClickAdd}
          type="primary"
        >
          新建
        </Button>,
        <Dropdown
          key="menu"
          menu={{
            items: [
              {
                label: '1st item',
                key: '1',
              },
              {
                label: '2nd item',
                key: '2',
              },
              {
                label: '3rd item',
                key: '3',
              },
            ],
          }}
        >
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
        
      ]}
    />
    <Modal
        open={open}
        title={Modeltitle}
        okText="确定"
        cancelText="取消"
        okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
        onCancel={() => setopen(false)}
        destroyOnClose
        modalRender={(dom) => (
          <Form
            layout="vertical"
            form={form}
            name="form"
            initialValues={{ modifier: 'public' }}
            clearOnDestroy
            onFinish={(values) => onCreate(values)}
          >
            {dom}
          </Form>
        )}
      >
        <Spin spinning={loading}>
        <Form.Item
          name="title"
          label="标题"
          rules={[{ required: true, message: '标题为必填' }]}
        >
          <Input />
        </Form.Item>
        
        <Form.Item name="content" label="内容"  rules={[{required: false,
      message: '内容为必填'}]}>
   
                  <Input type="textarea" />

        
        </Form.Item>
        <Form.Item name="channel_id" label="id" >
          <Input type="textarea" disabled/>
        </Form.Item>
        <Form.Item name="imageUrl" label="照片">

        <Image
        width={200}
        src={form.getFieldValue('imageUrl')}
        placeholder={
          <Image
            preview={false}
            src={form.getFieldValue('imageUrl')}
            width={200}
          />
        }
      />
        </Form.Item>
        </Spin>
        {/* <Form.Item name="modifier" className="collection-create-form_last-form-item">
          <Radio.Group>
            <Radio value="public">Public</Radio>
            <Radio value="private">Private</Radio>
          </Radio.Group>
        </Form.Item> */}
      </Modal>
    </>
  );
};

export default CustomerList;