vxe-pc-ui 4.14.26 → 4.14.27

package/dist/all.esm.js

@@ -80,11 +80,11 @@ function checkDynamic() {
     }
 }
 
-const version$1 = `ui v${"4.14.26"}`;
+const version$1 = `ui v${"4.14.27"}`;
 const warnLog = log.create('warn', version$1);
 const errLog = log.create('error', version$1);
 
-const version = "4.14.26";
+const version = "4.14.27";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -3778,7 +3778,7 @@ function createInternalData$d() {
         targetEl: null
     };
 }
-function createReactData$8() {
+function createReactData$9() {
     return {
         showBtn: false,
         backtopZindex: 0
@@ -3858,7 +3858,7 @@ var VxeBacktopComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$d();
-        const reactData = reactive(createReactData$8());
+        const reactData = reactive(createReactData$9());
         const refMaps = {
             refElem
         };
@@ -4035,7 +4035,7 @@ var VxeBacktopComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             removeScrollEvent();
-            XEUtils.assign(reactData, createReactData$8());
+            XEUtils.assign(reactData, createReactData$9());
             XEUtils.assign(internalData, createInternalData$d());
         });
         $xeBacktop.renderVN = renderVN;
@@ -13299,7 +13299,7 @@ function createInternalData$a() {
     // leaveTime: null
     };
 }
-function createReactData$7() {
+function createReactData$8() {
     return {
         visible: false,
         activeOption: null,
@@ -13355,7 +13355,7 @@ var VxeContextMenuComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$a();
-        const reactData = reactive(createReactData$7());
+        const reactData = reactive(createReactData$8());
         const refMaps = {
             refElem
         };
@@ -13910,7 +13910,7 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents.off($xeContextMenu, 'keydown');
             globalEvents.off($xeContextMenu, 'mousedown');
             globalEvents.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$7());
+            XEUtils.assign(reactData, createReactData$8());
             XEUtils.assign(internalData, createInternalData$a());
         });
         $xeContextMenu.renderVN = renderVN;
@@ -19675,26 +19675,182 @@ function renderItemContent($xeForm, item) {
     }, contentVNs);
 }
 
+const formItemProps = {
+    title: String,
+    field: String,
+    span: {
+        type: [String, Number],
+        default: null
+    },
+    align: {
+        type: String,
+        default: null
+    },
+    verticalAlign: {
+        type: String,
+        default: null
+    },
+    titleBackground: {
+        type: Boolean,
+        default: null
+    },
+    titleBold: {
+        type: Boolean,
+        default: null
+    },
+    titleAlign: {
+        type: String,
+        default: null
+    },
+    titleWidth: {
+        type: [String, Number],
+        default: null
+    },
+    titleColon: {
+        type: Boolean,
+        default: null
+    },
+    titleAsterisk: {
+        type: Boolean,
+        default: null
+    },
+    showTitle: {
+        type: Boolean,
+        default: true
+    },
+    vertical: {
+        type: Boolean,
+        default: null
+    },
+    padding: {
+        type: Boolean,
+        default: null
+    },
+    formatter: [String, Function],
+    className: [String, Function],
+    contentClassName: [String, Function],
+    contentStyle: [Object, Function],
+    titleClassName: [String, Function],
+    titleStyle: [Object, Function],
+    titleOverflow: {
+        type: [Boolean, String],
+        default: null
+    },
+    titlePrefix: Object,
+    titleSuffix: Object,
+    resetValue: { default: null },
+    visibleMethod: Function,
+    visible: {
+        type: Boolean,
+        default: null
+    },
+    showContent: {
+        type: Boolean,
+        default: null
+    },
+    folding: Boolean,
+    collapseNode: Boolean,
+    itemRender: Object,
+    rules: Array,
+    params: Object
+};
+var VxeFormItemComponent = defineVxeComponent({
+    name: 'VxeFormItem',
+    props: formItemProps,
+    setup(props, { slots }) {
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const $xeForm = inject('$xeForm', {});
+        const $xeFormGroup = inject('$xeFormGroup', null);
+        const formItem = reactive(createItem($xeForm, props));
+        formItem.slots = slots;
+        const formItemInfo = { itemConfig: formItem };
+        provide('xeFormItemInfo', formItemInfo);
+        const renderItem = ($xeForm, item) => {
+            const formProps = $xeForm.props;
+            const $xeGrid = $xeForm.xeGrid;
+            const { data, readonly, disabled } = formProps;
+            const { visible, field, itemRender, contentStyle, showContent } = item;
+            const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+            const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
+            const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
+            const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
+            if (visible === false) {
+                return renderEmptyElement($xeFormItem);
+            }
+            return h('div', {
+                ref: refElem,
+                key: item.id,
+                itemid: item.id,
+                class: getItemClass($xeForm, item),
+                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+            }, [
+                renderTitle($xeForm, item),
+                showContent === false
+                    ? renderEmptyElement($xeFormItem)
+                    : h('div', {
+                        class: getItemContentClass($xeForm, item),
+                        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+                    }, [
+                        renderItemContent($xeForm, item),
+                        renderItemErrorIcon($xeForm, item)
+                    ])
+            ]);
+        };
+        const renderVN = () => {
+            const customLayout = $xeForm ? $xeForm.props.customLayout : false;
+            const item = formItem;
+            return customLayout
+                ? renderItem($xeForm, item)
+                : h('div', {
+                    ref: refElem
+                });
+        };
+        const $xeFormItem = {
+            xID,
+            formItem,
+            renderVN
+        };
+        watchItem(props, formItem);
+        onMounted(() => {
+            const elem = refElem.value;
+            assembleItem($xeForm, elem, formItem, $xeFormGroup);
+        });
+        onUnmounted(() => {
+            destroyItem($xeForm, formItem);
+        });
+        provide('$xeFormItem', $xeFormItem);
+        provide('$xeFormGroup', null);
+        return $xeFormItem;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
 const VxeFormConfigItem = defineVxeComponent({
     name: 'VxeFormConfigItem',
-    props: {
-        itemConfig: Object
-    },
+    props: Object.assign({ itemConfig: Object }, formItemProps),
     setup(props) {
         const $xeForm = inject('$xeForm', {});
         const xeformiteminfo = { itemConfig: props.itemConfig };
         provide('xeFormItemInfo', xeformiteminfo);
+        const computeItemVisible = computed(() => {
+            const { visible } = props.itemConfig;
+            return visible;
+        });
         const renderItem = ($xeForm, item) => {
             const formProps = $xeForm.props;
             const $xeGrid = $xeForm.xeGrid;
             const { data, readonly, disabled } = formProps;
-            const { visible, field, itemRender, contentStyle, children, showContent } = item;
+            const { field, itemRender, contentStyle, children, showContent } = item;
+            const itemVisible = computeItemVisible.value;
             const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
             const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
             const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
             const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
             const hasGroup = children && children.length > 0;
-            if (visible === false) {
+            if (itemVisible === false) {
                 return renderEmptyElement($xeForm);
             }
             return h('div', {
@@ -20353,6 +20509,14 @@ function checkRuleStatus(rule, data, val) {
     }
     return true;
 }
+function createReactData$7() {
+    return {
+        collapseAll: false,
+        staticItems: [],
+        formItems: [],
+        itemWidth: 0
+    };
+}
 function createInternalData$9() {
     return {
         meTimeout: undefined,
@@ -20361,7 +20525,9 @@ function createInternalData$9() {
             item: null,
             visible: false
         },
-        itemFormatCache: {}
+        itemFormatCache: {},
+        fullItemIdData: {},
+        fullItemFieldData: {}
     };
 }
 var VxeFormComponent = defineVxeComponent({
@@ -20460,12 +20626,7 @@ var VxeFormComponent = defineVxeComponent({
         const $xeGrid = inject('$xeGrid', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            collapseAll: props.collapseStatus,
-            staticItems: [],
-            formItems: [],
-            itemWidth: 0
-        });
+        const reactData = reactive(createReactData$7());
         const internalData = createInternalData$9();
         const refElem = ref();
         const refTooltip = ref();
@@ -20529,7 +20690,7 @@ var VxeFormComponent = defineVxeComponent({
             }
             return [];
         };
-        const loadItem = (list) => {
+        const loadItems = (list) => {
             if (list.length) {
                 list.forEach((item) => {
                     if (item.slots) {
@@ -20557,8 +20718,9 @@ var VxeFormComponent = defineVxeComponent({
             return itemList;
         };
         const getItemByField = (field) => {
-            const rest = XEUtils.findTree(reactData.formItems, item => item.field === field, { children: 'children' });
-            return rest ? rest.item : null;
+            const { fullItemFieldData } = internalData;
+            const itemRest = fullItemFieldData[field];
+            return itemRest ? itemRest.item : null;
         };
         const getCollapseStatus = () => {
             return reactData.collapseAll;
@@ -20622,6 +20784,23 @@ var VxeFormComponent = defineVxeComponent({
             }
             return resetValue;
         };
+        const cacheItem = () => {
+            const { formItems } = reactData;
+            const itemIdData = {};
+            const itemFieldData = {};
+            XEUtils.eachTree(formItems, (item, index, items) => {
+                const { id, field } = item;
+                const itemRest = { item, items, index };
+                if (id) {
+                    itemIdData[id] = itemRest;
+                }
+                if (field) {
+                    itemFieldData[field] = itemRest;
+                }
+            }, { children: 'children' });
+            internalData.fullItemFieldData = itemFieldData;
+            internalData.fullItemIdData = itemIdData;
+        };
         const reset = () => {
             const { data } = props;
             const itemList = getItems();
@@ -21002,10 +21181,25 @@ var VxeFormComponent = defineVxeComponent({
         const handleGlobalResizeEvent = () => {
             recalculate();
         };
+        const handleItemVisible = (visible) => {
+            return function (fieldOrItems) {
+                const objs = XEUtils.isArray(fieldOrItems) ? fieldOrItems : [fieldOrItems];
+                objs.forEach(obj => {
+                    const item = handleFieldOrItem($xeForm, obj);
+                    if (item) {
+                        item.visible = visible;
+                    }
+                });
+                return nextTick();
+            };
+        };
         formMethods = {
             dispatchEvent(type, params, evnt) {
                 emit(type, createEvent(evnt, { $form: $xeForm, $grid: $xeGrid }, params));
             },
+            loadItems,
+            showItem: handleItemVisible(true),
+            hideItem: handleItemVisible(false),
             reset,
             validate,
             validateField,
@@ -21054,12 +21248,12 @@ var VxeFormComponent = defineVxeComponent({
                     : formItems.map((item, index) => {
                         return h(VxeFormConfigItem, {
                             key: index,
-                            itemConfig: item
+                            itemConfig: item,
+                            visible: item.visible
                         });
                     })),
                 h('div', {
-                    class: 'vxe-form-slots',
-                    ref: 'hideItem'
+                    class: 'vxe-form-slots'
                 }, customLayout ? [] : (defaultSlot ? defaultSlot({}) : [])),
                 /**
                  * 加载中
@@ -21096,6 +21290,7 @@ var VxeFormComponent = defineVxeComponent({
         watch(staticItemFlag, () => {
             reactData.formItems = reactData.staticItems;
             recalcFlag.value++;
+            cacheItem();
         });
         const itemFlag = ref(0);
         watch(() => props.items ? props.items.length : -1, () => {
@@ -21105,7 +21300,7 @@ var VxeFormComponent = defineVxeComponent({
             itemFlag.value++;
         });
         watch(itemFlag, () => {
-            loadItem(props.items || []);
+            loadItems(props.items || []);
         });
         watch(() => props.collapseStatus, (value) => {
             reactData.collapseAll = !!value;
@@ -21128,8 +21323,9 @@ var VxeFormComponent = defineVxeComponent({
             globalEvents.off($xeForm, 'resize');
             XEUtils.assign(internalData, createInternalData$9());
         });
+        reactData.collapseAll = !!props.collapseStatus;
         if (props.items) {
-            loadItem(props.items);
+            loadItems(props.items);
         }
         provide('xeFormItemInfo', null);
         provide('$xeForm', $xeForm);
@@ -21152,159 +21348,6 @@ dynamicApp.use(VxeForm);
 VxeUI.component(VxeFormComponent);
 const Form = VxeForm;
 
-const formItemProps = {
-    title: String,
-    field: String,
-    span: {
-        type: [String, Number],
-        default: null
-    },
-    align: {
-        type: String,
-        default: null
-    },
-    verticalAlign: {
-        type: String,
-        default: null
-    },
-    titleBackground: {
-        type: Boolean,
-        default: null
-    },
-    titleBold: {
-        type: Boolean,
-        default: null
-    },
-    titleAlign: {
-        type: String,
-        default: null
-    },
-    titleWidth: {
-        type: [String, Number],
-        default: null
-    },
-    titleColon: {
-        type: Boolean,
-        default: null
-    },
-    titleAsterisk: {
-        type: Boolean,
-        default: null
-    },
-    showTitle: {
-        type: Boolean,
-        default: true
-    },
-    vertical: {
-        type: Boolean,
-        default: null
-    },
-    padding: {
-        type: Boolean,
-        default: null
-    },
-    formatter: [String, Function],
-    className: [String, Function],
-    contentClassName: [String, Function],
-    contentStyle: [Object, Function],
-    titleClassName: [String, Function],
-    titleStyle: [Object, Function],
-    titleOverflow: {
-        type: [Boolean, String],
-        default: null
-    },
-    titlePrefix: Object,
-    titleSuffix: Object,
-    resetValue: { default: null },
-    visibleMethod: Function,
-    visible: {
-        type: Boolean,
-        default: null
-    },
-    showContent: {
-        type: Boolean,
-        default: null
-    },
-    folding: Boolean,
-    collapseNode: Boolean,
-    itemRender: Object,
-    rules: Array,
-    params: Object
-};
-var VxeFormItemComponent = defineVxeComponent({
-    name: 'VxeFormItem',
-    props: formItemProps,
-    setup(props, { slots }) {
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const $xeForm = inject('$xeForm', {});
-        const $xeFormGroup = inject('$xeFormGroup', null);
-        const formItem = reactive(createItem($xeForm, props));
-        formItem.slots = slots;
-        const formItemInfo = { itemConfig: formItem };
-        provide('xeFormItemInfo', formItemInfo);
-        const renderItem = ($xeForm, item) => {
-            const formProps = $xeForm.props;
-            const $xeGrid = $xeForm.xeGrid;
-            const { data, readonly, disabled } = formProps;
-            const { visible, field, itemRender, contentStyle, showContent } = item;
-            const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
-            const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
-            const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
-            const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
-            if (visible === false) {
-                return renderEmptyElement($xeFormItem);
-            }
-            return h('div', {
-                ref: refElem,
-                key: item.id,
-                itemid: item.id,
-                class: getItemClass($xeForm, item),
-                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
-            }, [
-                renderTitle($xeForm, item),
-                showContent === false
-                    ? renderEmptyElement($xeFormItem)
-                    : h('div', {
-                        class: getItemContentClass($xeForm, item),
-                        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
-                    }, [
-                        renderItemContent($xeForm, item),
-                        renderItemErrorIcon($xeForm, item)
-                    ])
-            ]);
-        };
-        const renderVN = () => {
-            const customLayout = $xeForm ? $xeForm.props.customLayout : false;
-            const item = formItem;
-            return customLayout
-                ? renderItem($xeForm, item)
-                : h('div', {
-                    ref: refElem
-                });
-        };
-        const $xeFormItem = {
-            xID,
-            formItem,
-            renderVN
-        };
-        watchItem(props, formItem);
-        onMounted(() => {
-            const elem = refElem.value;
-            assembleItem($xeForm, elem, formItem, $xeFormGroup);
-        });
-        onUnmounted(() => {
-            destroyItem($xeForm, formItem);
-        });
-        provide('$xeFormItem', $xeFormItem);
-        provide('$xeFormGroup', null);
-        return $xeFormItem;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
 var VxeFormGroupComponent = defineVxeComponent({
     name: 'VxeFormGroup',
     props: formItemProps,