From 858b9bccead46cdefc99325b7c956d50a2964309 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 08 三月 2025 10:20:28 +0800
Subject: [PATCH] 一些优化
---
src/views/demo/form/RuleForm.vue | 116 +++++++++++++++++++++++++---------------------------------
1 files changed, 50 insertions(+), 66 deletions(-)
diff --git a/src/views/demo/form/RuleForm.vue b/src/views/demo/form/RuleForm.vue
index 183c047..182b606 100644
--- a/src/views/demo/form/RuleForm.vue
+++ b/src/views/demo/form/RuleForm.vue
@@ -12,14 +12,14 @@
</CollapseContainer>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
- import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container';
- import { useMessage } from '/@/hooks/web/useMessage';
- import { PageWrapper } from '/@/components/Page';
- import { isAccountExist } from '/@/api/demo/system';
-
+<script lang="ts" setup>
+ import { BasicForm, FormSchema, useForm } from '@/components/Form';
+ import { CollapseContainer } from '@/components/Container';
+ import { useMessage } from '@/hooks/web/useMessage';
+ import { PageWrapper } from '@/components/Page';
+ import { isAccountExist } from '@/api/demo/system';
+ import dayjs from "dayjs"
+
const schemas: FormSchema[] = [
{
field: 'field1',
@@ -120,14 +120,11 @@
rules: [
{
required: true,
- // @ts-ignore
- validator: async (rule, value) => {
+ validator: async (_, value) => {
if (!value) {
- /* eslint-disable-next-line */
return Promise.reject('鍊间笉鑳戒负绌�');
}
if (value === '1') {
- /* eslint-disable-next-line */
return Promise.reject('鍊间笉鑳戒负1');
}
return Promise.resolve();
@@ -192,10 +189,12 @@
message: '璇疯緭鍏ユ暟鎹�',
},
{
+ trigger: 'blur',
validator(_, value) {
return new Promise((resolve, reject) => {
+ if (!value) return resolve();
isAccountExist(value)
- .then(() => resolve())
+ .then(resolve)
.catch((err) => {
reject(err.message || '楠岃瘉澶辫触');
});
@@ -206,57 +205,42 @@
},
];
- export default defineComponent({
- components: { BasicForm, CollapseContainer, PageWrapper },
- setup() {
- const { createMessage } = useMessage();
- const [
- register,
- { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue },
- ] = useForm({
- labelWidth: 120,
- schemas,
- actionColOptions: {
- span: 24,
- },
- });
- async function validateForm() {
- try {
- const res = await validateFields();
- console.log('passing', res);
- } catch (error) {
- console.log('not passing', error);
- }
- }
- async function resetValidate() {
- clearValidate();
- }
- function getFormValues() {
- const values = getFieldsValue();
- createMessage.success('values:' + JSON.stringify(values));
- }
- function setFormValues() {
- setFieldsValue({
- field1: 1111,
- field4: ['1'],
- field5: ['1'],
- field7: '1',
- field33: '2020-12-12',
- field3: '2020-12-12',
- });
- }
- return {
- register,
- schemas,
- handleSubmit: (values: any) => {
- createMessage.success('click search,values:' + JSON.stringify(values));
- },
- getFormValues,
- setFormValues,
- validateForm,
- resetValidate,
- resetFields,
- };
- },
- });
+ const { createMessage } = useMessage();
+ const [register, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }] =
+ useForm({
+ labelWidth: 120,
+ schemas,
+ actionColOptions: {
+ span: 24,
+ },
+ });
+ async function validateForm() {
+ try {
+ const res = await validateFields();
+ console.log('passing', res);
+ } catch (error) {
+ console.log('not passing', error);
+ }
+ }
+ async function resetValidate() {
+ clearValidate();
+ }
+ function getFormValues() {
+ const values = getFieldsValue();
+ createMessage.success('values:' + JSON.stringify(values));
+ }
+ function setFormValues() {
+ setFieldsValue({
+ field1: 1111,
+ field4: ['1'],
+ field5: ['1'],
+ field7: '1',
+ field33: '2020-12-12',
+ field3: dayjs('2020-12-12',"YYYY-MM-DD"),
+ });
+ }
+
+ function handleSubmit(values: any) {
+ createMessage.success('click search,values:' + JSON.stringify(values));
+ }
</script>
--
Gitblit v1.9.3