Form & Table & Dialog

<template>
  <Table :createOption="tableOption">
    <Dialog ref="dialogRef">
      <Form :createOption="form" />
    </Dialog>
  </Table>
</template>

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

const dialogRef = ref();

const form = CreateForm({
  api: "createUser",
  form: [
    {
      type: "Input",
      label: "昵称",
      model: "name",
      row: [24],
    },
    {
      type: "Input",
      label: "年龄",
      model: "age",
    },
  ],
  data: ref({
    name: "",
    age: "",
  }),
  labelWidth: 60,
  createRule(create) {
    return {
      name: create.required(),
      age: create.required(),
    };
  },
});

const tableOption = CreateTable({
  api: "list",
  autoRun: true,
  column: [
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "age",
      label: "年龄",
      render(text) {
        return text || "-";
      },
    },
    {
      render(text, data) {
        return (
          <>
            <el-button
              size="small"
              onClick={() => {
                dialogRef.value.open({
                  title: "title",
                  disabled: true,
                });
                form.data.value = data;
              }}
            >
              详情
            </el-button>
            <el-button
              type="success"
              size="small"
              onClick={() => {
                dialogRef.value.open({
                  title: "title",
                });
                form.data.value = data;
              }}
            >
              编辑
            </el-button>
          </>
        );
      },
    },
  ],
});
</script>