Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx

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>

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
 }

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="统计时间" />

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-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,9 +61,23 @@
             <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>
@@ -96,10 +124,9 @@
     </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, inject } from 'vue'
+import { ref, inject, reactive, computed } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
 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]
@@ -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>