general-basic-form 2.0.11 → 2.0.13

package/dist/index.js

@@ -0,0 +1,688 @@
+import { defineComponent as g, inject as v, resolveComponent as c, openBlock as o, createBlock as u, mergeProps as k, withKeys as X, createSlots as x, renderList as z, withCtx as f, resolveDynamicComponent as K, createCommentVNode as b, ref as y, unref as m, resolveDirective as U, withDirectives as D, createElementBlock as P, createVNode as O, createElementVNode as Y, computed as Q, onBeforeUnmount as Z, normalizeStyle as ee, createTextVNode as V, toDisplayString as w, h as te, normalizeProps as ne, guardReactiveProps as oe, Fragment as F, provide as A, renderSlot as j, vShow as re } from "vue";
+import { useRoute as se } from "vue-router";
+const M = {
+  placeholder: "请输入",
+  style: "width: 200px",
+  clearable: !0
+}, ie = {
+  style: "width: 227px",
+  "start-placeholder": "开始日期",
+  "end-placeholder": "结束日期",
+  type: "daterange"
+}, W = {
+  placeholder: "请选择",
+  filterable: !0,
+  clearable: !0,
+  style: "width: 200px"
+}, ae = g({
+  components: {
+    InputArchive: (e) => {
+      const { templateEle: n } = e;
+      return n();
+    }
+  },
+  props: {
+    item: null
+    // null就是any
+  },
+  setup() {
+    const e = v("queryParams", {}), n = v("getList"), t = v("size");
+    return { queryParams: e, getList: n, size: t };
+  },
+  data() {
+    return {
+      inputSetting: {
+        ...M,
+        ...this.item.inputSetting
+      }
+    };
+  },
+  // created() {
+  //   console.log("new", this.item);
+  //   console.log("new", this.inputSetting);
+  // },
+  methods: {
+    currentInputComponent() {
+      return "input-archive";
+    }
+  }
+  // watch: {
+  //   item(val) {
+  //     console.log("item", val);
+  //   },
+  //   size(val) {
+  //     console.log(val);
+  //   },
+  // },
+}), I = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [l, s] of n)
+    t[l] = s;
+  return t;
+};
+function le(e, n, t, l, s, a) {
+  const r = c("el-input");
+  return o(), u(r, k({
+    onKeydown: X(e.getList, ["enter"]),
+    modelValue: e.queryParams[e.item.prop],
+    "onUpdate:modelValue": n[0] || (n[0] = (i) => e.queryParams[e.item.prop] = i),
+    size: e.size
+  }, e.inputSetting), x({ _: 2 }, [
+    z(e.item.template, (i, d) => ({
+      name: d,
+      fn: f(() => [
+        i ? (o(), u(K(e.currentInputComponent()), {
+          key: d,
+          templateEle: i
+        }, null, 8, ["templateEle"])) : b("", !0)
+      ])
+    }))
+  ]), 1040, ["onKeydown", "modelValue", "size"]);
+}
+const T = /* @__PURE__ */ I(ae, [["render", le]]), ue = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, t = v("queryParams", {}), l = v("size"), s = y({
+      ...M,
+      ...n.inputSetting
+    });
+    return (a, r) => {
+      const i = c("el-input-number");
+      return o(), u(i, k({
+        modelValue: m(t)[a.item.prop],
+        "onUpdate:modelValue": r[0] || (r[0] = (d) => m(t)[a.item.prop] = d),
+        size: m(l)
+      }, s.value), null, 16, ["modelValue", "size"]);
+    };
+  }
+}), H = Symbol(), ce = { class: "input-graphic-verification" }, pe = ["src"], me = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, { graphicSrc: t = "", getGraphic: l = () => {
+    } } = n, { formLoading: s, updateFormLoading: a } = v(H), r = async () => {
+      l && !s.value && await l();
+    };
+    return (i, d) => {
+      const _ = U("loading");
+      return D((o(), P("div", ce, [
+        O(T, {
+          item: i.item,
+          class: "input"
+        }, null, 8, ["item"]),
+        Y("img", {
+          class: "graphic",
+          onClick: r,
+          src: m(t)
+        }, null, 8, pe)
+      ])), [
+        [_, m(s)]
+      ]);
+    };
+  }
+});
+const de = /* @__PURE__ */ I(me, [["__scopeId", "data-v-500ec9b0"]]), C = "获取验证码", _e = 60, fe = /* @__PURE__ */ g({
+  __name: "verification-button",
+  props: {
+    getSmscode: { type: Function }
+  },
+  setup(e) {
+    const { getSmscode: n } = e, t = y(C), l = y(null), s = Q(() => t.value === C), a = () => {
+      l && (clearInterval(l.value), l.value = null, t.value = C);
+    }, r = async () => {
+      if (t.value === C)
+        if (t.value = _e, l.value = setInterval(() => {
+          if (Number(t.value) <= 0 || !t.value) {
+            a();
+            return;
+          } else
+            t.value = Number(t.value) - 1;
+        }, 1e3), n)
+          await n() === !1 && a();
+        else
+          return;
+    };
+    return Z(() => {
+      a();
+    }), (i, d) => {
+      const _ = c("el-button");
+      return o(), u(_, {
+        class: "verifiaction-button",
+        style: ee({
+          color: s.value ? "var(--color-primary, #409EFF)" : "var(--text-color-placeholder, #A8ABB2)",
+          cursor: s.value ? "pointer" : "default"
+        }),
+        onClick: r
+      }, {
+        default: f(() => [
+          V(w(s.value ? C : t.value + "s"), 1)
+        ]),
+        _: 1
+      }, 8, ["style"]);
+    };
+  }
+});
+const ye = /* @__PURE__ */ I(fe, [["__scopeId", "data-v-4074e137"]]), ve = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, t = n;
+    return t.template = {
+      append: () => te(ye, {
+        getSmscode: t.getSmscode
+      })
+    }, (l, s) => (o(), u(T, {
+      item: m(t),
+      class: "input"
+    }, null, 8, ["item"]));
+  }
+}), ge = g({
+  components: {
+    slotArchive: (e) => {
+      const { templateEle: n } = e;
+      return n();
+    }
+  },
+  props: {
+    item: null
+    // null就是any
+  },
+  setup() {
+  },
+  data() {
+    return {
+      dividerSetting: {
+        ...this.item.dividerSetting
+      }
+    };
+  },
+  methods: {
+    currentInputComponent() {
+      return "slot-archive";
+    }
+  }
+});
+function he(e, n, t, l, s, a) {
+  const r = c("el-divider");
+  return o(), u(r, ne(oe(e.dividerSetting)), x({ _: 2 }, [
+    z(e.item.template, (i, d) => ({
+      name: d,
+      fn: f(() => [
+        i ? (o(), u(K(e.currentInputComponent()), {
+          key: d,
+          templateEle: i
+        }, null, 8, ["templateEle"])) : b("", !0)
+      ])
+    }))
+  ]), 1040);
+}
+const be = /* @__PURE__ */ I(ge, [["render", he]]), ke = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, t = v("queryParams", {}), l = v("size"), s = y({
+      ...n.radioSetting
+    }), a = y({
+      ...n.radioGroupSetting
+    });
+    return (r, i) => {
+      const d = c("el-radio"), _ = c("el-radio-group");
+      return o(), u(_, k({
+        modelValue: m(t)[r.item.prop],
+        "onUpdate:modelValue": i[0] || (i[0] = (h) => m(t)[r.item.prop] = h),
+        size: m(l)
+      }, a.value), {
+        default: f(() => [
+          (o(!0), P(F, null, z(r.item.option || [], (h) => (o(), u(d, k({
+            size: m(l),
+            label: h.label,
+            key: h.label
+          }, s.value), {
+            default: f(() => [
+              V(w(h.value), 1)
+            ]),
+            _: 2
+          }, 1040, ["size", "label"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["modelValue", "size"]);
+    };
+  }
+}), Se = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, t = v("queryParams", {}), l = v("size"), s = y({
+      ...ie,
+      ...n.datePackerSetting
+    });
+    return (a, r) => {
+      const i = c("el-date-picker");
+      return o(), u(i, k({
+        modelValue: m(t)[a.item.prop],
+        "onUpdate:modelValue": r[0] || (r[0] = (d) => m(t)[a.item.prop] = d),
+        size: m(l)
+      }, s.value), null, 16, ["modelValue", "size"]);
+    };
+  }
+}), Pe = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, t = v("queryParams", {}), l = v("size"), s = y({
+      ...W,
+      ...n.selectSetting
+    });
+    return (a, r) => {
+      const i = c("el-option"), d = c("el-select");
+      return o(), u(d, k({
+        modelValue: m(t)[a.item.prop],
+        "onUpdate:modelValue": r[0] || (r[0] = (_) => m(t)[a.item.prop] = _),
+        size: m(l)
+      }, s.value), {
+        default: f(() => [
+          (o(!0), P(F, null, z(a.item.option || [], (_) => (o(), u(i, {
+            key: _.value,
+            label: _.label,
+            value: _.value
+          }, null, 8, ["label", "value"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["modelValue", "size"]);
+    };
+  }
+}), ze = /* @__PURE__ */ g({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    const { item: n } = e, t = v("queryParams", {}), l = v("size"), s = y({
+      ...W,
+      ...n.selectSetting
+    });
+    return (a, r) => {
+      const i = c("el-cascader");
+      return o(), u(i, k({
+        modelValue: m(t)[a.item.prop],
+        "onUpdate:modelValue": r[0] || (r[0] = (d) => m(t)[a.item.prop] = d),
+        size: m(l),
+        options: a.item.options || []
+      }, s.value), null, 16, ["modelValue", "size", "options"]);
+    };
+  }
+}), $e = g({
+  name: "GeneralBasicForm",
+  components: {
+    Input: T,
+    InputNumber: ue,
+    InputGraphicVerification: de,
+    InputMobileVerification: ve,
+    Divider: be,
+    Radio: ke,
+    DatePicker: Se,
+    Select: Pe,
+    Cascader: ze
+  },
+  props: {
+    showSearch: {
+      // 是否展示所有元素
+      type: Boolean,
+      default: !0
+    },
+    loading: {
+      // 加载动画
+      type: Boolean,
+      default: !1
+    },
+    formOnly: {
+      // 是否只展示表单不展示按钮
+      type: Boolean,
+      default: !1
+    },
+    getList: {
+      // 查找数据调用的函数
+      type: Function,
+      default: () => {
+      }
+    },
+    afterReset: {
+      // 在重置按钮点击完后但还没重新请求时触发的的函数
+      type: Function,
+      default: () => {
+      }
+    },
+    formItem: {
+      // 定义表单的数据
+      type: Array,
+      default: []
+    },
+    size: {
+      // 控制按钮大小
+      type: String,
+      default: "default"
+    },
+    labelWidth: {
+      // 表单文字宽度
+      type: String,
+      default: "90px"
+    },
+    noUrlParameters: {
+      // 不接受和不改变url的参数
+      type: Boolean,
+      default: () => !1
+    },
+    formData: {
+      // 外部传入的表单数据，用于回填
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      formLoading: this.loading || !1
+    };
+  },
+  setup(e) {
+    const { size: n, noUrlParameters: t, getList: l } = e, s = se(), a = y({
+      ...t ? {} : s == null ? void 0 : s.query
+    });
+    return A(
+      /* 注入名 */
+      "queryParams",
+      /* 值 */
+      a
+    ), A(
+      /* 注入名 */
+      "size",
+      /* 值 */
+      n
+    ), A(
+      /* 注入名 */
+      "getList",
+      /* 值 */
+      l
+    ), {
+      queryParams: a
+    };
+  },
+  watch: {
+    formData: {
+      handler(e) {
+        this.queryParams = {
+          ...this.noUrlParameters ? {} : this.queryParams,
+          ...e
+        };
+      },
+      // watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
+      // https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers
+      immediate: !0
+      // deep: true,
+    },
+    loading(e) {
+      this.formLoading !== e && (this.formLoading = e);
+    },
+    formLoading(e) {
+      this.loading !== e && this.$emit("update:loading", e);
+    }
+  },
+  provide() {
+    return {
+      // 显式提供一个计算属性
+      [H]: {
+        formLoading: Q(() => this.formLoading),
+        updateFormLoading: (e) => {
+          this.formLoading = e;
+        }
+      }
+    };
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      var t;
+      const e = { page: 1, limit: 10 }, n = {
+        ...(t = this.$route) == null ? void 0 : t.query,
+        ...this.queryParams,
+        ...e
+      };
+      this.noUrlParameters || this.$router.push({
+        query: { ...n }
+      }), this.getList({
+        ...n
+      });
+    },
+    /** 重置按钮操作 */
+    async resetQuery() {
+      var n;
+      this.$refs.queryFormRef.resetFields();
+      const e = { page: 1 };
+      this.noUrlParameters || await this.$router.push({
+        query: { ...e }
+      }), this.queryParams = {
+        ...this.noUrlParameters ? {} : (n = this.$route) == null ? void 0 : n.query
+      }, this.afterReset(), this.handleQuery();
+    }
+  }
+});
+function qe(e, n, t, l, s, a) {
+  const r = c("Input"), i = c("Radio"), d = c("Select"), _ = c("Divider"), h = c("Cascader"), $ = c("DatePicker"), G = c("InputNumber"), B = c("InputMobileVerification"), N = c("InputGraphicVerification"), S = c("el-form-item"), L = c("el-button"), R = c("el-form"), E = U("loading");
+  return D((o(), u(R, k({
+    model: e.queryParams,
+    ref: "queryFormRef",
+    inline: "",
+    "label-position": "left",
+    "label-width": e.labelWidth
+  }, e.$attrs), {
+    default: f(() => [
+      (o(!0), P(F, null, z(e.formItem, (p) => (o(), u(S, {
+        label: p.label,
+        prop: p.prop,
+        key: p.prop,
+        rules: p.rules
+      }, {
+        default: f(() => [
+          p.type === "input" ? (o(), u(r, {
+            key: 0,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "radio" ? (o(), u(i, {
+            key: 1,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "select" ? (o(), u(d, {
+            key: 2,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "divider" ? (o(), u(_, {
+            key: 3,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "cascader" ? (o(), u(h, {
+            key: 4,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "date-picker" ? (o(), u($, {
+            key: 5,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "input-number" ? (o(), u(G, {
+            key: 6,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "input-mobile-verification" ? (o(), u(B, {
+            key: 7,
+            item: p
+          }, null, 8, ["item"])) : b("", !0),
+          p.type === "input-graphic-verification" ? (o(), u(N, {
+            item: p,
+            key: p.key
+          }, null, 8, ["item"])) : b("", !0)
+        ]),
+        _: 2
+      }, 1032, ["label", "prop", "rules"]))), 128)),
+      j(e.$slots, "default"),
+      e.formOnly ? b("", !0) : (o(), u(S, { key: 0 }, {
+        default: f(() => [
+          D((o(), u(L, {
+            type: "primary",
+            size: e.size,
+            onClick: e.handleQuery
+          }, {
+            default: f(() => [
+              V("查询")
+            ]),
+            _: 1
+          }, 8, ["size", "onClick"])), [
+            [E, e.formLoading]
+          ]),
+          O(L, {
+            size: e.size,
+            onClick: e.resetQuery
+          }, {
+            default: f(() => [
+              V("重置")
+            ]),
+            _: 1
+          }, 8, ["size", "onClick"])
+        ]),
+        _: 1
+      })),
+      j(e.$slots, "behind-the-button")
+    ]),
+    _: 3
+  }, 16, ["model", "label-width"])), [
+    [re, e.showSearch]
+  ]);
+}
+const Ve = /* @__PURE__ */ I($e, [["render", qe]]), Ie = ["infinite-scroll-disabled"], Le = /* @__PURE__ */ g({
+  __name: "InfiniteScrollList",
+  props: {
+    search: {
+      type: Function,
+      required: !0
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    extra: {
+      type: Function,
+      required: !1
+    }
+  },
+  setup(e, { expose: n }) {
+    const t = e, { search: l, id: s, name: a, extra: r } = t, i = y([]), d = y(1), _ = y(!1), h = y([]), $ = y(!1), G = () => {
+      d.value = 1, i.value = [], h.value = [], _.value = !1;
+    }, B = async () => {
+      if ($.value || _.value)
+        return;
+      $.value = !0;
+      const S = await l(d.value);
+      S && S.length > 0 ? (i.value = [...i.value, ...S], d.value += 1) : _.value = !0, $.value = !1;
+    }, N = Q(
+      () => i.value.filter((S) => h.value.includes(S[s]))
+    ) || {};
+    return n({ reset: G, loadList: B, selectInfo: N }), (S, L) => {
+      const R = c("el-checkbox"), E = c("el-checkbox-group"), p = U("infinite-scroll"), J = U("loading");
+      return D((o(), u(E, k({
+        modelValue: h.value,
+        "onUpdate:modelValue": L[0] || (L[0] = (q) => h.value = q)
+      }, t), {
+        default: f(() => [
+          D((o(), P("ul", {
+            class: "list",
+            "infinite-scroll-disabled": _.value
+          }, [
+            (o(!0), P(F, null, z(i.value, (q) => (o(), P("li", {
+              key: q[m(s)],
+              class: "list-item"
+            }, [
+              O(R, {
+                label: q[m(s)],
+                class: "checkbox"
+              }, {
+                default: f(() => [
+                  V(w(q[m(a)]) + " " + w(m(r) && m(r)(q)), 1)
+                ]),
+                _: 2
+              }, 1032, ["label"])
+            ]))), 128))
+          ], 8, Ie)), [
+            [p, B]
+          ])
+        ]),
+        _: 1
+      }, 16, ["modelValue"])), [
+        [J, $.value]
+      ]);
+    };
+  }
+});
+const Ce = /* @__PURE__ */ I(Le, [["__scopeId", "data-v-fda8f794"]]), De = /* @__PURE__ */ g({
+  __name: "Descriptions",
+  props: {
+    formData: {
+      type: Object,
+      required: !0
+    },
+    descriptionsItemProps: {
+      type: Object,
+      required: !1
+    },
+    formItem: {
+      type: Array,
+      required: !0
+    }
+  },
+  setup(e) {
+    const n = e;
+    return (t, l) => {
+      const s = c("el-descriptions-item"), a = c("el-descriptions");
+      return o(), u(a, k({
+        column: 1,
+        border: "",
+        class: "form-width"
+      }, n), {
+        default: f(() => [
+          (o(!0), P(F, null, z(n.formItem, (r, i) => (o(), u(s, k({
+            key: r.prop,
+            label: r.label
+          }, n.descriptionsItemProps), {
+            default: f(() => [
+              V(w(r.render ? r.render({
+                row: e.formData,
+                $index: i
+              }) : e.formData[r.prop]), 1)
+            ]),
+            _: 2
+          }, 1040, ["label"]))), 128))
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+}), Be = Ve, Ue = Ce, Ge = De;
+export {
+  Ge as VDescriptions,
+  Be as VGeneralBasicForm,
+  Ue as VInfiniteScrollList
+};