epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
178 lines (177 loc) • 6.78 kB
JavaScript
import { defineComponent as Q, ref as u, watch as _, openBlock as O, createBlock as x, unref as F, withCtx as X, createElementBlock as Y, Fragment as ee, renderList as ae, nextTick as te } from "vue";
import { a as q } from "./index-BNoHh0sx.js";
import { a as b } from "./index-B1s67XDZ.js";
import { ElSelect as le, 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(T, { emit: I }) {
const E = `paginated-select-dropdown-${Math.random().toString(36).slice(2, 8)}`, a = T, B = I, v = u(a.modelValue);
_(
() => a.modelValue,
(e) => {
v.value = e;
}
), _(v, (e) => {
B("update:modelValue", e);
let t = r.value.find((l) => l.value === e);
B("update:modelValueLabel", {
label: t.label || a.defaultData.label,
value: t.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), C = u(""), f = u(!1), d = u(null), h = u(null);
function K() {
r.value = [], p.value = 0, c.value = 1, f.value = !1;
}
function $(e = window.location.href) {
const t = {}, l = e.split("?")[1];
return l && l.split("&").forEach((n) => {
const [i, g] = n.split("=");
i && (t[i] = decodeURIComponent(g || ""));
}), t;
}
async function y() {
var t, l, n, i, g, L, U, k, z, A;
if (m.value || f.value) return;
const e = $(o.value.url);
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),
[`${(l = (t = a == null ? void 0 : a.componentSchema) == null ? void 0 : t.componentProps) == null ? void 0 : l.pageKey}`]: c.value,
[`${(i = (n = a == null ? void 0 : a.componentSchema) == null ? void 0 : n.componentProps) == null ? void 0 : i.searchKey}`]: C.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), N = (L = o.value) == null ? void 0 : L.dataPath.split(".");
N.pop();
const G = N.reduce((D, P) => D[P], s.data);
let j = S(W, o.value.dataKey, o.value.dataValue);
c.value === 1 ? r.value = j : r.value = r.value.concat(j), p.value = G[(k = (U = a == null ? void 0 : a.componentSchema) == null ? void 0 : U.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[(A = (z = a == null ? void 0 : a.componentSchema) == null ? void 0 : z.componentProps) == null ? void 0 : A.pageTotalKey];
}
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, t, l) {
return e && Object.prototype.toString.call(e) === "[object Array]" ? e.map((n) => n.children && n.children.length ? {
label: n[t],
value: n[l] + "",
children: S(n.children, t, l)
} : {
label: n[t],
value: n[l] + ""
}) : [];
}
async function J() {
var t, l;
let e = await q({
url: a.sourceDateUrl,
method: "get",
params: {
id: (l = (t = a == null ? void 0 : a.componentSchema) == null ? void 0 : t.componentProps) == null ? void 0 : l.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) {
C.value = e, c.value = 1, K(), y();
}
function H(e) {
e ? (K(), y(), te(() => setTimeout(R, 0))) : Z();
}
function R() {
const e = document.querySelector(`.${E} .el-select-dropdown__wrap`);
e ? (d.value = e, e.addEventListener("scroll", w)) : (h.value = new MutationObserver(() => {
const t = document.querySelector(".paginated-select-dropdown .el-select-dropdown__wrap");
t && (d.value = t, t.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, t) => (O(), x(F(le), {
modelValue: v.value,
"onUpdate:modelValue": t[0] || (t[0] = (l) => v.value = l),
filterable: "",
remote: "",
clearable: "",
placeholder: T.placeholder,
"remote-method": M,
loading: !1,
teleported: !0,
onVisibleChange: H,
"popper-class": E,
style: { width: "100%" }
}, {
default: X(() => [
(O(!0), Y(ee, null, ae(r.value, (l) => (O(), x(F(oe), {
key: l.value,
label: l.label,
value: l.value
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["modelValue", "placeholder"]));
}
}), me = /* @__PURE__ */ ne(re, [["__scopeId", "data-v-849e6326"]]);
export {
me as default
};