quick-admin-vue3-core/dist/index-FI7soqTF.js

以快（计算机执行效率、开发效率）为核心的后台管理系统开发模板

import { defineComponent as R, ref as c, computed as I, resolveComponent as A, createElementBlock as S, openBlock as f, createVNode as z, mergeProps as b, withCtx as l, Fragment as V, renderList as $, createBlock as T, createSlots as P, renderSlot as d, normalizeProps as v, guardReactiveProps as g, reactive as D, unref as j, isRef as w, createTextVNode as u } from "vue";
import { S as H } from "./SectionForm-DWafmnWV.js";
import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const O = { class: "step-form f-sb-fs" }, E = /* @__PURE__ */ R({
  __name: "StepForm",
  props: {
    sections: { default: () => [] },
    direction: { default: "vertical" },
    stepAttrs: {},
    formAttrs: {},
    footer: { type: Boolean, default: !0 }
  },
  emits: ["change", "blur", "focus"],
  setup(x, { expose: i, emit: m }) {
    const y = {
      // direction: 'vertical',
      // space: '',
      // processStatus: "process",
      // finishStatus: 'finish',
      // alignCenter: false,
    }, r = x, p = m, h = c(null), k = c(null), q = I(() => [...r.sections.filter((o) => !!o).map((o) => {
      const { title: n, description: e } = o;
      return { title: n, description: e };
    }), { title: "完成" }]), F = c(1);
    function _(t, s) {
      if (!t) return !1;
      const { children: o, prop: n } = t;
      return o != null && o.length ? !!o.find((e) => _(e, s)) : n === s;
    }
    function C(t, s) {
      const { sections: o } = r, n = o.findIndex((e) => {
        if (!e) return !1;
        const { fields: a } = e;
        return !!(a != null && a.find((B) => _(B, s)));
      });
      F.value = n + 1, p("focus", t, s);
    }
    return i({
      stepsRef: k,
      formRef: h
    }), (t, s) => {
      const o = A("el-step"), n = A("el-steps");
      return f(), S("div", O, [
        z(n, b({
          class: "steps f-0",
          direction: t.direction,
          active: F.value
        }, { ...y, ...t.stepAttrs }, {
          ref_key: "stepsRef",
          ref: k
        }), {
          default: l(() => [
            (f(!0), S(V, null, $(q.value, (e, a) => (f(), T(o, b({ ref_for: !0 }, e, { key: a }), null, 16))), 128))
          ]),
          _: 1
        }, 16, ["direction", "active"]),
        z(H, b({
          class: "ml-t f-1",
          sections: t.sections
        }, t.formAttrs, {
          onBlur: s[0] || (s[0] = (...e) => p("blur", ...e)),
          onFocus: C,
          onChange: s[1] || (s[1] = (...e) => p("change", ...e)),
          ref_key: "sectionFormRef",
          ref: h
        }), P({
          "head-right": l((e) => [
            d(t.$slots, "head-right-" + (e.section.prop ?? e.index + 1), v(g(e)), void 0, !0)
          ]),
          body: l((e) => [
            d(t.$slots, "body-" + e.section.prop, v(g(e)), void 0, !0)
          ]),
          field: l((e) => [
            d(t.$slots, e.field.prop, v(g(e)), void 0, !0)
          ]),
          _: 2
        }, [
          t.footer ? {
            name: "footer",
            fn: l(() => [
              d(t.$slots, "footer", {}, void 0, !0)
            ]),
            key: "0"
          } : void 0
        ]), 1040, ["sections"])
      ]);
    };
  }
}), L = /* @__PURE__ */ N(E, [["__scopeId", "data-v-65eaf473"]]), M = /* @__PURE__ */ R({
  name: "DemoCenterCompsFormStepForm",
  __name: "index",
  setup(x) {
    let i = D({ id: 0, nc: "这是用户昵称", zy: 0, xm: "张三", partThree: { xjd: "成都" } });
    const m = [
      {
        title: "第一部分",
        prop: "partOne",
        fields: [
          {
            prop: "id",
            label: "用户ID"
          },
          { prop: "nc", label: "昵称" },
          {
            prop: "zy",
            label: "职业",
            type: "select",
            attrs: {
              options: [
                { label: "职业0", value: 0 },
                { label: "职业1", value: 1 }
              ]
            }
          }
        ]
      },
      {
        title: "第二部分",
        explain: "块级设置 {readonly: true}",
        fields: [
          { prop: "xm", label: "姓名", quickAttrs: { pureText: !0, explain: "字段级设置 {pureText: true}" } },
          { prop: "xb", label: "性别", required: !0 },
          { prop: "nl", label: "年龄" }
        ]
      },
      {
        title: "第三部分",
        explain: "块级设置 prop 属性",
        prop: "partThree",
        fields: [
          { prop: "xjd", label: "现居地", quickAttrs: { tips: "字段级的size【el-form-item】" } },
          {
            prop: "ip",
            label: "IP地址",
            quickAttrs: { tips: "控件级的size【el-input】" }
          }
        ]
      },
      {
        title: "第四部分",
        explain: "块级设置 {disabled: true}",
        fields: [
          { prop: "dh", label: "电话" },
          { prop: "ma", label: "密码" },
          {
            prop: "sfzh",
            label: "身份证号",
            attrs: { disabled: !1 },
            quickAttrs: { explain: "设置{disabled: false}" }
          },
          { prop: "zdy", label: "自定义", type: "slot" }
        ]
      }
    ];
    return (y, r) => (f(), T(L, {
      class: "q-page-view",
      modelValue: j(i),
      "onUpdate:modelValue": r[0] || (r[0] = (p) => w(i) ? i.value = p : i = p),
      sections: m
    }, {
      "body-partOne": l(() => r[1] || (r[1] = [
        u("这是第一部分的自定义内容")
      ])),
      "head-right-partThree": l(() => r[2] || (r[2] = [
        u("这是第三部分的Head的插槽，有prop属性：【head-right-partThree】")
      ])),
      "head-right-4": l(() => r[3] || (r[3] = [
        u("这是第四部分的Head的插槽，无prop属性：【head-right-4】")
      ])),
      zdy: l(() => r[4] || (r[4] = [
        u("这是自定义的表单字段")
      ])),
      _: 1
    }, 8, ["modelValue"]));
  }
});
export {
  M as default
};