@ditari/bsui 1.0.7 → 1.0.8

package/src/components/desensitize/Desensitize.tsx

@@ -0,0 +1,69 @@
+/**
+ * 脱敏
+ * @author 余春林
+ */
+import { defineComponent, computed, ref } from "vue";
+import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons-vue";
+import { prefixName } from "../theme";
+
+//class名称
+const baseClassName = `${prefixName}-desensitize`;
+export default defineComponent({
+  name: "DDesensitize",
+  components: {
+    EyeOutlined,
+    EyeInvisibleOutlined
+  },
+  props: {
+    value: {
+      // type: [string,number] 可以使用PropType 来声明对象类型
+      // type: String as () => string | number,
+      type: String,
+      required: true
+    },
+    // 替换样式
+    style: {
+      type: String,
+      default: "*"
+    },
+    // 替换位置
+    rule: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    // 控制显示隐藏脱敏或者不脱敏
+    const invisible = ref(true);
+    const desensitizedString = computed(() => {
+      const value = props.value;
+      const rule = props.rule;
+      if (rule === "mobile") {
+        return value.replace(/(\d{3})\d{4}(\d{4})/, "$1 * * * * $2");
+      } else if (rule === "id") {
+        return value.replace(/(\d{4})\d{10}(\w{4})/, "$1 * * * * * $2");
+      } else {
+        return value;
+      }
+    });
+    return () => (
+      <>
+        <div class={baseClassName}>
+          <span class={"value"}>
+            {invisible.value ? desensitizedString.value : props.value}
+          </span>
+          <span>
+            <eye-outlined
+              onClick={() => (invisible.value = !invisible.value)}
+              v-show={!invisible.value}
+            />
+            <eye-invisible-outlined
+              onClick={() => (invisible.value = !invisible.value)}
+              v-show={invisible.value}
+            />
+          </span>
+        </div>
+      </>
+    );
+  }
+});

package/src/components/desensitize/index.ts

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

package/src/components/desensitize/style/index.scss

@@ -0,0 +1,7 @@
+@import "../../theme/variable.scss";
+
+.#{$prefix-name}-desensitize {
+  .value {
+    padding: 0 4px;
+  }
+}

package/src/components/dic/DicReplace.tsx

@@ -0,0 +1,55 @@
+/**
+ * 字典替换
+ * 根据字典名字及对应的value替换成中文或者人能看懂的文字
+ * @author 余春林
+ */
+import { defineComponent, ref, watchEffect } from "vue";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import DicWorker from "./dic.worker?worker&inline";
+import { useDataDicStore } from "../../store/modules/DataDictionary";
+
+export default defineComponent({
+  name: "DicReplace",
+  props: {
+    // 字典名称
+    name: {
+      type: String,
+      default: ""
+    },
+    // 值
+    value: {
+      type: String as any,
+      default: ""
+    }
+  },
+  setup(props) {
+    const { list } = useDataDicStore();
+
+    const workerStatus = ref(false);
+    const dicValueTxt = ref<any>("");
+    const worker = new DicWorker();
+    /**
+     * web worker 启动失败
+     */
+    worker.onerror = () => {
+      workerStatus.value = false;
+    };
+    /**
+     * 监听web worker发送的数据
+     * @param e
+     */
+    worker.onmessage = (e: any) => {
+      // 赋值给下拉选择数据变量
+      dicValueTxt.value = e.data;
+    };
+
+    watchEffect(() => {
+      const value = props.value;
+      const name = props.name;
+      worker.postMessage({ list, name, value });
+    });
+
+    return <>{dicValueTxt.value}</>;
+  }
+});

package/src/components/dic/dic.worker.ts

@@ -0,0 +1,25 @@
+/**
+ * 字典匹配worker
+ * 根据字典名称和value 替换对应的中文
+ */
+
+self.addEventListener(
+  "message",
+  function (e) {
+    // 字典名字
+    const name = e.data.name ?? "";
+    // 字典值
+    const value = e.data.value ?? "";
+    // 字典列表
+    const parseData = JSON.parse(e.data.list) ?? [];
+    const rs = parseData[name] || [];
+
+    const str = rs
+      .filter((item: any) => item.value === value)
+      .map((item: any) => item.label)
+      .join("");
+
+    self.postMessage(str);
+  },
+  false
+);

package/src/components/dic/index.ts

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

package/src/components/grid/style/index.scss

@@ -1,5 +1,11 @@
 @import "../../theme/variable.scss";
 
+/*输入框获取焦点时候的影响边框*/
+@mixin input-focus {
+  &:focus {
+    box-shadow: 0 0 0 $grid-input-border-width $grid-input-focus-border-color;
+  }
+}
 .#{$prefix-name}-grid {
   position: relative;
   display: grid;
@@ -20,13 +26,16 @@
       border-right: $gird-border-width solid $grid-border-color;
     }
     .ant-input,
-    .ant-select-selector {
+    .ant-select-selector,
+    .ant-input-number {
       border: 0;
       border-radius: 0;
-
-      &:focus {
-        box-shadow: 0 0 0 $grid-input-border-width
-          $grid-input-focus-border-color;
+      @include input-focus;
+      // 数字输入框要单独处理
+      .ant-input-number-input {
+        border: 0;
+        border-radius: 0;
+        @include input-focus;
       }
     }
     .ant-input[disabled] {
@@ -40,7 +49,7 @@
       }
     }
     .ant-form-item-explain {
-      display: none;
+      display: $gird-error-display;
     }
   }
   .ant-select-focused:not(.ant-select-disabled).ant-select:not(

package/src/components/index.scss

@@ -2,6 +2,8 @@
 @import "./grid/style";
 @import "./menu/style";
 @import "./layout/style";
+@import "./table/style";
+@import "./desensitize/style";
 html,
 body,
 #app {

package/src/components/menu/Menu.jsx

@@ -1,6 +1,5 @@
 import { defineComponent, h, inject, ref, resolveComponent } from "vue";
 import { storeToRefs } from "pinia";
-import { MenuOutlined } from "@ant-design/icons-vue";
 
 import { useMenuStore } from "../../store/modules/Menu";
 import { useSettingsStore } from "../../store/modules/Settings";
@@ -14,9 +13,9 @@ export default defineComponent({
 
     const { getCollapsed } = storeToRefs(settingsStore);
     // 当前展开的菜单
-    const openKeys = ref(["/labelList", "/label"]);
+    const openKeys = ref([]);
     // 当前选中的菜单
-    const selectedKeys = ref(["/label"]);
+    const selectedKeys = ref([]);
 
     /**
      * 监听菜单点击事件

package/src/components/select/Select.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useDataDicStore } from "../../store/modules/DataDictionary";
-import DicWorker from "./dic-worker?worker&inline";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import DicWorker from "./dic.worker?worker&inline";
 
 interface Props {
   value: any;
@@ -24,7 +26,7 @@ interface Emits {
 const emits = defineEmits<Emits>();
 const { getDicByKey, list } = useDataDicStore();
 
-const { modelValue, data, onSearch, onSelect } = useSelect();
+const { modelValue, data, onSearch, onSelect, onChange } = useSelect();
 
 function useSelect() {
   // 保存worker启动状态
@@ -43,7 +45,7 @@ function useSelect() {
   //   }
   // );
   // const worker = new Worker(
-  //   new URL("./dic-worker.ts?worker&inline", import.meta.url),
+  //   new URL("./dic.worker.ts?worker&inline", import.meta.url),
   //   {
   //     type: "module"
   //   }
@@ -95,14 +97,17 @@ function useSelect() {
   const onSelect = (value: any) => {
     // 发射选择的数据
     emits("update:value", value);
-    emits("change", value);
   };
 
+  const onChange = () => {
+    emits("change", modelValue.value);
+  };
   return {
     data,
     modelValue,
     onSearch,
-    onSelect
+    onSelect,
+    onChange
   };
 }
 </script>
@@ -122,6 +127,7 @@ export default {
     :disabled="disabled"
     @select="onSelect"
     @search="onSearch"
+    @change="onChange"
   >
   </a-select>
 </template>

package/src/components/select/{dic-worker.ts → dic.worker.ts}

@@ -1,12 +1,13 @@
 /**
- * 字典处理worker
+ * 字典匹配worker
+ * 根据 关键字 删选对应的字典列表内容
  */
 
 self.addEventListener(
   "message",
   function (e) {
-    const keyword = e.data.keywords || "";
-    const parseData = JSON.parse(e.data.list);
+    const keyword = e.data.keywords ?? "";
+    const parseData = JSON.parse(e.data.list) ?? [];
     const filterRs = parseData.filter((item: any) => {
       return (
         item.value.toLowerCase().indexOf(keyword.toLowerCase()) !== -1 ||

package/src/components/table/Table.tsx

@@ -0,0 +1,343 @@
+import {
+  computed,
+  defineComponent,
+  defineEmits,
+  nextTick,
+  PropType,
+  ref,
+  watch,
+  watchEffect,
+  createSlots
+} from "vue";
+import { Pagination, Space, Table } from "ant-design-vue";
+import { useEleHeight } from "../../utils";
+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"]>,
+      required: true,
+      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: () => ({})
+    }
+  };
+};
+
+// 使用有问题
+// const tableEmits = defineEmits<{
+//   "update:keys": (keys: []) => void;
+// }>();
+// interface MyEvents {
+//   [key: string]: (...args: any[]) => void;
+//   "update:keys": (keys: []) => void;
+// }
+
+//分页默认配置
+const paginationConfig = {
+  defaultPageSize: 20,
+  hideOnSinglePage: false,
+  pageSizeOptions: ["10", "20", "30", "40"],
+  responsive: true,
+  showQuickJumper: true,
+  showLessItems: true,
+  showTotal: (total: number) => {
+    return `总共 ${total} 条`;
+  }
+};
+
+//分页class名称
+const basePageClassName = `${prefixName}-pagination`;
+
+/**
+ * 表格组件定义
+ */
+const DXTable = defineComponent({
+  name: "DTable",
+  props: tableProps(),
+  // emits: {  "update:keys": (keys: []) => void }
+  // TODO 需要做调整
+  emits: {
+    "update:keys": (keys: []) => null
+  },
+  setup(props, { emit, slots }) {
+    console.log(slots);
+    // 保存选中的唯一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)
+    );
+
+    // 初始化表格
+    const { tableRef, tableHeight, onPageChange, onRowClassName } = useTable();
+    function useTable() {
+      const {
+        rowClassName,
+        keepSelected,
+        selection,
+        onPageChange: onChange
+      } = props.config;
+      // 表格组件对象
+      const tableRef = ref<any>(null);
+      // 表格计算出来的高度
+      const tableHeight = ref<number>();
+      // 表格body对象
+      const antTableBodyRef = ref<any>(null);
+      // 计算高度
+      const playHeight = (height: number) => {
+        const tableEl = tableRef?.value?.$el;
+        const headerHeight = useEleHeight(
+          tableEl.getElementsByClassName("ant-table-header")[0]
+        );
+        // 获取分页组件高度
+        let paginationHeight = 0;
+        if (props.config.pagination) {
+          paginationHeight = useEleHeight(
+            document.getElementsByClassName(basePageClassName)[0]
+          );
+        }
+        tableHeight.value = height - (headerHeight + paginationHeight);
+        // 设置body高度
+        tableEl.getElementsByClassName("ant-table-body")[0].style.height =
+          tableHeight.value - 10 + "px";
+        // 表格body对象 用于切换页码后滚动条置顶
+        antTableBodyRef.value =
+          tableEl.getElementsByClassName("ant-table-body")[0];
+      };
+      //监听传入的height的变化 默认组件创建的时候会执行一次
+      watchEffect(() => {
+        if (props.height !== 0) {
+          nextTick(() => {
+            // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
+            playHeight(props.height);
+          });
+        }
+      });
+      // 监听分页组件
+      const onPageChange = (page: number, size: number) => {
+        onChange ? onChange({ 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, tableHeight, onPageChange, onRowClassName };
+    }
+
+    //表格选中配置
+    const rowSelection = useRowSelection();
+    function useRowSelection() {
+      const {
+        rowKey,
+        config: { selection, getCheckboxProps }
+      } = 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]
+              );
+        }
+        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;
+        }
+      );
+
+      return {
+        selectedRowKeys,
+        onSelect,
+        onSelectAll,
+        fixed: true,
+        columnTitle: selection === "S" ? "选择" : null,
+        columnWidth: selection === "S" ? 60 : 40,
+        getCheckboxProps: getCheckboxProps
+      };
+    }
+
+    const customRow = useCustomRow();
+    //表格行配置
+    function useCustomRow() {
+      return (record: any) => {
+        // 用于存储 在某个事件内双击两次 则取消单击事件业务
+        let clickTimeout: any = undefined;
+        const {
+          rowKey,
+          config: { click, dbClick, selection, getCheckboxProps }
+        } = props;
+        const id = record[rowKey];
+
+        /**
+         * 处理单击事件业务
+         * @param record 当前点击行数据
+         */
+        const onClick = () => {
+          if (selection === "N") {
+            // 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);
+            }
+          }
+          emit("update:keys", selectedRowKeys.value);
+        };
+
+        return {
+          onClick: () => {
+            if (!click) return;
+            const rs = getCheckboxProps ? getCheckboxProps(record) : null;
+            if (rs && rs.value === id) {
+              return;
+            }
+            clearTimeout(clickTimeout);
+            clickTimeout = setTimeout(() => {
+              // 处理单击事件业务
+              onClick();
+              // 回传数据 自定义单击后的业务
+              click(record);
+            }, 200);
+          }, // 点击行
+          onDblclick: () => {
+            if (!dbClick) return;
+            clearTimeout(clickTimeout);
+            //  回传数据 自定义单击后的业务
+            dbClick(record);
+          }
+          // onContextmenu: (event) => {
+          //   //TODO
+          // },
+          // onMouseenter: (event) => {
+          //   //TODO
+          // }, // 鼠标移入行
+          // onMouseleave: (event) => {
+          //   //TODO
+          // }
+        };
+      };
+    }
+    return () => (
+      <>
+        <Table
+          ref={tableRef}
+          row-key={props.rowKey}
+          bordered={props.config.bordered}
+          columns={columns.value}
+          dataSource={dataSource.value}
+          loading={props.loading}
+          size={props.config?.size ?? "small"}
+          scroll={{
+            scrollToFirstRowOnChange: true,
+            x: "100%",
+            y: tableHeight.value + "px"
+          }}
+          pagination={false}
+          customRow={customRow}
+          rowSelection={rowSelection}
+          rowClassName={onRowClassName}
+        >
+          {{
+            bodyCell: ({ column }: any) => {
+              if (column.slot === "action") {
+                return <Space>{slots.action && slots.action()}</Space>;
+              }
+            }
+          }}
+        </Table>
+        <Pagination
+          v-show={paginationState.value}
+          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}
+        />
+      </>
+    );
+  }
+});
+
+export default DXTable;