From 5b463cb88bbffa827c62a747401bbbbc39258519 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Fri, 16 Sep 2022 08:52:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E6=94=B6=E7=BC=A9=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SearchForm/advancedForm/index.vue         | 29 +++++++++++++++++++
 src/router/modules/from.ts                    |  8 ++++-
 .../{ => validateForm}/components/Upload.vue  |  0
 .../index.vue}                                |  0
 src/views/other/markDown/index.vue            |  5 ++--
 5 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SearchForm/advancedForm/index.vue
 rename src/views/form/{ => validateForm}/components/Upload.vue (100%)
 rename src/views/form/{validateForm.vue => validateForm/index.vue} (100%)

diff --git a/src/components/SearchForm/advancedForm/index.vue b/src/components/SearchForm/advancedForm/index.vue
new file mode 100644
index 0000000..ca24d19
--- /dev/null
+++ b/src/components/SearchForm/advancedForm/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="advancedForm">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="审批人">
+        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域">
+        <el-select v-model="formInline.region" placeholder="活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+.advancedForm{
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/from.ts b/src/router/modules/from.ts
index 42e7ca2..bd8ae7b 100644
--- a/src/router/modules/from.ts
+++ b/src/router/modules/from.ts
@@ -16,10 +16,16 @@ const formRouter = {
     children: [
         {
             path: 'validateForm',
-            component: () => import('@/views/form/validateForm.vue'),
+            component: () => import('@/views/form/validateForm/index.vue'),
             name: 'validate-form',
             meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
         },
+        {
+            path: 'advancedForm',
+            component: () => import('@/views/form/advancedForm/index.vue'),
+            name: 'advanced-form',
+            meta: { title: '可收缩 Form', keepAlive: true , icon: 'MenuIcon'}
+        },
     ]
 }
 
diff --git a/src/views/form/components/Upload.vue b/src/views/form/validateForm/components/Upload.vue
similarity index 100%
rename from src/views/form/components/Upload.vue
rename to src/views/form/validateForm/components/Upload.vue
diff --git a/src/views/form/validateForm.vue b/src/views/form/validateForm/index.vue
similarity index 100%
rename from src/views/form/validateForm.vue
rename to src/views/form/validateForm/index.vue
diff --git a/src/views/other/markDown/index.vue b/src/views/other/markDown/index.vue
index bebba01..4c75d08 100644
--- a/src/views/other/markDown/index.vue
+++ b/src/views/other/markDown/index.vue
@@ -14,9 +14,9 @@
   </u-container-layout>
 </template>
 <script lang="ts">
-//
 // https://www.jianshu.com/p/0b06128a6117
 import { defineComponent } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import MdEditor from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
@@ -28,6 +28,7 @@ export default defineComponent({
   methods: {
     submit() {
       console.log('this.text', this.text)
+      ElMessage.success(`提交数据:${this.text}`)
     },
   },
 })
@@ -40,7 +41,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   .md {
-    height: 600px;
+    height:100%;
   }
 }
 </style>

From a67e302453ff4c03f0057e4ec9e732c6189a7f89 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Sun, 18 Sep 2022 12:17:47 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E6=94=B6=E7=BC=A9=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SearchForm/advancedForm/index.vue         | 123 +++++++++++++++---
 .../Table/EditableProTable/index.vue          |   1 -
 src/views/form/advancedForm/index.vue         | 109 ++++++++++++++++
 3 files changed, 216 insertions(+), 17 deletions(-)
 create mode 100644 src/views/form/advancedForm/index.vue

diff --git a/src/components/SearchForm/advancedForm/index.vue b/src/components/SearchForm/advancedForm/index.vue
index ca24d19..2df8d00 100644
--- a/src/components/SearchForm/advancedForm/index.vue
+++ b/src/components/SearchForm/advancedForm/index.vue
@@ -1,29 +1,120 @@
 <template>
   <div class="advancedForm">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
-      <el-form-item label="审批人">
-        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-      </el-form-item>
-      <el-form-item label="活动区域">
-        <el-select v-model="formInline.region" placeholder="活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
-      </el-form-item>
+    <el-form
+        ref="ruleFormRef"
+        :inline="true"
+        :label-position="'right'"
+        :model="formInline"
+        class="form-inline">
+      <el-row
+          :class="{
+            'not-show':byHeight&&!isExpand
+          }"
+          :gutter="gutterWidth">
+        <el-col :span="item.span"
+                v-for="item,index in columns"
+                :key="item.name"
+                v-show="byHeight?true:(index< (showRow*3)||isExpand)">
+          <el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type==='input'">
+            <el-input
+                clearable
+                v-model="formInline[item.name]" :placeholder="item.placeholder" />
+          </el-form-item>
+          <template v-else-if="item.type==='date'">
+            <el-form-item :label="item.title" :label-width="labelWidth" >
+              <el-date-picker
+                  value-format="YYYY-MM-DD"
+                  v-model="formInline[item.name]"
+                  type="date"
+                  :placeholder="item.placeholder"
+              />
+            </el-form-item>
+          </template>
+
+        </el-col>
+      </el-row>
     </el-form>
+    <div class="search-btn">
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button  @click="resetForm(ruleFormRef)">重置</el-button>
+      <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+        <arrow-down v-if="!isExpand" />
+        <arrow-up v-else /> </el-icon
+      ></el-button>
+    </div>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {reactive, ref} from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+const ruleFormRef = ref<FormInstance>()
+let props = defineProps({
+  // 宽度
+  labelWidth: {
+    default: "100px",
+  },
+  gutterWidth: {
+    type: Number,
+    default: 24,
+  },
+  showRow:{
+    type: Number,
+    default: 1,
+  },
+  columns:{
+    type:Array,
+    default:()=>[]
+  },
+  byHeight:{
+    type:Boolean,
+    default:false
+  }
+})
+const emit = defineEmits(['submit','reset'])
+// 收缩展开
+const isExpand = ref(false)
 
+const formInline = reactive({
+})
+
+for(let item of props.columns){
+  formInline[item.name] = null
+}
+
+const onSubmit = () => {
+  emit('submit',formInline)
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  console.log('formEl',formEl)
+  if (!formEl) return
+  formEl.resetFields()
+  const keys = Object.keys(formInline);
+  keys.forEach(key => {
+    formInline[key] = null;
+  });
+  emit("reset", formInline);
+}
 </script>
 
 <style lang="scss" scoped>
 .advancedForm{
-  width: 100%;
-  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .form-inline{
+    flex: 1;
+  }
+  .el-form--inline .el-form-item{
+    width: 100%;
+    margin-right: 10px;
+  }
+  .search-btn{
+    margin-left: 40px;
+  }
+  .not-show{
+    height: 40px;
+    overflow: hidden;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Table/EditableProTable/index.vue b/src/components/Table/EditableProTable/index.vue
index 783fceb..52152bf 100644
--- a/src/components/Table/EditableProTable/index.vue
+++ b/src/components/Table/EditableProTable/index.vue
@@ -42,7 +42,6 @@
                       :value="ite.value"
                   />
                 </el-select>
-
                 <span v-else>{{ filterOption(item, scope) }}</span>
               </template>
 
diff --git a/src/views/form/advancedForm/index.vue b/src/views/form/advancedForm/index.vue
new file mode 100644
index 0000000..6559d85
--- /dev/null
+++ b/src/views/form/advancedForm/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="advancedForm">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span style="margin-right: 100px">收缩表单 通过v-show来控制显隐藏</span>
+          <el-button @click="showRow(2)" type="primary" link>显示两行</el-button>
+          <el-button @click="showRow(1)" type="primary" link>显示一行</el-button>
+        </div>
+      </template>
+      <AdvancedForm :columns="columns" @submit="onSubmit" :showRow="row"/>
+    </el-card>
+
+    <el-card class="box-card" style="margin-top: 20px">
+      <template #header>
+        <div class="card-header">
+          <span>收缩表单 通过高度来控制显隐藏</span>
+        </div>
+      </template>
+      <AdvancedForm :columns="columns" @submit="onSubmit" :byHeight="true"/>
+
+    </el-card>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AdvancedForm from "@/components/SearchForm/advancedForm/index.vue"
+import {reactive, ref} from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+let columns = [
+    {
+      type: 'input',
+      name:"name1",
+      title:'字段1',
+      placeholder: "字段1",
+      span: 8,
+    },
+    {
+      type: 'date',
+      name:"name2",
+      title:'字段2',
+      placeholder: "字段2",
+      span: 8,
+    },
+    {
+      type: 'input',
+      name:"name3",
+      title:'字段3',
+      placeholder: "字段3",
+      span: 8,
+    },
+    {
+      type: 'input',
+      name:"name4",
+      title:'字段4',
+      placeholder: "字段4",
+      span: 8,
+    },
+  {
+    type: 'input',
+    name:"name5",
+    title:'字段5',
+    placeholder: "字段5",
+    span: 8,
+  },{
+    type: 'input',
+    name:"name6",
+    title:'字段6',
+    placeholder: "字段6",
+    span: 8,
+  },{
+    type: 'input',
+    name:"name7",
+    title:'字段7',
+    placeholder: "字段7",
+    span: 8,
+  },
+  {
+    type: 'input',
+    name:"name8",
+    title:'字段8',
+    placeholder: "字段8",
+    span: 8,
+  },{
+    type: 'input',
+    name:"name9",
+    title:'字段9',
+    placeholder: "字段9",
+    span: 8,
+  }
+]
+const formValue= ref({})
+const row = ref(1)
+const onSubmit = (formInline) => {
+  formValue.value = formInline
+  ElMessage.success(JSON.stringify(formInline))
+}
+const showRow = (number)=>{
+  row.value = number
+}
+
+</script>
+
+<style lang="scss" scoped>
+.advancedForm{
+  padding: 20px;
+}
+</style>