协议跳转方式调整
This commit is contained in:
parent
36350d8b89
commit
81b4d1a21b
@ -1,7 +1,184 @@
|
|||||||
|
import './copyrightG-goods.css'
|
||||||
|
import { Select, DatePicker, Button, Table,
|
||||||
|
// message,
|
||||||
|
Space, Input, Empty } from 'antd';
|
||||||
|
// import type { TableColumnsType } from 'antd';
|
||||||
|
import { SearchOutlined } from '@ant-design/icons';
|
||||||
|
import type { DatePickerProps } from 'antd';
|
||||||
|
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||||
|
const { Column } = Table;
|
||||||
export default function CopyrightGgoods() {
|
export default function CopyrightGgoods() {
|
||||||
|
// 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 height = window.innerHeight - 180;
|
||||||
|
interface DataType {
|
||||||
|
name: string
|
||||||
|
short: string
|
||||||
|
number: string
|
||||||
|
price: string
|
||||||
|
version: string
|
||||||
|
time: string
|
||||||
|
language: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: DataType[] = [
|
||||||
|
{
|
||||||
|
name: '智能管理系统',
|
||||||
|
short: '简称',
|
||||||
|
number: '123456789123456789',
|
||||||
|
price: '5.00',
|
||||||
|
version: '1-1-1',
|
||||||
|
time: '2020-04-19 15:42:21',
|
||||||
|
language: 'java'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '商城管理系统',
|
||||||
|
short: '简称',
|
||||||
|
number: '123456789123456789',
|
||||||
|
price: '5.00',
|
||||||
|
version: '1-1-1',
|
||||||
|
time: '2020-04-19 15:42:21',
|
||||||
|
language: 'java'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'xx系统',
|
||||||
|
short: '简称',
|
||||||
|
number: '123456789123456789',
|
||||||
|
price: '5.00',
|
||||||
|
version: '1-1-1',
|
||||||
|
time: '2020-04-19 15:42:21',
|
||||||
|
language: 'java'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<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 }} />
|
||||||
|
至
|
||||||
|
<Input placeholder="最高价格" type="number" min={0} style={{ width: 198, height: 36, marginRight: 12, marginLeft: 12 }} />
|
||||||
|
|
||||||
|
<DatePicker placeholder="软著获取时间"
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
format={dateFormat}
|
||||||
|
locale={locale}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='价格排序'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: '升序' },
|
||||||
|
{ value: 'lucy', label: '降序' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='选择开发语言'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: 'java' },
|
||||||
|
{ value: 'lucy', label: 'php' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='选择软著类型'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: '111' },
|
||||||
|
{ value: 'lucy', label: '222' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Button type="primary"
|
||||||
|
style={{ height: 36, backgroundColor: '#FF9F08' }}
|
||||||
|
|
||||||
|
icon={<SearchOutlined />}>
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className='copyrightG-goods-table'>
|
||||||
|
{/* 表格 */}
|
||||||
|
{data.length == 0 ? (
|
||||||
|
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
||||||
|
<Empty
|
||||||
|
description={
|
||||||
|
'暂无数据'
|
||||||
|
} />
|
||||||
|
</div>) : (<Table
|
||||||
|
rowSelection={{
|
||||||
|
type: 'checkbox',
|
||||||
|
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||||
|
}}
|
||||||
|
|
||||||
|
dataSource={data}
|
||||||
|
// pagination={{
|
||||||
|
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
|
||||||
|
// }}
|
||||||
|
pagination={false} // 不显示分页
|
||||||
|
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||||||
|
rowKey="order" // 指定数据项的唯一标识符
|
||||||
|
>
|
||||||
|
<Column 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"
|
||||||
|
/>
|
||||||
|
<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.order);
|
||||||
|
|
||||||
|
}}>预览</span>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Table>)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
17
src/route/CopyrightGgoods/copyrightG-goods.css
Normal file
17
src/route/CopyrightGgoods/copyrightG-goods.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/* copyrightG-goods */
|
||||||
|
.copyrightG-goods {
|
||||||
|
margin-top: 18px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
padding: 21px 19px 21px 26px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyrightG-goods-table {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyrightG-goods-table-btn {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1477BD;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
@ -1,10 +1,16 @@
|
|||||||
// import React from 'react'
|
// import React from 'react'
|
||||||
import './product-release.css'
|
import './product-release.css'
|
||||||
import { Select, DatePicker } from 'antd';
|
import { Select, DatePicker, Button,
|
||||||
|
// message,
|
||||||
|
Checkbox, Empty, Switch } from 'antd';
|
||||||
|
// import type { CheckboxProps } from 'antd';
|
||||||
|
import { SearchOutlined } 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 from 'react';
|
||||||
// import dayjs, { Dayjs } from 'dayjs';
|
// import dayjs, { Dayjs } from 'dayjs';
|
||||||
export default function ProductRelease() {
|
export default function ProductRelease() {
|
||||||
|
// const [messageApi, contextHolder] = message.useMessage();
|
||||||
const dateFormat = 'YYYY年MM月DD日';
|
const dateFormat = 'YYYY年MM月DD日';
|
||||||
const belongTypeChange = (value: string) => {
|
const belongTypeChange = (value: string) => {
|
||||||
console.log(`selected ${value}`);
|
console.log(`selected ${value}`);
|
||||||
@ -13,13 +19,88 @@ export default function ProductRelease() {
|
|||||||
console.log(date, dateString);
|
console.log(date, dateString);
|
||||||
};
|
};
|
||||||
const height = window.innerHeight - 180;
|
const height = window.innerHeight - 180;
|
||||||
|
|
||||||
|
// 选框选择时触发事件
|
||||||
|
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) => {
|
||||||
|
// 开启
|
||||||
|
if (e) {
|
||||||
|
console.log('开启', item.order);
|
||||||
|
// 关闭
|
||||||
|
} else {
|
||||||
|
console.log('关闭', item.order);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 点击编辑
|
||||||
|
const edit = (item: any) => {
|
||||||
|
console.log(item.order);
|
||||||
|
};
|
||||||
|
// 点击删除
|
||||||
|
const del = (item: any) => {
|
||||||
|
console.log(item.order);
|
||||||
|
};
|
||||||
|
// 点击出售
|
||||||
|
const sell = (item: any) => {
|
||||||
|
console.log(item.order);
|
||||||
|
};
|
||||||
|
// 点击提交
|
||||||
|
const submit = (item: any) => {
|
||||||
|
console.log(item.order);
|
||||||
|
};
|
||||||
|
const data: any = [
|
||||||
|
{
|
||||||
|
order: '122',
|
||||||
|
time1: '2020-04-19 11:51:03',
|
||||||
|
img: 'xxx',
|
||||||
|
name: 'xxxx系统',
|
||||||
|
v: '1-1-v',
|
||||||
|
price: '5.00',
|
||||||
|
time2: '2020-04-19 11:51:03',
|
||||||
|
open: '0',
|
||||||
|
status: '平台已审核',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
order: '123',
|
||||||
|
time1: '2020-04-19 11:51:03',
|
||||||
|
img: 'xxx',
|
||||||
|
name: 'xxxx系统',
|
||||||
|
|
||||||
|
v: '1-1-v',
|
||||||
|
price: '5.00',
|
||||||
|
time2: '2020-04-19 11:51:03',
|
||||||
|
open: '1',
|
||||||
|
status: '平台已审核',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
order: '121',
|
||||||
|
time1: '2020-04-19 11:51:03',
|
||||||
|
img: 'xxx',
|
||||||
|
name: 'xxxx系统',
|
||||||
|
v: '1-1-v',
|
||||||
|
price: '5.00',
|
||||||
|
time2: '2020-04-19 11:51:03',
|
||||||
|
open: '0',
|
||||||
|
status: '平台已审核',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
|
<div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||||
|
{/* {contextHolder} */}
|
||||||
<div className='product-release-search'>
|
<div className='product-release-search'>
|
||||||
<Select
|
<Select
|
||||||
// defaultValue="lucy"
|
// defaultValue="lucy"
|
||||||
placeholder='请选择所属者类型'
|
placeholder='请选择所属者类型'
|
||||||
style={{ width: 198 }}
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
onChange={belongTypeChange}
|
onChange={belongTypeChange}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'person', label: '个人' },
|
{ value: 'person', label: '个人' },
|
||||||
@ -27,11 +108,126 @@ export default function ProductRelease() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<DatePicker placeholder="软件取得时间"
|
<DatePicker placeholder="软件取得时间"
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
format={dateFormat}
|
format={dateFormat}
|
||||||
locale={locale}
|
locale={locale}
|
||||||
style={{}}
|
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='请选择所开发者语言'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: '123' },
|
||||||
|
{ value: 'lucy', label: '123' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='请选择软著类型'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: '1' },
|
||||||
|
{ value: 'lucy', label: '2' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Button type="primary"
|
||||||
|
style={{ height: 36, backgroundColor: '#FF9F08' }}
|
||||||
|
|
||||||
|
icon={<SearchOutlined />}>
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{/* 表格 */}
|
||||||
|
<div className='product-release-table'>
|
||||||
|
{data.length == 0 ? (
|
||||||
|
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
||||||
|
<Empty
|
||||||
|
description={
|
||||||
|
'暂无数据'
|
||||||
|
} />
|
||||||
|
</div>) : (
|
||||||
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ background: '#F7F7F7', height: 32, fontSize: 14 }}>
|
||||||
|
<th style={{ width: 50 }}>序号</th>
|
||||||
|
<th style={{ width: 110 }}></th>
|
||||||
|
<th>软著名称</th>
|
||||||
|
<th>软著版本</th>
|
||||||
|
<th>售卖价格</th>
|
||||||
|
<th>截止售卖时间</th>
|
||||||
|
<th>著作权上架</th>
|
||||||
|
<th>平台审核</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody style={{ color: '#888888' }}>
|
||||||
|
{data.map((item: any, index: any) => {
|
||||||
|
return (
|
||||||
|
<React.Fragment key={item.order}>
|
||||||
|
<tr style={{ height: 15 }}>
|
||||||
|
<td colSpan={9} style={{ border: 'none' }}>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr style={{ background: '#F7F7F7', height: 45 }}>
|
||||||
|
<td colSpan={9}>
|
||||||
|
<Checkbox style={{ marginLeft: 16 }} onChange={
|
||||||
|
(event) => checkChange(event, item)
|
||||||
|
}></Checkbox>
|
||||||
|
<span style={{ marginLeft: 32 }}>
|
||||||
|
编号: {item.order}
|
||||||
|
</span>
|
||||||
|
<span style={{ marginLeft: 45 }}>
|
||||||
|
软著取得时间: {item.time1}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr style={{ textAlign: 'center', height: 110 }}>
|
||||||
|
<td>{index + 1}</td>
|
||||||
|
<td className='product-release-table-img-td'>
|
||||||
|
<div className='product-release-table-img'>
|
||||||
|
{item.img}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className='product-release-table-name'>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(接口软著)
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{item.v}</td>
|
||||||
|
<td style={{ fontSize: 24, color: '#FF5D15' }}>{item.price}</td>
|
||||||
|
<td>{item.time2}</td>
|
||||||
|
<td>
|
||||||
|
<Switch checkedChildren="On" unCheckedChildren="Off" onChange={(e) => { opneChange(e, item) }} defaultChecked={item.open == 0 ? false : true} />
|
||||||
|
</td>
|
||||||
|
<td>{item.status}</td>
|
||||||
|
<td>
|
||||||
|
<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>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</React.Fragment>
|
||||||
|
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -4,3 +4,43 @@
|
|||||||
padding: 21px 19px 21px 26px;
|
padding: 21px 19px 21px 26px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-release-table {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-release-table-head {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-release-table-img {
|
||||||
|
width: 74px;
|
||||||
|
height: 74px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-release-table table tbody td {
|
||||||
|
border: 1px solid #E6E6E6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-release-table-img-td {}
|
||||||
|
|
||||||
|
.nodata {
|
||||||
|
/* background-color: red; */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-release-table-name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1B8BD2;
|
||||||
|
}
|
||||||
|
.product-release-table-btn{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.product-btn{
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
@ -1,5 +1,164 @@
|
|||||||
|
import './trading-goods.css'
|
||||||
|
import { Select, DatePicker, Button, Table,
|
||||||
|
// message,
|
||||||
|
Space, Empty } from 'antd';
|
||||||
|
// import type { TableColumnsType } from 'antd';
|
||||||
|
import { SearchOutlined } from '@ant-design/icons';
|
||||||
|
import type { DatePickerProps } from 'antd';
|
||||||
|
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||||
|
const { Column } = Table;
|
||||||
export default function TradingGoods() {
|
export default function TradingGoods() {
|
||||||
|
// 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 height = window.innerHeight - 180;
|
||||||
|
interface DataType {
|
||||||
|
index?: number
|
||||||
|
order: string
|
||||||
|
name: string
|
||||||
|
price: string
|
||||||
|
status: string
|
||||||
|
time1: string
|
||||||
|
time2: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: DataType[] = [
|
||||||
|
{
|
||||||
|
|
||||||
|
order: '123',
|
||||||
|
name: '后台管理系统',
|
||||||
|
price: '5.00',
|
||||||
|
status: '过户',
|
||||||
|
time1: '2020-04-19 15:42:21',
|
||||||
|
time2: '2020-04-19 15:42:21 ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
|
||||||
|
order: '12345',
|
||||||
|
name: '后台管理系统',
|
||||||
|
price: '5.00',
|
||||||
|
status: '过户',
|
||||||
|
time1: '2020-04-19 15:42:21',
|
||||||
|
time2: '2020-04-19 15:42:21 ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
order: '1235678',
|
||||||
|
name: '后台管理系统',
|
||||||
|
price: '5.00',
|
||||||
|
status: '过户',
|
||||||
|
time1: '2020-04-19 15:42:21',
|
||||||
|
time2: '2020-04-19 15:42:21 ',
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>交易商品页面</div>
|
<div className='trading-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||||
|
{/* {contextHolder} */}
|
||||||
|
<div className='trading-goods-search'>
|
||||||
|
<DatePicker placeholder="开始时间"
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
format={dateFormat}
|
||||||
|
locale={locale}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<DatePicker placeholder="结束时间"
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
format={dateFormat}
|
||||||
|
locale={locale}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='选择订单状态'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: '123' },
|
||||||
|
{ value: 'lucy', label: '123' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Button type="primary"
|
||||||
|
style={{ height: 36, backgroundColor: '#FF9F08' }}
|
||||||
|
|
||||||
|
icon={<SearchOutlined />}>
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className='trading-goods-table'>
|
||||||
|
{/* 表格 */}
|
||||||
|
{data.length == 0 ? (
|
||||||
|
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
||||||
|
<Empty
|
||||||
|
description={
|
||||||
|
'暂无数据'
|
||||||
|
} />
|
||||||
|
</div>) : (
|
||||||
|
<Table
|
||||||
|
rowSelection={{
|
||||||
|
type: 'checkbox',
|
||||||
|
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||||
|
}}
|
||||||
|
|
||||||
|
dataSource={data}
|
||||||
|
// pagination={{
|
||||||
|
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
|
||||||
|
// }}
|
||||||
|
pagination={false} // 不显示分页
|
||||||
|
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||||||
|
rowKey="order" // 指定数据项的唯一标识符
|
||||||
|
>
|
||||||
|
<Column title="序号" render={(_text, _record, index: number) => (
|
||||||
|
index + 1
|
||||||
|
)} align="center" />
|
||||||
|
<Column
|
||||||
|
title="订单编号"
|
||||||
|
dataIndex="order"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<Column
|
||||||
|
title="软著名称"
|
||||||
|
dataIndex="name"
|
||||||
|
align="center"
|
||||||
|
render={(text) => (
|
||||||
|
<span style={{ color: '#1B8BD2', fontSize: '16px', fontWeight: '700' }}>{text}</span>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Column title="订单价格" dataIndex="price" align="center"
|
||||||
|
render={(text) => (
|
||||||
|
<span style={{ color: '#FF5D15', fontSize: '24px', fontWeight: '700' }}>{text}</span>
|
||||||
|
)} />
|
||||||
|
<Column title="订单状态" dataIndex="status" align="center" />
|
||||||
|
<Column title="下单时间" dataIndex="time1" align="center" />
|
||||||
|
<Column title="付款时间" dataIndex="time2" align="center" />
|
||||||
|
{/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
|
||||||
|
<Column
|
||||||
|
align="center"
|
||||||
|
title="操作"
|
||||||
|
render={(_text, record: any) => (
|
||||||
|
<Space size="middle">
|
||||||
|
<span className='trading-goods-table-btn' onClick={() => {
|
||||||
|
console.log(record.order);
|
||||||
|
|
||||||
|
}}>补充资料</span>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
14
src/route/TradingGoods/trading-goods.css
Normal file
14
src/route/TradingGoods/trading-goods.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
.trading-goods {
|
||||||
|
margin-top: 18px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
padding: 21px 19px 21px 26px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.trading-goods-table{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.trading-goods-table-btn{
|
||||||
|
color:#888888;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
@ -1,5 +1,160 @@
|
|||||||
|
// import React from 'react'
|
||||||
|
import './transaction-order.css'
|
||||||
|
import { Select, DatePicker, Button, Table,
|
||||||
|
// message,
|
||||||
|
Space, Empty } from 'antd';
|
||||||
|
// import type { TableColumnsType } from 'antd';
|
||||||
|
import { SearchOutlined } from '@ant-design/icons';
|
||||||
|
import type { DatePickerProps } from 'antd';
|
||||||
|
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||||
|
const { Column } = Table;
|
||||||
export default function TransactionOrder() {
|
export default function TransactionOrder() {
|
||||||
|
// 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 height = window.innerHeight - 180;
|
||||||
|
interface DataType {
|
||||||
|
index?: number
|
||||||
|
order: string
|
||||||
|
name: string
|
||||||
|
price: string
|
||||||
|
status: string
|
||||||
|
time1: string
|
||||||
|
time2: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: DataType[] = [
|
||||||
|
{
|
||||||
|
|
||||||
|
order: '456789',
|
||||||
|
name: 'xx系统',
|
||||||
|
price: '5.00',
|
||||||
|
status: '过户',
|
||||||
|
time1: '2020-04-19 15:42:21',
|
||||||
|
time2: '2020-04-19 15:42:21 ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
|
||||||
|
order: '12646498484',
|
||||||
|
name: 'xxxxxxxxxxxxx系统',
|
||||||
|
price: '5.00',
|
||||||
|
status: '过户',
|
||||||
|
time1: '2020-04-19 15:42:21',
|
||||||
|
time2: '2020-04-19 15:42:21 ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
order: '9444984894',
|
||||||
|
name: 'xx系统',
|
||||||
|
price: '5.00',
|
||||||
|
status: '过户',
|
||||||
|
time1: '2020-04-19 15:42:21',
|
||||||
|
time2: '2020-04-19 15:42:21 ',
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>交易订单页面</div>
|
<div className='transaction-order' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||||
|
{/* {contextHolder} */}
|
||||||
|
<div className='transaction-order-search'>
|
||||||
|
<DatePicker placeholder="开始时间"
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
format={dateFormat}
|
||||||
|
locale={locale}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<DatePicker placeholder="结束时间"
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
format={dateFormat}
|
||||||
|
locale={locale}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue="lucy"
|
||||||
|
placeholder='选择订单状态'
|
||||||
|
style={{ width: 198, height: 36, marginRight: 12 }}
|
||||||
|
onChange={belongTypeChange}
|
||||||
|
options={[
|
||||||
|
{ value: 'person', label: '123' },
|
||||||
|
{ value: 'lucy', label: '123' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Button type="primary"
|
||||||
|
style={{ height: 36, backgroundColor: '#FF9F08' }}
|
||||||
|
|
||||||
|
icon={<SearchOutlined />}>
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className='transaction-order-table'>
|
||||||
|
{/* 表格 */}
|
||||||
|
{data.length == 0 ? (<div className='nodata' style={{ height: `${height - 93}px` }}>
|
||||||
|
<Empty
|
||||||
|
description={
|
||||||
|
'暂无数据'
|
||||||
|
} />
|
||||||
|
</div>) : (<Table
|
||||||
|
rowSelection={{
|
||||||
|
type: 'checkbox',
|
||||||
|
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||||
|
}}
|
||||||
|
|
||||||
|
dataSource={data}
|
||||||
|
// pagination={{
|
||||||
|
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
|
||||||
|
// }}
|
||||||
|
pagination={false} // 不显示分页
|
||||||
|
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||||||
|
rowKey="order" // 指定数据项的唯一标识符
|
||||||
|
>
|
||||||
|
<Column title="序号" render={(_text, _record, index: number) => (
|
||||||
|
index + 1
|
||||||
|
)} align="center" />
|
||||||
|
<Column
|
||||||
|
title="订单编号"
|
||||||
|
dataIndex="order"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<Column
|
||||||
|
title="软著名称"
|
||||||
|
dataIndex="name"
|
||||||
|
align="center"
|
||||||
|
render={(text) => (
|
||||||
|
<span style={{ color: '#1B8BD2', fontSize: '16px', fontWeight: '700' }}>{text}</span>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Column title="订单价格" dataIndex="price" align="center"
|
||||||
|
render={(text) => (
|
||||||
|
<span style={{ color: '#FF5D15', fontSize: '24px', fontWeight: '700' }}>{text}</span>
|
||||||
|
)} />
|
||||||
|
<Column title="订单状态" dataIndex="status" align="center" />
|
||||||
|
<Column title="下单时间" dataIndex="time1" align="center" />
|
||||||
|
<Column title="付款时间" dataIndex="time2" align="center" />
|
||||||
|
{/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
|
||||||
|
<Column
|
||||||
|
align="center"
|
||||||
|
title="操作"
|
||||||
|
render={(_text, record: any) => (
|
||||||
|
<Space size="middle">
|
||||||
|
<span className='transaction-order-table-btn' onClick={() => {
|
||||||
|
console.log(record.order);
|
||||||
|
|
||||||
|
}}>补充资料</span>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Table>)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
13
src/route/TransactionOrder/transaction-order.css
Normal file
13
src/route/TransactionOrder/transaction-order.css
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.transaction-order {
|
||||||
|
margin-top: 18px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
padding: 21px 19px 21px 26px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.transaction-order-table{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.transaction-order-table-btn{
|
||||||
|
color:#888888;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
@ -137,7 +137,9 @@ export default function ProjNew() {
|
|||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<Checkbox>
|
<Checkbox>
|
||||||
我同意平台 <a href="https://www.aimzhu.com/Seda.html">《软件委托开发协议》</a>
|
我同意平台 <a onClick={()=>{
|
||||||
|
window.open('https://www.aimzhu.com/Seda.html')
|
||||||
|
}}>《软件委托开发协议》</a>
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</div>
|
</div>
|
||||||
|
@ -637,7 +637,9 @@ export default function ProjEditStep2(props: any) {
|
|||||||
<div style={{ padding: '22px 15px' }}>
|
<div style={{ padding: '22px 15px' }}>
|
||||||
<div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
|
<div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
|
||||||
根据《中国版权登记业务平台软件登记》相关要求,申请人需要再国版权登记业务平台注册并通过实名制认证。
|
根据《中国版权登记业务平台软件登记》相关要求,申请人需要再国版权登记业务平台注册并通过实名制认证。
|
||||||
<a href="https://www.aimzhu.com/Rnsystem.html" style={{ color: '#FDB33E' }}>了解实名制认证流程</a>
|
<a onClick={()=>{
|
||||||
|
window.open('https://www.aimzhu.com/Rnsystem.html')
|
||||||
|
}} style={{ color: '#FDB33E' }}>了解实名制认证流程</a>
|
||||||
</div>
|
</div>
|
||||||
<div className='belongPeople-center'>
|
<div className='belongPeople-center'>
|
||||||
<Button onClick={() => {
|
<Button onClick={() => {
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
// 设置选中路由缓存
|
// 设置选中路由缓存
|
||||||
export const setMenuActive = (key: string)=>{
|
export const setMenuActive = (key: string)=>{
|
||||||
localStorage.setItem('activeMenu', key)
|
sessionStorage.setItem('activeMenu', key)
|
||||||
}
|
}
|
||||||
// 获取选中路由缓存
|
// 获取选中路由缓存
|
||||||
export const getMenuActive = ()=> {
|
export const getMenuActive = ()=> {
|
||||||
return localStorage.getItem('activeMenu')
|
return sessionStorage.getItem('activeMenu')
|
||||||
}
|
}
|
||||||
// 清空选中路由缓存
|
// 清空选中路由缓存
|
||||||
export const reMenuActive = ()=> {
|
export const reMenuActive = ()=> {
|
||||||
return localStorage.removeItem('activeMenu')
|
return sessionStorage.removeItem('activeMenu')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user