@wocwin/t-ui-plus/es/packages/components/module-form/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, useAttrs, useSlots, ref, computed, resolveComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, createCommentVNode, createBlock, renderSlot, normalizeClass, createSlots, withCtx, toDisplayString, mergeProps, renderList, unref, normalizeProps, guardReactiveProps, Fragment, createVNode, createTextVNode } from 'vue';
import './moduleDetail.vue.mjs';
import './moduleForm.vue.mjs';
import _sfc_main$1 from './moduleForm.vue2.mjs';
import _sfc_main$2 from './moduleDetail.vue2.mjs';

const _hoisted_1 = { class: "scroll_wrap" };
const _hoisted_2 = { class: "sub_title" };
const _hoisted_3 = { class: "extra" };
const _hoisted_4 = {
  key: 0,
  class: "handle_wrap"
};
const _hoisted_5 = { key: 0 };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "TModuleForm"
  },
  __name: "index",
  props: {
    handleType: { default: "edit" },
    isShowHeader: { type: Boolean, default: false },
    titleSlot: { type: Boolean, default: false },
    isShowBack: { type: Boolean, default: false },
    isGoBackEvent: { type: Boolean, default: false },
    btnSaveBind: { default: () => ({}) },
    btnCancelBind: { default: () => ({}) },
    isTabMargin: { type: Boolean, default: false },
    tabMarginNum: { default: 10 },
    footer: {},
    title: { default: "" },
    subTitle: { default: "" },
    tabs: { default: () => [] },
    submit: { type: Function, default: async () => false }
  },
  emits: ["validateError", "back", "tabsChange"],
  setup(__props, { expose: __expose, emit: __emit }) {
    var _a;
    const props = __props;
    const attrs = useAttrs();
    const slots = useSlots();
    const activeName = ref(props.tabs && ((_a = props.tabs[0]) == null ? void 0 : _a.key));
    const loading = ref(false);
    const saveAttrs = computed(() => {
      return {
        type: "primary",
        btnTxt: "\u4FDD\u5B58",
        ...props.btnSaveBind
      };
    });
    const cancelAttrs = computed(() => {
      return { btnTxt: "\u53D6\u6D88", ...props.btnCancelBind };
    });
    const tForm = ref(null);
    const emits = __emit;
    const saveHandle = async () => {
      let form = {};
      let formError = {};
      let formOpts = {};
      let successLength = 0;
      loading.value = true;
      Object.keys(attrs.formOpts).forEach((key) => {
        if (attrs.formOpts[key].opts) {
          formOpts[key] = attrs.formOpts[key];
        }
      });
      Object.keys(formOpts).forEach(async (formIndex) => {
        const { valid } = await tForm.value.getChildRef(formIndex).selfValidate();
        if (valid) {
          successLength = successLength + 1;
          form[formIndex] = attrs.formOpts[formIndex].opts.formData;
        }
      });
      setTimeout(async () => {
        if (successLength === Object.keys(formOpts).length) {
          const isSuccess = await props.submit(form);
          if (isSuccess) {
            back();
          }
        } else {
          Object.keys(formOpts).forEach((key) => {
            if (Object.keys(form).length > 0) {
              Object.keys(form).map((val) => {
                if (key !== val) {
                  formError[key] = formOpts[key];
                }
              });
            } else {
              formError[key] = formOpts[key];
            }
          });
          emits("validateError", formError);
        }
        loading.value = false;
      }, 300);
    };
    const back = () => {
      if (props.isShowBack) {
        return;
      }
      emits("back");
      if (!props.isGoBackEvent) {
        history.go(-1);
      }
    };
    const setSelectedTab = (key) => {
      activeName.value = key;
    };
    const tabsChange = (tab) => {
      emits("tabsChange", tab);
    };
    const resetFormFields = () => {
      let formOpts = {};
      Object.keys(attrs.formOpts).forEach((key) => {
        if (attrs.formOpts[key].opts) {
          formOpts[key] = attrs.formOpts[key];
        }
      });
      Object.keys(formOpts).forEach((formIndex) => {
        tForm.value.getChildRef(formIndex).resetFields();
      });
    };
    const clearValidate = () => {
      let formOpts = {};
      Object.keys(attrs.formOpts).forEach((key) => {
        if (attrs.formOpts[key].opts) {
          formOpts[key] = attrs.formOpts[key];
        }
      });
      Object.keys(formOpts).forEach((formIndex) => {
        tForm.value.getChildRef(formIndex).clearValidate();
      });
    };
    const updateFormFields = () => {
      let formOpts = {};
      Object.keys(attrs.formOpts).forEach((key) => {
        if (attrs.formOpts[key].opts) {
          formOpts[key] = attrs.formOpts[key];
        }
      });
      Object.keys(formOpts).forEach((formIndex) => {
        tForm.value.getChildRef(formIndex).updateFields(false);
      });
    };
    __expose({
      clearValidate,
      resetFormFields,
      updateFormFields,
      setSelectedTab,
      saveHandle
    });
    return (_ctx, _cache) => {
      const _component_el_page_header = resolveComponent("el-page-header");
      const _component_el_tab_pane = resolveComponent("el-tab-pane");
      const _component_el_tabs = resolveComponent("el-tabs");
      const _component_el_button = resolveComponent("el-button");
      return openBlock(), createElementBlock(
        "div",
        {
          class: "t_module_form",
          style: normalizeStyle({ marginBottom: _ctx.footer !== null ? "60px" : "" })
        },
        [
          createElementVNode("div", _hoisted_1, [
            createCommentVNode(" \u5934\u90E8 "),
            !_ctx.isShowHeader && (_ctx.title || _ctx.titleSlot) ? (openBlock(), createBlock(_component_el_page_header, {
              key: 0,
              title: _ctx.title,
              onBack: back,
              class: normalizeClass({
                noContent: !_ctx.subTitle,
                isShowBack: _ctx.isShowBack
              })
            }, createSlots({
              content: withCtx(() => [
                createElementVNode(
                  "div",
                  _hoisted_2,
                  toDisplayString(_ctx.subTitle),
                  1
                  /* TEXT */
                ),
                createElementVNode("div", _hoisted_3, [
                  renderSlot(_ctx.$slots, "extra")
                ])
              ]),
              _: 2
              /* DYNAMIC */
            }, [
              _ctx.titleSlot ? {
                name: "title",
                fn: withCtx(() => [
                  renderSlot(_ctx.$slots, "title")
                ]),
                key: "0"
              } : void 0
            ]), 1032, ["title", "class"])) : createCommentVNode("v-if", true),
            createCommentVNode(" \u8868\u5355\u9875\u9762 "),
            _ctx.handleType === "edit" ? (openBlock(), createBlock(
              _sfc_main$1,
              mergeProps({ key: 1 }, _ctx.$attrs, {
                ref_key: "tForm",
                ref: tForm
              }),
              createSlots({
                _: 2
                /* DYNAMIC */
              }, [
                renderList(unref(slots), (_index, name) => {
                  return {
                    name,
                    fn: withCtx((data) => [
                      renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(data)))
                    ])
                  };
                })
              ]),
              1040
              /* FULL_PROPS, DYNAMIC_SLOTS */
            )) : (openBlock(), createElementBlock(
              Fragment,
              { key: 2 },
              [
                createCommentVNode(" \u8BE6\u60C5\u9875\u9762 "),
                createVNode(
                  _sfc_main$2,
                  normalizeProps(guardReactiveProps(_ctx.$attrs)),
                  createSlots({
                    _: 2
                    /* DYNAMIC */
                  }, [
                    renderList(unref(slots), (_index, name) => {
                      return {
                        name,
                        fn: withCtx((data) => [
                          renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(data)))
                        ])
                      };
                    })
                  ]),
                  1040
                  /* FULL_PROPS, DYNAMIC_SLOTS */
                )
              ],
              2112
              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
            )),
            createCommentVNode(" tabs "),
            _ctx.tabs.length ? (openBlock(), createElementBlock(
              "div",
              {
                key: 3,
                class: "tabs",
                style: normalizeStyle({ "margin-top": _ctx.isTabMargin ? `${_ctx.tabMarginNum}px` : 0 })
              },
              [
                _ctx.tabs && _ctx.tabs.length > 1 ? (openBlock(), createBlock(_component_el_tabs, {
                  key: 0,
                  modelValue: activeName.value,
                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeName.value = $event),
                  onTabChange: tabsChange
                }, {
                  default: withCtx(() => [
                    (openBlock(true), createElementBlock(
                      Fragment,
                      null,
                      renderList(_ctx.tabs, (tab) => {
                        return openBlock(), createBlock(_component_el_tab_pane, {
                          key: tab.key,
                          name: tab.key,
                          label: tab.title
                        }, {
                          default: withCtx(() => [
                            renderSlot(_ctx.$slots, tab.key)
                          ]),
                          _: 2
                          /* DYNAMIC */
                        }, 1032, ["name", "label"]);
                      }),
                      128
                      /* KEYED_FRAGMENT */
                    ))
                  ]),
                  _: 3
                  /* FORWARDED */
                }, 8, ["modelValue"])) : renderSlot(_ctx.$slots, _ctx.tabs && _ctx.tabs[0].key, { key: 1 })
              ],
              4
              /* STYLE */
            )) : createCommentVNode("v-if", true),
            renderSlot(_ctx.$slots, "default")
          ]),
          createCommentVNode(" \u6309\u94AE "),
          _ctx.footer !== null ? (openBlock(), createElementBlock("footer", _hoisted_4, [
            renderSlot(_ctx.$slots, "footer"),
            !unref(slots).footer ? (openBlock(), createElementBlock("div", _hoisted_5, [
              createVNode(
                _component_el_button,
                mergeProps({ onClick: back }, cancelAttrs.value),
                {
                  default: withCtx(() => [
                    createTextVNode(
                      toDisplayString(cancelAttrs.value.btnTxt),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                },
                16
                /* FULL_PROPS */
              ),
              _ctx.handleType === "edit" ? (openBlock(), createBlock(_component_el_button, mergeProps({ key: 0 }, saveAttrs.value, {
                onClick: saveHandle,
                loading: loading.value
              }), {
                default: withCtx(() => [
                  createTextVNode(
                    toDisplayString(saveAttrs.value.btnTxt),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              }, 16, ["loading"])) : createCommentVNode("v-if", true)
            ])) : createCommentVNode("v-if", true)
          ])) : createCommentVNode("v-if", true)
        ],
        4
        /* STYLE */
      );
    };
  }
});

export { _sfc_main as default };