cnhis-design-vue 3.1.34-beta.9 → 3.1.34

package/es/components/big-table/src/BigTable.vue2.js

@@ -19,7 +19,7 @@ import { useMessage, NIcon, NTooltip, NCheckbox, NCheckboxGroup, NGrid, NGi, NBu
 import Grid from '../../grid/index.js';
 import XEUtils from 'xe-utils';
 import 'moment';
-import { handleTableHeight, setTableConfig, handleGroupColums, treeToList, checkMethod, setTreeGroupTitle, isFilterItem, handleName, generateEditRender, handlerInitSearchItem, getEvaluate, getMapVal, getCandidateComponents, getageShowType, isLink, showFilter, reScrollFilterWrap, hideFilterWrap, mergeConObjFn, setDefaultFormData, handleImgArr, handleImgSrc, modalDetailImage, handleQrCodeContent, getInlineEditBtn, isCopy, setVisibleCheckAllWrap, handleTableImageSize, visibleMethod, getRowStyle, getFooterGroup, flattenRow, intersectRow, removeCheckedDisabledRows } from './utils.js';
+import { handleTableHeight, setTableConfig, handleGroupColums, treeToList, checkMethod, setTreeGroupTitle, isFilterItem, handleName, generateEditRender, handlerInitSearchItem, getEvaluate, getMapVal, getCandidateComponents, getageShowType, isLink, showFilter, reScrollFilterWrap, hideFilterWrap, mergeConObjFn, setDefaultFormData, handleImgArr, handleImgSrc, modalDetailImage, handleQrCodeContent, getInlineEditBtn, isCopy, setVisibleCheckAllWrap, handleTableImageSize } from './utils.js';
 import InputButtonScript from './components/input-button.vue.js';
 import Separate from './components/separate.vue.js';
 import xb_big from '../../../shared/assets/img/xb_big.png.js';
@@ -101,10 +101,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       updateAnchor,
       anchorEvent
     } = useAnchor(props, state, emit, xGrid);
-    const {
-      keyDown,
-      scroll
-    } = useEvent(props, state, emit, xGrid, anchorEvent);
+    useEvent(props, state, emit, xGrid, anchorEvent);
     const currentCheckedKeys = computed(() => {
       var _a;
       return ((_a = state.checkedRows) == null ? void 0 : _a.map((row) => row[props.primaryKey])) || [];
@@ -115,7 +112,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       let isCheckedTotal = currentCheckedKeys.value.length === props.pageVO.total;
       return isMaxChecked || !isCurrentPageAllCheck || isCheckedTotal;
     });
-    const singleCheckedKey = computed(() => {
+    computed(() => {
       const checkedKeys = currentCheckedKeys.value || [];
       return checkedKeys.length == 1 ? checkedKeys[0] : "";
     });
@@ -136,7 +133,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         sysImageSize: props.sysImageSize || {}
       };
     });
-    const treeConfig = computed(() => {
+    computed(() => {
       let result = getAttr("tree-config");
       let {
         isTransform
@@ -168,7 +165,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return result;
     });
-    const keyboardConfig = computed(() => {
+    computed(() => {
       return {
         editMethod({
           row,
@@ -254,10 +251,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = props.columnConfig) == null ? void 0 : _a.fieldList) == null ? void 0 : _b.find((field) => field.columnName === columnName);
     }, xGrid);
-    const onResizableChange = (payload) => {
-      onColumnResize(payload);
-      emit("resizableChange", payload);
-    };
     async function loadData(data) {
       state.isShowEmpty = !(data == null ? void 0 : data.length);
       let formatList = data;
@@ -336,7 +329,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         editConfig = {},
         rowConfig = {},
         showSeq = true,
-        seqWidth = 34
+        seqWidth = 34,
+        checkboxConfig = {}
       } = map;
       if (isEdit) {
         Object.assign(state.editConfig, editConfig);
@@ -406,7 +400,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         resizable: false,
         width: checkMinWidth,
         slots: selectType === "checkbox" && !((_b = getAttr("checkbox-config")) == null ? void 0 : _b.checkMethod) ? checkboxSlot : null,
-        showOverflow: true
+        showOverflow: true,
+        ...checkboxConfig
       }];
       const seqObj = columns.find((v) => v.type == "seq");
       if ((_c = props == null ? void 0 : props.columnConfig) == null ? void 0 : _c.seqSlotFn) {
@@ -1009,54 +1004,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       state.hasRefresh = false;
       emit("refreshTable");
     };
-    const getRowClassName = (params) => {
-      const {
-        rowClassName = null
-      } = props.columnConfig;
-      if (rowClassName) {
-        return XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName;
-      }
-      const selectStyle = () => {
-        const {
-          row,
-          $rowIndex,
-          rowIndex
-        } = params;
-        const k = singleCheckedKey.value;
-        return k && k === row[props.primaryKey] ? "single--checked" : "";
-      };
-      return state.selectType === "checkbox" ? selectStyle() : null;
-    };
-    const footerMethod = (payload) => {
-      const {
-        columns,
-        data
-      } = payload;
-      if (isFunction(attr.footerMethod))
-        return attr.spanMethod(footerMethod);
-      if (isFunction(attr["footer-method"]))
-        return attr["footer-method"](payload);
-      if (!props.groupCountFields || !props.groupCountFields.length) {
-        return [columns.map((column, index) => {
-          if (index === 0) {
-            return null;
-          }
-          return null;
-        })];
-      }
-      let groupText = getFooterGroup(columns, data, props);
-      let groupColumns = columns.map((column, index) => {
-        if (index === 0) {
-          return null;
-        } else if (index === 1) {
-          return groupText;
-        }
-        return null;
-      });
-      emit("setGroupText", groupText);
-      state.groupText = groupText;
-      return [groupColumns];
-    };
     const loadChildrenMethod = ({
       row
     }) => {
@@ -1145,433 +1092,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         };
       });
     };
-    const colspanMethod = (payload) => {
-      var _a;
-      const defaultSpan = {
-        rowspan: 1,
-        colspan: 1
-      };
-      const {
-        row,
-        column
-      } = payload;
-      if (isFunction(attr.spanMethod))
-        return attr.spanMethod(payload);
-      if (isFunction(attr["span-method"]))
-        return attr["span-method"](payload);
-      if (state.isTree != 3) {
-        return defaultSpan;
-      }
-      const xTree = xGrid.value;
-      if (!xTree)
-        return defaultSpan;
-      const {
-        tableColumn = []
-      } = (xTree == null ? void 0 : xTree.getTableColumn()) || {};
-      const fristKeyIndex = tableColumn.findIndex((column2) => !!column2.property);
-      const fixedRightColsSpan = tableColumn.filter((column2) => column2.fixed === "right").length;
-      const colspan = tableColumn.length - fristKeyIndex - fixedRightColsSpan;
-      const isOldVxeTree = row.childrenList && row.childrenList.length;
-      const isTransformVxeTree = ((_a = props.tableParams) == null ? void 0 : _a.isTransform) && !row.qianduan_parent_id;
-      if (isOldVxeTree || isTransformVxeTree) {
-        if (column.treeNode) {
-          return {
-            rowspan: 1,
-            colspan
-          };
-        } else if (!column.property || column.fixed === "right") {
-          return defaultSpan;
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          };
-        }
-      }
-    };
-    const footerRowspanMethod = (obj) => {
-      if (!props.groupCountFields || !props.groupCountFields.length)
-        return {
-          rowspan: 1,
-          colspan: 1
-        };
-      let {
-        $rowIndex,
-        _columnIndex
-      } = obj;
-      let len = state.columnLen || 99;
-      let {
-        isBatchSelect
-      } = props.columnConfig;
-      if ($rowIndex === 0) {
-        if (isBatchSelect == 1) {
-          if (_columnIndex === 0) {
-            return {
-              rowspan: 1,
-              colspan: 2
-            };
-          } else if (_columnIndex === 1) {
-            return {
-              rowspan: 1,
-              colspan: 0
-            };
-          } else if (_columnIndex === 2) {
-            return {
-              rowspan: 1,
-              colspan: len
-            };
-          }
-          return {
-            rowspan: 1,
-            colspan: 0
-          };
-        }
-        if (_columnIndex === 0) {
-          return {
-            rowspan: 1,
-            colspan: 1
-          };
-        } else if (_columnIndex === 1) {
-          return {
-            rowspan: 1,
-            colspan: len
-          };
-        }
-        return {
-          rowspan: 1,
-          colspan: 0
-        };
-      }
-    };
-    const rowdblclick = ({
-      row,
-      column
-    }) => {
-      if (isScanMultiTable.value || !!props.isInlineOperating)
-        return false;
-      if (XEUtils.has(row, GROUP_TITLE_KEY))
-        return false;
-      emit("setNestTableClick", props.isNestTable);
-      emit("rowdblclick", row, column, true, true);
-    };
-    const pubCheckChange = (rows = []) => {
-      state.treeTableLength = rows.filter((item) => {
-        let isGroupRow = XEUtils.has(item, GROUP_TITLE_KEY);
-        return !isGroupRow;
-      }).length;
-      state.visibleTreeCheck = rows.length > 1;
-      emit("selectionChange", rows);
-    };
-    const updateAddCheckedRows = (rows, isTree = false) => {
-      let obj = {
-        isUpdate: true,
-        updateRows: rows,
-        isTree
-      };
-      if (isTree) {
-        Object.assign(obj, {
-          isTree,
-          isCheckedChange: true,
-          checkedRows: state.checkedRows
-        });
-      }
-      emit("selectionChangeLocal", obj);
-    };
-    const removeCheckedRows = (rows, isCheckedChange) => {
-      removeCheckedDisabledRows(state);
-      let checkedRows = state.checkedRows;
-      let needRemoveIndexs = [];
-      for (let i = 0; i < rows.length; i++) {
-        let row = rows[i];
-        let removeIndex = currentCheckedKeys.value.findIndex((item) => {
-          return item === row[props.primaryKey];
-        });
-        removeIndex >= 0 && needRemoveIndexs.push(removeIndex);
-      }
-      needRemoveIndexs.sort((a, b) => b - a);
-      emit("selectionChangeLocal", {
-        isAdd: false,
-        isCheckedChange,
-        needRemoveIndexs,
-        newCheckedRows: [],
-        checkedRows
-      });
-    };
-    const setCheckedMehod = (setChecked, row) => {
-      if (setChecked) {
-        updateAddCheckedRows(row);
-        return;
-      }
-      if (props.pageVO.pageIndex != state.lastPageIndex) {
-        updateAddCheckedRows(row);
-        return;
-      }
-      if (currentCheckedKeys.value.includes(row[props.primaryKey])) {
-        removeCheckedRows([row]);
-        return;
-      }
-      updateAddCheckedRows(row);
-    };
-    const handlerClickRow = (data) => {
-      var _a, _b, _c;
-      let {
-        row,
-        $event = {},
-        $rowIndex,
-        triggerCheckbox
-      } = data;
-      if (((_a = getAttr("checkbox-config")) == null ? void 0 : _a.noTriggerCellClick) && triggerCheckbox) {
-        return false;
-      }
-      if (((_b = getAttr("checkbox-config")) == null ? void 0 : _b.trigger) === "default") {
-        emit("handlerClickRow", row, $rowIndex);
-        return false;
-      }
-      if (isScanMultiTable.value || props.isInlineOperating)
-        return false;
-      if (XEUtils.has(data == null ? void 0 : data.row, GROUP_TITLE_KEY))
-        return false;
-      if (state.isTriggerSelectionChange && state.isTree == 0)
-        return false;
-      let table = xGrid.value;
-      isAboutNestTable.value && emit("resetNestLastClickTable", table);
-      let {
-        className,
-        tagName
-      } = $event.target || {};
-      if (tagName == "INPUT" || tagName == "svg" || tagName == "path")
-        return;
-      if (className && XEUtils.isString(className)) {
-        if (className.includes("n-input") || className.includes("n-base-selection-label"))
-          return;
-        if (className.includes("vxe-table--expand-btn"))
-          return;
-      }
-      isAboutNestTable.value && emit("setNestLastClickTable", table, props.isNestTable, row[handleRowId.value], row);
-      emit("setNestTableClick", false);
-      if (props.isNestTable) {
-        table == null ? void 0 : table.setAllCheckboxRow(false);
-        nestHandleClickRow(table, data);
-        return;
-      }
-      const batchSelect = (_c = getAttr("checkbox-config")) == null ? void 0 : _c.batchSelect;
-      let forbiddenBatchSelect = !checkMethod(data);
-      if (state.selectType == "checkbox" && !batchSelect && (forbiddenBatchSelect || data.row.$__SEPARATE)) {
-        table == null ? void 0 : table.setAllCheckboxRow(false);
-        const checked2 = getRowClassName({
-          row
-        }) == "single--checked";
-        const value = !checked2 ? [] : [row];
-        state.checkedRows = value;
-        pubCheckChange(value);
-        emit("handlerClickRow", row, $rowIndex);
-        emit("checkboxChange", {
-          checked: checked2,
-          row,
-          index: $rowIndex,
-          records: [row]
-        });
-        return;
-      }
-      state.visibleCheckAllWrap = false;
-      state.visibleCheckAllWrapMore = false;
-      let checked = false;
-      if (state.selectType == "radio") {
-        checked = table.isCheckedByRadioRow(row);
-      } else {
-        checked = table.isCheckedByCheckboxRow(row);
-      }
-      if (state.isradioChange) {
-        checked = false;
-        state.isradioChange = false;
-      }
-      let checkedRow = table.getCheckboxRecords();
-      let rowLen = state.checkedRows.filter((item) => !XEUtils.has(item, GROUP_TITLE_KEY)).length;
-      let newRow = [];
-      if (state.isTree != 0) {
-        let {
-          className: className2
-        } = $event.target || {};
-        if (className2 && className2.includes("vxe-tree--node-btn"))
-          return;
-        if (state.selectType === "checkbox") {
-          let rowVal = {};
-          if (!state.isTriggerSelectionChange) {
-            table.setAllCheckboxRow(false);
-            state.checkedRows = [row];
-            pubCheckChange([row]);
-            rowVal = row;
-          } else {
-            if (checkedRow.length > 1)
-              return false;
-            rowVal = checked || checkedRow.length === 1 && !checked ? checkedRow[0] : {};
-            state.checkedRows = [rowVal];
-          }
-          updateAddCheckedRows(rowVal, true);
-          emit("handlerClickRow", rowVal);
-          return;
-        }
-        let newTheUniqueKeyArr = [];
-        flattenRow(row, newRow, newTheUniqueKeyArr, handleRowId.value);
-        let res = intersectRow(checkedRow, newTheUniqueKeyArr, handleRowId.value);
-        if (!res) {
-          rowLen = 1;
-        } else {
-          rowLen = checkedRow.filter((item) => !XEUtils.has(item, GROUP_TITLE_KEY)).length;
-        }
-      }
-      !batchSelect && table.setAllCheckboxRow(false);
-      let setChecked = checked;
-      if (rowLen > 1) {
-        state.selectType != "radio" && table.setCheckboxRow([row], true);
-        state.isTree != 0 && state.selectType != "radio" && pubCheckChange(newRow);
-        state.selectType != "radio" && emit("handlerClickRow", row, $rowIndex);
-      } else {
-        setChecked = !setChecked;
-        if (!setChecked) {
-          state.selectType == "radio" && table.clearRadioRow();
-          state.isTree != 0 && state.selectType != "radio" && pubCheckChange([]);
-        } else {
-          state.selectType == "radio" && table.setRadioRow(row);
-          state.isTree != 0 && state.selectType != "radio" && pubCheckChange(newRow);
-        }
-        state.selectType != "radio" && table.setCheckboxRow([row], setChecked);
-      }
-      if (state.isTree != 0) {
-        emit("checkboxChange", {
-          checked: setChecked,
-          row,
-          index: $rowIndex,
-          records: checkedRow
-        });
-        setChecked && emit("handlerClickRow", row, $rowIndex);
-        return;
-      }
-      setCheckedMehod(setChecked, row);
-      if (setChecked || rowLen > 1 || !rowLen) {
-        state.checkedRows = [row];
-      }
-      if (!setChecked && rowLen === 1) {
-        state.checkedRows = [];
-      }
-      setCurrentCheckedLength();
-      state.lastPageIndex = props.pageVO.pageIndex;
-      emit("checkboxChange", {
-        checked: setChecked,
-        row,
-        index: $rowIndex,
-        records: table.getCheckboxRecords()
-      });
-      setChecked && emit("handlerClickRow", row, $rowIndex);
-    };
-    const addCheckedRows = (rows) => {
-      removeCheckedDisabledRows(state);
-      let checkedRows = state.checkedRows;
-      let newCheckedRows = rows.filter((row) => {
-        return !currentCheckedKeys.value.includes(row[props.primaryKey]);
-      });
-      checkedRows.push(...newCheckedRows);
-      emit("selectionChangeLocal", {
-        isAdd: true,
-        isCheckedChange: true,
-        newCheckedRows,
-        checkedRows
-      });
-    };
-    const treeTableSelectionChange = (records) => {
-      if (state.isTree == 0) {
-        emit("selectionChange", records);
-        return false;
-      }
-      pubCheckChange(records);
-      return true;
-    };
-    const selectionChange = ({
-      checked,
-      row,
-      records,
-      $rowIndex
-    }) => {
-      let table = xGrid.value;
-      table.clearCurrentRow();
-      state.isTriggerSelectionChange = true;
-      setTimeout(() => {
-        state.isTriggerSelectionChange = false;
-      }, 0);
-      emit("checkboxChange", {
-        checked,
-        row,
-        index: $rowIndex,
-        records
-      });
-      if (treeTableSelectionChange(records))
-        return;
-      if (checked) {
-        addCheckedRows([row]);
-      } else {
-        removeCheckedRows([row], true);
-      }
-      setCurrentCheckedLength();
-    };
-    const selectionChangeAll = ({
-      checked,
-      records
-    }) => {
-      if (treeTableSelectionChange(records))
-        return;
-      if (checked) {
-        addCheckedRows(records);
-      } else {
-        removeCheckedRows(props.data);
-      }
-      setCurrentCheckedLength();
-    };
-    const radioOnChange = (rowData = {}) => {
-      let {
-        row
-      } = rowData;
-      emit("selectionChange", [{
-        ...row
-      }]);
-    };
-    const sortChange = ({
-      property,
-      order
-    }) => {
-      if (props.isInlineOperating)
-        return false;
-      Object.values(state.filterFields).forEach((item) => item.filterSort = null);
-      emit("sortChange", {
-        prop: property,
-        order
-      });
-    };
     const showDrawer = () => {
       const theads = xGrid.value.$el.childNodes[0].childNodes[1].childNodes[0].getElementsByClassName("mycolumn");
       emit("setNestTableClickSetting", props.isNestTable);
       emit("showDrawer", theads);
     };
-    const handleCellMouseenter = ({
-      column,
-      $event
-    }) => {
-      if (column.showOverflow === "title") {
-        const target = $event == null ? void 0 : $event.currentTarget;
-        const cls = target == null ? void 0 : target.className;
-        const bodyCls = " vxe-body--column ";
-        if (cls && ` ${cls} `.includes(bodyCls) && target && target.hasAttribute("title")) {
-          const cellElem = target.querySelector(".vxe-cell");
-          if (cellElem && cellElem.hasAttribute("title")) {
-            cellElem.removeAttribute("title");
-          }
-          if (props.isInlineOperating) {
-            if (target && target.hasAttribute("title")) {
-              target.removeAttribute("title");
-            }
-          }
-        }
-      }
-    };
     const getFooterTooltipTitle = (column) => {
       let t = "";
       if (XEUtils.has(props.sumData, column.property)) {
@@ -2268,7 +1793,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     });
-    const handleMenuClickEvent = (payload) => emit("menuClick", payload);
     expose({
       formatData,
       xGrid,
@@ -2277,7 +1801,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       handleFilterClearAll
     });
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createElementBlock(Fragment, null, [state.anchorList.length ? (openBlock(), createBlock(unref(NTabs), {
         key: 0,
         type: "line",
@@ -2316,77 +1839,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         "show-footer-overflow": "title",
         "keep-source": "",
         "auto-resize": "",
-        height: props.height ? "auto" : void 0,
-        "cell-style": state.cellStyle
+        height: props.height ? "auto" : void 0
       }, _ctx.$attrs, {
-        "mouse-config": {
-          selected: ((_a = _ctx.columnConfig.keyboardConfig) == null ? void 0 : _a.isEdit) ? true : false
-        },
-        "tree-config": unref(treeConfig),
-        "row-class-name": getRowClassName,
-        "row-config": {
-          ...state.rowConfig,
-          ...unref(getAttr)("row-config")
-        },
-        "show-footer": _ctx.showFooter && !props.isInlineOperating,
-        "footer-method": footerMethod,
-        "sort-config": {
-          trigger: "cell",
-          remote: true,
-          ...unref(getAttr)("sort-config")
-        },
-        "span-method": colspanMethod,
-        "footer-span-method": footerRowspanMethod,
-        "tooltip-config": {
-          enterable: false,
-          ...unref(getAttr)("tooltip-config")
-        },
-        "checkbox-config": {
-          checkField: "checked",
-          labelField: "checked",
-          checkMethod: unref(checkMethod),
-          visibleMethod: unref(visibleMethod),
-          trigger: "cell",
-          reserve: true,
-          highlight: true,
-          ...unref(getAttr)("checkbox-config")
-        },
-        "radio-config": {
-          checkField: "checked",
-          trigger: "cell",
-          reserve: true,
-          highlight: true,
-          ...unref(getAttr)("radio-config")
-        },
-        "scroll-y": {
-          gt: 50,
-          ...unref(getAttr)("scroll-y")
-        },
-        "row-style": unref(getRowStyle),
-        "edit-config": state.editConfig,
-        "expand-config": {
-          lazy: true,
-          accordion: _ctx.columnConfig && _ctx.columnConfig.accordion,
-          loadMethod: unref(loadExpandMethod),
-          toggleMethod: unref(toggleExpandMethod),
-          iconOpen: "iconfont icon-a-xitongtubiaozhediejian",
-          iconClose: "iconfont icon-a-xitongtubiaotianjia",
-          ...unref(getAttr)("expand-config")
-        },
-        "keyboard-config": unref(keyboardConfig),
-        "edit-rules": _ctx.columnConfig.editRules || {},
-        "menu-config": _ctx.menuConfig,
-        onCellDblclick: rowdblclick,
-        onCellClick: handlerClickRow,
-        onCheckboxChange: selectionChange,
-        onCheckboxAll: selectionChangeAll,
-        onRadioChange: radioOnChange,
-        onSortChange: sortChange,
-        onScroll: unref(scroll),
-        onCellMouseenter: handleCellMouseenter,
-        onKeydown: unref(keyDown),
-        onMenuClick: handleMenuClickEvent,
-        onResizableChange
+        "edit-config": state.editConfig
       }), {
         empty: withCtx(() => [state.isShowEmpty ? renderSlot(_ctx.$slots, "empty", {
           key: 0
@@ -2425,7 +1880,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }
         })]),
         _: 3
-      }, 16, ["height", "cell-style", "mouse-config", "tree-config", "row-config", "show-footer", "sort-config", "tooltip-config", "checkbox-config", "radio-config", "scroll-y", "row-style", "edit-config", "expand-config", "keyboard-config", "edit-rules", "menu-config", "onScroll", "onKeydown"]), createCommentVNode(" `${refreshRow}\u6761\u66F4\u65B0` "), withDirectives(createElementVNode("div", {
+      }, 16, ["height", "edit-config"]), createCommentVNode(" `${refreshRow}\u6761\u66F4\u65B0` "), withDirectives(createElementVNode("div", {
         class: "refresh",
         onClick: hanldeClickRefresh
       }, [createVNode(unref(NIcon), {