fix:市平台项目更新

xusd

7 days ago 544148eddae96db824423cd059ebecb9d13c392e

 src/components/personCard/DetailDialog.jsx

@@ -1,510 +1,523 @@
import React, { useEffect, useState } from 'react'
import KeyVisits from "./KeyVisits";
import React, { useEffect, useState } from 'react';
import KeyVisits from './KeyVisits';
import { majorStatus_1 } from '@/assets/images';
import { Scrollbars } from "react-custom-scrollbars";
import { Scrollbars } from 'react-custom-scrollbars';
import PreviewImage from '../PreviewImage';
import MyPDF from '../MyPDF';
import { checkIdCard } from "../../utils/utility";
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 });
   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 });
   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 });
   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',
      },
   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 });

    ],
    [
      {
        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 });
   }

  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 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 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 || [],
         });
      }
   }

  // 个人案件查询
  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);

  // 页码修改
  function handleChangePage(page, pageSize, field, order) {
    let paramsObj = Object.assign(search, { page, size: pageSize });
    paramsObj = { ...paramsObj }
    setSearch(paramsObj);
      pagePerson(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],
                  };
               }
            }
         });
      });

  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' }}>
                    {newData.suffix === 'pdf' ? <MyPDF name={newData.name} fileUrl={newData.showUrl} /> : <PreviewImage name={newData.name} src={newData.showUrl} />}
                    {index !== data[res.field].length - 1 && <>，</>}
                  </div>
                } else {
                  return <div style={{ display: 'inline-block' }}>
                    {item.suffix === 'pdf' ? <MyPDF name={item.name} fileUrl={item.showUrl} /> : <PreviewImage name={item.name} src={item.showUrl} />}
                    {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);
   }, []);

    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>
  )
   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>
   );
}