hy-dispatch-ui-v3 0.2.66 → 0.2.68

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

@@ -40,7 +40,7 @@ const _sfc_main = {
     const props = __props;
     const emits = __emit;
     const formContext = vue.inject(index.formContextKey);
-    const orgCascaderRef = vue.useTemplateRef("orgCascaderRef");
+    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;
@@ -79,39 +79,67 @@ const _sfc_main = {
       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)
       };
     });
-    const optionsLoading = vue.ref(false);
-    const optionsError = vue.ref("");
-    async function obtainOptions() {
-      if (props.column.optionsFn) {
-        if (!props.column.optionsFn || optionsLoading.value) return;
-        optionsLoading.value = true;
-        optionsError.value = "";
-        props.column.attrs.options = [];
-        try {
-          props.column.attrs.options = await props.column.optionsFn(
-            props.column,
-            props.model
-          );
-          optionsError.value = "";
-        } catch (err) {
-          optionsError.value = "error";
-          console.error(err);
-        }
-      } else if (props.column.type === "org-cascader") {
-        if (orgCascaderRef.value) {
-          optionsLoading.value = true;
-          optionsError.value = "";
-          try {
-            await orgCascaderRef.value.getData();
-          } catch {
-            optionsError.value = "error";
+    function obtainOptions(isMountedLoad = false) {
+      return new Promise(async (resolve, reject) => {
+        if (props.column.optionsFn) {
+          if (!props.column.optionsFn) return;
+          onRequesting();
+          if (!(isMountedLoad && props.column.isDefaultGetData === false)) {
+            try {
+              const options = await props.column.optionsFn(props.column, props.model);
+              onFulfilled(options);
+              resolve();
+            } catch (err) {
+              onRejected();
+              console.error(err);
+              reject();
+            }
+          } else {
+            resolve();
+          }
+        } else if (props.column.type === "org-cascader") {
+          if (componentRef.value) {
+            try {
+              onRequesting();
+              await componentRef.value.getData();
+              onFulfilled();
+              resolve();
+            } catch {
+              onRejected();
+              reject();
+            }
+          } else {
+            resolve();
           }
+        } else {
+          resolve();
         }
+        props.column.optionsLoading = false;
+      });
+    }
+    function onRequesting() {
+      props.column.optionsLoading = true;
+      props.column.optionsError = "";
+      props.column.attrs.options = [];
+    }
+    function onFulfilled(options = []) {
+      props.column.optionsLoading = false;
+      props.column.optionsError = "";
+      props.column.attrs.options = options;
+    }
+    function onRejected() {
+      props.column.optionsLoading = false;
+      props.column.optionsError = "error";
+      props.column.attrs.options = [];
+    }
+    function getOptionsHandler(props2, column) {
+      if (props2.column.optionsLoading) {
+        return [];
       }
-      optionsLoading.value = false;
+      return index.optionsHandler(props2, props2.column);
     }
     function onChangeHandler(value, column) {
       const { onChange } = props.column;
@@ -119,6 +147,15 @@ const _sfc_main = {
       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");
     }
@@ -144,16 +181,29 @@ const _sfc_main = {
       columnConfig,
       columnAttrs,
       obtainOptions,
-      optionsLoading,
-      optionsError,
+      optionsLoading: vue.computed(() => columnConfig.value.optionsLoading),
+      optionsError: vue.computed(() => columnConfig.value.optionsError),
       options: vue.computed(() => {
-        return index.optionsHandler(props, props.column);
+        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);
@@ -164,297 +214,332 @@ const _sfc_main = {
         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: 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({
-                          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)
-                        }), vue.createSlots({
-                          _: 2
-                          /* DYNAMIC */
-                        }, [
-                          optionsLoading.value ? {
-                            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({
-                          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
-                        }), vue.createSlots({
-                          _: 2
-                          /* DYNAMIC */
-                        }, [
-                          optionsLoading.value ? {
-                            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 "),
+          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 box-border", {
+                        "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,
+                            class: "box-border",
+                            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,
+                            class: "box-border",
+                            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,
+                            class: "box-border",
+                            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,
+                            class: "box-border",
+                            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),
+                            defaultGetData: false,
+                            onRequesting,
+                            onFulfilled,
+                            onRejected,
+                            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: 5 },
-                      [
-                        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: 6 },
-                      [
-                        vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
-                        vue.createVNode(vue.unref(index$4.HyOrgCascader), vue.mergeProps({
-                          ref_key: "orgCascaderRef",
-                          ref: orgCascaderRef,
-                          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: 7 },
-                      [
-                        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, {
-                          style: { "width": "100%" },
-                          disabled: vue.unref(index.isDisabled)(props, __props.column),
-                          options: vue.unref(index.optionsHandler)(props, __props.column),
-                          onChange: onChangeHandler
-                        }), vue.createSlots({
-                          _: 2
-                          /* DYNAMIC */
-                        }, [
-                          optionsLoading.value ? {
-                            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)
-          ])
+                          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 box-border", {
+                        "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 */