feat: 分步表单

src/lang/modules/enUS.ts

@@ -7,7 +7,7 @@ export default {
     ["custom-table"]: "custom table",
     ["form-management"]: "form management",
     ["common-form"]: "common form",
-    ["dynamic-form"]: "dynamic form",
+    ["step-form"]: "step form",
     ["multilevel-menu"]: "multilevel menu",
     ["second-menu-1"]: "second-menu-1",
     ["second-menu-2"]: "second-menu-2",

src/lang/modules/zhCN.ts

@@ -7,7 +7,7 @@ export default {
     ["custom-table"]: "自定义列表",
     ["form-management"]: "表单管理",
     ["common-form"]: "普通表单",
-    ["dynamic-form"]: "动态表单",
+    ["step-form"]: "分步表单",
     ["multilevel-menu"]: "多级菜单",
     ["second-menu-1"]: "二级菜单-1",
     ["second-menu-2"]: "二级菜单-2",

src/router/route.ts

@@ -143,11 +143,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             }
           },
           {
-            path: "/form-management/dynamic-form",
+            path: "/form-management/step-form",
-            name: "dynamic-form",
+            name: "step-form",
-            component: () => import("@/views/form-management/dynamic-form/dynamic-form.vue"),
+            component: () => import("@/views/form-management/step-form/step-form.vue"),
             meta: {
-              title: "dynamic-form",
+              title: "step-form",
               link: "",
               hide: false,
               keepAlive: true,

src/views/form-management/dynamic-form/dynamic-form.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="dc-page">动态表单</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>

src/views/form-management/step-form/step-form.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="dc-page container">
+    <a-row>
+      <a-col :span="12" :offset="6">
+        <a-steps :current="currentStep" line-less>
+          <a-step description="创建渠道活动">基本信息</a-step>
+          <a-step description="完善活动渠道信息">活动渠道</a-step>
+          <a-step description="创建成功">完成创建</a-step>
+        </a-steps>
+      </a-col>
+    </a-row>
+    <a-row class="margin-top">
+      <a-col :span="8" :offset="8">
+        <a-form ref="formRef" :model="form" :rules="rules" @submit="handleSubmit">
+          <a-form-item field="name" label="活动名称">
+            <a-input v-model="form.name" placeholder="请输入活动名称" />
+          </a-form-item>
+          <a-form-item field="type" label="渠道类型">
+            <a-select v-model="form.type" placeholder="请选择渠道类型" allow-clear>
+              <a-option value="1">gitee</a-option>
+              <a-option value="2">github</a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item field="date" label="推广时间">
+            <a-date-picker v-model="form.date" placeholder="请选择推广时间" style="width: 100%" />
+          </a-form-item>
+          <a-form-item field="address" label="推广地址">
+            <a-input v-model="form.address" placeholder="请输入推广地址" />
+            <template #extra>
+              <div>从哪些渠道了解到该项目，例如gitee：https://gitee.com/wang_fan_w/dc-admin</div>
+            </template>
+          </a-form-item>
+          <a-form-item>
+            <a-button html-type="submit" type="primary">下一步</a-button>
+          </a-form-item>
+        </a-form>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+const currentStep = ref(1);
+const form = ref({
+  name: "",
+  type: null,
+  date: "",
+  address: ""
+});
+const rules = ref({
+  name: [
+    {
+      required: true,
+      message: "请输入活动名称"
+    }
+  ],
+  type: [
+    {
+      required: true,
+      message: "请选择渠道类型"
+    }
+  ],
+  date: [
+    {
+      required: true,
+      message: "请选择推广时间"
+    }
+  ],
+  address: [
+    {
+      required: true,
+      message: "请输入推广地址"
+    }
+  ]
+});
+const formRef = ref();
+interface ISubmit {
+  values: Record<string, any>;
+  errors: Record<string, any> | undefined;
+}
+const handleSubmit = ({ values, errors }: ISubmit) => {
+  console.log("values:", values, "\nerrors:", errors);
+  if (errors) return;
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 80px 0;
+}
+.margin-top {
+  margin-top: 80px;
+}
+</style>