351 lines
11 KiB
TypeScript
351 lines
11 KiB
TypeScript
// import React from 'react'
|
||
import './product-release.css'
|
||
import {
|
||
Select, DatePicker, Button,
|
||
// message,
|
||
Checkbox, Empty, Switch, Modal
|
||
} 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 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 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)
|
||
// dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
|
||
console.log('日期', dayjs(date).format(dateFormat));
|
||
|
||
};
|
||
|
||
// 初始化搜索条件
|
||
const init = () => {
|
||
setBelongType(undefined)
|
||
setDate(undefined)
|
||
}
|
||
// 点击清除
|
||
const clearKeyWords = () => {
|
||
init()
|
||
// 重新获取数据
|
||
}
|
||
// 选框选择时触发事件
|
||
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 [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);
|
||
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: '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 (
|
||
<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={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>
|
||
<Button
|
||
style={{
|
||
height: 36,
|
||
marginLeft: 10,
|
||
// backgroundColor: '#FF9F08'
|
||
}}
|
||
icon={<ClearOutlined />}
|
||
onClick={clearKeyWords}
|
||
>
|
||
清除
|
||
</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>
|
||
|
||
{/* 编辑弹窗 */}
|
||
<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></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>
|
||
)
|
||
}
|
||
|