hy-dispatch-ui-v3 0.2.66 → 0.2.68

package/es/components/hyTable/cpns/virtualTable.vue.mjs

@@ -1,15 +1,15 @@
-import { useModel, computed, ref, openBlock, createBlock, unref, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, renderList, normalizeStyle, withModifiers, normalizeClass, createVNode, mergeProps, createTextVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, mergeModels } from 'vue';
+import { useModel, useTemplateRef, computed, ref, openBlock, createBlock, unref, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, renderList, normalizeStyle, withModifiers, normalizeClass, createVNode, mergeProps, createTextVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, mergeModels } from 'vue';
 import { ElTableV2, ElCheckbox, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem } from 'element-plus';
 import { MoreFilled } from '@element-plus/icons-vue';
 import '../../index.mjs';
 import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
-import { operatorFilterHandler, operatorClickHandler, operatorDisabledHandler, operatorDisableTextdHandler, renderContentHandler, renderHeaderHandler } from '../js/index.mjs';
+import { operatorFilterHandler, operatorClickHandler, operatorDisabledHandler, operatorIsDotHandler, operatorDisableTextdHandler, renderContentHandler, renderHeaderHandler } from '../js/index.mjs';
 import _sfc_main$1 from './headerItem.vue.mjs';
-import { useLocale } from '../../../hooks/useLocale.mjs';
 import { isNumber, isString, isFunction, isArray, isBoolean, isEmpty } from '../../../utils/is.mjs';
 import { HyIcon } from '../../hyIcon/index.mjs';
 import { HyTooltip } from '../../hyTooltip/index.mjs';
+import { $t } from '../../../hooks/useLocale.mjs';
 
 const _sfc_main = {
   __name: "virtualTable",
@@ -79,7 +79,7 @@ const _sfc_main = {
     const props = __props;
     const emits = __emit;
     const expandedRowKeys = useModel(__props, "expandedRowKeys");
-    const { t } = useLocale();
+    const tableRef = useTemplateRef("tableRef");
     const avgWidth = computed(() => {
       const { total, totalWidth } = props.columns.reduce(
         ({ total: total2, totalWidth: totalWidth2 }, column) => {
@@ -277,12 +277,21 @@ const _sfc_main = {
         isAllChecked.value = false;
         selectedMap.value.clear();
         indeterminateKeys.value.clear();
+      },
+      scrollToTop(top) {
+        tableRef.value.scrollToTop(top);
+      },
+      scrollToLeft(left) {
+        tableRef.value.scrollToLeft(left);
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElTableV2), {
+        ref_key: "tableRef",
+        ref: tableRef,
         "expanded-row-keys": expandedRowKeys.value,
         "onUpdate:expandedRowKeys": ($event) => expandedRowKeys.value = $event,
+        cache: 0,
         "row-key": __props.rowKey,
         data: dataSource.value,
         columns: tableColumns.value,
@@ -421,11 +430,7 @@ const _sfc_main = {
                         (openBlock(true), createElementBlock(
                           Fragment,
                           null,
-                          renderList(unref(operatorFilterHandler)(
-                            column,
-                            { column, row, $index, cellIndex },
-                            "default"
-                          ), (citem, cindex) => {
+                          renderList(unref(operatorFilterHandler)(column, { column, row, $index, cellIndex }, "default"), (citem, cindex) => {
                             return openBlock(), createBlock(unref(HyTooltip), {
                               key: cindex,
                               "is-always": "",
@@ -434,7 +439,7 @@ const _sfc_main = {
                             }, {
                               default: withCtx(() => [
                                 createElementVNode("div", {
-                                  class: normalizeClass(["w-[40px] h-[48px] inline-flex flex-col items-center justify-center text-xs hover:font-bold border border-transparent rounded box-border", [
+                                  class: normalizeClass(["w-[40px] h-[48px] inline-flex flex-col items-center justify-center text-xs hover:font-bold border border-transparent rounded box-border relative", [
                                     citem.className,
                                     unref(operatorDisabledHandler)(citem, {
                                       column,
@@ -443,12 +448,7 @@ const _sfc_main = {
                                       cellIndex
                                     }) ? "cursor-not-allowed text-[var(--hy-el-text-color-disabled)] hover:border-[rgba(var(--hy-auxiliary),1)] hover:shadow-[0px_0px_5px_0px_rgba(var(--hy-auxiliary),0.5)]" : "cursor-pointer hover:border-theme hover:shadow-[0px_0px_5px_0px_rgba(var(--hy-theme),0.5)]"
                                   ]]),
-                                  onClick: ($event) => unref(operatorClickHandler)(
-                                    cindex,
-                                    column,
-                                    { column, row, $index, cellIndex },
-                                    "default"
-                                  )
+                                  onClick: ($event) => unref(operatorClickHandler)(cindex, column, { column, row, $index, cellIndex }, "default")
                                 }, [
                                   createVNode(unref(HyIcon), {
                                     "svg-name": citem.svgName,
@@ -466,7 +466,16 @@ const _sfc_main = {
                                   )) : (openBlock(), createElementBlock("div", {
                                     key: 1,
                                     class: "mt-1 whitespace-nowrap"
-                                  }, "\xA0"))
+                                  }, "\xA0")),
+                                  unref(operatorIsDotHandler)(citem, {
+                                    column,
+                                    row,
+                                    $index,
+                                    cellIndex
+                                  }) ? (openBlock(), createElementBlock("div", {
+                                    key: 2,
+                                    class: "w-2 h-2 absolute right-0 top-0 transform translate-x-1/2 -translate-y-1/2 rounded-full bg-danger-2 z-[2]"
+                                  })) : createCommentVNode("v-if", true)
                                 ], 10, ["onClick"])
                               ]),
                               _: 2
@@ -476,23 +485,14 @@ const _sfc_main = {
                           128
                           /* KEYED_FRAGMENT */
                         )),
-                        unref(operatorFilterHandler)(
-                          column,
-                          { column, row, $index, cellIndex },
-                          "more"
-                        )?.length ? (openBlock(), createBlock(unref(ElDropdown), {
+                        unref(operatorFilterHandler)(column, { column, row, $index, cellIndex }, "more")?.length ? (openBlock(), createBlock(unref(ElDropdown), {
                           key: 0,
                           ref_for: true,
                           ref: "operatorDropdownRef",
                           trigger: "click",
                           "popper-style": "min-width: 150px",
-                          placement: "bottom",
-                          onCommand: ($event) => unref(operatorClickHandler)(
-                            $event,
-                            column,
-                            { column, row, $index, cellIndex },
-                            "more"
-                          )
+                          placement: "bottom-end",
+                          onCommand: ($event) => unref(operatorClickHandler)($event, column, { column, row, $index, cellIndex }, "more")
                         }, {
                           dropdown: withCtx(() => [
                             createVNode(
@@ -519,10 +519,10 @@ const _sfc_main = {
                                         })
                                       }, {
                                         default: withCtx(() => [
-                                          createElementVNode("span", null, [
+                                          createElementVNode("span", { class: "relative" }, [
                                             createElementVNode(
                                               "span",
-                                              null,
+                                              { class: "pr-1" },
                                               toDisplayString(citem.label),
                                               1
                                               /* TEXT */
@@ -546,7 +546,16 @@ const _sfc_main = {
                                               })) + "\uFF09",
                                               1
                                               /* TEXT */
-                                            )) : createCommentVNode("v-if", true)
+                                            )) : createCommentVNode("v-if", true),
+                                            unref(operatorIsDotHandler)(citem, {
+                                              column,
+                                              row,
+                                              $index,
+                                              cellIndex
+                                            }) ? (openBlock(), createElementBlock("div", {
+                                              key: 1,
+                                              class: "w-2 h-2 absolute right-0 top-0 transform translate-x-1/2 -translate-y-1/2 rounded-full bg-danger-2 z-[2]"
+                                            })) : createCommentVNode("v-if", true)
                                           ])
                                         ]),
                                         _: 2
@@ -569,7 +578,7 @@ const _sfc_main = {
                               createVNode(unref(HyTooltip), {
                                 "is-always": "",
                                 overLine: 1,
-                                content: unref(t)("table.moreOperations")
+                                content: unref($t)("table.moreOperations")
                               }, {
                                 default: withCtx(() => [
                                   createElementVNode("div", { class: "w-[40px] h-[48px] inline-flex flex-col items-center justify-center text-main text-xs hover:font-bold border border-transparent hover:border-theme hover:shadow-[0px_0px_5px_0px_rgba(var(--hy-theme),0.5)] rounded box-border cursor-pointer" }, [
@@ -588,7 +597,7 @@ const _sfc_main = {
                                     createElementVNode(
                                       "div",
                                       { class: "mt-1" },
-                                      toDisplayString(unref(t)("table.more")),
+                                      toDisplayString(unref($t)("table.more")),
                                       1
                                       /* TEXT */
                                     )

package/es/components/hyTable/js/index.mjs

@@ -2,8 +2,8 @@ import { unref, ref, computed, watch, nextTick, watchEffect } from 'vue';
 import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
 import '../../index.mjs';
-import { isPermission, isBoolean, isFunction, isNumber, isString, isArray } from '../../../utils/is.mjs';
-import { useLocale } from '../../../hooks/useLocale.mjs';
+import { isPermission, isBoolean, isFunction, isNumber, isString, isArray, isSymbol } from '../../../utils/is.mjs';
+import { $t } from '../../../hooks/useLocale.mjs';
 import { ElLoading as HyLoading } from '../../hyLoading/index.mjs';
 
 function tableColumnShowHandler(column) {
@@ -31,17 +31,14 @@ function tableColumnsEditableleHandler(columns, columnsEditablele) {
     });
   }
   const sortList = Array.from(sortSet.values()).reduce((a, b) => a - b);
-  const columnsList = Object.keys(columnsEditableleObj).reduce(
-    (columnsList2, key) => {
-      const list = columnsEditableleObj[key];
-      for (let i = 0; i < list.length; i++) {
-        const target = list[i];
-        columnsList2.push(target.column);
-      }
-      return columnsList2;
-    },
-    []
-  );
+  const columnsList = Object.keys(columnsEditableleObj).reduce((columnsList2, key) => {
+    const list = columnsEditableleObj[key];
+    for (let i = 0; i < list.length; i++) {
+      const target = list[i];
+      columnsList2.push(target.column);
+    }
+    return columnsList2;
+  }, []);
   return {
     columnsList,
     columnsEditablele
@@ -86,33 +83,28 @@ function operatorShowHandler(operator, scope) {
   if (isFunction(show)) return show(scope);
   return true;
 }
-function operatorDisabledHandler(column, scope) {
-  const { disabled } = column;
+function operatorDisabledHandler(operator, scope) {
+  const { disabled } = operator;
   if (isBoolean(disabled)) return disabled;
   if (isFunction(disabled)) return disabled(scope);
   return false;
 }
-function operatorDisableTextdHandler(column, scope) {
-  const { t } = useLocale();
-  const { disabledText } = column;
+function operatorDisableTextdHandler(operator, scope) {
+  const { disabledText } = operator;
   if (isString(disabledText)) return disabledText;
   if (isFunction(disabledText)) return disabledText(scope);
-  return t("table.nonsupport");
+  return $t("table.nonsupport");
 }
 function operatorFilterHandler(column, scope, type = "all") {
   let { width } = column;
   width = isString(width) ? Number(width.replace(/[a-zA-Z]+/g, "")) : width;
-  const operator = (column.operator || []).filter(
-    (item) => operatorShowHandler(item, scope)
-  );
+  const operator = (column.operator || []).filter((item) => operatorShowHandler(item, scope));
   if (type === "all" || operator.length <= 1 && type === "default") {
     return operator;
   }
   const btnWidth = 40;
   const gapWidth = 12;
-  const operatorCount = Math.floor(
-    (width - 12 * 2 - btnWidth) / (btnWidth + gapWidth) + 1
-  );
+  const operatorCount = Math.floor((width - 12 * 2 - btnWidth) / (btnWidth + gapWidth) + 1);
   if (operatorCount === operator.length) {
     return type === "default" ? operator : [];
   }
@@ -128,6 +120,12 @@ function operatorClickHandler(command, column, scope, type = "all") {
   if (operatorDisabledHandler(target, scope)) return;
   target?.handler && target.handler(scope);
 }
+function operatorIsDotHandler(operator, scope) {
+  const { isDot } = operator;
+  if (isFunction(isDot)) return isDot(scope);
+  if (isBoolean(isDot)) return isDot;
+  return false;
+}
 function renderHeaderHandler(column, scope) {
   if (!column) return;
   if (isFunction(column.renderHeader)) {
@@ -144,15 +142,7 @@ function renderContentHandler(column, scope) {
   return row[column.prop];
 }
 const useAppTableWrapper = (hy) => {
-  const {
-    props,
-    emits,
-    containerRef,
-    tableRef,
-    tableDropdownRef,
-    operatorDropdownRef
-  } = hy;
-  const { t } = useLocale();
+  const { props, emits, containerRef, tableRef, tableDropdownRef, operatorDropdownRef } = hy;
   const CACHE_COLUMNS_KEY = props.controller || props.url || "CACHE_COLUMNS_KEY";
   const tableDataSource = ref([]);
   const tableColumns = ref([]);
@@ -161,15 +151,12 @@ const useAppTableWrapper = (hy) => {
     return tableColumns.value.filter((column) => tableColumnShowHandler(column));
   });
   const searchPlaceholder = computed(() => {
-    const searchLabelSet = tableColumnsList.value.reduce(
-      (searchLabelSet2, column) => {
-        if (column.isSearch) {
-          searchLabelSet2.add(column.label);
-        }
-        return searchLabelSet2;
-      },
-      /* @__PURE__ */ new Set()
-    );
+    const searchLabelSet = tableColumnsList.value.reduce((searchLabelSet2, column) => {
+      if (column.isSearch) {
+        searchLabelSet2.add(column.label);
+      }
+      return searchLabelSet2;
+    }, /* @__PURE__ */ new Set());
     if (props.searchArr?.length > 0) {
       props.searchArr.forEach((item) => {
         searchLabelSet.add(item.label);
@@ -184,10 +171,7 @@ const useAppTableWrapper = (hy) => {
     return row.id;
   }
   function onTableColumnsSelectHandler(value) {
-    const { columnsList, searchText } = tableColumnsEditableleHandler(
-      props.tableColumns,
-      value
-    );
+    const { columnsList, searchText } = tableColumnsEditableleHandler(props.tableColumns, value);
     tableColumns.value = columnsList;
     tableColumnsEditablele.value = value;
     sessionStorage.setItem(CACHE_COLUMNS_KEY, JSON.stringify(value));
@@ -246,9 +230,7 @@ const useAppTableWrapper = (hy) => {
       x: clientX,
       y: clientY
     });
-    const column = tableColumns.value.find(
-      (column2) => column2.type === "operator"
-    );
+    const column = tableColumns.value.find((column2) => column2.type === "operator");
     const operator = operatorFilterHandler(column, { row });
     if (!operator?.length) return;
     tableTriggerRef.value.column = column;
@@ -272,15 +254,16 @@ const useAppTableWrapper = (hy) => {
     if (props.type === "default") {
       return tableColumnsList.value.some((column) => column.type === "expand");
     } else if (props.type === "virtual") {
-      return tableColumnsList.value.some(
-        (column) => column.type === "expand" && column.expandType === "expand"
-      );
+      return tableColumnsList.value.some((column) => column.type === "expand" && column.expandType === "expand");
     }
     return false;
   });
   const isAccordionMode = computed(() => {
     return isExpandTable.value && props.expandMode === "accordion";
   });
+  function getRowExpansion() {
+    return expandRowKeys.value;
+  }
   function setRowExpansion(list = []) {
     const keys = (list || []).map((item) => {
       return isString(item) || isNumber(item) ? item : getRowKey(item);
@@ -288,7 +271,7 @@ const useAppTableWrapper = (hy) => {
     expandRowKeys.value = isAccordionMode.value ? [keys[0]] : keys;
   }
   function toggleRowExpansion(row, expanded) {
-    const key = isString(row) || isNumber(row) ? row : getRowKey(row);
+    const key = isString(row) || isNumber(row) || isSymbol(row) ? row : getRowKey(row);
     const index = expandRowKeyMap.value.get(key);
     const isExpanded = isBoolean(expanded) ? expanded : !isNumber(index);
     if (isAccordionMode.value) {
@@ -304,7 +287,8 @@ const useAppTableWrapper = (hy) => {
         expandRowKeys.value.splice(index, 1);
       }
     }
-    emits("expand-change", row, isExpanded);
+    const data = tableDataSource.value.find((v) => getRowKey(v) === key);
+    emits("expand-change", data, isExpanded);
   }
   function onTableRowExpandChangeHandler(row, expandedRows) {
     if (props.type === "virtual") {
@@ -387,9 +371,7 @@ const useAppTableWrapper = (hy) => {
     selectedList.value = list || [];
     clearSelection();
     list.forEach((row) => {
-      const item = tableDataSource.value.find(
-        (v) => getRowKey(row) === getRowKey(v)
-      );
+      const item = tableDataSource.value.find((v) => getRowKey(row) === getRowKey(v));
       if (item) {
         tableRef.value.toggleRowSelection(item, true);
       } else {
@@ -408,11 +390,28 @@ const useAppTableWrapper = (hy) => {
     }
     return className.filter(Boolean).join(" ");
   }
+  function scrollToTop(top) {
+    if (!isNumber(top) || isNaN(top)) return;
+    if (props.type === "virtual") {
+      tableRef.value.scrollToTop(top);
+    } else {
+      tableRef.value.setScrollTop(top);
+    }
+  }
+  function scrollToLeft(left) {
+    if (!isNumber(left) || isNaN(left)) return;
+    if (props.type === "virtual") {
+      tableRef.value.scrollToLeft(left);
+    } else {
+      tableRef.value.setScrollLeft(left);
+    }
+  }
+  function onScrollHandler(params) {
+    emits("scroll", params);
+  }
+  window.scrollToTop = scrollToTop;
   watchEffect(() => {
-    const { columnsList, columnsEditablele, searchText } = tableColumnHandler(
-      props.tableColumns,
-      CACHE_COLUMNS_KEY
-    );
+    const { columnsList, columnsEditablele, searchText } = tableColumnHandler(props.tableColumns, CACHE_COLUMNS_KEY);
     tableColumns.value = columnsList;
     tableColumnsEditablele.value = columnsEditablele;
   });
@@ -434,6 +433,7 @@ const useAppTableWrapper = (hy) => {
     clearSelectedList,
     expandRowKeys,
     expandRowKeyMap,
+    getRowExpansion,
     setRowExpansion,
     toggleRowExpansion,
     onTableRowExpandChangeHandler,
@@ -442,8 +442,11 @@ const useAppTableWrapper = (hy) => {
     onTableRowClickHandler,
     onTableColumnsSelectHandler,
     showAppTableLoading,
-    closeAppTableLoading
+    closeAppTableLoading,
+    scrollToTop,
+    scrollToLeft,
+    onScrollHandler
   };
 };
 
-export { operatorClickHandler, operatorDisableTextdHandler, operatorDisabledHandler, operatorFilterHandler, renderContentHandler, renderHeaderHandler, tableColumnHandler, tableColumnShowHandler, useAppTableWrapper };
+export { operatorClickHandler, operatorDisableTextdHandler, operatorDisabledHandler, operatorFilterHandler, operatorIsDotHandler, renderContentHandler, renderHeaderHandler, tableColumnHandler, tableColumnShowHandler, useAppTableWrapper };

package/es/components/hyTable/js/search.mjs

@@ -101,6 +101,26 @@ function useAppTableSearch(hy) {
     const isReset = !(isEmpty(oldQueryValue) && isEmpty(props.filterModel.query) || oldQueryValue === props.filterModel.query);
     getData(isReset ? 1 : null);
   }
+  async function getOptions() {
+    if (appSearchRef.value) {
+      await appSearchRef.value.getOptions();
+    }
+  }
+  async function getOptionsFields(keys) {
+    if (appSearchRef.value) {
+      await appSearchRef.value.getOptionsFields(keys);
+    }
+  }
+  async function getOptionsError() {
+    if (appSearchRef.value) {
+      await appSearchRef.value.getOptionsError();
+    }
+  }
+  function getOptionsByField() {
+    if (appSearchRef.value) {
+      return appSearchRef.value.getOptionsByField();
+    }
+  }
   return {
     totalElements,
     showFilter,
@@ -113,7 +133,11 @@ function useAppTableSearch(hy) {
     getTableDataSource,
     onSizeChangeHandler,
     onCurrentChangeHandler,
-    onSearchQueryHandler
+    onSearchQueryHandler,
+    getOptions,
+    getOptionsFields,
+    getOptionsError,
+    getOptionsByField
   };
 }
 

package/es/components/hyTable/js/useAppTable.mjs

@@ -2,12 +2,11 @@ import { toRef } from 'vue';
 import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
 import '../../index.mjs';
-import { useLocale } from '../../../hooks/useLocale.mjs';
+import { $t } from '../../../hooks/useLocale.mjs';
 import { isPermission, isBoolean, isString, isObject, isEmpty } from '../../../utils/is.mjs';
 import { useAppSearch } from '../../hySearch/js/useAppSearch.mjs';
 
 function getColumnDefaultConfig(column) {
-  const { t } = useLocale();
   switch (column.type) {
     case "selection":
       return {
@@ -17,7 +16,7 @@ function getColumnDefaultConfig(column) {
     case "index":
       return {
         prop: `${column.type}_prop`,
-        label: t("table.index")
+        label: $t("table.index")
       };
     case "expand":
       return {
@@ -25,7 +24,7 @@ function getColumnDefaultConfig(column) {
       };
     case "operator":
       return {
-        label: t("table.operator"),
+        label: $t("table.operation"),
         prop: `operator_prop`,
         fixed: "right"
       };

package/es/components/hyTable/style/table.scss

@@ -69,3 +69,11 @@
     }
   }
 }
+
+.hy-el-table--default .hy-el-table__cell {
+  padding: 0px 0px !important;
+}
+.hy-table .hy-el-table .hy-el-table__cell .cell {
+  padding: 8px 12px !important;
+  box-sizing: border-box;
+}