418 lines
13 KiB
TypeScript
418 lines
13 KiB
TypeScript
// import React from 'react'
|
||
import './product-release.css'
|
||
import {
|
||
Select, DatePicker, Button,
|
||
// message,
|
||
// 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, 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>() // 所属人类型
|
||
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 onChange: DatePickerProps['onChange'] = (date, dateString) => {
|
||
console.log(date, dateString);
|
||
setDate(date)
|
||
// dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
|
||
console.log('日期', dayjs(date).format(dateFormat));
|
||
|
||
};
|
||
// 选择开发者语言
|
||
const selectLanguage = (value: string) => {
|
||
setLanguage(value)
|
||
}
|
||
// 选择软著类型
|
||
const selectType = (value: string) => {
|
||
setType(value)
|
||
}
|
||
// 初始化搜索条件
|
||
const init = () => {
|
||
setBelongType(undefined)
|
||
setDate(undefined)
|
||
setLanguage(undefined)
|
||
setType(undefined)
|
||
}
|
||
// 点击搜索
|
||
const searchKeyWords = () => {
|
||
setPage(1)
|
||
console.log(
|
||
// 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 opneChange = (e: any, item: any) => {
|
||
// 开启
|
||
if (e) {
|
||
console.log('开启', item.order);
|
||
// 关闭
|
||
} else {
|
||
console.log('关闭', item.order);
|
||
}
|
||
}
|
||
|
||
// 点击编辑
|
||
const edit = (item: any) => {
|
||
console.log(item.order);
|
||
setEditModalOpen(true)
|
||
};
|
||
// 点击删除
|
||
const del = (item: any) => {
|
||
console.log(item.order);
|
||
setDelModalOpen(true)
|
||
};
|
||
// 点击出售
|
||
const sell = (item: any) => {
|
||
console.log(item.order);
|
||
setSellModalOpen(true)
|
||
};
|
||
// 点击提交
|
||
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: '124',
|
||
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: '125',
|
||
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: '126',
|
||
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: '平台已审核',
|
||
},
|
||
|
||
];
|
||
|
||
useEffect(() => {
|
||
|
||
|
||
}, [])
|
||
|
||
|
||
return (
|
||
<div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||
{/* {contextHolder} */}
|
||
<div className='product-release-search'>
|
||
<Select
|
||
// defaultValue="lucy"
|
||
placeholder='请选择所属者类型'
|
||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||
onChange={belongTypeChange}
|
||
options={[
|
||
{ value: 'person', label: '个人' },
|
||
{ value: 'lucy', label: '企业' },
|
||
]}
|
||
value={belongType}
|
||
/>
|
||
<DatePicker placeholder="软件取得时间"
|
||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||
locale={locale}
|
||
onChange={onChange}
|
||
value={date}
|
||
/>
|
||
<Select
|
||
// defaultValue="lucy"
|
||
placeholder='请选择所开发者语言'
|
||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||
onChange={selectLanguage}
|
||
options={[
|
||
{ value: 'java', label: 'java' },
|
||
{ value: 'php', label: 'php' },
|
||
]}
|
||
value={language}
|
||
/>
|
||
<Select
|
||
// defaultValue="lucy"
|
||
placeholder='请选择软著类型'
|
||
style={{ width: 198, height: 36, marginRight: 12 }}
|
||
onChange={selectType}
|
||
options={[
|
||
{ value: 'person', label: '1' },
|
||
{ value: 'lucy', label: '2' },
|
||
]}
|
||
value={type}
|
||
/>
|
||
<Button type="primary"
|
||
style={{
|
||
height: 36,
|
||
// backgroundColor: '#FF9F08'
|
||
}}
|
||
onClick={searchKeyWords}
|
||
icon={<SearchOutlined />}>
|
||
搜索
|
||
</Button>
|
||
<Button
|
||
style={{
|
||
height: 36,
|
||
marginLeft: 10,
|
||
// backgroundColor: '#FF9F08'
|
||
}}
|
||
icon={<ClearOutlined />}
|
||
onClick={clearKeyWords}
|
||
>
|
||
清除
|
||
</Button>
|
||
</div>
|
||
<div>
|
||
{/* 表格 */}
|
||
<div className='product-release-table' style={{ height: `${height - 130}px` }}>
|
||
{data.length == 0 ? (
|
||
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
||
<Empty
|
||
description={
|
||
'暂无数据'
|
||
} />
|
||
</div>) : (
|
||
<div style={{ height: `${height - 130}px`, overflow: 'auto', position: 'relative' }}>
|
||
<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: 55 }}>
|
||
编号: {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 style={{ height: 10 }}></div> */}
|
||
|
||
</div>
|
||
|
||
)}
|
||
|
||
</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>
|
||
|
||
{/* 编辑弹窗 */}
|
||
<Modal title={'编辑'}
|
||
destroyOnClose={true}
|
||
open={editModalOpen}
|
||
footer={null} // 将 footer 设置为 null 来隐藏自带按钮
|
||
width={1152}
|
||
onCancel={() => {
|
||
setEditModalOpen(false);
|
||
}}
|
||
>
|
||
<div style={{ height: `${height - 20}px`, overflow: 'auto', borderTop: '1px solid #e8e8e8' }}>
|
||
<EditModal closeModal={() => { setEditModalOpen(false) }} ></EditModal>
|
||
</div>
|
||
</Modal>
|
||
{/* 删除弹窗 */}
|
||
<Modal title="删除"
|
||
okText="确认"
|
||
cancelText="取消"
|
||
destroyOnClose={true}
|
||
open={delModalOpen}
|
||
onOk={() => {
|
||
setDelModalOpen(false)
|
||
}}
|
||
onCancel={() => {
|
||
setDelModalOpen(false)
|
||
}}
|
||
okButtonProps={{ style: { background: 'red', color: 'white' } }}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
height: `${height}px`,
|
||
}}>
|
||
<div style={{
|
||
width: 700,
|
||
marginTop: 20
|
||
}}>
|
||
删除后这条信息将不被保存，确定删除吗？
|
||
</div>
|
||
</Modal>
|
||
{/* 出售弹窗 */}
|
||
<Modal title="出售"
|
||
okText="确认"
|
||
cancelText="取消"
|
||
destroyOnClose={true}
|
||
open={sellModalOpen}
|
||
onOk={() => {
|
||
setSellModalOpen(false)
|
||
}}
|
||
onCancel={() => {
|
||
setSellModalOpen(false)
|
||
}}
|
||
okButtonProps={{ style: { background: '#28915A', color: 'white' } }}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
height: `${height}px`,
|
||
}}>
|
||
<div style={{
|
||
width: 700,
|
||
marginTop: 20
|
||
}}>
|
||
确定出售接口管理系统的软件著作权证吗？
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
|