epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
178 lines (177 loc) • 6.96 kB
JavaScript
import { defineComponent as Q, ref as u, watch as _, openBlock as k, createBlock as j, unref as F, withCtx as X, createElementBlock as Y, Fragment as ee, renderList as ae, nextTick as le } from "vue";
import { a as q } from "./axios-CXDYiOMX.js";
import { a as b } from "./index-B1s67XDZ.js";
import { ElSelect as te, ElOption as oe } from "element-plus";
import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const re = /* @__PURE__ */ Q({
__name: "selectPage",
props: {
modelValue: [String, Number],
placeholder: String,
requestFn: { type: Function, default: () => {
} },
// 可自定义请求函数
valueKey: { type: String, default: "value" },
labelKey: { type: String, default: "label" },
pageSize: { type: Number, default: 20 },
defaultData: { type: Object, default: () => {
} },
componentSchema: { type: Object, default: () => {
} },
sourceDateUrl: { type: String, default: "" }
},
emits: ["update:modelValue", "update:modelValueLabel"],
setup(O, { emit: I }) {
const T = `paginated-select-dropdown-${Math.random().toString(36).slice(2, 8)}`, a = O, z = I, v = u(a.modelValue);
_(
() => a.modelValue,
(e) => {
v.value = e;
}
), _(v, (e) => {
z("update:modelValue", e);
let l = r.value.find((t) => t.value === e);
z("update:modelValueLabel", {
label: l.label || a.defaultData.label,
value: l.value || a.defaultData.value
});
});
const r = u(a.defaultData && Object.keys(a.defaultData).length ? [a.defaultData] : []), m = u(!1), p = u(0), c = u(1), E = u(""), f = u(!1), d = u(null), h = u(null);
function x() {
r.value = [], p.value = 0, c.value = 1, f.value = !1;
}
function $(e = window.location.href) {
const l = {}, t = e.split("?")[1];
return t && t.split("&").forEach((n) => {
const [i, g] = n.split("=");
i && (l[i] = decodeURIComponent(g || ""));
}), l;
}
async function y() {
var l, t, n, i, g, B, C, K, L, U;
if (m.value || f.value) return;
const e = $(o.value.url);
console.log("%c [ urlParams ]-93", "font-size:13px; background:pink; color:#bf2c9f;", e), m.value = !0;
try {
const s = await q({
url: o.value.url.split("?")[0],
method: o.value.method,
data: o.value.body ? JSON.parse(o.value.body) : {},
params: o.value.params ? {
...e,
...JSON.parse(o.value.params),
[`${(t = (l = a == null ? void 0 : a.componentSchema) == null ? void 0 : l.componentProps) == null ? void 0 : t.pageKey}`]: c.value,
[`${(i = (n = a == null ? void 0 : a.componentSchema) == null ? void 0 : n.componentProps) == null ? void 0 : i.searchKey}`]: E.value
} : { ...e },
headers: {
...JSON.parse(o.value.headers),
Authorization: "Bearer " + b.get("Admin-Token"),
lang: b.get("saas-locale") || "zh-CN",
//语言
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
//时区
}
});
if (o.value && o.value.dataPath) {
const W = ((g = o.value) == null ? void 0 : g.dataPath.split(".")).reduce((D, P) => D[P], s.data), A = (B = o.value) == null ? void 0 : B.dataPath.split(".");
A.pop();
const G = A.reduce((D, P) => D[P], s.data);
let N = S(W, o.value.dataKey, o.value.dataValue);
c.value === 1 ? r.value = N : r.value = r.value.concat(N), p.value = G[(K = (C = a == null ? void 0 : a.componentSchema) == null ? void 0 : C.componentProps) == null ? void 0 : K.pageTotalKey];
} else {
let V = S(s.data, o.value.dataKey, o.value.dataValue);
c.value === 1 ? r.value = V : r.value = r.value.concat(V), p.value = s.data[(U = (L = a == null ? void 0 : a.componentSchema) == null ? void 0 : L.componentProps) == null ? void 0 : U.pageTotalKey], console.log("%c [ ]-130", "font-size:13px; background:pink; color:#bf2c9f;", r.value);
}
r.value.length >= p.value && (f.value = !0);
} catch (s) {
console.error("fetch error:", s);
} finally {
m.value = !1;
}
}
const o = u();
function S(e, l, t) {
return e && Object.prototype.toString.call(e) === "[object Array]" ? e.map((n) => n.children && n.children.length ? {
label: n[l],
value: n[t] + "",
children: S(n.children, l, t)
} : {
label: n[l],
value: n[t] + ""
}) : [];
}
async function J() {
var l, t;
let e = await q({
url: a.sourceDateUrl,
method: "get",
params: {
id: (t = (l = a == null ? void 0 : a.componentSchema) == null ? void 0 : l.componentProps) == null ? void 0 : t.dynamicId
},
headers: {
Authorization: "Bearer " + b.get("Admin-Token"),
lang: b.get("saas-locale") || "zh-CN",
//语言
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
//时区
}
});
e.data.code === 200 && (o.value = e.data.data);
}
_(
() => a.sourceDateUrl,
() => {
a.sourceDateUrl && J();
},
{ immediate: !0 }
);
function M(e) {
E.value = e, c.value = 1, x(), y();
}
function H(e) {
e ? (x(), y(), le(() => setTimeout(R, 0))) : Z();
}
function R() {
const e = document.querySelector(`.${T} .el-select-dropdown__wrap`);
e ? (d.value = e, e.addEventListener("scroll", w)) : (h.value = new MutationObserver(() => {
const l = document.querySelector(".paginated-select-dropdown .el-select-dropdown__wrap");
l && (d.value = l, l.addEventListener("scroll", w), h.value.disconnect());
}), h.value.observe(document.body, { childList: !0, subtree: !0 }));
}
function Z() {
var e;
d.value && d.value.removeEventListener("scroll", w), (e = h.value) == null || e.disconnect();
}
function w() {
const e = d.value;
if (!e || m.value || f.value) return;
e.scrollTop + e.clientHeight >= e.scrollHeight - 10 && (c.value++, y());
}
return (e, l) => (k(), j(F(te), {
modelValue: v.value,
"onUpdate:modelValue": l[0] || (l[0] = (t) => v.value = t),
filterable: "",
remote: "",
clearable: "",
placeholder: O.placeholder,
"remote-method": M,
loading: !1,
teleported: !0,
onVisibleChange: H,
"popper-class": T,
style: { width: "100%" }
}, {
default: X(() => [
(k(!0), Y(ee, null, ae(r.value, (t) => (k(), j(F(oe), {
key: t.value,
label: t.label,
value: t.value
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["modelValue", "placeholder"]));
}
}), me = /* @__PURE__ */ ne(re, [["__scopeId", "data-v-177ce516"]]);
export {
me as default
};