@ditari/bsui 1.1.47 → 5.0.1

package/src/components/table/table.tsx

@@ -0,0 +1,491 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+import { type ExtractPropTypes, type PropType } from "vue";
+import { Flex, Pagination, Table, theme } from "ant-design-vue";
+import { type TablePaginationConfig } from "ant-design-vue";
+
+import { type PaginationProps } from "./interface";
+import { css } from "@emotion/css";
+import type { ColumnsType } from "ant-design-vue/es/table";
+import type {
+  SelectionSelectFn,
+  TableRowSelection
+} from "ant-design-vue/es/table/interface";
+import { merge } from "lodash";
+
+export type Key = string | number;
+export type SizeType = "small" | "middle" | "large" | undefined;
+
+// 定义分页
+interface Page {
+  total: number;
+  current: number;
+  pageSize: number;
+}
+
+// 定义表格配置接口，支持泛型
+interface Config<T = unknown> {
+  columns: ColumnsType<T>;
+  // 分页
+  pagination?: Page | undefined;
+  // 分页配置
+  paginationConfig?: PaginationProps;
+  changePagination?: (current: number, size: number) => void;
+  // 单击
+  click?: (record: Record<string, unknown>, index: number) => void;
+  // 双击
+  dbClick?: (record: Record<string, unknown>, index: number) => void;
+  // 选择框的默认属性配置
+  getCheckboxProps?: (record: unknown) => Record<string, unknown> | undefined; // 返回一个对象或者 undefined
+  // 点击行号激活的class
+  activeRowClass?: string;
+  // 复选框方式
+  selection?: string;
+  // 切换分页是否保留选中的ID
+  keepSelected?: boolean;
+}
+
+// 定义 Props 类型，支持泛型
+export const tableProps = <T = unknown,>() => ({
+  height: { type: Number, default: 0 },
+  data: { type: Array as PropType<T[]>, default: () => [] }, // 泛型约束
+  loading: { type: Boolean, default: false },
+  rowKey: { type: String, default: "id" },
+  bordered: { type: Boolean, default: false },
+  size: { type: String as PropType<SizeType>, default: "small" },
+  keys: { type: Array as PropType<Key[]>, default: () => [] },
+  config: { type: Object as PropType<Config<T>>, required: true }
+});
+
+export type TableProps = Partial<
+  ExtractPropTypes<ReturnType<typeof tableProps>>
+>;
+
+// 分页组件默认配置
+const defaultPaginationProps: PaginationProps = {
+  defaultPageSize: 20,
+  disabled: false,
+  hideOnSinglePage: false,
+  pageSize: 20,
+  pageSizeOptions: ["20", "40", "60", "80", "99"],
+  responsive: false,
+  showLessItems: false,
+  showQuickJumper: true,
+  showSizeChanger: true, // 默认展示切换器
+  showTotal: total => `总共 ${total} 条数据`,
+  simple: false,
+  size: "default",
+  total: 0
+};
+
+// 表格默认配置
+const defaultConfig: Config = {
+  columns: [],
+  pagination: undefined,
+  paginationConfig: defaultPaginationProps,
+  activeRowClass: "",
+  selection: "N",
+  keepSelected: false
+};
+
+const paginationStyle = css`
+  display: flex;
+  justify-content: center;
+`;
+
+// 定义泛型组件
+const DTable = defineComponent({
+  name: "DTable",
+  props: tableProps(), // 初始泛型设置为 `unknown`
+  emits: ["update:keys"],
+  setup(props, { emit, slots }) {
+    const { useToken } = theme;
+    const { token } = useToken();
+    console.log(token);
+    // 保存选中的唯一id
+    const selectedRowKeys = ref<Key[]>(props.keys || []);
+    // 计算表格高度
+    //const height = computed(() => props.height);
+
+    const { columns, data, pagination } = useProps();
+    const { tableSlots } = useSlots();
+    const { paginationConfig, onPaginationChange } = usePagination();
+    const { tableRef, tableHeight, antTableBodyRef } = useHeight();
+    const rowSelection = useRowSelection();
+
+    onMounted(() => {});
+
+    /**
+     * props计算属性处理
+     */
+    function useProps() {
+      // 定义计算属性
+      const _config = computed(() => merge({}, defaultConfig, props.config));
+      const columns = computed(() => _config.value.columns);
+      const data = computed(() => props.data || []);
+      const pagination = computed(() => _config.value.pagination || false);
+
+      return {
+        columns,
+        data,
+        pagination
+      };
+    }
+
+    /**
+     * 插槽处理
+     */
+    function useSlots() {
+      console.log(slots);
+      // 定义插槽
+      const tableSlots = {
+        bodyCell: (params: unknown) => slots.bodyCell?.(params),
+        summary: () => slots.summary?.()
+      };
+
+      return {
+        tableSlots
+      };
+    }
+
+    function useHeight() {
+      const tableRef = ref();
+      const tableHeight = ref(0);
+      let headerHeight = 0,
+        tableEl: HTMLElement;
+
+      // 表格body对象
+      const antTableBodyRef = ref<HTMLElement>();
+
+      watch(
+        () => props.height,
+        val => {
+          if (val !== 0) {
+            nextTick(() => {
+              _tableBodyHeight(val);
+            });
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+
+      function _tableBodyHeight(height: number) {
+        tableEl = tableRef?.value?.$el;
+        //表头高度
+        headerHeight = useEleHeight(
+          tableEl.getElementsByClassName("ant-table-header")[0]
+        );
+        // 分页
+        const paginationEl = tableEl.getElementsByClassName(
+          "ant-pagination"
+        )[0] as HTMLElement | undefined;
+        let paginationHeight = 0;
+        if (paginationEl) {
+          paginationEl.style.marginBottom = "0";
+          paginationHeight = useEleHeight(paginationEl as never) ?? 0;
+        }
+
+        //总结行
+        let summaryHeight = 0;
+        const summaryEl = tableEl.getElementsByClassName(
+          "ant-table-summary"
+        )[0] as HTMLElement | undefined;
+        if (summaryEl) {
+          summaryHeight = useEleHeight(summaryEl as HTMLElement) ?? 0;
+        }
+
+        tableHeight.value =
+          height - paginationHeight - headerHeight - summaryHeight;
+
+        antTableBodyRef.value = tableEl.getElementsByClassName(
+          "ant-table-body"
+        )[0] as HTMLElement;
+
+        if (antTableBodyRef.value) {
+          // 设置body高度
+          antTableBodyRef.value.style.height = tableHeight.value + "px";
+          //TODO antTableBodyRef 滚动到底部的时候，需要去除底部边框，否则边框会重叠
+          //antTableBodyRef.value.style.borderBottom = "1px solid #f0f0f0";
+        }
+      }
+
+      return {
+        tableRef,
+        tableHeight,
+        antTableBodyRef
+      };
+    }
+
+    function usePagination() {
+      const { changePagination } = props.config!;
+      const paginationConfig = computed<TablePaginationConfig>(() => {
+        return {
+          position: ["bottomCenter"], // 符合类型的分页位置
+          total: 0, // 确保符合要求
+          ...defaultPaginationProps,
+          ...pagination.value
+        };
+      });
+
+      const onPaginationChange = (page: number, pageSize: number) => {
+        const { selection, keepSelected } = props.config!;
+        changePagination?.(page, pageSize);
+        // 切换分页的时候，表体滚动到顶部
+        antTableBodyRef.value!.scrollTop = 0;
+
+        // 如果当前为单选或未开启分页保留数据选中的数据都会被清除
+        // 清空历史选中数据
+        if (selection === "S" || !keepSelected) {
+          // 只有selectedRowKeys被清空时，这里才触发update；
+          // 不加判断，会出现执行update后，父组件监听的watch每次都会触发
+          if (selectedRowKeys.value.length > 0) {
+            selectedRowKeys.value = [];
+            emit("update:keys", selectedRowKeys.value);
+          }
+        }
+      };
+
+      return {
+        paginationConfig,
+        onPaginationChange
+      };
+    }
+
+    function useCustomRow() {
+      return (record: never, index: number) => {
+        // 用于存储 在某个事件内双击两次 则取消单击事件业务
+        let clickTimeout: number = 0;
+        const {
+          rowKey,
+          config: { click, dbClick, selection, getCheckboxProps } = {} as Config
+        } = props;
+
+        // 当前点击行的唯一ID，通过rowKey从record中取值
+        const id = record[rowKey];
+
+        /**
+         * 处理单击事件业务
+         * @param record 当前点击行数据
+         */
+        const onClick = () => {
+          // 获取getCheckboxProps方法，如果不等于undefined，则执行方法获取disabled的值
+          // 否则checkEnable为false
+          const checkEnable =
+            getCheckboxProps === undefined
+              ? false
+              : getCheckboxProps(record)?.disabled;
+
+          if (selection === "N" || checkEnable) {
+            // 1. 未开启复选框 则不处理数据选中操作
+            // 2. 如果当前点击的行 包含在禁用的数据项目里面 则不进行选中操作
+            // 3. checkEnable 用来判断复选框属性的值，如果当前的数据满足getCheckboxProps这个
+            //    方法返回的disabled为true就不执行
+            //    复选框选中的操作
+            return;
+          }
+          const haveState = selectedRowKeys.value.some(
+            (key: Key) => key === id
+          );
+          if (haveState) {
+            //如果 当前点击行的ID 已存在 那么直接过滤掉当前的id
+            selectedRowKeys.value = selectedRowKeys.value.filter(
+              (key: Key) => key !== id
+            );
+          } else {
+            if (selection === "S") {
+              //单选的时候 清空选中的数据 再赋值新的ID
+              selectedRowKeys.value = [];
+              selectedRowKeys.value.push(id);
+            } else {
+              //多选直接追加ID
+              selectedRowKeys.value.push(id);
+            }
+          }
+          emit("update:keys", selectedRowKeys.value);
+        };
+
+        function activeRowBackground(event: Event) {
+          const { activeRowClass } = props.config!;
+          if (!activeRowClass) return;
+          const curEl = event.target;
+          if (curEl instanceof HTMLElement) {
+            const parentElement = curEl.parentNode as HTMLElement;
+            if (
+              parentElement &&
+              parentElement.classList.contains(activeRowClass)
+            ) {
+              parentElement.classList.remove(activeRowClass);
+            } else {
+              parentElement?.classList.add(activeRowClass);
+            }
+          }
+        }
+
+        return {
+          onClick: (event: Event) => {
+            clearTimeout(clickTimeout);
+            clickTimeout = window.setTimeout(() => {
+              // 处理背景激活逻辑
+              activeRowBackground(event);
+              // 处理单击事件业务
+              onClick();
+              // 回传数据 自定义单击后的业务
+              click?.(record, index);
+            }, 200);
+          }, // 点击行
+          onDblclick: () => {
+            clearTimeout(clickTimeout);
+            //  回传数据 自定义单击后的业务
+            dbClick?.(record, index);
+          }
+        };
+      };
+    }
+
+    function useRowSelection() {
+      const rowSelection = ref<TableRowSelection<unknown> | undefined>(
+        undefined
+      );
+
+      const { rowKey, config: { getCheckboxProps, selection } = {} } = props;
+
+      const onSelect: SelectionSelectFn<unknown> = (record, selected) => {
+        const data = record as Record<string, never>;
+        if (selection === "S") {
+          selectedRowKeys.value = [];
+          selectedRowKeys.value = selected ? [data[rowKey]] : [];
+        } else {
+          selectedRowKeys.value = selected
+            ? selectedRowKeys.value.concat(data[rowKey])
+            : selectedRowKeys.value.filter((key: Key) => key !== data[rowKey]);
+        }
+        emit("update:keys", selectedRowKeys.value);
+      };
+
+      const onChange = (rowKeys: Key[], selectedRows: unknown[]) => {
+        // 显式转换 selectedRows 的类型为 Record<string, never>[]
+        const data = selectedRows as Record<string, never>[];
+        // 等于0 说明是取消全选，反之
+        const selected = data.length !== 0;
+        // 显式转换 _ids 的类型为 Key[]
+        const _ids: Key[] = props.data.map(
+          record => (record as Record<string, unknown>)[rowKey] as Key
+        );
+
+        // 更新 selectedRowKeys
+        //  selected 为true，说明是全选，那么rowKeys是权限后的数组ID，需要过滤掉selectedRowKeys里的不在id才进行添加，
+        //  否则会出现，比如一开始选择了两条数据，然后再进行全选的话 会多出两个重复ID
+        // selected 为false，说明是取消全选，那么需要从selectedRowKeys过滤掉 _ids的id
+        selectedRowKeys.value = selected
+          ? selectedRowKeys.value.concat(
+              rowKeys.filter((key: Key) => !selectedRowKeys.value.includes(key))
+            )
+          : selectedRowKeys.value.filter((key: Key) => !_ids.includes(key));
+
+        emit("update:keys", selectedRowKeys.value);
+      };
+
+      // 监听父组件手动改变keys 重新赋值给 表格选中变量selectedRowKeys
+      // 否则父组件 改变keys后当前selectedRowKeys还是原来的值
+      watch(
+        () => props.keys,
+        val => {
+          selectedRowKeys.value = val;
+        }
+      );
+
+      watch(
+        () => props.config?.selection,
+        val => {
+          if (val !== "N") {
+            rowSelection.value = {
+              selectedRowKeys: selectedRowKeys as never,
+              onSelect,
+              onChange,
+              fixed: true,
+              columnTitle: selection === "S" ? "选择" : null,
+              columnWidth: selection === "S" ? 60 : 40,
+              getCheckboxProps: getCheckboxProps as never
+            };
+          } else {
+            rowSelection.value = undefined;
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+
+      return rowSelection;
+    }
+
+    return () => (
+      <Flex vertical={true} ref={tableRef}>
+        <Table
+          loading={props.loading}
+          size={props.size}
+          bordered={props.bordered}
+          dataSource={data.value}
+          columns={columns.value}
+          rowSelection={rowSelection.value}
+          customRow={useCustomRow() as never}
+          pagination={false}
+          rowKey={props.rowKey}
+          v-slots={tableSlots}
+          scroll={{
+            y: tableHeight.value,
+            x: "100%",
+            scrollToFirstRowOnChange: true
+          }}
+        />
+        <div class={paginationStyle}>
+          {pagination && (
+            <Pagination
+              style={{ marginTop: "16px" }}
+              v-model:current={paginationConfig.value.current}
+              v-model:pageSize={paginationConfig.value.pageSize}
+              total={paginationConfig.value.total}
+              disabled={props.loading}
+              show-size-changer
+              size={"default"}
+              hide-on-single-page={paginationConfig.value.hideOnSinglePage}
+              show-quick-jumper={paginationConfig.value.showQuickJumper}
+              default-page-size={paginationConfig.value.defaultPageSize}
+              page-size-options={paginationConfig.value.pageSizeOptions}
+              show-total={paginationConfig.value.showTotal}
+              onChange={onPaginationChange}
+            ></Pagination>
+          )}
+        </div>
+      </Flex>
+    );
+  }
+});
+
+export const useEleHeight = (node: Element) => {
+  const list = [
+    "margin-top",
+    "margin-bottom",
+    "border-top",
+    "border-bottom",
+    "padding-top",
+    "padding-bottom",
+    "height"
+  ];
+  const style = getComputedStyle(node);
+  return list
+    .map(k => parseInt(style.getPropertyValue(k), 10))
+    .reduce((prev, cur) => {
+      return prev + cur;
+    });
+};
+
+export default DTable;

package/src/index.scss

@@ -1,19 +1 @@
-@import "./theme/variable";
-@import "./grid/style";
-@import "./menu/style";
-@import "./layout/style";
-@import "./table/style";
-@import "./desensitize/style";
-@import "./modal/style";
-html,
-body,
-#app {
-  height: 100%;
-  background: $bg-color;
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none;
-  }
-}
-
-
+@use "./components/tab/style" as *;

package/src/index.ts

@@ -1,50 +1,31 @@
-import type { App } from "vue";
-import { createPinia } from "pinia";
-import { createPersistedState } from "pinia-plugin-persistedstate";
-
-import * as components from "./components";
-export * from "./components";
-
-
-export interface MenuIcon {
-  componentName: string | "nativeHtml";
-  type: string;
-}
-export interface Options {
-  menuIcon: MenuIcon;
-  prop?: string;
-}
-const c: any = components;
-export const install = function (app: App, opts: Options) {
-  Object.keys(c).forEach((key) => {
-    const component = c[key];
-    if (component.install) {
-      app.use(component);
-    }
-  });
-  //注册pinia
-  const pinia = createPinia();
-  //pinia启用持久化
-  pinia.use(
-    createPersistedState({
-      storage: sessionStorage
-    })
-  );
-  app.use(pinia);
-  app.provide("menuIcon", opts.menuIcon || {});
-
-  // // 创建 Web Worker 连接池实例
-  // const workerPool = new WorkerPool(DicWorker, 2); // 这里设置连接池的大小为 5
-  // workerPool.initialize();
-  // // 注入连接池实例
-  // app.provide("dicWorkerPool", workerPool);
-  // // 创建 Web Worker 连接池实例
-  // const repWorkerPool = new WorkerPool(ReplaceWorker, 2); // 这里设置连接池的大小为 5
-  // repWorkerPool.initialize();
-  // // 注入连接池实例
-  // app.provide("repWorkerPool", repWorkerPool);
-};
-
-export default {
-  install
-};
+import * as components from "./components";
+import type { App, DefineComponent, Plugin } from "vue";
+
+// import { version } from "../package.json";
+
+export * from "./components";
+
+console.log(components);
+// 定义组件类型，确保每个组件都可能具有 `install` 方法
+type ComponentWithInstall = DefineComponent<never, never, never> & {
+  install?: (app: App) => void;
+};
+
+export const install = (app: App) => {
+  Object.keys(components).forEach(key => {
+    const component = components[
+      key as keyof typeof components
+    ] as ComponentWithInstall;
+    // 类型断言，告诉 TypeScript component 可能是一个插件
+    const plugin = component as Plugin;
+    // 如果组件有 install 方法，则按插件安装
+    if (plugin.install) {
+      app.use(plugin);
+    }
+  });
+};
+
+export default {
+  // version,
+  install
+};

package/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    /* Linting */
+    "strict": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ESNext",
+    "lib": [
+      "dom",
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}