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

配合后台密码加密问题

 <!--
 <!--
  * @Date: 2022-09-14 14:44:30
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
  * @Description: 身份证输入控件
 -->
 -->
@@ -28,7 +28,7 @@
       :border="false"
       :border="false"
     >
     >
     </van-field> -->
     </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 }}
       {{ item.value }}
     </div>
     </div>
     <van-field
     <van-field
@@ -43,6 +43,9 @@
       :readonly="item.component_props.readonly"
       :readonly="item.component_props.readonly"
       :border="false"
       :border="false"
     >
     >
+      <template #button>
+        <van-button size="small" type="primary" v-if="data_type === 'encrypt_mode'" @click="clickEdit()">编辑</van-button>
+      </template>
     </van-field>
     </van-field>
     <!-- <div v-if="gender" class="gender"><span>性别：</span>{{ gender }}</div> -->
     <!-- <div v-if="gender" class="gender"><span>性别：</span>{{ gender }}</div> -->
     <van-number-keyboard
     <van-number-keyboard
@@ -62,8 +65,9 @@
 import { useRoute } from "vue-router";
 import { useRoute } from "vue-router";
 import $ from "jquery";
 import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
-import { showSuccessToast, showFailToast } from "vant";
+import { showSuccessToast, showFailToast, showConfirmDialog } from "vant";
 // import idCard from "idcard";
 // import idCard from "idcard";
+import { styleColor } from "@/constant.js";
 
 
 const $route = useRoute();
 const $route = useRoute();
 const props = defineProps({
 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(
 watch(
   () => props.item.component_props.default,
   () => props.item.component_props.default,
   (v) => {
   (v) => {
     if (v) {
     if (v) {
       props.item.value = v;
       props.item.value = v;
+      if (v.indexOf('*') !== -1) { // 默认值是加密模式
+        props.item.component_props.readonly = true;
+        data_type.value = 'encrypt_mode';
+      }
     }
     }
+  }, {
+    immediate: true,
   }
   }
 );
 );