x-sccba 0.1.2 → 0.2.4

package/dist/vue3/index63.mjs

@@ -0,0 +1,616 @@
+import { defineComponent, computed, reactive, ref, onMounted, getCurrentInstance, onUnmounted, watch, isVue2 } from "vue-demi";
+import { h } from "./index129.mjs";
+import { useCompatSlots, renderSlot, hasSlot } from "./index131.mjs";
+import { getUIComponent } from "./index2.mjs";
+import { useComputed } from "./index179.mjs";
+import MoreChoose from "./index180.mjs";
+import RenderComp from "./index181.mjs";
+import './components/XQueryCondition/style.css';/* empty css          */
+import * as Icons from "@element-plus/icons-vue";
+import { useLocale } from "./index123.mjs";
+import { resolveComponent } from "./index183.mjs";
+import { buildVModelBind } from "./index152.mjs";
+const XQueryCondition = /* @__PURE__ */ defineComponent({
+  name: "XQueryCondition",
+  props: {
+    /** 查询条件配置对象，key 为字段名，value 为该字段的组件/绑定/事件等配置 */
+    opts: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 表单 label 宽度，默认 '120px' */
+    labelWidth: {
+      type: String,
+      default: "120px"
+    },
+    /** 查询按钮额外绑定属性（可覆盖 btnTxt 等） */
+    btnCheckBind: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 重置按钮额外绑定属性 */
+    btnResetBind: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 查询按钮是否显示 loading 状态 */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否显示重置按钮 */
+    reset: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否支持 Enter 键触发查询 */
+    boolEnter: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否显示「展开/收起」切换按钮 */
+    isShowOpen: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否默认展开所有查询条件 */
+    isExpansion: {
+      type: Boolean,
+      default: false
+    },
+    /** 收起状态下最大可见行数 */
+    maxVisibleRows: {
+      type: Number,
+      default: 1
+    },
+    /** 收起按钮文案（不传则使用 i18n 默认值） */
+    packUpTxt: {
+      type: String,
+      default: ""
+    },
+    /** 展开按钮文案（不传则使用 i18n 默认值） */
+    unfoldTxt: {
+      type: String,
+      default: ""
+    },
+    /** 是否显示底部按钮区域（查询/重置/展开收起） */
+    isFooter: {
+      type: Boolean,
+      default: true
+    },
+    /** opts 配置变化时是否重置表单值（false=保留已填值） */
+    configChangedReset: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否使用固定列数（开启后忽略容器宽度自适应） */
+    isShowWidthSize: {
+      type: Boolean,
+      default: false
+    },
+    /** 固定列数值（仅 isShowWidthSize=true 时生效） */
+    widthSize: {
+      type: Number,
+      default: 4
+    },
+    /** 是否以下拉弹窗方式展示更多查询条件 */
+    isDropDownSelectMore: {
+      type: Boolean,
+      default: false
+    },
+    /** 下拉更多条件的数据源 */
+    moreCheckList: {
+      type: Array,
+      default: () => []
+    },
+    /** 更多条件弹窗的 i18n 文案配置 */
+    popoverAttrs: {
+      type: Object,
+      default: () => ({})
+    },
+    /** label 位置：'left' | 'right' | 'top' */
+    labelPosition: {
+      type: String,
+      default: "right"
+    }
+  },
+  /** 组件对外触发的事件 */
+  emits: ["handleEvent", "submit", "reset", "getCheckList", "get-refs", "getRefs"],
+  setup(props, {
+    attrs,
+    emit,
+    expose
+  }) {
+    const ElForm = getUIComponent("Form");
+    const ElFormItem = getUIComponent("FormItem");
+    const ElIcon = getUIComponent("Icon");
+    const {
+      t
+    } = useLocale();
+    const _computed = useComputed();
+    const compChildName = (opt) => _computed.compChildName.value(opt);
+    const selectListType = (opt) => _computed.selectListType.value(opt);
+    const compChildLabel = (opt, value) => _computed.compChildLabel.value(opt, value);
+    const compChildValue = (opt, value, key) => _computed.compChildValue.value(opt, value, key);
+    const compChildShowLabel = (opt, value) => _computed.compChildShowLabel.value(opt, value);
+    const getColLength = _computed.getColLength;
+    function getSelectOptionsBind(opt) {
+      if (opt.type === "select-arr") {
+        const list = opt.listTypeInfo && opt.list ? opt.listTypeInfo[opt.list] || [] : [];
+        return {
+          optionSource: list,
+          optionValueKey: opt.arrKey || "key",
+          optionLabelKey: opt.arrLabel || "label"
+        };
+      }
+      if (opt.type === "select-obj") {
+        const obj = opt.listTypeInfo && opt.list ? opt.listTypeInfo[opt.list] || {} : {};
+        return {
+          optionSource: Object.entries(obj).map(([key, value]) => ({
+            label: value,
+            value: key
+          }))
+        };
+      }
+      return {};
+    }
+    const popoverAttrsBind = computed(() => ({
+      showTxt: t("plus.search.popoverAttrs.showTxt"),
+      title: t("plus.search.popoverAttrs.title"),
+      allTxt: t("plus.search.popoverAttrs.allTxt"),
+      reverseTxt: t("plus.search.popoverAttrs.reverseTxt"),
+      clearTxt: t("plus.search.popoverAttrs.clearTxt"),
+      ...props.popoverAttrs
+    }));
+    const queryState = reactive({
+      form: Object.keys(props.opts).reduce((acc, field) => {
+        acc[field] = props.opts[field].defaultVal ?? null;
+        return acc;
+      }, {})
+    });
+    const colLength = ref(4);
+    const showOpen = ref(false);
+    const open = ref(false);
+    const formRef = ref(null);
+    function includesIgnoreCase(str, search) {
+      return str.toLowerCase().includes(search.toLowerCase());
+    }
+    function getPlaceholder(row) {
+      let placeholder;
+      if (row.comp && typeof row.comp === "string") {
+        const comp = row.comp;
+        if (includesIgnoreCase(comp, "input")) placeholder = t("plus.search.pleaseEnter") + row.label;
+        else if (includesIgnoreCase(comp, "select") || includesIgnoreCase(comp, "date")) placeholder = t("plus.search.pleaseSelect") + row.label;
+        else placeholder = row.label;
+      }
+      return placeholder;
+    }
+    const queryAttrs = computed(() => ({
+      btnTxt: t("plus.search.searchText"),
+      ...props.btnCheckBind
+    }));
+    const resetAttrs = computed(() => ({
+      btnTxt: t("plus.search.resetText"),
+      ...props.btnResetBind
+    }));
+    const originCellLength = computed(() => {
+      let length = 0;
+      Object.keys(props.opts).forEach((key) => {
+        const span = props.opts[key].span || 1;
+        if (length % colLength.value + span > colLength.value) length += colLength.value - length % colLength.value;
+        length += span;
+      });
+      return length;
+    });
+    const cOpts = computed(() => {
+      let renderSpan = 0;
+      return Object.keys(props.opts).reduce((acc, field) => {
+        const opt = {
+          ...props.opts[field]
+        };
+        if (showOpen.value) {
+          renderSpan += opt.span ?? 1;
+          if (!open.value && renderSpan - 1 >= props.maxVisibleRows * colLength.value) return acc;
+        }
+        opt.dataIndex = field;
+        acc[field] = opt;
+        return acc;
+      }, {});
+    });
+    const cellLength = computed(() => {
+      let length = 0;
+      Object.keys(props.opts).forEach((key) => {
+        const optSpan = props.opts[key].span;
+        let span = optSpan && optSpan > 4 ? 4 : optSpan || 1;
+        length += span;
+      });
+      return length;
+    });
+    const gridAreas = computed(() => {
+      const fields = Object.keys(cOpts.value);
+      let rowIndex = 0, rowSpan = 0;
+      const areas = [[]];
+      for (let fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
+        const field = fields[fieldIndex];
+        const opt = cOpts.value[field];
+        const span = Math.min(opt.span ?? 1, Math.min(colLength.value, 4));
+        if (rowSpan + span > colLength.value) {
+          while (rowSpan < colLength.value) {
+            areas[rowIndex].push(".");
+            rowSpan += 1;
+          }
+          rowSpan = 0;
+          areas[++rowIndex] = [];
+        }
+        rowSpan += span;
+        for (let index = 0; index < span; index++) areas[rowIndex].push(field);
+      }
+      if (areas[rowIndex].length === colLength.value) areas.push(new Array(colLength.value).fill("submit_btn"));
+      else while (areas[rowIndex].length < colLength.value) areas[rowIndex].push("submit_btn");
+      return areas.reduce((acc, cur) => acc + `'${cur.join(" ")}'
+`, "");
+    });
+    const packUpTxtText = computed(() => props.packUpTxt || t("plus.search.retract"));
+    const unfoldTxtText = computed(() => props.unfoldTxt || t("plus.search.expand"));
+    const cEvent = computed(() => (opt) => {
+      const event = {
+        ...opt.eventHandle
+      };
+      const changeEvent = {};
+      Object.keys(event).forEach((v) => {
+        changeEvent[v] = (e) => {
+          const compStr = typeof opt.comp === "string" ? opt.comp : "";
+          if (includesIgnoreCase(compStr, "select") || includesIgnoreCase(compStr, "picker") || includesIgnoreCase(compStr, "date")) {
+            event[v] && event[v](e, queryState.form);
+          } else {
+            if (e) event[v] && event[v](e, queryState.form);
+            else event[v] && event[v](queryState.form);
+          }
+        };
+      });
+      return {
+        ...changeEvent
+      };
+    });
+    function initForm(opts, keepVal = false) {
+      return Object.keys(opts).reduce((acc, field) => {
+        if (keepVal && queryState.form) acc[field] = queryState.form[field] ?? opts[field].defaultVal ?? null;
+        else acc[field] = opts[field].defaultVal ?? null;
+        return acc;
+      }, {});
+    }
+    const xselecttableref = ref({});
+    function emitGetRefs(el, opt, index) {
+      emit("getRefs", el, opt, index);
+      if (isVue2) emit("get-refs", el, opt, index);
+    }
+    function handleRef(el, opt, key) {
+      emitGetRefs(el, opt, key);
+      if (el) xselecttableref.value[`xselecttableref-${key}`] = el;
+    }
+    function getRefs(el, opt, index) {
+      emitGetRefs(el, opt, index);
+    }
+    function resetHandle() {
+      queryState.form = initForm(props.opts);
+      const refList = Object.keys(xselecttableref.value).filter((item) => item.includes("xselecttableref"));
+      if (refList.length > 0) refList.forEach((val) => xselecttableref.value[val].clear());
+      emit("reset", queryState.form);
+      checkHandle("reset");
+    }
+    function resetData() {
+      queryState.form = initForm(props.opts);
+      const refList = Object.keys(xselecttableref.value).filter((item) => item.includes("xselecttableref"));
+      if (refList.length > 0) refList.forEach((val) => xselecttableref.value[val].clear());
+    }
+    function handleEvent({
+      isChange = false,
+      type,
+      val
+    }, dataIndex) {
+      if (!isChange) emit("handleEvent", type, val, queryState.form);
+      else if (dataIndex) queryState.form[dataIndex] = val;
+    }
+    function checkHandle(flagText = false) {
+      emit("submit", queryState.form, flagText);
+    }
+    let keyupHandler = null;
+    let resizeHandler = null;
+    let resizeObserver = null;
+    onMounted(() => {
+      showOpen.value = !!props.isShowOpen;
+      open.value = !!props.isExpansion;
+      const instance = getCurrentInstance();
+      const formEl = formRef.value?.$el || instance?.proxy?.$el;
+      if (props.isShowWidthSize) {
+        colLength.value = props.widthSize;
+      } else {
+        if (formEl) colLength.value = getColLength(formEl.offsetWidth);
+        else colLength.value = getColLength();
+      }
+      if (!props.isShowWidthSize && typeof window !== "undefined") {
+        if (formEl && typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) colLength.value = getColLength(entry.contentRect.width);
+          });
+          resizeObserver.observe(formEl);
+        } else {
+          resizeHandler = () => {
+            colLength.value = getColLength();
+          };
+          window.addEventListener("resize", resizeHandler);
+        }
+      }
+      if (props.boolEnter) {
+        keyupHandler = (e) => {
+          if (e.key !== "Enter") return;
+          const pagination = document.querySelectorAll(".el-pagination");
+          let isPaginationInputFocus = false;
+          pagination.forEach((ele) => {
+            const inputs = ele.getElementsByTagName("input");
+            if (inputs[inputs.length - 1] === document.activeElement) isPaginationInputFocus = true;
+          });
+          if (!isPaginationInputFocus) checkHandle();
+        };
+        document.addEventListener("keyup", keyupHandler);
+      }
+      const slots = instance?.slots || {};
+      if (slots.footerBtn || !props.isFooter) open.value = true;
+      if (props.isDropDownSelectMore) {
+        open.value = true;
+        showOpen.value = false;
+      }
+    });
+    onUnmounted(() => {
+      if (keyupHandler) {
+        document.removeEventListener("keyup", keyupHandler);
+        keyupHandler = null;
+      }
+      if (resizeHandler) {
+        window.removeEventListener("resize", resizeHandler);
+        resizeHandler = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+    });
+    watch(() => props.widthSize, (val) => {
+      colLength.value = val;
+    });
+    watch(() => props.opts, (opts) => {
+      queryState.form = initForm(opts, !props.configChangedReset);
+    }, {
+      deep: true
+    });
+    expose?.({
+      queryState,
+      props,
+      colLength,
+      resetData,
+      resetHandle,
+      checkHandle,
+      handleEvent
+    });
+    if (isVue2) {
+      const vm = getCurrentInstance()?.proxy;
+      if (vm) {
+        vm.queryState = queryState;
+        vm.colLength = colLength;
+        vm.resetData = resetData;
+        vm.resetHandle = resetHandle;
+        vm.checkHandle = checkHandle;
+        vm.handleEvent = handleEvent;
+      }
+    }
+    return () => {
+      const instance = getCurrentInstance();
+      const vm = instance?.proxy || instance;
+      const slots = useCompatSlots(instance);
+      const renderFormItems = () => {
+        return Object.entries(cOpts.value).map(([i, opt]) => {
+          const formItemClass = {
+            [opt.className]: opt.className,
+            render_label: opt.labelRender,
+            render_label_position_top: props.labelPosition === "top" && opt.labelRender,
+            render_label_position_left: props.labelPosition === "left" && opt.labelRender
+          };
+          const labelSlot = opt.labelRender ? {
+            label: () => h(RenderComp, {
+              form: queryState.form,
+              render: opt.labelRender
+            })
+          } : {};
+          let content = null;
+          if (opt.slotName) {
+            content = renderSlot(slots, opt.slotName, {
+              param: queryState.form,
+              scope: queryState.form
+            });
+          } else if (opt.isSelfCom) {
+            const comp = typeof opt.comp === "string" ? resolveComponent(opt.comp, vm) : opt.comp;
+            const bindProps = typeof opt.bind === "function" ? opt.bind(queryState.form) : {
+              clearable: true,
+              filterable: true,
+              ...attrs,
+              ...opt.bind
+            };
+            content = h(comp, {
+              ref: (el) => opt.comp === "x-select-table" ? handleRef(el, opt, i) : getRefs(el, opt, i),
+              ...buildVModelBind(queryState.form[opt.dataIndex], (v) => {
+                queryState.form[opt.dataIndex] = v;
+              }),
+              placeholder: opt.placeholder || getPlaceholder(opt),
+              ...bindProps,
+              style: {
+                width: opt.width || "100%"
+              },
+              onChange: () => handleEvent({
+                type: opt.event,
+                val: queryState.form[opt.dataIndex]
+              }),
+              ...cEvent.value(opt)
+            });
+          } else {
+            const comp = typeof opt.comp === "string" ? resolveComponent(opt.comp, vm) : opt.comp;
+            const bindProps = typeof opt.bind === "function" ? opt.bind(queryState.form) : {
+              clearable: true,
+              filterable: true,
+              ...attrs,
+              ...opt.bind
+            };
+            const extraBind = getSelectOptionsBind(opt);
+            let childNodes = void 0;
+            if (compChildName(opt) && opt.type !== "select-arr" && opt.type !== "select-obj") {
+              const ChildComp = resolveComponent(compChildName(opt) ?? "", vm);
+              childNodes = {
+                default: () => Object.entries(selectListType(opt)).map(([key, value]) => {
+                  const childProps = {
+                    key,
+                    disabled: value.disabled,
+                    value: compChildValue(opt, value, key)
+                  };
+                  const isRadioOrCheckbox = opt.type === "radio" || opt.type === "checkbox";
+                  if (isVue2 && isRadioOrCheckbox) {
+                    childProps.label = compChildValue(opt, value, key);
+                  }
+                  if (!isRadioOrCheckbox) {
+                    childProps.label = compChildLabel(opt, value);
+                  }
+                  return h(ChildComp, childProps, {
+                    default: () => compChildShowLabel(opt, value)
+                  });
+                })
+              };
+            }
+            content = h(comp, {
+              ref: (el) => getRefs(el, opt, i),
+              ...buildVModelBind(queryState.form[opt.dataIndex], (v) => {
+                queryState.form[opt.dataIndex] = v;
+              }),
+              placeholder: opt.placeholder || getPlaceholder(opt),
+              ...bindProps,
+              ...extraBind,
+              onChange: () => handleEvent({
+                type: opt.event,
+                val: queryState.form[opt.dataIndex]
+              }),
+              ...cEvent.value(opt)
+            }, childNodes);
+          }
+          return h(ElFormItem, {
+            key: i,
+            label: opt.label,
+            labelWidth: opt.labelWidth,
+            style: {
+              gridArea: i
+            },
+            class: formItemClass
+          }, {
+            ...labelSlot,
+            default: () => content
+          });
+        });
+      };
+      const XButton = resolveComponent("XButton", vm);
+      const renderBtnFormItem = () => {
+        if (Object.keys(cOpts.value).length === 0) return null;
+        const btnClass = {
+          btn: true,
+          flex_end: cellLength.value % colLength.value === 0,
+          btn_flex_end: Object.keys(cOpts.value).length === 4 || cellLength.value > 3,
+          btn_label_position_top: props.labelPosition === "top"
+        };
+        let btnContent = null;
+        if (props.isFooter) {
+          if (hasSlot(slots, "footerBtn")) {
+            btnContent = renderSlot(slots, "footerBtn");
+          } else {
+            const toggleBtn = originCellLength.value > props.maxVisibleRows * colLength.value && showOpen.value ? h(XButton, {
+              ...isVue2 ? {
+                type: "text"
+              } : {
+                link: true
+              },
+              onClick: () => {
+                open.value = !open.value;
+              }
+            }, {
+              default: () => [
+                open.value ? packUpTxtText.value : unfoldTxtText.value,
+                // Vue2: element-ui 使用 CSS 字体图标（el-icon-arrow-up/down），无 ElIcon 组件
+                // Vue3: element-plus 使用 SVG 图标，需 ElIcon 容器包裹 ArrowUp/ArrowDown
+                isVue2 ? h("i", {
+                  class: open.value ? "el-icon-arrow-up" : "el-icon-arrow-down"
+                }) : h(ElIcon, {}, {
+                  default: () => open.value ? h(Icons.ArrowUp) : h(Icons.ArrowDown)
+                })
+              ]
+            }) : null;
+            btnContent = [h(XButton, {
+              class: "btn_check",
+              type: "primary",
+              ...queryAttrs.value,
+              loading: props.loading,
+              onClick: () => checkHandle()
+            }, {
+              default: () => queryAttrs.value.btnTxt
+            }), props.reset ? h(XButton, {
+              class: "btn_reset",
+              ...resetAttrs.value,
+              onClick: () => resetHandle()
+            }, {
+              default: () => resetAttrs.value.btnTxt
+            }) : null, renderSlot(slots, "querybar"), toggleBtn, h(MoreChoose, {
+              isDropDownSelectMore: props.isDropDownSelectMore,
+              moreCheckList: props.moreCheckList,
+              popoverAttrsBind: popoverAttrsBind.value,
+              onGetCheckList: (event) => emit("getCheckList", event)
+            })];
+          }
+        }
+        return h(ElFormItem, {
+          labelWidth: "0",
+          style: {
+            gridArea: "submit_btn"
+          },
+          class: btnClass
+        }, {
+          default: () => btnContent
+        });
+      };
+      return h(ElForm, {
+        ref: (el) => {
+          formRef.value = el;
+        },
+        id: "x_query_condition",
+        ...attrs,
+        labelWidth: props.labelWidth,
+        labelPosition: props.labelPosition,
+        // Element Plus (Vue3) 有效 size: large / default / small
+        // Element UI (Vue2) 有效 size: medium / small / mini
+        // 两者 "small" 对应高度一致（~32px），Vue2 无 "default" 尺寸
+        size: isVue2 ? "small" : "default",
+        class: "x-query-condition",
+        style: {
+          "grid-template-areas": gridAreas.value,
+          "grid-template-columns": `repeat(${colLength.value}, minmax(0, 1fr))`
+        },
+        // Vue2: onSubmit → component event（$emit），不能阻止 native <form> submit；
+        //   需用 nativeOn.submit（等价 @submit.native.prevent）阻止原生表单提交。
+        // Vue3: onSubmit 通过 v-on fallthrough 到根元素，天然阻止 native submit。
+        ...isVue2 ? {
+          onSubmitNative: (e) => e.preventDefault()
+        } : {
+          onSubmit: (e) => e.preventDefault()
+        }
+      }, {
+        default: () => [...renderFormItems(), renderBtnFormItem()]
+      });
+    };
+  }
+});
+export {
+  XQueryCondition as default
+};
+//# sourceMappingURL=index63.mjs.map