From ceef194a6e180301af1bcba26213746d391b8c0b Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Tue, 18 Jun 2024 00:01:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E6=AD=A5=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/modules/enUS.ts                      |  2 +-
 src/lang/modules/zhCN.ts                      |  2 +-
 src/router/route.ts                           |  8 +-
 .../dynamic-form/dynamic-form.vue             |  7 --
 .../form-management/step-form/step-form.vue   | 94 +++++++++++++++++++
 5 files changed, 100 insertions(+), 13 deletions(-)
 delete mode 100644 src/views/form-management/dynamic-form/dynamic-form.vue
 create mode 100644 src/views/form-management/step-form/step-form.vue

diff --git a/src/lang/modules/enUS.ts b/src/lang/modules/enUS.ts
index 7b08550..162dd64 100644
--- a/src/lang/modules/enUS.ts
+++ b/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",
diff --git a/src/lang/modules/zhCN.ts b/src/lang/modules/zhCN.ts
index cd9a366..bac8da4 100644
--- a/src/lang/modules/zhCN.ts
+++ b/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",
diff --git a/src/router/route.ts b/src/router/route.ts
index 1b70f1e..1bc9c3e 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -143,11 +143,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             }
           },
           {
-            path: "/form-management/dynamic-form",
-            name: "dynamic-form",
-            component: () => import("@/views/form-management/dynamic-form/dynamic-form.vue"),
+            path: "/form-management/step-form",
+            name: "step-form",
+            component: () => import("@/views/form-management/step-form/step-form.vue"),
             meta: {
-              title: "dynamic-form",
+              title: "step-form",
               link: "",
               hide: false,
               keepAlive: true,
diff --git a/src/views/form-management/dynamic-form/dynamic-form.vue b/src/views/form-management/dynamic-form/dynamic-form.vue
deleted file mode 100644
index f702918..0000000
--- a/src/views/form-management/dynamic-form/dynamic-form.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div class="dc-page">动态表单</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/form-management/step-form/step-form.vue b/src/views/form-management/step-form/step-form.vue
new file mode 100644
index 0000000..978020c
--- /dev/null
+++ b/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>