特性: 新增表单

src/components/SearchForm/advancedForm/index.vue

@@ -5,21 +5,24 @@
       :inline="true"
       :label-position="'right'"
       :model="formInline"
-        class="form-inline">
+      class="form-inline"
+    >
       <el-row
         :class="{
-            'not-show':byHeight&&!isExpand
+          'not-show': byHeight && !isExpand,
         }"
-          :gutter="gutterWidth">
+        :gutter="gutterWidth"
-        <el-col :span="item.span"
+      >
-                v-for="item,index in columns"
+        <el-col
+          :span="item.span"
+          v-for="(item, index) in columns"
           :key="item.name"
-                v-show="byHeight?true:(index< (showRow*3)||isExpand)">
+          v-show="byHeight ? true : index < showRow * 3 || isExpand"
+        >
           <el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type === 'input'">
-            <el-input
+            <el-input clearable v-model="formInline[item.name]" :placeholder="item.placeholder" />
-                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
@@ -36,7 +39,9 @@
     <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>
+      <el-button link type="primary" @click="isExpand = !isExpand"
+        >{{ isExpand ? '合并' : '展开'
+        }}<el-icon>
           <arrow-down v-if="!isExpand" />
           <arrow-up v-else /> </el-icon
       ></el-button>
@@ -51,7 +56,7 @@ const ruleFormRef = ref<FormInstance>()
   let props = defineProps({
     // 宽度
     labelWidth: {
-    default: "100px",
+      default: '100px',
     },
     gutterWidth: {
       type: Number,
@@ -63,19 +68,18 @@ let props = defineProps({
     },
     columns: {
       type: Array,
-    default:()=>[]
+      default: () => [],
     },
     byHeight: {
       type: Boolean,
-    default:false
+      default: false,
-  }
+    },
   })
   const emit = defineEmits(['submit', 'reset'])
   // 收缩展开
   const isExpand = ref(false)
 
-const formInline = reactive({
+  const formInline = reactive({})
-})
 
   for (let item of props.columns) {
     formInline[item.name] = null
@@ -89,11 +93,11 @@ const resetForm = (formEl: FormInstance | undefined) => {
     console.log('formEl', formEl)
     if (!formEl) return
     formEl.resetFields()
-  const keys = Object.keys(formInline);
+    const keys = Object.keys(formInline)
-  keys.forEach(key => {
+    keys.forEach((key) => {
-    formInline[key] = null;
+      formInline[key] = null
-  });
+    })
-  emit("reset", formInline);
+    emit('reset', formInline)
   }
 </script>
 

src/components/SearchForm/components/BaseFormItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-form-item :label="config?.label" v-if="config.type === 'input'" style="width: 100%">
+    <el-input v-model="value" v-bind="$attrs" />
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'select'" style="width: 100%">
+    <el-select v-model="value" v-bind="$attrs" style="width: 100%">
+      <el-option
+        v-for="item in config.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'date-picker'" style="width: 100%">
+    <el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'cascader'" style="width: 100%">
+    <el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
+  </el-form-item>
+  <el-form-item :label="config?.label" v-if="config.type === 'time-select'" style="width: 100%">
+    <el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  type ConfigType = {
+    modelValue?: any
+    config?: any
+  }
+
+  const props = defineProps<ConfigType>()
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: any): void
+  }>()
+
+  const value = computed({
+    get() {
+      return props?.modelValue
+    },
+    set(value) {
+      emits('update:modelValue', value)
+    },
+  })
+</script>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  }
+</script>
+<style lang="less" scoped></style>

src/components/SearchForm/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="advancedForm">
+    <el-form
+      ref="ruleFormRef"
+      :inline="true"
+      :label-position="'right'"
+      :model="formParams"
+      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"
+        >
+          <BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
+        </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" v-if="columns.length > 3">
+        {{ isExpand ? '合并' : '展开'
+        }}<el-icon>
+          <arrow-down v-if="!isExpand" />
+          <arrow-up v-else /> </el-icon
+      ></el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, reactive, ref } from 'vue'
+  import type { FormInstance } from 'element-plus'
+  import BaseFormItem from './components/BaseFormItem.vue'
+  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 formParams = reactive({})
+
+  const initFormParams = () => {
+    for (let item of props.columns) {
+      formParams[item.name] = item?.value
+    }
+  }
+
+  // 进行遍历获取参数
+  const getFormParams = () => {
+    let searchParams = {}
+    for (let item of props.columns) {
+      searchParams[item.name] = item?.value
+    }
+    return searchParams
+  }
+
+  onMounted(() => {
+    initFormParams()
+  })
+
+  // 获取参数进行组装为 obj
+  const onSubmit = () => {
+    let searchParams = getFormParams()
+    emit('submit', searchParams)
+  }
+
+  // 重置参数
+  const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    const keys = Object.keys(formParams)
+    keys.forEach((key) => {
+      let itemColums = props.columns.find((item) => item.name === key)
+      itemColums.value = formParams[key]
+    })
+    let searchParams = getFormParams()
+    emit('reset', searchParams)
+  }
+</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/PropTable/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="zb-pro-table">
     <div class="header">
-      <el-form :inline="true"
+      <el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
-               class="search-form"
-               :model="formInline"  ref="ruleFormRef" >
         <template v-for="(item, index) in formSearchData" :key="index">
           <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
             <template v-if="item.valueType === 'input'">
@@ -12,7 +10,9 @@
             <template v-if="item.valueType === 'select'">
               <el-select
                 style="width: 100%"
-                  v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
+                v-model="formInline[item.name]"
+                :placeholder="`请选择${item.label}`"
+              >
                 <el-option
                   v-for="ite in item.options"
                   :key="ite.value"
@@ -27,7 +27,9 @@
       <div class="search">
         <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
         <el-button @click="reset(ruleFormRef)">重置</el-button>
-        <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+        <el-button link type="primary" @click="isExpand = !isExpand"
+          >{{ isExpand ? '合并' : '展开'
+          }}<el-icon>
             <arrow-down v-if="!isExpand" />
             <arrow-up v-else /> </el-icon
         ></el-button>
@@ -220,7 +222,7 @@ const deleteAction = (row) => {
       box-shadow: 0 0 12px rgb(0 0 0 / 5%);
       min-height: 300px;
       .operator {
-      margin-bottom: 15px
+        margin-bottom: 15px;
       }
       .table {
         position: relative;

src/components/Table/PropTable/index1.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="zb-pro-table">
+    <div class="header">
+      <el-form :inline="true"
+               class="search-form"
+               :model="formInline"  ref="ruleFormRef" >
+        <template v-for="(item, index) in formSearchData" :key="index">
+          <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
+            <template v-if="item.valueType === 'input'">
+              <el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
+            </template>
+            <template v-if="item.valueType === 'select'">
+              <el-select
+                  style="width: 100%"
+                  v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
+                <el-option
+                    v-for="ite in item.options"
+                    :key="ite.value"
+                    :label="ite.label"
+                    :value="ite.value"
+                />
+              </el-select>
+            </template>
+          </el-form-item>
+        </template>
+      </el-form>
+      <div class="search">
+        <el-button type="primary" @click="onSubmit"  :icon="Search">查询</el-button>
+        <el-button @click="reset(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>
+    <!----------底部---------------------->
+    <div class="footer">
+      <!-----------工具栏操作工具----------------->
+      <div class="operator">
+        <slot name="btn"></slot>
+      </div>
+      <!-- ------------表格--------------->
+      <div class="table">
+        <el-table
+            class="zb-table"
+            v-loading="loading"
+            @selection-change="(val) => emit('selection-change', val)"
+            :data="list"
+            :border="true"
+        >
+          <template v-for="item in columns">
+            <el-table-column
+                v-if="item.type"
+                :type="item.type"
+                :width="item.width"
+                :align="item.align!=null?item.align:'center'"
+                :fixed="item.fixed"
+                :label="item.label"
+            />
+            <el-table-column
+                v-else
+                :prop="item.name"
+                :width="item.width"
+                :align="item.align!=null?item.align:'center'"
+                :fixed="item.fixed"
+                :label="item.label"
+            >
+              <template #default="scope">
+                <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
+                <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </div>
+      <!-- ------------分页--------------->
+      <div class="pagination">
+        <el-pagination
+            v-model:currentPage="currentPage1"
+            :page-size="10"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="data.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import {Search } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+const ruleFormRef = ref<FormInstance>()
+const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
+let props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentPage1 = ref(1)
+// 收缩展开
+const isExpand = ref(false)
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  currentPage1.value = val
+}
+
+const list = computed(() => {
+  let arr = JSON.parse(JSON.stringify(props.data))
+  return arr.splice((currentPage1.value - 1) * 10, 10)
+})
+
+const listLoading = ref(false)
+const confirmEdit = (row) => {
+  row.edit = false
+}
+const cancelEdit = (row) => {
+  row.edit = false
+}
+
+import { reactive } from 'vue'
+
+let obj = {}
+let search = []
+for (let item of props.columns) {
+  if (item.inSearch) {
+    obj[item.name] = null
+  }
+  if (item.inSearch) {
+    search.push(item)
+  }
+}
+const formSearchData = ref(search)
+const formInline = reactive(obj)
+
+const onSubmit = () => {
+  console.log('submit!', formInline)
+  emit('onSubmit', formInline)
+}
+
+const reset = (formEl: FormInstance | undefined) => {
+  formSearchData.value.forEach((item) => {
+    formInline[item.name] = null
+  })
+  emit('reset')
+}
+const deleteAction = (row) => {
+  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {
+        list.value = list.value.filter((item) => item.id !== row.id)
+        ElMessage.success('删除成功')
+      })
+      .catch(() => {})
+}
+</script>
+<style scoped lang="scss">
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.zb-pro-table {
+  width: 100%;
+  height: 100%;
+  display:flex;
+  flex-direction:column;
+
+  .header{
+    display: flex;
+    padding: 16px 16px 0 16px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+    .search-form{
+      flex: 1;
+      ::v-deep{
+        .el-input--default{
+          width: 200px;
+        }
+      }
+    }
+    .search{
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+  }
+  .footer{
+    flex: 1;
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    border-radius: 4px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+    min-height: 300px;
+    .operator{
+      margin-bottom: 15px
+    }
+    .table{
+      position: relative;
+      flex: 1;
+    }
+    .zb-table{
+      position: absolute;
+      height: 100%;
+    }
+  }
+  ::v-deep{
+    .el-table__header th{
+      font-size: 15px;
+      font-weight: 700;
+      color: #252525;
+    }
+  }
+  .pagination{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/layout/components/Main/index.vue

@@ -13,8 +13,8 @@
 <script lang="ts" setup>
   import { useWrapComponents } from '@/hooks/useWrapComponents'
   import { computed, ref } from 'vue'
-  import {useSettingStore} from "@/store/modules/setting"
+  import { useSettingStore } from '@/store/modules/setting'
-  import {usePermissionStore} from "@/store/modules/permission"
+  import { usePermissionStore } from '@/store/modules/permission'
   const SettingStore = useSettingStore()
   const PermissionStore = usePermissionStore()
   const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes)

src/layout/components/Sidebar/index.vue

@@ -11,12 +11,7 @@
         class="el-menu-vertical-demo"
         :collapse="isCollapse"
       >
-                <SubItem
+        <SubItem v-for="route in permission_routes" :key="route.path" :item="route" />
-                        v-for="route in permission_routes"
-                        :key="route.path"
-                        :item="route"
-
-                />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -25,8 +20,8 @@
 <script lang="ts" setup>
   import Logo from './components/Logo.vue'
   import SubItem from '../SubMenu/SubItem.vue'
-import {useSettingStore} from "@/store/modules/setting"
+  import { useSettingStore } from '@/store/modules/setting'
-import {usePermissionStore} from "@/store/modules/permission"
+  import { usePermissionStore } from '@/store/modules/permission'
   import { computed } from 'vue'
   import { useRoute } from 'vue-router'
 
@@ -45,7 +40,6 @@ const permission_routes = computed(() => PermissionStore.permission_routes)
 
   const activeMenu = computed(() => {
     const { meta, path } = route
-    // if set path, the sidebar will highlight the path you set
     if (meta.activeMenu) {
       return meta.activeMenu
     }

src/layout/index.vue

@@ -11,7 +11,7 @@
   import { computed, watch } from 'vue'
   import Theme from '@/components/Theme/index.vue'
   import Mobile from './components/Mobile/index.vue'
-  import {useSettingStore} from "@/store/modules/setting"
+  import { useSettingStore } from '@/store/modules/setting'
   import { useResizeHandler } from '@/hooks/useResizeHandler'
   import LayoutVertical from './LayoutVertical/index.vue'
   import LayoutHorizontal from './LayoutHorizontal/index.vue'
@@ -23,7 +23,7 @@
     horizontal: LayoutHorizontal,
     vertical: LayoutVertical,
     columns: LayoutColumns,
-  };
+  }
 
   // 是否折叠
   const isCollapse = computed(() => {
@@ -31,14 +31,17 @@
   })
   let { device } = useResizeHandler()
 
-  watch(()=>device.value,(val)=>{
+  watch(
+    () => device.value,
+    (val) => {
       let vertical = val === 'mobile' ? 'vertical' : themeConfig.value.mode
-    const body = document.body as HTMLElement;
+      const body = document.body as HTMLElement
-    body.setAttribute("class", `layout-${vertical}`);
+      body.setAttribute('class', `layout-${vertical}`)
-  },{
+    },
-    immediate:true
+    {
-  })
+      immediate: true,
-
+    },
+  )
 
   // 当屏幕切换的时候进行变换
   const classObj = computed(() => {
@@ -49,7 +52,6 @@
       mobile: device.value === 'mobile',
     }
   })
-
 </script>
 
 <style lang="scss" scoped>

src/routers/index.ts

@@ -1,5 +1,11 @@
-import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory,Router } from 'vue-router'
+import {
-import Layout from "@/layout/index.vue";
+  createRouter,
+  createWebHistory,
+  RouteRecordRaw,
+  createWebHashHistory,
+  Router,
+} from 'vue-router'
+import Layout from '@/layout/index.vue'
 // 扩展继承属性
 interface extendRoute {
   hidden?: boolean
@@ -17,7 +23,6 @@ import externalLink from './modules/externalLink'
 import formRouter from './modules/form'
 import functionPageRouter from './modules/functionPage'
 
-
 // 异步组件
 export const asyncRoutes = [
   ...dataScreenRouter,
@@ -46,19 +51,20 @@ export const asyncRoutes = [
  * meta.icon ==> 菜单icon
  * meta.affix ==> 如果设置为true将会出现在 标签栏中
  * meta.breadcrumb ==> 如果设置为false，该项将隐藏在breadcrumb中（默认值为true）
+ * meta.activeMenu ==> 详情页的时候可以设置菜单高亮 ,高亮菜单的path
  */
 
 export const constantRoutes: Array<RouteRecordRaw & extendRoute> = [
   {
-        path: "/404",
+    path: '/404',
-        name: "404",
+    name: '404',
-        component: () => import("@/views/errorPages/404.vue"),
+    component: () => import('@/views/errorPages/404.vue'),
     hidden: true,
   },
   {
-        path: "/403",
+    path: '/403',
-        name: "403",
+    name: '403',
-        component: () => import("@/views/errorPages/403.vue"),
+    component: () => import('@/views/errorPages/403.vue'),
     hidden: true,
   },
   {
@@ -66,22 +72,22 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
     name: 'Login',
     component: () => import('@/views/login/index.vue'),
     hidden: true,
-    meta: { title: '登录',}
+    meta: { title: '登录' },
   },
   {
     path: '/',
     name: 'layout',
     component: Layout,
     redirect: '/home',
-    meta: { title: '首页', icon: 'House', },
+    meta: { title: '首页', icon: 'House' },
     children: [
       {
         path: '/home',
         component: () => import('@/views/home/index.vue'),
         name: 'home',
-        meta: { title: '首页', icon: 'House', affix: true ,role:['other']}
+        meta: { title: '首页', icon: 'House', affix: true, role: ['other'] },
       },
-    ]
+    ],
   },
 ]
 
@@ -90,15 +96,14 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
  */
 export const notFoundRouter = {
   path: '/:pathMatch(.*)',
-    name: "notFound",
+  name: 'notFound',
-    redirect: '/404'
+  redirect: '/404',
-};
+}
-
 
 const router = createRouter({
   // history: createWebHistory(process.env.BASE_URL), // history
   history: createWebHashHistory(), // hash
-  routes:constantRoutes
+  routes: constantRoutes,
 })
 
 export default router

src/routers/modules/form.ts

@@ -1,9 +1,9 @@
-
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from "@/layout/index.vue";
+import Layout from '@/layout/index.vue'
 
-const formRouter = [{
+const formRouter = [
+  {
     path: '/form',
     component: Layout,
     redirect: '/form/validateForm',
@@ -11,34 +11,41 @@ const formRouter = [{
     alwaysShow: true,
     meta: {
       title: '超级表单',
-        icon: 'Grape'
+      icon: 'Grape',
     },
     children: [
       {
         path: '/form/validateForm',
         component: () => import('@/views/form/validateForm/index.vue'),
         name: 'validateForm',
-            meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '校验 Form', keepAlive: true, icon: 'MenuIcon' },
       },
       {
         path: '/form/advancedForm',
         component: () => import('@/views/form/advancedForm/index.vue'),
         name: 'advancedForm',
-            meta: { title: '收缩 Form',  icon: 'MenuIcon'}
+        meta: { title: '收缩 Form', icon: 'MenuIcon' },
       },
       {
         path: '/form/appendForm',
         component: () => import('@/views/form/appendForm/index.vue'),
         name: 'appendForm',
-            meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '增删 Form', keepAlive: true, icon: 'MenuIcon' },
       },
       {
         path: '/form/moreForm',
         component: () => import('@/views/form/moreForm/index.vue'),
         name: 'moreForm',
-            meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '多表单验证', keepAlive: true, icon: 'MenuIcon' },
+      },
+      {
+        path: '/form/searchForm',
+        component: () => import('@/views/form/searchForm/index.vue'),
+        name: 'searchForm',
+        meta: { title: '查询 Form', keepAlive: true, icon: 'MenuIcon' },
+      },
+    ],
   },
 ]
-}]
 
 export default formRouter

src/routers/modules/other.ts

@@ -2,108 +2,109 @@
 
 import Layout from '@/layout/index.vue'
 
-const othersRouter = [{
+const othersRouter = [
+  {
     path: '/other',
     component: Layout,
     redirect: '/other/clipboard',
     name: 'other',
     meta: {
       title: '常用组件',
-    icon: 'management'
+      icon: 'management',
     },
     children: [
       {
         path: '/other/clipboard',
         component: () => import('@/views/other/clipboard/index.vue'),
         name: 'clipboard',
-      meta: { title: '剪贴板',  roles:['other'] ,icon: 'MenuIcon',}
+        meta: { title: '剪贴板', roles: ['other'], icon: 'MenuIcon' },
       },
       {
         path: '/other/editor',
         component: () => import('@/views/other/editor/index.vue'),
         name: 'editor',
-      meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
+        meta: { title: '富文本编辑器', roles: ['other'], icon: 'MenuIcon' },
       },
       {
         path: '/other/code-mirror',
         component: () => import('@/views/other/codeMirror/index.vue'),
         name: 'code-mirror',
-      meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
+        meta: { title: '代码编辑器', roles: ['other'], icon: 'MenuIcon' },
       },
       {
         path: '/other/mark-down',
         component: () => import('@/views/other/markDown/index.vue'),
         name: 'mark-down',
-      meta: { title: 'markDown', roles: ['other'] , icon: 'MenuIcon'}
+        meta: { title: 'markDown', roles: ['other'], icon: 'MenuIcon' },
       },
       {
         path: '/other/print',
         component: () => import('@/views/other/print/index.vue'),
         name: 'print',
-      meta: { title: '打印' , icon: 'MenuIcon'}
+        meta: { title: '打印', icon: 'MenuIcon' },
       },
       {
         path: '/other/cropper',
         component: () => import('@/views/other/cropper/index.vue'),
         name: 'cropper',
-      meta: { title: '头像裁剪' , icon: 'MenuIcon'}
+        meta: { title: '头像裁剪', icon: 'MenuIcon' },
       },
       {
         path: '/other/card-drag',
         component: () => import('@/views/other/cardDrag/index.vue'),
         name: 'card-drag',
-      meta: { title: '卡片拖拽', icon: 'MenuIcon' }
+        meta: { title: '卡片拖拽', icon: 'MenuIcon' },
       },
       {
         path: '/other/upload',
         component: () => import('@/views/other/upload/index.vue'),
         name: 'upload',
-      meta: { title: '上传图片', icon: 'MenuIcon' }
+        meta: { title: '上传图片', icon: 'MenuIcon' },
       },
       {
         path: '/other/qrcode',
         component: () => import('@/views/other/qrcode/index.vue'),
         name: 'qrcode',
-      meta: { title: '生成二维码', icon: 'MenuIcon' }
+        meta: { title: '生成二维码', icon: 'MenuIcon' },
       },
       {
         path: '/other/svgIcon',
         component: () => import('@/views/other/svgIcon/index.vue'),
         name: 'svgIcon',
-      meta: { title: 'svg 图标', icon: 'MenuIcon' }
+        meta: { title: 'svg 图标', icon: 'MenuIcon' },
       },
       {
         path: '/other/iconfont',
         component: () => import('@/views/other/iconfont/index.vue'),
         name: 'iconfont',
-      meta: { title: '阿里图标库', icon: 'MenuIcon' }
+        meta: { title: '阿里图标库', icon: 'MenuIcon' },
       },
       {
         path: '/other/water-marker',
         component: () => import('@/views/other/waterMarker/index.vue'),
         name: 'water-marker',
-      meta: { title: '生成水印' , icon: 'MenuIcon'}
+        meta: { title: '生成水印', icon: 'MenuIcon' },
       },
       {
         path: '/other/right-menu',
         component: () => import('@/views/other/rightMenu/index.vue'),
         name: 'right-menu',
-      meta: { title: '右键菜单' , icon: 'MenuIcon'}
+        meta: { title: '右键菜单', icon: 'MenuIcon' },
       },
       {
         path: '/other/count',
         component: () => import('@/views/other/count/index.vue'),
         name: 'count',
-      meta: { title: '数字动画', icon: 'MenuIcon' }
+        meta: { title: '数字动画', icon: 'MenuIcon' },
       },
       {
         path: '/other/text-clamp',
         component: () => import('@/views/other/textClamp/index.vue'),
         name: 'text-clamp',
-      meta: { title: '多行文本省略', icon: 'MenuIcon' }
+        meta: { title: '多行文本省略', icon: 'MenuIcon' },
+      },
+    ],
   },
-
 ]
-}]
 
 export default othersRouter

src/routers/modules/table.ts

@@ -1,35 +1,35 @@
-
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from "@/layout/index.vue";
+import Layout from '@/layout/index.vue'
 
-const tableRouter = [{
+const tableRouter = [
+  {
     path: '/table',
     component: Layout,
     redirect: '/table/comprehensive',
     name: 'table',
     meta: {
       title: '超级表格',
-        icon: 'School'
+      icon: 'School',
     },
     children: [
       {
         path: '/table/comprehensive',
         component: () => import('@/views/table/ComprehensiveTable/index.vue'),
         name: 'comprehensive',
-            meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
+        meta: { title: '综合表格', keepAlive: true, icon: 'MenuIcon' },
       },
       {
         path: '/table/inlineTable',
         component: () => import('@/views/table/InlineEditTable/index.vue'),
         name: 'inlineTable',
-            meta: { title: '行内编辑', keepAlive: true  , icon: 'MenuIcon'}
+        meta: { title: '行内编辑', keepAlive: true, icon: 'MenuIcon' },
       },
       {
         path: '/table/editableProTable',
         component: () => import('@/views/table/EditableProTable/index.vue'),
         name: 'editableProTable',
-            meta: { title: '可编辑表格', keepAlive: true  , icon: 'MenuIcon'}
+        meta: { title: '可编辑表格', keepAlive: true, icon: 'MenuIcon' },
       },
       // {
       //     path: 'virtualTable',
@@ -37,7 +37,8 @@ const tableRouter = [{
       //     name: 'virtualTable',
       //     meta: { title: '虚拟表格', keepAlive: true  , icon: 'MenuIcon'}
       // },
+    ],
+  },
 ]
-}]
 
 export default tableRouter

src/views/form/searchForm/constants.tsx

@@ -0,0 +1,119 @@
+export const baseSearchColumns = [
+  {
+    type: 'input',
+    name: 'name1',
+    label: '字段1',
+    span: 8,
+    value: '字段1',
+    attrs: {
+      placeholder: '请输入字段1',
+      clearable: true,
+    },
+  },
+  {
+    type: 'select',
+    name: 'name2',
+    label: '字段2',
+    value: '',
+    placeholder: '字段2',
+    span: 8,
+    options: [
+      { value: 'Option1', label: 'Option1' },
+      { value: 'Option2', label: 'Option2' },
+      { value: 'Option3', label: 'Option3' },
+      { value: 'Option4', label: 'Option4' },
+      { value: 'Option5', label: 'Option5' },
+    ],
+    attrs: {
+      placeholder: '请选择',
+      clearable: true,
+    },
+  },
+  {
+    type: 'date-picker',
+    name: 'name3',
+    label: '时间',
+    span: 8,
+    value: null,
+    attrs: {
+      placeholder: '请选择时间',
+      clearable: true,
+      type: 'date',
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+  {
+    type: 'date-picker',
+    name: 'name4',
+    label: '时间秒',
+    span: 8,
+    value: null,
+    attrs: {
+      placeholder: '请选择时间',
+      clearable: true,
+      type: 'datetime',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    type: 'date-picker',
+    name: 'name5',
+    label: '时间范围',
+    span: 8,
+    value: '',
+    attrs: {
+      placeholder: '请选择时间范围',
+      clearable: true,
+      type: 'daterange',
+      valueFormat: 'YYYY-MM-DD',
+      'start-placeholder': '开始时间',
+      'end-placeholder': '结束时间',
+    },
+  },
+  {
+    type: 'time-select',
+    name: 'name6',
+    label: '时间选择',
+    span: 8,
+    value: '',
+    attrs: {
+      placeholder: '请选择',
+      clearable: true,
+    },
+  },
+  {
+    type: 'cascader',
+    name: 'name7',
+    label: '级联选择器',
+    span: 8,
+    value: '',
+    attrs: {
+      placeholder: '请选择',
+      clearable: true,
+      options: [
+        {
+          value: 'disciplines',
+          label: 'Disciplines',
+          children: [
+            {
+              value: 'consistency',
+              label: 'Consistency',
+            },
+            {
+              value: 'feedback',
+              label: 'Feedback',
+            },
+            {
+              value: 'efficiency',
+              label: 'Efficiency',
+            },
+            {
+              value: 'controllability',
+              label: 'Controllability',
+            },
+          ],
+        },
+      ],
+    },
+  },
+]

src/views/form/searchForm/index.scss

@@ -0,0 +1,3 @@
+.searchdForm{
+  padding: 20px;
+}

src/views/form/searchForm/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <PageWrapLayout>
+    <SearchForm :columns="searchColumns" @submit="onSubmit" @reset="resetForm" />
+
+    <div v-if="Object.keys(formValue).length">{{ formValue }}</div>
+  </PageWrapLayout>
+</template>
+
+<script lang="ts" setup>
+  import SearchForm from '@/components/SearchForm/index.vue'
+  import { ref } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { baseSearchColumns } from './constants'
+
+  const formValue = ref({})
+  const searchColumns = ref(baseSearchColumns)
+
+  // 查询
+  const onSubmit = (formInline) => {
+    console.log('获取参数', formInline)
+    formValue.value = formInline
+    ElMessage.success(JSON.stringify(formInline))
+  }
+
+  // 重置
+  const resetForm = (formInline) => {
+    console.log('获取参数', formInline)
+    formValue.value = formInline
+    ElMessage.success('重置成功')
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import './index.scss';
+</style>

src/views/table/ComprehensiveTable/index.vue

@@ -106,7 +106,7 @@ const column = [
       ],
       valueType: 'select',
     },
-  {name: 'price', label: '价格', inSearch: true, valueType: 'input',},
+    { name: 'price', label: '价格', inSearch: true, valueType: 'input' },
     { name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
     { name: 'address', label: '地址', inSearch: true, valueType: 'input', width: 180 },
     { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
@@ -249,9 +249,7 @@ const onSubmit = (val) => {
     }, 500)
   }
 
-const getHeight = ()=>{
+  const getHeight = () => {}
-
-}
 
   onMounted(() => {
     nextTick(() => {