react antd design pro 的protable的另类使用方法。

protable中antd design的一个强大的组件。具体介绍

https://protable.ant.design/

简单的表可以通过大进行快速处理。相当方便。

 

但用完以后发现，跟实际需求相差还是很大的。有些字段是临时生成的。在表里是没有的。翻了官网，硬是没有找到相关解决办法。突发一想，想到以下解决办法。

以时间字段为例。数据库里，只有createtime字段。有些状态值，是根据其余字段计算出来，在数据库里也是没有值的。但页面需要展示开始和结束时间等等，要如何处理。。

index.tsx

import { DownOutlined } from '@ant-design/icons';
import {Button, Dropdown,  Menu} from 'antd';
import React, {useRef} from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem } from './data.d';
import { query } from './service';
import moment from "moment";


const TableList: React.FC<{}> = () => {

  const prvurl = "http://111.231.246.214:8001/";

  const actionRef = useRef<ActionType>();


  const columns: ProColumns<TableListItem>[] = [
    {
      title: '编号',
      dataIndex: 'id',
      hideInSearch:true,
    },
    {
      title: '图像',
      dataIndex: 'url',
      sorter: true,

      render: (text, row, index, action) => [

        <img src={prvurl+row.url} width={350} height={200} />

      ],
      hideInSearch:true,
    },
    {
      title: '所属机构',
      dataIndex: 'org_name',
      sorter: true,
      renderText: (val: string) => `${val}`,
      hideInSearch:true,
    },

    {
      title: '线路',
      dataIndex: 'line_name',
      sorter: true,
      renderText: (val: string) => `${val}`,
      hideInSearch:false,
    },

    {
      title: '车辆',
      dataIndex: 'car_name',
      sorter: true,
      renderText: (val: string) => `${val}`,
      hideInSearch:false,
    },
    {
      title: '车号',
      dataIndex: 'car_no',
      sorter: true,
      renderText: (val: string) => `${val}`,
      hideInSearch:false,
    },
    {
      title: '终端号',
      dataIndex: 'mobile',
      sorter: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      sorter: true,
      render: (text: React.ReactNode, row: any, index: number) => {
          if (row.status==0){
             return (<span>正常</span>)
          } else {
             return (<span>异常</span>)
          }
      },
      hideInSearch:true,
    },
    {
      title: '温度',
      dataIndex: 'temperature',
      sorter: true,
      renderText: (val: string) => `${val}`,
      valueEnum: {
        all: { text: '全部', temperature: 'all' },
        normal: { text: '正常', temperature: 'normal' },
        unnormal: { text: '异常', temperature: 'unnormal' },

      },

    },
    {
      title: '开始时间',
      dataIndex: 'createtime',
      sorter: true,
      valueType: 'dateTime',
      renderText: (val: number) => moment(val*1000).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '结束时间',
      dataIndex: 'endtime',
      sorter: true,
      valueType: 'dateTime',
      renderText: (val: number) => moment(val*1000).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];

  let pageSize: number = 20;

  return (

    <PageHeaderWrapper>

      <ProTable
        <TableListItem>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={(action, { selectedRows }) => [

          selectedRows && selectedRows.length > 0 && (
            <Dropdown
              overlay={
                <Menu
                  onClick={async e => {
                    if (e.key === 'remove') {
                      action.reload();
                    }
                  }}
                  selectedKeys={[]}
                >
                  <Menu.Item key="remove">批量删除</Menu.Item>
                  <Menu.Item key="approval">批量审批</Menu.Item>
                </Menu>
              }
            >
              <Button>
                批量操作 <DownOutlined />
              </Button>
            </Dropdown>
          ),
        ]}
        tableAlertRender={(selectedRowKeys, selectedRows) => (
          <div>
            已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;

          </div>
        )}

        request={params => query(params)}
        columns={columns}
        rowSelection={{}}
        pagination={{
          defaultCurrent: 1,
          defaultPageSize:pageSize,
        }}
      />

    </PageHeaderWrapper>
  );
};

export default TableList;

data.d.ts接口文件

export interface TableListItem {

  key: id;
  url: string;
  temperature: string;
  mobile: string;
  org_id:string;
  car_name:string;
  car_no:string;
  line_name:string;
  status:string;
  endtime:number;
}

export interface TableListPagination {
  total: number;
  pageSize: number;
  current: number;
  pageNum: number;

}

export interface TableListData {
  list: TableListItem[];
  pagination: Partial<TableListPagination>;
}

export interface TableListParams {
  sorter?: string;
  name?: string;
  key?: number;
  pageSize?: number;
  currentPage?: number;
}

service.ts

import request from '@/utils/request';
import { TableListParams } from './data.d';


export async function query(params?: TableListParams) {

  console.log("############################################");
  return  request('/api/allrecord/all', {
    params,
  });


}

 

看后台文件如何处理方法

<?php
namespace app\controller;

use app\AdminController;
use think\facade\Db;
use think\Request;
use app\model;



class Allrecord extends AdminController
{

    //列表
    public function all(){

        $pageSize = \think\facade\Config::get('global.pageSize');  //从global.php配置文件，获取pageSize值
        $pageNum = \think\facade\Config::get('global.pageNum');   //默认显示当前页面
        $pageSize = $this->request->has("pageSize")?$this->request->param('pageSize'):$pageSize;
        $pageNum = $this->request->has("pageNum")?$this->request->param('pageNum'):$pageNum;
        $pageNum = $this->request->has("current")?$this->request->param('current'):$pageNum; //兼容current当页码值
        //echo 'pageSize='.$pageSize.",pageNum=".$pageNum;
        $obj = new model\allrecord();
        //优先获取带来的参数，如果没有从包头去
        $org_id = $this->request->has("org_id")?$this->request->param('org_id'):"";
        if ($org_id==""){
            $org_id = $this->request->header('orgid');
        }

        if ($org_id > 0){
            $where[] = ['a.org_id','=',$org_id];
        }

        $car_id = $this->request->has("car_id")?$this->request->param('car_id'):0;
        if ($car_id>0){
            $where[] = ['a.car_id','=',$car_id];
        }

        $line_id = $this->request->has("line_id")?$this->request->param('line_id'):0;
        if ($line_id>0){
            $where[] = ['a.line_id','=',$line_id];
        }

        $mobile = $this->request->has("mobile")?$this->request->param('mobile'):0;
        if ($mobile != 0){
            //$where['mobile'] = $mobile;
            $where[] = ['a.mobile','=',$mobile];
        }

        $temperature = $this->request->has("temperature")?$this->request->param('temperature'):"";
        if ($temperature=="normal"){

            $where[] = ['a.temperature','<',37.3];

        } else if($temperature=="unnormal"){

            $where[] = ['a.temperature','>=',37.3];

        } else {
            //显示全部部数据，不过过滤条件
        }

        $createtime = $this->request->has("createtime")?$this->request->param('createtime'):0;
        if ($createtime != 0){

            $where[] = ['a.createtime','>=',strtotime($createtime)];
        }

        $endtime = $this->request->has("endtime")?$this->request->param('endtime'):0;

        if ($endtime != 0){
            $where[] = ['a.createtime','<=',strtotime($endtime)];   //结束时间
        }

        $car_name = $this->request->has("car_name")?$this->request->param('car_name'):0;
        if ($car_name>0){
            $where[] = ['d.name','=',$car_name];
        }

        $car_no = $this->request->has("car_no")?$this->request->param('car_no'):0;
        if ($car_no>0){
            $where[] = ['d.car_no','=',$car_no];
        }

        $line_name = $this->request->has("line_name")?$this->request->param('line_name'):0;
        if ($line_name>0){
            $where[] = ['c.name','=',$line_name];
        }

        //$map[] = ['name','like','think'];

        if ($endtime != 0){

            $field = " a.*,b.name as org_name,c.name as line_name,d.name as car_name,d.car_no,
                        CASE  WHEN a.temperature<37.3 THEN 0 ELSE  1 END as `status`, UNIX_TIMESTAMP('".$endtime."') as endtime ";

        } else {  //默认当前时间

            $field = " a.*,b.name as org_name,c.name as line_name,d.name as car_name,d.car_no,
                        CASE  WHEN a.temperature<37.3 THEN 0 ELSE  1 END as `status`,UNIX_TIMESTAMP() as endtime ";
        }




        $list = $obj->field($field)
                ->alias('a')
                ->leftJoin('hy_org b','a.org_id = b.id')
                ->leftJoin('hy_line c','a.car_id = c.id')
                ->leftJoin('hy_car d','a.line_id = d.id')
                ->where($where)
                ->order('id', 'desc')
                ->paginate([
                  'list_rows'=> $pageSize,
                  'page' => $pageNum,
                ]);

        //print_r($obj->getLastSql());
        echo json_encode($list);

    }

}

走读一下代码就知道其中逻辑。原理就是我们通过接口文件造临时的数据类型的参数，让他符合protable的条件，让其自动生成一些参数。这样的话就没啥问题，可以继续用protable。让后台代码，迁就与前端的组件实现，尽可能的减少前端代码

做完前后端才发现，前后端配合还是可以减少工作量的。