/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-01 10:03:07
|
* @LastEditTime: 2022-04-11 08:26:02
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useState } from 'react';
|
import './index.less';
|
import { Input, Divider, Row, Col, Dropdown, Menu, Typography, Popconfirm } from 'antd';
|
import { PlusSquareFilled, EllipsisOutlined, StopOutlined } from '@ant-design/icons';
|
import SelectTree from '../SelectTree';
|
const Search = Input.Search;
|
const EditionView = ({
|
versionInfo,
|
tabKey,
|
treeData,
|
hoverSelectedKeys,
|
searchTile,
|
addedition = () => {},
|
onMenuSelect = (e) => {},
|
hoverDel = (data) => {},
|
hoverStop = (data) => {},
|
hoverEdit = (data) => {},
|
searchChange = (e) => {},
|
searchonChange = (e) => {},
|
}) => {
|
const [data, setData] = useState(versionInfo);
|
|
// //搜索版本
|
// const searchonChange = (e) => {
|
// };
|
|
return (
|
<React.Fragment>
|
<Row className="edition-view-row">
|
<Col style={{ width: '300px', height: '400px' }}>
|
<div className="edition-view-row-col">
|
<span className="edition-view-title">
|
<Search
|
value={searchTile}
|
style={{ marginBottom: 1 }}
|
placeholder="搜索版本"
|
onChange={(e) => searchonChange(e.target.value)}
|
onSearch={(e) => searchChange(e)}
|
/>
|
</span>
|
<Typography.Link onClick={() => addedition()} style={{ marginRight: 8 }}>
|
<PlusSquareFilled style={{ fontSize: '32px' }} />
|
</Typography.Link>
|
</div>
|
<Menu
|
className="edition-view-menu"
|
selectedKeys={[hoverSelectedKeys]}
|
onSelect={onMenuSelect}
|
style={{ width: '300px' }}
|
expandIcon={false}
|
mode="inline"
|
>
|
{treeData.map((item, index) => (
|
<React.Fragment>
|
<Menu.Item key={item.id}>
|
{item.status == '2' ? (
|
<React.Fragment>
|
<span style={{ color: '#00000040' }}>{item.name}</span>
|
<StopOutlined style={{ color: '#00000040' }} />
|
</React.Fragment>
|
) : (
|
<span>{item.name}</span>
|
)}
|
</Menu.Item>
|
</React.Fragment>
|
))}
|
</Menu>
|
<div className="edition-view-menu-change">
|
{treeData.map((item) => (
|
<div className="edition-view-menu-change-col">
|
{item.hover ? (
|
<Dropdown
|
overlay={
|
<Menu>
|
<Menu.Item>
|
<Typography.Link onClick={() => hoverEdit(item)} style={{ marginRight: 8, color: '#000' }}>
|
修改
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Typography.Link onClick={() => hoverStop(item)} style={{ marginRight: 8, color: '#000' }}>
|
{item.status == '1' ? '停用' : '启动'}
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Popconfirm title="确定删除?" onConfirm={() => hoverDel(item)}>
|
<Typography.Link style={{ marginRight: 8, color: '#000' }}>删除</Typography.Link>
|
</Popconfirm>
|
</Menu.Item>
|
</Menu>
|
}
|
placement="bottomRight"
|
arrow
|
>
|
<Typography.Link style={{ marginRight: 8 }}>
|
<EllipsisOutlined style={{ fontSize: '16px' }} />
|
</Typography.Link>
|
</Dropdown>
|
) : null}
|
</div>
|
))}
|
</div>
|
</Col>
|
<Divider style={{ color: '#e8e8e8', minHeight: '42vh', margin: '0' }} type="vertical" />
|
<Col style={{ padding: 10, flex: '1' }}>
|
{treeData.length > 0 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="edition-view-first">版本名称</td>
|
<td colSpan="4" className="font-left padding-left">
|
{data.name || ''}
|
</td>
|
<td className="edition-view-first">价格</td>
|
<td colSpan="4" className="font-left padding-left">
|
{data.price ? `${data.price}元` : ''}
|
</td>
|
{tabKey == '1' ? (
|
<React.Fragment>
|
<td className="edition-view-first">期限</td>
|
<td colSpan="4" className="font-left padding-left">
|
{data.dead ? `${data.dead}天` : ''}
|
</td>
|
</React.Fragment>
|
) : (
|
<React.Fragment>
|
<td className="edition-view-first">期限</td>
|
<td colSpan="4" className="font-left padding-left">
|
{data.yxqx ? `${data.yxqx}天` : ''}
|
</td>
|
</React.Fragment>
|
)}
|
</tr>
|
<tr>
|
<td className="edition-view-first">用户数</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.uses ? `${data.uses}个` : ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="edition-view-first">空间资源</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.space ? `${data.space}G` : ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="edition-view-first">功能</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.versionTrees ? (
|
data.versionTrees.filter((item) => item.appClient == '1').length > 0 ? (
|
<SelectTree
|
text={'客户PC端'}
|
list={data.versionTrees ? data.versionTrees.filter((item) => item.appClient == '1') : []}
|
disabled={true}
|
/>
|
) : null
|
) : null}
|
{data.versionTrees ? (
|
data.versionTrees.filter((item) => item.appClient == '2').length > 0 ? (
|
<SelectTree
|
text={'当事人小程序'}
|
list={data.versionTrees ? data.versionTrees.filter((item) => item.appClient == '2') : []}
|
disabled={true}
|
/>
|
) : null
|
) : null}
|
{data.versionTrees ? (
|
data.versionTrees.filter((item) => item.appClient == '3').length > 0 ? (
|
<SelectTree
|
text={'调解员小程序'}
|
list={data.versionTrees ? data.versionTrees.filter((item) => item.appClient == '3') : []}
|
disabled={true}
|
/>
|
) : null
|
) : null}
|
</td>
|
</tr>
|
</table>
|
)}
|
</Col>
|
</Row>
|
</React.Fragment>
|
);
|
};
|
|
EditionView.propTypes = {};
|
export default EditionView;
|
