vxe-pc-ui 4.14.19 → 4.14.21

package/es/tree-select/src/tree-select.js

@@ -24,14 +24,17 @@ function createReactData() {
         triggerFocusPanel: false,
         visiblePanel: false,
         isAniVisible: false,
-        isActivated: false
+        isActivated: false,
+        fullOptFlag: 1,
+        lazyOptFlag: 1
     };
 }
 function createInternalData() {
     return {
         // hpTimeout: undefined,
         fullOptionList: [],
-        fullNodeMaps: {}
+        fullNodeMaps: {},
+        lazyNodeMaps: {}
     };
 }
 export default defineVxeComponent({
@@ -52,6 +55,14 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        showFullLabel: {
+            type: Boolean,
+            default: getConfig().treeSelect.showFullLabel
+        },
+        separator: {
+            type: String,
+            default: getConfig().treeSelect.separator
+        },
         filterable: Boolean,
         filterConfig: Object,
         multiple: Boolean,
@@ -262,20 +273,20 @@ export default defineVxeComponent({
             return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
         });
         const computeSelectLabel = computed(() => {
-            const { modelValue, lazyOptions } = props;
-            const { fullNodeMaps } = internalData;
-            const valueField = computeValueField.value;
+            const { modelValue, showFullLabel } = props;
+            const { fullOptFlag, lazyOptFlag } = reactData;
+            const { fullNodeMaps, lazyNodeMaps } = internalData;
             const labelField = computeLabelField.value;
             const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
             return selectVals.map(val => {
                 const cacheItem = fullNodeMaps[val];
-                if (cacheItem) {
-                    return cacheItem.item[labelField];
+                if (fullOptFlag && cacheItem) {
+                    return showFullLabel ? cacheItem.fullLabel : cacheItem.item[labelField];
                 }
-                if (lazyOptions) {
-                    const lazyItem = lazyOptions.find(item => item[valueField] === val);
-                    if (lazyItem) {
-                        return lazyItem[labelField];
+                if (lazyOptFlag) {
+                    const lazyCacheItem = lazyNodeMaps[val];
+                    if (lazyCacheItem) {
+                        return showFullLabel ? lazyCacheItem.fullLabel : lazyCacheItem.item[labelField];
                     }
                 }
                 return val;
@@ -329,16 +340,17 @@ export default defineVxeComponent({
             const nodeid = option[nodeKeyField];
             return nodeid ? encodeURIComponent(nodeid) : '';
         };
-        const cacheDataMap = () => {
-            const { options } = props;
+        const handleCacheMap = (optList) => {
+            const { separator } = props;
             const treeOpts = computeTreeOpts.value;
             const nodeKeyField = computeNodeKeyField.value;
             const childrenField = computeChildrenField.value;
             const valueField = computeValueField.value;
+            const labelField = computeLabelField.value;
             const { transform } = treeOpts;
             const nodeMaps = {};
             const keyMaps = {};
-            const handleOptNode = (item, index, items, path, parent, nodes) => {
+            const handleOptNode = (item, index, items, path, parentItem, nodes) => {
                 let nodeid = getNodeid(item);
                 if (!nodeid) {
                     nodeid = getOptUniqueId();
@@ -351,20 +363,37 @@ export default defineVxeComponent({
                 if (nodeMaps[value]) {
                     errLog('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value]);
                 }
-                nodeMaps[value] = { item, index, items, parent, nodes };
+                nodeMaps[value] = {
+                    item,
+                    index,
+                    items,
+                    parent: parentItem,
+                    nodes,
+                    fullLabel: nodes.map(item => item[labelField]).join((separator || '/') + ' ')
+                };
             };
-            if (options) {
+            if (optList) {
                 if (transform) {
-                    options.forEach((item, index, items) => {
+                    optList.forEach((item, index, items) => {
                         handleOptNode(item, index, items, [], null, []);
                     });
                 }
                 else {
-                    XEUtils.eachTree(options, handleOptNode, { children: childrenField });
+                    XEUtils.eachTree(optList, handleOptNode, { children: childrenField });
                 }
             }
+            return nodeMaps;
+        };
+        const cacheDataMap = () => {
+            const { options } = props;
+            internalData.fullNodeMaps = handleCacheMap(options || []);
             internalData.fullOptionList = options || [];
-            internalData.fullNodeMaps = nodeMaps;
+            reactData.fullOptFlag++;
+        };
+        const cacheLazyDataMap = () => {
+            const { lazyOptions } = props;
+            internalData.lazyNodeMaps = handleCacheMap(lazyOptions || []);
+            reactData.lazyOptFlag++;
         };
         const updateZindex = () => {
             const popupOpts = computePopupOpts.value;
@@ -894,10 +923,28 @@ export default defineVxeComponent({
                 ])
             ]);
         };
+        const optFlag = ref(0);
+        watch(() => props.options ? props.options.length : -1, () => {
+            optFlag.value++;
+        });
         watch(() => props.options, () => {
+            optFlag.value++;
+        });
+        watch(optFlag, () => {
             cacheDataMap();
         });
+        const lazyOptFlag = ref(0);
+        watch(() => props.lazyOptions ? props.lazyOptions.length : -1, () => {
+            lazyOptFlag.value++;
+        });
+        watch(() => props.lazyOptions, () => {
+            lazyOptFlag.value++;
+        });
+        watch(lazyOptFlag, () => {
+            cacheLazyDataMap();
+        });
         cacheDataMap();
+        cacheLazyDataMap();
         onMounted(() => {
             if (XEUtils.isBoolean(props.autoClose)) {
                 warnLog('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable']);

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "4.14.19";
+export const version = "4.14.21";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {
@@ -416,6 +416,7 @@ setConfig({
     },
     treeSelect: {
         autoClose: null,
+        // separator: '/',
         virtualYConfig: {
             enabled: true,
             gt: 0,

package/es/ui/src/log.js

@@ -1,4 +1,4 @@
 import { log } from '@vxe-ui/core';
-const version = `ui v${"4.14.19"}`;
+const version = `ui v${"4.14.21"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/index.umd.js

@@ -4646,7 +4646,7 @@ function checkDynamic() {
 }
 ;// ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.14.19"}`;
+const log_version = `ui v${"4.14.21"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// ./packages/ui/index.ts
@@ -4654,7 +4654,7 @@ const errLog = log.create('error', log_version);
 
 
 
-const ui_version = "4.14.19";
+const ui_version = "4.14.21";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -5069,6 +5069,7 @@ setConfig({
   },
   treeSelect: {
     autoClose: null,
+    // separator: '/',
     virtualYConfig: {
       enabled: true,
       gt: 0,
@@ -5478,7 +5479,7 @@ setIcon({
       cstmDragTarget: '移动：{0}',
       setting: {
         colSort: '排序',
-        sortHelpTip: '点击并拖动图标可以调整顺序',
+        sortHelpTip: '点击图标开始拖动',
         colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
@@ -5964,7 +5965,7 @@ setIcon({
           groupPlaceholder: '拖至此处进行分组',
           valuesPlaceholder: '拖至此处进行聚合',
           dragExistCol: '该列已存在',
-          sortHelpTip: '点击并拖动图标可以调整顺序'
+          sortHelpTip: '点击图标开始拖动'
         },
         aggFuncs: {
           sum: '求和',
@@ -46820,28 +46821,38 @@ function tree_createReactData() {
       }
       return renderEmptyElement($xeTree);
     };
-    const renderRadio = (node, nodeid, isChecked) => {
+    const handleVisibleOrCheckMode = (mode, isExistChild, nLevel) => {
+      if (mode) {
+        if (mode === 'first') {
+          return !nLevel;
+        }
+        if (mode === 'last') {
+          return !isExistChild;
+        }
+      }
+      return true;
+    };
+    const renderRadio = (node, nodeid, isExistChild, nLevel, isChecked) => {
       const {
         showRadio
       } = props;
       const radioOpts = computeRadioOpts.value;
       const {
         showIcon,
+        checkMode,
         checkMethod,
+        visibleMode,
         visibleMethod
       } = radioOpts;
-      const isVisible = !visibleMethod || visibleMethod({
+      const isVisible = visibleMethod ? visibleMethod({
         $tree: $xeTree,
         node
-      });
-      let isDisabled = !!checkMethod;
+      }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
       if (showRadio && showIcon && isVisible) {
-        if (checkMethod) {
-          isDisabled = !checkMethod({
-            $tree: $xeTree,
-            node
-          });
-        }
+        const isDisabled = checkMethod ? !checkMethod({
+          $tree: $xeTree,
+          node
+        }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: ['vxe-tree--radio-option', {
             'is--checked': isChecked,
@@ -46858,28 +46869,27 @@ function tree_createReactData() {
       }
       return renderEmptyElement($xeTree);
     };
-    const renderCheckbox = (node, nodeid, isChecked, isIndeterminate) => {
+    const renderCheckbox = (node, nodeid, isExistChild, nLevel, isChecked, isIndeterminate) => {
       const {
         showCheckbox
       } = props;
       const checkboxOpts = computeCheckboxOpts.value;
       const {
         showIcon,
+        checkMode,
         checkMethod,
+        visibleMode,
         visibleMethod
       } = checkboxOpts;
-      const isVisible = !visibleMethod || visibleMethod({
+      const isVisible = visibleMethod ? visibleMethod({
         $tree: $xeTree,
         node
-      });
-      let isDisabled = !!checkMethod;
+      }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
       if (showCheckbox && showIcon && isVisible) {
-        if (checkMethod) {
-          isDisabled = !checkMethod({
-            $tree: $xeTree,
-            node
-          });
-        }
+        const isDisabled = checkMethod ? !checkMethod({
+          $tree: $xeTree,
+          node
+        }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: ['vxe-tree--checkbox-option', {
             'is--checked': isChecked,
@@ -46925,12 +46935,12 @@ function tree_createReactData() {
       const titleField = computeTitleField.value;
       const hasChildField = computeHasChildField.value;
       const childList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(node, childrenField);
-      const hasChild = childList && childList.length;
+      const isExistChild = childList && childList.length > 0;
       const iconSlot = slots.icon;
       const titleSlot = slots.title;
       const extraSlot = slots.extra;
       const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
-      const nodeItem = nodeMaps[nodeid];
+      const nodeItem = nodeMaps[nodeid] || {};
       const nodeValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(node, titleField);
       const nLevel = nodeItem.level;
       let isRadioChecked = false;
@@ -46998,14 +47008,14 @@ function tree_createReactData() {
         }
       })]) : renderEmptyElement($xeTree), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-switcher'
-      }, showIcon && (lazy ? isLazyLoaded ? hasChild : hasLazyChilds : hasChild) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, showIcon && (lazy ? isLazyLoaded ? isExistChild : hasLazyChilds : isExistChild) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-icon',
         onClick(evnt) {
           toggleExpandEvent(evnt, node);
         }
       }, iconSlot ? vn_getSlotVNs(iconSlot(nParams)) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: isLazyLoading ? iconLoaded || tree_getIcon().TREE_NODE_LOADED : isExpand ? iconOpen || tree_getIcon().TREE_NODE_OPEN : iconClose || tree_getIcon().TREE_NODE_CLOSE
-      })])] : []), renderDragIcon(node, nodeid), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked, isIndeterminate), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })])] : []), renderDragIcon(node, nodeid), renderRadio(node, nodeid, isExistChild, nLevel, isRadioChecked), renderCheckbox(node, nodeid, isExistChild, nLevel, isCheckboxChecked, isIndeterminate), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-inner'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-title'
@@ -47291,7 +47301,6 @@ const Tree = VxeTree;
 
 
 
-
 function tree_select_getOptUniqueId() {
   return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('node_');
 }
@@ -47306,14 +47315,17 @@ function tree_select_createReactData() {
     triggerFocusPanel: false,
     visiblePanel: false,
     isAniVisible: false,
-    isActivated: false
+    isActivated: false,
+    fullOptFlag: 1,
+    lazyOptFlag: 1
   };
 }
 function tree_select_createInternalData() {
   return {
     // hpTimeout: undefined,
     fullOptionList: [],
-    fullNodeMaps: {}
+    fullNodeMaps: {},
+    lazyNodeMaps: {}
   };
 }
 /* harmony default export */ var tree_select = (defineVxeComponent({
@@ -47334,6 +47346,14 @@ function tree_select_createInternalData() {
       type: Boolean,
       default: null
     },
+    showFullLabel: {
+      type: Boolean,
+      default: getConfig().treeSelect.showFullLabel
+    },
+    separator: {
+      type: String,
+      default: getConfig().treeSelect.separator
+    },
     filterable: Boolean,
     filterConfig: Object,
     multiple: Boolean,
@@ -47551,23 +47571,27 @@ function tree_select_createInternalData() {
     const computeSelectLabel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         modelValue,
-        lazyOptions
+        showFullLabel
       } = props;
       const {
-        fullNodeMaps
+        fullOptFlag,
+        lazyOptFlag
+      } = reactData;
+      const {
+        fullNodeMaps,
+        lazyNodeMaps
       } = internalData;
-      const valueField = computeValueField.value;
       const labelField = computeLabelField.value;
       const selectVals = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(modelValue) ? [] : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue) ? modelValue : [modelValue];
       return selectVals.map(val => {
         const cacheItem = fullNodeMaps[val];
-        if (cacheItem) {
-          return cacheItem.item[labelField];
+        if (fullOptFlag && cacheItem) {
+          return showFullLabel ? cacheItem.fullLabel : cacheItem.item[labelField];
         }
-        if (lazyOptions) {
-          const lazyItem = lazyOptions.find(item => item[valueField] === val);
-          if (lazyItem) {
-            return lazyItem[labelField];
+        if (lazyOptFlag) {
+          const lazyCacheItem = lazyNodeMaps[val];
+          if (lazyCacheItem) {
+            return showFullLabel ? lazyCacheItem.fullLabel : lazyCacheItem.item[labelField];
           }
         }
         return val;
@@ -47626,20 +47650,21 @@ function tree_select_createInternalData() {
       const nodeid = option[nodeKeyField];
       return nodeid ? encodeURIComponent(nodeid) : '';
     };
-    const cacheDataMap = () => {
+    const handleCacheMap = optList => {
       const {
-        options
+        separator
       } = props;
       const treeOpts = computeTreeOpts.value;
       const nodeKeyField = computeNodeKeyField.value;
       const childrenField = computeChildrenField.value;
       const valueField = computeValueField.value;
+      const labelField = computeLabelField.value;
       const {
         transform
       } = treeOpts;
       const nodeMaps = {};
       const keyMaps = {};
-      const handleOptNode = (item, index, items, path, parent, nodes) => {
+      const handleOptNode = (item, index, items, path, parentItem, nodes) => {
         let nodeid = getNodeid(item);
         if (!nodeid) {
           nodeid = tree_select_getOptUniqueId();
@@ -47656,23 +47681,38 @@ function tree_select_createInternalData() {
           item,
           index,
           items,
-          parent,
-          nodes
+          parent: parentItem,
+          nodes,
+          fullLabel: nodes.map(item => item[labelField]).join((separator || '/') + ' ')
         };
       };
-      if (options) {
+      if (optList) {
         if (transform) {
-          options.forEach((item, index, items) => {
+          optList.forEach((item, index, items) => {
             handleOptNode(item, index, items, [], null, []);
           });
         } else {
-          external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(options, handleOptNode, {
+          external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(optList, handleOptNode, {
             children: childrenField
           });
         }
       }
+      return nodeMaps;
+    };
+    const cacheDataMap = () => {
+      const {
+        options
+      } = props;
+      internalData.fullNodeMaps = handleCacheMap(options || []);
       internalData.fullOptionList = options || [];
-      internalData.fullNodeMaps = nodeMaps;
+      reactData.fullOptFlag++;
+    };
+    const cacheLazyDataMap = () => {
+      const {
+        lazyOptions
+      } = props;
+      internalData.lazyNodeMaps = handleCacheMap(lazyOptions || []);
+      reactData.lazyOptFlag++;
     };
     const updateZindex = () => {
       const popupOpts = computePopupOpts.value;
@@ -48231,10 +48271,28 @@ function tree_select_createInternalData() {
         onClick: closePanelEvent
       })]) : renderEmptyElement($xeTreeSelect)])]) : renderEmptyElement($xeTreeSelect)])] : [])])]);
     };
+    const optFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.options ? props.options.length : -1, () => {
+      optFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.options, () => {
+      optFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(optFlag, () => {
       cacheDataMap();
     });
+    const lazyOptFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.lazyOptions ? props.lazyOptions.length : -1, () => {
+      lazyOptFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.lazyOptions, () => {
+      lazyOptFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(lazyOptFlag, () => {
+      cacheLazyDataMap();
+    });
     cacheDataMap();
+    cacheLazyDataMap();
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(props.autoClose)) {
         warnLog('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable']);