view-design的Table封装手机号字段明文/密文展示功能

张滚滚QAQ

已于 2023-12-07 10:32:34 修改

阅读量123

点赞数 1

文章标签： view design

于 2023-09-26 15:30:55 首次发布

本文链接：https://blog.csdn.net/qq_38040571/article/details/133311116

版权

main.js全局封装手机号字段明文/密文展示方法：

一. main.js代码：

// 全局封装表格手机号明文密文的方法
let ciphertext = function (phoneNumber) {
  let encryptedNumber = phoneNumber.substring(0, 3) + '****' + phoneNumber.substring(7)
  return encryptedNumber
}
// 全局绑定tab字典表对象
Vue.prototype.$tabListObj = extractMenuData
Vue.prototype.$cipherOrWriting = (h, param, userTel, clipTel, isFirst) => {
  const btns = []
  let regex = /^1[3456789]\d{9}$/
  // 手机号为空
  if (!param.row[userTel]) {
    btns.push(h('span', param.row[userTel]))
    return h('div', {}, btns)
  }
  // 没被加密且还不是手机号
  if (!param.row[userTel].includes('*') && !regex.test(param.row[userTel])) {
    btns.push(h('span', param.row[userTel]))
    return h('div', {}, btns)
  }
  if (!param.row[isFirst]) {
    param.row[clipTel] = param.row[userTel]
    let pass = ciphertext(param.row[userTel])
    param.row[userTel] = pass
    btns.push(h('span', pass))
    param.row[isFirst] = 1
  } else {
    btns.push(h('span', param.row[userTel]))
  }
  if (param.row[userTel].includes('*')) {
    btns.push(h('Icon', {
      props: {
        type: 'ios-eye',
        size: '20'
      },
      on: {
        'click': (e) => {
          e.stopPropagation()
          if (param.row[userTel].includes('*')) {
            param.row[userTel] = param.row[clipTel]
          } else {
            param.row[clipTel] = param.row[userTel]
            param.row[userTel] = ciphertext(param.row[userTel])
          }
        }
      }
    }))
  } else {
    btns.push(h('Icon', {
      props: {
        type: 'ios-eye-off',
        size: '20'
      },
      on: {
        'click': (e) => {
          e.stopPropagation()
          // alert(param.row.userTel)
          if (param.row[userTel].includes('*')) {
            param.row[userTel] = param.row[clipTel]
          } else {
            param.row[clipTel] = param.row[userTel]
            param.row[userTel] = ciphertext(param.row[userTel])
          }
        }
      }
    }))
  }
  return h('div', {style: 'cursor: pointer; display:flex;justify-content: space-around;align-items: center'}, btns)
}

二.使用方法：

对需要加密的手机号字段进行的处理：

{
          title: '电话',
          key: 'mobile',
          align: 'center',
          resizable: true,
          tooltip: true,
          minWidth: 150,
          render: (h, param) => {
            return this.$cipherOrWriting(h, param, 'mobile', 'a', 'b')
          }
        }

当一列有多个手机号参数的时候，this.$cipherOrWriting方法最后两个参数不能重复，可以使用（a,b,c,d....）进行区分。