gzdyh/front.git

import React, { useEffect, useState } from 'react';
import KeyVisits from './KeyVisits';
import { majorStatus_1 } from '@/assets/images';
import { Scrollbars } from 'react-custom-scrollbars';
import PreviewImage from '../PreviewImage';
import MyPDF from '../MyPDF';
import { checkIdCard } from '../../utils/utility';
import { Tooltip } from '@arco-design/web-react';
import * as $$ from '@/utils/utility';
const appUrl = $$.appUrl;
 
// 重点人员信息
function getLabelInfoApi(data) {
    return $$.ax.request({ url: `special/getLabelInfo`, type: 'post', serviceType: 'thrid', service: 'sys', data });
}
 
// 个人案件统计
function countPersonApi(data) {
    return $$.ax.request({ url: `caseInfo/countPerson`, type: 'get', service: 'mediate', data });
}
// 个人案件查询
function pagePersonApi(data) {
    return $$.ax.request({ url: `/caseInfo/pagePerson`, type: 'get', service: 'mediate', data });
}
 
export default function DetailDialog(props) {
    const nuturalList = [
        [
            {
                label: '姓名',
                perClass: '',
                value: '',
                isName: true, //判断是否是姓名标签
                field: 'trueName',
            },
            {
                label: '联系方式',
                value: '',
                field: 'mobile',
            },
        ],
        [
            {
                label: '证件类型',
                value: '',
                field: 'certiTypeName',
            },
            {
                label: '证件号码',
                value: '',
                field: 'certiNo',
            },
        ],
        [
            {
                label: '联系地址',
                value: '',
                field: 'addr',
            },
            {
                label: '户籍地址',
                value: '',
                field: 'placeAddr',
            },
        ],
        [
            {
                label: '工作单位',
                value: '',
                field: 'workUnit',
            },
            {
                label: '民族',
                value: '',
                field: 'nationName',
            },
        ],
        [
            {
                label: '性别',
                value: '',
                field: 'sexName',
            },
            {
                label: '年龄',
                value: '',
                field: 'age',
            },
        ],
        [
            {
                label: '身份证明材料',
                value: '',
                isFile: true,
                field: 'file',
            },
            {
                label: '是否有个人极端倾向',
                value: '',
                field: 'extreme',
            },
        ],
    ];
    const legalList = [
        [
            {
                label: '企业名称',
                perClass: '',
                value: '',
                isName: true, //判断是否是姓名标签
                field: 'trueName',
            },
            {
                label: '联系方式',
                value: '',
                field: 'mobile',
            },
        ],
        [
            {
                label: '企业所在地',
                value: '',
                field: 'addr',
            },
            {
                label: '统一社会信用代码',
                value: '',
                field: 'orgaCode',
            },
        ],
        [
            {
                label: '法定代表人',
                value: '',
                field: 'deputy',
            },
            {
                label: '企业类型',
                value: '',
                field: 'orgaTypeName',
            },
        ],
        [
            {
                label: '住所',
                value: '',
                field: 'placeAddr',
                isRow: true,
            },
        ],
        [
            {
                label: '登记企业材料',
                value: '',
                isFile: true,
                field: 'file',
            },
            {
                label: '法定代表人身份证明材料',
                value: '',
                isFile: true,
                field: 'file1',
            },
        ],
    ];
    const organizationList = [
        [
            {
                label: '机构名称',
                perClass: '',
                value: '',
                isName: true, //判断是否是姓名标签
                field: 'trueName',
            },
            {
                label: '联系方式',
                value: '',
                field: 'mobile',
            },
        ],
        [
            {
                label: '机构所在地',
                value: '',
                field: 'addr',
            },
            {
                label: '机构组织代码',
                value: '',
                field: 'orgaCode',
            },
        ],
        [
            {
                label: '机构代表人',
                value: '',
                field: 'deputy',
            },
            {
                label: '机构类型',
                value: '',
                field: 'orgaTypeName',
            },
        ],
        [
            {
                label: '住所',
                value: '',
                field: 'placeAddr',
                isRow: true,
            },
        ],
        [
            {
                label: '机构登记材料',
                value: '',
                isFile: true,
                field: 'file',
            },
            {
                label: '机构代表人身份证明材料',
                value: '',
                isFile: true,
                field: 'file1',
            },
        ],
    ];
    const agentList = [
        [
            {
                label: '姓名',
                perClass: '',
                value: '',
                isName: true, //判断是否是姓名标签
                field: 'trueName',
            },
            {
                label: '联系方式',
                value: '',
                field: 'mobile',
            },
        ],
        [
            {
                label: '证件类型',
                value: '',
                field: 'certiTypeName',
            },
            {
                label: '证件号码',
                value: '',
                field: 'certiNo',
            },
        ],
        [
            {
                label: '联系地址',
                value: '',
                field: 'addr',
            },
            {
                label: '户籍地址',
                value: '',
                field: 'placeAddr',
            },
        ],
        [
            {
                label: '工作单位',
                value: '',
                field: 'workUnit',
            },
            {
                label: '民族',
                value: '',
                field: 'nationName',
            },
        ],
        [
            {
                label: '性别',
                value: '',
                field: 'sexName',
            },
            {
                label: '是否有个人极端倾向',
                value: '',
                field: 'extreme',
            },
        ],
        [
            {
                label: '委托关系',
                value: '',
                field: 'agentRelateName',
            },
            {
                label: '委托类型',
                value: '',
                field: 'agentTypeName',
            },
        ],
        [
            {
                label: '代理对象',
                value: '',
                field: 'personId',
                isRow: true,
            },
        ],
        [
            {
                label: '身份证明材料',
                value: '',
                isFile: true,
                field: 'file',
            },
            {
                label: '代理人授权委托书',
                value: '',
                isFile: true,
                field: 'file1',
            },
        ],
    ];
    const [tableList, setTableList] = useState([]);
    const [certiNo, setCertiNo] = useState('');
    const [certiShow, setCertiShow] = useState(false);
    // 反应诉求记录
    const [hisData, setHisData] = useState({});
    const [labelInfo, setLabelInfo] = useState([]);
    const [fakeData, setFakeData] = useState({ tableData: [] });
    const [search, setSearch] = useState({ page: 1, size: 5 });
 
    function getAllApi(num) {
        countPerson(num);
        pagePerson({ ...search, certiNo: num });
    }
 
    // 根据个人身份证号查询重点人员信息
    async function getLabelInfo(idCard) {
        const res = await getLabelInfoApi({ idNumber: idCard });
        if (res.type) {
            let data = res.data || {};
            console.log('res.data', res.data);
            setLabelInfo(data?.labelList);
        }
    }
 
    // 个人案件统计
    async function countPerson(idCard) {
        const res = await countPersonApi({ certiNo: idCard });
        if (res.type) {
            setHisData(res.data || {});
        }
    }
 
    // 个人案件查询
    async function pagePerson(submitData) {
        global.setSpinning(true);
        const res = await pagePersonApi(submitData);
        global.setSpinning(false);
        if (res.type) {
            setSearch(submitData);
            setFakeData({
                total: res?.data?.totalElements || 0,
                tableData: res?.data?.content || [],
            });
        }
    }
 
    // 页码修改
    function handleChangePage(page, pageSize, field, order) {
        let paramsObj = Object.assign(search, { page, size: pageSize });
        paramsObj = { ...paramsObj };
        setSearch(paramsObj);
 
        pagePerson(paramsObj);
    }
 
    useEffect(() => {
        if (checkIdCard(props.editData?.certiNo)) {
            setCertiShow(true);
            setCertiNo(props.editData?.certiNo);
            getAllApi(props.editData?.certiNo);
        }
        const data = props.editData;
        let newList;
        let mapList = [];
        if (data.perClass === '09_01001-1') {
            //自然人
            mapList = nuturalList;
        }
        if (data.perClass === '09_01001-2') {
            //法人组织
            mapList = legalList;
        }
        if (data.perClass === '09_01001-3') {
            //非法人组织
            mapList = organizationList;
        }
        if (data.perType === '24_00006-1' || data.perType === '24_00006-2') {
            //代理人
            mapList = agentList;
        }
        newList = mapList.map((item) => {
            return item.map((res) => {
                if (res.isFile) {
                    return {
                        ...res,
                        value: (
                            <>
                                {data[res.field]?.map((item, index) => {
                                    if (item.response) {
                                        //新上传的，前端数据
                                        const newData = item.response.data[0];
                                        return (
                                            <div style={{ display: 'inline-block' }}>
                                                <MyPDF key={index} name={newData.name} fileUrl={newData.showUrl} fileType={newData.suffix} />
                                                {index !== data[res.field].length - 1 && <>，</>}
                                            </div>
                                        );
                                    } else {
                                        return (
                                            <div style={{ display: 'inline-block' }}>
                                                <MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
                                                {index !== data[res.field].length - 1 && <>，</>}
                                            </div>
                                        );
                                    }
                                })}
                            </>
                        ),
                    };
                }
                if (res.isName) {
                    return {
                        ...res,
                        value: data[res.field],
                        perClass: data.perClassName || data.perTypeName,
                    };
                } else {
                    if (res.field === 'personId') {
                        const filterValue = props.personData
                            .filter((result) => data[res.field].indexOf(result.id) != -1)
                            .map((result) => result.trueName)
                            .join(',');
                        return {
                            ...res,
                            value: filterValue,
                        };
                    } else if (res.field === 'extreme') {
                        return {
                            ...res,
                            label: (
                                <div
                                    style={{
                                        padding: '8px',
                                        display: 'flex',
                                        gap: '8px',
                                        alignItems: 'center',
                                        color: data[res.field] === 1 ? '#F53F3F' : 'inherit',
                                    }}
                                    className="title-text-red"
                                >
                                    {data[res.field] === 1 && <img src={majorStatus_1} alt="" srcset="" />}
                                    <Tooltip content="是否有个人极端倾向">{$$.ellipsis('是否有个人极端倾向', 6)}</Tooltip>
                                </div>
                            ),
                            value: data[res.field] === 1 ? '是' : data[res.field] === 0 ? '否' : '-',
                        };
                    } else {
                        return {
                            ...res,
                            value: data[res.field],
                        };
                    }
                }
            });
        });
 
        setTableList(newList);
    }, []);
 
    return (
        <Scrollbars
            autoHide
            autoHeight
            autoHeightMin={200} // 最小高度为300px
            autoHeightMax={590}
        >
            <table border="1" align="center" cellpadding="8" className="table" style={{ marginBottom: '20px' }}>
                {tableList?.map((item, index) => {
                    return (
                        <tr key={'tableList' + index}>
                            {item?.map((res) => {
                                return (
                                    <>
                                        <th bgcolor="#F7F8FA" className="table-title" width={150}>
                                            {res.label}
                                        </th>
                                        <td width={320} colspan={res.isRow ? '3' : '1'}>
                                            <div style={{ display: 'flex', minHeight: '22px' }}>
                                                <div>{res.value}</div>
                                                {res.isName && <div className="title-personRemark1">{res.perClass}</div>}
                                            </div>
                                        </td>
                                    </>
                                );
                            })}
                        </tr>
                    );
                })}
            </table>
            {/* 重复来访重点人员 */}
            {certiShow && (
                <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
                    <KeyVisits labelInfo={labelInfo} data={hisData} fakeData={fakeData} search={search} handleChangePage={handleChangePage} />
                </div>
            )}
        </Scrollbars>
    );
}