新增表格字段选择显示功能
This commit is contained in:
parent
5570dcf734
commit
974adb642f
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import { Table, Input, Spin } from 'antd';
|
import { Table, Input, Spin, Dropdown, Checkbox, Button, Space } from 'antd';
|
||||||
import { SearchOutlined } from '@ant-design/icons';
|
import { SearchOutlined, SettingOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
const DataView = ({
|
const DataView = ({
|
||||||
projects,
|
projects,
|
||||||
|
|
@ -18,6 +18,288 @@ const DataView = ({
|
||||||
// 当前显示的数据
|
// 当前显示的数据
|
||||||
const displayedData = projects.slice(0, displayCount);
|
const displayedData = projects.slice(0, displayCount);
|
||||||
|
|
||||||
|
// 所有可能的列定义
|
||||||
|
const allColumns = [
|
||||||
|
{
|
||||||
|
title: '单位',
|
||||||
|
dataIndex: 'unit',
|
||||||
|
key: 'unit',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目编号',
|
||||||
|
dataIndex: 'project_number',
|
||||||
|
key: 'project_number',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '安全编码',
|
||||||
|
dataIndex: 'safety_code',
|
||||||
|
key: 'safety_code',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '大项工程名称',
|
||||||
|
dataIndex: 'major_project_name',
|
||||||
|
key: 'major_project_name',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '单项工程名称',
|
||||||
|
dataIndex: 'sub_project_name',
|
||||||
|
key: 'sub_project_name',
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '在施工程作业范围',
|
||||||
|
dataIndex: 'construction_scope',
|
||||||
|
key: 'construction_scope',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工程规模',
|
||||||
|
dataIndex: 'project_scale',
|
||||||
|
key: 'project_scale',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '安全总监',
|
||||||
|
dataIndex: 'safety_director',
|
||||||
|
key: 'safety_director',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '建设单位',
|
||||||
|
dataIndex: 'construction_unit',
|
||||||
|
key: 'construction_unit',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '监理单位',
|
||||||
|
dataIndex: 'supervision_unit',
|
||||||
|
key: 'supervision_unit',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '施工单位',
|
||||||
|
dataIndex: 'construction_company',
|
||||||
|
key: 'construction_company',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工程位置',
|
||||||
|
dataIndex: 'project_location',
|
||||||
|
key: 'project_location',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '实际开工时间',
|
||||||
|
dataIndex: 'actual_start_time',
|
||||||
|
key: 'actual_start_time',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '计划竣工时间',
|
||||||
|
dataIndex: 'planned_completion_time',
|
||||||
|
key: 'planned_completion_time',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '完成时间',
|
||||||
|
dataIndex: 'completion_time',
|
||||||
|
key: 'completion_time',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '下次梳理时间',
|
||||||
|
dataIndex: 'next_review_time',
|
||||||
|
key: 'next_review_time',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '参建人数',
|
||||||
|
dataIndex: 'participants_count',
|
||||||
|
key: 'participants_count',
|
||||||
|
width: 100,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新班组进场数量',
|
||||||
|
dataIndex: 'new_team_count',
|
||||||
|
key: 'new_team_count',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新人进场数量',
|
||||||
|
dataIndex: 'new_person_count',
|
||||||
|
key: 'new_person_count',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '带班人信息',
|
||||||
|
dataIndex: 'leader_info',
|
||||||
|
key: 'leader_info',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '下周作业计划',
|
||||||
|
dataIndex: 'next_week_plan',
|
||||||
|
key: 'next_week_plan',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (text) => {
|
||||||
|
if (text && text.length > 15) {
|
||||||
|
return <span title={text}>{text.substring(0, 15)}...</span>;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '下周8+2工况内容',
|
||||||
|
dataIndex: 'next_week_condition',
|
||||||
|
key: 'next_week_condition',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (text) => {
|
||||||
|
if (text && text.length > 15) {
|
||||||
|
return <span title={text}>{text.substring(0, 15)}...</span>;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当前工程进度',
|
||||||
|
dataIndex: 'current_progress',
|
||||||
|
key: 'current_progress',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (text) => {
|
||||||
|
// 如果进度文本过长，只显示前15个字符加省略号
|
||||||
|
if (text && text.length > 15) {
|
||||||
|
return <span title={text}>{text.substring(0, 15)}...</span>;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当前工程状态',
|
||||||
|
dataIndex: 'current_status',
|
||||||
|
key: 'current_status',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工期是否紧张',
|
||||||
|
dataIndex: 'is_schedule_tight',
|
||||||
|
key: 'is_schedule_tight',
|
||||||
|
width: 120,
|
||||||
|
render: (value) => (value ? '是' : '否'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否存在"账外事"',
|
||||||
|
dataIndex: 'has_off_book_matters',
|
||||||
|
key: 'has_off_book_matters',
|
||||||
|
width: 150,
|
||||||
|
render: (value) => (value ? '是' : '否'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当前风险等级',
|
||||||
|
dataIndex: 'current_risk_level',
|
||||||
|
key: 'current_risk_level',
|
||||||
|
width: 120,
|
||||||
|
render: (text) => {
|
||||||
|
let color = '';
|
||||||
|
if (text === '高风险') {
|
||||||
|
color = 'red';
|
||||||
|
} else if (text === '中风险') {
|
||||||
|
color = 'orange';
|
||||||
|
} else if (text === '低风险') {
|
||||||
|
color = 'green';
|
||||||
|
}
|
||||||
|
|
||||||
|
return <span style={{ color }}>{text}</span>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '风险判断理由',
|
||||||
|
dataIndex: 'risk_judgment_reason',
|
||||||
|
key: 'risk_judgment_reason',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (text) => {
|
||||||
|
if (text && text.length > 15) {
|
||||||
|
return <span title={text}>{text.substring(0, 15)}...</span>;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '隐患提示/工作要求',
|
||||||
|
dataIndex: 'risk_tips',
|
||||||
|
key: 'risk_tips',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (text) => {
|
||||||
|
if (text && text.length > 15) {
|
||||||
|
return <span title={text}>{text.substring(0, 15)}...</span>;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
dataIndex: 'remarks',
|
||||||
|
key: 'remarks',
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (text) => {
|
||||||
|
if (text && text.length > 15) {
|
||||||
|
return <span title={text}>{text.substring(0, 15)}...</span>;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 默认显示的列（保持原来的8个列）
|
||||||
|
const defaultVisibleColumns = [
|
||||||
|
'unit',
|
||||||
|
'sub_project_name',
|
||||||
|
'construction_unit',
|
||||||
|
'current_progress',
|
||||||
|
'current_status',
|
||||||
|
'current_risk_level',
|
||||||
|
'is_schedule_tight',
|
||||||
|
'has_off_book_matters'
|
||||||
|
];
|
||||||
|
|
||||||
|
// 用于跟踪当前选择显示的列
|
||||||
|
const [visibleColumnKeys, setVisibleColumnKeys] = useState(defaultVisibleColumns);
|
||||||
|
|
||||||
|
// 当前显示的列
|
||||||
|
const visibleColumns = allColumns.filter(col =>
|
||||||
|
visibleColumnKeys.includes(col.key)
|
||||||
|
);
|
||||||
|
|
||||||
// 监听滚动事件
|
// 监听滚动事件
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = (e) => {
|
const handleScroll = (e) => {
|
||||||
|
|
@ -49,83 +331,37 @@ const DataView = ({
|
||||||
setDisplayCount(50);
|
setDisplayCount(50);
|
||||||
}, [projects]);
|
}, [projects]);
|
||||||
|
|
||||||
// 表格列定义
|
// 处理列选择变化
|
||||||
const columns = [
|
const handleColumnChange = (checkedValues) => {
|
||||||
{
|
setVisibleColumnKeys(checkedValues);
|
||||||
title: '单位',
|
};
|
||||||
dataIndex: 'unit',
|
|
||||||
key: 'unit',
|
|
||||||
width: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '单项工程名称',
|
|
||||||
dataIndex: 'sub_project_name',
|
|
||||||
key: 'sub_project_name',
|
|
||||||
width: 200,
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '建设单位',
|
|
||||||
dataIndex: 'construction_unit',
|
|
||||||
key: 'construction_unit',
|
|
||||||
width: 150,
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '当前工程进度',
|
|
||||||
dataIndex: 'current_progress',
|
|
||||||
key: 'current_progress',
|
|
||||||
width: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
render: (text) => {
|
|
||||||
// 如果进度文本过长，只显示前15个字符加省略号
|
|
||||||
if (text && text.length > 15) {
|
|
||||||
return <span title={text}>{text.substring(0, 15)}...</span>;
|
|
||||||
}
|
|
||||||
return text;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '当前工程状态',
|
|
||||||
dataIndex: 'current_status',
|
|
||||||
key: 'current_status',
|
|
||||||
width: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '当前风险等级',
|
|
||||||
dataIndex: 'current_risk_level',
|
|
||||||
key: 'current_risk_level',
|
|
||||||
width: 120,
|
|
||||||
render: (text) => {
|
|
||||||
let color = '';
|
|
||||||
if (text === '高风险') {
|
|
||||||
color = 'red';
|
|
||||||
} else if (text === '中风险') {
|
|
||||||
color = 'orange';
|
|
||||||
} else if (text === '低风险') {
|
|
||||||
color = 'green';
|
|
||||||
}
|
|
||||||
|
|
||||||
return <span style={{ color }}>{text}</span>;
|
// 列选择下拉菜单内容
|
||||||
},
|
const columnSelectionMenu = (
|
||||||
},
|
<div style={{
|
||||||
{
|
padding: '8px',
|
||||||
title: '工期是否紧张',
|
backgroundColor: '#1f1f1f',
|
||||||
dataIndex: 'is_schedule_tight',
|
border: '1px solid #303030',
|
||||||
key: 'is_schedule_tight',
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
||||||
width: 120,
|
color: '#ffffff'
|
||||||
render: (value) => (value ? '是' : '否'),
|
}}>
|
||||||
},
|
<Checkbox.Group
|
||||||
{
|
value={visibleColumnKeys}
|
||||||
title: '是否存在"账外事"',
|
onChange={handleColumnChange}
|
||||||
dataIndex: 'has_off_book_matters',
|
style={{ display: 'flex', flexDirection: 'column' }}
|
||||||
key: 'has_off_book_matters',
|
>
|
||||||
width: 150,
|
{allColumns.map(column => (
|
||||||
render: (value) => (value ? '是' : '否'),
|
<Checkbox
|
||||||
},
|
key={column.key}
|
||||||
];
|
value={column.key}
|
||||||
|
style={{ margin: '4px 0', color: '#ffffff' }}
|
||||||
|
>
|
||||||
|
<span style={{ color: '#ffffff' }}>{column.title}</span>
|
||||||
|
</Checkbox>
|
||||||
|
))}
|
||||||
|
</Checkbox.Group>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
// 处理搜索输入变化
|
// 处理搜索输入变化
|
||||||
const handleSearchChange = (e) => {
|
const handleSearchChange = (e) => {
|
||||||
|
|
@ -134,15 +370,32 @@ const DataView = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="data-view">
|
<div className="data-view">
|
||||||
{/* 搜索框 */}
|
{/* 搜索框和列选择 */}
|
||||||
<div style={{ padding: '10px', borderBottom: '1px solid var(--vscode-border)' }}>
|
<div style={{
|
||||||
|
padding: '10px',
|
||||||
|
borderBottom: '1px solid var(--vscode-border)',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
<Input
|
<Input
|
||||||
placeholder="搜索单项工程名称"
|
placeholder="搜索单项工程名称"
|
||||||
prefix={<SearchOutlined />}
|
prefix={<SearchOutlined />}
|
||||||
value={searchText}
|
value={searchText}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
style={{ width: '100%' }}
|
style={{ width: 'calc(100% - 50px)' }}
|
||||||
/>
|
/>
|
||||||
|
<Dropdown
|
||||||
|
overlay={columnSelectionMenu}
|
||||||
|
trigger={['click']}
|
||||||
|
placement="bottomRight"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<SettingOutlined />}
|
||||||
|
title="选择显示字段"
|
||||||
|
/>
|
||||||
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 数据表格 */}
|
{/* 数据表格 */}
|
||||||
|
|
@ -153,7 +406,7 @@ const DataView = ({
|
||||||
) : (
|
) : (
|
||||||
<div ref={tableContainerRef}>
|
<div ref={tableContainerRef}>
|
||||||
<Table
|
<Table
|
||||||
columns={columns}
|
columns={visibleColumns}
|
||||||
dataSource={displayedData}
|
dataSource={displayedData}
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
rowSelection={{
|
rowSelection={{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue