fix: 修复正则校验问题

This commit is contained in:
xlsea 2025-04-24 18:21:53 +08:00
parent ed875f7786
commit e381db8ba7
7 changed files with 39 additions and 101 deletions

View File

@ -19,6 +19,8 @@ interface Props {
tooltipContent?: string;
/** Tooltip placement */
tooltipPlacement?: PopoverPlacement;
/** Popconfirm content */
popconfirmContent?: string;
zIndex?: number;
quaternary?: boolean;
[key: string]: any;
@ -30,10 +32,17 @@ const props = withDefaults(defineProps<Props>(), {
localIcon: '',
tooltipContent: '',
tooltipPlacement: 'bottom',
popconfirmContent: '',
zIndex: 98,
quaternary: true
});
interface Emits {
(e: 'positiveClick'): void;
}
const emit = defineEmits<Emits>();
const DEFAULT_CLASS = 'h-[36px] text-icon';
const attrs: ButtonProps = useAttrs();
@ -41,19 +50,33 @@ const attrs: ButtonProps = useAttrs();
const quaternary = computed(() => {
return !(attrs.text || attrs.dashed || attrs.ghost) && props.quaternary;
});
const handlePositiveClick = () => {
emit('positiveClick');
};
</script>
<template>
<NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
<template #trigger>
<NButton :quaternary="quaternary" :class="twMerge(DEFAULT_CLASS, props.class)" :focusable="false" v-bind="attrs">
<div class="flex-center gap-8px">
<slot>
<SvgIcon v-if="icon" :icon="icon" />
<SvgIcon v-else :local-icon="localIcon" />
</slot>
</div>
</NButton>
<NPopconfirm :disabled="!popconfirmContent" @positive-click="handlePositiveClick">
{{ popconfirmContent }}
<template #trigger>
<NButton
:quaternary="quaternary"
:class="twMerge(DEFAULT_CLASS, props.class)"
:focusable="false"
v-bind="attrs"
>
<div class="flex-center gap-8px">
<slot>
<SvgIcon v-if="icon" :icon="icon" />
<SvgIcon v-else :local-icon="localIcon" />
</slot>
</div>
</NButton>
</template>
</NPopconfirm>
</template>
{{ tooltipContent }}
</NTooltip>

View File

@ -1,85 +0,0 @@
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import type { ButtonProps, PopoverPlacement } from 'naive-ui';
import { twMerge } from 'tailwind-merge';
defineOptions({
name: 'ButtonPopconfirm',
inheritAttrs: false
});
interface Props {
/** Button class */
class?: string;
/** Iconify icon name */
icon?: string;
/** Local icon name */
localIcon?: string;
/** Tooltip content */
tooltipContent?: string;
/** Tooltip placement */
tooltipPlacement?: PopoverPlacement;
/** Popconfirm content */
popconfirmContent?: string;
zIndex?: number;
quaternary?: boolean;
[key: string]: any;
}
const props = withDefaults(defineProps<Props>(), {
class: '',
icon: '',
localIcon: '',
tooltipContent: '',
tooltipPlacement: 'bottom',
popconfirmContent: '',
zIndex: 98,
quaternary: true
});
interface Emits {
(e: 'positiveClick'): void;
}
const emit = defineEmits<Emits>();
const DEFAULT_CLASS = 'h-[36px] text-icon';
const attrs: ButtonProps = useAttrs();
const quaternary = computed(() => {
return !(attrs.text || attrs.dashed || attrs.ghost) && props.quaternary;
});
const handlePositiveClick = () => {
emit('positiveClick');
};
</script>
<template>
<NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
<template #trigger>
<NPopconfirm :disabled="!popconfirmContent" @positive-click="handlePositiveClick">
{{ popconfirmContent }}
<template #trigger>
<NButton
:quaternary="quaternary"
:class="twMerge(DEFAULT_CLASS, props.class)"
:focusable="false"
v-bind="attrs"
>
<div class="flex-center gap-8px">
<slot>
<SvgIcon v-if="icon" :icon="icon" />
<SvgIcon v-else :local-icon="localIcon" />
</slot>
</div>
</NButton>
</template>
</NPopconfirm>
</template>
{{ tooltipContent }}
</NTooltip>
</template>
<style scoped></style>

View File

@ -50,7 +50,7 @@ export function useFormRules() {
function createRequiredRule(message: string): App.Global.FormRule {
return {
required: true,
trigger: ['change', 'blur'],
trigger: ['input', 'blur'],
validator: (_rule: any, value: any) => {
if (value === null || value === undefined || value === '') {
return new Error(message);

View File

@ -40,8 +40,8 @@ const rules = computed<Record<RuleKey, App.Global.FormRule[]>>(() => {
const { formRules, createRequiredRule } = useFormRules();
const loginRules: Record<RuleKey, App.Global.FormRule[]> = {
username: formRules.userName,
password: formRules.pwd,
username: [...formRules.userName, { required: true }],
password: [...formRules.pwd, { required: true }],
code: captchaEnabled.value ? [createRequiredRule($t('form.code.required'))] : [],
tenantId: tenantEnabled.value ? formRules.tenantId : []
};

View File

@ -35,8 +35,8 @@ const rules = computed<Record<RuleKey, App.Global.FormRule[]>>(() => {
return {
tenantId: tenantEnabled.value ? formRules.tenantId : [],
username: formRules.userName,
password: formRules.pwd,
username: [...formRules.userName, { required: true }],
password: [...formRules.pwd, { required: true }],
confirmPassword: createConfirmPwdRule(model.password!),
code: captchaEnabled.value ? [createRequiredRule($t('form.code.required'))] : []
};

View File

@ -10,7 +10,6 @@ import { useAuth } from '@/hooks/business/auth';
import ButtonIcon from '@/components/custom/button-icon.vue';
import DictTag from '@/components/custom/dict-tag.vue';
import { $t } from '@/locales';
import ButtonPopconfirm from '@/components/custom/button-popconfirm.vue';
import UserOperateDrawer from './modules/user-operate-drawer.vue';
import UserSearch from './modules/user-search.vue';
@ -129,10 +128,11 @@ const {
return null;
}
return (
<ButtonPopconfirm
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.userId!)}
/>

View File

@ -70,7 +70,7 @@ type RuleKey = Extract<keyof Model, 'userName' | 'nickName' | 'password' | 'stat
const rules: Record<RuleKey, App.Global.FormRule[]> = {
userName: [createRequiredRule('用户名称不能为空')],
nickName: [createRequiredRule('用户昵称不能为空')],
password: [createRequiredRule('密码不能为空'), patternRules.pwd],
password: [{ ...patternRules.pwd, required: true }],
phonenumber: [patternRules.phone],
status: [createRequiredRule('帐号状态不能为空')]
};