fix: 修复正则校验问题
This commit is contained in:
parent
ed875f7786
commit
e381db8ba7
@ -19,6 +19,8 @@ interface Props {
|
|||||||
tooltipContent?: string;
|
tooltipContent?: string;
|
||||||
/** Tooltip placement */
|
/** Tooltip placement */
|
||||||
tooltipPlacement?: PopoverPlacement;
|
tooltipPlacement?: PopoverPlacement;
|
||||||
|
/** Popconfirm content */
|
||||||
|
popconfirmContent?: string;
|
||||||
zIndex?: number;
|
zIndex?: number;
|
||||||
quaternary?: boolean;
|
quaternary?: boolean;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
@ -30,10 +32,17 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
localIcon: '',
|
localIcon: '',
|
||||||
tooltipContent: '',
|
tooltipContent: '',
|
||||||
tooltipPlacement: 'bottom',
|
tooltipPlacement: 'bottom',
|
||||||
|
popconfirmContent: '',
|
||||||
zIndex: 98,
|
zIndex: 98,
|
||||||
quaternary: true
|
quaternary: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
interface Emits {
|
||||||
|
(e: 'positiveClick'): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
const DEFAULT_CLASS = 'h-[36px] text-icon';
|
const DEFAULT_CLASS = 'h-[36px] text-icon';
|
||||||
|
|
||||||
const attrs: ButtonProps = useAttrs();
|
const attrs: ButtonProps = useAttrs();
|
||||||
@ -41,19 +50,33 @@ const attrs: ButtonProps = useAttrs();
|
|||||||
const quaternary = computed(() => {
|
const quaternary = computed(() => {
|
||||||
return !(attrs.text || attrs.dashed || attrs.ghost) && props.quaternary;
|
return !(attrs.text || attrs.dashed || attrs.ghost) && props.quaternary;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const handlePositiveClick = () => {
|
||||||
|
emit('positiveClick');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
|
<NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<NButton :quaternary="quaternary" :class="twMerge(DEFAULT_CLASS, props.class)" :focusable="false" v-bind="attrs">
|
<NPopconfirm :disabled="!popconfirmContent" @positive-click="handlePositiveClick">
|
||||||
<div class="flex-center gap-8px">
|
{{ popconfirmContent }}
|
||||||
<slot>
|
<template #trigger>
|
||||||
<SvgIcon v-if="icon" :icon="icon" />
|
<NButton
|
||||||
<SvgIcon v-else :local-icon="localIcon" />
|
:quaternary="quaternary"
|
||||||
</slot>
|
:class="twMerge(DEFAULT_CLASS, props.class)"
|
||||||
</div>
|
:focusable="false"
|
||||||
</NButton>
|
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>
|
</template>
|
||||||
{{ tooltipContent }}
|
{{ tooltipContent }}
|
||||||
</NTooltip>
|
</NTooltip>
|
||||||
|
@ -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>
|
|
@ -50,7 +50,7 @@ export function useFormRules() {
|
|||||||
function createRequiredRule(message: string): App.Global.FormRule {
|
function createRequiredRule(message: string): App.Global.FormRule {
|
||||||
return {
|
return {
|
||||||
required: true,
|
required: true,
|
||||||
trigger: ['change', 'blur'],
|
trigger: ['input', 'blur'],
|
||||||
validator: (_rule: any, value: any) => {
|
validator: (_rule: any, value: any) => {
|
||||||
if (value === null || value === undefined || value === '') {
|
if (value === null || value === undefined || value === '') {
|
||||||
return new Error(message);
|
return new Error(message);
|
||||||
|
@ -40,8 +40,8 @@ const rules = computed<Record<RuleKey, App.Global.FormRule[]>>(() => {
|
|||||||
const { formRules, createRequiredRule } = useFormRules();
|
const { formRules, createRequiredRule } = useFormRules();
|
||||||
|
|
||||||
const loginRules: Record<RuleKey, App.Global.FormRule[]> = {
|
const loginRules: Record<RuleKey, App.Global.FormRule[]> = {
|
||||||
username: formRules.userName,
|
username: [...formRules.userName, { required: true }],
|
||||||
password: formRules.pwd,
|
password: [...formRules.pwd, { required: true }],
|
||||||
code: captchaEnabled.value ? [createRequiredRule($t('form.code.required'))] : [],
|
code: captchaEnabled.value ? [createRequiredRule($t('form.code.required'))] : [],
|
||||||
tenantId: tenantEnabled.value ? formRules.tenantId : []
|
tenantId: tenantEnabled.value ? formRules.tenantId : []
|
||||||
};
|
};
|
||||||
|
@ -35,8 +35,8 @@ const rules = computed<Record<RuleKey, App.Global.FormRule[]>>(() => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
tenantId: tenantEnabled.value ? formRules.tenantId : [],
|
tenantId: tenantEnabled.value ? formRules.tenantId : [],
|
||||||
username: formRules.userName,
|
username: [...formRules.userName, { required: true }],
|
||||||
password: formRules.pwd,
|
password: [...formRules.pwd, { required: true }],
|
||||||
confirmPassword: createConfirmPwdRule(model.password!),
|
confirmPassword: createConfirmPwdRule(model.password!),
|
||||||
code: captchaEnabled.value ? [createRequiredRule($t('form.code.required'))] : []
|
code: captchaEnabled.value ? [createRequiredRule($t('form.code.required'))] : []
|
||||||
};
|
};
|
||||||
|
@ -10,7 +10,6 @@ import { useAuth } from '@/hooks/business/auth';
|
|||||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||||
import DictTag from '@/components/custom/dict-tag.vue';
|
import DictTag from '@/components/custom/dict-tag.vue';
|
||||||
import { $t } from '@/locales';
|
import { $t } from '@/locales';
|
||||||
import ButtonPopconfirm from '@/components/custom/button-popconfirm.vue';
|
|
||||||
import UserOperateDrawer from './modules/user-operate-drawer.vue';
|
import UserOperateDrawer from './modules/user-operate-drawer.vue';
|
||||||
import UserSearch from './modules/user-search.vue';
|
import UserSearch from './modules/user-search.vue';
|
||||||
|
|
||||||
@ -129,10 +128,11 @@ const {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<ButtonPopconfirm
|
<ButtonIcon
|
||||||
text
|
text
|
||||||
type="error"
|
type="error"
|
||||||
icon="material-symbols:delete-outline"
|
icon="material-symbols:delete-outline"
|
||||||
|
tooltipContent={$t('common.delete')}
|
||||||
popconfirmContent={$t('common.confirmDelete')}
|
popconfirmContent={$t('common.confirmDelete')}
|
||||||
onPositiveClick={() => handleDelete(row.userId!)}
|
onPositiveClick={() => handleDelete(row.userId!)}
|
||||||
/>
|
/>
|
||||||
|
@ -70,7 +70,7 @@ type RuleKey = Extract<keyof Model, 'userName' | 'nickName' | 'password' | 'stat
|
|||||||
const rules: Record<RuleKey, App.Global.FormRule[]> = {
|
const rules: Record<RuleKey, App.Global.FormRule[]> = {
|
||||||
userName: [createRequiredRule('用户名称不能为空')],
|
userName: [createRequiredRule('用户名称不能为空')],
|
||||||
nickName: [createRequiredRule('用户昵称不能为空')],
|
nickName: [createRequiredRule('用户昵称不能为空')],
|
||||||
password: [createRequiredRule('密码不能为空'), patternRules.pwd],
|
password: [{ ...patternRules.pwd, required: true }],
|
||||||
phonenumber: [patternRules.phone],
|
phonenumber: [patternRules.phone],
|
||||||
status: [createRequiredRule('帐号状态不能为空')]
|
status: [createRequiredRule('帐号状态不能为空')]
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user