Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n

src/components/SearchForm/advancedForm/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="advancedForm">
+    <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 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{
+  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>

src/components/Table/EditableProTable/index.vue

@@ -42,7 +42,6 @@
                       :value="ite.value"
                   />
                 </el-select>
-
                 <span v-else>{{ filterOption(item, scope) }}</span>
               </template>
 

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'}
+        },
     ]
 }
 

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>

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>