dq-fms/src/pages/business_basic/module/ResponsibilityImplementation.js

import React from 'react'; 
import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
import { PhoneOutlined, IdcardOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './ResponsibilityImplementation.less';

import upload from '@/assets/business_basic/upload.png';
import download from '@/assets/business_basic/download.png';
import import1 from '@/assets/business_basic/import1.png';
import fire_fighting1 from '@/assets/business_basic/fire_fighting1.png';
import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png';
import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png';
import frameIcon from '@/assets/business_basic/Frame.png';
import background1 from '@/assets/business_basic/background1.png';
import export1 from '@/assets/business_basic/export1.png';



const ResponsibilityImplementation = () => {  

    // 搜索处理函数
    const onSearch = (value) => {
        console.log('搜索内容:', value);
        // 这里可以添加实际的搜索逻辑
    };

    const columns = [
        {
            title:"编号",
            dataIndex:"id",
            key:"id",
            width:80,
        },
        {
            title:"组织代码",
            dataIndex:"orgCode",
            key:"orgCode",
            width:120,
        },
        {
            title:"组织类型",
            dataIndex:"orgType",
            key:"orgType",
            width:120,
        },
        {
            title:"负责人",
            dataIndex:"manager",
            key:"manager",
            width:100,
        },
        {
            title:"所属部门",
            dataIndex:"department",
            key:"department",
            width:120,
        },
        {
            title:"创建时间",
            dataIndex:"createTime",
            key:"createTime",
            width:120,
        },
        {
            title:"人员规模",
            dataIndex:"staffCount",
            key:"staffCount",
            width:100,
        },
        {
            title:"状态",
            dataIndex:"status",
            key:"status",
            width:80,
            render: (text, record) => {
                const getStatusStyle = (status) => {
                    if (status === '正常') {
                        return {
                            color: '#44BB5F',
                            backgroundColor: '#D8F7DE',
                            padding: '4px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                            display: 'inline-block'
                        };
                    } else if (status === '信息不全') {
                        return {
                            color: '#FF8800',
                            backgroundColor: '#FFF3E9',
                            padding: '4px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                            display: 'inline-block'
                        };
                    }
                    return {};
                };
                
                return (
                    <span style={getStatusStyle(text)}>
                        {text}
                    </span>
                );
            }
        },
        {
            title:"操作",
            dataIndex:"action",
            key:"action",
            width:120,
            render: (text, record) => {
                const handleEdit = (record) => {
                    console.log('编辑记录:', record);
                };
                
                const handleDelete = (record) => {
                    console.log('删除记录:', record);
                };
                
                return (
                    <div style={{ 
                        display: 'flex', 
                        gap: '8px', 
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <Button 
                            onClick={() => handleEdit(record)}
                            style={{
                                color: '#2E4CD4',
                                backgroundColor: 'transparent',
                                borderColor: '#E6E9FB',
                                fontSize: '12px',
                                height: '28px',
                                padding: '0 12px'
                            }}
                        >
                            编辑
                        </Button>
                        <Button 
                            onClick={() => handleDelete(record)}
                            style={{
                                color: '#FF2526',
                                backgroundColor: 'transparent',
                                borderColor: '#FFE0E2',
                                fontSize: '12px',
                                height: '28px',
                                padding: '0 12px'
                            }}
                        >
                            删除
                        </Button>
                    </div>
                );
            }
        }
    ];

    // 固定的假数据
    const tableData = [
        {
            key: '1',
            id: '01',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-19 14:32:15',
            staffCount: '15人',
            status: '正常'
        },
        {
            key: '2',
            id: '02',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-18 09:25:43',
            staffCount: '20人',
            status: '正常'
        },
        {
            key: '3',
            id: '03',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-17 16:48:22',
            staffCount: '25人',
            status: '信息不全'
        },
        {
            key: '4',
            id: '04',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-16 11:15:37',
            staffCount: '18人',
            status: '正常'
        },
        {
            key: '5',
            id: '05',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-15 08:42:56',
            staffCount: '22人',
            status: '正常'
        },
        {
            key: '6',
            id: '06',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-14 13:27:18',
            staffCount: '16人',
            status: '信息不全'
        },
        {
            key: '7',
            id: '07',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-13 15:33:29',
            staffCount: '19人',
            status: '正常'
        },
        {
            key: '8',
            id: '08',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-12 10:56:44',
            staffCount: '21人',
            status: '正常'
        },
        {
            key: '9',
            id: '09',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-11 17:19:52',
            staffCount: '17人',
            status: '信息不全'
        },
        {
            key: '10',
            id: '10',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-10 12:41:07',
            staffCount: '23人',
            status: '正常'
        },
        {
            key: '11',
            id: '11',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-09 14:08:33',
            staffCount: '24人',
            status: '正常'
        },
        {
            key: '12',
            id: '12',
            orgCode: 'DH002',
            orgType: '义务消防队',
            manager: '张明',
            department: '安全管理部',
            createTime: '2024-12-08 16:52:14',
            staffCount: '26人',
            status: '信息不全'
        }
    ];

    return ( 
        <div  className={styles.XcontainerR}> 
           {/* 警告提示框 */}
            <div className={styles.warningBox}>
                <img src={frameIcon} alt="警告" className={styles.warningIcon} />
                <span className={styles.warningText}>
                    有5个消防设备需要维护，3个资质证书即将到期，请及时处理。
                </span>
            </div>

            <div className={styles.containerOne}> 

                <div className={styles.containerOneLeft}>
                    {/* 第一行：标题和按钮 */}
                    <div className={styles.leftTopSection}>
                        <div className={styles.titleLeft}>
                            <div className={styles.titleIcon}></div>
                            <div>组织架构图预览</div>
                        </div>
                        <div className={styles.buttonGroup}>
                            <Button className={styles.actionBtn}>
                             <img src={upload} alt="上传图表" className={styles.btnIcon} />
                                上传图表
                            </Button>
                            <Button className={styles.actionBtn}>
                                <img src={download} alt="下载" className={styles.btnIcon} />
                                下载
                            </Button>
                        </div>
                    </div>
                    
                    {/* 第二行：图片占位 */}
                    <div className={styles.leftBottomSection}>
                        <div className={styles.imagePlaceholder}>
                            <img src={fire_fighting1} alt="消防1" className={styles.imageIcon1} />
                            <div className={styles.imageRow}>
                                <img src={fire_fighting2} alt="消防2" className={styles.imageIcon2} />
                                <img src={fire_fighting3} alt="消防3" className={styles.imageIcon3} />
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div className={styles.containerOneRight}>
                    {/* 第一行：标题 + 搜索栏 + 下拉选择框 */}
                    <div className={styles.rightTopSection}>
                        <div className={styles.rightTopLeft}>
                            <div className={styles.titleLeft}>
                                <div className={styles.titleIcon}></div>
                                <div>成员信息管理</div>
                            </div>
                        </div>
                        <div className={styles.rightTopRight}>
                            <div className={styles.searchGroup}>
                                
                            <Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 200}} />
                                <Select
                                    defaultValue="全部组织"
                                    className={styles.organizationSelect}
                                    options={[
                                        { value: '全部组织', label: '全部组织' },
                                        { value: '技术部', label: '技术部' },
                                        { value: '生产部', label: '生产部' },
                                        { value: '安全部', label: '安全部' },
                                    ]}
                                />
                            </div>
                        </div>
                    </div>
                    
                    {/* 第二行：三个小块 */}
                    <div className={styles.rightBottomSection}>
                        <div className={styles.threeBlocksContainer}>
                            <div className={styles.blockItem}>
                                <div className={styles.blockContent}>
                                    <div className={styles.backgroundContainer}>
                                        {/* 第一个块：姓名和单位 */}
                                        <div className={styles.infoBlock}>
                                            <div className={styles.nameText}>张明</div>
                                            <div className={styles.unitText}>东义区消防队</div>
                                        </div>
                                        
                                        {/* 第二个块：电话 */}
                                        <div className={styles.infoBlock}>
                                            <PhoneOutlined className={styles.infoIcon} />
                                            <span className={styles.infoText}>132****3847</span>
                                        </div>
                                        
                                        {/* 第三个块：身份证 */}
                                        <div className={styles.infoBlock}>
                                            <IdcardOutlined className={styles.infoIcon} />
                                            <span className={styles.infoText}>1304************10</span>
                                        </div>
                                        
                                        {/* 第四个块：职位标签 */}
                                        <div className={styles.infoBlock}>
                                            <div className={styles.tagContainer}>
                                                <div className={styles.tagBlue1}>队长</div>
                                                <div className={styles.tagBlue2}>消防工程师</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第五个块：证书状态 */}
                                        <div className={styles.infoBlock}>
                                            <div className={styles.tagContainer}>
                                                <div className={styles.tagBlue3}>消防工程师</div>
                                                <div className={styles.tagYellow}>证书7天后到期</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第六个块：操作按钮 */}
                                        <div className={styles.actionBlock}>
                                            <div className={styles.buttonContainer}>
                                                <Button className={styles.editBtn}>编辑</Button>
                                                <Button className={styles.deleteBtn}>删除</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.blockItem}>
                                <div className={styles.blockContent}>
                                    <div className={styles.backgroundContainer2}>
                                        {/* 第一个块：姓名和单位 */}
                                        <div className={styles.infoBlock2}>
                                            <span className={styles.nameText2}>李小明</span>
                                            <span className={styles.unitText2}>消防支队</span>
                                        </div>
                                        
                                        {/* 第二个块：电话 */}
                                        <div className={styles.infoBlock2}>
                                            <PhoneOutlined className={styles.infoIcon2} />
                                            <span className={styles.infoText2}>138****5678</span>
                                        </div>
                                        
                                        {/* 第三个块：身份证 */}
                                        <div className={styles.infoBlock2}>
                                            <IdcardOutlined className={styles.infoIcon2} />
                                            <span className={styles.infoText2}>1304************20</span>
                                        </div>
                                        
                                        {/* 第四个块：职位标签 */}
                                        <div className={styles.infoBlock2}>
                                            <div className={styles.tagContainer2}>
                                                <div className={styles.tagBlue4}>副队长</div>
                                                <div className={styles.tagBlue5}>安全员</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第五个块：证书状态 */}
                                        <div className={styles.infoBlock2}>
                                            <div className={styles.tagContainer2}>
                                                <div className={styles.tagBlue6}>安全员证</div>
                                                <div className={styles.tagGreen}>证书正常</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第六个块：操作按钮 */}
                                        <div className={styles.actionBlock2}>
                                            <div className={styles.buttonContainer2}>
                                                <Button className={styles.editBtn2}>编辑</Button>
                                                <Button className={styles.deleteBtn2}>删除</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.blockItem}>
                                <div className={styles.blockContent}>
                                    <div className={styles.backgroundContainer3}>
                                        {/* 第一个块：姓名和单位 */}
                                        <div className={styles.infoBlock3}>
                                            <span className={styles.nameText3}>王小红</span>
                                            <span className={styles.unitText3}>消防中队</span>
                                        </div>
                                        
                                        {/* 第二个块：电话 */}
                                        <div className={styles.infoBlock3}>
                                            <PhoneOutlined className={styles.infoIcon3} />
                                            <span className={styles.infoText3}>139****9012</span>
                                        </div>
                                        
                                        {/* 第三个块：身份证 */}    
                                        <div className={styles.infoBlock3}>
                                            <IdcardOutlined className={styles.infoIcon3} />
                                            <span className={styles.infoText3}>1304************30</span>
                                        </div>
                                        
                                        {/* 第四个块：职位标签 */}
                                        <div className={styles.infoBlock3}>
                                            <div className={styles.tagContainer3}>
                                                <div className={styles.tagBlue7}>队员</div>
                                                <div className={styles.tagBlue8}>技术员</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第五个块：证书状态 */}
                                        <div className={styles.infoBlock3}>
                                            <div className={styles.tagContainer3}>
                                                <div className={styles.tagBlue9}>技术员证</div>
                                                <div className={styles.tagOrange}>证书3天后到期</div>
                                            </div>
                                        </div>
                                        
                                        {/* 第六个块：操作按钮 */}
                                        <div className={styles.actionBlock3}>
                                            <div className={styles.buttonContainer3}>
                                                <Button className={styles.editBtn3}>编辑</Button>
                                                <Button className={styles.deleteBtn3}>删除</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  

            <div className={styles.containerTwo}>
                {/* 第一个大块：标题 */}
                <div className={styles.containerTwoTitle}>
                    <div className={styles.titleLeft}>
                        <div className={styles.titleIcon}></div>
                        <div>组织架构管理</div>
                    </div>
                </div>
                
                {/* 第二个大块：搜索和按钮 */}
                <div className={styles.containerTwoActions}>
                    <div className={styles.searchSection}>
                     <Input.Search placeholder="搜索姓名、工号..." onSearch={onSearch} style={{ width: 180 }} />
                    </div>
                    <div className={styles.buttonSection}>
                        <Button className={styles.addBtn}>
                            <PlusOutlined className={styles.addIcon} />
                            新增组织
                        </Button>
                        <Button className={styles.importBtn}>
                            <img src={import1} alt="批量导入" className={styles.importIcon} />
                            批量导入
                        </Button>
                        <Button className={styles.exportBtn}>
                            <img src={export1} alt="批量导出" className={styles.exportIcon} />
                            批量导出
                        </Button>
                    </div>
                </div>
                
                {/* 第三个大块：表格 */}
                <div className={styles.containerTwoTable}>
                    <StandardTable
                        columns={columns}  
                        data={{  
                            list: tableData,  // ======== 表格数据列表 ========
                            pagination: {  // ======== 分页配置 ========
                                currentPage: 1,  // ======== 当前页码 ========
                                pageSize: 5,  // ======== 每页显示10条数据 ========
                                total: tableData.length,  // ======== 总数据条数 ========
                            }  // ======== 分页配置结束 ========
                        }}  // ======== 数据对象结束 ========
                        selectedRows={[]}  // ======== 选中的行数据，初始为空数组 ========
                        onSelectRow={() => {}}  // ======== 行选择事件处理函数 ========
                        onChange={() => {}}  // ======== 表格变化事件处理函数 ========
                        pagination={{
                            currentPage: 1,
                            pageSize: 5,
                            total: tableData.length,
                            showSizeChanger: false,
                            showQuickJumper: true,
                            showTotal: (total, range) => 
                                `共 ${total} 条`,
                            locale: {
                                jump_to: '前往',
                                page: '页',
                                items_per_page: '条/页',
                            }
                        }}
                    /> 
                </div>
            </div>
        </div> 
    );  
}; 
export default ResponsibilityImplementation;