Jelajahi Sumber

fix: BsUi组件修改

hanxiaohui 4 bulan lalu
induk
melakukan
574b16ea26

+ 1 - 1
src/components/BsUi/ModalTable/index.vue

@@ -33,7 +33,7 @@
 <style lang="scss" scoped>
   .bs-table-modal {
     :deep(.vxe-grid--table-container) {
-      padding: 0;
+      padding: 0 0 10px 0;
     }
   }
 </style>

+ 1 - 0
src/components/BsUi/ModalTableSelector/index.vue

@@ -83,6 +83,7 @@
       checkboxConfig: {
         checkRowKeys: !isEmpty(props.selectedKeys) ? props.selectedKeys : undefined,
       },
+      height: 550
     };
     if (gridOptions.columns.findIndex((v) => v.type === 'seq') === -1) {
       gridOptions.columns.unshift(...commonCols);

+ 77 - 51
src/components/BsUi/Table/Table.vue

@@ -1,11 +1,11 @@
 <template>
-  <vxe-grid class="wrapper" v-bind="props.gridOptions" ref="gridRef" v-fullscreen>
+  <vxe-grid class="wrapper" v-bind="gridOptions" ref="gridRef" v-fullscreen>
     <template #form>
       <Search
-        v-if="props?.searchConfig && props.searchConfig.enable && props.searchConfig?.fields && props.searchConfig?.data"
-        :fields="props.searchConfig?.fields"
-        :data="props.searchConfig?.data"
-        v-bind="props.searchConfig"
+        v-if="searchConfig && searchConfig.enable && searchConfig?.fields && searchConfig?.data"
+        :fields="searchConfig?.fields"
+        :data="searchConfig?.data"
+        v-bind="searchConfig"
         @reset="handleReset"
         @search="handleSearch"
       >
@@ -19,8 +19,8 @@
     <template #top>
       <div class="top-main">
         <div class="top-top" v-if="$slots.toolbarTop">
-          <a-space v-if="props?.toolbarTopConfig && props?.toolbarTopConfig.enable" style="margin-right: 8px">
-            <a-button v-for="(btn, idx) in props?.toolbarTopConfig.buttons" :key="btn.code" size="middle" v-bind="btn.props">{{
+          <a-space v-if="toolbarTopConfig && toolbarTopConfig.enable" style="margin-right: 8px">
+            <a-button v-for="(btn, idx) in toolbarTopConfig.buttons" :key="btn.code" size="middle" v-bind="btn.props">{{
               btn.title
             }}</a-button>
           </a-space>
@@ -28,55 +28,70 @@
           <slot name="toolbarTop"></slot>
         </div>
         <div class="top-bottom">
-          <div class="top-left" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
-            <Toolbar :toolbarConfig="props.toolbarConfig">
+          <div class="top-left" v-if="toolbarConfig && toolbarConfig.enable">
+            <Toolbar :toolbarConfig="toolbarConfig">
+              <a-space v-if="toolbarConfig.leftButtons" style="margin-right: 8px">
+                <a-button v-for="(btn, idx) in toolbarConfig.leftButtons" :key="btn.code" size="middle" v-bind="btn.props">{{
+                  btn.title
+                }}</a-button>
+              </a-space>
               <slot name="toolbarLeft"></slot>
             </Toolbar>
           </div>
-          <div class="top-right" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
-            <a-tooltip placement="top">
-              <template #title>
-                <span>刷新</span>
-              </template>
-              <a-button type="text" size="small" @click="handleRefresh">
-                <ReloadOutlined />
-              </a-button>
-            </a-tooltip>
-
-            <a-tooltip placement="top" v-if="isZoom">
-              <template #title>
-                <span>还原</span>
-              </template>
-              <a-button type="text" size="small" @click="toggleFullscreen">
-                <FullscreenExitOutlined />
-              </a-button>
-            </a-tooltip>
-
-            <a-tooltip placement="top" v-if="!isZoom">
-              <template #title>
-                <span>全屏</span>
-              </template>
-              <a-button type="text" size="small" @click="toggleFullscreen">
-                <FullscreenOutlined />
-              </a-button>
-            </a-tooltip>
-
-            <a-tooltip placement="top">
-              <template #title>
-                <span>列设置</span>
-              </template>
-              <a-button type="text" size="small" @click="handleSetting">
-                <SettingOutlined />
-              </a-button>
-            </a-tooltip>
+          <div class="top-right" v-if="toolbarConfig && toolbarConfig.enable">
+            <div class="top-right-left" v-if="!has(toolbarConfig, 'displayToolbar') || get(toolbarConfig, 'displayToolbar') === DISPLAY_STATE.VISIBLE">
+              <a-tooltip placement="top">
+                <template #title>
+                  <span>刷新</span>
+                </template>
+                <a-button type="text" size="small" @click="handleRefresh">
+                  <ReloadOutlined />
+                </a-button>
+              </a-tooltip>
+
+              <a-tooltip placement="top" v-if="isZoom">
+                <template #title>
+                  <span>还原</span>
+                </template>
+                <a-button type="text" size="small" @click="toggleFullscreen">
+                  <FullscreenExitOutlined />
+                </a-button>
+              </a-tooltip>
+
+              <a-tooltip placement="top" v-if="!isZoom">
+                <template #title>
+                  <span>全屏</span>
+                </template>
+                <a-button type="text" size="small" @click="toggleFullscreen">
+                  <FullscreenOutlined />
+                </a-button>
+              </a-tooltip>
+
+              <a-tooltip placement="top">
+                <template #title>
+                  <span>列设置</span>
+                </template>
+                <a-button type="text" size="small" @click="handleSetting">
+                  <SettingOutlined />
+                </a-button>
+              </a-tooltip>
+            </div>
+
+            <div class="top-right-right" v-if="toolbarConfig.rightButtons">
+              <a-space  style="margin-right: 8px">
+                <a-button v-for="(btn, idx) in toolbarConfig.rightButtons" :key="btn.code" size="middle" v-bind="btn.props">{{
+                    btn.title
+                  }}</a-button>
+              </a-space>
+            </div>
           </div>
         </div>
       </div>
     </template>
 
     <template #pager>
-      <div class="pager" v-if="props?.pagerConfig && props.pagerConfig.enable">
-        <Pagination :pagerConfig="props.pagerConfig" />
+      <div class="pager" v-if="pagerConfig && pagerConfig.enable">
+        <Pagination :pagerConfig="pagerConfig" />
       </div>
     </template>
 
@@ -103,7 +118,8 @@
   import Pagination from './component/pagination/index.vue';
   import Toolbar from './component/toolbar/index.vue';
   import IndexData from './component/indexData/index.vue';
-  import { mapValues, has, isString } from 'lodash';
+  import { mapValues, has, isString, get } from 'lodash';
+  import {DISPLAY_STATE} from "/@/components/BsUi/constant.js";
   const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted', 'toolbarTopConfig']);
 
   const $slots = useSlots();
@@ -114,11 +130,9 @@
 
   const slotCols = ref([]);
 
-
   const handleSetting = () => {
     gridRef.value.openCustom();
-  }
-
+  };
 
   const setSlotsCols = () => {
     slotCols.value = [];
@@ -181,6 +195,18 @@
           display: flex;
           justify-content: flex-end;
           align-items: center;
+
+          .top-right-left {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+          }
+
+          .top-right-right {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+          }
         }
       }
     }