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

import './copyrightG-goods.css'
import {
  Select, DatePicker, Button, Table,
  // message,
  Space, Empty, Pagination, InputNumber
} from 'antd';
import type { InputNumberProps } from 'antd';
// import type { TableColumnsType } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { useState } from 'react';
const { Column } = Table;
export default function CopyrightGgoods() {
  const height = window.innerHeight - 180;
  // const [messageApi, contextHolder] = message.useMessage();
  const dateFormat = 'YYYY年MM月DD日';
  const [minPrice, setMinPrice] = useState<any>() //最低价格
  const [maxPrice, setMaxPrice] = useState<any>() //最高价格
  const [date, setDate] = useState<any>() //获取时间
  const [sort, setSort] = useState<any>() //排序
  const [language, setLanguage] = useState<any>() //开发语言
  const [type, setType] = useState<any>() //软著类型
  const [page, setPage] = useState(1) //分页
  // 更改最低价格
  const minPriceChange: InputNumberProps['onChange'] = (value) => {
    console.log('changed', value);
    setMinPrice(value)
  };
  // 更改最高价格
  const maxPriceChange: InputNumberProps['onChange'] = (value) => {
    console.log('changed', value);
    setMaxPrice(value)
  };
  // 更改价格排序
  const sortChange = (value: string) => {
    console.log(`selected ${value}`)
    setSort(value)
  }
  // 更改开发语言
  const languageChange = (value: string) => {
    console.log(`selected ${value}`)
    setLanguage(value)
  }
  // 软著类型更改
  const typeChange = (value: string) => {
    console.log(`selected ${value}`);
    setType(value)
  }
  // 获取时间更改
  const dateChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setDate(date)
  };
  // 点击搜索
  const onSearch = () => {
    setPage(1)
    console.log(minPrice, maxPrice, date, sort, language, type);

  }
  // 初始化搜索条件
  const init = () => {
    setMinPrice(undefined)
    setMaxPrice(undefined)
    setDate(undefined)
    setSort(undefined)
    setLanguage(undefined)
    setType(undefined)
  }
  // 点击清除
  const clearKeyWords = () => {
    setPage(1)
    init()
  }
  interface DataType {
    name: string
    short: string
    number: string
    price: string
    version: string
    time: string
    language: string
  }

  const data: DataType[] = [
    {
      name: '智能管理系统',
      short: '简称',
      number: '312345678912345617891',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: '商城管理系统',
      short: '简称',
      number: '11234567891234567892',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567893',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567894',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567895',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567896',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567897',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567898',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567899',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
    {
      name: 'xx系统',
      short: '简称',
      number: '21234567891234567890',
      price: '5.00',
      version: '1-1-1',
      time: '2020-04-19 15：42:21',
      language: 'java'
    },
  ];



  return (
    <div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
      {/* {contextHolder} */}
      <div className='copyrightG-goods-search'>
        <InputNumber placeholder="最低价格" min={0}
          style={{
            width: 100,
            // height: 36,
            marginRight: 12
          }}
          value={minPrice}
          onChange={minPriceChange}
        />
        至
        <InputNumber placeholder="最高价格" min={0} style={{
          width: 100,
          // height: 36,
          marginRight: 12,
          marginLeft: 12
        }}
          value={maxPrice}
          onChange={maxPriceChange}
        />

        <DatePicker placeholder="软著获取时间"
          style={{ width: 198, height: 36, marginRight: 12 }}
          format={dateFormat}
          locale={locale}
          onChange={dateChange}
          value={date}
        />
        <Select
          // defaultValue="lucy"
          placeholder='价格排序'
          style={{ width: 100, height: 36, marginRight: 12 }}
          onChange={sortChange}
          options={[
            { value: 'rise', label: '升序' },
            { value: 'drop', label: '降序' },
          ]}
          value={sort}
        />
        <Select
          // defaultValue="lucy"
          placeholder='选择开发语言'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={languageChange}
          options={[
            { value: 'java', label: 'java' },
            { value: 'php', label: 'php' },
          ]}
          value={language}
        />
        <Select
          // defaultValue="lucy"
          placeholder='选择软著类型'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={typeChange}
          options={[
            { value: 'person', label: '个人' },
            { value: 'lucy', label: '公司' },
          ]}
          value={type}
        />
        <Button type="primary"
          style={{
            height: 36,
            // backgroundColor: '#FF9F08'
          }}

          icon={<SearchOutlined />}
          onClick={onSearch}
        >
          搜索
        </Button>
        <Button
          style={{
            height: 36,
            marginLeft: 10,
            // backgroundColor: '#FF9F08'
          }}
          icon={<ClearOutlined />}
          onClick={clearKeyWords}
        >
          清除
        </Button>
      </div>
      <div className='copyrightG-goods-table'>
        {/* 表格 */}
        {data.length == 0 ? (
          <div className='nodata' style={{ height: `${height - 93}px` }}>
            <Empty
              description={
                '暂无数据'
              } />
          </div>) : (
          <div>
            <div style={{ height: `${height - 130}px` }}>
              <Table
                scroll={{ y: `${height - 190}px` }}
                dataSource={data}
                pagination={false} // 不显示分页
                style={{ textAlign: 'center' }} // 设置表格内容居中显示
                rowKey="number" // 指定数据项的唯一标识符
              >
                <Column
                  width={70}
                  title="序号" render={(_text, _record, index: number) => (
                    index + 1
                  )} align="center" />
                <Column
                  title="软著名称"
                  dataIndex="name"
                  align="center"
                  render={(text) => (
                    <span style={{ color: '#1B8BD2', fontSize: '16px', fontWeight: '700' }}>{text}</span>
                  )}
                />
                <Column
                  title="软著简称"
                  dataIndex="short"
                  align="center"
                />
                <Column
                  title="软著证号"
                  dataIndex="number"
                  align="center"
                // ellipsis
                />
                <Column title="售价" dataIndex="price" align="center"
                  render={(text) => (
                    <span style={{ color: '#FF5D15', fontSize: '24px', fontWeight: '700' }}>{text}</span>
                  )} />
                <Column title="软著版本" dataIndex="version" align="center" />
                <Column title="软著取得时间" dataIndex="time" align="center" />
                <Column title="软著开发语言" dataIndex="language" align="center" />
                {/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
                <Column
                  align="center"
                  title="软著电子版"
                  render={(_text, record: any) => (
                    <Space size="middle">
                      <span className='copyrightG-goods-table-btn' onClick={() => {
                        console.log(record.number);

                      }}>预览</span>
                    </Space>
                  )}
                />
              </Table>
            </div>
            {/* defaultCurrent: 默认当前页数  total:数据总数 defaultPageSize:'页面显示几条'  */}
            <div className='product-release-pagination' >
              <Pagination
                showSizeChanger={false}
                defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
                  console.log(page)
                  setPage(page)
                }} />
            </div>
          </div>
        )}


      </div>
    </div>
  )
}