敏感信息脱敏处理

import { ProTable } from '@ant-design/pro-table'
import { useState, useEffect, useRef } from 'react'
import pageService from './service'
export default (props) => {
//截取前后两位,slice(0,2)取前不取后,取到0和1两位
//splice(0,2)取后不取前,取到1-2位
//const desensitization = (str) => {
 // console.log(str)
  //截取前后两位
  //如果长度小于两位则显示全部
//  if (!str || (str && str.length < 3)) {
//return str
 // } else {
  //  return `${str.slice(0, 2)}**${str.slice(str.length - //3, str.length - 1`}}
  const actionRef:any = useRef()
  //表格配置
  const [config, setConfig] = useState(initTableConfig) //表格配置项
  const [copytableData, setCopytableData] = useState([]) // 表格数据,包含了是否隐藏身份证号的flag
  // 查询列表
  const loadData = async (params) => {
    let obj = JSON.parse(JSON.stringify(params))
    let str = `?page=${params.current}&limit=${params.pageSize}`
    delete obj.pageSize
    delete obj.current
    // 传参分两种类型...
    const res = await pageService.getPageList(obj, str)
    const data = config
    if (res.msgCode === '000000') {
      // 先设置所有身份证号都隐藏
      res.data.data.forEach((item) => {
        item.flag = true
      })
      // 再对还原点击要展示的身份证号行
      data.tableData = Object.assign(res.data.data, copytableData)
      data.pagination.total = res.data.count
      setConfig(data)
    } else {
      message.error(res.message)
    }
    return Promise.resolve({
      data: data.tableData,
      success: true,
      total: data.pagination.total,
    })
  }
  const columns = [
   {
      title: '身份证号(更新后)',
      width: 60,
      dataIndex: 'certPasswordUp',
      hideInSearch: true,
      render: (_, record) => {
        return [
          <a style={{ color: '#000' }} key={record.id}
            onClick={() => {
             let list = JSON.parse(JSON.stringify(config.tableData))
             list.forEach((item) => {
                if (item.id == record.id) {
                  // 点击要表格密码进行显示和隐藏的切换
                  item.flag = !item.flag
                  setCopytableData(list)
                  // 最后记得要刷新视图
                  actionRef.current.reload()
                }
              })
            }}
          >
            {record.flag ? '*****' :record.certPasswordUp}
              // {record.flag ? Utils.desensitization(record.certificatesCode) : record.certificatesCode}
          </a>,
        ]
      },
    },
  ]
}

 return (
    <>
      <ProTable<TableListItem>
        actionRef={actionRef}
        columns={columns}
        className="aaaa"
        {...config}
        request={loadData}
        rowKey="id"
        scroll={{ x: 800 }}
       />
    </>
  )
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值