feat: 添加表单示例，可通过JSON格式配置生成 (#999)

* feat: 添加表单示例，可通过`JSON`格式配置生成

src/views/components/check-card.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 // https://plus-pro-components.com/components/check-card-group.html
-import { PlusCheckCardGroup } from "plus-pro-components";
 import "plus-pro-components/es/components/check-card-group/style/css";
+import { PlusCheckCardGroup } from "plus-pro-components";
 
 defineOptions({
   name: "CheckCard"

src/views/schema-form/form/base.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/form.html
+import "plus-pro-components/es/components/form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusForm
+} from "plus-pro-components";
+
+const state = ref<FieldValues>({
+  status: "1",
+  name: "",
+  rate: 4,
+  progress: 100,
+  switch: true,
+  time: new Date().toString(),
+  endTime: []
+});
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: "请输入名称"
+    }
+  ]
+};
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "我是名称"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "执行进度",
+    width: 200,
+    prop: "progress"
+  },
+  {
+    label: "评分",
+    width: 200,
+    prop: "rate",
+    valueType: "rate"
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      // @ts-expect-error
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const handleChange = (values: FieldValues, prop: PlusColumn) => {
+  console.log(values, prop, "change");
+};
+const handleSubmit = (values: FieldValues) => {
+  console.log(values, "Submit");
+};
+const handleSubmitError = (err: any) => {
+  console.log(err, "err");
+};
+const handleReset = () => {
+  console.log("handleReset");
+};
+</script>
+
+<template>
+  <PlusForm
+    v-model="state"
+    class="w-[450px] m-auto"
+    :columns="columns"
+    :rules="rules"
+    label-position="right"
+    @change="handleChange"
+    @submit="handleSubmit"
+    @submit-error="handleSubmitError"
+    @reset="handleReset"
+  />
+</template>

src/views/schema-form/form/dialog.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/dialog-form.html
+import "plus-pro-components/es/components/dialog-form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusDialogForm
+} from "plus-pro-components";
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "要求",
+    prop: "demand",
+    valueType: "checkbox",
+    options: [
+      {
+        label: "四六级",
+        value: "0"
+      },
+      {
+        label: "计算机二级证书",
+        value: "1"
+      },
+      {
+        label: "普通话证书",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      // @ts-expect-error
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const visible = ref(false);
+const values = ref<FieldValues>({});
+
+const handleOpen = () => {
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <el-button @click="handleOpen">打开弹窗表单</el-button>
+    <PlusDialogForm
+      v-model:visible="visible"
+      v-model="values"
+      :form="{ columns }"
+    />
+  </div>
+</template>

src/views/schema-form/form/drawer.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/drawer-form.html
+import "plus-pro-components/es/components/drawer-form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusDrawerForm
+} from "plus-pro-components";
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "要求",
+    prop: "demand",
+    valueType: "checkbox",
+    options: [
+      {
+        label: "四六级",
+        value: "0"
+      },
+      {
+        label: "计算机二级证书",
+        value: "1"
+      },
+      {
+        label: "普通话证书",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      // @ts-expect-error
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const visible = ref(false);
+const values = ref<FieldValues>({});
+
+const handleOpen = () => {
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <el-button @click="handleOpen">打开抽屉表单</el-button>
+    <PlusDrawerForm
+      v-model:visible="visible"
+      v-model="values"
+      :form="{ columns }"
+    />
+  </div>
+</template>

src/views/schema-form/form/search.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/search.html
+import "plus-pro-components/es/components/search/style/css";
+import { type PlusColumn, PlusSearch } from "plus-pro-components";
+
+const state = ref({
+  status: "0",
+  time: new Date().toString()
+});
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择",
+      endPlaceholder: "请选择"
+    }
+  },
+  {
+    label: "奖励",
+    prop: "price"
+  },
+  {
+    label: "提成",
+    prop: "percentage"
+  }
+];
+
+const handleChange = (values: any) => {
+  console.log(values, "change");
+};
+const handleSearch = (values: any) => {
+  console.log(values, "search");
+};
+const handleRest = () => {
+  console.log("handleRest");
+};
+</script>
+
+<template>
+  <PlusSearch
+    v-model="state"
+    :columns="columns"
+    :show-number="2"
+    label-width="80"
+    label-position="right"
+    @change="handleChange"
+    @search="handleSearch"
+    @reset="handleRest"
+  />
+</template>

src/views/schema-form/form/steps.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/steps-form.html
+import "plus-pro-components/es/components/steps-form/style/css";
+import { PlusStepsForm } from "plus-pro-components";
+
+const stepForm = ref([
+  {
+    title: "第一步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      modelValue: {},
+      columns: [
+        {
+          label: "名称",
+          width: 120,
+          prop: "name",
+          valueType: "copy",
+          tooltip: "名称最多显示6个字符"
+        },
+        {
+          label: "状态",
+          width: 120,
+          prop: "status",
+          valueType: "select",
+          options: [
+            {
+              label: "未解决",
+              value: "0",
+              color: "red"
+            },
+            {
+              label: "已解决",
+              value: "1",
+              color: "blue"
+            },
+            {
+              label: "解决中",
+              value: "2",
+              color: "yellow"
+            },
+            {
+              label: "失败",
+              value: "3",
+              color: "red"
+            }
+          ]
+        }
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称"
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: "第二步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      labelWidth: "100",
+      modelValue: {},
+      columns: [
+        {
+          label: "标签",
+          width: 120,
+          prop: "tag"
+        },
+        {
+          label: "执行进度",
+          width: 200,
+          prop: "progress"
+        },
+        {
+          label: "评分",
+          width: 200,
+          prop: "rate",
+          valueType: "rate"
+        },
+        {
+          label: "是否显示",
+          width: 100,
+          prop: "switch",
+          valueType: "switch"
+        }
+      ],
+      rules: {
+        tag: [
+          {
+            required: true,
+            message: "请输入标签"
+          }
+        ],
+        progress: [
+          {
+            required: true,
+            message: "请输入执行进度"
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: "第三步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      modelValue: {},
+      columns: [
+        {
+          label: "时间",
+          prop: "time",
+          valueType: "date-picker"
+        },
+        {
+          label: "要求",
+          prop: "demand",
+          valueType: "checkbox",
+          options: [
+            {
+              label: "四六级",
+              value: "0"
+            },
+            {
+              label: "计算机二级证书",
+              value: "1"
+            },
+            {
+              label: "普通话证书",
+              value: "2"
+            }
+          ]
+        },
+        {
+          label: "奖励",
+          prop: "price"
+        },
+        {
+          label: "提成",
+          prop: "percentage"
+        },
+        {
+          label: "说明",
+          prop: "desc",
+          valueType: "textarea",
+          fieldProps: {
+            maxlength: 10,
+            showWordLimit: true,
+            autosize: { minRows: 2, maxRows: 4 }
+          }
+        }
+      ],
+      rules: {
+        time: [
+          {
+            required: true,
+            trigger: "change",
+            message: "请选择时间"
+          }
+        ],
+        demand: [
+          {
+            required: true,
+            trigger: "change",
+            message: "请选择要求"
+          }
+        ]
+      }
+    }
+  }
+]);
+
+const active = ref(1);
+
+const next = (actives: number, values: any) => {
+  active.value = actives;
+  console.log(active, values, stepForm.value);
+};
+</script>
+
+<template>
+  <PlusStepsForm
+    v-model="active"
+    simple
+    class="w-[800px] m-auto"
+    :data="stepForm"
+    align-center
+    @next="next"
+  />
+</template>

src/views/schema-form/index.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./list";
+
+defineOptions({
+  name: "SchemaForm"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never" :body-style="{ height: 'calc(100vh - 180px)' }">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          JSON 格式配置表单，采用优秀开源的
+          <el-link
+            href="https://plus-pro-components.com/components/form.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            PlusProComponents
+          </el-link>
+          ，维护整体表单只需操作 columns 配置即可
+        </span>
+      </div>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>

src/views/schema-form/list.tsx

@@ -0,0 +1,41 @@
+import Base from "./form/base.vue";
+import Dialog from "./form/dialog.vue";
+import Drawer from "./form/drawer.vue";
+import Steps from "./form/steps.vue";
+import Search from "./form/search.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/schema-form/form/${val}.vue`;
+
+export const list = [
+  {
+    key: "base",
+    content: rendContent("base"),
+    title: "基础表单",
+    component: Base
+  },
+  {
+    key: "dialog",
+    content: rendContent("dialog"),
+    title: "弹框表单",
+    component: Dialog
+  },
+  {
+    key: "drawer",
+    content: rendContent("drawer"),
+    title: "抽屉表单",
+    component: Drawer
+  },
+  {
+    key: "steps",
+    content: rendContent("steps"),
+    title: "分步表单",
+    component: Steps
+  },
+  {
+    key: "search",
+    content: rendContent("search"),
+    title: "搜索表单",
+    component: Search
+  }
+];