tieTa3D/src/pages/B4JsonPush/index.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { B4FromDataType } from './data'
import { B4_APIgetlist, B4_APIgetlistAll } from '@/store/action/B4JsonPush'
import { RootState } from '@/store'
import { B4tableType } from '@/types'
import { B1options2, B1options2Obj } from '../B1Plan/data'
import { Button, Cascader, Input, Select, Table, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { MessageFu } from '@/utils/message'
import dayjs from 'dayjs'
import ExportJsonExcel from 'js-export-excel'
import { mapDataAll1 } from '../C1User/AddUser/city'

function B4JsonPush() {
  const dispatch = useDispatch()

  // 筛选和分页
  const [tableSelect, setTableSelect] = useState<B4FromDataType>({
    siteArr: undefined,
    province: '',
    city: '',
    region: '',
    pmUser: '',
    jsonStatus: '',
    linkStatus: '',
    searchKey: '',
    pageSize: 10,
    pageNum: 1
  })

  const tableSelectRef = useRef({} as B4FromDataType)

  useEffect(() => {
    tableSelectRef.current = { ...tableSelect }
  }, [tableSelect])

  // 点击搜索的 时间戳
  const [timeKey, setTimeKey] = useState(-1)

  // 发送接口的函数
  const getListFu = useCallback(() => {
    const objTemp: any = {}

    if (tableSelectRef.current.siteArr) {
      const temp = tableSelectRef.current.siteArr
      objTemp.province = temp[0] || ''
      objTemp.city = temp[1] || ''
      objTemp.region = temp[2] || ''
    }

    const obj = {
      ...tableSelectRef.current,
      ...objTemp
    }
    dispatch(B4_APIgetlist(obj))
  }, [dispatch])

  useEffect(() => {
    getListFu()
  }, [getListFu, timeKey])

  // 输入框的改变
  const txtChangeFu = useCallback(
    (txt: string, key: 'pmUser' | 'searchKey') => {
      setTableSelect({ ...tableSelect, [key]: txt })
    },
    [tableSelect]
  )

  // 点击搜索
  const clickSearch = useCallback(() => {
    setTableSelect({ ...tableSelect, pageNum: 1 })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [tableSelect])

  // 点击重置
  const [inputKey, setInputKey] = useState(1)
  const resetSelectFu = useCallback(() => {
    // 把2个输入框和时间选择器清空
    setInputKey(Date.now())
    setTableSelect({
      siteArr: undefined,
      province: '',
      city: '',
      region: '',
      pmUser: '',
      jsonStatus: '',
      linkStatus: '',
      searchKey: '',
      pageSize: 10,
      pageNum: 1
    })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [])

  // 从仓库获取列表
  const B4TableList = useSelector((state: RootState) => state.B4JsonPush.B4TableList)

  // 页码变化
  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setTableSelect({ ...tableSelect, pageNum, pageSize })
      setTimeout(() => {
        setTimeKey(Date.now())
      }, 50)
    },
    [tableSelect]
  )

  const columns = useMemo(() => {
    return [
      {
        title: '机房编码',
        render: (item: B4tableType) => item.roomNum || '（空）'
      },
      {
        title: '站址地区',
        render: (item: B4tableType) =>
          !item.province && !item.city && !item.region
            ? '（空）'
            : `${item.province}${item.city ? '-' + item.city : ''}${
                item.region ? '-' + item.region : ''
              }`
      },
      {
        title: '项目经理',
        render: (item: B4tableType) => {
          if (item.creatorId === 1) return '管理员'
          else {
            return item.pmName || '（空）'
          }
        }
      },
      {
        title: '场景码',
        render: (item: B4tableType) => item.sceneCode || '（空）'
      },
      {
        title: '链接推送状态',
        render: (item: B4tableType) => (
          <>
            {Reflect.get(B1options2Obj, item.pushLinkStatus) || '（空）'}
            <span style={{ cursor: 'pointer' }} hidden={!item.pushLinkDesc}>
              <Tooltip title={item.pushLinkDesc}>
                &nbsp;
                <QuestionCircleOutlined rev={undefined} />
              </Tooltip>
            </span>
          </>
        )
      },
      {
        title: '状态更新时间',
        render: (item: B4tableType) => item.pushLinkTime || '（空）'
      },
      {
        title: 'Json推送状态',
        render: (item: B4tableType) => (
          <>
            {Reflect.get(B1options2Obj, item.jsonStatus) || '（空）'}
            <span style={{ cursor: 'pointer' }} hidden={!item.jsonDesc}>
              <Tooltip title={item.jsonDesc}>
                &nbsp;
                <QuestionCircleOutlined rev={undefined} />
              </Tooltip>
            </span>
          </>
        )
      },
      {
        title: '状态更新时间',
        render: (item: B4tableType) => item.jsonUpdateTime || '（空）'
      }
    ]
  }, [])

  // 点击导出
  const deriveFu = useCallback(async () => {
    if (B4TableList.total > 30000)
      return MessageFu.warning('只支持导出最多30000条数据。请增加筛选条件，并重新尝试')

    if (B4TableList.list.length === 0) return MessageFu.warning('当前搜索条件没有数据!')
    const name = 'Json推送' + dayjs(new Date()).format('YYYY-MM-DD HH:mm')

    const objTemp: any = {}

    if (tableSelectRef.current.siteArr) {
      const temp = tableSelectRef.current.siteArr
      objTemp.province = temp[0] || ''
      objTemp.city = temp[1] || ''
      objTemp.region = temp[2] || ''
    }

    const res = await B4_APIgetlistAll({
      ...tableSelect,
      ...objTemp,
      pageNum: 1,
      pageSize: 99999
    })
    if (res.code === 0) {
      if (res.data.records.length <= 0) return MessageFu.warning('当前搜索条件没有数据!')
      const option = {
        fileName: name,
        datas: [
          {
            sheetData: res.data.records.map((v: B4tableType) => ({
              roomNum: v.roomNum || '（空）',
              myCity:
                !v.province && !v.city && !v.region
                  ? '（空）'
                  : `${v.province}${v.city ? '-' + v.city : ''}${v.region ? '-' + v.region : ''}`,
              pmName: v.creatorId === 1 ? '管理员' : v.pmName || '（空）',
              sceneCode: v.sceneCode || '（空）',
              pushLinkStatus: Reflect.get(B1options2Obj, v.pushLinkStatus) || '（空）',
              pushLinkDesc: v.pushLinkDesc || '（空）',
              pushLinkTime: v.pushLinkTime || '（空）',
              jsonStatus: Reflect.get(B1options2Obj, v.jsonStatus) || '（空）',
              jsonDesc: v.jsonDesc || '（空）',
              jsonUpdateTime: v.jsonUpdateTime || '（空）'
            })),
            sheetName: name,
            sheetFilter: [
              'roomNum',
              'myCity',
              'pmName',
              'sceneCode',
              'pushLinkStatus',
              'pushLinkDesc',
              'pushLinkTime',
              'jsonStatus',
              'jsonDesc',
              'jsonUpdateTime'
            ],
            sheetHeader: [
              '机房编码',
              '站址地区',
              '项目经理',
              '场景码',
              '链接推送状态',
              '链接推送状态描述',
              '状态更新时间',
              'Json推送状态',
              'Json推送状态描述',
              '状态更新时间'
            ],
            columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
          }
        ]
      }

      const toExcel = new ExportJsonExcel(option) //new
      toExcel.saveExcel() //保存
    }
  }, [B4TableList.list.length, B4TableList.total, tableSelect])

  return (
    <div className={styles.B4JsonPush}>
      <div className='pageTitle'>Json推送</div>
      {/*顶部筛选 */}
      <div className='B4top'>
        <div className='B4topSon'>
          <div className='B4topRow'>
            <span>搜索项：</span>
            <Input
              key={inputKey}
              maxLength={24}
              style={{ width: 260 }}
              placeholder='请输入机房编码/场景码，最多24字'
              allowClear
              onChange={e => txtChangeFu(e.target.value, 'searchKey')}
            />
          </div>

          <div className='B4topRow'>
            <span>站址地区：</span>
            <Cascader
              changeOnSelect
              value={tableSelect.siteArr}
              style={{ width: 200 }}
              options={mapDataAll1}
              placeholder='全部'
              onChange={e => setTableSelect({ ...tableSelect, siteArr: e as string[] })}
            />
          </div>

          <div className='B4topRow'>
            <span>项目经理：</span>
            <Input
              key={inputKey}
              maxLength={10}
              style={{ width: 200 }}
              placeholder='请输入姓名,最多10字'
              allowClear
              onChange={e => txtChangeFu(e.target.value, 'pmUser')}
            />
          </div>
        </div>
        <div className='B4topSon B4topSon2'>
          <div>
            <div className='B4topRow'>
              <span>链接推送状态：</span>
              <Select
                style={{ width: 194 }}
                value={tableSelect.linkStatus}
                onChange={e => setTableSelect({ ...tableSelect, linkStatus: e })}
                options={B1options2}
              />
            </div>
            <div className='B4topRow'>
              <span>Json推送状态：</span>
              <Select
                style={{ width: 194 }}
                value={tableSelect.jsonStatus}
                onChange={e => setTableSelect({ ...tableSelect, jsonStatus: e })}
                options={B1options2}
              />
            </div>
          </div>
          <div>
            <Button onClick={resetSelectFu}>重置</Button>&emsp;
            <Button type='primary' onClick={clickSearch}>
              查询
            </Button>
            &emsp;
            <Button type='primary' onClick={deriveFu}>
              导出表格
            </Button>
          </div>
        </div>
      </div>

      {/* 表格主体 */}
      <div className='tableMain'>
        <Table
          scroll={{ y: 578 }}
          dataSource={B4TableList.list}
          columns={columns}
          rowKey='id'
          pagination={{
            showQuickJumper: true,
            position: ['bottomCenter'],
            showSizeChanger: true,
            current: tableSelect.pageNum,
            pageSize: tableSelect.pageSize,
            total: B4TableList.total,
            onChange: paginationChange()
          }}
        />
      </div>
      {/*  右下角的列表数量 */}
      <div className='tableNumBox'>
        共 <span>{B4TableList.total}</span> 条数据
      </div>
    </div>
  )
}

const MemoB4JsonPush = React.memo(B4JsonPush)

export default MemoB4JsonPush