hy-dispatch-ui-v3 0.2.65 → 0.2.67

package/lib/components/hySearch/cpns/searchItem.vue.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
 require('../../../utils/index.js');
 require('../../index.js');
 var index = require('../js/index.js');
@@ -38,10 +39,16 @@ const _sfc_main = {
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const formContext = vue.inject(index.formContextKey);
+    const componentRef = vue.useTemplateRef("componentRef");
     const columnProp = vue.computed(() => {
       let field = is.isArray(props.column.field) ? props.column.field[0] : props.column.field;
       return field;
     });
+    const propString = vue.computed(() => {
+      if (!columnProp.value) return "";
+      return is.isArray(columnProp.value) ? columnProp.value.join(".") : columnProp.value;
+    });
     const bindValue = vue.computed({
       get() {
         const prop = is.isArray(props.column.field) ? props.column.field[0] : props.column.field;
@@ -62,15 +69,82 @@ const _sfc_main = {
         form.setValueByProp(props.model, prop, val);
       }
     });
+    const columnConfig = vue.computed(() => {
+      return {
+        ...props.column,
+        attrs: columnAttrs.value
+      };
+    });
     const columnAttrs = vue.computed(() => {
       return {
         ...props.column.attrs,
         label: form.columnLabelHandler(props.column, props.model),
-        placeholder: form.columnPlaceholderHandler(props.column, props.model)
+        placeholder: props.column.optionsError === "error" ? "\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u65B0\u52A0\u8F7D" : form.columnPlaceholderHandler(props.column, props.model)
       };
     });
+    function obtainOptions(isMountedLoad = false) {
+      return new Promise(async (resolve, reject) => {
+        if (props.column.optionsFn) {
+          if (!props.column.optionsFn) return;
+          props.column.optionsLoading = true;
+          props.column.optionsError = "";
+          props.column.attrs.options = [];
+          if (!(isMountedLoad && props.column.isDefaultGetData === false)) {
+            try {
+              props.column.attrs.options = await props.column.optionsFn(
+                props.column,
+                props.model
+              );
+              props.column.optionsError = "";
+              resolve();
+            } catch (err) {
+              props.column.optionsError = "error";
+              console.error(err);
+              reject();
+            }
+          } else {
+            resolve();
+          }
+        } else if (props.column.type === "org-cascader") {
+          if (componentRef.value) {
+            props.column.optionsLoading = true;
+            props.column.optionsError = "";
+            try {
+              await componentRef.value.getData();
+              resolve();
+            } catch {
+              props.column.optionsError = "error";
+              reject();
+            }
+          } else {
+            resolve();
+          }
+        } else {
+          resolve();
+        }
+        props.column.optionsLoading = false;
+      });
+    }
+    function getOptionsHandler(props2, column) {
+      if (props2.column.optionsLoading) {
+        return [];
+      }
+      return index.optionsHandler(props2, props2.column);
+    }
     function onChangeHandler(value, column) {
+      const { onChange } = props.column;
       emits("search");
+      if (!onChange) return;
+      onChange(props.column, props.model, props.index);
+    }
+    async function onVisibleChange(value) {
+      if (value && props.column.optionsError === "error") {
+        try {
+          await obtainOptions();
+        } catch {
+        }
+        formContext?.emitOptionsStatus();
+      }
     }
     function onKeydownEnterHander(e) {
       emits("search");
@@ -90,215 +164,369 @@ const _sfc_main = {
       }
       emits("search");
     }
+    const context = vue.reactive({
+      ...vue.toRefs(props),
+      columnProp,
+      propString,
+      columnConfig,
+      columnAttrs,
+      obtainOptions,
+      optionsLoading: vue.computed(() => columnConfig.value.optionsLoading),
+      optionsError: vue.computed(() => columnConfig.value.optionsError),
+      options: vue.computed(() => {
+        return getOptionsHandler(props, props.column);
+      })
+    });
+    vue.onMounted(() => {
+      if (propString.value) {
+        formContext?.addField(context);
+      }
+      vue.watch(
+        () => formContext.model.errorMsg,
+        () => {
+          const optionsError = props.column.optionsError;
+          if (optionsError === "error") {
+            props.column.optionsError = "";
+            setTimeout(() => {
+              props.column.optionsError = "error";
+            }, 1);
+          }
+        },
+        { immediate: true, deep: true }
+      );
+    });
+    vue.onBeforeUnmount(() => {
+      formContext?.removeField(context);
+    });
     return (_ctx, _cache) => {
       return vue.unref(index.columnShowHandler)(props, __props.column) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), {
         key: 0,
         prop: columnProp.value
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", { class: "flex bg-background-2 rounded outline outline-1 outline-transparent outline-offset-0 hover:outline-theme box-border" }, [
-            vue.createElementVNode(
-              "div",
-              {
-                class: "flex",
-                style: vue.normalizeStyle(vue.unref(index.columnItemStyle)(props, __props.column))
-              },
-              [
-                vue.createCommentVNode(" \u8868\u5355label "),
-                vue.createElementVNode(
-                  "div",
-                  {
-                    class: vue.normalizeClass(["flex items-center text-auxiliary text-xs whitespace-nowrap", {
-                      "border-r border-border px-3": __props.column.labelSlot && _ctx.$slots[__props.column.labelSlot] || vue.unref(form.columnLabelHandler)(__props.column, props.model)
-                    }])
-                  },
-                  [
-                    __props.column.labelSlot && _ctx.$slots[__props.column.labelSlot] ? vue.renderSlot(_ctx.$slots, __props.column.labelSlot, { column: __props.column }, void 0, void 0, 0) : (vue.openBlock(), vue.createElementBlock(
-                      "span",
-                      { key: 1 },
-                      vue.toDisplayString(vue.unref(form.columnLabelHandler)(__props.column, props.model)),
-                      1
-                      /* TEXT */
-                    ))
-                  ],
-                  2
-                  /* CLASS */
-                ),
-                vue.createCommentVNode(" \u8868\u5355\u7EC4\u4EF6 "),
-                vue.createElementVNode(
-                  "div",
-                  {
-                    class: vue.normalizeClass({ "hy-search-custom-wrapper": __props.column.slot }),
-                    style: vue.normalizeStyle(vue.unref(index.columnItemInputStyle)(props, __props.column))
-                  },
-                  [
-                    vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u5177\u540D\u63D2\u69FD "),
-                    __props.column.slot ? vue.renderSlot(_ctx.$slots, __props.column.slot, { column: __props.column }, void 0, void 0, 0) : __props.column.type === "input" ? (vue.openBlock(), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 1 },
-                      [
-                        vue.createCommentVNode(" \u8F93\u5165\u6846 "),
-                        vue.createVNode(vue.unref(index$1.HyInput), vue.mergeProps({
-                          modelValue: bindValue.value,
-                          "onUpdate:modelValue": ($event) => bindValue.value = $event
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          onKeydown: vue.withKeys(($event) => onKeydownEnterHander($event, __props.column), ["enter"]),
-                          onChange: ($event) => onChangeHandler($event, __props.column)
-                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onKeydown", "onChange"])
-                      ],
-                      2112
-                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                    )) : __props.column.type === "select" ? (vue.openBlock(), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 2 },
-                      [
-                        vue.createCommentVNode(" \u9009\u62E9\u6846 "),
-                        vue.createVNode(vue.unref(elementPlus.ElSelect), vue.mergeProps({
-                          modelValue: bindValue.value,
-                          "onUpdate:modelValue": ($event) => bindValue.value = $event
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          options: vue.unref(index.optionsHandler)(props, __props.column),
-                          onChange: ($event) => onChangeHandler($event, __props.column)
-                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "options", "onChange"])
-                      ],
-                      2112
-                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                    )) : __props.column.type === "date-picker" ? (vue.openBlock(), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 3 },
-                      [
-                        vue.createCommentVNode(" \u65E5\u671F\u9009\u62E9\u6846 "),
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(["flex bg-background-2 rounded outline outline-1 outline-transparent outline-offset-0 hover:outline-theme box-border", [
+                {
+                  "!outline-danger-2 hy-el-search-item-error": __props.column.optionsError === "error"
+                }
+              ]])
+            },
+            [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: "flex",
+                  style: vue.normalizeStyle(vue.unref(index.columnItemStyle)(props, __props.column))
+                },
+                [
+                  vue.createCommentVNode(" \u8868\u5355label "),
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(["flex items-center text-auxiliary text-sm whitespace-nowrap", {
+                        "border-r border-border px-3": __props.column.labelSlot && _ctx.$slots[__props.column.labelSlot] || vue.unref(form.columnLabelHandler)(__props.column, props.model)
+                      }])
+                    },
+                    [
+                      __props.column.labelSlot && _ctx.$slots[__props.column.labelSlot] ? vue.renderSlot(_ctx.$slots, __props.column.labelSlot, { column: columnConfig.value }, void 0, void 0, 0) : (vue.openBlock(), vue.createElementBlock(
+                        "span",
+                        { key: 1 },
+                        vue.toDisplayString(vue.unref(form.columnLabelHandler)(__props.column, props.model)),
+                        1
+                        /* TEXT */
+                      ))
+                    ],
+                    2
+                    /* CLASS */
+                  ),
+                  vue.createCommentVNode(" \u8868\u5355\u7EC4\u4EF6 "),
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass({ "hy-search-custom-wrapper": __props.column.slot }),
+                      style: vue.normalizeStyle(vue.unref(index.columnItemInputStyle)(props, __props.column))
+                    },
+                    [
+                      vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u5177\u540D\u63D2\u69FD "),
+                      __props.column.slot ? vue.renderSlot(_ctx.$slots, __props.column.slot, { column: columnConfig.value }, void 0, void 0, 0) : __props.column.type === "input" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        [
+                          vue.createCommentVNode(" \u8F93\u5165\u6846 "),
+                          vue.createVNode(vue.unref(index$1.HyInput), vue.mergeProps({
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            onKeydown: vue.withKeys(($event) => onKeydownEnterHander($event, __props.column), ["enter"]),
+                            onChange: ($event) => onChangeHandler($event, __props.column)
+                          }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onKeydown", "onChange"])
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      )) : __props.column.type === "select" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 2 },
+                        [
+                          vue.createCommentVNode(" \u9009\u62E9\u6846 "),
+                          vue.createVNode(vue.unref(elementPlus.ElSelect), vue.mergeProps({
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            options: getOptionsHandler(props, __props.column),
+                            onChange: ($event) => onChangeHandler($event, __props.column),
+                            onVisibleChange
+                          }), vue.createSlots({
+                            _: 2
+                            /* DYNAMIC */
+                          }, [
+                            __props.column.optionsLoading ? {
+                              name: "empty",
+                              fn: vue.withCtx(() => [
+                                vue.createElementVNode("div", { class: "w-full flex items-center justify-center py-2 gap-1.5 text-main text-xs whitespace-nowrap" }, [
+                                  vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                                    size: "16",
+                                    class: "is-loading text-theme"
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createVNode(vue.unref(iconsVue.Loading))
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }),
+                                  vue.createElementVNode("span", null, "\u6570\u636E\u6B63\u5728\u52A0\u8F7D\u4E2D")
+                                ])
+                              ]),
+                              key: "0"
+                            } : void 0
+                          ]), 1040, ["modelValue", "onUpdate:modelValue", "disabled", "options", "onChange"])
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      )) : __props.column.type === "select-v2" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 3 },
+                        [
+                          vue.createCommentVNode(" \u865A\u62DF\u5316\u9009\u62E9\u6846 "),
+                          vue.createVNode(vue.unref(elementPlus.ElSelectV2), vue.mergeProps({
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            options: getOptionsHandler(props, __props.column),
+                            onChange: onChangeHandler,
+                            onVisibleChange
+                          }), vue.createSlots({
+                            _: 2
+                            /* DYNAMIC */
+                          }, [
+                            __props.column.optionsLoading ? {
+                              name: "empty",
+                              fn: vue.withCtx(() => [
+                                vue.createElementVNode("div", { class: "w-full flex items-center justify-center py-2 gap-1.5 text-main text-xs whitespace-nowrap" }, [
+                                  vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                                    size: "16",
+                                    class: "is-loading text-theme"
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createVNode(vue.unref(iconsVue.Loading))
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }),
+                                  vue.createElementVNode("span", null, "\u6570\u636E\u6B63\u5728\u52A0\u8F7D\u4E2D")
+                                ])
+                              ]),
+                              key: "0"
+                            } : void 0
+                          ]), 1040, ["modelValue", "onUpdate:modelValue", "disabled", "options"])
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      )) : __props.column.type === "date-picker" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 4 },
+                        [
+                          vue.createCommentVNode(" \u65E5\u671F\u9009\u62E9\u6846 "),
+                          [
+                            "datetimerange",
+                            "daterange",
+                            "monthrange",
+                            "yearrange"
+                          ].includes(columnAttrs.value?.type) && vue.unref(is.isArray)(__props.column.field) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.HyDatePicker), vue.mergeProps({
+                            key: 0,
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            start: bindValue.value,
+                            "onUpdate:start": ($event) => bindValue.value = $event,
+                            end: bindValue2.value,
+                            "onUpdate:end": ($event) => bindValue2.value = $event,
+                            "is-range": true,
+                            style: { "width": "100%" },
+                            timeRangeFill: __props.column.timeRangeFill
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            onChange: ($event) => onChangeHandler($event, __props.column)
+                          }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "timeRangeFill", "disabled", "onChange"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.HyDatePicker), vue.mergeProps({
+                            key: 1,
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                            "is-range": false,
+                            style: { "width": "100%" },
+                            timeRangeFill: __props.column.timeRangeFill
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            onChange: ($event) => onChangeHandler($event, __props.column)
+                          }), null, 16, ["modelValue", "onUpdate:modelValue", "timeRangeFill", "disabled", "onChange"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : __props.column.type === "time-picker" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 5 },
+                        [
+                          vue.createCommentVNode(" \u65F6\u95F4\u9009\u62E9\u6846 "),
+                          columnAttrs.value.isRange ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.HyTimePicker), vue.mergeProps({
+                            key: 0,
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            start: bindValue.value,
+                            "onUpdate:start": ($event) => bindValue.value = $event,
+                            end: bindValue2.value,
+                            "onUpdate:end": ($event) => bindValue2.value = $event,
+                            "is-range": true,
+                            style: { "width": "100%" }
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            onChange: onChangeHandler
+                          }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$3.HyTimePicker), vue.mergeProps({
+                            key: 1,
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                            "is-range": false,
+                            style: { "width": "100%" }
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            onChange: onChangeHandler
+                          }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : __props.column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 6 },
+                        [
+                          vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
+                          vue.createVNode(vue.unref(index$4.HyOrgCascader), vue.mergeProps({
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event
+                          }, columnAttrs.value, {
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            onChange: onChangeHandler,
+                            onVisibleChange
+                          }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      )) : __props.column.type === "cascader" ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 7 },
                         [
-                          "datetimerange",
-                          "daterange",
-                          "monthrange",
-                          "yearrange"
-                        ].includes(columnAttrs.value?.type) && vue.unref(is.isArray)(__props.column.field) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.HyDatePicker), vue.mergeProps({
-                          key: 0,
-                          start: bindValue.value,
-                          "onUpdate:start": ($event) => bindValue.value = $event,
-                          end: bindValue2.value,
-                          "onUpdate:end": ($event) => bindValue2.value = $event,
-                          "is-range": true,
-                          style: { "width": "100%" },
-                          timeRangeFill: __props.column.timeRangeFill
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          onChange: ($event) => onChangeHandler($event, __props.column)
-                        }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "timeRangeFill", "disabled", "onChange"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.HyDatePicker), vue.mergeProps({
-                          key: 1,
-                          modelValue: bindValue.value,
-                          "onUpdate:modelValue": ($event) => bindValue.value = $event,
-                          "is-range": false,
-                          style: { "width": "100%" },
-                          timeRangeFill: __props.column.timeRangeFill
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          onChange: ($event) => onChangeHandler($event, __props.column)
-                        }), null, 16, ["modelValue", "onUpdate:modelValue", "timeRangeFill", "disabled", "onChange"]))
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    )) : __props.column.type === "time-picker" ? (vue.openBlock(), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 4 },
-                      [
-                        vue.createCommentVNode(" \u65F6\u95F4\u9009\u62E9\u6846 "),
-                        columnAttrs.value.isRange ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.HyTimePicker), vue.mergeProps({
-                          key: 0,
-                          start: bindValue.value,
-                          "onUpdate:start": ($event) => bindValue.value = $event,
-                          end: bindValue2.value,
-                          "onUpdate:end": ($event) => bindValue2.value = $event,
-                          "is-range": true,
-                          style: { "width": "100%" }
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          onChange: onChangeHandler
-                        }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$3.HyTimePicker), vue.mergeProps({
-                          key: 1,
-                          modelValue: bindValue.value,
-                          "onUpdate:modelValue": ($event) => bindValue.value = $event,
-                          "is-range": false,
-                          style: { "width": "100%" }
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          onChange: onChangeHandler
-                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"]))
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    )) : __props.column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 5 },
-                      [
-                        vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
-                        vue.createVNode(vue.unref(index$4.HyOrgCascader), vue.mergeProps({
-                          modelValue: bindValue.value,
-                          "onUpdate:modelValue": ($event) => bindValue.value = $event
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          onChange: onChangeHandler
-                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
-                      ],
-                      2112
-                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                    )) : __props.column.type === "cascader" ? (vue.openBlock(), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 6 },
-                      [
-                        vue.createCommentVNode(" \u7EA7\u8054\u9009\u62E9\u6846 "),
-                        vue.createVNode(vue.unref(elementPlus.ElCascader), vue.mergeProps({
-                          modelValue: bindValue.value,
-                          "onUpdate:modelValue": ($event) => bindValue.value = $event
-                        }, columnAttrs.value, {
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          options: vue.unref(index.optionsHandler)(props, __props.column),
-                          onChange: onChangeHandler
-                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "options"])
-                      ],
-                      2112
-                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                    )) : vue.createCommentVNode("v-if", true)
-                  ],
-                  6
-                  /* CLASS, STYLE */
-                )
-              ],
-              4
-              /* STYLE */
-            ),
-            __props.column.type === "date-picker" && ["daterange", "datetimerange"].includes(columnAttrs.value?.type) && __props.column.timeRangeOptions?.length ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "flex text-main select-none"
-            }, [
-              (vue.openBlock(true), vue.createElementBlock(
-                vue.Fragment,
-                null,
-                vue.renderList(__props.column.timeRangeOptions, (item, index$1) => {
-                  return vue.openBlock(), vue.createElementBlock("div", {
-                    key: index$1,
-                    class: vue.normalizeClass(["border-l border-border px-[10px] cursor-pointer", {
-                      "bg-[rgba(var(--hy-theme),0.2)] text-theme font-bold": vue.unref(index.isSelectedTimeRange)(__props.column, item, __props.model)
-                    }]),
-                    onClick: ($event) => onTimeRangeClickHandler(__props.column, item)
-                  }, [
-                    vue.createElementVNode(
-                      "span",
-                      null,
-                      vue.toDisplayString(item.label),
-                      1
-                      /* TEXT */
-                    )
-                  ], 10, ["onClick"]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ])) : vue.createCommentVNode("v-if", true)
-          ])
+                          vue.createCommentVNode(" \u7EA7\u8054\u9009\u62E9\u6846 "),
+                          vue.createVNode(vue.unref(elementPlus.ElCascader), vue.mergeProps({
+                            ref_key: "componentRef",
+                            ref: componentRef,
+                            modelValue: bindValue.value,
+                            "onUpdate:modelValue": ($event) => bindValue.value = $event
+                          }, columnAttrs.value, {
+                            style: { "width": "100%" },
+                            disabled: vue.unref(index.isDisabled)(props, __props.column),
+                            options: getOptionsHandler(props, __props.column),
+                            onChange: onChangeHandler,
+                            onVisibleChange
+                          }), vue.createSlots({
+                            _: 2
+                            /* DYNAMIC */
+                          }, [
+                            __props.column.optionsLoading ? {
+                              name: "empty",
+                              fn: vue.withCtx(() => [
+                                vue.createElementVNode("div", { class: "w-full flex items-center justify-center py-2 gap-1.5 text-main text-xs whitespace-nowrap" }, [
+                                  vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                                    size: "16",
+                                    class: "is-loading text-theme"
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createVNode(vue.unref(iconsVue.Loading))
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }),
+                                  vue.createElementVNode("span", null, "\u6570\u636E\u6B63\u5728\u52A0\u8F7D\u4E2D")
+                                ])
+                              ]),
+                              key: "0"
+                            } : void 0
+                          ]), 1040, ["modelValue", "onUpdate:modelValue", "disabled", "options"])
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      )) : vue.createCommentVNode("v-if", true)
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  )
+                ],
+                4
+                /* STYLE */
+              ),
+              __props.column.type === "date-picker" && ["daterange", "datetimerange"].includes(columnAttrs.value?.type) && __props.column.timeRangeOptions?.length ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "flex text-main select-none"
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(__props.column.timeRangeOptions, (item, index$1) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: index$1,
+                      class: vue.normalizeClass(["border-l border-border px-[10px] cursor-pointer", {
+                        "bg-[rgba(var(--hy-theme),0.2)] text-theme font-bold": vue.unref(index.isSelectedTimeRange)(__props.column, item, __props.model)
+                      }]),
+                      onClick: ($event) => onTimeRangeClickHandler(__props.column, item)
+                    }, [
+                      vue.createElementVNode(
+                        "span",
+                        null,
+                        vue.toDisplayString(item.label),
+                        1
+                        /* TEXT */
+                      )
+                    ], 10, ["onClick"]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])) : vue.createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )
         ]),
         _: 3
         /* FORWARDED */