hy-dispatch-ui-v3 0.2.65 → 0.2.67

package/es/components/hySearch/cpns/searchItem.vue.mjs

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