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 }}
/>
</>
)
}
敏感信息脱敏处理
于 2022-12-16 15:40:04 首次发布