From 472babe0cec9525ad0b1e5922d0b35292352c3f1 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Tue, 21 Jul 2026 15:10:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=A1=86=E6=B7=BB=E5=8A=A0=E6=9C=80=E5=A4=A7=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/datePicker/index.vue     |  2 +-
 src/components/table/defaultAttribute.ts     | 12 ++-
 src/components/table/header/index.vue        |  2 +-
 src/views/system/auth/userList/popupEdit.vue | 79 +++++++++++++++++---
 4 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/src/components/form/datePicker/index.vue b/src/components/form/datePicker/index.vue
index 3de64fc1..b127413f 100644
--- a/src/components/form/datePicker/index.vue
+++ b/src/components/form/datePicker/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :style="{ width: isMinuteData ? '750px' : '610px' }">
+    <div :style="{ width: isMinuteData ? '750px' : '620px' }">
         <el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange" filterable>
             <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
diff --git a/src/components/table/defaultAttribute.ts b/src/components/table/defaultAttribute.ts
index 137d8864..70c5a936 100644
--- a/src/components/table/defaultAttribute.ts
+++ b/src/components/table/defaultAttribute.ts
@@ -7,11 +7,19 @@ export const defaultAttribute: VxeTableProps = {
     stripe: true,
     size: 'small',
     columnConfig: { resizable: true, useKey: true },
-    rowConfig: { isCurrent: true, isHover: true,  },
+    rowConfig: { isCurrent: true, isHover: true },
     scrollX: { scrollToLeftOnChange: true },
     scrollY: { enabled: false },
+    tooltipConfig: { maxHeight: 150 },
     // 注意：全局不要默认开启 treeConfig，会与 stripe 冲突；树表在页面自行配置
-    customConfig: { enabled: true, allowFixed: true, storage: false, showFooter: false, immediate: true ,mode:'default'},
+    customConfig: {
+        enabled: true,
+        allowFixed: true,
+        storage: false,
+        showFooter: false,
+        immediate: true,
+        mode: 'default'
+    },
     showOverflow: 'tooltip',
     showHeaderOverflow: false
 }
diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue
index 156e41a3..64ab36c2 100644
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -12,7 +12,7 @@
                 <el-form-item
                     v-if="datePicker"
                     style="grid-column: span 2"
-                    :style="{ maxWidth: isStatisticData == 1 ? '750px' : '610px' }"
+                    :style="{ maxWidth: isStatisticData == 1 ? '750px' : '620px' }"
                 >
                     <template #label>
                         <el-checkbox v-if="showTimeAll" v-model="timeAll" label="统计时间" />
diff --git a/src/views/system/auth/userList/popupEdit.vue b/src/views/system/auth/userList/popupEdit.vue
index c8e40ce6..5c0c2e52 100644
--- a/src/views/system/auth/userList/popupEdit.vue
+++ b/src/views/system/auth/userList/popupEdit.vue
@@ -2,10 +2,24 @@
     <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <el-form :model="form" class="form-two" label-width="auto" :rules="rules" ref="formRef">
             <el-form-item label="用户名" prop="name">
-                <el-input v-model="form.name" placeholder="请输入昵称" maxlength="16" show-word-limit @input="handleInput('name', $event)" :disabled="title !== '新增用户'"/>
+                <el-input
+                    v-model="form.name"
+                    placeholder="请输入昵称"
+                    maxlength="16"
+                    show-word-limit
+                    @input="handleInput('name', $event)"
+                    :disabled="title !== '新增用户'"
+                />
             </el-form-item>
-            <el-form-item label="登录名" prop="loginName" >
-                <el-input v-model="form.loginName" placeholder="请输入登录名"  maxlength="16" show-word-limit @input="handleInput('loginName', $event)" :disabled="title !== '新增用户'"/>
+            <el-form-item label="登录名" prop="loginName">
+                <el-input
+                    v-model="form.loginName"
+                    placeholder="请输入登录名"
+                    maxlength="16"
+                    show-word-limit
+                    @input="handleInput('loginName', $event)"
+                    :disabled="title !== '新增用户'"
+                />
             </el-form-item>
             <el-form-item label="默认密码" prop="password" v-if="title === '新增用户'">
                 <el-input v-model="form.password" placeholder="请输入密码" disabled />
@@ -47,16 +61,30 @@
             <el-form-item label="手机号" prop="phone">
                 <el-input v-model="form.phone" placeholder="请输入手机号" />
             </el-form-item>
+
             <el-form-item label="邮箱" prop="email">
                 <el-input v-model="form.email" placeholder="请输入描述" />
             </el-form-item>
+            <el-form-item label="身份证号" prop="idCardNum">
+                <el-input
+                    :model-value="idCardDisplay"
+                    clearable
+                    maxlength="18"
+                    show-word-limit
+                    placeholder="请输入18位身份证号（选填）"
+                    @update:model-value="handleIdCardInput"
+                    @focus="idCardEditing = true"
+                    @blur="onIdCardBlur"
+                    @clear="form.idCardNum = ''"
+                />
+            </el-form-item>
             <el-form-item label="起始IP" prop="limitIpStart">
                 <el-input v-model="form.limitIpStart" placeholder="请输入描述" />
             </el-form-item>
             <el-form-item label="结束IP" prop="limitIpEnd">
                 <el-input v-model="form.limitIpEnd" placeholder="请输入描述" />
             </el-form-item>
-            <el-form-item label="时间段" prop="limitTime" >
+            <el-form-item label="时间段" prop="limitTime">
                 <el-slider v-model="form.limitTime" range style="width: 80%" show-stops :max="24" />
             </el-form-item>
             <el-form-item label="短信通知" prop="smsNotice">
@@ -96,10 +124,9 @@
     </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
+import { ref, inject, reactive, computed } from 'vue'
 import { ElMessage, FormItemRule } from 'element-plus'
+import TableStore from '@/utils/tableStore'
 import { roleList } from '@/api/user-boot/role'
 import { add, edit } from '@/api/user-boot/user'
 import { useAdminInfo } from '@/stores/adminInfo'
@@ -120,6 +147,7 @@ const form = reactive({
     casualUser: 1,
     loginName: '',
     phone: '',
+    idCardNum:'',
     limitIpEnd: '',
     limitTime: [1, 2],
     role: [],
@@ -151,6 +179,14 @@ const rules: Partial<Record<string, Array<FormItemRule>>> = {
             trigger: 'blur'
         }
     ],
+    idCardNum: [
+        {
+            pattern:
+                /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
+            message: '请输入正确的身份证号',
+            trigger: 'blur'
+        }
+    ],
     limitTime: [{ required: true, message: '时间段不能为空', trigger: 'blur' }],
     limitIpStart: [
         { required: true, message: '起始IP不能为空', trigger: 'blur' },
@@ -198,7 +234,22 @@ const TypeOptions = [
     { label: '长期用户', value: 1 }
 ]
 const useId = ref(1)
+const idCardEditing = ref(false)
 const roleOptions = ref<treeData>()
+
+const maskIdCard = (value: string) => {
+    if (!value || value.length < 8) return value
+    if (value.length >= 18) return value.slice(0, 6) + '********' + value.slice(-4)
+    if (value.length >= 15) return value.slice(0, 6) + '*****' + value.slice(-4)
+    return value.slice(0, 3) + '*'.repeat(Math.max(value.length - 7, 1)) + value.slice(-4)
+}
+
+const idCardDisplay = computed(() => {
+    if (title.value === '新增用户' || idCardEditing.value || !form.idCardNum) {
+        return form.idCardNum
+    }
+    return maskIdCard(form.idCardNum)
+})
 const queryRole = () => {
     roleList(adminInfo.$state.userType).then((res: any) => {
         roleOptions.value = res.data.map((item: any) => {
@@ -215,6 +266,7 @@ const title = ref('新增用户')
 const open = (text: string, data?: anyObj) => {
     title.value = text
     dialogVisible.value = true
+    idCardEditing.value = false
     if (data) {
         for (let key in form) {
             form[key] = data[key]
@@ -240,9 +292,9 @@ const open = (text: string, data?: anyObj) => {
     form.type = adminInfo.$state.userType + 1
 }
 const submit = async () => {
-     formRef.value.validate(async (valid: boolean) => {
+    formRef.value.validate(async (valid: boolean) => {
         if (valid) {
-             let obj = JSON.parse(JSON.stringify(form))
+            let obj = JSON.parse(JSON.stringify(form))
             obj.limitTime = obj.limitTime.join('-')
             delete obj.password
             if (form.id) {
@@ -257,7 +309,6 @@ const submit = async () => {
             dialogVisible.value = false
         }
     })
-   
 }
 
 const handleInput = (field: keyof typeof form, value: string) => {
@@ -268,6 +319,14 @@ const handleInput = (field: keyof typeof form, value: string) => {
     }
 }
 
+const handleIdCardInput = (value: string) => {
+    form.idCardNum = value.replace(/\s/g, '').replace(/[^0-9xX]/g, '').toUpperCase().slice(0, 18)
+}
+
+const onIdCardBlur = () => {
+    idCardEditing.value = false
+}
+
 const changeValue = () => {}
 defineExpose({ open })
 </script>