@@ -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 >
guanj