asp-smart-ui-plus-test/es/components/pc/advanced/query-form/src/query-form2.mjs

A Component Library for Vue 3

import { defineComponent, reactive, ref, nextTick, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, withCtx, Fragment, renderList, createBlock, toHandlers, createCommentVNode, unref, createTextVNode, renderSlot } from 'vue';
import { Search, RefreshRight } from '@element-plus/icons-vue';
import formItem from './form-item.mjs';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';

const _hoisted_1 = { class: "asp-query-form" };
const _hoisted_2 = {
  key: 0,
  class: "btn-item"
};
const _hoisted_3 = {
  key: 1,
  class: "btn-item"
};
const _hoisted_4 = {
  key: 2,
  class: "add-btns"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "query-form",
  props: {
    formFields: { type: Array, required: true, default: () => [] },
    buttonList: { type: Array, required: true, default: () => [] },
    showReset: { type: Boolean, required: true, default: true },
    labelWidth: { type: [String, Number], required: true },
    showSubmit: { type: Boolean, required: true, default: true },
    submitBtnIcon: { type: String, required: true },
    resetBtnIcon: { type: String, required: true }
  },
  emits: ["formSubmit", "reset"],
  setup(__props, { expose, emit }) {
    const props = __props;
    const model = reactive({});
    const formItemRefs = ref([]);
    const validateFormRef = ref(null);
    const onSubmit = () => {
      if (!validateFormRef.value) {
        console.error("Form reference is not set.");
        return;
      }
      validateFormRef.value.validate((valid) => {
        if (valid) {
          getModel();
          emit("formSubmit", model);
        } else {
          return false;
        }
      });
    };
    const onReset = () => {
      nextTick(() => {
        createModel();
        emit("reset", model);
      });
    };
    const getModel = () => {
      props.formFields.forEach((item, index) => {
        if (item.type === "radioGroupSelect") {
          const formItemRef = formItemRefs.value[index];
          if (formItemRef.modelValue) {
            model[item.columnName] = formItemRef.modelValue.getModel();
          }
        }
      });
      return model;
    };
    const resetModel = () => {
      nextTick(() => {
        createModel();
      });
    };
    onMounted(() => {
      nextTick(() => {
        createModel();
      });
    });
    const createModel = () => {
      props.formFields.forEach((item, index) => {
        if (item.show !== void 0 && !item.show)
          return;
        switch (item.type) {
          case "selectTree":
            handleSelectTree(item);
            break;
          case "radioGroup":
            handleRadioGroup(item);
            break;
          case "radioGroupSelect":
            handleRadioGroupSelect(item, index);
            break;
          default:
            handleDefault(item);
            break;
        }
      });
    };
    const handleSelectTree = (item) => {
      var _a, _b;
      model[item.columnName] = ((_a = item == null ? void 0 : item.attributes) == null ? void 0 : _a.currentNodeKey) || ((_b = item == null ? void 0 : item.attributes) == null ? void 0 : _b.defaultCheckedKeys);
    };
    const handleRadioGroup = (item) => {
      var _a, _b;
      item.value = (_a = item.defaultValue) != null ? _a : null;
      model[item.columnName] = (_b = item.defaultValue) != null ? _b : item.defaultValue === 0 ? item.defaultValue : "";
    };
    const handleRadioGroupSelect = (item, index) => {
      var _a, _b;
      const radioGroupSelectRef = formItemRefs.value[index].radioGroupSelectRef;
      radioGroupSelectRef.setValue(item.defaultValue || "");
      if (item.defaultCheckedKeys && item.defaultCheckedKeys.length > 0) {
        (_b = (_a = item.attributes) == null ? void 0 : _a.radioGroups) == null ? void 0 : _b.forEach(
          (subItem, subIndex) => {
            subItem.radioValue = item.defaultCheckedKeys[subIndex];
          }
        );
      }
      model[item.columnName] = radioGroupSelectRef.getModel();
    };
    const handleDefault = (item) => {
      var _a;
      model[item.columnName] = (_a = item.defaultValue) != null ? _a : item.defaultValue === 0 ? item.defaultValue : "";
    };
    const setValue = (columnName, value) => {
      model[columnName] = value;
    };
    const setOptions = (columnName, options) => {
      props.formFields.forEach((item) => {
        if (item.columnName === columnName) {
          item.options = options;
        }
      });
    };
    const setDisabled = (columnName, state) => {
      props.formFields.forEach((item) => {
        if (item.columnName === columnName) {
          item.disabled = state;
        }
      });
    };
    const setFormField = (columnName, key, value) => {
      props.formFields.forEach((item) => {
        if (item.columnName === columnName) {
          item[key] = value;
        }
      });
    };
    const returnLabelWidth = () => {
      if (props.labelWidth) {
        return props.labelWidth;
      }
      if (props.formFields && props.formFields.length > 0) {
        let max = props.formFields[0];
        props.formFields.forEach((cell) => {
          if (cell.label.length > max.label.length && (cell.show === void 0 || cell.show)) {
            max = cell;
          }
        });
        const length = max.label.replace(/[^\u0020-\u007E]/g, "*").length;
        const num = Number(14 * length) + 23;
        return `${num}px`;
      }
    };
    expose({
      setValue,
      setOptions,
      setDisabled,
      setFormField,
      getModel,
      resetModel
    });
    return (_ctx, _cache) => {
      const _component_asp_button = resolveComponent("asp-button");
      const _component_asp_button_list = resolveComponent("asp-button-list");
      const _component_asp_form_item = resolveComponent("asp-form-item");
      const _component_asp_form = resolveComponent("asp-form");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_asp_form, mergeProps({
          ref_key: "validateFormRef",
          ref: validateFormRef,
          model,
          size: "mini",
          "label-width": returnLabelWidth(),
          "label-position": "right"
        }, _ctx.$attrs, { inline: true }), {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.formFields, (item, index) => {
              return openBlock(), createElementBlock(Fragment, null, [
                (item.show === void 0 ? true : item.show) ? (openBlock(), createBlock(formItem, mergeProps({ key: 0 }, item.attributes, {
                  ref_for: true,
                  ref: (el) => {
                    if (el)
                      formItemRefs.value[index] = el;
                  },
                  key: index,
                  modelValue: model[item.columnName],
                  "onUpdate:modelValue": ($event) => model[item.columnName] = $event,
                  item,
                  class: ["query-form-item", "asp-form-item__" + (item.type || "input")]
                }, toHandlers(item.methods)), null, 16, ["modelValue", "onUpdate:modelValue", "item", "class"])) : createCommentVNode("v-if", true)
              ], 64);
            }), 256)),
            createVNode(_component_asp_form_item, { class: "query-form-btns" }, {
              default: withCtx(() => [
                __props.showSubmit ? (openBlock(), createElementBlock("div", _hoisted_2, [
                  createVNode(_component_asp_button, {
                    class: "blue-solid-btn submit",
                    type: "primary",
                    size: "mini",
                    icon: __props.submitBtnIcon === void 0 ? unref(Search) : __props.submitBtnIcon,
                    onClick: onSubmit
                  }, {
                    default: withCtx(() => [
                      createTextVNode("\u67E5\u8BE2")
                    ]),
                    _: 1
                  }, 8, ["icon"])
                ])) : createCommentVNode("v-if", true),
                __props.showReset ? (openBlock(), createElementBlock("div", _hoisted_3, [
                  createVNode(_component_asp_button, {
                    class: "blue-hollow-btn reset",
                    style: { "margin-left": "10px" },
                    size: "mini",
                    icon: __props.resetBtnIcon === void 0 ? unref(RefreshRight) : __props.resetBtnIcon,
                    onClick: onReset
                  }, {
                    default: withCtx(() => [
                      createTextVNode("\u91CD\u7F6E")
                    ]),
                    _: 1
                  }, 8, ["icon"])
                ])) : createCommentVNode("v-if", true),
                __props.buttonList && __props.buttonList.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
                  renderSlot(_ctx.$slots, "default"),
                  __props.buttonList && __props.buttonList.length > 0 ? (openBlock(), createBlock(_component_asp_button_list, {
                    key: 0,
                    class: "asp-button-list",
                    "button-list": __props.buttonList
                  }, null, 8, ["button-list"])) : createCommentVNode("v-if", true)
                ])) : createCommentVNode("v-if", true)
              ]),
              _: 3
            })
          ]),
          _: 3
        }, 16, ["model", "label-width"])
      ]);
    };
  }
});
var QueryForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\query-form\\src\\query-form.vue"]]);

export { QueryForm as default };