feat: BasicCardList 组件新增选择功能

ww
1 parent 80ee6a6f
Showing 5 changed files with 246 additions and 30 deletions
src/components/CardList/src/BasicCardList.vue
src/components/CardList/src/hooks/useCardList.ts
src/components/CardList/src/hooks/useCardListData.ts
src/components/CardList/src/hooks/useCardListSelected.ts
src/components/CardList/src/types.ts
--- a/src/components/CardList/src/BasicCardList.vue
View file @9a4aa30
+++ b/src/components/CardList/src/BasicCardList.vue
View file @9a4aa30
@@ -12,6 +12,7 @@
   import { FETCH_SETTING } from '../../Table/src/const';
   import { useCardForm } from './hooks/useCardForm';
   import { Icon } from '/@/components/Icon';
+  import { useCardListSelected } from './hooks/useCardListSelected';
   const emit = defineEmits<{
     (eventName: 'fetchSuccess', result: { items: Recordable[]; total: number }): void;
@@ -33,6 +34,7 @@
     immediate: true,
     fetchSetting: () => FETCH_SETTING,
     autoCreateKey: true,
+    offsetHeight: 0,
   });
   const tableData = ref<Recordable[]>([]);
@@ -56,7 +58,15 @@
   const { loading, setLoading, getLoading } = useLoading();
-  const { getDataSourceRef, getRowKey, fetch, reload } = useCardListData(getProps, formActions, {
+  const {
+    getDataSourceRef,
+    getRowKey,
+    fetch,
+    reload,
+    updateTableDataRecord,
+    findCardDataRecord,
+    setCardListData,
+  } = useCardListData(getProps, formActions, {
     setLoading,
     getPaginationInfo,
     emit,
@@ -77,14 +87,30 @@
     getLoading
   );
+  const {
+    handlerSelected,
+    selectedClass,
+    selectedKeys,
+    selectAllToggle,
+    selectedAll,
+    clearSelectedKeys,
+    getSelectedKeys,
+    getSelectedRecords,
+  } = useCardListSelected(getDataSourceRef, getProps, {
+    updateTableDataRecord,
+    findCardDataRecord,
+    getRowKey,
+    setCardListData,
+  });
+
   function handleCardListChange() {
     reload();
   }
-  const getBindData = computed<ListProps>(() => {
+  const getBindValues = computed<ListProps>(() => {
     const dataSource = unref(getDataSourceRef);
-    return {
+    const props = {
       dataSource,
       grid: unref(getListGrid),
       loading: unref(loading),
@@ -95,8 +121,9 @@
           handleCardListChange();
         },
       },
-      rowKey: unref(getRowKey),
+      rowKey: (record: Recordable) => record[unref(getRowKey)],
     } as ListProps;
+    return props;
   });
   watch(cardListLayout, () => {
@@ -111,6 +138,10 @@
     setPagination,
     getPagination,
     reload,
+    selectedAll,
+    clearSelectedKeys,
+    getSelectedKeys,
+    getSelectedRecords,
   };
   function setProps(props: Partial<BasicCardListPropsType> = {}) {
@@ -137,7 +168,7 @@
     </section>
     <section class="w-full bg-light-50 dark:bg-dark-900 p-4 flex-auto h-full">
-      <List ref="listElRef" v-bind="getBindData">
+      <List ref="listElRef" v-bind="getBindValues">
         <template #header>
           <section class="flex justify-between items-center">
             <div>
@@ -150,6 +181,9 @@
               <slot name="toolbar"></slot>
             </div>
             <div v-if="showCardListSetting" class="flex gap-4">
+              <Button v-if="getProps.selections" @click="selectAllToggle" type="primary">
+                {{ selectedKeys.length === getDataSourceRef.length ? '反选' : '全选' }}
+              </Button>
               <CardListLayout v-model:row="cardListLayout.row" v-model:col="cardListLayout.col" />
               <Tooltip title="刷新">
                 <Button type="primary" @click="reload()" :loading="loading">
@@ -159,9 +193,18 @@
             </div>
           </section>
         </template>
-        <template #renderItem="{ item }">
-          <List.Item :style="{ '--totalHeight': containerHeight }">
-            <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot>
+        <template #renderItem="{ item }: CardListRenderItem">
+          <List.Item
+            :class="selectedKeys.includes(item[getRowKey]) ? selectedClass : ''"
+            @click="handlerSelected($event, item)"
+          >
+            <slot
+              name="renderItem"
+              :item="item"
+              :totalHeight="containerHeight"
+              :checked="item?.checked"
+            >
+            </slot>
           </List.Item>
         </template>
       </List>
@@ -175,6 +218,38 @@
       .ant-spin-container {
         overflow-x: hidden;
         overflow-y: auto;
+
+        .ant-list-item {
+          border: 2px transparent solid;
+          position: relative;
+
+          &.basic-card-list-item-checked {
+            border: 2px solid #377dff;
+
+            &::after {
+              position: absolute;
+              inset-block-start: 2px;
+              inset-inline-end: 2px;
+              width: 0;
+              height: 0;
+              border: 10px solid #1677ff;
+              border-block-end: 10px solid transparent;
+              border-inline-start: 10px solid transparent;
+              // border-start-end-radius: 6px;
+              content: '';
+            }
+
+            &::before {
+              content: '';
+              position: absolute;
+              background-color: #53a2fd;
+              width: 100%;
+              height: 100%;
+              opacity: 0.2;
+              z-index: 99;
+            }
+          }
+        }
       }
       .ant-list-header {
--- a/src/components/CardList/src/hooks/useCardList.ts
View file @9a4aa30
+++ b/src/components/CardList/src/hooks/useCardList.ts
View file @9a4aa30
-import { WatchStopHandle, onUnmounted, ref, unref, watch } from 'vue';
+import { WatchStopHandle, ref, unref, watch } from 'vue';
 import { BasicCardListPropsType, CardListActionType } from '../types';
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
@@ -6,6 +6,7 @@ import { FormActionType } from '/@/components/Form';
 import { getDynamicProps } from '/@/utils';
 import { PaginationProps } from 'ant-design-vue';
 import { FetchParams } from './useCardListData';
+import { tryOnUnmounted } from '@vueuse/core';
 type UseTableMethod = CardListActionType & {
   getForm: () => FormActionType;
@@ -22,7 +23,7 @@ export function useCardList(
   function register(instance: CardListActionType, formInstance: FormActionType) {
     isProdMode() &&
-      onUnmounted(() => {
+      tryOnUnmounted(() => {
         cardListRef.value = null;
         loadedRef.value = null;
       });
@@ -77,6 +78,18 @@ export function useCardList(
     reload: (opt?: FetchParams) => {
       return getTableInstance().reload(opt);
     },
+    selectedAll: () => {
+      return getTableInstance().selectedAll();
+    },
+    clearSelectedKeys: () => {
+      return getTableInstance().clearSelectedKeys();
+    },
+    getSelectedKeys: () => {
+      return getTableInstance().getSelectedKeys();
+    },
+    getSelectedRecords: () => {
+      return getTableInstance().getSelectedRecords();
+    },
   };
   return [register, cardListActionType];
--- a/src/components/CardList/src/hooks/useCardListData.ts
View file @9a4aa30
+++ b/src/components/CardList/src/hooks/useCardListData.ts
View file @9a4aa30
@@ -49,25 +49,22 @@ export function useCardListData(
     }
   );
-  function setTableKey(items: any[]) {
+  function setCardKey(items: any[]) {
     if (!items || !Array.isArray(items)) return;
     items.forEach((item) => {
       if (!item[ROW_KEY]) {
         item[ROW_KEY] = buildUUID();
       }
-      if (item.children && item.children.length) {
-        setTableKey(item.children);
-      }
     });
   }
-  const getAutoCreateKey = computed(() => {
-    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  const getAutoCreateKey = computed<boolean>(() => {
+    return !!(unref(propsRef).autoCreateKey && !unref(propsRef).rowKey);
   });
-  const getRowKey = computed(() => {
+  const getRowKey = computed<string | number>(() => {
     const { rowKey } = unref(propsRef);
-    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey!;
   });
   const getDataSourceRef = computed(() => {
@@ -87,13 +84,14 @@ export function useCardListData(
               item[ROW_KEY] = buildUUID();
             }
             if (item.children && item.children.length) {
-              setTableKey(item.children);
+              setCardKey(item.children);
             }
           });
           dataSourceRef.value = data;
         }
       }
     }
+
     return unref(dataSourceRef);
   });
@@ -176,10 +174,47 @@ export function useCardListData(
     }
   }
+  function findCardDataRecord(rowKey: string | number) {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+
+    const rowKeyName = unref(getRowKey);
+    if (!rowKeyName) return;
+
+    const findRow = (array: any[]) => {
+      let ret;
+      array.some(function iter(r) {
+        if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
+          ret = r;
+          return true;
+        }
+      });
+      return ret;
+    };
+
+    return findRow(dataSourceRef.value);
+  }
+
+  function updateTableDataRecord(
+    rowKey: string | number,
+    record: Recordable
+  ): Recordable | undefined {
+    const row = findCardDataRecord(rowKey);
+    if (row) {
+      for (const field in row) {
+        if (Reflect.has(record, field)) row[field] = record[field];
+      }
+      return row;
+    }
+  }
+
   async function reload(opt?: FetchParams) {
     await fetch(opt);
   }
+  function setCardListData<T = Recordable>(values: T[]) {
+    dataSourceRef.value = values as Recordable[];
+  }
+
   onMounted(() => {
     useTimeoutFn(() => {
       unref(propsRef).immediate && fetch();
@@ -191,5 +226,8 @@ export function useCardListData(
     fetch,
     getRowKey,
     getDataSourceRef,
+    setCardListData,
+    findCardDataRecord,
+    updateTableDataRecord,
   };
 }
--- a/src/components/CardList/src/hooks/useCardListSelected.ts
View file @9a4aa30
+++ b/src/components/CardList/src/hooks/useCardListSelected.ts
View file @9a4aa30
-import { ComputedRef, computed, unref } from 'vue';
+import { ComputedRef, computed, ref, toRaw, unref, watch } from 'vue';
+import { BasicCardListPropsType, CardListSelectionsType, UseCardListDataType } from '../types';
+import { isBoolean } from '/@/utils/is';
+import { cloneDeep } from 'lodash-es';
+
+export const CHECKED_FIELD = 'CARD_LIST_CHECKED_STATUS';
+
+export const DEFAULT_SELECTED_CLASS = 'basic-card-list-item-checked';
+
+interface CardListSelectActionType {
+  updateTableDataRecord: UseCardListDataType['updateTableDataRecord'];
+  findCardDataRecord: UseCardListDataType['findCardDataRecord'];
+  getRowKey: UseCardListDataType['getRowKey'];
+  setCardListData: UseCardListDataType['setCardListData'];
+}
 export function useCardListSelected(
-  getDataSourceRef: ComputedRef<(Recordable & { checked?: boolean })[]>
+  getDataSourceRef: ComputedRef<Recordable[]>,
+  propsRef: ComputedRef<BasicCardListPropsType>,
+  { getRowKey }: CardListSelectActionType
 ) {
+  const selectedKeys = ref<string[]>([]);
+
+  const selectedClass = ref('');
+
   const getHasSelectedRecordStatus = computed(() =>
     unref(getDataSourceRef).find((item) => item.checked)
   );
-  // function handlerSelect
+  const getShouldUseDefaultStyle = computed(
+    () =>
+      isBoolean(unref(propsRef).selections) ||
+      !(unref(propsRef).selections as CardListSelectionsType).customCheckedStyle
+  );
+
+  watch(
+    () => unref(propsRef).selections,
+    () => {
+      selectedClass.value =
+        isBoolean(unref(propsRef).selections) ||
+        !(unref(propsRef).selections as CardListSelectionsType).customCheckedStyle
+          ? DEFAULT_SELECTED_CLASS
+          : '';
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function handlerSelected(_event: MouseEvent, record: Recordable) {
+    if (!unref(propsRef).selections) return;
+    const rowKey = record[unref(getRowKey)];
+    const index = unref(selectedKeys).findIndex((key) => key === rowKey);
+    ~index ? selectedKeys.value.splice(index, 1) : unref(selectedKeys).push(rowKey);
+
+    if (isBoolean(unref(propsRef).selections)) return;
+
+    (unref(propsRef).selections as CardListSelectionsType)?.onSelect?.(record, !!~index);
+  }
+
+  function selectedAll() {
+    selectedKeys.value = unref(getDataSourceRef).map((item) => item[unref(getRowKey)]);
+
+    if (isBoolean(unref(propsRef).selections)) return;
+
+    (unref(propsRef).selections as CardListSelectionsType)?.onSelectAll?.(
+      toRaw(unref(getDataSourceRef))
+    );
+  }
+
+  function clearSelectedKeys() {
+    selectedKeys.value = [];
+  }
+
+  function getSelectedKeys() {
+    return toRaw(unref(selectedKeys));
+  }
+
+  function getSelectedRecords() {
+    const data = cloneDeep(unref(getDataSourceRef));
+    return data.filter((item) => unref(selectedKeys).includes(item[unref(getRowKey)]));
+  }
+
+  function selectAllToggle() {
+    unref(getDataSourceRef).length === unref(selectedKeys).length
+      ? (selectedKeys.value = [])
+      : selectedAll();
+  }
   return {
+    selectedKeys,
+    selectedClass,
+    getShouldUseDefaultStyle,
     getHasSelectedRecordStatus,
+    handlerSelected,
+    selectedAll,
+    selectAllToggle,
+    clearSelectedKeys,
+    getSelectedKeys,
+    getSelectedRecords,
   };
 }
--- a/src/components/CardList/src/types.ts
View file @9a4aa30
+++ b/src/components/CardList/src/types.ts
View file @9a4aa30
@@ -4,6 +4,7 @@ import { FetchSetting } from '../../Table';
 import { useLoading } from './hooks/useLoading';
 import { usePagination } from './hooks/usePagination';
 import { FetchParams, useCardListData } from './hooks/useCardListData';
+import { useCardListSelected } from './hooks/useCardListSelected';
 // export interface CardList
@@ -22,11 +23,11 @@ export interface BasicCardListPropsType<T = Recordable> {
   fetchSetting?: FetchSetting;
   afterFetch?: (items: T[], result: any) => Promise<any[]>;
   autoCreateKey?: boolean;
-  rowKey?: (item: T) => string | number;
+  rowKey?: string | number;
   immediate?: boolean;
   handleSearchInfoFn?: Fn;
   baseLayout?: Record<'row' | 'col', number>;
-  selections?: boolean;
+  selections?: boolean | CardListSelectionsType;
 }
 export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {
@@ -36,14 +37,21 @@ export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 
 export type UseLoading = ReturnType<typeof useLoading>;
 export type UsePaginationType = ReturnType<typeof usePagination>;
+
 export type UseCardListDataType = ReturnType<typeof useCardListData>;
+export type UseCardListSelected = ReturnType<typeof useCardListSelected>;
+
 export interface CardListActionType {
   setProps: (props: Partial<BasicCardListPropsType>) => void;
   setLoading: UseLoading['setLoading'];
   setPagination: UsePaginationType['setPagination'];
   getPagination: UsePaginationType['getPagination'];
   reload: UseCardListDataType['reload'];
+  selectedAll: UseCardListSelected['selectedAll'];
+  clearSelectedKeys: UseCardListSelected['clearSelectedKeys'];
+  getSelectedKeys: UseCardListSelected['getSelectedKeys'];
+  getSelectedRecords: UseCardListSelected['getSelectedRecords'];
 }
 export interface CardListEmitType {
@@ -51,13 +59,8 @@ export interface CardListEmitType {
   (eventName: 'fetchError', error: Error): void;
 }
-export interface CardListRenderItem<T = Recordable & { checked?: boolean }> {
-  item: T;
-  totalHeight: number;
-}
-
 export interface CardListSelectionsType<T = Recordable> {
+  customCheckedStyle?: boolean;
   onSelect?: (record: T, selected: boolean) => any;
   onSelectAll: (selectedRecords: T[]) => any;
-  onSelectInvert: (selectedRecords: T[]) => any;
 }