Browse Source

fix: BsUi-表格组件修改内测版

hanxiaohui 2 months ago
parent
commit
cbca6de79d
2 changed files with 33 additions and 35 deletions
  1. 8 23
      src/components/BsUi/Table/Table.vue
  2. 25 12
      src/components/BsUi/Table/index.js

+ 8 - 23
src/components/BsUi/Table/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <vxe-grid class="wrapper" v-bind="gridOptions" ref="gridRef" v-fullscreen :style="{ height: isEnablePager && isFixed ? `calc(100vh - 101px)` : '100%' }">
+  <vxe-grid class="wrapper" v-bind="gridOptions" ref="gridRef">
     <template #form>
       <Search
         v-if="searchConfig && searchConfig.enable && searchConfig?.fields && searchConfig?.data"
@@ -86,8 +86,8 @@
       </div>
     </template>
 
-    <template #pager>
-      <div :class="`pager ${!has(pagerConfig, 'isFixed') || pagerConfig.isFixed ? 'page_fixed' : ''}`" v-if="pagerConfig && isEnablePager">
+    <template #pager v-if="pagerConfig?.enable">
+      <div class="pager">
         <Pagination :pagerConfig="pagerConfig" />
       </div>
     </template>
@@ -122,9 +122,6 @@
   import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
   const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted', 'toolbarTopConfig', 'url']);
 
-  const isFixed = get(props.pagerConfig, 'isFixed', true);
-  const isEnablePager = get(props.pagerConfig, 'enable', false) || get(props.pagerConfig, 'enabled', false);
-
   const $slots = useSlots();
 
   const gridRef = ref(null);
@@ -162,10 +159,8 @@
   onMounted(() => {
     setSlotsCols();
     nextTick(() => {
-      if (!props.url) {
-        props.getGridRef && props.getGridRef(gridRef.value);
-        props.mounted && props.mounted(gridRef.value);
-      }
+      props.getGridRef && props.getGridRef(gridRef.value);
+      props.mounted && props.mounted(gridRef.value);
     });
   });
 
@@ -175,16 +170,6 @@
     });
   };
 
-  watch(
-    () => props.gridOptions.data,
-    (value) => {
-      if (props.url && !isEmpty(value)) {
-        props.getGridRef && props.getGridRef(gridRef.value);
-        props.mounted && props.mounted(gridRef.value);
-      }
-    }
-  );
-
   defineExpose({ gridRef });
 </script>
 
@@ -202,7 +187,7 @@
         padding: 10px 10px 0 10px;
       }
       .top-bottom {
-        padding: 10px 10px 0px 10px;
+        padding: 10px;
         background: white;
         display: flex;
         align-items: center;
@@ -235,7 +220,7 @@
       flex-direction: row;
       justify-content: flex-end;
       align-items: center;
-      padding: 0 10px 10px 10px;
+      padding: 10px;
       background: white;
       border-radius: 0 0 10px 10px;
 
@@ -251,7 +236,7 @@
     }
     :deep(.vxe-grid--table-container) {
       background: white;
-      padding: 10px;
+      padding: 0 10px;
     }
 
     .empty {

+ 25 - 12
src/components/BsUi/Table/index.js

@@ -1,5 +1,5 @@
 import BsTable from './Table.vue';
-import { reactive, onMounted, onBeforeMount, toRaw } from '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';
 
@@ -9,19 +9,21 @@ export const useBsTable = (options, tableRef) => {
   let gridRef = null;
 
   const initGridOptions = () => {
-    const seqCol = tableOptions?.gridOptions.columns.find((v) => ['seq', 'check', 'radio'].includes(v.type));
     const optCol = tableOptions?.gridOptions.columns.find((v) => v?.cellRender && v.cellRender.name === 'CellOption');
     // 操作初始化
     if (!isEmpty(optCol)) {
       optCol.fixed = 'right';
     }
-    // 序号初始化
-    if (!isEmpty(seqCol)) {
-      seqCol.align = 'center';
-      seqCol.headerAlign = 'center';
-      seqCol.width = '60px';
-      seqCol.fixed = 'left';
-    }
+    ['seq', 'checkbox', 'radio'].forEach((v) => {
+      const itemCol = tableOptions?.gridOptions.columns.find((vv) => vv.type === v);
+      // 序号初始化
+      if (!isEmpty(itemCol)) {
+        itemCol.align = 'center';
+        itemCol.headerAlign = 'center';
+        itemCol.width = '60px';
+        itemCol.fixed = 'left';
+      }
+    });
 
     // 初始化列
     tableOptions?.gridOptions.columns.forEach((col) => {
@@ -48,6 +50,7 @@ export const useBsTable = (options, tableRef) => {
         height: '40px',
         ...tableOptions.gridOptions?.headerCellConfig,
       },
+      height: 400,
       ...tableOptions?.gridOptions,
     });
 
@@ -155,12 +158,18 @@ export const useBsTable = (options, tableRef) => {
         setLoading(false);
         setTableData(list);
         setPageTotal(total);
+        nextTick(() => {
+          tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
+        });
         resolve(list);
       } else {
         if (isEmpty(tableOptions?.url)) {
           setLoading(false);
           setPageTotal(tableOptions.gridOptions.data.length);
           setPagerVisible(false);
+          nextTick(() => {
+            tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
+          });
           resolve(tableOptions.gridOptions.data);
         } else {
           const resData = await getTableDataApi(tableOptions?.url, { pageNum, pageSize, ...newSearchParams });
@@ -168,6 +177,9 @@ export const useBsTable = (options, tableRef) => {
           setLoading(false);
           setTableData(data.list);
           setPageTotal(data.total);
+          nextTick(() => {
+            tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
+          });
           resolve(data);
         }
       }
@@ -183,9 +195,6 @@ export const useBsTable = (options, tableRef) => {
   };
 
   const initPageEvent = () => {
-    const visible = get(tableOptions, 'pagerConfig.enable', true);
-    setPagerVisible(visible);
-
     set(tableOptions, 'pagerConfig.onChange', async () => {
       await getTableData();
     });
@@ -200,6 +209,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);
     initPageEvent();
   };