system-copyright-react/src/route/TrademarkMall/TrademarkMall.tsx

import { useState, useEffect } from 'react'
import nothingImg from '../../static/appimgs/nothing.png'
import { useLocation, useNavigate } from 'react-router-dom';
import { trademarkList } from '../../request/api'
import { showImage } from '../../request/request'
import type { TableProps } from 'antd';
import {
  message, Spin,
  Pagination,
  Table, Image
} from 'antd';
export default function TrademarkMall() {
  const [messageApi, contextHolder] = message.useMessage();
  const { state } = useLocation()
  const nav = useNavigate();
  const height = window.innerHeight - 180;
  const columns: TableProps<any>['columns'] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      fixed: 'left',
      width: 90,
      render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始

    },

    {
      title: '服务类型',
      dataIndex: 'trademarkModeName',
      fixed: 'left',
      align: 'center',
      key: 'trademarkModeName',
      width: 150,
      ellipsis: {
        showTitle: true,
      },

    },
    {
      title: '类型/名称',
      fixed: 'left',
      dataIndex: 'trademarkName',
      key: 'trademarkName',
      align: 'center',
      ellipsis: {
        showTitle: true,
      },
      width: 200,
      render: (_text, record) => (
        <span>
          {record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : '未知'} <span style={{
            display: record.trademarkType == 'image' ? 'none' : 'unset',
          }}>/{record.trademarkName}</span>
          {/* {record} */}
        </span>
      )

    },

    {
      title: '商标图样',
      dataIndex: 'trademarkPhoto',
      align: 'center',
      key: 'trademarkPhoto',
      width: 200,
      render: (text) => (
        <Image src={showImage(text, false)}
          height={100}
          style={{
            maxWidth: 200,
          }}
        >

        </Image>
      )
    },
    {
      title: '状态',
      dataIndex: 'trademarkStatus',
      align: 'center',
      key: 'trademarkStatus',
      width: 100,
      render: (text) => (
        <span>
          {text == '-1' ?
            <span >已取消</span>
            : text == '0' ?
              <span
                style={{
                  color: 'skyblue',
                }}
              >待付款</span>
              : text == '1' ?
                <span

                  style={{
                    color: 'green',
                  }}
                >已付款</span>
                :
                <span style={{
                  color: 'rgb(122 126 130)',
                }}>未知</span>
          }
        </span>
      )
    },
    // {
    //   title: '申请人',
    //   // 使用数组形式访问嵌套对象属性
    //   dataIndex: ['trademarkUserDTO', 'name'],
    //   align: 'center',
    //   // 修改 key 保证唯一性
    //   key: 'trademarkUserDTOName',
    //   width: 150,
    //   render: (text) => (
    //     <span>
    //       {text || '-'}
    //     </span>
    //   )
    // },
    // // {
    // //   title: '申请人证件号',
    // //   dataIndex:  ['trademarkUserDTO', 'name'],
    // //   align: 'center',
    // //   key: 'appOrderId',
    // //   width: 150,
    // //   render: (text) => (
    // //     <span>
    // //       {text ? text : '未完善'}
    // //     </span>
    // //   )
    // // },
    // {
    //   title: '联系人',
    //   // 使用数组形式访问嵌套对象属性
    //   dataIndex: ['trademarkUserDTO', 'contactName'],
    //   align: 'center',
    //   // 修改 key 保证唯一性
    //   key: 'trademarkUserDTOContactName',
    //   width: 150,
    //   render: (text) => (
    //     <span>
    //       {text || '-'}
    //     </span>
    //   )
    // },
    {
      title: '操作',
      // dataIndex: 'contractManagementId',
      align: 'center',
      // key: 'appOrderId',
      width: 150,
      // bordeLeft: true,
      fixed: 'right',
      render: (record) => (


        <div style={{
          cursor: 'pointer',
          color: '#007FFF',


        }} onClick={() => {
          nav(`/trademark-ai-edit/${record.trademarkId}`, {
            // state: {
            //   trademarkMode: record.trademarkMode, //申请类型id
            //   trademarkModeName: record.trademarkModeName, //申请类型名称
            //   trademarkId: record.trademarkId, //商标id

            // }
          })
          // console.log(record.checkStatus);


        }}>编辑</div>


      )

    },
  ]
  const [data, setData] = useState<any>([])
  const [loading, setLoading] = useState(false)
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const getTrademarkList = async (page: any) => {
    try {
      setLoading(true)
      const res: any = await trademarkList({
        keywords: state && state.keywords ? state.keywords : '',
        rows: 10,
        page: page
      })
      console.log('结果', res);
      setData(res.rows)
      setTotal(res.total)
      setLoading(false)

    } catch (error: any) {
      setLoading(false)
      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error)
      }
    } finally {
      setLoading(false)
    }
  }
  // useEffect(() => {
  //   // console.log(state.keywords);
  //   getTrademarkList(1)
  //   // console.log(1);

  // }, [])
  useEffect(() => {
    // console.log(state.keywords);
    getTrademarkList(1)
  }, [state])

  return (
    <Spin tip="正在处理，请稍后..." size="small" spinning={loading}>
      <div className='appElectionBox' style={{ height: `${height}px`, overflow: 'auto' }}>
        {contextHolder}

        {data.length <= 0 ? (<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>

          <img src={nothingImg} alt="" width={368} height={355} />
          <div style={{
            marginTop: 50,
            fontSize: 16,
            color: '#D0D0D0'
          }}>暂无数据</div>
        </div>) : (
          <div className='' >
            <div style={{
              height: `${height - 80}px`,
              // background: "pink" ,
              paddingTop: 20
            }}>

              <Table
                scroll={{ y: `${height - 150}px` }}
                dataSource={data}
                columns={columns}
                bordered
                // pagination={{
                //   defaultPageSize: 10, // 设置默认一页显示 5 条数据
                // }}
                pagination={false} // 不显示分页
                style={{ textAlign: 'center' }} // 设置表格内容居中显示
                rowKey="trademarkId" // 指定数据项的唯一标识符
                locale={{ emptyText: '暂无数据' }}
              ></Table>

            </div>
            <div className='product-release-pagination'>
              <Pagination
                showSizeChanger={false}
                current={page} total={total} defaultPageSize={10} onChange={(page) => {
                  setPage(page)
                  getTrademarkList(page)
                }} />
            </div>

          </div>
        )}
      </div>
    </Spin>
  )
}