@ditari/bsui 1.0.0 → 1.0.2

package/src/components/table/Table.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+/**
+ * 表单组件
+ */
+import { computed, ref, Ref, watch, inject } from "vue";
+
+import Field from "./Field.vue";
+
+type Key = string | number;
+
+interface Props {
+  bordered?: boolean;
+  keys?: Ref<Key[]>;
+  columns: any; //表格配置
+  data: any; //数据源
+  rowKey?: string; //主键id
+  loading?: false; //加载状态
+  height: number; //表格高度
+  pagination?: any; //分页
+  selection?: "N" | "S" | "M"; // 无选择/单选/多选
+  config?: any; // 配置
+  keepSelected?: boolean; //切换页码保留选中的数据
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bordered: false,
+  keys: undefined,
+  columns: [],
+  data: [],
+  rowKey: "id",
+  loading: false,
+  height: 0,
+  pagination: false,
+  selection: "N",
+  config: {},
+  keepSelected: false
+});
+
+interface Emits {
+  /**
+   * 更新选择的id
+   * @param e
+   * @param rowKeys
+   */
+  (e: "update:keys", rowKeys: Ref<Key[]>): void;
+}
+
+const emits = defineEmits<Emits>();
+//antdv配置组件注入的变量
+const configProvider = inject("configProvider") as any;
+
+//表格对象
+const tableRef = ref();
+const tableHeight = ref(0);
+const selectedRowKeys = ref<any>(props.keys);
+//表体对象
+const antTableBody = ref();
+//分页配置 监听查询页码页数变化
+const paginationState = computed(() => props.pagination);
+
+//分页默认配置
+const paginationConfig = {
+  defaultPageSize: 20,
+  hideOnSinglePage: false,
+  pageSizeOptions: ["10", "20", "30", "40"],
+  responsive: true,
+  showQuickJumper: true,
+  showLessItems: true,
+  showTotal: (total: number) => {
+    return `总共 ${total} 条`;
+  }
+};
+
+//分页
+const { onPageChange } = usePaging();
+function usePaging() {
+  const {
+    keepSelected,
+    selection,
+    config: { pagingChange }
+  } = props;
+
+  //监听页码切换
+  const onPageChange = (page: number, size: number) => {
+    if (selection === "S" || !keepSelected) {
+      // 如果当前为单选或未开启分页保留数据选中的数据都会被清除
+      // 清空历史选中数据
+      selectedRowKeys.value = [];
+      emits("update:keys", selectedRowKeys.value);
+    }
+    pagingChange({ page: page, size: size });
+    // 切换分页的时候，表体滚动到顶部
+    antTableBody.value.scrollTop = 0;
+  };
+  return {
+    onPageChange
+  };
+}
+
+//表格
+const { customRow, rowSelection } = useTable();
+
+function useTable() {
+  // 表格行事件
+  const customRow = useCustomRow();
+  // 表格选项
+  const rowSelection = useRowSelection();
+  return {
+    customRow,
+    rowSelection
+  };
+}
+
+//表格行配置
+function useCustomRow() {
+  const { rowKey } = props;
+
+  return (record: { [x: string]: any }) => {
+    //当前数据的唯一id
+    const id = record[rowKey];
+    const { $OnClick, $OnDblclick } = useSelection(id);
+    try {
+      if (!rowKey) {
+        console.warn("未指定rowKey");
+      }
+    } catch (error) {
+      console.warn();
+    }
+
+    /**
+     * 单击
+     */
+    const onClick = () => {
+      $OnClick(record);
+    };
+    /**
+     * 双击
+     */
+    const onDblclick = () => {
+      $OnDblclick(record);
+    };
+
+    return {
+      onClick,
+      onDblclick
+    };
+  };
+}
+
+//表格选中配置
+function useRowSelection() {
+  const {
+    selection,
+    rowKey,
+    config: { disabledData }
+  } = props;
+  if (selection === "N") return undefined;
+  const onSelect = (record: any, selected: any) => {
+    if (selection === "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]);
+    }
+    emits("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));
+
+    emits("update:keys", selectedRowKeys.value);
+  };
+
+  return {
+    selectedRowKeys,
+    onSelect,
+    onSelectAll,
+    fixed: true,
+    columnTitle: selection === "S" ? "选择" : null,
+    columnWidth: selection === "S" ? 60 : 40,
+    getCheckboxProps: (record: any) => {
+      return {
+        disabled: disabledData?.value?.includes(record[disabledData?.key]),
+        name: disabledData?.key
+      };
+    }
+  };
+}
+
+//单击事件处理
+function useSelection(id: Key) {
+  const {
+    selection,
+    config: {
+      click,
+      dbClick,
+      // value 为禁用的数据值
+      // key 为匹配那个属性
+      // { value:[], key:string }
+      disabledData
+    }
+  } = props;
+  let timeoutID: any = null;
+  /**
+   * 单击
+   */
+  const $OnClick = (record: any) => {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(() => {
+      click ? click(record) : undefined;
+      if (
+        selection === "N" ||
+        disabledData?.value?.includes(record[disabledData?.key])
+      ) {
+        // 1.未开启复选框 则不处理数据选中操作
+        // 2. 如果当前点击的行 包含在禁用的数据项目里面 则不进行选中操作
+        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);
+        }
+      }
+      emits("update:keys", selectedRowKeys.value);
+    }, 200);
+  };
+  /**
+   * 双击
+   */
+  const $OnDblclick = (record: any) => {
+    clearTimeout(timeoutID);
+    dbClick ? dbClick(record) : null;
+  };
+  return {
+    $OnClick,
+    $OnDblclick
+  };
+}
+
+// 监听父容器计算出来的表格高度
+watch(
+  () => props.height,
+  (val) => {
+    if (val !== 0) {
+      setTimeout(() => {
+        initTable();
+      }, 100);
+    }
+  }
+);
+
+/**
+ * 监听loading加载状态
+ *
+ */
+watch(
+  () => props.loading,
+  (val) => {
+    if (val && props.selection === "S") {
+      //临时解决方案 单选的时候 重新请求数据，清空已选中的数据
+      selectedRowKeys.value = [];
+      emits("update:keys", selectedRowKeys.value);
+    }
+    if (val && props.selection === "M" && !props.keepSelected) {
+      // 临时解决方案 多选的时候未开启分页保存选中的数据;重新请求清空已选中的数据
+      selectedRowKeys.value = [];
+      emits("update:keys", selectedRowKeys.value);
+    }
+  }
+);
+
+if (props.height > 0) {
+  setTimeout(() => {
+    initTable();
+  }, 100);
+}
+
+function initTable() {
+  const { height } = props;
+  const rootElement = tableRef.value.$el;
+  const headerHeight = useEleHeight(
+    rootElement.getElementsByClassName("ant-table-header")[0]
+  );
+
+  let paginationHeight = 0;
+  if (props.pagination) {
+    paginationHeight = useEleHeight(
+      document.getElementsByClassName("xi-pagination")[0]
+    );
+  }
+  //56 为分页高度
+  tableHeight.value = height - (headerHeight + paginationHeight);
+
+  rootElement.getElementsByClassName("ant-table-body")[0].style.height =
+    tableHeight.value - 10 + "px";
+
+  antTableBody.value = rootElement.getElementsByClassName("ant-table-body")[0];
+}
+
+function 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) => prev + cur);
+}
+</script>
+<script lang="ts">
+export default {
+  name: "DTable"
+};
+</script>
+<template>
+  <a-table
+    ref="tableRef"
+    :bordered="bordered"
+    :columns="columns"
+    :data-source="data"
+    :row-key="rowKey"
+    :pagination="false"
+    :custom-row="customRow"
+    :loading="loading"
+    :row-selection="rowSelection"
+    :scroll="{
+      scrollToFirstRowOnChange: true,
+      x: '100%',
+      y: tableHeight + 'px'
+    }"
+  >
+    <template #bodyCell="{ column, text, record, index }">
+      <template v-if="column.config">
+        <Field :text="text" :config="column.config" />
+      </template>
+      <!--操作-->
+      <template v-if="column.slot === 'action'">
+        <a-space @click.stop @dblclick.stop>
+          <slot name="action" :index="index" :record="record"></slot>
+        </a-space>
+      </template>
+      <!--操作-->
+      <template v-if="column.slot && column.slot !== 'action'">
+        <slot :name="column.slot" :index="index" :record="record"></slot>
+      </template>
+    </template>
+  </a-table>
+  <a-pagination
+    v-show="pagination"
+    v-model:current="paginationState.current"
+    v-model:pageSize="paginationState.pageSize"
+    class="xi-pagination"
+    :disabled="loading"
+    show-size-changer
+    :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.total"
+    @change="onPageChange"
+  />
+</template>
+<style>
+.xi-pagination {
+  margin-top: 24px;
+  text-align: center;
+}
+</style>

package/src/components/table/index.md

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

package/src/components/table/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "../../utils/index";
+import Table from "./Table.vue";
+
+export const DTable = withInstall(Table);
+export default DTable;

package/src/components/theme/index.ts

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

package/src/components/theme/theme.scss

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

package/src/components/theme/variable.scss

@@ -0,0 +1,21 @@
+// class 前缀
+$prefix-name: ditari-bsui;
+// 页面背景颜色
+$bg-color: #f0f2f5;
+//左侧logo高度
+$logo-height: 240px !default;
+/******======网格变量======******/
+//网格边框颜色
+$grid-border-color: #4e4e4e;
+// 网格里面输入框获取焦点时的边框颜色
+$grid-input-focus-border-color: #1890ff;
+//输入框校验不通过时候的颜色
+$grid-input-error-border-color: #ff4d4f;
+// 网格输入框边框宽度
+$grid-input-border-width: 2px;
+// 网格边框宽度
+$gird-border-width: 1px;
+
+// 左侧菜单
+$top-header-height: 84px;
+$logo-height: 40px !default;

package/src/hooks/http/index.ts

@@ -0,0 +1,107 @@
+import { computed, Ref, ref } from "vue";
+import { usePagination } from "vue-request";
+import { get } from "../../utils";
+
+interface Pagination {
+  // 当前分页的key
+  currentKey: string;
+  // 每页条数的key
+  pageSizeKey: string;
+  // 总条数的key
+  totalKey: string;
+}
+
+interface Options {
+  //请求参数
+  params?: Ref;
+  pagination?: Pagination;
+  // 读取数据的key
+  dataKey?: string;
+}
+
+/**
+ * 请求分页数据列表
+ * @param service 请求后台服务的接口
+ * @param options 配置
+ */
+const useRequestList = (service: any, options: Options = {}) => {
+  if (!options.pagination) {
+    options.pagination = {
+      currentKey: "page",
+      pageSizeKey: "limit",
+      totalKey: "data.total"
+    };
+  }
+
+  const {
+    dataKey,
+    pagination: { currentKey, pageSizeKey }
+  } = options;
+
+  const params = options.params || ref({});
+
+  const {
+    total,
+    pageSize,
+    current,
+    loading,
+    data: listData,
+    run
+  } = usePagination(service, {
+    manual: true,
+    pagination: options.pagination,
+    loadingDelay: 400,
+    loadingKeep: 100,
+    onSuccess: () => {},
+    onError: (error: Error, params: any) => {
+      //错误处理
+      console.log(params, error);
+    }
+  });
+
+  /**
+   * 分页组件属性
+   */
+  const pagination = computed(() => ({
+    total: total.value,
+    current: current.value,
+    pageSize: pageSize.value
+  }));
+
+  /**
+   * 列表查询数据
+   */
+  const data = computed<any>(() =>
+    get((listData as any).value, dataKey || "data", [])
+  );
+
+  /**
+   * page和size改变时触发事件
+   * @param paging 页码对象
+   */
+  const onPaginationChange = (paging: any) => {
+    params.value[currentKey] = paging.page;
+    params.value[pageSizeKey] = paging.size;
+    run(params.value || {});
+  };
+
+  /**
+   * 查询事件
+   */
+  const onQuery = (p: any) => {
+    params.value = { ...params.value, ...p };
+    params.value[currentKey] = 1;
+    run(params.value || {});
+  };
+
+  return {
+    data,
+    pagination,
+    loading,
+    run,
+    onPaginationChange,
+    onQuery
+  };
+};
+
+export { useRequestList };

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useRequestList } from "./http";
+export { useDitariRoute } from "./route";

package/src/hooks/route/index.ts

@@ -0,0 +1,84 @@
+import { ref } from "vue";
+import {
+  createRouterMatcher,
+  RouteLocationMatched,
+  RouteLocationNormalized,
+  RouteRecord,
+  RouteRecordRaw,
+  RouterMatcher
+} from "vue-router";
+import { useBreadcrumbStore } from "../../store/modules/Breadcrumb";
+
+/**
+ * 路由管理
+ * @param routes 未打平的路由
+ */
+export const useDitariRoute = (routes: RouteRecordRaw[]) => {
+  const { saveBreadcrumb } = useBreadcrumbStore();
+  // 路由匹配器
+  const routerMatcher = ref<RouterMatcher | null>(null);
+  // 匹配到的路由数据
+  const matched = ref<RouteLocationMatched[]>([]);
+  //创建匹配器
+  routerMatcher.value = createRouterMatcher(routes, {});
+  // 保存打平后的路由
+  const flatRoutes = flattenRoutes(routes, null);
+
+  /**
+   * 进行匹配
+   * @param to
+   * @param from
+   */
+  const setMatched = (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized
+  ) => {
+    try {
+      const rs = routerMatcher.value?.resolve(to, from).matched ?? [];
+      matched.value = rs.reduce((preValue: any[], curValue) => {
+        const flag = preValue.some(
+          (item: RouteRecord) => item.path === curValue.path
+        );
+        if (!flag) {
+          preValue.push({
+            path: curValue.path,
+            title: curValue.meta?.title ?? "未设置标题"
+          });
+        }
+        return preValue;
+      }, []);
+    } catch (e) {
+      console.log(e);
+      matched.value = [];
+    }
+    // 匹配到的数据保存到route store
+    saveBreadcrumb(matched.value);
+  };
+
+  return {
+    flatRoutes,
+    setMatched
+  };
+};
+
+function flattenRoutes(
+  routes: RouteRecordRaw[],
+  parentRoute: RouteRecordRaw | null
+) {
+  return routes.reduce((acc: any[], route) => {
+    if (route.children) {
+      acc.push(...flattenRoutes(route.children, route));
+    }
+    // 只有有组件的route才加入数组
+    if (route.component) {
+      // 路径 如果当前路径为空，则说明是父组件重定向的地址 则追加为""空字符串
+      const path =
+        `${parentRoute?.path}` + (route.path ? "/" + route.path : "");
+      acc.push({
+        ...route,
+        path: path
+      });
+    }
+    return acc;
+  }, []);
+}

package/src/store/index.ts

@@ -0,0 +1,7 @@
+export { useBreadcrumbStore } from "./modules/Breadcrumb";
+export { useDataDicStore } from "./modules/DataDictionary";
+export { useKeepAliveStore } from "./modules/KeepAlive";
+export { useMenuStore } from "./modules/Menu";
+export { useNavTabsStore } from "./modules/NavTab";
+export { useSettingsStore } from "./modules/Settings";
+export { useUserStore } from "./modules/User";

package/src/store/modules/Breadcrumb.ts

@@ -0,0 +1,25 @@
+/**
+ * 面包屑
+ * @author 余春林
+ */
+import { defineStore } from "pinia";
+import { BREADCRUMB_ID } from "../types";
+
+export interface State {
+  breadcrumbs: [];
+}
+
+export const useBreadcrumbStore = defineStore(BREADCRUMB_ID, {
+  state: (): State => ({
+    breadcrumbs: []
+  }),
+  getters: {
+    getBreadcrumb: (state) => state.breadcrumbs
+  },
+  actions: {
+    saveBreadcrumb(data: any) {
+      this.breadcrumbs = data;
+    }
+  },
+  persist: true
+});

package/src/store/modules/DataDictionary.ts

@@ -0,0 +1,49 @@
+import { defineStore } from "pinia";
+import { DATA_DICTIONARY_ID } from "../types";
+
+interface State {
+  someState: string;
+  list: any;
+}
+const useDataDicStore = defineStore(DATA_DICTIONARY_ID, {
+  state: (): State => ({
+    someState: "你好 pinia",
+    list: {}
+  }),
+  getters: {
+    /**
+     * 根据key获取字典列表
+     * @param state
+     */
+    getDicByKey: (state) => {
+      return (key: string) => {
+        return state.list[key] || [];
+      };
+    },
+    /**
+     * 根据字典名称和字典的value 获取对应的中文
+     * @param state
+     */
+    getDicTextByValue: (state) => {
+      return (key: string, value: string) => {
+        const rs = state.list[key] || [];
+        return rs
+          .filter((item: any) => item.value === value)
+          .map((item: any) => item.label)
+          .join("");
+      };
+    }
+  },
+  actions: {
+    /**
+     * 保存字典数据
+     * @param data 字典数据
+     */
+    save(data: any) {
+      this.list = data;
+    }
+  },
+  persist: true
+});
+
+export { useDataDicStore };