fix: BsUi表样式修改

src/components/BsUi/Table/Table.vue

@@ -18,44 +18,49 @@
 
     <template #top>
       <div class="top-main">
-       <div class="top-top" v-if="$slots.toolbarTop">
-         <slot name="toolbarTop"></slot>
-       </div>
-       <div class="top-bottom">
-         <div class="top-left" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
-           <Toolbar :toolbarConfig="props.toolbarConfig">
-             <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>
-         </div>
-       </div>
+        <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">{{ btn.title }}</a-button>
+          </a-space>
+
+          <slot name="toolbarTop"></slot>
+        </div>
+        <div class="top-bottom">
+          <div class="top-left" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
+            <Toolbar :toolbarConfig="props.toolbarConfig">
+              <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>
+          </div>
+        </div>
       </div>
     </template>
 
@@ -89,7 +94,7 @@
   import Toolbar from './component/toolbar/index.vue';
   import IndexData from './component/indexData/index.vue';
   import { mapValues, has, isString } from 'lodash';
-  const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted']);
+  const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted', 'toolbarTopConfig']);
 
   const $slots = useSlots();
 
@@ -102,16 +107,15 @@
   const setSlotsCols = () => {
     slotCols.value = [];
     props.gridOptions.columns.forEach((v) => {
-      if(has(v, 'slots')) {
+      if (has(v, 'slots')) {
         mapValues(v.slots, (value, key) => {
-          if(isString(value)) {
+          if (isString(value)) {
             slotCols.value.push(value);
           }
-        })
+        });
       }
     });
-  }
-
+  };
 
   const handleReset = () => {};
 
@@ -149,8 +153,7 @@
         padding: 10px 20px;
       }
       .top-bottom {
-        border-radius: 10px 10px 0 0;
-        padding: 10px 20px;
+        padding: 0 20px 10px 20px;
         background: white;
         display: flex;
         align-items: center;
@@ -171,7 +174,9 @@
       flex-direction: row;
       justify-content: flex-end;
       align-items: center;
-      padding: 20px;
+      padding: 0 10px 10px 10px;
+      background: white;
+      border-radius: 0 0 10px 10px;
 
       :deep(.ant-select-in-form-item) {
         width: auto !important;
@@ -179,7 +184,7 @@
     }
     :deep(.vxe-grid--table-container) {
       background: white;
-      border-radius: 0 0 10px 10px;
+      //border-radius: 0 0 10px 10px;
       padding: 0 20px 20px 20px;
     }
 

src/components/BsUi/Table/component/search/index.vue

@@ -17,11 +17,11 @@
           <a-col :span="btnSpan">
             <div class="search-btn">
               <a-space>
-                <a-button type="primary" :icon="h(SearchOutlined)" @click="searchHandler">查询</a-button>
-                <a-button :icon="h(ClearOutlined)" @click="resetHandler">重置</a-button>
+                <a-button type="primary" :icon="h(SearchOutlined)" @click="searchHandler" size="middle">查询</a-button>
+                <a-button :icon="h(ClearOutlined)" @click="resetHandler" size="middle">重置</a-button>
                 <a-space v-if="props.fields.length > 1">
-                  <a-button type="dashed" :icon="h(UpOutlined)" @click="toggleHandler" v-if="isZheDie">收起</a-button>
-                  <a-button type="dashed" :icon="h(DownOutlined)" @click="toggleHandler" v-if="!isZheDie">展开</a-button>
+                  <a-button type="dashed" :icon="h(UpOutlined)" @click="toggleHandler" v-if="isZheDie" size="middle">收起</a-button>
+                  <a-button type="dashed" :icon="h(DownOutlined)" @click="toggleHandler" v-if="!isZheDie" size="middle">展开</a-button>
                 </a-space>
               </a-space>
 
@@ -69,9 +69,14 @@
 <style lang="scss" scoped>
   .SearchWrapper {
     width: 100%;
-    padding-bottom: 10px;
+    //padding-bottom: 10px;
     :deep(.ant-card-body) {
-      padding: 20px;
+      padding: 10px 20px;
+      border-radius: 8px 8px 0 0;
+      background: white;
+    }
+    :deep(.ant-card-bordered) {
+      border: none;
     }
     :deep(.ant-form-item) {
       margin-bottom: 0;

src/components/BsUi/Table/index.js

@@ -9,13 +9,22 @@ export const useBsTable = (options, tableRef) => {
   let gridRef = null;
 
   const initGridOptions = () => {
+    const seqCol = tableOptions?.gridOptions.columns.find(v => v.type === 'seq');
+    if(!isEmpty(seqCol)) {
+      seqCol.align = 'center';
+      seqCol.headerAlign = "center";
+    }
+
     set(tableOptions, 'gridOptions', {
-      border: 'none',
-      size: 'mini',
+      border: 'full',
       showHeaderOverflow: true,
       showOverflow: true,
       stripe: true,
       round: true,
+      cellConfig: {
+        height: '40px',
+        ...tableOptions.gridOptions?.cellConfig
+      },
       ...tableOptions?.gridOptions,
     });
 
@@ -148,7 +157,7 @@ export const useBsTable = (options, tableRef) => {
         //   setTableData(data.list);
         //   setPageTotal(data.total);
         //   resolve(data);
-        // }, 2000)
+        // }, 2000);
       }
     });
   };