qidian-vue-ui 1.1.22 → 1.1.23

package/dist/components/service/table.vue2.mjs

@@ -0,0 +1,693 @@
+import { defineComponent, mergeDefaults, useTemplateRef, ref, computed, createVNode, watch, onMounted, onActivated, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { EnhancedTable, Empty } from "tdesign-vue-next";
+import { easyCopy, isEmpty, suspectedWrapperPromise, useServicePagination } from "qidian-shared";
+import { qdServiceTableTreeConfig, qdServiceTableProps } from "./props.mjs";
+import { useVModels } from "../../node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.22_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
+import { LoadingIcon, AddRectangleIcon, MinusRectangleIcon } from "tdesign-icons-vue-next";
+import { useConfig } from "../config-provider/useConfig.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "QdServiceTable"
+  },
+  __name: "table",
+  props: /* @__PURE__ */ mergeDefaults({
+    rowKey: {},
+    selectType: {},
+    headerBg: {
+      type: Boolean
+    },
+    tree: {},
+    loadingWithData: {
+      type: Boolean
+    },
+    beforeDragSort: {
+      type: Function
+    },
+    expandedTreeNodes: {},
+    defaultExpandedTreeNodes: {},
+    treeExpandAndFoldIcon: {},
+    onAbnormalDragSort: {
+      type: Function
+    },
+    onExpandedTreeNodesChange: {
+      type: Function
+    },
+    onTreeExpandChange: {
+      type: Function
+    },
+    asyncLoading: {},
+    columnController: {},
+    columnControllerVisible: {
+      type: Boolean
+    },
+    defaultColumnControllerVisible: {
+      type: Boolean
+    },
+    columns: {},
+    displayColumns: {},
+    defaultDisplayColumns: {},
+    dragSort: {},
+    dragSortOptions: {},
+    editableCellState: {
+      type: Function
+    },
+    editableRowKeys: {},
+    expandIcon: {
+      type: Boolean
+    },
+    expandOnRowClick: {
+      type: Boolean
+    },
+    expandedRow: {},
+    expandedRowKeys: {},
+    defaultExpandedRowKeys: {},
+    filterIcon: {},
+    filterRow: {},
+    filterValue: {},
+    defaultFilterValue: {},
+    hideSortTips: {
+      type: Boolean
+    },
+    indeterminateSelectedRowKeys: {},
+    multipleSort: {
+      type: Boolean
+    },
+    reserveSelectedRowOnPaginate: {
+      type: Boolean
+    },
+    rowSelectionAllowUncheck: {
+      type: Boolean
+    },
+    rowSelectionType: {},
+    selectOnRowClick: {
+      type: Boolean
+    },
+    selectedRowKeys: {},
+    defaultSelectedRowKeys: {},
+    showSortColumnBgColor: {
+      type: Boolean
+    },
+    sort: {},
+    defaultSort: {},
+    sortIcon: {},
+    sortOnRowDraggable: {
+      type: Boolean
+    },
+    onAsyncLoadingClick: {
+      type: Function
+    },
+    onCellClick: {
+      type: Function
+    },
+    onChange: {
+      type: Function
+    },
+    onColumnChange: {
+      type: Function
+    },
+    onColumnControllerVisibleChange: {
+      type: Function
+    },
+    onDataChange: {
+      type: Function
+    },
+    onDisplayColumnsChange: {
+      type: Function
+    },
+    onDragSort: {
+      type: Function
+    },
+    onExpandChange: {
+      type: Function
+    },
+    onFilterChange: {
+      type: Function
+    },
+    onRowEdit: {
+      type: Function
+    },
+    onRowValidate: {
+      type: Function
+    },
+    onSelectChange: {
+      type: Function
+    },
+    onSortChange: {
+      type: Function
+    },
+    onValidate: {
+      type: Function
+    },
+    activeRowKeys: {},
+    defaultActiveRowKeys: {},
+    activeRowType: {},
+    allowResizeColumnWidth: {
+      type: Boolean
+    },
+    attach: {
+      type: [String, Function]
+    },
+    bordered: {
+      type: Boolean
+    },
+    bottomContent: {},
+    cellEmptyContent: {},
+    data: {},
+    disableDataPage: {
+      type: Boolean
+    },
+    disableSpaceInactiveRow: {
+      type: Boolean
+    },
+    empty: {},
+    firstFullRow: {},
+    fixedRows: {},
+    footData: {},
+    footerAffixProps: {},
+    footerAffixedBottom: {
+      type: [Boolean, Object]
+    },
+    footerSummary: {},
+    headerAffixProps: {},
+    headerAffixedTop: {
+      type: [Boolean, Object]
+    },
+    height: {},
+    horizontalScrollAffixedBottom: {
+      type: [Boolean, Object]
+    },
+    hover: {
+      type: Boolean
+    },
+    keyboardRowHover: {
+      type: Boolean
+    },
+    lastFullRow: {},
+    lazyLoad: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    loadingProps: {},
+    locale: {},
+    maxHeight: {},
+    paginationAffixedBottom: {
+      type: [Boolean, Object]
+    },
+    resizable: {
+      type: Boolean
+    },
+    rowAttributes: {
+      type: [Object, Function, Array]
+    },
+    rowClassName: {
+      type: [Object, Array, String, Function]
+    },
+    rowspanAndColspan: {
+      type: Function
+    },
+    rowspanAndColspanInFooter: {
+      type: Function
+    },
+    scroll: {},
+    showHeader: {
+      type: Boolean
+    },
+    size: {},
+    stripe: {
+      type: Boolean
+    },
+    tableContentWidth: {},
+    tableLayout: {},
+    topContent: {},
+    verticalAlign: {},
+    onActiveChange: {
+      type: Function
+    },
+    onActiveRowAction: {
+      type: Function
+    },
+    onColumnResizeChange: {
+      type: Function
+    },
+    onPageChange: {
+      type: Function
+    },
+    onRowClick: {
+      type: Function
+    },
+    onRowDblclick: {
+      type: Function
+    },
+    onRowMousedown: {
+      type: Function
+    },
+    onRowMouseenter: {
+      type: Function
+    },
+    onRowMouseleave: {
+      type: Function
+    },
+    onRowMouseover: {
+      type: Function
+    },
+    onRowMouseup: {
+      type: Function
+    },
+    onScroll: {
+      type: Function
+    },
+    onScrollX: {
+      type: Function
+    },
+    onScrollY: {
+      type: Function
+    },
+    cacheKey: {
+      type: [String, Function]
+    },
+    cacheTime: {},
+    pollingInterval: {},
+    onBefore: {
+      type: Function
+    },
+    onAfter: {
+      type: Function
+    },
+    onSuccess: {
+      type: Function
+    },
+    onError: {
+      type: Function
+    },
+    service: {
+      type: Function
+    },
+    manual: {
+      type: Boolean
+    },
+    transformParams: {
+      type: Function
+    },
+    transformRes: {
+      type: Function
+    },
+    pagination: {}
+  }, qdServiceTableProps),
+  emits: ["update:data", "update:selectedRowKeys", "update:activeRowKeys", "update:columnControllerVisible", "update:displayColumns", "update:expandedRowKeys", "update:filterValue", "update:sort", "update:expandedTreeNodes"],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const props = __props;
+    const emit = __emit;
+    const {
+      data,
+      selectedRowKeys,
+      activeRowKeys,
+      columnControllerVisible,
+      displayColumns,
+      expandedRowKeys,
+      filterValue,
+      sort,
+      expandedTreeNodes
+    } = useVModels(props, emit, {
+      passive: true
+    });
+    const {
+      t
+    } = useConfig("crud");
+    const tableRef = useTemplateRef("table");
+    const treeLoadIds = ref([]);
+    const scrollRecord = {
+      top: 0,
+      left: 0
+    };
+    const reProps = computed(() => {
+      const {
+        service,
+        manual,
+        transformParams,
+        transformRes,
+        pagination,
+        cacheKey,
+        cacheTime,
+        pollingInterval,
+        onBefore,
+        onAfter,
+        onSuccess,
+        onError,
+        loadingWithData,
+        loading: loading2,
+        selectType,
+        data: data2,
+        selectedRowKeys: selectedRowKeys2,
+        activeRowKeys: activeRowKeys2,
+        columns,
+        columnControllerVisible: columnControllerVisible2,
+        displayColumns: displayColumns2,
+        expandedRowKeys: expandedRowKeys2,
+        filterValue: filterValue2,
+        sort: sort2,
+        expandedTreeNodes: expandedTreeNodes2,
+        selectOnRowClick,
+        expandOnRowClick,
+        tree,
+        onScroll,
+        ...tableOptions
+      } = props;
+      const reTableOptions = tableOptions;
+      let reTransformRes = transformRes;
+      const reTree = tree ? {
+        ...tree,
+        ...easyCopy(qdServiceTableTreeConfig)
+      } : tree;
+      if (reTree?.lazyLoad) {
+        reTransformRes = async (res) => {
+          let temp;
+          if (transformRes) {
+            const [trErr, trRes] = await suspectedWrapperPromise(transformRes(res));
+            if (trErr) throw trErr;
+            temp = trRes;
+          } else {
+            temp = res;
+          }
+          temp.records.forEach((item) => {
+            if (item.children) return;
+            item.children = true;
+          });
+          return temp;
+        };
+        if (!tableOptions.treeExpandAndFoldIcon) {
+          reTableOptions.treeExpandAndFoldIcon = (h, {
+            row,
+            type
+          }) => {
+            const children = row.children;
+            if (treeLoadIds.value.includes(row.id) && children === true) {
+              return createVNode(LoadingIcon, {
+                "style": {
+                  color: "var(--td-brand-color)"
+                }
+              }, null);
+            }
+            if (children === true && row.__qdTreeLoaded) {
+              return createVNode(AddRectangleIcon, {
+                "style": {
+                  color: "transparent",
+                  cursor: "default"
+                }
+              }, null);
+            }
+            return type === "expand" ? createVNode(AddRectangleIcon, null, null) : createVNode(MinusRectangleIcon, null, null);
+          };
+        }
+        if (!tableOptions.onExpandedTreeNodesChange) {
+          reTableOptions.onExpandedTreeNodesChange = async (currentExpandedTreeNodes, options) => {
+            const {
+              row,
+              rowState
+            } = options;
+            if (!row || !rowState) return;
+            const {
+              level
+            } = rowState;
+            const {
+              __qdTreeLoaded
+            } = row;
+            const {
+              maxLevel
+            } = reTree;
+            const id = row[props.rowKey || qdServiceTableProps.rowKey];
+            if (treeLoadIds.value.includes(id) || __qdTreeLoaded || isEmpty(level) || !isEmpty(maxLevel) && level >= maxLevel) {
+              return;
+            }
+            treeLoadIds.value.push(id);
+            tableRef.value?.setData(id, {
+              ...row,
+              __qdTreeLoaded: true
+            });
+            const {
+              transformParams: transformParams2,
+              transformRes: transformRes2
+            } = reTree;
+            const currentParams = options;
+            let tParams;
+            if (transformParams2) {
+              const [tpErr, tpRes] = await suspectedWrapperPromise(transformParams2(currentParams));
+              if (tpErr) throw tpErr;
+              tParams = tpRes;
+            }
+            const [serviceErr, serviceRes] = await suspectedWrapperPromise(service(tParams || currentParams));
+            if (serviceErr) {
+              removeTreeLoadId(id);
+              throw serviceErr;
+            }
+            let temp;
+            if (transformRes2) {
+              const [trErr, trRes] = await suspectedWrapperPromise(transformRes2(serviceRes, options));
+              if (trErr) {
+                removeTreeLoadId(id);
+                throw trErr;
+              }
+              temp = trRes;
+            } else {
+              temp = serviceRes;
+            }
+            removeTreeLoadId(id);
+            if (!temp.records) temp.records = [];
+            if (isEmpty(temp.total)) temp.total = temp.records.length;
+            if (!temp.records.length) return;
+            const childrenKey = reTree.childrenKey || qdServiceTableTreeConfig.childrenKey;
+            tableRef.value?.setData(id, {
+              ...row,
+              __qdTreeLoaded: true,
+              [childrenKey]: []
+            });
+            tableRef.value?.appendTo(id, temp.records.map((item) => {
+              if (item.children) return item;
+              return {
+                ...item,
+                [childrenKey]: isEmpty(maxLevel) ? true : level + 1 < maxLevel
+              };
+            }));
+          };
+        }
+      }
+      const reColumns = columns || [];
+      if (selectType) {
+        const selectIdx = reColumns.findIndex((item) => item.type === "single" || item.type === "multiple");
+        const defaultSelect = {
+          colKey: "row-select",
+          type: selectType,
+          align: "center",
+          width: 50
+        };
+        if (selectIdx > -1) {
+          reColumns[selectIdx] = {
+            ...defaultSelect,
+            ...reColumns[selectIdx]
+          };
+        } else {
+          reColumns.unshift(defaultSelect);
+        }
+      }
+      const reSelectOnRowClick = selectOnRowClick ?? (!expandOnRowClick && !reTree?.expandTreeNodeOnClick);
+      const reOnScroll = (params) => {
+        onScroll?.(params);
+        const target = params.e.target;
+        if (!target) return;
+        const {
+          scrollTop,
+          scrollLeft
+        } = target;
+        scrollRecord.top = scrollTop;
+        scrollRecord.left = scrollLeft;
+      };
+      return {
+        loadingWithData,
+        tableOptions: {
+          ...reTableOptions,
+          columns: reColumns,
+          selectOnRowClick: reSelectOnRowClick,
+          expandOnRowClick,
+          tree: reTree,
+          onScroll: reOnScroll
+        },
+        externalLoad: loading2,
+        serviceOptions: {
+          service,
+          manual,
+          transformParams,
+          transformRes: reTransformRes,
+          pagination,
+          cacheKey,
+          cacheTime,
+          pollingInterval,
+          onBefore,
+          onAfter,
+          onSuccess,
+          onError
+        },
+        models: {
+          data: data2,
+          selectedRowKeys: selectedRowKeys2,
+          activeRowKeys: activeRowKeys2,
+          columnControllerVisible: columnControllerVisible2,
+          displayColumns: displayColumns2,
+          expandedRowKeys: expandedRowKeys2,
+          filterValue: filterValue2,
+          sort: sort2,
+          expandedTreeNodes: expandedTreeNodes2
+        }
+      };
+    });
+    const {
+      firstLoad,
+      manualTriggerLoad,
+      loading,
+      current,
+      pageSize,
+      total,
+      changeCurrent,
+      changePageSize,
+      changePagination,
+      runAsync,
+      run,
+      cancel,
+      refresh,
+      refreshAsync
+    } = useServicePagination({
+      ...reProps.value.serviceOptions,
+      onSuccess: (res) => {
+        data.value = res.list;
+        reProps.value.serviceOptions.onSuccess?.(res);
+      }
+    });
+    const tableLoad = computed(() => {
+      const {
+        externalLoad,
+        loadingWithData
+      } = reProps.value;
+      if (externalLoad) return true;
+      if (!data.value?.length && firstLoad.value) return true;
+      if (manualTriggerLoad.value) {
+        if (data.value?.length) {
+          if (loadingWithData) return true;
+          return false;
+        }
+        return true;
+      }
+      return false;
+    });
+    const rePagination = computed(() => {
+      return props.pagination === false ? void 0 : {
+        current: current.value,
+        pageSize: pageSize.value,
+        total: total.value,
+        onCurrentChange: changeCurrent,
+        onPageSizeChange: changePageSize
+      };
+    });
+    function removeTreeLoadId(id) {
+      const index = treeLoadIds.value.findIndex((item) => item === id);
+      if (index === -1) return;
+      treeLoadIds.value.splice(index, 1);
+    }
+    function resumeScrollRecord() {
+      const el = tableRef.value?.$el;
+      if (!el) return;
+      const scrollEl = el.querySelector(".t-table__content");
+      if (!scrollEl) return;
+      const {
+        scrollTop,
+        scrollLeft
+      } = scrollEl;
+      const {
+        top,
+        left
+      } = scrollRecord;
+      if (top === scrollTop && left === scrollLeft) return;
+      scrollEl.scrollTo({
+        top,
+        left
+      });
+    }
+    const expose = {
+      tableLoad,
+      firstLoad,
+      manualTriggerLoad,
+      loading,
+      current,
+      pageSize,
+      total,
+      changeCurrent,
+      changePageSize,
+      changePagination,
+      runAsync,
+      run,
+      cancel,
+      refresh,
+      refreshAsync
+    };
+    watch(columnControllerVisible, (visible) => {
+      const {
+        columns
+      } = reProps.value.tableOptions;
+      if (visible && !displayColumns.value && columns) {
+        displayColumns.value = columns.map((col) => col.colKey).filter(Boolean);
+      }
+    }, {
+      immediate: true
+    });
+    onMounted(() => {
+      Object.assign(expose, tableRef.value);
+    });
+    onActivated(() => {
+      resumeScrollRecord();
+    });
+    __expose(expose);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(EnhancedTable), mergeProps({
+        ref: "table",
+        class: ["qd-service-table", __props.headerBg ? "" : "t-table--header-bg-inherit"],
+        "selected-row-keys": unref(selectedRowKeys),
+        "onUpdate:selectedRowKeys": _cache[0] || (_cache[0] = ($event) => isRef(selectedRowKeys) ? selectedRowKeys.value = $event : null),
+        "active-row-keys": unref(activeRowKeys),
+        "onUpdate:activeRowKeys": _cache[1] || (_cache[1] = ($event) => isRef(activeRowKeys) ? activeRowKeys.value = $event : null),
+        "column-controller-visible": unref(columnControllerVisible),
+        "onUpdate:columnControllerVisible": _cache[2] || (_cache[2] = ($event) => isRef(columnControllerVisible) ? columnControllerVisible.value = $event : null),
+        "display-columns": unref(displayColumns),
+        "onUpdate:displayColumns": _cache[3] || (_cache[3] = ($event) => isRef(displayColumns) ? displayColumns.value = $event : null),
+        "expanded-row-keys": unref(expandedRowKeys),
+        "onUpdate:expandedRowKeys": _cache[4] || (_cache[4] = ($event) => isRef(expandedRowKeys) ? expandedRowKeys.value = $event : null),
+        "filter-value": unref(filterValue),
+        "onUpdate:filterValue": _cache[5] || (_cache[5] = ($event) => isRef(filterValue) ? filterValue.value = $event : null),
+        sort: unref(sort),
+        "onUpdate:sort": _cache[6] || (_cache[6] = ($event) => isRef(sort) ? sort.value = $event : null),
+        "expanded-tree-nodes": unref(expandedTreeNodes),
+        "onUpdate:expandedTreeNodes": _cache[7] || (_cache[7] = ($event) => isRef(expandedTreeNodes) ? expandedTreeNodes.value = $event : null)
+      }, reProps.value.tableOptions, {
+        loading: tableLoad.value,
+        data: unref(data),
+        pagination: rePagination.value
+      }), createSlots({
+        empty: withCtx(() => [createVNode(unref(Empty), {
+          class: "qd-service-table__empty",
+          title: unref(t)("emptyText")
+        }, null, 8, ["title"])]),
+        _: 2
+      }, [renderList(_ctx.$slots, (_, name) => {
+        return {
+          name,
+          fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps)), void 0, true)])
+        };
+      })]), 1040, ["class", "selected-row-keys", "active-row-keys", "column-controller-visible", "display-columns", "expanded-row-keys", "filter-value", "sort", "expanded-tree-nodes", "loading", "data", "pagination"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=table.vue2.mjs.map