Browse Source

fix: Bs-Ui修改组件

hanxiaohui 2 months ago
parent
commit
aa8d3ebeb5

+ 12 - 2
src/components/BsUi/PageWrapper/index.vue

@@ -1,9 +1,19 @@
 <template>
-  <div class="w-full h-full">
+  <div :class="`w-full h-full ${isFixedHeight ? 'fixed-height' : ''}`">
     <slot ref="contentRef" />
   </div>
 </template>
 
 <script setup>
+  const props = defineProps({
+    isFixedHeight: {
+      type: Boolean,
+      default: true,
+    },
+  })
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.fixed-height {
+  height: calc(100vh - 105px);
+}
+</style>

+ 1 - 1
src/components/BsUi/Table/Table.vue

@@ -86,7 +86,7 @@
       </div>
     </template>
 
-    <template #pager v-if="pagerConfig?.enable">
+    <template #pager>
       <div class="pager">
         <Pagination :pagerConfig="pagerConfig" />
       </div>

+ 19 - 8
src/components/BsUi/Table/component/pagination/index.vue

@@ -3,17 +3,28 @@
     showSizeChanger
     showQuickJumper
     show-less-items
-    :pageSizeOptions="props.pagerConfig.pageSizeOptions"
-    :defaultPageSize="props.pagerConfig.pageSize"
-    v-model:current="props.pagerConfig.pageNum"
-    v-model:pageSize="props.pagerConfig.pageSize"
-    v-model:total="props.pagerConfig.total"
-    v-bind="props.pagerConfig"
+    :pageSizeOptions="pagerConfig.pageSizeOptions"
+    :defaultPageSize="pagerConfig.pageSize"
+    v-model:current="pagerConfig.pageNum"
+    v-model:pageSize="pagerConfig.pageSize"
+    v-model:total="pagerConfig.total"
+    v-bind="pagerConfig"
     :show-total="(total) => `共${total}条`"
   />
 </template>
 <script setup>
-  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const.js';
+  import { noop } from "lodash";
 
-  const props = defineProps(['pagerConfig']);
+  const props = defineProps({
+    pagerConfig: {
+      required: true,
+      default: {
+        pageNum: undefined,
+        pageSize: undefined,
+        pageSizeOptions: undefined,
+        total: undefined,
+        onChange: noop
+      }
+    }
+  });
 </script>

+ 13 - 7
src/components/BsUi/Table/index.js

@@ -2,6 +2,8 @@ import BsTable from './Table.vue';
 import { reactive, onMounted, onBeforeMount, toRaw, nextTick } from 'vue';
 import { set, get, isEmpty, isUndefined, forEach, has } from 'lodash';
 import { getTableDataApi } from '/@/api/system/table-api.js';
+import {PAGE_NUM, PAGE_SIZE_OPTIONS} from "/@/components/BsUi/constant.js";
+import {PAGE_SIZE} from "/@/constants/common-const.js";
 
 export const useBsTable = (options, tableRef) => {
   let tableOptions = reactive(options.tableOptions);
@@ -50,7 +52,7 @@ export const useBsTable = (options, tableRef) => {
         height: '40px',
         ...tableOptions.gridOptions?.headerCellConfig,
       },
-      height: 400,
+      height: '100%',
       ...tableOptions?.gridOptions,
     });
 
@@ -135,6 +137,10 @@ export const useBsTable = (options, tableRef) => {
     set(tableOptions, 'pagerConfig.total', value);
   };
 
+  const setPageSizeOptions = (value) => {
+    set(tableOptions, 'pagerConfig.pageSizeOptions', value);
+  }
+
   const setTableData = (data) => {
     set(tableOptions, 'gridOptions.data', data);
   };
@@ -165,8 +171,8 @@ export const useBsTable = (options, tableRef) => {
       } else {
         if (isEmpty(tableOptions?.url)) {
           setLoading(false);
-          setPageTotal(tableOptions.gridOptions.data.length);
-          setPagerVisible(false);
+          setPageTotal(tableOptions.gridOptions.data.length)
+          setTableData(tableOptions.gridOptions.data);
           nextTick(() => {
             tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
           });
@@ -209,10 +215,10 @@ export const useBsTable = (options, tableRef) => {
   };
 
   const initPagerConfig = () => {
-    setPageNum(tableOptions?.pagerConfig?.pageNum || 1);
-    setPageSize(tableOptions?.pagerConfig?.pageSize || 20);
-    const visible = get(tableOptions, 'pagerConfig.enable', true);
-    setPagerVisible(visible);
+    setPageNum(tableOptions?.pagerConfig?.pageNum || PAGE_NUM);
+    setPageSize(tableOptions?.pagerConfig?.pageSize || PAGE_SIZE);
+    setPageSizeOptions(tableOptions?.pagerConfig?.pageSizeOptions || PAGE_SIZE_OPTIONS);
+    setPagerVisible(tableOptions?.pagerConfig?.enable || true);
     initPageEvent();
   };
 

+ 6 - 0
src/components/BsUi/constant.js

@@ -19,3 +19,9 @@ export const SCENE_TYPE = Object.freeze({
   GROUP: 'GROUP', // 群组
   JOB: 'JOB', // 岗位
 })
+
+export const PAGE_SIZE_OPTIONS = ['10', '20', '50', '100']
+
+export const PAGE_NUM = 1
+
+export const PAGE_SIZE = 10