删除多余菜单目录
jiangxucong
1 month ago
parent
df9086cf4d
commit
7617b1cd96
@ -1,56 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
|
|
||||||
import styles from './FireKeynoteArea.less';
|
|
||||||
import KeypartsBasicInformation from './components/KeypartsBasicInformation'; //重点部位基础信息管理
|
|
||||||
import EmergencyPlanAssociation from './components/EmergencyPlanAssociation'; //应急预案关联管理
|
|
||||||
import EmergencyDrillRecordAssociation from './components/EmergencyDrillRecordAssociation'; //应急演练记录关联管理
|
|
||||||
|
|
||||||
const FireKeynoteArea = () => {
|
|
||||||
const [activeModule, setActiveModule] = useState('1');
|
|
||||||
|
|
||||||
const handleModuleClick = (module) => {
|
|
||||||
setActiveModule(module)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const renderModule = () => {
|
|
||||||
switch (activeModule) {
|
|
||||||
case '1':
|
|
||||||
return <KeypartsBasicInformation />;
|
|
||||||
case '2':
|
|
||||||
return <EmergencyPlanAssociation />;
|
|
||||||
case '3':
|
|
||||||
return <EmergencyDrillRecordAssociation />;
|
|
||||||
default:
|
|
||||||
return <KeypartsBasicInformation />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<div className={styles.TopButton}>
|
|
||||||
<Button
|
|
||||||
className={`${styles.TopButtonItem} ${activeModule === "1" ? styles.active : ""}`}
|
|
||||||
onClick={() => handleModuleClick("1")}
|
|
||||||
>重点部位基础信息管理
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className={`${styles.TopButtonItem} ${activeModule === "2" ? styles.active : ""}`}
|
|
||||||
onClick={() => handleModuleClick("2")}
|
|
||||||
>应急预案关联管理
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className={`${styles.TopButtonItem} ${activeModule === "3" ? styles.active : ""}`}
|
|
||||||
onClick={() => handleModuleClick("3")}
|
|
||||||
>应急演练记录关联管理
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className={styles.content}>
|
|
||||||
{renderModule()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FireKeynoteArea;
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
.container {
|
|
||||||
background-color: transparent;
|
|
||||||
width: 100%;
|
|
||||||
height: 89vh;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.TopButton {
|
|
||||||
background-color: white;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 30px;
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
margin-left: 6px;
|
|
||||||
|
|
||||||
.TopButtonItem {
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: #333333 !important;
|
|
||||||
font-family: 'PingFang SC', sans-serif !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
line-height: 100% !important;
|
|
||||||
border-radius: 8px !important;
|
|
||||||
padding: 6px 10px !important;
|
|
||||||
height: auto !important;
|
|
||||||
border: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
position: relative !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #333333 !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: #2E4CD4 !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #2E4CD4 !important;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
border-radius: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
// ======== 内容区域样式 ========
|
|
||||||
flex: 1; // ======== 占据剩余空间 ========
|
|
||||||
overflow-y: auto; // ======== 允许垂直滚动 ========
|
|
||||||
padding: 0; // ======== 无内边距 ========
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,429 +0,0 @@
|
|||||||
|
|
||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import { Button, Input, Select, Tree } from 'antd';
|
|
||||||
import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
import styles from './KeypartsBasicInformation.less';
|
|
||||||
import eqicon1 from '@/assets/business_firekeynotearea/eqicon1.png';
|
|
||||||
import eqicon2 from '@/assets/business_firekeynotearea/eqicon2.png';
|
|
||||||
import eqicon3 from '@/assets/business_firekeynotearea/eqicon3.png';
|
|
||||||
import eqicon4 from '@/assets/business_firekeynotearea/eqicon4.png';
|
|
||||||
import eqicon5 from '@/assets/business_firekeynotearea/eqicon5.png';
|
|
||||||
|
|
||||||
const KeypartsBasicInformation = () => {
|
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
||||||
const [selectedRows, setSelectedRows] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [dataSource, setDataSource] = useState([]);
|
|
||||||
const [pagination, setPagination] = useState({
|
|
||||||
current: 1,
|
|
||||||
pageSize: 5,
|
|
||||||
total: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '编号',
|
|
||||||
dataIndex: 'id',
|
|
||||||
key: 'id',
|
|
||||||
width: 60,
|
|
||||||
fixed: 'left',
|
|
||||||
render: (text, record, index) => {
|
|
||||||
const page = pagination.current || 1;
|
|
||||||
const pageSize = pagination.pageSize || 5;
|
|
||||||
const number = (page - 1) * pageSize + index + 1;
|
|
||||||
return `0${number}`.slice(-2);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '部位名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属建筑',
|
|
||||||
dataIndex: 'building',
|
|
||||||
key: 'building',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
width: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '标签',
|
|
||||||
dataIndex: 'tags',
|
|
||||||
key: 'tags',
|
|
||||||
width: 200,
|
|
||||||
render: (tags) => (
|
|
||||||
<>
|
|
||||||
{tags.map((tag, idx) => {
|
|
||||||
const tagColorMap = {
|
|
||||||
'电气风险': { color: '#F9EBBC', fontColor: '#333333' },
|
|
||||||
'重要设备': { color: '#CDDFFF', fontColor: '#333333' },
|
|
||||||
'易燃易爆': { color: '#F8C6C6', fontColor: '#333333' },
|
|
||||||
'人员密集': { color: '#B6E1F6', fontColor: '#333333' },
|
|
||||||
'关键设施': { color: '#FDDBB5', fontColor: '#333333' },
|
|
||||||
'高风险区': { color: '#F8C6C6', fontColor: '#333333' },
|
|
||||||
};
|
|
||||||
const style = tagColorMap[tag] || { color: '#eee', fontColor: '#666' };
|
|
||||||
return (
|
|
||||||
<span key={tag + idx} style={{
|
|
||||||
background: style.color,
|
|
||||||
color: style.fontColor,
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: '2px 8px',
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: 600,
|
|
||||||
marginRight: 6,
|
|
||||||
display: 'inline-block',
|
|
||||||
minWidth: 40,
|
|
||||||
textAlign: 'center',
|
|
||||||
marginBottom: 2
|
|
||||||
}}>{tag}</span>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
width: 80,
|
|
||||||
render: (text) => {
|
|
||||||
const statusMap = {
|
|
||||||
'故障': { color: '#FF3E48', bg: '#FFE0E2' },
|
|
||||||
'预警': { color: '#FF8800', bg: '#FFF3E9' },
|
|
||||||
'正常': { color: '#44BB5F', bg: '#D8F7DE' }
|
|
||||||
};
|
|
||||||
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
|
|
||||||
return (
|
|
||||||
<span style={{
|
|
||||||
color: status.color,
|
|
||||||
backgroundColor: status.bg,
|
|
||||||
padding: '4px 8px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: 500
|
|
||||||
}}>
|
|
||||||
{text}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '最后更新',
|
|
||||||
dataIndex: 'lastUpdate',
|
|
||||||
key: 'lastUpdate',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: 100,
|
|
||||||
align: 'center',
|
|
||||||
fixed: 'right',
|
|
||||||
render: (_, record) => (
|
|
||||||
<>
|
|
||||||
<Button type="link" size="small" style={{ fontSize: '12px', color: '#2E4CD4', fontWeight: 500, padding: 0, marginRight: 12 }}>编辑</Button>
|
|
||||||
<Button type="link" size="small" style={{ fontSize: '12px', color: '#FF2526', fontWeight: 500, padding: 0 }}>删除</Button>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 模拟数据
|
|
||||||
const mockData = [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
id: '001',
|
|
||||||
name: '1号办公楼',
|
|
||||||
building: '1号办公楼',
|
|
||||||
type: '配电室',
|
|
||||||
tags: ['电气风险', '重要设备'],
|
|
||||||
status: '故障',
|
|
||||||
lastUpdate: '2025-09-10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
id: '002',
|
|
||||||
name: 'B区厨房',
|
|
||||||
building: '员工餐厅',
|
|
||||||
type: '厨房',
|
|
||||||
tags: ['易燃易爆', '人员密集'],
|
|
||||||
status: '预警',
|
|
||||||
lastUpdate: '2025-09-10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
id: '003',
|
|
||||||
name: '数据中心机房',
|
|
||||||
building: '信息中心',
|
|
||||||
type: '数据机房',
|
|
||||||
tags: ['关键设施', '重要设备'],
|
|
||||||
status: '正常',
|
|
||||||
lastUpdate: '2025-09-10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
id: '004',
|
|
||||||
name: '化学品仓库',
|
|
||||||
building: '实验楼',
|
|
||||||
type: '仓库',
|
|
||||||
tags: ['易燃易爆', '高风险区'],
|
|
||||||
status: '正常',
|
|
||||||
lastUpdate: '2025-09-10',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
useEffect(() => {
|
|
||||||
setPagination(prev => ({ ...prev, total: mockData.length }));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 根据分页获取当前页数据
|
|
||||||
const getCurrentPageData = () => {
|
|
||||||
const { current, pageSize } = pagination;
|
|
||||||
const startIndex = (current - 1) * pageSize;
|
|
||||||
const endIndex = startIndex + pageSize;
|
|
||||||
return mockData.slice(startIndex, endIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
|
|
||||||
setSelectedRowKeys(newSelectedRowKeys);
|
|
||||||
setSelectedRows(newSelectedRows);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增设备按钮点击事件
|
|
||||||
const handleAddDevice = () => {
|
|
||||||
console.log('新增设备');
|
|
||||||
// TODO: 实现新增设备逻辑
|
|
||||||
};
|
|
||||||
|
|
||||||
// 导出数据按钮点击事件
|
|
||||||
const handleExportData = () => {
|
|
||||||
console.log('导出数据');
|
|
||||||
// TODO: 实现导出数据逻辑
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化处理
|
|
||||||
const handleTableChange = (pagination) => {
|
|
||||||
setPagination(prev => ({
|
|
||||||
...prev,
|
|
||||||
current: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.Rcontainer}>
|
|
||||||
{/* 第一个div - 高度20% */}
|
|
||||||
<div className={styles.RcontainerTop}>
|
|
||||||
<div className={styles.sectionContent}>
|
|
||||||
<div className={styles.blocksContainer}>
|
|
||||||
{/* 块1 */}
|
|
||||||
<div className={styles.blockItem + ' ' + styles.bgBlock1}>
|
|
||||||
<div className={styles.blockLeft}>
|
|
||||||
<div className={styles.blockTitle}>总重点部位数</div>
|
|
||||||
<div className={styles.blockNumber}>1820</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.blockRight}>
|
|
||||||
<img src={eqicon1} alt="总重点部位数" className={styles.blockImage} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 块2 */}
|
|
||||||
<div className={styles.blockItem + ' ' + styles.bgBlock2}>
|
|
||||||
<div className={styles.blockLeft}>
|
|
||||||
<div className={styles.blockTitle}>易燃易爆场所</div>
|
|
||||||
<div className={styles.blockNumber}>386</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.blockRight}>
|
|
||||||
<img src={eqicon2} alt="易燃易爆场所" className={styles.blockImage} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 块3 */}
|
|
||||||
<div className={styles.blockItem + ' ' + styles.bgBlock3}>
|
|
||||||
<div className={styles.blockLeft}>
|
|
||||||
<div className={styles.blockTitle}>人员密集区域</div>
|
|
||||||
<div className={styles.blockNumber}>269</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.blockRight}>
|
|
||||||
<img src={eqicon3} alt="人员密集区域" className={styles.blockImage} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 块4 */}
|
|
||||||
<div className={styles.blockItem + ' ' + styles.bgBlock4}>
|
|
||||||
<div className={styles.blockLeft}>
|
|
||||||
<div className={styles.blockTitle}>重要设备房</div>
|
|
||||||
<div className={styles.blockNumber}>412</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.blockRight}>
|
|
||||||
<img src={eqicon4} alt="重要设备房" className={styles.blockImage} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 块5 */}
|
|
||||||
<div className={styles.blockItem + ' ' + styles.bgBlock5}>
|
|
||||||
<div className={styles.blockLeft}>
|
|
||||||
<div className={styles.blockTitle}>物资储存区</div>
|
|
||||||
<div className={styles.blockNumber}>290</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.blockRight}>
|
|
||||||
<img src={eqicon5} alt="物资储存区" className={styles.blockImage} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 第二个div - 占满剩余位置 */}
|
|
||||||
<div className={styles.RcontainerBottom}>
|
|
||||||
<div className={styles.sectionContent}>
|
|
||||||
<div className={styles.leftBlock}>
|
|
||||||
|
|
||||||
{/* 表格头部 */}
|
|
||||||
<div className={styles.tableHeader}>
|
|
||||||
<div className={styles.tableTitle}>
|
|
||||||
<div className={styles.titleIcon}></div>
|
|
||||||
<div>消防设施与器材列表</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 搜索与操作栏 */}
|
|
||||||
<div className={styles.searchWrap}>
|
|
||||||
<div className={styles.searchInputWrap}>
|
|
||||||
{/* 搜索输入框 */}
|
|
||||||
<Input.Search
|
|
||||||
className={styles.searchInput}
|
|
||||||
style={{ width: 200 }}
|
|
||||||
placeholder="搜索重点部位..."
|
|
||||||
allowClear
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={styles.searchBarWrap}>
|
|
||||||
{/* 下拉选择 */}
|
|
||||||
<Select
|
|
||||||
className={styles.selectAll}
|
|
||||||
defaultValue="全部"
|
|
||||||
style={{ width: 100 }}
|
|
||||||
options={[{ value: '全部', label: '全部' }]}
|
|
||||||
/>
|
|
||||||
{/* 新增按钮 */}
|
|
||||||
<Button className={styles.addBtn} type="primary">
|
|
||||||
<PlusOutlined /> 新增部位
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 表格内容 */}
|
|
||||||
<div className={styles.tableContainer}>
|
|
||||||
<StandardTable
|
|
||||||
columns={columns}
|
|
||||||
data={{
|
|
||||||
list: getCurrentPageData(),
|
|
||||||
pagination: pagination
|
|
||||||
}}
|
|
||||||
loading={loading}
|
|
||||||
selectionType="checkbox"
|
|
||||||
onSelectRow={onSelectChange}
|
|
||||||
onChange={handleTableChange}
|
|
||||||
pagination={{
|
|
||||||
...pagination,
|
|
||||||
showSizeChanger: false,
|
|
||||||
showQuickJumper: true,
|
|
||||||
showTotal: (total, range) =>
|
|
||||||
`共 ${total} 条`,
|
|
||||||
}}
|
|
||||||
scroll={{ x: "max-content" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.rightBlock}>
|
|
||||||
{/* 第一行块 - 蓝色方块加标题 */}
|
|
||||||
<div className={styles.leftBlockTitle}>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
||||||
<div className={styles.titleIcon}></div>
|
|
||||||
<div>分类标签管理</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button className={styles.addBtn} type="primary">
|
|
||||||
<PlusOutlined /> 新增标签
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* 树形结构 */}
|
|
||||||
<div className={styles.treeWrap}>
|
|
||||||
<Input.Search
|
|
||||||
className={styles.treeSearchInput}
|
|
||||||
placeholder="搜索标签..."
|
|
||||||
allowClear
|
|
||||||
style={{ marginBottom: 12 }}
|
|
||||||
/>
|
|
||||||
<Tree
|
|
||||||
className={styles.customTree}
|
|
||||||
showIcon
|
|
||||||
defaultExpandAll
|
|
||||||
treeData={[
|
|
||||||
{
|
|
||||||
title: '易燃易爆场所',
|
|
||||||
key: '0-0',
|
|
||||||
icon: <span className={styles.folderIcon} />,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: <span style={{ color: '#2E4CD4', fontWeight: 500 }}>危险化学品储存区</span>,
|
|
||||||
key: '0-0-0',
|
|
||||||
icon: <span className={styles.childIconSelected} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: <span>危险化学品储存区</span>,
|
|
||||||
key: '0-0-1',
|
|
||||||
icon: <span className={styles.childIcon} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: <span>危险化学品储存区</span>,
|
|
||||||
key: '0-0-2',
|
|
||||||
icon: <span className={styles.childIcon} />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '人员密集区域',
|
|
||||||
key: '0-1',
|
|
||||||
icon: <span className={styles.folderIcon} />,
|
|
||||||
children: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '重要设备房',
|
|
||||||
key: '0-2',
|
|
||||||
icon: <span className={styles.folderIcon} />,
|
|
||||||
children: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '物资储存区',
|
|
||||||
key: '0-3',
|
|
||||||
icon: <span className={styles.folderIcon} />,
|
|
||||||
children: [],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default KeypartsBasicInformation;
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Button } from 'antd';
|
|
||||||
import styles from './FireWarning.less';
|
|
||||||
import RealtimeMonitoring from './components/RealtimeMonitoring';
|
|
||||||
import DataAnalysisWarning from './components/DataAnalysisWarning';
|
|
||||||
|
|
||||||
const Firewarning = () => {
|
|
||||||
const [activeModule, setActiveModule] = useState('realtime');
|
|
||||||
|
|
||||||
const handleModuleClick = (module) => {
|
|
||||||
setActiveModule(module);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderModule = () => {
|
|
||||||
switch (activeModule) {
|
|
||||||
case 'realtime':
|
|
||||||
return <RealtimeMonitoring />;
|
|
||||||
case 'analysis':
|
|
||||||
return <DataAnalysisWarning />;
|
|
||||||
default:
|
|
||||||
return <RealtimeMonitoring />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.firewarningContainer}>
|
|
||||||
<div className={styles.firewarningTopButton}>
|
|
||||||
<Button
|
|
||||||
className={`${styles.firewarningTopButtonItem} ${activeModule === "realtime" ? styles.active : ""}`}
|
|
||||||
onClick={() => handleModuleClick("realtime")}
|
|
||||||
>
|
|
||||||
实时状态监测
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className={`${styles.firewarningTopButtonItem} ${activeModule === "analysis" ? styles.active : ""}`}
|
|
||||||
onClick={() => handleModuleClick("analysis")}
|
|
||||||
>
|
|
||||||
数据分析与预警
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className={styles.firewarningContent}>
|
|
||||||
{renderModule()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Firewarning;
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
.firewarningContainer {
|
|
||||||
background-color: transparent;
|
|
||||||
width: 100%;
|
|
||||||
height: 89vh;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.firewarningTopButton {
|
|
||||||
background-color: white;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 30px;
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
margin-left: 6px;
|
|
||||||
|
|
||||||
.firewarningTopButtonItem {
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: #333333 !important;
|
|
||||||
font-family: 'PingFang SC', sans-serif !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
line-height: 100% !important;
|
|
||||||
border-radius: 8px !important;
|
|
||||||
padding: 6px 10px !important;
|
|
||||||
height: auto !important;
|
|
||||||
border: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
position: relative !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #333333 !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: #2E4CD4 !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #2E4CD4 !important;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
border-radius: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.firewarningContent {
|
|
||||||
// ======== 内容区域样式 ========
|
|
||||||
flex: 1; // ======== 占据剩余空间 ========
|
|
||||||
overflow-y: auto; // ======== 允许垂直滚动 ========
|
|
||||||
padding: 0; // ======== 无内边距 ========
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,508 +0,0 @@
|
|||||||
.analysisContainer {
|
|
||||||
padding: 8px 6px 0px 6px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
// 第二个div - 高度35%
|
|
||||||
.analysisContainerMiddle {
|
|
||||||
// height: 400px;
|
|
||||||
min-height: 46%;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.analysisSectionContent {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.analysisMiddleBlock1 {
|
|
||||||
width: 39%;
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
position: relative;
|
|
||||||
padding: 0px 10px 10px 2px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.analysisBlock1Header {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.analysisBlock1Title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 5px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.analysisTitleIcon {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisDeviceStatusChart {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 10;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMiddleBlock12 {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.analysisBlock1Header {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.analysisBlock1Title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 5px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.analysisTitleIcon {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisDeviceStatusChart {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
// bottom: 10px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMiddleBlock12 {
|
|
||||||
width: 40%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.analysisBlock1Header {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.analysisBlock1Title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.analysisTitleIcon {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisDeviceStatusChart {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
// bottom: 10px;
|
|
||||||
min-height: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMiddleBlock2 {
|
|
||||||
// flex: 1;
|
|
||||||
width: calc(100% - 76% - 15px);
|
|
||||||
height: 100%;
|
|
||||||
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
|
|
||||||
// border: 2px solid #fff;
|
|
||||||
background-color: #fff;
|
|
||||||
// border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
|
|
||||||
.analysisMiddleBlock2Title {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
.analysisTitleLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.analysisTitleIcon {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMiddleBlock2Chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 底部区域
|
|
||||||
.analysisBottom {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 10px;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.analysisMaintenanceSection {
|
|
||||||
width: 30%;
|
|
||||||
background: #FFF;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 12px 14px;
|
|
||||||
|
|
||||||
.analysisMaintenanceTitle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
.analysisTitleIcon {
|
|
||||||
width: 3px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceContent {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.analysisMaintenanceItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #FFF;
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 0px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceItem1 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #FDF2F2;
|
|
||||||
border-left: 4px solid #EB5050;
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceItem2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #FEF8E4;
|
|
||||||
border-left: 4px solid #F6C644;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceItem3 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #F0F9FE;
|
|
||||||
border-left: 4px solid #4CA7F3;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceItem4 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #F0F9FE;
|
|
||||||
border-left: 4px solid #4CA7F3;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceItem,
|
|
||||||
.analysisMaintenanceItem1,
|
|
||||||
.analysisMaintenanceItem2,
|
|
||||||
.analysisMaintenanceItem3,
|
|
||||||
.analysisMaintenanceItem4 {
|
|
||||||
.analysisMaintenanceLeft {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
|
|
||||||
.analysisMaintenanceText1 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceText2 {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666666;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceText3 {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666666;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceRight {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.analysisMaintenanceStatus {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #FFF;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
background-color: #EB5050;
|
|
||||||
padding: 6px 8px;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceRight2 {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.analysisMaintenanceStatus {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #FFF;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
background-color: #F6C644;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisMaintenanceStatus2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #FFF;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
background-color: #4CA7F3;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisTableSection {
|
|
||||||
width: calc(100% - 30% - 10px);
|
|
||||||
background-color: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.analysisTableHeader {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 11px 15px 5px 15px;
|
|
||||||
|
|
||||||
.analysisTableTitle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.analysisTitleIcon {
|
|
||||||
width: 3px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisTableActions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 5px;
|
|
||||||
padding: 0px 15px;
|
|
||||||
|
|
||||||
.analysisLeftActions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisRightActions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisActionButton {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
height: 28px;
|
|
||||||
border: 1px solid #DFE4F6;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #2E4CD4;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 0px 8px;
|
|
||||||
background: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f0f2ff;
|
|
||||||
border-color: #2E4CD4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: #e6ebff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisButtonIcon {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.analysisTableContainer {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 10px 15px 0 15px;
|
|
||||||
|
|
||||||
:global(.ant-table) {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ant-table-thead > tr > th) {
|
|
||||||
background-color: #f5f5fa;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
padding: 8px 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ant-table-tbody > tr > td) {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
text-align: center;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ant-table-tbody > tr:hover > td) {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ant-pagination) {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Outlet } from '@umijs/max';
|
|
||||||
import './SystemContentList.less';
|
|
||||||
|
|
||||||
const SystemContentList = () => {
|
|
||||||
return (
|
|
||||||
<div className="systemContentContainer">
|
|
||||||
<div className="systemContentMain">
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SystemContentList;
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
.systemContentContainer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.systemContentMain {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
@ -1,408 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
RedoOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
UpOutlined,
|
|
||||||
InfoCircleFilled,
|
|
||||||
QuestionCircleFilled,
|
|
||||||
DownloadOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import {connect, history} from '@umijs/max';
|
|
||||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree} from 'antd';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
|
|
||||||
import { MyIcon } from "@/components/Icon"
|
|
||||||
import style from "@/global.less";
|
|
||||||
import styles from './SystemMenuList.less';
|
|
||||||
import datadictionary from "@/utils/dataDictionary";
|
|
||||||
import {formatDate} from "@/utils/formatUtils";
|
|
||||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
||||||
|
|
||||||
const { confirm } = Modal;
|
|
||||||
|
|
||||||
// 菜单类型
|
|
||||||
const menu_type = datadictionary.menu_type || [];
|
|
||||||
const menu_status = datadictionary.menu_status || [];
|
|
||||||
const menu_level = datadictionary.menu_level || [];
|
|
||||||
|
|
||||||
const mockData = {
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '效率管理',
|
|
||||||
code: 'hrefficiency',
|
|
||||||
type: '1',
|
|
||||||
level: '1',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency',
|
|
||||||
component: '',
|
|
||||||
icon: 'setting',
|
|
||||||
createTime: '2023-01-01 10:00:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '工时仪表盘',
|
|
||||||
code: 'timesheet',
|
|
||||||
type: '2',
|
|
||||||
level: '2',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency/timesheet',
|
|
||||||
component: './hrefficiency_timesheet/TimeSheetList',
|
|
||||||
icon: 'dashboard',
|
|
||||||
createTime: '2023-01-01 10:05:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '员工仪表盘',
|
|
||||||
code: 'staffsheet',
|
|
||||||
type: '2',
|
|
||||||
level: '2',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency/staffsheet',
|
|
||||||
component: './hrefficiency_staffsheet/StaffSheetList',
|
|
||||||
icon: 'user',
|
|
||||||
createTime: '2023-01-01 10:10:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
name: '系统管理',
|
|
||||||
code: 'system',
|
|
||||||
type: '1',
|
|
||||||
level: '1',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency/system',
|
|
||||||
component: './nav_system_content/SystemContentList',
|
|
||||||
icon: 'control',
|
|
||||||
createTime: '2023-01-02 14:30:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
total: 2,
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ systemMenu }) => ({
|
|
||||||
systemMenu
|
|
||||||
}))
|
|
||||||
export default class SystemMenuList extends React.Component {
|
|
||||||
state = {
|
|
||||||
selectedRows: [],
|
|
||||||
advancedFormVisible: false,
|
|
||||||
filterData: {},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
},
|
|
||||||
tableData: mockData.list,
|
|
||||||
treeData: [],
|
|
||||||
expandedKeys: []
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.getMenuList();
|
|
||||||
this.buildTreeData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取菜单列表
|
|
||||||
getMenuList = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { pagination, filterData } = this.state;
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({
|
|
||||||
type: 'systemMenu/fetchList',
|
|
||||||
payload: {
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
...filterData
|
|
||||||
},
|
|
||||||
callback: (res) => {
|
|
||||||
this.setState({
|
|
||||||
tableData: res?.list || mockData.list,
|
|
||||||
pagination: {
|
|
||||||
...pagination,
|
|
||||||
total: res?.total || mockData.pagination.total
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.buildTreeData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取菜单列表失败:', error);
|
|
||||||
this.setState({
|
|
||||||
tableData: mockData.list,
|
|
||||||
pagination: mockData.pagination
|
|
||||||
}, () => {
|
|
||||||
this.buildTreeData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 构建树数据
|
|
||||||
buildTreeData = () => {
|
|
||||||
const { tableData } = this.state;
|
|
||||||
const treeData = this.transformToTree(tableData);
|
|
||||||
this.setState({ treeData });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 转换为树结构
|
|
||||||
transformToTree = (data) => {
|
|
||||||
return data.map(item => {
|
|
||||||
const node = {
|
|
||||||
title: item.name,
|
|
||||||
key: item.id,
|
|
||||||
dataRef: item
|
|
||||||
};
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
node.children = this.transformToTree(item.children);
|
|
||||||
}
|
|
||||||
return node;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
handleSelectChange = (selectedRowKeys, selectedRows) => {
|
|
||||||
this.setState({ selectedRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
handleTableChange = (pagination) => {
|
|
||||||
this.setState({
|
|
||||||
pagination: {
|
|
||||||
...this.state.pagination,
|
|
||||||
current: pagination.current
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.getMenuList();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增菜单
|
|
||||||
handleAdd = () => {
|
|
||||||
// 新增逻辑
|
|
||||||
message.success('新增菜单功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑菜单
|
|
||||||
handleEdit = (record) => {
|
|
||||||
// 编辑逻辑
|
|
||||||
message.success('编辑菜单功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除菜单
|
|
||||||
handleDelete = (record) => {
|
|
||||||
confirm({
|
|
||||||
title: '确定要删除这个菜单吗?',
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 删除逻辑
|
|
||||||
message.success('删除菜单成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
handleBatchDelete = () => {
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
if (selectedRows.length === 0) {
|
|
||||||
message.warning('请选择要删除的菜单');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
confirm({
|
|
||||||
title: `确定要删除选中的${selectedRows.length}个菜单吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 批量删除逻辑
|
|
||||||
message.success('批量删除菜单成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 启用/禁用菜单
|
|
||||||
handleStatusChange = (record) => {
|
|
||||||
const newStatus = record.status === '1' ? '0' : '1';
|
|
||||||
confirm({
|
|
||||||
title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个菜单吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 状态变更逻辑
|
|
||||||
message.success(`${newStatus === '1' ? '启用' : '禁用'}菜单成功`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 展开/折叠树节点
|
|
||||||
handleExpand = (expandedKeys) => {
|
|
||||||
this.setState({ expandedKeys });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 点击树节点
|
|
||||||
handleTreeSelect = (selectedKeys, info) => {
|
|
||||||
// 树节点选择逻辑
|
|
||||||
console.log('Selected', selectedKeys, info);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedRows, tableData, pagination, treeData, expandedKeys } = this.state;
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '菜单名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单编码',
|
|
||||||
dataIndex: 'code',
|
|
||||||
key: 'code',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
render: text => formatDictText(menu_type, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单级别',
|
|
||||||
dataIndex: 'level',
|
|
||||||
key: 'level',
|
|
||||||
render: text => formatDictText(menu_level, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '路径',
|
|
||||||
dataIndex: 'path',
|
|
||||||
key: 'path',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: text => (
|
|
||||||
<Tag color={text === '1' ? 'green' : 'red'}>
|
|
||||||
{text === '1' ? '启用' : '禁用'}
|
|
||||||
</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
dataIndex: 'createUser',
|
|
||||||
key: 'createUser',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 160,
|
|
||||||
render: (_, record) => (
|
|
||||||
<Space size="middle">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => this.handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => this.handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Switch
|
|
||||||
checked={record.status === '1'}
|
|
||||||
onChange={() => this.handleStatusChange(record)}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.contentWrapper}>
|
|
||||||
<Card className={style.contentCard}>
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.headerLeft}>
|
|
||||||
<h2 className={styles.title}>菜单配置</h2>
|
|
||||||
</div>
|
|
||||||
<div className={styles.headerRight}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={this.handleAdd}
|
|
||||||
>
|
|
||||||
新增菜单
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={this.handleBatchDelete}
|
|
||||||
disabled={selectedRows.length === 0}
|
|
||||||
>
|
|
||||||
批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<div className={styles.menuContent}>
|
|
||||||
<div className={styles.menuTreeSection}>
|
|
||||||
<h3 className={styles.sectionTitle}>菜单树</h3>
|
|
||||||
<div className={styles.menuTree}>
|
|
||||||
<Tree
|
|
||||||
treeData={treeData}
|
|
||||||
expandedKeys={expandedKeys}
|
|
||||||
onExpand={this.handleExpand}
|
|
||||||
onSelect={this.handleTreeSelect}
|
|
||||||
className={styles.tree}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<StandardTable
|
|
||||||
rowKey="id"
|
|
||||||
selectedRows={selectedRows}
|
|
||||||
data={{
|
|
||||||
list: tableData,
|
|
||||||
pagination
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
onSelectRow={this.handleSelectChange}
|
|
||||||
onChange={this.handleTableChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerRight {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterSection {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterItem {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batchAction {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContainer {
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formHeader {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContent {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFooter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formButton {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuContent {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuTreeSection {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
margin: 0 0 12px 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuTree {
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree .ant-tree-node-selected {
|
|
||||||
background-color: #e6f7ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree .ant-tree-node-selected:hover {
|
|
||||||
background-color: #bae7ff;
|
|
||||||
}
|
|
||||||
@ -1,314 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
RedoOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
UpOutlined,
|
|
||||||
InfoCircleFilled,
|
|
||||||
QuestionCircleFilled,
|
|
||||||
DownloadOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import {connect, history} from '@umijs/max';
|
|
||||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
|
|
||||||
import { MyIcon } from "@/components/Icon"
|
|
||||||
import style from "@/global.less";
|
|
||||||
import styles from './SystemOrganizationList.less';
|
|
||||||
import datadictionary from "@/utils/dataDictionary";
|
|
||||||
import {formatDate} from "@/utils/formatUtils";
|
|
||||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
||||||
|
|
||||||
const { confirm } = Modal;
|
|
||||||
|
|
||||||
// 组织类型
|
|
||||||
const organization_type = datadictionary.organization_type || [];
|
|
||||||
const organization_status = datadictionary.organization_status || [];
|
|
||||||
|
|
||||||
const mockData = {
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '总部',
|
|
||||||
code: 'HQ',
|
|
||||||
type: '1',
|
|
||||||
parentId: '0',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-01 10:00:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '研发部',
|
|
||||||
code: 'R&D',
|
|
||||||
type: '2',
|
|
||||||
parentId: '1',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-02 14:30:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '市场部',
|
|
||||||
code: 'MKT',
|
|
||||||
type: '2',
|
|
||||||
parentId: '1',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-03 09:15:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
total: 3,
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ systemOrganization }) => ({
|
|
||||||
systemOrganization
|
|
||||||
}))
|
|
||||||
export default class SystemOrganizationList extends React.Component {
|
|
||||||
state = {
|
|
||||||
selectedRows: [],
|
|
||||||
advancedFormVisible: false,
|
|
||||||
filterData: {},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
},
|
|
||||||
tableData: mockData.list
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.getOrganizationList();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取组织列表
|
|
||||||
getOrganizationList = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { pagination, filterData } = this.state;
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({
|
|
||||||
type: 'systemOrganization/fetchList',
|
|
||||||
payload: {
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
...filterData
|
|
||||||
},
|
|
||||||
callback: (res) => {
|
|
||||||
this.setState({
|
|
||||||
tableData: res?.list || mockData.list,
|
|
||||||
pagination: {
|
|
||||||
...pagination,
|
|
||||||
total: res?.total || mockData.pagination.total
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取组织列表失败:', error);
|
|
||||||
this.setState({
|
|
||||||
tableData: mockData.list,
|
|
||||||
pagination: mockData.pagination
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
handleSelectChange = (selectedRowKeys, selectedRows) => {
|
|
||||||
this.setState({ selectedRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
handleTableChange = (pagination) => {
|
|
||||||
this.setState({
|
|
||||||
pagination: {
|
|
||||||
...this.state.pagination,
|
|
||||||
current: pagination.current
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.getOrganizationList();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增组织
|
|
||||||
handleAdd = () => {
|
|
||||||
// 新增逻辑
|
|
||||||
message.success('新增组织功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑组织
|
|
||||||
handleEdit = (record) => {
|
|
||||||
// 编辑逻辑
|
|
||||||
message.success('编辑组织功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除组织
|
|
||||||
handleDelete = (record) => {
|
|
||||||
confirm({
|
|
||||||
title: '确定要删除这个组织吗?',
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 删除逻辑
|
|
||||||
message.success('删除组织成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
handleBatchDelete = () => {
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
if (selectedRows.length === 0) {
|
|
||||||
message.warning('请选择要删除的组织');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
confirm({
|
|
||||||
title: `确定要删除选中的${selectedRows.length}个组织吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 批量删除逻辑
|
|
||||||
message.success('批量删除组织成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 启用/禁用组织
|
|
||||||
handleStatusChange = (record) => {
|
|
||||||
const newStatus = record.status === '1' ? '0' : '1';
|
|
||||||
confirm({
|
|
||||||
title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个组织吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 状态变更逻辑
|
|
||||||
message.success(`${newStatus === '1' ? '启用' : '禁用'}组织成功`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedRows, tableData, pagination } = this.state;
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '组织名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '组织编码',
|
|
||||||
dataIndex: 'code',
|
|
||||||
key: 'code',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '组织类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
render: text => formatDictText(organization_type, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: text => (
|
|
||||||
<Tag color={text === '1' ? 'green' : 'red'}>
|
|
||||||
{text === '1' ? '启用' : '禁用'}
|
|
||||||
</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
dataIndex: 'createUser',
|
|
||||||
key: 'createUser',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 160,
|
|
||||||
render: (_, record) => (
|
|
||||||
<Space size="middle">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => this.handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => this.handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Switch
|
|
||||||
checked={record.status === '1'}
|
|
||||||
onChange={() => this.handleStatusChange(record)}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.contentWrapper}>
|
|
||||||
<Card className={style.contentCard}>
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.headerLeft}>
|
|
||||||
<h2 className={styles.title}>组织管理</h2>
|
|
||||||
</div>
|
|
||||||
<div className={styles.headerRight}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={this.handleAdd}
|
|
||||||
>
|
|
||||||
新增组织
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={this.handleBatchDelete}
|
|
||||||
disabled={selectedRows.length === 0}
|
|
||||||
>
|
|
||||||
批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<StandardTable
|
|
||||||
rowKey="id"
|
|
||||||
selectedRows={selectedRows}
|
|
||||||
data={{
|
|
||||||
list: tableData,
|
|
||||||
pagination
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
onSelectRow={this.handleSelectChange}
|
|
||||||
onChange={this.handleTableChange}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerRight {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterSection {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterItem {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batchAction {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContainer {
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formHeader {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContent {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFooter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formButton {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
@ -1,333 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
RedoOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
UpOutlined,
|
|
||||||
InfoCircleFilled,
|
|
||||||
QuestionCircleFilled,
|
|
||||||
DownloadOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import {connect, history} from '@umijs/max';
|
|
||||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
|
|
||||||
import { MyIcon } from "@/components/Icon"
|
|
||||||
import style from "@/global.less";
|
|
||||||
import styles from './SystemRoleList.less';
|
|
||||||
import datadictionary from "@/utils/dataDictionary";
|
|
||||||
import {formatDate} from "@/utils/formatUtils";
|
|
||||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
||||||
|
|
||||||
const { confirm } = Modal;
|
|
||||||
|
|
||||||
// 角色类型
|
|
||||||
const role_type = datadictionary.role_type || [];
|
|
||||||
const role_status = datadictionary.role_status || [];
|
|
||||||
|
|
||||||
const mockData = {
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '超级管理员',
|
|
||||||
code: 'SUPER_ADMIN',
|
|
||||||
type: '1',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-01 10:00:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
remark: '系统最高权限角色'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '部门管理员',
|
|
||||||
code: 'DEPT_ADMIN',
|
|
||||||
type: '2',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-02 14:30:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
remark: '部门级管理权限'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '普通用户',
|
|
||||||
code: 'NORMAL_USER',
|
|
||||||
type: '3',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-03 09:15:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
remark: '基础功能访问权限'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
total: 3,
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ systemRole }) => ({
|
|
||||||
systemRole
|
|
||||||
}))
|
|
||||||
export default class SystemRoleList extends React.Component {
|
|
||||||
state = {
|
|
||||||
selectedRows: [],
|
|
||||||
advancedFormVisible: false,
|
|
||||||
filterData: {},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
},
|
|
||||||
tableData: mockData.list
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.getRoleList();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取角色列表
|
|
||||||
getRoleList = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { pagination, filterData } = this.state;
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({
|
|
||||||
type: 'systemRole/fetchList',
|
|
||||||
payload: {
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
...filterData
|
|
||||||
},
|
|
||||||
callback: (res) => {
|
|
||||||
this.setState({
|
|
||||||
tableData: res?.list || mockData.list,
|
|
||||||
pagination: {
|
|
||||||
...pagination,
|
|
||||||
total: res?.total || mockData.pagination.total
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取角色列表失败:', error);
|
|
||||||
this.setState({
|
|
||||||
tableData: mockData.list,
|
|
||||||
pagination: mockData.pagination
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
handleSelectChange = (selectedRowKeys, selectedRows) => {
|
|
||||||
this.setState({ selectedRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
handleTableChange = (pagination) => {
|
|
||||||
this.setState({
|
|
||||||
pagination: {
|
|
||||||
...this.state.pagination,
|
|
||||||
current: pagination.current
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.getRoleList();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增角色
|
|
||||||
handleAdd = () => {
|
|
||||||
// 新增逻辑
|
|
||||||
message.success('新增角色功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑角色
|
|
||||||
handleEdit = (record) => {
|
|
||||||
// 编辑逻辑
|
|
||||||
message.success('编辑角色功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 角色授权
|
|
||||||
handleAuth = (record) => {
|
|
||||||
// 授权逻辑
|
|
||||||
message.success('角色授权功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除角色
|
|
||||||
handleDelete = (record) => {
|
|
||||||
confirm({
|
|
||||||
title: '确定要删除这个角色吗?',
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 删除逻辑
|
|
||||||
message.success('删除角色成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
handleBatchDelete = () => {
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
if (selectedRows.length === 0) {
|
|
||||||
message.warning('请选择要删除的角色');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
confirm({
|
|
||||||
title: `确定要删除选中的${selectedRows.length}个角色吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 批量删除逻辑
|
|
||||||
message.success('批量删除角色成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 启用/禁用角色
|
|
||||||
handleStatusChange = (record) => {
|
|
||||||
const newStatus = record.status === '1' ? '0' : '1';
|
|
||||||
confirm({
|
|
||||||
title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个角色吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 状态变更逻辑
|
|
||||||
message.success(`${newStatus === '1' ? '启用' : '禁用'}角色成功`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedRows, tableData, pagination } = this.state;
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '角色名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '角色编码',
|
|
||||||
dataIndex: 'code',
|
|
||||||
key: 'code',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '角色类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
render: text => formatDictText(role_type, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: text => (
|
|
||||||
<Tag color={text === '1' ? 'green' : 'red'}>
|
|
||||||
{text === '1' ? '启用' : '禁用'}
|
|
||||||
</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
dataIndex: 'createUser',
|
|
||||||
key: 'createUser',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '备注',
|
|
||||||
dataIndex: 'remark',
|
|
||||||
key: 'remark',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 200,
|
|
||||||
render: (_, record) => (
|
|
||||||
<Space size="middle">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => this.handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
onClick={() => this.handleAuth(record)}
|
|
||||||
>
|
|
||||||
授权
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => this.handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Switch
|
|
||||||
checked={record.status === '1'}
|
|
||||||
onChange={() => this.handleStatusChange(record)}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.contentWrapper}>
|
|
||||||
<Card className={style.contentCard}>
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.headerLeft}>
|
|
||||||
<h2 className={styles.title}>角色配置</h2>
|
|
||||||
</div>
|
|
||||||
<div className={styles.headerRight}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={this.handleAdd}
|
|
||||||
>
|
|
||||||
新增角色
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={this.handleBatchDelete}
|
|
||||||
disabled={selectedRows.length === 0}
|
|
||||||
>
|
|
||||||
批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<StandardTable
|
|
||||||
rowKey="id"
|
|
||||||
selectedRows={selectedRows}
|
|
||||||
data={{
|
|
||||||
list: tableData,
|
|
||||||
pagination
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
onSelectRow={this.handleSelectChange}
|
|
||||||
onChange={this.handleTableChange}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerRight {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterSection {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterItem {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batchAction {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContainer {
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formHeader {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContent {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFooter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formButton {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
@ -1,402 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
RedoOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
UpOutlined,
|
|
||||||
InfoCircleFilled,
|
|
||||||
QuestionCircleFilled,
|
|
||||||
DownloadOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import {connect, history} from '@umijs/max';
|
|
||||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree} from 'antd';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
|
|
||||||
import { MyIcon } from "@/components/Icon"
|
|
||||||
import style from "@/global.less";
|
|
||||||
import styles from './SystemMenuList.less';
|
|
||||||
import datadictionary from "@/utils/dataDictionary";
|
|
||||||
import {formatDate} from "@/utils/formatUtils";
|
|
||||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
||||||
|
|
||||||
const { confirm } = Modal;
|
|
||||||
|
|
||||||
// 菜单类型
|
|
||||||
const menu_type = datadictionary.menu_type || [];
|
|
||||||
const menu_status = datadictionary.menu_status || [];
|
|
||||||
const menu_level = datadictionary.menu_level || [];
|
|
||||||
|
|
||||||
const mockData = {
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '效率管理',
|
|
||||||
code: 'hrefficiency',
|
|
||||||
type: '1',
|
|
||||||
level: '1',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency',
|
|
||||||
component: '',
|
|
||||||
icon: 'setting',
|
|
||||||
createTime: '2023-01-01 10:00:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '工时仪表盘',
|
|
||||||
code: 'timesheet',
|
|
||||||
type: '2',
|
|
||||||
level: '2',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency/timesheet',
|
|
||||||
component: './hrefficiency_timesheet/TimeSheetList',
|
|
||||||
icon: 'dashboard',
|
|
||||||
createTime: '2023-01-01 10:05:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '员工仪表盘',
|
|
||||||
code: 'staffsheet',
|
|
||||||
type: '2',
|
|
||||||
level: '2',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency/staffsheet',
|
|
||||||
component: './hrefficiency_staffsheet/StaffSheetList',
|
|
||||||
icon: 'user',
|
|
||||||
createTime: '2023-01-01 10:10:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
name: '系统管理',
|
|
||||||
code: 'system',
|
|
||||||
type: '1',
|
|
||||||
level: '1',
|
|
||||||
status: '1',
|
|
||||||
path: '/topnavbar00/hrefficiency/system',
|
|
||||||
component: './nav_system_content/SystemContentList',
|
|
||||||
icon: 'control',
|
|
||||||
createTime: '2023-01-02 14:30:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
total: 2,
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ systemMenu, loading }) => ({
|
|
||||||
systemMenu,
|
|
||||||
loading: loading.models.systemMenu
|
|
||||||
}))
|
|
||||||
export default class SystemMenuList extends React.Component {
|
|
||||||
state = {
|
|
||||||
selectedRows: [],
|
|
||||||
loading: false,
|
|
||||||
advancedFormVisible: false,
|
|
||||||
filterData: {},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
},
|
|
||||||
tableData: mockData.list,
|
|
||||||
treeData: [],
|
|
||||||
expandedKeys: []
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.getMenuList();
|
|
||||||
this.buildTreeData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取菜单列表
|
|
||||||
getMenuList = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { pagination, filterData } = this.state;
|
|
||||||
this.setState({ loading: true });
|
|
||||||
dispatch({
|
|
||||||
type: 'systemMenu/fetchList',
|
|
||||||
payload: {
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
...filterData
|
|
||||||
},
|
|
||||||
callback: (res) => {
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
tableData: res?.list || [],
|
|
||||||
pagination: {
|
|
||||||
...pagination,
|
|
||||||
total: res?.total || 0
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.buildTreeData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 构建树数据
|
|
||||||
buildTreeData = () => {
|
|
||||||
const { tableData } = this.state;
|
|
||||||
const treeData = this.transformToTree(tableData);
|
|
||||||
this.setState({ treeData });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 转换为树结构
|
|
||||||
transformToTree = (data) => {
|
|
||||||
return data.map(item => {
|
|
||||||
const node = {
|
|
||||||
title: item.name,
|
|
||||||
key: item.id,
|
|
||||||
dataRef: item
|
|
||||||
};
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
node.children = this.transformToTree(item.children);
|
|
||||||
}
|
|
||||||
return node;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
handleSelectChange = (selectedRowKeys, selectedRows) => {
|
|
||||||
this.setState({ selectedRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
handleTableChange = (pagination) => {
|
|
||||||
this.setState({
|
|
||||||
pagination: {
|
|
||||||
...this.state.pagination,
|
|
||||||
current: pagination.current
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.getMenuList();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增菜单
|
|
||||||
handleAdd = () => {
|
|
||||||
// 新增逻辑
|
|
||||||
message.success('新增菜单功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑菜单
|
|
||||||
handleEdit = (record) => {
|
|
||||||
// 编辑逻辑
|
|
||||||
message.success('编辑菜单功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除菜单
|
|
||||||
handleDelete = (record) => {
|
|
||||||
confirm({
|
|
||||||
title: '确定要删除这个菜单吗?',
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 删除逻辑
|
|
||||||
message.success('删除菜单成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
handleBatchDelete = () => {
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
if (selectedRows.length === 0) {
|
|
||||||
message.warning('请选择要删除的菜单');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
confirm({
|
|
||||||
title: `确定要删除选中的${selectedRows.length}个菜单吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 批量删除逻辑
|
|
||||||
message.success('批量删除菜单成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 启用/禁用菜单
|
|
||||||
handleStatusChange = (record) => {
|
|
||||||
const newStatus = record.status === '1' ? '0' : '1';
|
|
||||||
confirm({
|
|
||||||
title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个菜单吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 状态变更逻辑
|
|
||||||
message.success(`${newStatus === '1' ? '启用' : '禁用'}菜单成功`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 展开/折叠树节点
|
|
||||||
handleExpand = (expandedKeys) => {
|
|
||||||
this.setState({ expandedKeys });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 点击树节点
|
|
||||||
handleTreeSelect = (selectedKeys, info) => {
|
|
||||||
// 树节点选择逻辑
|
|
||||||
console.log('Selected', selectedKeys, info);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedRows, loading, tableData, pagination, treeData, expandedKeys } = this.state;
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '菜单名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单编码',
|
|
||||||
dataIndex: 'code',
|
|
||||||
key: 'code',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
render: text => formatDictText(menu_type, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单级别',
|
|
||||||
dataIndex: 'level',
|
|
||||||
key: 'level',
|
|
||||||
render: text => formatDictText(menu_level, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '路径',
|
|
||||||
dataIndex: 'path',
|
|
||||||
key: 'path',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: text => (
|
|
||||||
<Tag color={text === '1' ? 'green' : 'red'}>
|
|
||||||
{text === '1' ? '启用' : '禁用'}
|
|
||||||
</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
dataIndex: 'createUser',
|
|
||||||
key: 'createUser',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 160,
|
|
||||||
render: (_, record) => (
|
|
||||||
<Space size="middle">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => this.handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => this.handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Switch
|
|
||||||
checked={record.status === '1'}
|
|
||||||
onChange={() => this.handleStatusChange(record)}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.contentWrapper}>
|
|
||||||
<Card className={style.contentCard}>
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.headerLeft}>
|
|
||||||
<h2 className={styles.title}>菜单配置</h2>
|
|
||||||
</div>
|
|
||||||
<div className={styles.headerRight}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={this.handleAdd}
|
|
||||||
>
|
|
||||||
新增菜单
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={this.handleBatchDelete}
|
|
||||||
disabled={selectedRows.length === 0}
|
|
||||||
>
|
|
||||||
批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<div className={styles.menuContent}>
|
|
||||||
<div className={styles.menuTreeSection}>
|
|
||||||
<h3 className={styles.sectionTitle}>菜单树</h3>
|
|
||||||
<div className={styles.menuTree}>
|
|
||||||
<Tree
|
|
||||||
treeData={treeData}
|
|
||||||
expandedKeys={expandedKeys}
|
|
||||||
onExpand={this.handleExpand}
|
|
||||||
onSelect={this.handleTreeSelect}
|
|
||||||
className={styles.tree}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<StandardTable
|
|
||||||
rowKey="id"
|
|
||||||
selectedRows={selectedRows}
|
|
||||||
loading={loading}
|
|
||||||
data={{
|
|
||||||
list: tableData,
|
|
||||||
pagination
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
onSelectRow={this.handleSelectChange}
|
|
||||||
onChange={this.handleTableChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerRight {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterSection {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterItem {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batchAction {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContainer {
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formHeader {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContent {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFooter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formButton {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuContent {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuTreeSection {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
margin: 0 0 12px 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuTree {
|
|
||||||
background-color: #fafafa;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree .ant-tree-node-selected {
|
|
||||||
background-color: #e6f7ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree .ant-tree-node-selected:hover {
|
|
||||||
background-color: #bae7ff;
|
|
||||||
}
|
|
||||||
@ -1,310 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
RedoOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
UpOutlined,
|
|
||||||
InfoCircleFilled,
|
|
||||||
QuestionCircleFilled,
|
|
||||||
DownloadOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import {connect, history} from '@umijs/max';
|
|
||||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
|
|
||||||
import { MyIcon } from "@/components/Icon"
|
|
||||||
import style from "@/global.less";
|
|
||||||
import styles from './SystemOrganizationList.less';
|
|
||||||
import datadictionary from "@/utils/dataDictionary";
|
|
||||||
import {formatDate} from "@/utils/formatUtils";
|
|
||||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
||||||
|
|
||||||
const { confirm } = Modal;
|
|
||||||
|
|
||||||
// 组织类型
|
|
||||||
const organization_type = datadictionary.organization_type || [];
|
|
||||||
const organization_status = datadictionary.organization_status || [];
|
|
||||||
|
|
||||||
const mockData = {
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '总部',
|
|
||||||
code: 'HQ',
|
|
||||||
type: '1',
|
|
||||||
parentId: '0',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-01 10:00:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '研发部',
|
|
||||||
code: 'R&D',
|
|
||||||
type: '2',
|
|
||||||
parentId: '1',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-02 14:30:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '市场部',
|
|
||||||
code: 'MKT',
|
|
||||||
type: '2',
|
|
||||||
parentId: '1',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-03 09:15:00',
|
|
||||||
createUser: 'admin'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
total: 3,
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ systemOrganization, loading }) => ({
|
|
||||||
systemOrganization,
|
|
||||||
loading: loading.models.systemOrganization
|
|
||||||
}))
|
|
||||||
export default class SystemOrganizationList extends React.Component {
|
|
||||||
state = {
|
|
||||||
selectedRows: [],
|
|
||||||
loading: false,
|
|
||||||
advancedFormVisible: false,
|
|
||||||
filterData: {},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
},
|
|
||||||
tableData: mockData.list
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.getOrganizationList();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取组织列表
|
|
||||||
getOrganizationList = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { pagination, filterData } = this.state;
|
|
||||||
this.setState({ loading: true });
|
|
||||||
dispatch({
|
|
||||||
type: 'systemOrganization/fetchList',
|
|
||||||
payload: {
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
...filterData
|
|
||||||
},
|
|
||||||
callback: (res) => {
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
tableData: res?.list || [],
|
|
||||||
pagination: {
|
|
||||||
...pagination,
|
|
||||||
total: res?.total || 0
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
handleSelectChange = (selectedRowKeys, selectedRows) => {
|
|
||||||
this.setState({ selectedRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
handleTableChange = (pagination) => {
|
|
||||||
this.setState({
|
|
||||||
pagination: {
|
|
||||||
...this.state.pagination,
|
|
||||||
current: pagination.current
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.getOrganizationList();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增组织
|
|
||||||
handleAdd = () => {
|
|
||||||
// 新增逻辑
|
|
||||||
message.success('新增组织功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑组织
|
|
||||||
handleEdit = (record) => {
|
|
||||||
// 编辑逻辑
|
|
||||||
message.success('编辑组织功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除组织
|
|
||||||
handleDelete = (record) => {
|
|
||||||
confirm({
|
|
||||||
title: '确定要删除这个组织吗?',
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 删除逻辑
|
|
||||||
message.success('删除组织成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
handleBatchDelete = () => {
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
if (selectedRows.length === 0) {
|
|
||||||
message.warning('请选择要删除的组织');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
confirm({
|
|
||||||
title: `确定要删除选中的${selectedRows.length}个组织吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 批量删除逻辑
|
|
||||||
message.success('批量删除组织成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 启用/禁用组织
|
|
||||||
handleStatusChange = (record) => {
|
|
||||||
const newStatus = record.status === '1' ? '0' : '1';
|
|
||||||
confirm({
|
|
||||||
title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个组织吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 状态变更逻辑
|
|
||||||
message.success(`${newStatus === '1' ? '启用' : '禁用'}组织成功`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedRows, loading, tableData, pagination } = this.state;
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '组织名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '组织编码',
|
|
||||||
dataIndex: 'code',
|
|
||||||
key: 'code',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '组织类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
render: text => formatDictText(organization_type, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: text => (
|
|
||||||
<Tag color={text === '1' ? 'green' : 'red'}>
|
|
||||||
{text === '1' ? '启用' : '禁用'}
|
|
||||||
</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
dataIndex: 'createUser',
|
|
||||||
key: 'createUser',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 160,
|
|
||||||
render: (_, record) => (
|
|
||||||
<Space size="middle">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => this.handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => this.handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Switch
|
|
||||||
checked={record.status === '1'}
|
|
||||||
onChange={() => this.handleStatusChange(record)}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.contentWrapper}>
|
|
||||||
<Card className={style.contentCard}>
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.headerLeft}>
|
|
||||||
<h2 className={styles.title}>组织管理</h2>
|
|
||||||
</div>
|
|
||||||
<div className={styles.headerRight}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={this.handleAdd}
|
|
||||||
>
|
|
||||||
新增组织
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={this.handleBatchDelete}
|
|
||||||
disabled={selectedRows.length === 0}
|
|
||||||
>
|
|
||||||
批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<StandardTable
|
|
||||||
rowKey="id"
|
|
||||||
selectedRows={selectedRows}
|
|
||||||
loading={loading}
|
|
||||||
data={{
|
|
||||||
list: tableData,
|
|
||||||
pagination
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
onSelectRow={this.handleSelectChange}
|
|
||||||
onChange={this.handleTableChange}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerRight {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterSection {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterItem {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batchAction {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContainer {
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formHeader {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContent {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFooter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formButton {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
RedoOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
UpOutlined,
|
|
||||||
InfoCircleFilled,
|
|
||||||
QuestionCircleFilled,
|
|
||||||
DownloadOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import {connect, history} from '@umijs/max';
|
|
||||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd';
|
|
||||||
import StandardTable from '@/components/StandardTable';
|
|
||||||
|
|
||||||
import { MyIcon } from "@/components/Icon"
|
|
||||||
import style from "@/global.less";
|
|
||||||
import styles from './SystemRoleList.less';
|
|
||||||
import datadictionary from "@/utils/dataDictionary";
|
|
||||||
import {formatDate} from "@/utils/formatUtils";
|
|
||||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
||||||
|
|
||||||
const { confirm } = Modal;
|
|
||||||
|
|
||||||
// 角色类型
|
|
||||||
const role_type = datadictionary.role_type || [];
|
|
||||||
const role_status = datadictionary.role_status || [];
|
|
||||||
|
|
||||||
const mockData = {
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '超级管理员',
|
|
||||||
code: 'SUPER_ADMIN',
|
|
||||||
type: '1',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-01 10:00:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
remark: '系统最高权限角色'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '部门管理员',
|
|
||||||
code: 'DEPT_ADMIN',
|
|
||||||
type: '2',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-02 14:30:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
remark: '部门级管理权限'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '普通用户',
|
|
||||||
code: 'NORMAL_USER',
|
|
||||||
type: '3',
|
|
||||||
status: '1',
|
|
||||||
createTime: '2023-01-03 09:15:00',
|
|
||||||
createUser: 'admin',
|
|
||||||
remark: '基础功能访问权限'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
total: 3,
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ systemRole, loading }) => ({
|
|
||||||
systemRole,
|
|
||||||
loading: loading.models.systemRole
|
|
||||||
}))
|
|
||||||
export default class SystemRoleList extends React.Component {
|
|
||||||
state = {
|
|
||||||
selectedRows: [],
|
|
||||||
loading: false,
|
|
||||||
advancedFormVisible: false,
|
|
||||||
filterData: {},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 10,
|
|
||||||
current: 1
|
|
||||||
},
|
|
||||||
tableData: mockData.list
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.getRoleList();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取角色列表
|
|
||||||
getRoleList = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { pagination, filterData } = this.state;
|
|
||||||
this.setState({ loading: true });
|
|
||||||
dispatch({
|
|
||||||
type: 'systemRole/fetchList',
|
|
||||||
payload: {
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
...filterData
|
|
||||||
},
|
|
||||||
callback: (res) => {
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
tableData: res?.list || [],
|
|
||||||
pagination: {
|
|
||||||
...pagination,
|
|
||||||
total: res?.total || 0
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格选择变化
|
|
||||||
handleSelectChange = (selectedRowKeys, selectedRows) => {
|
|
||||||
this.setState({ selectedRows });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
handleTableChange = (pagination) => {
|
|
||||||
this.setState({
|
|
||||||
pagination: {
|
|
||||||
...this.state.pagination,
|
|
||||||
current: pagination.current
|
|
||||||
}
|
|
||||||
}, () => {
|
|
||||||
this.getRoleList();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增角色
|
|
||||||
handleAdd = () => {
|
|
||||||
// 新增逻辑
|
|
||||||
message.success('新增角色功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑角色
|
|
||||||
handleEdit = (record) => {
|
|
||||||
// 编辑逻辑
|
|
||||||
message.success('编辑角色功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 角色授权
|
|
||||||
handleAuth = (record) => {
|
|
||||||
// 授权逻辑
|
|
||||||
message.success('角色授权功能');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除角色
|
|
||||||
handleDelete = (record) => {
|
|
||||||
confirm({
|
|
||||||
title: '确定要删除这个角色吗?',
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 删除逻辑
|
|
||||||
message.success('删除角色成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
handleBatchDelete = () => {
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
if (selectedRows.length === 0) {
|
|
||||||
message.warning('请选择要删除的角色');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
confirm({
|
|
||||||
title: `确定要删除选中的${selectedRows.length}个角色吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 批量删除逻辑
|
|
||||||
message.success('批量删除角色成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 启用/禁用角色
|
|
||||||
handleStatusChange = (record) => {
|
|
||||||
const newStatus = record.status === '1' ? '0' : '1';
|
|
||||||
confirm({
|
|
||||||
title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个角色吗?`,
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
onOk: () => {
|
|
||||||
// 状态变更逻辑
|
|
||||||
message.success(`${newStatus === '1' ? '启用' : '禁用'}角色成功`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { selectedRows, loading, tableData, pagination } = this.state;
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '角色名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '角色编码',
|
|
||||||
dataIndex: 'code',
|
|
||||||
key: 'code',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '角色类型',
|
|
||||||
dataIndex: 'type',
|
|
||||||
key: 'type',
|
|
||||||
render: text => formatDictText(role_type, text)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: text => (
|
|
||||||
<Tag color={text === '1' ? 'green' : 'red'}>
|
|
||||||
{text === '1' ? '启用' : '禁用'}
|
|
||||||
</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
dataIndex: 'createUser',
|
|
||||||
key: 'createUser',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '备注',
|
|
||||||
dataIndex: 'remark',
|
|
||||||
key: 'remark',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 200,
|
|
||||||
render: (_, record) => (
|
|
||||||
<Space size="middle">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => this.handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
onClick={() => this.handleAuth(record)}
|
|
||||||
>
|
|
||||||
授权
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => this.handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
<Switch
|
|
||||||
checked={record.status === '1'}
|
|
||||||
onChange={() => this.handleStatusChange(record)}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.contentWrapper}>
|
|
||||||
<Card className={style.contentCard}>
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.headerLeft}>
|
|
||||||
<h2 className={styles.title}>角色配置</h2>
|
|
||||||
</div>
|
|
||||||
<div className={styles.headerRight}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={this.handleAdd}
|
|
||||||
>
|
|
||||||
新增角色
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={this.handleBatchDelete}
|
|
||||||
disabled={selectedRows.length === 0}
|
|
||||||
>
|
|
||||||
批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<StandardTable
|
|
||||||
rowKey="id"
|
|
||||||
selectedRows={selectedRows}
|
|
||||||
loading={loading}
|
|
||||||
data={{
|
|
||||||
list: tableData,
|
|
||||||
pagination
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
onSelectRow={this.handleSelectChange}
|
|
||||||
onChange={this.handleTableChange}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerLeft {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerRight {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterSection {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterItem {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batchAction {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContainer {
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formHeader {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formContent {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFooter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formButton {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue