hookehuyr

✨ feat(身份证组件): 新增身份证值的加密模式判断,如果默认值是带*号的需要特殊处理

配合后台密码加密问题
<!--
* @Date: 2022-09-14 14:44:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-22 09:59:32
* @LastEditTime: 2024-08-23 13:39:19
* @FilePath: /data-table/src/components/IdentityField/index.vue
* @Description: 身份证输入控件
-->
......@@ -28,7 +28,7 @@
:border="false"
>
</van-field> -->
<div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem; font-size: 0.9rem;">
<div v-if="item.component_props.readonly && data_type !== 'encrypt_mode'" style="padding: 0.5rem 1rem; font-size: 0.9rem;">
{{ item.value }}
</div>
<van-field
......@@ -43,6 +43,9 @@
:readonly="item.component_props.readonly"
:border="false"
>
<template #button>
<van-button size="small" type="primary" v-if="data_type === 'encrypt_mode'" @click="clickEdit()">编辑</van-button>
</template>
</van-field>
<!-- <div v-if="gender" class="gender"><span>性别:</span>{{ gender }}</div> -->
<van-number-keyboard
......@@ -62,8 +65,9 @@
import { useRoute } from "vue-router";
import $ from "jquery";
import { storeToRefs, mainStore } from "@/utils/generatePackage";
import { showSuccessToast, showFailToast } from "vant";
import { showSuccessToast, showFailToast, showConfirmDialog } from "vant";
// import idCard from "idcard";
import { styleColor } from "@/constant.js";
const $route = useRoute();
const props = defineProps({
......@@ -100,13 +104,38 @@ watch(
}
);
const data_type = ref('');
const clickEdit = () => {
showConfirmDialog({
title: '温馨提示',
message:
'身份证号将重置后重新输入,是否确认?',
confirmButtonColor: styleColor.baseColor
})
.then(() => {
// 重置输入显示
props.item.value = '';
props.item.component_props.readonly = false;
data_type.value = '';
})
.catch(() => {
// on cancel
});
}
// 监听默认值变化
watch(
() => props.item.component_props.default,
(v) => {
if (v) {
props.item.value = v;
if (v.indexOf('*') !== -1) { // 默认值是加密模式
props.item.component_props.readonly = true;
data_type.value = 'encrypt_mode';
}
}
}, {
immediate: true,
}
);
......