特性: 新增表单

src/components/SearchForm/advancedForm/index.vue

@@ -5,23 +5,26 @@
       :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-form-item :label="item.title" :label-width="labelWidth" v-if="item.type === 'input'">
-                clearable
+            <el-input clearable v-model="formInline[item.name]" :placeholder="item.placeholder" />
-                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" >
+          <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]"
@@ -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>
@@ -45,75 +50,74 @@
 </template>
 
 <script lang="ts" setup>
-import {reactive, ref} from 'vue'
+  import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
-const ruleFormRef = ref<FormInstance>()
+  const ruleFormRef = ref<FormInstance>()
-let props = defineProps({
+  let props = defineProps({
     // 宽度
     labelWidth: {
-    default: "100px",
+      default: '100px',
     },
     gutterWidth: {
       type: Number,
       default: 24,
     },
-  showRow:{
+    showRow: {
       type: Number,
       default: 1,
     },
-  columns:{
+    columns: {
-    type:Array,
+      type: Array,
-    default:()=>[]
+      default: () => [],
     },
-  byHeight:{
+    byHeight: {
-    type:Boolean,
+      type: Boolean,
-    default:false
+      default: false,
-  }
+    },
-})
+  })
-const emit = defineEmits(['submit','reset'])
+  const emit = defineEmits(['submit', 'reset'])
-// 收缩展开
+  // 收缩展开
-const isExpand = ref(false)
+  const isExpand = ref(false)
 
-const formInline = reactive({
+  const formInline = reactive({})
-})
 
-for(let item of props.columns){
+  for (let item of props.columns) {
     formInline[item.name] = null
-}
+  }
 
-const onSubmit = () => {
+  const onSubmit = () => {
-  emit('submit',formInline)
+    emit('submit', formInline)
-}
+  }
 
-const resetForm = (formEl: FormInstance | undefined) => {
+  const resetForm = (formEl: FormInstance | undefined) => {
-  console.log('formEl',formEl)
+    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>
 
 <style lang="scss" scoped>
-.advancedForm{
+  .advancedForm {
     display: flex;
     justify-content: space-between;
-  .form-inline{
+    .form-inline {
       flex: 1;
     }
-  .el-form--inline .el-form-item{
+    .el-form--inline .el-form-item {
       width: 100%;
       margin-right: 10px;
     }
-  .search-btn{
+    .search-btn {
       margin-left: 40px;
     }
-  .not-show{
+    .not-show {
       height: 40px;
       overflow: hidden;
     }
-}
+  }
 </style>

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>
@@ -53,7 +55,7 @@
               v-if="item.type"
               :type="item.type"
               :width="item.width"
-                :align="item.align!=null?item.align:'center'"
+              :align="item.align != null ? item.align : 'center'"
               :fixed="item.fixed"
               :label="item.label"
             />
@@ -61,7 +63,7 @@
               v-else
               :prop="item.name"
               :width="item.width"
-                :align="item.align!=null?item.align:'center'"
+              :align="item.align != null ? item.align : 'center'"
               :fixed="item.fixed"
               :label="item.label"
             >
@@ -89,13 +91,13 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+  import { computed, ref } from 'vue'
-import {Search } from '@element-plus/icons-vue'
+  import { Search } from '@element-plus/icons-vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
+  import type { FormInstance } from 'element-plus'
-const ruleFormRef = ref<FormInstance>()
+  const ruleFormRef = ref<FormInstance>()
-const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
+  const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
-let props = defineProps({
+  let props = defineProps({
     columns: {
       type: Array,
       default: () => [],
@@ -108,59 +110,59 @@ let props = defineProps({
       type: Boolean,
       default: false,
     },
-})
+  })
 
-const currentPage1 = ref(1)
+  const currentPage1 = ref(1)
-// 收缩展开
+  // 收缩展开
-const isExpand = ref(false)
+  const isExpand = ref(false)
-const handleSizeChange = (val: number) => {
+  const handleSizeChange = (val: number) => {
     console.log(`${val} items per page`)
-}
+  }
-const handleCurrentChange = (val: number) => {
+  const handleCurrentChange = (val: number) => {
     console.log(`current page: ${val}`)
     currentPage1.value = val
-}
+  }
 
-const list = computed(() => {
+  const list = computed(() => {
     let arr = JSON.parse(JSON.stringify(props.data))
     return arr.splice((currentPage1.value - 1) * 10, 10)
-})
+  })
 
-const listLoading = ref(false)
+  const listLoading = ref(false)
-const confirmEdit = (row) => {
+  const confirmEdit = (row) => {
     row.edit = false
-}
+  }
-const cancelEdit = (row) => {
+  const cancelEdit = (row) => {
     row.edit = false
-}
+  }
 
-import { reactive } from 'vue'
+  import { reactive } from 'vue'
 
-let obj = {}
+  let obj = {}
-let search = []
+  let search = []
-for (let item of props.columns) {
+  for (let item of props.columns) {
     if (item.inSearch) {
       obj[item.name] = null
     }
     if (item.inSearch) {
       search.push(item)
     }
-}
+  }
-const formSearchData = ref(search)
+  const formSearchData = ref(search)
-const formInline = reactive(obj)
+  const formInline = reactive(obj)
 
-const onSubmit = () => {
+  const onSubmit = () => {
     console.log('submit!', formInline)
     emit('onSubmit', formInline)
-}
+  }
 
-const reset = (formEl: FormInstance | undefined) => {
+  const reset = (formEl: FormInstance | undefined) => {
     formSearchData.value.forEach((item) => {
       formInline[item.name] = null
     })
     emit('reset')
-}
+  }
-const deleteAction = (row) => {
+  const deleteAction = (row) => {
     ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
@@ -172,44 +174,44 @@ const deleteAction = (row) => {
         ElMessage.success('删除成功')
       })
       .catch(() => {})
-}
+  }
 </script>
 <style scoped lang="scss">
-.edit-input {
+  .edit-input {
     padding-right: 100px;
-}
+  }
-.cancel-btn {
+  .cancel-btn {
     position: absolute;
     right: 15px;
     top: 10px;
-}
+  }
-.zb-pro-table {
+  .zb-pro-table {
     width: 100%;
     height: 100%;
-  display:flex;
+    display: flex;
-  flex-direction:column;
+    flex-direction: column;
 
-  .header{
+    .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{
+      .search-form {
         flex: 1;
-      ::v-deep{
+        ::v-deep {
-        .el-input--default{
+          .el-input--default {
             width: 200px;
           }
         }
       }
-    .search{
+      .search {
         flex-shrink: 0;
         white-space: nowrap;
       }
     }
-  .footer{
+    .footer {
       flex: 1;
       display: flex;
       padding: 16px;
@@ -219,31 +221,31 @@ const deleteAction = (row) => {
       background: white;
       box-shadow: 0 0 12px rgb(0 0 0 / 5%);
       min-height: 300px;
-    .operator{
+      .operator {
-      margin-bottom: 15px
+        margin-bottom: 15px;
       }
-    .table{
+      .table {
         position: relative;
         flex: 1;
       }
-    .zb-table{
+      .zb-table {
         position: absolute;
         height: 100%;
       }
     }
-  ::v-deep{
+    ::v-deep {
-    .el-table__header th{
+      .el-table__header th {
         font-size: 15px;
         font-weight: 700;
         color: #252525;
       }
     }
-  .pagination{
+    .pagination {
       width: 100%;
       display: flex;
       justify-content: center;
       padding-top: 20px;
       box-sizing: border-box;
     }
-}
+  }
 </style>

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="app-main" >
+  <div class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-slide" mode="out-in" appear>
         <keep-alive :include="cacheRoutes" v-if="isReload">
-          <component :is="useWrapComponents(Component,route)" :key="route.path" />
+          <component :is="useWrapComponents(Component, route)" :key="route.path" />
         </keep-alive>
       </transition>
     </router-view>
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="ts" setup>
-  import {useWrapComponents} from '@/hooks/useWrapComponents'
+  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)
+  const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes)
   const isReload = computed(() => SettingStore.isReload)
 </script>
 
@@ -28,7 +28,7 @@
     overflow-x: hidden;
     width: 100%;
     box-sizing: border-box;
-    .app-main-inner{
+    .app-main-inner {
       flex: 1;
       display: flex;
       overflow-x: hidden;

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
-        <Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
+    <Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -11,50 +11,44 @@
         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>
 </template>
 
 <script lang="ts" setup>
-import Logo from './components/Logo.vue'
+  import Logo from './components/Logo.vue'
-import SubItem from '../SubMenu/SubItem.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 { computed } from 'vue'
-import { useRoute } from 'vue-router'
+  import { useRoute } from 'vue-router'
 
-// 在setup中获取store
+  // 在setup中获取store
-const route = useRoute()
+  const route = useRoute()
-const PermissionStore = usePermissionStore()
+  const PermissionStore = usePermissionStore()
-const SettingStore = useSettingStore()
+  const SettingStore = useSettingStore()
 
-// 是否折叠
+  // 是否折叠
-const isCollapse = computed(() => !SettingStore.isCollapse)
+  const isCollapse = computed(() => !SettingStore.isCollapse)
-// 设置
+  // 设置
-const themeConfig = computed(() =>SettingStore.themeConfig )
+  const themeConfig = computed(() => SettingStore.themeConfig)
 
-// 获取路由
+  // 获取路由
-const permission_routes = computed(() => PermissionStore.permission_routes)
+  const permission_routes = computed(() => PermissionStore.permission_routes)
 
-const activeMenu = computed(() => {
+  const activeMenu = computed(() => {
     const { meta, path } = route
-    // if set path, the sidebar will highlight the path you set
     if (meta.activeMenu) {
       return meta.activeMenu
     }
     return path
-})
+  })
 </script>
 
 <style lang="scss">
-.el-menu-vertical-demo:not(.el-menu--collapse) {
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
     height: 100%;
-}
+  }
 </style>

src/layout/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="g-container-layout" :class="classObj">
-    <Mobile/>
+    <Mobile />
-    <LayoutVertical v-if="device === 'mobile'"/>
+    <LayoutVertical v-if="device === 'mobile'" />
-    <component :is="LayoutComponents[themeConfig.mode]" v-else/>
+    <component :is="LayoutComponents[themeConfig.mode]" v-else />
     <Theme />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed,watch } from 'vue'
+  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(
-    let vertical = val==='mobile'?'vertical':themeConfig.value.mode
+    () => device.value,
-    const body = document.body as HTMLElement;
+    (val) => {
-    body.setAttribute("class", `layout-${vertical}`);
+      let vertical = val === 'mobile' ? 'vertical' : themeConfig.value.mode
-  },{
+      const body = document.body as HTMLElement
-    immediate:true
+      body.setAttribute('class', `layout-${vertical}`)
-  })
+    },
-
+    {
+      immediate: true,
+    },
+  )
 
   // 当屏幕切换的时候进行变换
   const classObj = computed(() => {
@@ -49,7 +52,6 @@
       mobile: device.value === 'mobile',
     }
   })
-
 </script>
 
 <style lang="scss" scoped>

src/routers/index.ts

@@ -1,8 +1,14 @@
-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
+  hidden?: boolean
 }
 //
 import tableRouter from './modules/table'
@@ -17,7 +23,6 @@ import externalLink from './modules/externalLink'
 import formRouter from './modules/form'
 import functionPageRouter from './modules/functionPage'
 
-
 // 异步组件
 export const asyncRoutes = [
   ...dataScreenRouter,
@@ -46,42 +51,43 @@ export const asyncRoutes = [
  * meta.icon ==> 菜单icon
  * meta.affix ==> 如果设置为true将会出现在 标签栏中
  * meta.breadcrumb ==> 如果设置为false，该项将隐藏在breadcrumb中（默认值为true）
+ * meta.activeMenu ==> 详情页的时候可以设置菜单高亮 ,高亮菜单的path
  */
 
-export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
+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,
+    hidden: true,
   },
   {
-        path: "/403",
+    path: '/403',
-        name: "403",
+    name: '403',
-        component: () => import("@/views/errorPages/403.vue"),
+    component: () => import('@/views/errorPages/403.vue'),
-        hidden:true,
+    hidden: true,
   },
   {
     path: '/login',
     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,44 +1,51 @@
-
 /** 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',
     name: 'form',
-    alwaysShow:true,
+    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

@@ -61,15 +61,15 @@
   </div>
 </template>
 <script lang="ts" setup name="comprehensive">
-import {ref, reactive, onMounted, nextTick} from 'vue'
+  import { ref, reactive, onMounted, nextTick } from 'vue'
-import * as dayjs from 'dayjs'
+  import * as dayjs from 'dayjs'
-import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
+  import type { FormInstance } from 'element-plus'
-const loading = ref(true)
+  const loading = ref(true)
-const appContainer = ref(null)
+  const appContainer = ref(null)
-import PropTable from '@/components/Table/PropTable/index.vue'
+  import PropTable from '@/components/Table/PropTable/index.vue'
-const data = []
+  const data = []
-for (let i = 0; i < 100; i++) {
+  for (let i = 0; i < 100; i++) {
     data.push({
       date: '2016-05-02',
       name: '王五' + i,
@@ -84,9 +84,9 @@ for (let i = 0; i < 100; i++) {
       address: '上海市普上海',
       zip: 200333,
     })
-}
+  }
-const column = [
+  const column = [
-  { type: 'selection', width: 60 ,fixed: 'left'},
+    { type: 'selection', width: 60, fixed: 'left' },
     { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
     { name: 'age', label: '年龄', align: 'right' },
     {
@@ -106,26 +106,26 @@ 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: 'address', label: '地址', inSearch: true, valueType: 'input', width: 180 },
     { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
-  { name: 'province', label: '省份' , width: 100},
+    { name: 'province', label: '省份', width: 100 },
     { name: 'city', label: '城市' },
     { name: 'zip', label: '邮编' },
-  { name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作'  },
+    { name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
-]
+  ]
-const list = ref(data)
+  const list = ref(data)
 
-const formSize = ref('default')
+  const formSize = ref('default')
-const ruleFormRef = ref<FormInstance>()
+  const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive({
+  const ruleForm = reactive({
     name: '',
     sex: null,
     price: null,
-})
+  })
 
-const rules = reactive({
+  const rules = reactive({
     name: [
       { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
@@ -138,14 +138,14 @@ const rules = reactive({
         trigger: 'change',
       },
     ],
-})
+  })
 
-const dialogVisible = ref(false)
+  const dialogVisible = ref(false)
-const title = ref('新增')
+  const title = ref('新增')
-const rowObj = ref({})
+  const rowObj = ref({})
-const selectObj = ref([])
+  const selectObj = ref([])
 
-const handleClose = async (done: () => void) => {
+  const handleClose = async (done: () => void) => {
     await ruleFormRef.value.validate((valid, fields) => {
       if (valid) {
         let obj = {
@@ -177,14 +177,14 @@ const handleClose = async (done: () => void) => {
         console.log('error submit!', fields)
       }
     })
-}
+  }
 
-const add = () => {
+  const add = () => {
     title.value = '新增'
     dialogVisible.value = true
-}
+  }
 
-const batchDelete = () => {
+  const batchDelete = () => {
     if (!selectObj.value.length) {
       return ElMessage.error('未选中任何行')
     }
@@ -199,21 +199,21 @@ const batchDelete = () => {
         list.value = list.value.concat([])
       })
       .catch(() => {})
-}
+  }
-const selectionChange = (val) => {
+  const selectionChange = (val) => {
     selectObj.value = val
-}
+  }
 
-const edit = (row) => {
+  const edit = (row) => {
     title.value = '编辑'
     rowObj.value = row
     dialogVisible.value = true
     ruleForm.name = row.name
     ruleForm.sex = row.sex
     ruleForm.price = row.price
-}
+  }
 
-const del = (row) => {
+  const del = (row) => {
     console.log('row==', row)
     ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
       confirmButtonText: '确定',
@@ -230,53 +230,51 @@ const del = (row) => {
         }, 500)
       })
       .catch(() => {})
-}
+  }
 
-const reset = () => {
+  const reset = () => {
     loading.value = true
     setTimeout(() => {
       loading.value = false
     }, 500)
     ElMessage.success('触发重置方法')
-}
+  }
 
-const onSubmit = (val) => {
+  const onSubmit = (val) => {
     console.log('val===', val)
     ElMessage.success('触发查询方法')
     loading.value = true
     setTimeout(() => {
       loading.value = false
     }, 500)
-}
+  }
 
-const getHeight = ()=>{
+  const getHeight = () => {}
 
-}
+  onMounted(() => {
-
+    nextTick(() => {
-onMounted(() => {
-  nextTick(()=>{
       // let data = appContainer.value.
     })
     setTimeout(() => {
       loading.value = false
     }, 500)
-})
+  })
 </script>
 
 <style scoped>
-.edit-input {
+  .edit-input {
     padding-right: 100px;
-}
+  }
-.app-container{
+  .app-container {
     flex: 1;
     display: flex;
     width: 100%;
     padding: 16px;
     box-sizing: border-box;
-}
+  }
-.cancel-btn {
+  .cancel-btn {
     position: absolute;
     right: 15px;
     top: 10px;
-}
+  }
 </style>