BasicForm 表单组件、使用方法、属性列表、表单验证

<template>
  <div class="m-4">
    <BasicForm
      :labelWidth="100"
      :schemas="schemas"
      :showActionButtonGroup="true"
      :submitButtonOptions="{ text: '提交' }"
      :actionColOptions="{ span: 5 }"
      @submit="handleSubmit"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, FormSchema } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';

  const schemas: FormSchema[] = [
    {
      field: 'field',
      component: 'Input',
      label: '字段标签',
      colProps: {
        span: 8,
      },
      defaultValue: '123',
      componentProps: {
        placeholder: '这是一个输入框',
        onChange: (e: ChangeEvent) => {
          console.log('change', e);
        },
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm },
    setup() {
      const { createMessage } = useMessage();
      return {
        schemas,
        handleSubmit: (values: any) => {
          createMessage.success('表单值: ' + JSON.stringify(values));
        },
      };
    },
  });
</script>

<template>
  <div class="m-4">
    <BasicForm @register="register" @submit="handleSubmit" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';

  const schemas: FormSchema[] = [
    {
      field: 'field',
      component: 'Input',
      label: '字段标签',
      colProps: {
        span: 8,
      },
      defaultValue: '123',
      componentProps: {
        placeholder: '这是一个输入框',
        onChange: (e: ChangeEvent) => {
          console.log('change', e.target.value);
        },
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm },
    setup() {
      const { createMessage } = useMessage();
      // 参数 props 内的值可以是 computed 或者 ref 类型
      const [register, methods] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: true,
        submitButtonOptions: {
          text: '提交',
        },
        actionColOptions: {
          span: 5,
        },
        // 是否禁用表单所有控件
        disabled: false,
      });
      return {
        register,
        schemas,
        handleSubmit: (values: any) => {
          // 更新字段值
          values.field = '456';
          methods.setFieldsValue(values);
          // 获取字段值
          const vals = methods.getFieldsValue();
          createMessage.success('表单值: ' + JSON.stringify(vals));
        },
      };
    },
  });
</script>

<template>
  <BasicForm @register="register" @submit="handleSubmit" />
</template>
<script>
  export default defineComponent({
    components: { BasicForm },
    setup() {
      const [register] = useForm();
      return {
        register,
      };
    },
  });
</script>

<template>
  <div class="m-4">
    <BasicForm @register="register">
      <template #customSlot="{ model, field }">
        <a-input v-model:value="model[field]" />
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  export default defineComponent({
    name: 'FormDemo',
    components: { BasicForm },
    setup() {
      const schemas: FormSchema[] = [
        {
          field: 'field1',
          component: 'Input',
          defaultValue: '123',
          label: '字段1',
          slot: 'customSlot',
        },
      ];
      const [register] = useForm({
        labelWidth: 100,
        actionColOptions: {
          span: 24,
        },
        schemas,
      });
      return {
        register,
      };
    },
  });
</script>

<template>
  <div class="m-4">
    <BasicForm @register="register" @submit="handleSubmit" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Input } from 'ant-design-vue';
  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 8,
      },
      rules: [{ required: true }],
      // 通过函数渲染一个 Input
      render: ({ model, field }) => {
        return h(Input, {
          placeholder: '请输入',
          value: model[field],
          onChange: (e: ChangeEvent) => {
            model[field] = e.target.value;
          },
        });
      },
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
      colProps: {
        span: 8,
      },
      rules: [{ required: true }],
      // 指定 Input 的 slot
      renderComponentContent: () => {
        return {
          suffix: () => 'suffix',
        };
      },
    },
  ];
  export default defineComponent({
    components: { BasicForm },
    setup() {
      const { createMessage } = useMessage();
      const [register, { setProps }] = useForm({
        labelWidth: 100,
        schemas,
        showActionButtonGroup: true,
        submitButtonOptions: {
          text: '提交',
        },
        actionColOptions: {
          span: 8,
        },
      });
      return {
        register,
        schemas,
        handleSubmit: (values: any) => {
          createMessage.success('表单值: ' + JSON.stringify(values));
        },
        setProps,
      };
    },
  });
</script>

<template>
  <div class="m-4">
    <BasicForm @register="register" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 8,
      },
      show: ({ values }) => {
        return !!values.field5;
      },
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
      colProps: {
        span: 8,
      },
      ifShow: ({ values }) => {
        return !!values.field6;
      },
    },
    {
      field: 'field3',
      component: 'DatePicker',
      label: '字段3',
      colProps: {
        span: 8,
      },
      dynamicDisabled: ({ values }) => {
        return !!values.field7;
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm },
    setup() {
      const [register, { setProps }] = useForm({
        labelWidth: 120,
        schemas,
        actionColOptions: {
          span: 24,
        },
      });
      return {
        register,
        schemas,
        setProps,
      };
    },
  });
</script>

<template>
  <BasicTable>
    <template #testDataChildUpload="{ record: childRecord }">
      <BasicUpload
        v-model:value="childRecord.dataMap"
        :bizKey="childRecord.id"
        :bizType="'testDataChild_file'"
        :uploadType="'all'"
        :loadTime="record.__t"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  const testDataChildColumns: BasicColumn[] = [
    {
      title: t('文件上传'),
      dataIndex: 'upload',
      width: 160,
      align: 'left',
      // 个性化列，可定义插槽（如样式，增加控件等）
      slots: { customRender: 'testDataChildUpload' }, // 5.1.0 及之前
      slot: 'testDataChildUpload', // 5.2.0+ （Antdv 3.x 不再使用 slots）
    },
  ]);
</script>