@ditari/bsui 1.1.48 → 5.0.1

package/src/table/Table.tsx

@@ -1,515 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onDeactivated,
-  PropType,
-  reactive,
-  ref,
-  watch
-  // watchEffect
-} from "vue";
-import { Pagination, Space, Table } from "ant-design-vue";
-import { useEleHeight } from "../_utils/html";
-import { prefixName } from "../theme";
-
-import type { TableProps, Key } from "./interface/table";
-/**
- * 表格组件 基于TSX封装ATable
- */
-const tableProps = () => {
-  return {
-    data: {
-      type: Object as PropType<TableProps["data"]>,
-      required: true
-    },
-    height: {
-      type: Number as PropType<TableProps["height"]>,
-      default: 300
-    },
-    keys: Array as PropType<TableProps["keys"]>,
-    rowKey: {
-      type: String as PropType<TableProps["rowKey"]>,
-      default: "id"
-    },
-    loading: {
-      type: Boolean as PropType<TableProps["loading"]>,
-      default: false
-    },
-    pagination: {
-      type: Object as PropType<TableProps["pagination"]>,
-      default: () => ({})
-    },
-    config: {
-      type: Object as PropType<TableProps["config"]>,
-      default: () => ({})
-    },
-    expandedRowKeys: {
-      type: Object as PropType<TableProps["expandedRowKeys"]>,
-      default: () => []
-    },
-    defaultExpandAllRows: {
-      type: Boolean as PropType<TableProps["defaultExpandAllRows"]>,
-      default: () => true
-    }
-  };
-};
-
-// 使用有问题
-// const tableEmits = defineEmits<{
-//   "update:keys": (keys: []) => void;
-// }>();
-// interface MyEvents {
-//   [key: string]: (...args: any[]) => void;
-//   "update:keys": (keys: []) => void;
-// }
-
-//分页class名称
-const basePageClassName = `${prefixName}-pagination`;
-
-/**
- * 表格组件定义
- */
-const DXTable = defineComponent({
-  name: "DTable",
-  inheritAttrs: false,
-  props: tableProps(),
-  // emits: {  "update:keys": (keys: []) => void }
-  // TODO 需要做调整
-  emits: ["update:keys"],
-  setup: function (props, { emit, slots, attrs }) {
-    //分页默认配置
-    const paginationConfig = reactive({
-      defaultPageSize: 20,
-      hideOnSinglePage: false,
-      pageSizeOptions: ["10", "20", "30", "40"],
-      responsive: true,
-      showQuickJumper: true,
-      showLessItems: true,
-      showTotal: (total: number) => {
-        return `总共 ${total} 条`;
-      }
-    });
-
-    // 保存选中的唯一id
-    const selectedRowKeys = ref<any>(props.keys || []);
-    // 数据源
-    const dataSource = computed(() => props.data);
-    // 表格列
-    const columns = computed(() => props.config?.columns ?? []);
-    const paginationState = computed(
-      () => props.config?.pagination ?? ({} as any)
-    );
-    // 展开行
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    const expandedKeys = ref<any>(props.expandedRowKeys);
-    // 分页条数配置
-    paginationConfig.pageSizeOptions =
-      props.config?.pageOption?.sizeOptions ?? paginationConfig.pageSizeOptions;
-    // 默认条数
-    paginationConfig.defaultPageSize =
-      props.config?.pageOption?.defaultSize ?? paginationConfig.defaultPageSize;
-
-    //TODO 后续改进
-    // watchEffect(() => {
-    //   const { expandedRowKeys } = props;
-    //   expandedKeys.value = expandedRowKeys;
-    // });
-
-    // 初始化表格
-    const {
-      tableRef,
-      tableRootRef,
-      tableHeight,
-      onPageChange,
-      onRowClassName
-    } = useTable();
-
-    function useTable() {
-      const {
-        rowClassName,
-        keepSelected,
-        onPageChange: onChange
-      } = props.config;
-
-      const selection = props.config.selection ?? "N";
-      const isInit = ref(false);
-      // 表格根div
-      const tableRootRef = ref<HTMLElement>();
-      // 表格组件对象
-      const tableRef = ref<any>(null);
-      // 表格计算出来的高度
-      const tableHeight = ref<number>();
-      // 表格body对象
-      const antTableBodyRef = ref<any>(null);
-      // 计算高度
-      const playHeight = (height: number) => {
-        try {
-          const tableEl = tableRef?.value?.$el;
-          const headerHeight = useEleHeight(
-            tableEl.getElementsByClassName("ant-table-header")[0]
-          );
-          isInit.value = true;
-          // 获取分页组件高度
-          let paginationHeight = 0;
-          if (props.config.pagination) {
-            const paginationEl =
-              tableRootRef.value?.getElementsByClassName(basePageClassName)[0];
-            paginationHeight = useEleHeight(paginationEl as any) ?? 0;
-          }
-          tableHeight.value = height - (headerHeight + paginationHeight);
-
-          // 设置body高度
-          tableEl.getElementsByClassName("ant-table-body")[0].style.height =
-            tableHeight.value + "px";
-          // 表格body对象 用于切换页码后滚动条置顶
-          antTableBodyRef.value =
-            tableEl.getElementsByClassName("ant-table-body")[0];
-        } catch (e) {
-          console.warn(e);
-        }
-      };
-      //监听传入的height的变化 默认组件创建的时候会执行一次
-      // watchEffect(() => {
-      //   if (props.height !== 0) {
-      //     nextTick(() => {
-      //       if (isInit.value) {
-      //         playHeight(props.height);
-      //       } else {
-      //         // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
-      //         setTimeout(() => {
-      //           playHeight(props.height);
-      //           // 如果表格头有很多列的情况下，获取到的头部高度不对，需要延迟执行获取高度方法
-      //         }, 100);
-      //       }
-      //     });
-      //   }
-      // });
-
-      let playTimeout: any = null;
-      watch(
-        () => props.height,
-        (val) => {
-          if (val !== 0) {
-            nextTick(() => {
-              if (isInit.value) {
-                playHeight(props.height);
-              } else {
-                // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
-                playTimeout = setTimeout(() => {
-                  playHeight(props.height);
-                  // 如果表格头有很多列的情况下，获取到的头部高度不对，需要延迟执行获取高度方法
-                }, 100);
-              }
-            });
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-
-      onBeforeUnmount(() => {
-        playTimeout && clearTimeout(playTimeout);
-      });
-      onDeactivated(() => {
-        playTimeout && clearTimeout(playTimeout);
-      });
-
-      // 监听分页组件
-      const onPageChange = (page: number, size: number) => {
-        onChange ? onChange({ page: page === 0 ? 1 : page, size }) : null;
-        // 切换分页的时候，表体滚动到顶部
-        antTableBodyRef.value.scrollTop = 0;
-        // 如果当前为单选或未开启分页保留数据选中的数据都会被清除
-        // 清空历史选中数据
-        if (selection === "S" || !keepSelected) {
-          selectedRowKeys.value = [];
-          emit("update:keys", selectedRowKeys.value);
-        }
-      };
-      //自定义样式
-      const onRowClassName = (record: any, index: number) => {
-        return rowClassName ? rowClassName(record, index) : undefined;
-      };
-      return {
-        tableRef,
-        tableRootRef,
-        tableHeight,
-        onPageChange,
-        onRowClassName
-      };
-    }
-
-    //表格选中配置
-    const rowSelection = useRowSelection();
-
-    function useRowSelection() {
-      const {
-        rowKey,
-        config: { getCheckboxProps }
-      } = props;
-
-      let localSelection = props.config.selection ?? "N";
-      //if (selection === "N") return undefined;
-
-      const onSelect = (record: any, selected: any) => {
-        if (localSelection === "S") {
-          selectedRowKeys.value = [];
-          selectedRowKeys.value = selected ? [record[rowKey]] : [];
-        } else {
-          selectedRowKeys.value = selected
-            ? selectedRowKeys.value.concat(record[rowKey])
-            : selectedRowKeys.value.filter(
-                (key: Key) => key !== record[rowKey]
-              );
-        }
-        emit("update:keys", selectedRowKeys.value);
-      };
-
-      const onSelectAll = (
-        selected: any,
-        selectedRows: any,
-        changeRows: any
-      ) => {
-        const _ids = changeRows.map((record: any) => record[rowKey]);
-        selectedRowKeys.value = selected
-          ? selectedRowKeys.value.concat(_ids)
-          : selectedRowKeys.value.filter((key: Key) => !_ids.includes(key));
-
-        emit("update:keys", selectedRowKeys.value);
-      };
-
-      // 监听父组件手动改变keys 重新赋值给 表格选中变量selectedRowKeys
-      // 否则父组件 改变keys后当前selectedRowKeys还是原来的值
-      watch(
-        () => props.keys,
-        (val) => {
-          selectedRowKeys.value = val;
-        }
-      );
-
-      const rowSelection = ref<any>(undefined);
-
-      watch(
-        () => props.config.selection,
-        (val) => {
-          localSelection = val as any;
-          if (localSelection !== "N") {
-            rowSelection.value = {
-              selectedRowKeys,
-              onSelect,
-              onSelectAll,
-              fixed: true,
-              columnTitle: localSelection === "S" ? "选择" : null,
-              columnWidth: localSelection === "S" ? 60 : 40,
-              getCheckboxProps: getCheckboxProps
-            };
-          } else {
-            rowSelection.value = undefined;
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-
-      // return {
-      //   selectedRowKeys,
-      //   onSelect,
-      //   onSelectAll,
-      //   fixed: true,
-      //   columnTitle: localSelection === "S" ? "选择" : null,
-      //   columnWidth: localSelection === "S" ? 60 : 40,
-      //   getCheckboxProps: getCheckboxProps
-      // };
-      return rowSelection;
-    }
-
-    const customRow = useCustomRow();
-
-    //表格行配置
-    function useCustomRow() {
-      return (record: any, index: any) => {
-        // 用于存储 在某个事件内双击两次 则取消单击事件业务
-        let clickTimeout: any = undefined;
-        const {
-          rowKey,
-          config: { click, dbClick, selection, getCheckboxProps }
-        } = props as any;
-
-        // 当前点击行的唯一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 onClickSelectedBg(event: any) {
-          const { clickSelectedClassName } = props.config;
-          if (!clickSelectedClassName) return;
-          const curEl = event.target;
-          // 找到父元素
-          const parentElement = curEl.parentNode;
-          // 判断父元素是否有某个 class
-          if (!parentElement.classList.contains(clickSelectedClassName)) {
-            // 如果父元素没有指定的 class，则添加 class
-            parentElement.classList.add(clickSelectedClassName);
-          } else {
-            // 如果父元素已经有指定的 class，则移除 class
-            parentElement.classList.remove(clickSelectedClassName);
-          }
-        }
-
-        return {
-          onClick: (event: any) => {
-            clearTimeout(clickTimeout);
-            clickTimeout = setTimeout(() => {
-              // 处理背景激活逻辑
-              onClickSelectedBg(event);
-              // 处理单击事件业务
-              onClick();
-              // 回传数据 自定义单击后的业务
-              click ? click(record, index) : undefined;
-            }, 200);
-          }, // 点击行
-          onDblclick: () => {
-            clearTimeout(clickTimeout);
-            //  回传数据 自定义单击后的业务
-            dbClick ? dbClick(record, index) : undefined;
-          }
-        };
-      };
-    }
-
-    const actionStop = (event: MouseEvent) => {
-      event.stopPropagation();
-    };
-
-    const expandRowByClick = computed(() => {
-      const { selection } = props.config;
-      return selection === "N";
-    });
-    const tableSlots: any = {};
-    if (slots.expandedRowRender) {
-      tableSlots.expandedRowRender = (record: any) => {
-        return (
-          <>{slots.expandedRowRender && slots.expandedRowRender(record)}</>
-        );
-      };
-    }
-    const summary = () => {
-      return <>{slots.summary && slots.summary()}</>;
-    };
-
-    /**
-     * 展开行事件
-     * @param expanded
-     * @param record
-     */
-    const onExpand = (expanded: any, record: any) => {
-      props.config.onExpand && props.config.onExpand({ expanded, record });
-    };
-
-    return () => (
-      <div ref={tableRootRef}>
-        <Table
-          ref={tableRef}
-          row-key={props.rowKey}
-          bordered={props.config.bordered}
-          {...attrs}
-          columns={columns.value}
-          dataSource={dataSource.value}
-          loading={props.loading}
-          size={props.config?.size ?? "small"}
-          scroll={{
-            scrollToFirstRowOnChange: true,
-            x: "100%",
-            y: tableHeight.value + "px"
-          }}
-          v-model:expandedRowKeys={expandedKeys.value}
-          expandRowByClick={expandRowByClick.value}
-          defaultExpandAllRows={props.defaultExpandAllRows}
-          pagination={false}
-          customRow={customRow}
-          rowSelection={rowSelection.value}
-          rowClassName={onRowClassName}
-          onExpand={onExpand}
-        >
-          {{
-            bodyCell: ({ column, record, index }: any) => {
-              if (column.slot === "action") {
-                return (
-                  <div onClick={actionStop} onDblclick={actionStop}>
-                    <Space>
-                      {slots.action && slots.action({ record, index })}
-                    </Space>
-                  </div>
-                );
-              }
-            },
-            ...tableSlots,
-            // 总结栏插槽
-            summary: summary
-          }}
-        </Table>
-        <Pagination
-          v-show={props.config.pagination}
-          class={[basePageClassName]}
-          v-model:current={paginationState.value.current}
-          v-model:pageSize={paginationState.value.pageSize}
-          disabled={props.loading}
-          show-size-changer
-          size={"default"}
-          hide-on-single-page={paginationConfig.hideOnSinglePage}
-          show-quick-jumper={paginationConfig.showQuickJumper}
-          default-page-size={paginationConfig.defaultPageSize}
-          page-size-options={paginationConfig.pageSizeOptions}
-          show-total={paginationConfig.showTotal}
-          total={paginationState.value.total}
-          onChange={onPageChange}
-        />
-      </div>
-    );
-  }
-});
-
-export default DXTable;

package/src/table/index.md

@@ -1 +0,0 @@
-# XI-Table 表格

package/src/table/index.ts

@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import Table from "./Table";
-
-Table.install = function (app: App) {
-  app.component(Table.name, Table);
-  return app;
-};
-
-export default Table;

package/src/table/interface/table.ts

@@ -1,64 +0,0 @@
-export type Key = string | number;
-export type SelectionType = "N" | "S" | "M"; // 无选择/单选/多选
-export type SizeType = "small" | "middle" | "middle";
-
-//表格配置
-export interface Config {
-  [key: string]: any;
-  // 是否开启边框
-  bordered?: boolean;
-  //表格列配置
-  columns?: any;
-  // 表格大小
-  size?: SizeType;
-  // 复选框
-  selection?: SelectionType;
-  // 是开启页码切换的时候保留选中的数据
-  keepSelected?: boolean;
-  // 分页
-  pagination?: Pagination;
-  // 分页事件
-  onPageChange?: (paging: { page: number; size: number }) => void;
-  // 自定义行样式
-  rowClassName?: (record: any, index: number) => any;
-  // 单击
-  click?: (record: unknown) => void;
-  // 双击
-  dbClick?: (record: any) => void;
-  // 选择框的默认属性配置
-  getCheckboxProps?: (record: any) => any;
-  // 点击激活背景色的class
-  clickSelectedClassName?: string;
-  // 分页配置
-  pageOption: {
-    sizeOptions: string[];
-    defaultSize: number;
-  };
-}
-
-export interface Pagination {
-  total: number;
-  current: number;
-  pageSize: number;
-}
-
-export interface TableProps {
-  // 保留
-  keys?: Key[];
-  //数据源
-  data: any;
-  //主键id
-  rowKey: string;
-  // 展开行的ID
-  expandedRowKeys?: string[];
-  // 是否默认展开全部
-  defaultExpandAllRows?: boolean;
-  //加载状态
-  loading?: false;
-  //表格高度
-  height: number;
-  //分页
-  pagination?: any;
-  // 配置
-  config: Config;
-}

package/src/table/style/index.scss

@@ -1,10 +0,0 @@
-@import "../../theme/variable.scss";
-
-.#{$prefix-name}-pagination {
-  margin-top: 24px;
-  text-align: center;
-}
-
-.ant-table.ant-table-bordered > .ant-table-container {
-  border-bottom: 1px solid #f0f0f0;
-}

package/src/theme/index.ts

@@ -1 +0,0 @@
-export const prefixName = "ditari-bsui";

package/src/theme/theme.scss

@@ -1 +0,0 @@
-@import "./variable";

package/src/theme/variable.scss

@@ -1,67 +0,0 @@
-// class 前缀
-$prefix-name: ditari-bsui;
-// 页面背景颜色
-$bg-color: #f0f2f5;
-//左侧logo高度
-$logo-height: 240px !default;
-// 左侧菜单底部图片
-$footer-slogan: 0px!default;
-/******======网格变量======******/
-//网格边框颜色
-$grid-border-color: #4e4e4e !default;
-// 网格里面输入框获取焦点时的边框颜色
-$grid-input-focus-border-color: #1890ff !default;
-//输入框校验不通过时候的颜色
-$grid-input-error-border-color: #ff4d4f !default;
-// 网格输入框边框宽度
-$grid-input-border-width: 2px !default;
-// 网格边框宽度
-$gird-border-width: 1px !default;
-// 网格里的输入框校验结果是否显示
-$gird-error-display: block !default;
-
-
-/******======左侧菜单======******/
-// 左侧菜单
-$logo-height: 40px !default;
-//左侧菜单北京颜色
-$side-bg-color: #162157 !default;
-//子菜单展开后的背景颜色
-$side-menu-sub-bg-color: #101847 !default;
-
-/******======多标签======******/
-// 背景色
-$nav-tab-bg-color: linear-gradient(270deg, #019cfe 0%, #0165fe 100%) !default;
-//分割符颜色
-$nav-tab-dividers-color: #fff !default;
-// 字体颜色
-$nav-tab-text-color: #fff !default;
-// 悬浮的背景色
-$nav-tab-hover-bg-color: #065de1 !default;
-// 激活时的字体颜色
-$nav-tab-active-txt-color: #0065b3!default;
-// 关闭按钮悬浮背景色
-$nav-tab-close-hover-bg-color: #63aeff!default;
-// 关闭按钮悬浮时候的字体颜色
-$nav-tab-close-hover-color: #fff!default;
-// 关闭按钮颜色
-$nav-tab-close-color: #fff!default;
-// 激活时的背景色
-$nav-tab-active-bg-color: #fff !default;
-
-/******======详情页，返回导航距离======******/
-$show-header-top: 84px!default;
-// show头部阴影
-$box-shadow-color: #e0e0e0 !default;
-
-/******======面包屑======******/
-// 背景色
-$bread-bg-color: #f0f2f5!default;
-// 链接字体颜色
-$bread-link-txt-color: #2589ff!default;
-// 面包屑文本颜色
-$bread-txt-color: #333;
-
-/******======FUCK MAIN======******/
-// 菜单收缩颜色
-$fuck-main-collapsed-color: #fff!default;