@dt-frames/ui 2.0.1 → 2.0.3

package/es/components/modal/src/props.d.ts

@@ -0,0 +1,100 @@
+import { ButtonProps } from '../../form/src/types/form.type';
+import { ComputedRef, CSSProperties, PropType } from "vue";
+export declare const basicProps: {
+    t: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+    };
+    scrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    minHeight: {
+        type: NumberConstructor;
+    };
+    width: {
+        type: PropType<String | Number>;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultFullscreen: {
+        type: BooleanConstructor;
+    };
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: PropType<String | ComputedRef<String>>;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingTip: {
+        type: StringConstructor;
+        default: string;
+    };
+    useWrapper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapClassName: {
+        type: StringConstructor;
+    };
+    zIndex: {
+        type: NumberConstructor;
+    };
+    centered: {
+        type: BooleanConstructor;
+    };
+    showOkBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCancelBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    okText: {
+        type: StringConstructor;
+    };
+    cancelText: {
+        type: StringConstructor;
+    };
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskStyle: PropType<CSSProperties>;
+    footer: {
+        type: PropType<ButtonProps[]>;
+    };
+    bodyStyle: PropType<CSSProperties>;
+    wrapperProps: ObjectConstructor;
+    getContainer: PropType<() => any>;
+    closeFunc: PropType<() => Promise<boolean>>;
+    afterClose: FunctionConstructor;
+};

package/es/components/modal/src/types/modal.type.d.ts

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { basicProps } from "../props";
+export declare type ModalMethods = {
+    setModalProps: (props: Partial<ExtractPropTypes<typeof basicProps>>) => void;
+    redoModalHeight?: () => void;
+};
+export interface ReturnMethods extends ModalMethods {
+    openModal: <T = any, U = any>(params?: T, afterClose?: (res: U) => void) => void;
+    closeModal: () => void;
+}
+export interface ReturnInnerMethods extends ModalMethods {
+    closeModal: <T = any>(res?: T) => void;
+    setLoading: (loading: boolean) => void;
+}
+export declare type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
+export declare type UseModalReturnType = [RegisterFn, ReturnMethods];
+export declare type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];

package/es/components/source/hooks/useDownload.d.ts

@@ -0,0 +1,8 @@
+import { DownloadType } from '../../table/src/types/header.type';
+import { Recordable, ApiType } from "@dt-frames/core";
+import { ComputedRef } from "vue";
+export declare function useDownload(exportUrl: string | ApiType, exportName: string | ComputedRef): {
+    download: (excelData: DownloadType & {
+        params: Recordable;
+    }, extraData?: any[]) => void;
+};

package/es/components/source/hooks/useSource.d.ts

@@ -0,0 +1,40 @@
+import { CurdActionType } from '../../curd/src/types/curd.type';
+import { FormActionType } from '../../form/src/types/actions.type';
+import { TableActionType } from '../../table/src/types/actions.type';
+import { DownloadType } from '../../table/src/types/header.type';
+import { Key } from "ant-design-vue/es/table/interface";
+import { SourceOption, TableParamsType } from "../types/source.type";
+export declare function useSource(props: SourceOption): {
+    form: {
+        onSearch: () => void;
+        onReset: () => void;
+        loading: {
+            [key: string]: import("vue").Ref<boolean>;
+        };
+        registerInstance: (instance: FormActionType) => FormActionType;
+    };
+    table: {
+        dataSource: import("vue").Ref<any[]>;
+        pagination: import("vue").Ref<{
+            current: number;
+            pageSize: number;
+            total: number;
+        }>;
+        loading: import("vue").Ref<boolean>;
+        onTableChange: (params: TableParamsType) => void;
+        onAdd: () => void;
+        onUpdate: (arg: any) => void;
+        onDelete: (arg: any) => void;
+        onDeletes: (ids: Key[]) => void;
+        onDownload: (excelData: DownloadType, extraData?: any[]) => void;
+        registerInstance: (instance: TableActionType) => TableActionType;
+    };
+    curd: {
+        onSave: () => void;
+        onDeletes: (ids: Key[]) => void;
+        onQueryById: (id: Key) => Promise<unknown>;
+        registerInstance: (instance: CurdActionType) => CurdActionType;
+    };
+    onSearch: () => void;
+    onTableChange: (params: TableParamsType) => void;
+};

package/es/components/source/index.d.ts

@@ -0,0 +1,2 @@
+import { useSource } from "./hooks/useSource";
+export { useSource };

package/es/components/source/index.js

@@ -0,0 +1,332 @@
+import { ref, unref, reactive, toRaw } from "vue";
+import { isString, http, isObject, useAppStore, error, getDictValueByCode, formatNumber, useI18n, useMessage, isArray } from "@dt-frames/core";
+import { isObject as isObject$1 } from "@vueuse/core";
+import { capitalize } from "lodash-es";
+import * as xlsx from "xlsx";
+import dayjs from "dayjs";
+const getApi = (api, baseUrl) => {
+  const loading = {
+    onSearch: ref(false),
+    onReset: ref(false)
+  };
+  const newApi = {};
+  const testIsFullApi = (str) => str.startsWith("/") ? str : baseUrl + str;
+  for (let it in api) {
+    loading["on" + capitalize(it)] = ref(false);
+    const item = api[it];
+    if (isString(item)) {
+      newApi[it] = testIsFullApi(item);
+    } else {
+      newApi[it] = {
+        ...item,
+        api: testIsFullApi(item.api)
+      };
+    }
+  }
+  return {
+    api: newApi,
+    loading
+  };
+};
+function useDownload(exportUrl, exportName) {
+  function download(excelData, extraData = []) {
+    const { params: searchDTO, type, columns } = excelData;
+    switch (type) {
+      case "all":
+        http.exportFile(
+          exportUrl,
+          {
+            fields: setDownloadAllHeaders(columns),
+            tableName: unref(exportName),
+            fileType: "xlsx",
+            searchDTO
+          },
+          `${unref(exportName)}.xlsx`
+        );
+        break;
+      case "current":
+      case "select":
+        handleDownloadPage(excelData, unref(exportName), extraData);
+        break;
+    }
+  }
+  function setDownloadAllHeaders(columns) {
+    return columns.map((it) => {
+      let column = {
+        propertyName: it.dataIndex,
+        head: it.title
+      };
+      if (it.render && isObject(it.render)) {
+        const { dict, date, number } = it.render;
+        if (isString(dict)) {
+          column.dictCode = dict;
+        } else if (isObject(dict)) {
+          column.struCode = dict.struCode;
+          column.struKey = dict.label;
+        } else if (date) {
+          column.format = date;
+        } else if (number) {
+          column.format = number;
+        }
+      }
+      return column;
+    });
+  }
+  function handleDownloadPage({ columns = [], rows = [] }, exportName2 = "", extraData = []) {
+    const titles = columns.map((it) => it.title);
+    const content = rows.reduce((total, it) => {
+      const rowData = columns.map((column) => {
+        let value = it[column.dataIndex.toString()];
+        if (column.render && isObject(column.render) && value !== void 0) {
+          const { dict, date, number, percent, struc } = column.render;
+          if (struc) {
+            const { appConf } = useAppStore();
+            let apiStruc = appConf.structure[struc];
+            if (!apiStruc) {
+              error(`${struc}\u672A\u5728structure\u4E2D\u914D\u7F6E`);
+            } else {
+              return getDictValueByCode(value, apiStruc);
+            }
+          } else if (date) {
+            return dayjs(value).format(date);
+          } else if (dict) {
+            return unref(getDictValueByCode(value, dict));
+          } else if (percent) {
+            return formatNumber((value || 0) * 100, percent) + "%";
+          } else if (number) {
+            return formatNumber(value, number);
+          }
+        }
+        return value;
+      });
+      total.push(rowData);
+      return total;
+    }, []);
+    let excelHeader = [titles];
+    if (extraData && extraData.length > 0) {
+      excelHeader = [...extraData, titles];
+    }
+    export2Excel(
+      excelHeader.concat(content),
+      exportName2
+    );
+  }
+  function export2Excel(data = [], exportName2 = "") {
+    const worksheet = xlsx.utils.aoa_to_sheet(data);
+    const fileName = exportName2.substring(0, 26) + ".xlsx";
+    const workbook = {
+      SheetNames: [fileName],
+      Sheets: {
+        [fileName]: worksheet
+      }
+    };
+    xlsx.writeFile(
+      workbook,
+      fileName,
+      { bookType: "xlsx" }
+    );
+  }
+  return {
+    download
+  };
+}
+function useSource(props) {
+  const { t } = useI18n("UI");
+  const { confirm, message } = useMessage();
+  const { appConf } = useAppStore();
+  const { baseUrl, api: orgApi, immediateSearch = true, exportName, beforeUpdate, afterUpdate } = props;
+  const pagination = ref({
+    current: appConf?.ui?.table?.defaultPageNo || 1,
+    pageSize: appConf?.ui?.table?.defaultPageSize || 20,
+    total: 0
+  });
+  const { loading, api } = getApi(orgApi, baseUrl);
+  const dataSource = ref([]);
+  const baseData = reactive({
+    entityDTO: {},
+    orderDTOs: []
+  });
+  let tableInstance = null;
+  let formInstance = null;
+  let curdInstance = null;
+  function onSearch() {
+    tableInstance?.clearSelectedRowKeys();
+    const { defaultPageSize } = tableInstance?.getPagination() || {};
+    baseData.pageDTO = {
+      pageNo: 0,
+      pageSize: defaultPageSize
+    };
+    loading.onSearch.value = true;
+    setPage();
+  }
+  function onReset() {
+    baseData.entityDTO = { ...formInstance?.getFormValues() ?? {} };
+    baseData.pageDTO.pageNo = 0;
+    loading.onReset.value = true;
+    tableInstance?.clearSelectedRowKeys();
+    setPage();
+  }
+  function setPage(params = {}) {
+    if (!api.queryPage)
+      return;
+    fetch(api.queryPage, {
+      ...toRaw(baseData),
+      ...params
+    }).then((rsp) => {
+      if (isArray(rsp)) {
+        dataSource.value.splice(0, dataSource.value.length, ...rsp);
+        return;
+      }
+      const { records, pageDTO } = rsp;
+      dataSource.value.splice(0, dataSource.value.length, ...records);
+      pagination.value = {
+        current: (pageDTO?.pageNo ?? 0) + 1,
+        pageSize: pageDTO?.pageSize ?? appConf?.ui?.table?.defaultPageSize,
+        total: pageDTO?.totalCount ?? 0
+      };
+    }).finally(() => {
+      loading.onSearch.value = false;
+      loading.onQuerypage.value = false;
+      loading.onReset.value = false;
+    });
+  }
+  function onTableChange(params) {
+    const { pagination: pagination2, sort, filter } = params;
+    baseData.pageDTO = {
+      pageNo: pagination2.current - 1,
+      pageSize: pagination2.pageSize
+    };
+    baseData.orderDTOs = (isObject$1(sort) ? [sort] : sort).map((it) => {
+      if (it.order) {
+        return {
+          propertyName: it.field,
+          dir: it.order === "ascend" ? "asc" : "desc"
+        };
+      }
+    }).filter((it) => it);
+    setPage(filter);
+  }
+  function onAdd() {
+    curdInstance && curdInstance.add();
+  }
+  function onUpdate(arg) {
+    curdInstance && curdInstance.update(arg);
+  }
+  function onDelete(arg) {
+    curdInstance && curdInstance.del(arg);
+  }
+  function onQueryById(id) {
+    return fetch(api.queryById, { id });
+  }
+  function onSave() {
+    let model = curdInstance && curdInstance.curdFormMethods.getFormValues();
+    curdInstance.curdFormMethods.validate().then((rsp) => {
+      if (!model.id) {
+        loading.onAdd.value = true;
+        fetch(api.add, { ...model }, false).then((rsp2) => {
+          if (rsp2?.code === 0) {
+            message.success(t("ADD_SUCCESS"));
+            curdInstance.closeModal();
+            onSearch();
+          }
+          loading.onAdd.value = false;
+        });
+      } else {
+        loading.onUpdate.value = true;
+        fetch(api.update, { ...model }, false).then((rsp2) => {
+          if (rsp2?.code === 0) {
+            message.success(t("UPDATE_SUCCESS"));
+            curdInstance.closeModal();
+            onSearch();
+          }
+          loading.onUpdate.value = false;
+        });
+      }
+    });
+  }
+  function onDeletes(ids) {
+    if (!tableInstance)
+      return;
+    if (!api.deletes) {
+      message.error(t("EMPTY_URL"));
+      return;
+    }
+    const _ids = ids || tableInstance.getSelectedRowKeys();
+    if (!_ids.length) {
+      message.error(t("EMPTY"));
+      return;
+    }
+    const isSingleDelete = !!ids;
+    !isSingleDelete && (loading.onDeletes.value = true);
+    confirm({
+      title: isSingleDelete ? t("DELETE_CONFIRM") : t("MULTIFY_DELETE_CONFIRM"),
+      content: isSingleDelete ? t("CONFIRM_DELETE") : t("CONFIRM_MULTIFY_DELETE", { length: _ids.length }),
+      iconType: "warning",
+      onOk() {
+        fetch(api.deletes, toRaw(_ids), false).then((rsp) => {
+          if (rsp?.code === 0) {
+            message.success((isSingleDelete ? "" : t("MULTIFY")) + t("DELETE_SUCCESS"));
+            !isSingleDelete && tableInstance.clearSelectedRowKeys();
+            onSearch();
+          }
+        }).finally(() => {
+          isSingleDelete && (loading.onDeletes.value = false);
+        });
+      }
+    });
+  }
+  function onDownload(excelData, extraData = []) {
+    const { download } = useDownload(api.export, exportName);
+    download({ ...excelData, params: baseData }, extraData);
+  }
+  function fetch(api2, params, onlyData = true) {
+    const { type = "post", header = {} } = isObject$1(api2) ? api2 : {};
+    return new Promise((resolve, reject) => {
+      http[type](api2, params, {
+        ...header,
+        onlyData: false
+      }).then(
+        (data) => {
+          resolve(onlyData ? data?.data : data);
+        },
+        (error2) => {
+          reject(error2);
+        }
+      );
+    });
+  }
+  const form = {
+    onSearch,
+    onReset,
+    loading,
+    registerInstance: (instance) => formInstance = instance
+  };
+  const table = {
+    dataSource,
+    pagination,
+    loading: loading.onQuerypage,
+    onTableChange,
+    onAdd,
+    onUpdate,
+    onDelete,
+    onDeletes,
+    onDownload,
+    registerInstance: (instance) => tableInstance = instance
+  };
+  const curd = {
+    onSave,
+    onDeletes,
+    onQueryById,
+    registerInstance: (instance) => curdInstance = instance
+  };
+  return {
+    form,
+    table,
+    curd,
+    onSearch,
+    onTableChange
+  };
+}
+export {
+  useSource
+};

package/es/components/source/types/source.type.d.ts

@@ -0,0 +1,37 @@
+import { ApiType, Recordable } from "@dt-frames/core";
+import { ComputedRef } from "vue";
+export declare type ApiObjType = {
+    add?: string | ApiType;
+    update?: string | ApiType;
+    save?: string | ApiType;
+    deletes?: string | ApiType;
+    queryById?: string | ApiType;
+    queryPage?: string | ApiType;
+    [key: string]: string | ApiType;
+};
+export declare type SourceOption = {
+    baseUrl?: string;
+    exportName?: string | ComputedRef;
+    immediateSearch?: boolean;
+    beforeUpdate?: () => boolean | undefined;
+    afterUpdate?: () => void;
+    api?: ApiObjType;
+};
+export declare type orderType = {
+    field: string | number;
+    order: 'asc' | 'desc';
+};
+export declare type BaseDataType = {
+    entityDTO?: any;
+    pageDTO?: {
+        pageNo: Number;
+        pageSize: Number;
+    } | null;
+    orderDTOs: orderType[];
+};
+export declare type TableParamsType = {
+    pagination: any;
+    showBtnLoading: boolean;
+    sort: Recordable;
+    filter: any;
+};

package/es/components/source/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from "vue";
+import { ApiObjType } from "../types/source.type";
+export declare const getApi: (api: ApiObjType, baseUrl: string) => {
+    api: ApiObjType;
+    loading: {
+        [key: string]: Ref<boolean>;
+    };
+};

package/es/components/table/index.d.ts

@@ -0,0 +1,3 @@
+import { useTable } from "./src/hooks/useTable";
+import DtTable from "./src/index";
+export { DtTable, useTable };