chore: format code

vben

2021-08-24 56a966cfbf8db5b29a42185f0f25a0e800c30dbb

 src/views/demo/form/DynamicForm.vue

@@ -1,20 +1,26 @@
<template>
  <div class="m-4">
  <PageWrapper title="动态表单示例">
    <div class="mb-4">
      <a-button @click="changeLabel3" class="mr-2">更改字段3label</a-button>
      <a-button @click="changeLabel34" class="mr-2">同时更改字段3,4label</a-button>
      <a-button @click="appendField" class="mr-2">往字段3后面插入字段10</a-button>
      <a-button @click="deleteField" class="mr-2">删除字段11</a-button>
      <a-button @click="changeLabel3" class="mr-2"> 更改字段3label </a-button>
      <a-button @click="changeLabel34" class="mr-2"> 同时更改字段3,4label </a-button>
      <a-button @click="appendField" class="mr-2"> 往字段3后面插入字段10 </a-button>
      <a-button @click="deleteField" class="mr-2"> 删除字段11 </a-button>
    </div>
    <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
      <BasicForm @register="register" />
    </CollapseContainer>
  </div>

    <CollapseContainer class="mt-5" title="componentProps动态改变">
      <BasicForm @register="register1" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container/index';
  import { PageWrapper } from '/@/components/Page';

  const schemas: FormSchema[] = [
    {
      field: 'field1',
@@ -120,15 +126,72 @@
    },
  ];

  const schemas1: FormSchema[] = [
    {
      field: 'f1',
      component: 'Input',
      label: 'F1',
      colProps: {
        span: 12,
      },
      labelWidth: 200,
      componentProps: ({ formModel }) => {
        return {
          placeholder: '同步f2的值为f1',
          onChange: (e: ChangeEvent) => {
            formModel.f2 = e.target.value;
          },
        };
      },
    },
    {
      field: 'f2',
      component: 'Input',
      label: 'F2',
      colProps: {
        span: 12,
      },
      labelWidth: 200,
      componentProps: { disabled: true },
    },
    {
      field: 'f3',
      component: 'Input',
      label: 'F3',
      colProps: {
        span: 12,
      },
      labelWidth: 200,
      // @ts-ignore
      componentProps: ({ formActionType }) => {
        return {
          placeholder: '值改变时执行查询,查看控制台',
          onChange: async () => {
            const { validate } = formActionType;
            // tableAction只适用于在表格内开启表单的例子
            // const { reload } = tableAction;
            const res = await validate();
            console.log(res);
          },
        };
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm, CollapseContainer },
    components: { BasicForm, CollapseContainer, PageWrapper },
    setup() {
      const [
        register,
        { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled },
      ] = useForm({
      const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] =
        useForm({
          labelWidth: 120,
          schemas,
          actionColOptions: {
            span: 24,
          },
        });
      const [register1] = useForm({
        labelWidth: 120,
        schemas,
        schemas: schemas1,
        actionColOptions: {
          span: 24,
        },
@@ -162,7 +225,7 @@
              span: 8,
            },
          },
          'field3'
          'field3',
        );
      }
      function deleteField() {
@@ -170,6 +233,7 @@
      }
      return {
        register,
        register1,
        schemas,
        setProps,
        changeLabel3,