脱敏组件bs-text-sensitive

bs-text-sensitive 详情页面合伙列表页面使用

前端加密解密

<van-field
            v-model="data.bdBbrIdcard"
            disabled
            name="被保人身份证"
            label="被保人身份证"
            placeholder="被保人身份证"
          >
            <template #input>
              <bs-text-sensitive
                data-type="idcard"
                v-model="data.bdBbrIdcard"
              ></bs-text-sensitive>
            </template>

            <template #button> </template>
          </van-field>

显示效果

编辑页面使用

<van-field
        v-model="value.bdBbrIdcard"
        name="bdBbrIdcard"
        required
        label="被保人身份证"
        :rules="[
          { required: true, message: '请填写被保人身份证' },
          { validator: validateIdCard, message: '身份证号码格式错误！' },
        ]"
        @change="
          () => {
            changeField.bdBbrIdcard = value.bdBbrIdcard;
            changeField.changed = true;
            SetChangeField(changeField);
          }
        "
        placeholder="被保人身份证"
      >
        <template #button></template>
      </van-field>

有效性验证

  validateIdCard(val) {
      return validateIdCardV(val, null, null);
    },

import {
  validateIdCardV,
  validateArrayKvaV,
  validateObjectKvV,
} from "@/actions/rule-utils";

数据保存加密

            if (that.data.bdBbrIdcard) {
                dataT.bdBbrIdcard = that.$crypto.encryptByDES(that.data.bdBbrIdcard);
            }


            if (that.data.telephone) {
                dataT.telephone = that.$crypto.encryptByDES(that.data.telephone);
            }

                if (that.data.idCard) {
                    that.data.idCard = that.$crypto.decryptByDES(that.data.idCard);
                }


            if (that.data.idCard) {
                dataT.telephone = that.$crypto.encryptByDES(that.data.idCard);
            }

数据解密

    if (that.data.bdBbrIdcard) {
                    that.data.bdBbrIdcard = that.$crypto.decryptByDES(that.data.bdBbrIdcard);
                }

                   if (that.data.telephone) {
                    that.data.telephone = that.$crypto.decryptByDES(that.data.telephone);
                }

mapper columns身份证配置 “encDesMethod”: “qt2db”

    "bdBbrIdcard": {
      "title": "被保人身份证",
      "encDesMethod": "qt2db" //qt2db  qt  db
    },

数据库存储格式