Form

<template>
  <div>
    <Form :createOption="form" />
  </div>
  <p>data: {{ form.data }}</p>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      type: "Input",
      label: "label1",
      model: "label1",
      row: [12],
    },
    {
      type: "Input",
      label: "label2",
      model: "label2",
      row: [12],
    },
    {
      type: "Input",
      label: "label3",
      model: "label3",
      placeholder: "需要生成自定义placeholder",
    },
  ],
  data: ref({
    label1: "",
    label2: "123",
    label3: "",
  }),
  labelWidth: 60,
});
</script>

<template>
  <div>
    {{ form.data }}
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      type: "DateRangePicker",
      label: "时间",
      model: ["startTime", "endTime"],
    },
  ],
  data: ref({
    startTime: "",
    endTime: "",
  }),
});
</script>

<template>
  <div>
    {{ form.data }}
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  row: [12],
  form: [
    {
      type: "Input",
      label: "姓名",
      model: "info.name",
    },
    {
      type: "Input",
      label: "年龄",
      model: "age.0",
    },
  ],
  data: ref({
    info: {
      name: "",
    },
    age: [],
  }),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  disabled: true,
  form: [
    {
      type: "Select",
      label: "vDisabled",
      model: "vDisabled",
      dataSource: [
        {
          value: 0,
          label: "false",
        },
        {
          value: 1,
          label: "true",
        },
      ],
    },
    {
      type: "Input",
      label: "受控组件",
      model: "model",
      placeholder: "演示组件",
      vDisabled({ data }) {
        return false;
      },
    },
  ],
  data: ref({
    vDisabled: 0,
    model: "",
  }),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      type: "Select",
      label: "vIf",
      model: "vIf",
      dataSource: [
        {
          value: 0,
          label: "false",
        },
        {
          value: 1,
          label: "true",
        },
      ],
    },
    {
      type: "Input",
      label: "受控组件",
      model: "model",
      vIf({ data }) {
        return data.vIf === 1;
      },
    },
  ],
  data: ref({
    vIf: 1,
    model: "",
  }),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      type: "Select",
      label: "vDisabled",
      model: "vDisabled",
      dataSource: [
        {
          value: 0,
          label: "false",
        },
        {
          value: 1,
          label: "true",
        },
      ],
    },
    {
      type: "Input",
      label: "受控组件",
      model: "model",
      placeholder: "演示组件",
      vDisabled({ data }) {
        return data.vDisabled === 1;
      },
    },
  ],
  data: ref({
    vDisabled: 0,
    model: "",
  }),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      align: "left",
      render() {
        return <el-button type="primary">left</el-button>;
      },
    },
    {
      align: "center",
      render() {
        return <el-button type="primary">center</el-button>;
      },
    },
    {
      align: "right",
      render() {
        return <el-button type="primary">right</el-button>;
      },
    },
  ],
  data: ref({}),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  row: [8],
  form: [
    {
      row: [24],
      align: "right",
      render() {
        return <el-button type="primary">left</el-button>;
      },
    },
    {
      align: "center",
      render() {
        return <el-button type="primary">center</el-button>;
      },
    },
    {
      align: "center",
      render() {
        return <el-button type="primary">right</el-button>;
      },
    },
  ],
  data: ref({}),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  wrapperCol: {
    md: 24,
    lg: 8,
  },
  form: [
    {
      align: "center",
      render() {
        return <el-button type="primary">left</el-button>;
      },
    },
    {
      align: "center",
      render() {
        return <el-button type="primary">center</el-button>;
      },
    },
    {
      align: "center",
      render() {
        return <el-button type="primary">right</el-button>;
      },
    },
  ],
  data: ref({}),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      label: "left",
      model: "left",
      renderFormItem() {
        return <el-button type="primary">left</el-button>;
      },
    },
    {
      label: "center",
      model: "center",
      renderFormItem() {
        return <el-button type="primary">center</el-button>;
      },
    },
    {
      label: "right",
      model: "right",
      renderFormItem() {
        return <el-button type="primary">right</el-button>;
      },
    },
  ],
  data: ref({
    left: "",
    center: "",
    right: "",
  }),
  createRule(create) {
    return {
      left: create.required(),
      center: create.required(),
      right: create.required(),
    };
  },
});
</script>

<template>
  <div>
    <Form ref="formRef" :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const formRef = ref();

const form = CreateForm({
  form: [
    {
      type: "Input",
      label: "姓名",
      model: "name",
      row: [12],
    },
    {
      type: "Input",
      label: "电话",
      model: "phone",
      row: [12],
    },
    {
      align: "center",
      render() {
        return (
          <el-button
            type="primary"
            onClick={() => {
              formRef.value.validate();
            }}
          >
            validate
          </el-button>
        );
      },
    },
  ],
  createRule(create, data) {
    return {
      name: create.required(),
      phone: create.required().phone(),
    };
  },
  onSuccess() {
    alert("通过");
  },
  onError() {
    alert("失败");
  },
  data: ref({
    name: "",
    phone: "",
  }),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form: [
    {
      type: "Input",
      label: "姓名",
      model: "name",
    },
    {
      children: [
        {
          type: "Input",
          label: "年龄",
          model: "age",
          row: [12],
        },
        {
          type: "Input",
          label: "性别",
          model: "sex",
          row: [12],
        },
      ],
    },
  ],
  data: ref({
    name: "",
    age: "",
    sex: "",
  }),
});
</script>

<template>
  <div>
    <Form :createOption="form" />
  </div>
  <p>data: {{ form.data }}</p>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const form = CreateForm({
  form({ data, vFor }) {
    return [
      ...vFor(data.array, (item, index) => {
        return {
          children: [
            {
              row: [18],
              type: "Input",
              label: "ip",
              model: `array.${index}.ip`,
              createRule(create, data) {
                return create.required();
              },
            },
            {
              row: [4, 2],
              render() {
                return (
                  <el-button
                    type="primary"
                    onClick={() => {
                      data.array.push({
                        ip: "",
                      });
                    }}
                  >
                    +
                  </el-button>
                );
              },
            },
          ],
        };
      }),
    ];
  },
  data: ref({
    array: [
      {
        ip: "",
      },
    ],
  }),
  labelWidth: 50,
});
</script>

<template>
  <div>
    <Form ref="formRef" :createOption="form" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";

const formRef = ref();

const form = CreateForm({
  api: "createUser",
  form: [
    {
      type: "Input",
      label: "姓名",
      model: "name",
      row: [24],
      createRule(create, data) {
        return create.required();
      },
    },
    {
      align: "center",
      render() {
        return (
          <el-button
            loading={form.loading.value}
            type="primary"
            onClick={() => {
              formRef.value.validate();
            }}
          >
            submit
          </el-button>
        );
      },
    },
  ],
  requestData(data) {
    return {
      data: {
        nickName: data.name,
        ...data,
      },
    };
  },
  onSuccess() {
    alert("成功");
  },
  data: ref({
    name: "",
  }),
});
</script>