fe_service_ebtp_frontend/src/pages/Device/index.tsx

import React, { useState, useRef, useEffect } from 'react';
import { Button, Tabs, PageHeader,message } from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { reserveList, roomList, cancelReserve } from './service';
import '@/assets/ld_style.less';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import { btnAuthority } from '@/utils/authority';

const { TabPane } = Tabs;

const Index: React.FC<{}> = () => {
  const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表

  const [areaNameList, setAreaNameList] = useState({});
  /*拉取数据*/
  useEffect(() => {
    initAreaNameList();
  }, []);
  const initAreaNameList = async () => {
    await roomList().then((res) => {
      if (res.success ==true) {
        // let areaNameList: any[] = [];
        // console.log(res.data)
      //   res.data.forEach((item: { areaName: string; id: string; }) => {
      //     const tempDetail = { label: '', value: '', };
      //     tempDetail.label = item.areaName;
      //     tempDetail.value = item.id;
      //     areaNameList.push(tempDetail);
      // })
        let areaNameList = {};
        //将拿到的返回值遍历
        res.data.map((item: { id: string | number; areaName: any; })=>{
          //使用接口返回值的id做为 代替原本的0，1
          areaNameList[item.id]={
          //使用接口返回值中的overdueValue属性作为原本的text:后面的值
            text: item.areaName,
          }
        })
        setAreaNameList(areaNameList)
      }
    })
  };
  /**
   *  取消预约
   * @param record
   */
     const cancel = async (record: any) => {
      
      cancelReserve(record.id).then(res => {
        if (res.code == 200 && res.data) {
          message.success('预约取消成功');
        }
      });
    };
  const current = getURLInformation('current');


  const columns: any[] = [
    //会议室预约

    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      search: false,
      width: '3%',
    },
    {
      title: '评标场所名称',
      dataIndex: 'reserveBy',
      width: '10%',
      search: false,
    },
    {
      title: '评标区域名称',
      dataIndex: 'reserveBy',
      width: '10%',
      search: false,
    },
    {
      title: '设备类型',
      dataIndex: 'reserveBy',
      width: '10%',
      search: false,
    },
    {
      title: '设备名称',
      dataIndex: 'meetingName',
      search: true,
      width: '10%',
    },
    {
      title: '设备标识',
      dataIndex: 'meetingName',
      search: true,
      width: '10%',
    },
    
    {
      title: '网络IP',
      dataIndex: 'meetingName',
      search: true,
      width: '10%',
    },
    {
      title: '设备状态',
      dataIndex: 'reserveBy',
      width: '10%',
      search: true,
    },
    
    {
      title: '操作',
      width: '7%',
      search: false,
      render: (text: any, record: any) => {
        
        return (
          <>
            <Button  type="text" onClick={() => cancel(record)} danger>
              编辑
            </Button>
            <Button  type="text" onClick={() => cancel(record)} danger>
              删除
            </Button>
          </>
        );
        


      },
    },
  ];

  return (
    <>
      <PageHeader title="预约管理" />

      <Tabs defaultActiveKey="1">
        <TabPane tab="评标预约" key="1">
          <ProTable
            actionRef={checkRelationRef}
            className="proSearch"
            columns={columns}
            params={{ reserveType: 'eval' }}
            size="small"
            request={async (params) =>
              await reserveList(params).then((res) => {
                if (res.code == 200) {
                  let data = res.data;
                  return Promise.resolve({
                    data: data.records,
                    success: res.success,
                    total: res.data.total,
                    current: res.data.current,
                  });
                }
                return Promise.resolve({
                  data: [],
                  success: false,
                  total: 0,
                  current: 1,
                });
              })
            }
            search={{
              filterType: 'query',
              optionRender: (searchConfig: any, { form }) => {
                return [
                  <Button
                    key="resetText"
                    onClick={() => {
                      form?.setFieldsValue({
                        current: 1,
                      });
                      form?.submit();
                    }}
                  >
                    {searchConfig?.resetText}
                  </Button>,
                  <Button
                    key="searchText"
                    type="primary"
                    onClick={() => {
                      form?.submit();
                    }}
                  >
                    {searchConfig?.searchText}
                  </Button>,
                ];
              },
            }}
            pagination={{
              defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
              defaultPageSize: 10,
              showSizeChanger: false,
            }} //默认显示条数
            toolBarRender={false}
          />
        </TabPane>
        <TabPane tab="会议预约" key="2">
          <ProTable
            className="proSearch"
            columns={otherColumns}
            params={{ reserveType: 'meeting' }}
            size="small"
            request={async (params) =>
              await reserveList(params).then((res) => {
                if (res.code == 200) {
                  let data = res.data;
                  return Promise.resolve({
                    data: data.records,
                    success: res.success,
                    total: res.data.total,
                    current: res.data.current,
                  });
                }
                return Promise.resolve({
                  data: [],
                  success: false,
                  total: 0,
                  current: 1,
                });
              })
            }
            pagination={{
              defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
              defaultPageSize: 10,
              showSizeChanger: false,
            }} //默认显示条数
            toolBarRender={false}
          />
        </TabPane>
      </Tabs>
    </>
  );
};
export default Index