Release (#81)

* ignore: 服务调用加上返回值 * feat: meVxeTable组件加上高度自动计算 * feat: 加上标准布局页面组件 * fix: meVxeTable高度100%加到组件中
meadmin-cn · Apr 7, 2024 · 5340a07 · 5340a07
1 parent c1c8689
commit 5340a07
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 11,097 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/meVxeTable/directives/resize.ts b/src/components/meVxeTable/directives/resize.ts
@@ -0,0 +1,31 @@
+// 监听元素大小变化的指令
+const map = new WeakMap()
+const ob = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    // 获取dom元素的回调
+    const handler = map.get(entry.target)
+    //存在回调函数
+    if (handler) {
+      // 将监听的值给回调函数
+      handler({
+        width: entry.borderBoxSize[0].inlineSize,
+        height: entry.borderBoxSize[0].blockSize
+      })
+    }
+  }
+})
+
+export const Resize = {
+  mounted(el: any, binding: any) {
+    //将dom与回调的关系塞入map
+    map.set(el, binding.value)
+    //监听el元素的变化
+    ob.observe(el)
+  },
+  unmounted(el: any) {
+    //取消监听
+    ob.unobserve(el)
+  }
+}
+
+export default Resize
diff --git a/src/components/meVxeTable/index.vue b/src/components/meVxeTable/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="me-vxe-table" :class="meClass">
-    <div v-if="toolbar" class="me-vxe-toolbar">
+  <div v-resize="getTableHeight" class="me-vxe-table" :class="meClass">
+    <div v-if="toolbar" ref="meVxeToolbarRef" class="me-vxe-toolbar">
       <div v-if="$slots.search" v-show="showSearch" class="me-vxe-toolbar-search">
         <slot name="search"></slot>
       </div>
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="me-vxe-body">
-      <vxe-table ref="vxeTableRef" v-bind="$attrs">
+      <vxe-table ref="vxeTableRef" :max-height="tableHeight" v-bind="$attrs">
         <slot></slot>
         <template v-if="$slots.loading" #loading>
           <slot name="loading"></slot>
@@ -88,7 +88,7 @@
         </template>
       </vxe-table>
     </div>
-    <pagination v-if="paginationOptions" :options="paginationOptions" class="pagination me-vxe-footer"></pagination>
+    <pagination v-if="paginationOptions" ref="mePaginationRef" :options="paginationOptions" class="pagination me-vxe-footer"></pagination>
   </div>
 </template>
 <script lang="ts">
@@ -105,6 +105,8 @@ import {
 } from 'vxe-table';
 import { debounce } from 'lodash-es';
 import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
+import resize  from './directives/resize';
+import {getFullHight} from './util';
 const props = {
   meClass: [String, Array] as PropType<string[] | string>,
   name: {
@@ -148,6 +150,10 @@ const props = {
     default: () => (t: ComponentCustomProperties['$t']) => t('快捷搜索'),
   },
   paginationOptions: Object as PropType<InstanceType<typeof pagination>['options']>,
+  autoHeight:{
+    type: Boolean,
+    default: true,
+  },
 };
 const emits = ['quickSearch', 'refresh', 'add', 'update:quickSearch'] as unknown as {
   quickSearch: (searchText: string) => void;
@@ -167,11 +173,14 @@ export default defineComponent<
 >({
   name: 'MeVxeTable',
   components: { pagination },
+  directives:{resize},
   inheritAttrs: false,
   props: props as any,
   emits,
   setup(props, { expose }) {
     const vxeTableRef = ref<VxeTableInstance>();
+    const meVxeToolbarRef = ref<HTMLDivElement|null>(null);
+    const mePaginationRef = ref<InstanceType<typeof pagination>|null>(null);
     const showSearch = ref(props.defaultShowSearch);
     const collectColumn = ref([] as VxeTableDefines.ColumnInfo[]);
     const defaultChecked = ref([] as string[]);
@@ -195,6 +204,14 @@ export default defineComponent<
       });
     });
     expose({ vxeTableRef });
+    const tableHeight = ref<number>();
+    const getTableHeight = (data:{width:number,height:number})=>{
+      if(props.autoHeight){
+        const toolbarHeight = meVxeToolbarRef.value? getFullHight(meVxeToolbarRef.value):0;
+        const paginationHeight = mePaginationRef.value?.$el? getFullHight(mePaginationRef.value?.$el):0;
+        tableHeight.value = data.height - toolbarHeight - paginationHeight;
+      }
+    }
     return {
       elTreeProps: {
         label: (item: TreeNodeData) => (item.type === 'seq' ? '#' : item.title),
@@ -232,6 +249,10 @@ export default defineComponent<
         );
       },
       showSearch,
+      getTableHeight,
+      tableHeight,
+      meVxeToolbarRef,
+      mePaginationRef,
     };
   },
 });
@@ -240,10 +261,14 @@ export default defineComponent<
 .me-vxe-table {
   $margin-top: 15px;
   $margin-left: 12px;
-
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   .me-vxe-toolbar {
     margin-top: -$margin-top;
     margin-bottom: $margin-top;
+    flex-shrink: 0;
+    flex-grow: 0;
 
     .me-vxe-toolbar-search {
       margin-top: $margin-top;
@@ -280,8 +305,13 @@ export default defineComponent<
       }
     }
   }
-
+  .me-vxe-body{
+    flex-shrink: 1;
+    overflow: auto;
+  }
   .pagination {
+    flex-shrink: 0;
+    flex-grow: 0;
     margin-top: $margin-top;
     justify-content: center;
   }

diff --git a/src/components/meVxeTable/util.ts b/src/components/meVxeTable/util.ts
@@ -0,0 +1,11 @@
+/**
+ * 获取元素的高度包括marign
+ * @param el 
+ * @returns 
+ */
+export const getFullHight = (el:HTMLDivElement)=>{
+    const offsetHeight = el.offsetHeight;
+    const marginTop = window.getComputedStyle(el).marginTop.replace('px','');
+    const marginBottom = window.getComputedStyle(el).marginBottom.replace('px','');
+    return offsetHeight + (+marginTop) + (+marginBottom)
+}
diff --git a/src/components/page.vue b/src/components/page.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="page page-100 page-padding">
+      <el-card v-if="$slots.searchForm" class="seach-header">
+        <slot name="searchForm"></slot>
+      </el-card>
+      <el-card class="content-body" body-style="height:100%"	>
+        <slot></slot>
+      </el-card>
+      <slot name="extend"></slot>
+    </div>
+  </template>
+  <style lang="scss" scoped>
+  .page{
+    .seach-header{
+        flex-shrink: 0;
+    }
+    .content-body{
+        flex:1;
+    }
+    .content-body:nth-child(n+2){
+        margin-top: 10px;
+    }
+  }
+
+  </style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -107,3 +107,16 @@ a {
 .dark ::-webkit-scrollbar-thumb:hover {
   background-color: rgb(86, 88, 91);
 }
+
+.page-100{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+}
+.page-padding{
+  padding: calc($page-padding - 10px);
+}
diff --git a/src/views/demo/demo.vue b/src/views/demo/demo.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="demo">
-    <el-card>
+  <page>
+    <template #searchForm>
       <me-search-form :model="params" :default-all="true" class="search-form" @search="search(1)">
         <el-form-item :label="t('姓名')" prop="name">
           <el-input v-model="params.name"></el-input>
@@ -26,54 +26,52 @@
           <el-date-picker v-model="params.createTime" type="daterange" value-format="YYYY-MM-DD" />
         </el-form-item>
       </me-search-form>
-    </el-card>
-    <el-card style="margin-top: 10px">
-      <me-vxe-table
-        v-model:quick-search="params.name"
-        :loading="loading"
-        :data="data?.list"
-        :pagination-options="{
-          currentPage: params.page,
-          pageSize: params.size,
-          total: data?.total ?? 0,
-          layout: 'sizes, prev, pager, next, jumper, ->, total',
-          change: search,
-        }"
-        align="center"
-        border
-        @refresh="search(1)"
-        @add="showAddOrUp()"
-        @quick-search="search(1)"
-      >
-        <vxe-column field="id" :title="t('ID')" min-width="100px"></vxe-column>
-        <vxe-column field="name" :title="t('姓名')" min-width="100px"></vxe-column>
-        <vxe-column field="bookName" :title="t('书名')" min-width="150px"></vxe-column>
-        <vxe-column field="type" :title="t('类型')" min-width="150px">
-          <template #default="{ row }: { row: Required<Info> }">
-            {{ bookType[row.type] }}
-          </template>
-        </vxe-column>
-        <vxe-column field="price" :title="t('价格')" min-width="100px"></vxe-column>
-        <vxe-column field="section" :title="t('章节')" min-width="100px"></vxe-column>
-        <vxe-column field="createTime" :title="t('创建时间')" min-width="150px"></vxe-column>
-        <vxe-column :title="t('操作')" fixed="right" min-width="150px">
-          <template #default="{ row }: { row: Required<Info> }">
-            <el-button @click="showAddOrUp(row)">
-              <mel-icon-edit />
+    </template>
+    <me-vxe-table
+    v-model:quick-search="params.name"
+    :loading="loading"
+    :data="data?.list"
+    :pagination-options="{
+      currentPage: params.page,
+      pageSize: params.size,
+      total: data?.total ?? 0,
+      layout: 'sizes, prev, pager, next, jumper, ->, total',
+      change: search,
+    }"
+    align="center"
+    border
+    @refresh="search(1)"
+    @add="showAddOrUp()"
+    @quick-search="search(1)"
+  >
+    <vxe-column field="id" :title="t('ID')" min-width="100px"></vxe-column>
+    <vxe-column field="name" :title="t('姓名')" min-width="100px"></vxe-column>
+    <vxe-column field="bookName" :title="t('书名')" min-width="150px"></vxe-column>
+    <vxe-column field="type" :title="t('类型')" min-width="150px">
+      <template #default="{ row }: { row: Required<Info> }">
+        {{ bookType[row.type] }}
+      </template>
+    </vxe-column>
+    <vxe-column field="price" :title="t('价格')" min-width="100px"></vxe-column>
+    <vxe-column field="section" :title="t('章节')" min-width="100px"></vxe-column>
+    <vxe-column field="createTime" :title="t('创建时间')" min-width="150px"></vxe-column>
+    <vxe-column :title="t('操作')" fixed="right" min-width="150px">
+      <template #default="{ row }: { row: Required<Info> }">
+        <el-button @click="showAddOrUp(row)">
+          <mel-icon-edit />
+        </el-button>
+        <el-popconfirm :title="t('确认删除？')" placement="left" @confirm="del(row.id)">
+          <template #reference>
+            <el-button :key="row.id" :loading="delLoading && delId === row.id" type="danger">
+              <mel-icon-delete />
             </el-button>
-            <el-popconfirm :title="t('确认删除？')" placement="left" @confirm="del(row.id)">
-              <template #reference>
-                <el-button :key="row.id" :loading="delLoading && delId === row.id" type="danger">
-                  <mel-icon-delete />
-                </el-button>
-              </template>
-            </el-popconfirm>
           </template>
-        </vxe-column>
-      </me-vxe-table>
-    </el-card>
+        </el-popconfirm>
+      </template>
+    </vxe-column>
+    </me-vxe-table>    
     <add v-model="addOrUp" :data="info" @success="search(info ? params.page : 1)"></add>
-  </div>
+  </page>
 </template>
 
 <script setup lang="ts" name="Demo">
@@ -101,3 +99,4 @@ const showAddOrUp = (row?: Required<Info>) => {
   addOrUp.value = true;
 };
 </script>
+
diff --git a/src/views/example/service/components/add.ts b/src/views/example/service/components/add.ts
@@ -18,4 +18,5 @@ export default async (props: Omit<ComponentProps<typeof Add>, 'show'> = {}) => {
     })),
   );
   await nextTick();
+  return key;
 };
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
@@ -2,6 +2,8 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-Original file line number
+Diff line change
@@ Expand Up @@
         })),
       );
       await nextTick();
+      return key;
     };