epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
194 lines (193 loc) • 7.03 kB
JavaScript
import { defineComponent as W, ref as u, watch as P, openBlock as _, createBlock as x, unref as F, withCtx as Q, 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 d } 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__ */ W({
__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 E = `paginated-select-dropdown-${Math.random().toString(36).slice(2, 8)}`, a = O, B = I, m = u(a.modelValue);
P(
() => a.modelValue,
(e) => {
m.value = e;
}
), P(m, (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] : []
), p = u(!1), f = u(0), c = u(1), C = u(""), h = u(!1), i = u(null), g = u(null);
function K() {
r.value = [], f.value = 0, c.value = 1, h.value = !1;
}
function G(e = window.location.href) {
const t = {}, l = e.split("?")[1];
return l && l.split("&").forEach((n) => {
const [v, y] = n.split("=");
v && (t[v] = decodeURIComponent(y || ""));
}), t;
}
async function b() {
var t, l, n, v, y, L, U, k, z, A;
if (p.value || h.value) return;
const e = G(o.value.url);
p.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,
[`${(v = (n = a == null ? void 0 : a.componentSchema) == null ? void 0 : n.componentProps) == null ? void 0 : v.searchKey}`]: C.value
} : { ...e },
headers: {
...JSON.parse(o.value.headers),
Authorization: "Bearer " + d.get("Admin-Token"),
"X-Tenant-Gray": d.get("X-Tenant-Gray"),
lang: d.get("saas-locale") || "zh-CN",
//语言
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
//时区
}
});
if (o.value && o.value.dataPath) {
const R = ((y = o.value) == null ? void 0 : y.dataPath.split(".")).reduce((T, D) => T[D], s.data), N = (L = o.value) == null ? void 0 : L.dataPath.split(".");
N.pop();
const Z = N.reduce((T, D) => T[D], s.data);
let j = S(
R,
o.value.dataKey,
o.value.dataValue
);
c.value === 1 ? r.value = j : r.value = r.value.concat(j), f.value = Z[(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), f.value = s.data[(A = (z = a == null ? void 0 : a.componentSchema) == null ? void 0 : z.componentProps) == null ? void 0 : A.pageTotalKey];
}
r.value.length >= f.value && (h.value = !0);
} catch (s) {
console.error("fetch error:", s);
} finally {
p.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 X() {
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 " + d.get("Admin-Token"),
"X-Tenant-Gray": d.get("X-Tenant-Gray"),
lang: d.get("saas-locale") || "zh-CN",
//语言
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
//时区
}
});
e.data.code === 200 && (o.value = e.data.data);
}
P(
() => a.sourceDateUrl,
() => {
a.sourceDateUrl && X();
},
{ immediate: !0 }
);
function $(e) {
C.value = e, c.value = 1, K(), b();
}
function J(e) {
e ? (K(), b(), te(() => setTimeout(M, 0))) : H();
}
function M() {
const e = document.querySelector(
`.${E} .el-select-dropdown__wrap`
);
e ? (i.value = e, e.addEventListener("scroll", w)) : (g.value = new MutationObserver(() => {
const t = document.querySelector(
".paginated-select-dropdown .el-select-dropdown__wrap"
);
t && (i.value = t, t.addEventListener("scroll", w), g.value.disconnect());
}), g.value.observe(document.body, { childList: !0, subtree: !0 }));
}
function H() {
var e;
i.value && i.value.removeEventListener("scroll", w), (e = g.value) == null || e.disconnect();
}
function w() {
const e = i.value;
if (!e || p.value || h.value) return;
e.scrollTop + e.clientHeight >= e.scrollHeight - 10 && (c.value++, b());
}
return (e, t) => (_(), x(F(le), {
modelValue: m.value,
"onUpdate:modelValue": t[0] || (t[0] = (l) => m.value = l),
filterable: "",
remote: "",
clearable: "",
placeholder: O.placeholder,
"remote-method": $,
loading: !1,
teleported: !0,
onVisibleChange: J,
"popper-class": E,
style: { width: "100%" }
}, {
default: Q(() => [
(_(!0), Y(ee, null, ae(r.value, (l) => (_(), 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-5540f6af"]]);
export {
me as default
};