Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存

Browse Source
This commit is contained in:
xixi 2024-06-12 17:01:55 +08:00
parent e0a11202cd
commit f4cd0bfdf2
8 changed files with 277 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/route/CopyrightGgoods/CopyrightGgoods.tsx
View File

@ -2,23 +2,76 @@ import './copyrightG-goods.css'
import { import {
Select, DatePicker, Button, Table, Select, DatePicker, Button, Table,
// message, // message,
Space, Input, Empty, Pagination Space, Empty, Pagination, InputNumber
} from 'antd'; } from 'antd';
import type { InputNumberProps } from 'antd';
// import type { TableColumnsType } from 'antd'; // import type { TableColumnsType } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons'; import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd'; import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import { useState } from 'react';
const { Column } = Table; const { Column } = Table;
export default function CopyrightGgoods() { export default function CopyrightGgoods() {
const height = window.innerHeight - 180;
// const [messageApi, contextHolder] = message.useMessage(); // const [messageApi, contextHolder] = message.useMessage();
const dateFormat = 'YYYY年MM月DD日'; const dateFormat = 'YYYY年MM月DD日';
const belongTypeChange = (value: string) => { const [minPrice,setMinPrice] = useState<any>() //最低价格
console.log(`selected ${value}`); const [maxPrice,setMaxPrice] = useState<any>() //最高价格
} const [date ,setDate] = useState<any>() //获取时间
const onChange: DatePickerProps['onChange'] = (date, dateString) => { const [sort,setSort] = useState<any>() //排序
console.log(date, dateString); 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 { interface DataType {
name: string name: string
short: string short: string
@ -125,49 +178,68 @@ export default function CopyrightGgoods() {
return ( return (
<div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'hidden' }}> <div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
{/* {contextHolder} */} {/* {contextHolder} */}
<div className='copyrightG-goods-search'> <div className='copyrightG-goods-search'>
<Input placeholder="最低价格" type="number" min={0} <InputNumber placeholder="最低价格" min={0}
style={{ width: 198, height: 36, marginRight: 12 }} /> 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="软著获取时间" <DatePicker placeholder="软著获取时间"
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={onChange} onChange={dateChange}
value={date}
/> />
<Select <Select
// defaultValue="lucy" // defaultValue="lucy"
placeholder='价格排序' placeholder='价格排序'
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 100, height: 36, marginRight: 12 }}
onChange={belongTypeChange} onChange={sortChange}
options={[ options={[
{ value: 'person', label: '升序' }, { value: 'rise', label: '升序' },
{ value: 'lucy', label: '降序' }, { value: 'drop', label: '降序' },
]} ]}
value={sort}
/> />
<Select <Select
// defaultValue="lucy" // defaultValue="lucy"
placeholder='选择开发语言' placeholder='选择开发语言'
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
onChange={belongTypeChange} onChange={languageChange}
options={[ options={[
{ value: 'person', label: 'java' }, { value: 'java', label: 'java' },
{ value: 'lucy', label: 'php' }, { value: 'php', label: 'php' },
]} ]}
value={language}
/> />
<Select <Select
// defaultValue="lucy" // defaultValue="lucy"
placeholder='选择软著类型' placeholder='选择软著类型'
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
onChange={belongTypeChange} onChange={typeChange}
options={[ options={[
{ value: 'person', label: '111' }, { value: 'person', label: '个人' },
{ value: 'lucy', label: '222' }, { value: 'lucy', label: '公司' },
]} ]}
value={type}
/> />
<Button type="primary" <Button type="primary"
style={{ style={{
@ -175,7 +247,9 @@ export default function CopyrightGgoods() {
// backgroundColor: '#FF9F08' // backgroundColor: '#FF9F08'
}} }}
icon={<SearchOutlined />}> icon={<SearchOutlined />}
onClick={onSearch}
>
搜索 搜索
</Button> </Button>
<Button <Button
@ -184,7 +258,9 @@ export default function CopyrightGgoods() {
marginLeft: 10, marginLeft: 10,
// backgroundColor: '#FF9F08' // backgroundColor: '#FF9F08'
}} }}
icon={<ClearOutlined />}> icon={<ClearOutlined />}
onClick={clearKeyWords}
>
清除 清除
</Button> </Button>
</div> </div>
@ -198,13 +274,13 @@ export default function CopyrightGgoods() {
} /> } />
</div>) : ( </div>) : (
<div> <div>
<div style={{ height: `${height - 130}px`}}> <div style={{ height: `${height - 130}px` }}>
<Table <Table
scroll={{ y: `${height - 190}px` }} scroll={{ y: `${height - 190}px` }}
rowSelection={{ // rowSelection={{
type: 'checkbox', // type: 'checkbox',
// selectedRowKeys: belongselectedKeys // 设置默认选中的行 // // selectedRowKeys: belongselectedKeys // 设置默认选中的行
}} // }}
dataSource={data} dataSource={data}
// pagination={{ // pagination={{
@ -261,9 +337,10 @@ export default function CopyrightGgoods() {
</Table> </Table>
</div> </div>
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */} {/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
<div className='product-release-pagination'> <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) console.log(page)
setPage(page)
}} /> }} />
</div> </div>
</div> </div>

5
src/route/CopyrightGgoods/copyrightG-goods.css
View File

@ -2,7 +2,7 @@
.copyrightG-goods { .copyrightG-goods {
margin-top: 18px; margin-top: 18px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
padding: 21px 19px 21px 26px; padding: 21px 19px 0px 26px;
box-sizing: border-box; box-sizing: border-box;
} }
@ -15,3 +15,6 @@
color: #1477BD; color: #1477BD;
cursor: pointer; cursor: pointer;
} }
.copyrightG-goods-search .css-dev-only-do-not-override-1ae8k9u.ant-input-number .ant-input-number-input{
height: 33px;
}

75
src/route/ProductRelease/ProductRelease.tsx
View File

@ -3,27 +3,34 @@ import './product-release.css'
import { import {
Select, DatePicker, Button, Select, DatePicker, Button,
// message, // message,
Checkbox, Empty, Switch, Modal, Pagination // Checkbox,
Empty, Switch, Modal, Pagination
} from 'antd'; } from 'antd';
import EditModal from './components/EditModal/EditModal' import EditModal from './components/EditModal/EditModal'
// import type { CheckboxProps } from 'antd'; // import type { CheckboxProps } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons'; import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd'; import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN'; 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'; import dayjs, { } from 'dayjs';
export default function ProductRelease() { export default function ProductRelease() {
const height = window.innerHeight - 180; const height = window.innerHeight - 180;
// const [messageApi, contextHolder] = message.useMessage(); // const [messageApi, contextHolder] = message.useMessage();
const dateFormat = 'YYYY年MM月DD日'; const dateFormat = 'YYYY年MM月DD日';
// 所属人类型 const [belongType, setBelongType] = useState<any>() // 所属人类型
const [belongType, setBelongType] = useState<any>(undefined) 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) => { const belongTypeChange = (value: string) => {
console.log(`selected ${value}`); console.log(`selected ${value}`);
setBelongType(value) setBelongType(value)
} }
// 选择日期 // 更改日期
const [date, setDate] = useState<any>(undefined)
const onChange: DatePickerProps['onChange'] = (date, dateString) => { const onChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(date, dateString); console.log(date, dateString);
setDate(date) setDate(date)
@ -32,12 +39,10 @@ export default function ProductRelease() {
}; };
// 选择开发者语言 // 选择开发者语言
const [language, setLanguage] = useState<any>(undefined)
const selectLanguage = (value: string) => { const selectLanguage = (value: string) => {
setLanguage(value) setLanguage(value)
} }
// 选择软著类型 // 选择软著类型
const [type, setType] = useState<any>(undefined)
const selectType = (value: string) => { const selectType = (value: string) => {
setType(value) setType(value)
} }
@ -50,25 +55,31 @@ export default function ProductRelease() {
} }
// 点击搜索 // 点击搜索
const searchKeyWords = () => { const searchKeyWords = () => {
setPage(1)
console.log( 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 = () => { const clearKeyWords = () => {
init() init()
setPage(1)
// 重新获取数据 // 重新获取数据
} }
// 选框选择时触发事件 // 选框选择时触发事件
const checkChange = (e: any, item: any) => { // const checkChange = (e: any, item: any) => {
console.log(`checked = ${e.target.checked}`); // console.log(`checked = ${e.target.checked}`);
console.log(e); // console.log(e);
if (e.target.checked == true) { // if (e.target.checked == true) {
console.log(item.order); // console.log(item.order);
} // }
}; // };
// 开关滑动触发 // 开关滑动触发
const opneChange = (e: any, item: any) => { const opneChange = (e: any, item: any) => {
// 开启 // 开启
@ -79,24 +90,17 @@ export default function ProductRelease() {
console.log('关闭', item.order); console.log('关闭', item.order);
} }
} }
// 控制编辑弹窗
const [editModalOpen, setEditModalOpen] = useState(false)
// 点击编辑 // 点击编辑
const edit = (item: any) => { const edit = (item: any) => {
console.log(item.order); console.log(item.order);
setEditModalOpen(true) setEditModalOpen(true)
}; };
// 控制删除弹窗
const [delModalOpen, setDelModalOpen] = useState(false)
// 点击删除 // 点击删除
const del = (item: any) => { const del = (item: any) => {
console.log(item.order); console.log(item.order);
setDelModalOpen(true) setDelModalOpen(true)
}; };
// 控制出售弹窗
const [sellModalOpen, setSellModalOpen] = useState(false)
// 点击出售 // 点击出售
const sell = (item: any) => { const sell = (item: any) => {
console.log(item.order); console.log(item.order);
@ -165,10 +169,14 @@ export default function ProductRelease() {
]; ];
useEffect(()=>{
},[])
return ( return (
<div className='product-release' style={{ height: `${height}px`, overflow: 'hidden' }}> <div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
{/* {contextHolder} */} {/* {contextHolder} */}
<div className='product-release-search'> <div className='product-release-search'>
<Select <Select
@ -267,10 +275,10 @@ export default function ProductRelease() {
</tr> </tr>
<tr style={{ background: '#F7F7F7', height: 45 }}> <tr style={{ background: '#F7F7F7', height: 45 }}>
<td colSpan={9}> <td colSpan={9}>
<Checkbox style={{ marginLeft: 16 }} onChange={ {/* <Checkbox style={{ marginLeft: 16 }} onChange={
(event) => checkChange(event, item) (event) => checkChange(event, item)
}></Checkbox> }></Checkbox> */}
<span style={{ marginLeft: 32 }}> <span style={{ marginLeft: 55 }}>
编号: {item.order} 编号: {item.order}
</span> </span>
<span style={{ marginLeft: 45 }}> <span style={{ marginLeft: 45 }}>
@ -301,7 +309,9 @@ export default function ProductRelease() {
</td> </td>
<td>{item.status}</td> <td>{item.status}</td>
<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={() => del(item)}>删除</span>
<span className='product-release-table-btn product-btn' onClick={() => sell(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> <span className='product-release-table-btn product-btn' onClick={() => submit(item)}>提交审核</span>
@ -325,8 +335,9 @@ export default function ProductRelease() {
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */} {/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
<div className='product-release-pagination'> <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) // console.log(page)
setPage(page)
}} /> }} />
</div> </div>
</div> </div>

3
src/route/ProductRelease/components/EditModal/EditModal.tsx
View File

@ -173,7 +173,6 @@ export default function EditModal(props: any) {
showUploadList={false} showUploadList={false}
action={uploadImageUrl()} action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }} headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
onChange={handleChange} onChange={handleChange}
onRemove={() => { 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> </Upload>
</div> </div>
<div style={{ color: '#919191', marginRight: '27px' }}> <div style={{ color: '#919191', marginRight: '27px' }}>

2
src/route/ProductRelease/product-release.css
View File

@ -1,7 +1,7 @@
.product-release { .product-release {
margin-top: 18px; margin-top: 18px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
padding: 21px 19px 21px 26px; padding: 21px 19px 0px 26px;
box-sizing: border-box; box-sizing: border-box;
} }

73
src/route/TradingGoods/TradingGoods.tsx
View File

@ -8,17 +8,47 @@ import {
import { SearchOutlined, ClearOutlined } from '@ant-design/icons'; import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd'; import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import { useState } from 'react';
const { Column } = Table; const { Column } = Table;
export default function TradingGoods() { export default function TradingGoods() {
const height = window.innerHeight - 180;
// const [messageApi, contextHolder] = message.useMessage(); // const [messageApi, contextHolder] = message.useMessage();
const dateFormat = 'YYYY年MM月DD日'; const dateFormat = 'YYYY年MM月DD日';
const belongTypeChange = (value: string) => { const [startTime, setStartTime] = useState<any>() //开始时间
console.log(`selected ${value}`); const [endTime, setEndTime] = useState<any>() //结束时间
} const [orderStatus, setOrderStatus] = useState<any>() //订单状态
const onChange: DatePickerProps['onChange'] = (date, dateString) => { const [page,setPage] = useState(1) //分页
// 更改开始时间
const startTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(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 { interface DataType {
index?: number index?: number
order: string order: string
@ -69,23 +99,25 @@ export default function TradingGoods() {
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={onChange} onChange={startTimeChange}
value={startTime}
/> />
<DatePicker placeholder="结束时间" <DatePicker placeholder="结束时间"
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={onChange} onChange={endTimeChange}
value={endTime}
/> />
<Select <Select
// defaultValue="lucy"
placeholder='选择订单状态' placeholder='选择订单状态'
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
onChange={belongTypeChange} onChange={orderStatusChange}
options={[ options={[
{ value: 'person', label: '123' }, { value: 'xixi', label: '嘻嘻' },
{ value: 'lucy', label: '123' }, { value: 'hehe', label: '呵呵' },
]} ]}
value={orderStatus}
/> />
<Button type="primary" <Button type="primary"
style={{ style={{
@ -93,7 +125,9 @@ export default function TradingGoods() {
// backgroundColor: '#FF9F08' // backgroundColor: '#FF9F08'
}} }}
icon={<SearchOutlined />}> icon={<SearchOutlined />}
onClick={onSearch}
>
搜索 搜索
</Button> </Button>
<Button <Button
@ -102,7 +136,9 @@ export default function TradingGoods() {
marginLeft: 10, marginLeft: 10,
// backgroundColor: '#FF9F08' // backgroundColor: '#FF9F08'
}} }}
icon={<ClearOutlined />}> icon={<ClearOutlined />}
onClick={clearKeyWords}
>
清除 清除
</Button> </Button>
</div> </div>
@ -119,11 +155,6 @@ export default function TradingGoods() {
<div style={{ height: `${height - 130}px` }}> <div style={{ height: `${height - 130}px` }}>
<Table <Table
scroll={{ y: `${height - 190}px` }} scroll={{ y: `${height - 190}px` }}
rowSelection={{
type: 'checkbox',
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
}}
dataSource={data} dataSource={data}
// pagination={{ // pagination={{
// defaultPageSize: 10, // 设置默认一页显示 5 条数据 // defaultPageSize: 10, // 设置默认一页显示 5 条数据
@ -174,15 +205,13 @@ export default function TradingGoods() {
</div> </div>
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */} {/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
<div className='product-release-pagination' > <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) console.log(page)
setPage(page)
}} /> }} />
</div> </div>
</div> </div>
)} )}
</div> </div>
</div> </div>
) )

78
src/route/TransactionOrder/TransactionOrder.tsx
View File

@ -5,21 +5,56 @@ import {
// message, // message,
Space, Empty, Pagination Space, Empty, Pagination
} from 'antd'; } from 'antd';
import dayjs, { } from 'dayjs';
// import type { TableColumnsType } from 'antd'; // import type { TableColumnsType } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons'; import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd'; import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import { useEffect, useState } from 'react';
const { Column } = Table; const { Column } = Table;
export default function TransactionOrder() { export default function TransactionOrder() {
const height = window.innerHeight - 180;
// const [messageApi, contextHolder] = message.useMessage(); // const [messageApi, contextHolder] = message.useMessage();
const dateFormat = 'YYYY年MM月DD日'; const dateFormat = 'YYYY年MM月DD日';
const belongTypeChange = (value: string) => { const [startTime, setStartTime] = useState<any>(undefined) // 开始时间
console.log(`selected ${value}`); const [endTime, setEndTime] = useState<any>(undefined) // 结束时间
} const [orderStatus, setOrderStatus] = useState<any>(undefined) // 订单状态
const onChange: DatePickerProps['onChange'] = (date, dateString) => { const [page, setPage] = useState(1) //分页
// 更改开始时间
const stratTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(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 { interface DataType {
index?: number index?: number
order: string order: string
@ -117,7 +152,9 @@ export default function TransactionOrder() {
]; ];
useEffect(() => {
// 获取数据
}, [])
return ( return (
<div className='transaction-order' style={{ height: `${height}px`, overflow: 'hidden' }}> <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 }} style={{ width: 198, height: 36, marginRight: 12 }}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={onChange} onChange={stratTimeChange}
value={startTime}
/> />
<DatePicker placeholder="结束时间" <DatePicker placeholder="结束时间"
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={onChange} onChange={endTimeChange}
value={endTime}
/> />
<Select <Select
// defaultValue="lucy" // defaultValue="lucy"
placeholder='选择订单状态' placeholder='选择订单状态'
style={{ width: 198, height: 36, marginRight: 12 }} style={{ width: 198, height: 36, marginRight: 12 }}
onChange={belongTypeChange} onChange={orderStatusChange}
options={[ options={[
{ value: 'person', label: '123' }, { value: 'person', label: '过户' },
{ value: 'lucy', label: '123' }, { value: 'lucy', label: '未过户' },
]} ]}
value={orderStatus}
/> />
<Button type="primary" <Button type="primary"
style={{ style={{
height: 36, height: 36,
// backgroundColor: '#FF9F08' // backgroundColor: '#FF9F08'
}} }}
onClick={onSearch}
icon={<SearchOutlined />}> icon={<SearchOutlined />}>
搜索 搜索
</Button> </Button>
@ -160,7 +201,9 @@ export default function TransactionOrder() {
marginLeft: 10, marginLeft: 10,
// backgroundColor: '#FF9F08' // backgroundColor: '#FF9F08'
}} }}
icon={<ClearOutlined />}> icon={<ClearOutlined />}
onClick={clearKeyWords}
>
清除 清除
</Button> </Button>
</div> </div>
@ -176,9 +219,9 @@ export default function TransactionOrder() {
<div style={{ height: `${height - 130}px` }}> <div style={{ height: `${height - 130}px` }}>
<Table <Table
scroll={{ y: `${height - 190}px` }} scroll={{ y: `${height - 190}px` }}
rowSelection={{ // rowSelection={{
type: 'checkbox', // type: 'checkbox',
}} // }}
dataSource={data} dataSource={data}
pagination={false} // 不显示分页 pagination={false} // 不显示分页
style={{ textAlign: 'center' }} // 设置表格内容居中显示 style={{ textAlign: 'center' }} // 设置表格内容居中显示
@ -226,8 +269,9 @@ export default function TransactionOrder() {
</div> </div>
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */} {/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
<div className='product-release-pagination' > <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) console.log(page)
setPage(page)
}} /> }} />
</div> </div>
</div> </div>

1
src/route/index/Index.tsx
View File

@ -351,6 +351,7 @@ export default function Index() {
<Search placeholder="输入项目名称" onSearch={handleSearch} style={{ <Search placeholder="输入项目名称" onSearch={handleSearch} style={{
width: '253px', width: '253px',
height: '31px', height: '31px',
display:location.pathname.includes('/home')?'block':'none'
}} /> }} />
<div className='nowPosition'> <div className='nowPosition'>
<img src={backImg} alt="" /> <img src={backImg} alt="" />