暂存
This commit is contained in:
xixi
parent
e0a11202cd
commit
f4cd0bfdf2
@ -2,23 +2,76 @@ import './copyrightG-goods.css'
|
||||
import {
|
||||
Select, DatePicker, Button, Table,
|
||||
// message,
|
||||
Space, Input, Empty, Pagination
|
||||
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 belongTypeChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
console.log(date, dateString);
|
||||
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 height = window.innerHeight - 180;
|
||||
// 更改最高价格
|
||||
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
|
||||
@ -125,49 +178,68 @@ export default function CopyrightGgoods() {
|
||||
|
||||
|
||||
return (
|
||||
<div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'hidden' }}>
|
||||
<div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||
{/* {contextHolder} */}
|
||||
<div className='copyrightG-goods-search'>
|
||||
<Input placeholder="最低价格" type="number" min={0}
|
||||
style={{ width: 198, height: 36, marginRight: 12 }} />
|
||||
<InputNumber placeholder="最低价格" min={0}
|
||||
style={{
|
||||
width: 100,
|
||||
// height: 36,
|
||||
marginRight: 12
|
||||
}}
|
||||
value={minPrice}
|
||||
onChange={minPriceChange}
|
||||
/>
|
||||
至
|
||||
<Input placeholder="最高价格" type="number" min={0} style={{ width: 198, height: 36, marginRight: 12, marginLeft: 12 }} />
|
||||
<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={onChange}
|
||||
onChange={dateChange}
|
||||
value={date}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue="lucy"
|
||||
placeholder='价格排序'
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
onChange={belongTypeChange}
|
||||
style={{ width: 100, height: 36, marginRight: 12 }}
|
||||
onChange={sortChange}
|
||||
options={[
|
||||
{ value: 'person', label: '升序' },
|
||||
{ value: 'lucy', label: '降序' },
|
||||
{ value: 'rise', label: '升序' },
|
||||
{ value: 'drop', label: '降序' },
|
||||
]}
|
||||
value={sort}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue="lucy"
|
||||
placeholder='选择开发语言'
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
onChange={belongTypeChange}
|
||||
onChange={languageChange}
|
||||
options={[
|
||||
{ value: 'person', label: 'java' },
|
||||
{ value: 'lucy', label: 'php' },
|
||||
{ value: 'java', label: 'java' },
|
||||
{ value: 'php', label: 'php' },
|
||||
]}
|
||||
value={language}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue="lucy"
|
||||
placeholder='选择软著类型'
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
onChange={belongTypeChange}
|
||||
onChange={typeChange}
|
||||
options={[
|
||||
{ value: 'person', label: '111' },
|
||||
{ value: 'lucy', label: '222' },
|
||||
{ value: 'person', label: '个人' },
|
||||
{ value: 'lucy', label: '公司' },
|
||||
]}
|
||||
value={type}
|
||||
/>
|
||||
<Button type="primary"
|
||||
style={{
|
||||
@ -175,7 +247,9 @@ export default function CopyrightGgoods() {
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
|
||||
icon={<SearchOutlined />}>
|
||||
icon={<SearchOutlined />}
|
||||
onClick={onSearch}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<Button
|
||||
@ -184,7 +258,9 @@ export default function CopyrightGgoods() {
|
||||
marginLeft: 10,
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
icon={<ClearOutlined />}>
|
||||
icon={<ClearOutlined />}
|
||||
onClick={clearKeyWords}
|
||||
>
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
@ -198,13 +274,13 @@ export default function CopyrightGgoods() {
|
||||
} />
|
||||
</div>) : (
|
||||
<div>
|
||||
<div style={{ height: `${height - 130}px`}}>
|
||||
<div style={{ height: `${height - 130}px` }}>
|
||||
<Table
|
||||
scroll={{ y: `${height - 190}px` }}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||
}}
|
||||
// rowSelection={{
|
||||
// type: 'checkbox',
|
||||
// // selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||
// }}
|
||||
|
||||
dataSource={data}
|
||||
// pagination={{
|
||||
@ -214,11 +290,11 @@ export default function CopyrightGgoods() {
|
||||
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||||
rowKey="number" // 指定数据项的唯一标识符
|
||||
>
|
||||
<Column
|
||||
width={70}
|
||||
title="序号" render={(_text, _record, index: number) => (
|
||||
index + 1
|
||||
)} align="center" />
|
||||
<Column
|
||||
width={70}
|
||||
title="序号" render={(_text, _record, index: number) => (
|
||||
index + 1
|
||||
)} align="center" />
|
||||
<Column
|
||||
title="软著名称"
|
||||
dataIndex="name"
|
||||
@ -236,7 +312,7 @@ export default function CopyrightGgoods() {
|
||||
title="软著证号"
|
||||
dataIndex="number"
|
||||
align="center"
|
||||
// ellipsis
|
||||
// ellipsis
|
||||
/>
|
||||
<Column title="售价" dataIndex="price" align="center"
|
||||
render={(text) => (
|
||||
@ -261,9 +337,10 @@ export default function CopyrightGgoods() {
|
||||
</Table>
|
||||
</div>
|
||||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||||
<div className='product-release-pagination'>
|
||||
<Pagination defaultCurrent={1} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
<div className='product-release-pagination' >
|
||||
<Pagination defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
console.log(page)
|
||||
setPage(page)
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
.copyrightG-goods {
|
||||
margin-top: 18px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 21px 19px 21px 26px;
|
||||
padding: 21px 19px 0px 26px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -14,4 +14,7 @@
|
||||
font-size: 16px;
|
||||
color: #1477BD;
|
||||
cursor: pointer;
|
||||
}
|
||||
.copyrightG-goods-search .css-dev-only-do-not-override-1ae8k9u.ant-input-number .ant-input-number-input{
|
||||
height: 33px;
|
||||
}
|
||||
@ -3,27 +3,34 @@ import './product-release.css'
|
||||
import {
|
||||
Select, DatePicker, Button,
|
||||
// message,
|
||||
Checkbox, Empty, Switch, Modal, Pagination
|
||||
// Checkbox,
|
||||
Empty, Switch, Modal, Pagination
|
||||
} from 'antd';
|
||||
import EditModal from './components/EditModal/EditModal'
|
||||
// import type { CheckboxProps } 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 React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import dayjs, { } from 'dayjs';
|
||||
export default function ProductRelease() {
|
||||
const height = window.innerHeight - 180;
|
||||
// const [messageApi, contextHolder] = message.useMessage();
|
||||
const dateFormat = 'YYYY年MM月DD日';
|
||||
// 所属人类型
|
||||
const [belongType, setBelongType] = useState<any>(undefined)
|
||||
const [belongType, setBelongType] = useState<any>() // 所属人类型
|
||||
const [date, setDate] = useState<any>() // 日期
|
||||
const [language, setLanguage] = useState<any>() // 开发者语言
|
||||
const [type, setType] = useState<any>() //软著类型
|
||||
const [page,setPage] = useState(1) // 分页
|
||||
const [editModalOpen, setEditModalOpen] = useState(false) // 控制编辑弹窗
|
||||
const [delModalOpen, setDelModalOpen] = useState(false) // 控制删除弹窗
|
||||
const [sellModalOpen, setSellModalOpen] = useState(false) // 控制出售弹窗
|
||||
// 更改所属人类型
|
||||
const belongTypeChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
setBelongType(value)
|
||||
}
|
||||
// 选择日期
|
||||
const [date, setDate] = useState<any>(undefined)
|
||||
// 更改日期
|
||||
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
console.log(date, dateString);
|
||||
setDate(date)
|
||||
@ -32,12 +39,10 @@ export default function ProductRelease() {
|
||||
|
||||
};
|
||||
// 选择开发者语言
|
||||
const [language, setLanguage] = useState<any>(undefined)
|
||||
const selectLanguage = (value: string) => {
|
||||
setLanguage(value)
|
||||
}
|
||||
// 选择软著类型
|
||||
const [type, setType] = useState<any>(undefined)
|
||||
const selectType = (value: string) => {
|
||||
setType(value)
|
||||
}
|
||||
@ -50,25 +55,31 @@ export default function ProductRelease() {
|
||||
}
|
||||
// 点击搜索
|
||||
const searchKeyWords = () => {
|
||||
setPage(1)
|
||||
console.log(
|
||||
belongType,language,dayjs(date).format(dateFormat),type
|
||||
// dayjs(date).format(dateFormat)
|
||||
belongType, language, date, type
|
||||
);
|
||||
|
||||
if (date) {
|
||||
console.log(dayjs(date).format(dateFormat));
|
||||
}
|
||||
}
|
||||
|
||||
// 点击清除
|
||||
const clearKeyWords = () => {
|
||||
init()
|
||||
setPage(1)
|
||||
// 重新获取数据
|
||||
}
|
||||
|
||||
|
||||
// 选框选择时触发事件
|
||||
const checkChange = (e: any, item: any) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
console.log(e);
|
||||
if (e.target.checked == true) {
|
||||
console.log(item.order);
|
||||
}
|
||||
};
|
||||
// const checkChange = (e: any, item: any) => {
|
||||
// console.log(`checked = ${e.target.checked}`);
|
||||
// console.log(e);
|
||||
// if (e.target.checked == true) {
|
||||
// console.log(item.order);
|
||||
// }
|
||||
// };
|
||||
// 开关滑动触发
|
||||
const opneChange = (e: any, item: any) => {
|
||||
// 开启
|
||||
@ -79,24 +90,17 @@ export default function ProductRelease() {
|
||||
console.log('关闭', item.order);
|
||||
}
|
||||
}
|
||||
// 控制编辑弹窗
|
||||
const [editModalOpen, setEditModalOpen] = useState(false)
|
||||
|
||||
// 点击编辑
|
||||
const edit = (item: any) => {
|
||||
console.log(item.order);
|
||||
setEditModalOpen(true)
|
||||
};
|
||||
// 控制删除弹窗
|
||||
const [delModalOpen, setDelModalOpen] = useState(false)
|
||||
// 点击删除
|
||||
const del = (item: any) => {
|
||||
console.log(item.order);
|
||||
setDelModalOpen(true)
|
||||
};
|
||||
|
||||
|
||||
// 控制出售弹窗
|
||||
const [sellModalOpen, setSellModalOpen] = useState(false)
|
||||
// 点击出售
|
||||
const sell = (item: any) => {
|
||||
console.log(item.order);
|
||||
@ -164,11 +168,15 @@ export default function ProductRelease() {
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
|
||||
},[])
|
||||
|
||||
|
||||
return (
|
||||
<div className='product-release' style={{ height: `${height}px`, overflow: 'hidden' }}>
|
||||
<div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||
{/* {contextHolder} */}
|
||||
<div className='product-release-search'>
|
||||
<Select
|
||||
@ -267,10 +275,10 @@ export default function ProductRelease() {
|
||||
</tr>
|
||||
<tr style={{ background: '#F7F7F7', height: 45 }}>
|
||||
<td colSpan={9}>
|
||||
<Checkbox style={{ marginLeft: 16 }} onChange={
|
||||
{/* <Checkbox style={{ marginLeft: 16 }} onChange={
|
||||
(event) => checkChange(event, item)
|
||||
}></Checkbox>
|
||||
<span style={{ marginLeft: 32 }}>
|
||||
}></Checkbox> */}
|
||||
<span style={{ marginLeft: 55 }}>
|
||||
编号: {item.order}
|
||||
</span>
|
||||
<span style={{ marginLeft: 45 }}>
|
||||
@ -301,7 +309,9 @@ export default function ProductRelease() {
|
||||
</td>
|
||||
<td>{item.status}</td>
|
||||
<td>
|
||||
<span className='product-release-table-btn' onClick={() => edit(item)}>编辑</span>
|
||||
<span className='product-release-table-btn' onClick={() => {
|
||||
edit(item)
|
||||
}}>编辑</span>
|
||||
<span className='product-release-table-btn product-btn' onClick={() => del(item)}>删除</span>
|
||||
<span className='product-release-table-btn product-btn' onClick={() => sell(item)}>出售</span>
|
||||
<span className='product-release-table-btn product-btn' onClick={() => submit(item)}>提交审核</span>
|
||||
@ -325,8 +335,9 @@ export default function ProductRelease() {
|
||||
|
||||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||||
<div className='product-release-pagination'>
|
||||
<Pagination defaultCurrent={1} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
console.log(page)
|
||||
<Pagination defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
// console.log(page)
|
||||
setPage(page)
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -173,7 +173,6 @@ export default function EditModal(props: any) {
|
||||
showUploadList={false}
|
||||
action={uploadImageUrl()}
|
||||
headers={{ 'X-USER-ID': DevUserId }}
|
||||
|
||||
beforeUpload={beforeUpload}
|
||||
onChange={handleChange}
|
||||
onRemove={() => {
|
||||
@ -183,7 +182,7 @@ export default function EditModal(props: any) {
|
||||
])
|
||||
}}
|
||||
>
|
||||
{logoImgArray.length > 0 ? <img src={logoImgArray[0].url} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
|
||||
{logoImgArray.length > 0 ? <img src={logoImgArray[0].url} alt="avatar" style={{ width: '100%',height:'100%' }} /> : uploadButton}
|
||||
</Upload>
|
||||
</div>
|
||||
<div style={{ color: '#919191', marginRight: '27px' }}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.product-release {
|
||||
margin-top: 18px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 21px 19px 21px 26px;
|
||||
padding: 21px 19px 0px 26px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -8,17 +8,47 @@ import {
|
||||
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 TradingGoods() {
|
||||
const height = window.innerHeight - 180;
|
||||
// const [messageApi, contextHolder] = message.useMessage();
|
||||
const dateFormat = 'YYYY年MM月DD日';
|
||||
const belongTypeChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
const [startTime, setStartTime] = useState<any>() //开始时间
|
||||
const [endTime, setEndTime] = useState<any>() //结束时间
|
||||
const [orderStatus, setOrderStatus] = useState<any>() //订单状态
|
||||
const [page,setPage] = useState(1) //分页
|
||||
// 更改开始时间
|
||||
const startTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
console.log(date, dateString);
|
||||
setStartTime(date)
|
||||
};
|
||||
const height = window.innerHeight - 180;
|
||||
// 更改结束时间
|
||||
const endTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
console.log(date, dateString);
|
||||
setEndTime(date)
|
||||
};
|
||||
// 订单状态更改
|
||||
const orderStatusChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
setOrderStatus(value)
|
||||
}
|
||||
// 点击搜索
|
||||
const onSearch = () => {
|
||||
setPage(1)
|
||||
console.log(startTime,endTime,orderStatus);
|
||||
}
|
||||
// 初始化搜索条件
|
||||
const init = () => {
|
||||
setPage(1)
|
||||
setStartTime(undefined)
|
||||
setEndTime(undefined)
|
||||
setOrderStatus(undefined)
|
||||
}
|
||||
// 点击清除
|
||||
const clearKeyWords = () => {
|
||||
init()
|
||||
}
|
||||
interface DataType {
|
||||
index?: number
|
||||
order: string
|
||||
@ -69,23 +99,25 @@ export default function TradingGoods() {
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
onChange={onChange}
|
||||
onChange={startTimeChange}
|
||||
value={startTime}
|
||||
/>
|
||||
<DatePicker placeholder="结束时间"
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
onChange={onChange}
|
||||
onChange={endTimeChange}
|
||||
value={endTime}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue="lucy"
|
||||
placeholder='选择订单状态'
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
onChange={belongTypeChange}
|
||||
onChange={orderStatusChange}
|
||||
options={[
|
||||
{ value: 'person', label: '123' },
|
||||
{ value: 'lucy', label: '123' },
|
||||
{ value: 'xixi', label: '嘻嘻' },
|
||||
{ value: 'hehe', label: '呵呵' },
|
||||
]}
|
||||
value={orderStatus}
|
||||
/>
|
||||
<Button type="primary"
|
||||
style={{
|
||||
@ -93,7 +125,9 @@ export default function TradingGoods() {
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
|
||||
icon={<SearchOutlined />}>
|
||||
icon={<SearchOutlined />}
|
||||
onClick={onSearch}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<Button
|
||||
@ -102,7 +136,9 @@ export default function TradingGoods() {
|
||||
marginLeft: 10,
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
icon={<ClearOutlined />}>
|
||||
icon={<ClearOutlined />}
|
||||
onClick={clearKeyWords}
|
||||
>
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
@ -119,11 +155,6 @@ export default function TradingGoods() {
|
||||
<div style={{ height: `${height - 130}px` }}>
|
||||
<Table
|
||||
scroll={{ y: `${height - 190}px` }}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||
}}
|
||||
|
||||
dataSource={data}
|
||||
// pagination={{
|
||||
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
|
||||
@ -174,15 +205,13 @@ export default function TradingGoods() {
|
||||
</div>
|
||||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||||
<div className='product-release-pagination' >
|
||||
<Pagination defaultCurrent={1} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
<Pagination defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
console.log(page)
|
||||
setPage(page)
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -5,21 +5,56 @@ import {
|
||||
// message,
|
||||
Space, Empty, Pagination
|
||||
} from 'antd';
|
||||
import dayjs, { } from 'dayjs';
|
||||
// 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 { useEffect, useState } from 'react';
|
||||
const { Column } = Table;
|
||||
export default function TransactionOrder() {
|
||||
const height = window.innerHeight - 180;
|
||||
// const [messageApi, contextHolder] = message.useMessage();
|
||||
const dateFormat = 'YYYY年MM月DD日';
|
||||
const belongTypeChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
const [startTime, setStartTime] = useState<any>(undefined) // 开始时间
|
||||
const [endTime, setEndTime] = useState<any>(undefined) // 结束时间
|
||||
const [orderStatus, setOrderStatus] = useState<any>(undefined) // 订单状态
|
||||
const [page, setPage] = useState(1) //分页
|
||||
|
||||
// 更改开始时间
|
||||
const stratTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
console.log(date, dateString);
|
||||
setStartTime(date)
|
||||
};
|
||||
const height = window.innerHeight - 180;
|
||||
// 更改结束时间
|
||||
const endTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||||
console.log(date, dateString);
|
||||
setEndTime(date)
|
||||
};
|
||||
// 更改订单状态
|
||||
const orderStatusChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
setOrderStatus(value)
|
||||
}
|
||||
// 初始化搜索条件
|
||||
const init = () => {
|
||||
setStartTime(undefined)
|
||||
setEndTime(undefined)
|
||||
setOrderStatus(undefined)
|
||||
}
|
||||
// 点击清除
|
||||
const clearKeyWords = () => {
|
||||
setPage(1)
|
||||
init()
|
||||
}
|
||||
// 点击搜索
|
||||
const onSearch = () => {
|
||||
setPage(1)
|
||||
console.log(orderStatus, startTime, endTime);
|
||||
if (startTime) {
|
||||
console.log('开始时间', dayjs(startTime).format(dateFormat));
|
||||
}
|
||||
}
|
||||
interface DataType {
|
||||
index?: number
|
||||
order: string
|
||||
@ -117,7 +152,9 @@ export default function TransactionOrder() {
|
||||
|
||||
];
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// 获取数据
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='transaction-order' style={{ height: `${height}px`, overflow: 'hidden' }}>
|
||||
@ -127,30 +164,34 @@ export default function TransactionOrder() {
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
onChange={onChange}
|
||||
onChange={stratTimeChange}
|
||||
value={startTime}
|
||||
/>
|
||||
<DatePicker placeholder="结束时间"
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
onChange={onChange}
|
||||
onChange={endTimeChange}
|
||||
value={endTime}
|
||||
|
||||
/>
|
||||
<Select
|
||||
// defaultValue="lucy"
|
||||
placeholder='选择订单状态'
|
||||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||
onChange={belongTypeChange}
|
||||
onChange={orderStatusChange}
|
||||
options={[
|
||||
{ value: 'person', label: '123' },
|
||||
{ value: 'lucy', label: '123' },
|
||||
{ value: 'person', label: '过户' },
|
||||
{ value: 'lucy', label: '未过户' },
|
||||
]}
|
||||
value={orderStatus}
|
||||
/>
|
||||
<Button type="primary"
|
||||
style={{
|
||||
height: 36,
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
|
||||
onClick={onSearch}
|
||||
icon={<SearchOutlined />}>
|
||||
搜索
|
||||
</Button>
|
||||
@ -160,7 +201,9 @@ export default function TransactionOrder() {
|
||||
marginLeft: 10,
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
icon={<ClearOutlined />}>
|
||||
icon={<ClearOutlined />}
|
||||
onClick={clearKeyWords}
|
||||
>
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
@ -176,9 +219,9 @@ export default function TransactionOrder() {
|
||||
<div style={{ height: `${height - 130}px` }}>
|
||||
<Table
|
||||
scroll={{ y: `${height - 190}px` }}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
}}
|
||||
// rowSelection={{
|
||||
// type: 'checkbox',
|
||||
// }}
|
||||
dataSource={data}
|
||||
pagination={false} // 不显示分页
|
||||
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||||
@ -226,8 +269,9 @@ export default function TransactionOrder() {
|
||||
</div>
|
||||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||||
<div className='product-release-pagination' >
|
||||
<Pagination defaultCurrent={1} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
<Pagination defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
|
||||
console.log(page)
|
||||
setPage(page)
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -351,6 +351,7 @@ export default function Index() {
|
||||
<Search placeholder="输入项目名称" onSearch={handleSearch} style={{
|
||||
width: '253px',
|
||||
height: '31px',
|
||||
display:location.pathname.includes('/home')?'block':'none'
|
||||
}} />
|
||||
<div className='nowPosition'>
|
||||
<img src={backImg} alt="" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user