From adfcfcccef24699511c761c90b24ab6fb004de61 Mon Sep 17 00:00:00 2001
From: wuyuxi <980025512@qq.com>
Date: Sun, 12 May 2024 23:32:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=BC=B9=E5=87=BA?=
 =?UTF-8?q?=E5=B1=82=E8=A1=A8=E5=8D=95=E3=80=81=E6=90=9C=E7=B4=A2=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/AsideView.vue               | 22 +++++++---
 src/router/index.ts                    | 56 ++++++++++++++++++--------
 src/views/admin/FormAdvanced.vue       |  8 ++--
 src/views/admin/FormAdvancedModal.vue  | 49 ++++++++++++++++++++++
 src/views/admin/FormAdvancedSearch.vue | 56 ++++++++++++++++++++++++++
 src/views/admin/FormBase.vue           | 37 +++++++----------
 6 files changed, 179 insertions(+), 49 deletions(-)
 create mode 100644 src/views/admin/FormAdvancedModal.vue
 create mode 100644 src/views/admin/FormAdvancedSearch.vue

diff --git a/src/layout/AsideView.vue b/src/layout/AsideView.vue
index f34344b..e243c5c 100644
--- a/src/layout/AsideView.vue
+++ b/src/layout/AsideView.vue
@@ -57,14 +57,14 @@ const defaultItems: IMenuItem[] = [
             key: 'advanced-form',
             children: [
               {
-                title: '文件上传',
-                key: 'file-upload',
-                index: '/admin/advanced-form/file-upload'
+                title: '弹出层表单',
+                key: 'modal',
+                index: '/admin/advanced-form/modal'
               },
               {
-                title: '图片裁剪',
-                key: 'img-crop',
-                index: '/admin/advanced-form/img-crop'
+                title: '搜索表单',
+                key: 'search',
+                index: '/admin/advanced-form/search'
               }
             ]
           }
@@ -77,6 +77,16 @@ const defaultItems: IMenuItem[] = [
     icon: rawComponent(IconMenu),
     key: '2',
     children: [
+      {
+        title: '文件上传',
+        key: 'file-upload',
+        index: '/admin/file-upload'
+      },
+      {
+        title: '图片裁剪',
+        key: 'img-crop',
+        index: '/admin/img-crop'
+      },
       {
         title: '水印',
         key: 'watermark',
diff --git a/src/router/index.ts b/src/router/index.ts
index 01a6c48..012f980 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -77,14 +77,6 @@ const routes: RouteRecordRaw[] = [
             path: 'index',
             name: 'base-form-index',
             component: () => import('@/views/admin/FormBase.vue')
-          },
-          {
-            path: 'text-ellipsis',
-            name: 'text-ellipsis',
-            component: () => import('@/views/admin/TableBase.vue'),
-            meta: {
-              title: '文本省略'
-            }
           }
         ]
       },
@@ -98,23 +90,55 @@ const routes: RouteRecordRaw[] = [
         },
         children: [
           {
-            path: 'file-upload',
-            name: 'file-upload',
-            component: () => import('@/views/admin/TableBase.vue'),
+            path: 'modal',
+            name: 'modal',
+            component: () => import('@/views/admin/FormAdvancedModal.vue'),
+            meta: {
+              title: '弹出层表单'
+            }
+          },
+          {
+            path: 'search',
+            name: 'search',
+            component: () => import('@/views/admin/FormAdvancedSearch.vue'),
+            meta: {
+              title: '搜索表单'
+            }
+          },
+          {
+            path: 'step',
+            name: 'step',
+            component: () => import('@/views/admin/FormAdvancedModal.vue'),
             meta: {
-              title: '文件上传'
+              title: '分步表单'
             }
           },
           {
-            path: 'img-crop',
-            name: 'img-crop',
-            component: () => import('@/views/admin/TableBase.vue'),
+            path: 'dynamic',
+            name: 'dynamic',
+            component: () => import('@/views/admin/FormAdvancedModal.vue'),
             meta: {
-              title: '图片裁剪'
+              title: '动态增减嵌套表单'
             }
           }
         ]
       },
+      {
+        path: 'file-upload',
+        name: 'file-upload',
+        component: () => import('@/views/admin/TableBase.vue'),
+        meta: {
+          title: '文件上传'
+        }
+      },
+      {
+        path: 'img-crop',
+        name: 'img-crop',
+        component: () => import('@/views/admin/TableBase.vue'),
+        meta: {
+          title: '图片裁剪'
+        }
+      },
       {
         path: 'watermark',
         name: 'watermark',
diff --git a/src/views/admin/FormAdvanced.vue b/src/views/admin/FormAdvanced.vue
index 87ab4b8..3c81ef7 100644
--- a/src/views/admin/FormAdvanced.vue
+++ b/src/views/admin/FormAdvanced.vue
@@ -7,10 +7,10 @@ import { RouterView } from 'vue-router'
     <div class="intro">
       <div>高级表单涉及的主要组件有：</div>
       <ul>
-        <li>单行输入框</li>
-        <li>下拉选择框</li>
-        <li>日期时间选择框</li>
-        <li>切换、多选、单选、多行文本</li>
+        <li>弹出层表单</li>
+        <li>搜索表单</li>
+        <li>分步表单</li>
+        <li>动态增减嵌套表单与依赖联动</li>
       </ul>
     </div>
     <RouterView></RouterView>
diff --git a/src/views/admin/FormAdvancedModal.vue b/src/views/admin/FormAdvancedModal.vue
new file mode 100644
index 0000000..9d23de2
--- /dev/null
+++ b/src/views/admin/FormAdvancedModal.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+
+const dialogFormVisible = ref(false)
+const formLabelWidth = '140px'
+
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: ''
+})
+</script>
+
+<template>
+  <div class="main-container">
+    <el-button plain @click="dialogFormVisible = true"> Open a Form nested Dialog </el-button>
+    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
+      <el-form :model="form">
+        <el-form-item label="Promotion name" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="Zones" :label-width="formLabelWidth">
+          <el-select v-model="form.region" placeholder="Please select a zone">
+            <el-option label="Zone No.1" value="shanghai" />
+            <el-option label="Zone No.2" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">Cancel</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.main-container {
+  background-color: #fff;
+  padding: 24px;
+}
+</style>
diff --git a/src/views/admin/FormAdvancedSearch.vue b/src/views/admin/FormAdvancedSearch.vue
new file mode 100644
index 0000000..360963d
--- /dev/null
+++ b/src/views/admin/FormAdvancedSearch.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+
+const formRef = ref<FormInstance>()
+const initFormData = {
+  user: '',
+  region: '',
+  date: ''
+}
+
+const formInline = reactive(initFormData)
+
+const onReset = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+</script>
+
+<template>
+  <el-form ref="formRef" :inline="true" :model="formInline" class="demo-form-inline">
+    <el-form-item label="Approved by" prop="user">
+      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
+    </el-form-item>
+    <el-form-item label="Activity zone" prop="region">
+      <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
+        <el-option label="Zone one" value="shanghai" />
+        <el-option label="Zone two" value="beijing" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="Activity time" prop="date">
+      <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onReset">重置</el-button>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style>
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>
diff --git a/src/views/admin/FormBase.vue b/src/views/admin/FormBase.vue
index 877aa38..eb4f77e 100644
--- a/src/views/admin/FormBase.vue
+++ b/src/views/admin/FormBase.vue
@@ -5,8 +5,7 @@ import type { FormInstance } from 'element-plus'
 const initForm = {
   name: '',
   region: '',
-  date1: '',
-  date2: '',
+  date: '',
   delivery: false,
   type: [],
   resource: '',
@@ -36,35 +35,27 @@ const resetForm = (formEl: FormInstance | undefined) => {
       </ul>
     </div>
     <el-form ref="ruleFormRef" :model="form" label-width="auto" style="max-width: 600px">
-      <el-form-item label="Activity name">
+      <el-form-item label="Activity name" prop="name">
         <el-input v-model="form.name" />
       </el-form-item>
-      <el-form-item label="Activity zone">
+      <el-form-item label="Activity zone" prop="region">
         <el-select v-model="form.region" placeholder="please select your zone">
           <el-option label="上海" value="shanghai" />
           <el-option label="北京" value="beijing" />
         </el-select>
       </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker
-            v-model="form.date1"
-            type="date"
-            placeholder="Pick a date"
-            style="width: 100%"
-          />
-        </el-col>
-        <el-col :span="2" class="text-center">
-          <span class="text-gray-500">-</span>
-        </el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
-        </el-col>
+      <el-form-item label="Activity date" prop="date">
+        <el-date-picker
+          v-model="form.date"
+          type="date"
+          placeholder="Pick a date"
+          style="width: 100%"
+        />
       </el-form-item>
-      <el-form-item label="Instant delivery">
+      <el-form-item label="Instant delivery" prop="delivery">
         <el-switch v-model="form.delivery" />
       </el-form-item>
-      <el-form-item label="Activity type">
+      <el-form-item label="Activity type" prop="type">
         <el-checkbox-group v-model="form.type">
           <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox>
           <el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox>
@@ -74,13 +65,13 @@ const resetForm = (formEl: FormInstance | undefined) => {
           </el-checkbox>
         </el-checkbox-group>
       </el-form-item>
-      <el-form-item label="Resources">
+      <el-form-item label="Resources" prop="resource">
         <el-radio-group v-model="form.resource">
           <el-radio value="Sponsor">Sponsor</el-radio>
           <el-radio value="Venue">Venue</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="Activity form">
+      <el-form-item label="Activity form" prop="desc">
         <el-input v-model="form.desc" type="textarea" />
       </el-form-item>
       <el-button type="primary" @click="onSubmit">提交</el-button>