动态Import更新

Ben Lin

2024-06-25 f73947395184fd635df3d74c1c4b2701d0c708c1

 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>