👣 重构底层

kicc-ui/src/views/system/config/index.vue

@@ -57,6 +57,7 @@
               y: state.tableHeight,
               scrollToFirstRowOnChange: true
             }"
+            :rowClassName="getRowClassName"
             :rowSelection="getRowSelectionRef"
             :pagination="getPaginationInfo"
             @change="handleTablePaginationChange"
@@ -125,6 +126,22 @@
               </div>
             </div>
           </div>
+          <div style="margin:-2px 0 -2px;padding-top: 5px;">
+            <slot name="tableTop">
+              <AAlert type="info" show-icon class="alert">
+                <template #message>
+                  <template v-if="getSelectRowKeys().length > 0">
+                    <span>已选中 {{ getSelectRowKeys().length }} 条记录(可跨页)</span>
+                    <ADivider type="vertical"/>
+                    <a @click="setSelectedRowKeys([])">清空</a>
+                  </template>
+                  <template v-else>
+                    <span>未选中任何数据</span>
+                  </template>
+                </template>
+              </AAlert>
+            </slot>
+          </div>
         </div>
       </template>
     </ATable>
@@ -144,7 +161,7 @@
   import { BasicTitle } from '/@/components/Basic';
   import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
   import {ref, onMounted, watchEffect, ComputedRef, computed, watch} from 'vue';
-  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker } from 'ant-design-vue';
+  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker, Alert } from 'ant-design-vue';
   import {BasicTableProps, PaginationProps, SizeType, SorterResult} from '/@/components/Table';
   import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
@@ -161,8 +178,7 @@
   import {useRowSelection} from "/@/components/Table/src/hooks/useRowSelection";
   import {basicProps} from "/@/components/Table/src/props";
   import {usePagination} from "/@/components/Table/src/hooks/usePagination";
-  import {PAGE_SIZE} from "/@/components/Table/src/const";
-  import {isFunction} from "/@/utils/is";
+  import {useTableStyle} from "/@/components/Table/src/hooks/useTableStyle";
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
@@ -195,6 +211,7 @@
   const ARow = Row;
   const ACol = Col;
   const ASelect = Select;
+  const AAlert = Alert;
   const ASelectOption = Select.Option;
   const ARangePicker = DatePicker.RangePicker;
 
@@ -266,6 +283,8 @@
     setShowPagination,
     getShowPagination
   } = usePagination(basicTableProps);
+  // 使用vben-table行斑马线
+  const { getRowClassName } = useTableStyle(basicTableProps, prefixCls);
 
   /** 生命周期钩子回调处理区域 */
   onMounted(() => {