346 lines
9.9 KiB
TypeScript
346 lines
9.9 KiB
TypeScript
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 defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
|
||
console.log(page)
|
||
setPage(page)
|
||
}} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|