@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,650 lines (1,648 loc) • 61.6 kB
JavaScript
var he = Object.defineProperty;
var we = (s, e, t) => e in s ? he(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var N = (s, e, t) => we(s, typeof e != "symbol" ? e + "" : e, t);
import { getCustomStyle as te, getCustomClass as ne, excludeProperties as ye, EVENT_PROPERTY_TAB_IDS as Ce, withInstall as be } from "../../components/common/index.esm.js";
import Ie, { listViewProps as Ve, FListViewTable as Se } from "../../components/list-view/index.esm.js";
import { resolveAppearance as xe, createPropsResolver as oe, getPropsResolverGenerator as le, createCollectionBindingResolver as Me } from "../../components/dynamic-resolver/index.esm.js";
import { ref as V, computed as $, createVNode as a, Fragment as q, watch as Te, withModifiers as Ee, withDirectives as ke, vModelText as Pe, createTextVNode as j, defineComponent as ae, inject as X, onMounted as re } from "vue";
import { DgControl as G, canvasChanged as Fe, refreshCanvas as Re, useDesignerComponent as ce } from "../../components/designer-canvas/index.esm.js";
import { useFilter as Ne, useIdentify as Be, useHierarchy as Ue, useGroupData as $e, useDataView as De, useSelection as _e, useRow as Ae, useEdit as Oe, useVisualDataBound as Le, useVisualDataCell as je, useVisualDataRow as Ge, useVisualGroupRow as He, useVisualSummaryRow as qe, useVisualData as We } from "../../components/data-view/index.esm.js";
import { LocaleService as ze } from "../../components/locale/index.esm.js";
import { FCheckbox as J } from "../../components/checkbox/index.esm.js";
import { cloneDeep as Ye } from "lodash-es";
function Ke(s, e) {
function t(o) {
const i = [];
let d = o.nextNode();
for (; d; )
i.push(d), d = o.nextNode();
return i;
}
function n(o, i) {
const d = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
return t(d).map((u) => ({ textNode: u, text: (u.textContent || "").toLocaleLowerCase() })).map(({ textNode: u, text: v }) => {
const w = [];
let y = 0;
for (; y < v.length; ) {
const I = v.indexOf(i, y);
if (I === -1)
break;
w.push(I), y = I + i.length;
}
return w.map((I) => {
const C = new Range();
return C.setStart(u, I), C.setEnd(u, I + i.length), C;
});
}).flat();
}
function l(o) {
if (!CSS.highlights || (CSS.highlights.clear(), !o || !e))
return;
const i = n(e.value, o.toLocaleLowerCase()), d = new Highlight(...i);
CSS.highlights.set("search-result", d);
}
return { search: l };
}
function ie(s, e, t, n, l, o, i, d, r, m) {
const c = V(s.size), u = V(s.textField), v = V(s.titleField), w = V(s.disableField), y = $(() => {
var h, E;
return ((h = s.selection) == null ? void 0 : h.multiSelect) && ((E = s.selection) == null ? void 0 : E.showCheckbox);
}), {
onMouseenterItem: I,
onMouseoverItem: C,
onMouseoutItem: b
} = o, {
getKey: S,
listViewItemClass: P,
listViewItemStyle: k,
onCheckItem: B,
onClickItem: T
} = i, U = $(() => {
const h = {
"text-overflow": "ellipsis",
overflow: "hidden",
"white-space": "nowrap"
};
return s.itemClass ? h : {
margin: c.value === "small" ? "0.25rem 0" : "8px 0",
...h
};
});
function M(h, E, F) {
return h.checked = d.findIndexInSelectedItems(h) > -1, a("li", {
class: P(h, E),
id: S(h, E),
key: S(h, E),
style: k(h, E),
onClick: (R) => T(h, E, R),
onMouseenter: (R) => I(R, h, E),
onMouseover: (R) => C(R, h, E),
onMouseout: (R) => b(R, h, E)
}, [y.value && a("div", {
class: "f-list-select",
onClick: (R) => R.stopPropagation()
}, [a(J, {
id: "list-" + S(h, E),
customClass: "listview-checkbox float-left",
disabled: h[w.value],
checked: h.checked,
"onUpdate:checked": (R) => h.checked = R,
onChange: (R) => {
B(h, E, !R.checked);
}
}, null)]), a("div", {
class: "f-list-content"
}, [a("div", {
class: s.itemContentClass,
style: U.value,
title: h.raw[v.value] || h.raw[u.value]
}, [h.raw[u.value]])])]);
}
return {
renderItem: M
};
}
function Xe(s, e, t, n, l, o, i, d, r, m) {
const c = V(s.multiSelect), u = V(s.disableField), v = V(s.textField), {
onMouseenterItem: w,
onMouseoverItem: y,
onMouseoutItem: I
} = o, {
getKey: C,
listViewItemClass: b,
listViewItemStyle: S,
onCheckItem: P,
onClickItem: k,
updateSelectedItems: B
} = i;
function T(M, h, E) {
return s.contentTemplate ? a(q, null, [s.contentTemplate({
item: M.raw,
index: h,
selectedItem: E
})]) : e.slots.content ? a(q, null, [e.slots.content && e.slots.content({
item: M.raw,
index: h,
selectedItem: E
})]) : a("div", {
style: "margin: 10px 0;"
}, [M.raw[v.value || "name"]]);
}
function U(M, h, E) {
return a("li", {
class: b(M, h),
id: C(M, h),
key: C(M, h),
style: S(M, h),
onClick: (F) => k(M, h, F),
onMouseenter: (F) => w(F, M, h),
onMouseover: (F) => y(F, M, h),
onMouseout: (F) => I(F, M, h)
}, [c.value && a("div", {
class: "f-list-select",
onClick: (F) => F.stopPropagation()
}, [a(J, {
id: "list-" + C(M, h),
customClass: "listview-checkbox",
disabled: M[u.value],
checked: M.checked,
"onUpdate:checked": (F) => M.checked = F,
onChange: (F) => {
P(M, h, !F.checked), B();
}
}, null)]), a("div", {
class: "f-list-content"
}, [T(M, h, E)])]);
}
return {
renderItem: U
};
}
function Je(s, e, t, n, l, o, i, d, r, m) {
const c = V(s.multiSelect), u = V(s.disableField), v = V(s.textField), {
onMouseenterItem: w,
onMouseoverItem: y,
onMouseoutItem: I
} = o, {
getKey: C,
listViewItemClass: b,
onCheckItem: S,
onClickItem: P
} = i, {
dragstart: k,
dragenter: B,
dragover: T,
dragend: U
} = n, {
removeItem: M
} = r, h = $(() => ({
margin: c.value ? "10px 0" : "10px 0px 10px 14px"
}));
function E(g, f = "") {
const x = g.target;
x.title = x.scrollWidth > x.clientWidth ? f : "";
}
function F(g) {
return a("div", {
style: h.value,
onMouseenter: (f) => E(f, g.raw[v.value || "name"])
}, [g.raw[v.value || "name"]]);
}
function R() {
return e.slots.itemContent ? e.slots.itemContent : F;
}
const A = R();
function O(g, f, x) {
return a("li", {
class: b(g, f),
id: C(g, f),
key: C(g, f),
onClick: (p) => P(g, f, p),
onMouseenter: (p) => w(p, g, f),
onMouseover: (p) => y(p, g, f),
onMouseout: (p) => I(p, g, f),
draggable: "true",
onDragstart: (p) => k(p, g, f),
onDragenter: (p) => B(p, f),
onDragend: (p) => U(p, g),
onDragover: (p) => T(p)
}, [c.value && a("div", {
class: "f-list-select",
onClick: (p) => p.stopPropagation()
}, [a(J, {
id: "list-" + C(g, f),
customClass: "listview-checkbox",
disabled: g[u.value],
checked: g.checked,
"onUpdate:checked": (p) => g.checked = p,
onChange: (p) => S(g, f, !p.checked)
}, null)]), a("div", {
class: "f-list-content"
}, [A(g)]), s.allowDelete && a("div", {
class: "f-list-remove",
onClick: (p) => {
p.stopPropagation(), M(f);
}
}, [a("div", {
class: "f-list-remove-icon"
}, [a("i", {
class: "f-icon f-icon-remove_face"
}, null)])]), a("div", {
class: "f-list-handle"
}, [a("div", null, [a("i", {
class: "f-icon f-icon-drag-vertical"
}, null)])])]);
}
return {
renderItem: O
};
}
function Qe(s, e, t, n, l, o, i, d, r, m) {
var C;
const c = V(((C = s.group) == null ? void 0 : C.groupFields) || []), {
collpaseGroupIconClass: u
} = l, {
toggleGroupRow: v
} = m;
function w(b, S) {
b.stopPropagation(), S.collapse = !S.collapse, t.value = v(S.collapse ? "collapse" : "expand", S, t.value);
}
function y(b, S, P) {
return e.slots.group ? a(q, null, [e.slots.content && e.slots.group({
item: b.raw,
index: S,
selectedItem: P
})]) : a("div", {
class: "f-navlookup-recentHeader",
onClick: (k) => w(k, b)
}, [a("div", {
class: "fv-grid-group-row-icon"
}, [a("span", {
class: u(b)
}, null)]), a("div", {
class: "f-navlookup-recommandLabel"
}, [b.raw[c.value[b.layer]]])]);
}
function I(b, S, P) {
return b.layer > -1 && y(b, S, P);
}
return {
renderItem: I
};
}
function Ze(s, e, t, n) {
const { dataView: l } = t, { updateSelectedItems: o } = n;
function i(d) {
if (d > -1 && d < l.value.length) {
if (s != null && s.checkBeforeRemoveItem && !s.checkBeforeRemoveItem(l.value[d]))
return;
const r = l.value.splice(d, 1);
o(), e.emit("removeItem", r[0]);
}
}
return { removeItem: i };
}
function et(s, e, t, n, l, o, i, d, r, m) {
const c = V(s.view), u = V(s.view === "CardView"), v = V({}), w = Ze(s, e, n, r), y = $(() => ({
"f-list-view-group": !0,
"f-list-view-group-multiselect": s.multiSelect,
"d-flex": u.value,
"flex-wrap": u.value
})), I = $(() => !!t.value && t.value.length > 0), C = $(() => t.value.length === 0);
$(() => C.value && !e.slots.empty);
function b() {
return c.value === "SingleView" ? ie : c.value === "DraggableView" ? Je : (c.value === "ContentView" || c.value === "CardView") && (s.contentTemplate || e.slots.content) ? Xe : ie;
}
const S = b(), {
renderItem: P
} = S(s, e, t, m, l, o, r, i, w, d), {
renderItem: k
} = Qe(s, e, t, m, l, o, r, i, w, d), B = [P, k];
function T() {
return t.value.filter((h) => h.visible !== !1).map((h, E) => B[h.type](h, E, v));
}
function U() {
return a("div", {
class: "f-list-view-emptydata",
style: "margin: 0 auto;"
}, [a("p", {
class: "f-empty-title"
}, [s.emptyTemplate ? s.emptyTemplate() : e.slots.empty ? e.slots.empty() : ze.getLocaleValue("listView.emptyMessage")])]);
}
function M() {
return a("ul", {
class: y.value,
style: "list-style: none;"
}, [I.value && T(), C.value && U()]);
}
return {
renderListArea: M
};
}
function tt(s, e, t) {
function n() {
return e.slots.header && a("div", {
class: "f-list-view-header"
}, [e.slots.header()]);
}
return {
renderHeader: n
};
}
function se(s, e, t) {
const n = V(s.headerClass), l = V(s.placeholder), o = V(""), i = $(() => !o.value), d = $(() => !!o.value);
function r(v) {
o.value = "";
}
Te(o, (v) => {
s.enableHighlightSearch && t.search(v), e.emit("afterSearch", v);
});
const m = $(() => {
const v = {
"form-group": !0,
"farris-form-group": !0
};
return n.value && n.value.split(" ").reduce((y, I) => (y[I] = !0, y), v), v;
});
function c(v) {
}
function u() {
return a("div", {
class: "f-list-view-header",
onClick: Ee(() => c, ["prevent", "stop"])
}, [a("div", {
class: m.value
}, [a("div", {
class: "farris-input-wrap"
}, [a("div", {
class: "f-cmp-inputgroup"
}, [a("div", {
class: "input-group f-state-editable"
}, [ke(a("input", {
class: "form-control f-utils-fill text-left",
"onUpdate:modelValue": (v) => o.value = v,
name: "input-group-value",
type: "text",
placeholder: l.value,
autocomplete: "off"
}, null), [[Pe, o.value]]), a("div", {
class: "input-group-append"
}, [d.value && a("span", {
class: "input-group-text input-group-clear",
onClick: (v) => r()
}, [a("i", {
class: "f-icon f-icon-close-circle"
}, null)]), i.value && a("span", {
class: "input-group-text"
}, [a("span", {
class: "f-icon f-icon-search"
}, null)])])])])])])]);
}
return {
renderHeader: u
};
}
function nt() {
const s = V(""), e = V(-1), t = V(""), n = V(-1), l = V(!1);
function o(u, v, w) {
n.value = w;
}
function i(u, v, w) {
l.value || (n.value = w);
}
function d(u, v, w) {
n.value = -1;
}
function r() {
l.value = !0;
}
function m() {
l.value = !1;
}
function c() {
e.value = -1, s.value = "";
}
return {
activeIndex: e,
focusedItemId: t,
hoverIndex: n,
clearActiveItem: c,
onMouseenterItem: o,
onMouseoverItem: i,
onMouseoutItem: d,
resumeHover: m,
suspendHover: r
};
}
function it(s, e, t, n, l) {
const o = V(s.idField), { dataView: i } = t, d = V(-1), r = V(!1), { activeIndex: m, focusedItemId: c, hoverIndex: u, resumeHover: v, suspendHover: w } = n;
let y, I = 0, C = 0, b = null, S = null;
const P = 10, k = 50;
function B(g) {
if (!g)
return null;
const { overflowY: f } = getComputedStyle(g);
return f === "auto" || f === "scroll" ? g : B(g.parentElement);
}
function T(g, f) {
S && clearInterval(S), S = window.setInterval(() => {
f === "up" ? g.scrollTop -= P : g.scrollTop += P;
}, 16);
}
function U() {
S && (clearInterval(S), S = null);
}
function M(g) {
const f = g.target;
if (b || (b = B(f)), !b) {
U();
return;
}
const x = b.getBoundingClientRect(), p = g.clientY, _ = p - x.top, D = x.bottom - p;
_ < k && b.scrollTop > 0 ? T(b, "up") : D < k && b.scrollTop < b.scrollHeight - b.clientHeight ? T(b, "down") : U();
}
function h(g, f) {
const x = g - I, p = f - C;
y.style.left = parseInt(y.style.left) + x + "px", y.style.top = parseInt(y.style.top) + p + "px", I = g, C = f;
}
function E(g) {
const { left: f, top: x } = g.getBoundingClientRect(), p = g.cloneNode(!0);
return p.className = p.className + " f-listview-drag-moving", p.style.cssText = `
position:absolute;
left:${f}px;
top:${document.documentElement.scrollTop ? x + document.documentElement.scrollTop : x}px;
z-index: 999999;
pointer-events: none;
border-radius: 10px;
margin: 4px 2px;
display: flex;
align-items: center;
float: none;
text-align: initial;
width:${getComputedStyle(g).width};
height:${getComputedStyle(g).height};
`, p.children[0].style.cssText = "padding: 0 0 0 14px", p.children[0].children[0].style.cssText = `
margin: 10px 0px 10px 14px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
`, p.children[1].style.cssText = "flex:1 1 auto; width:100%", p.children[2].style.cssText = "padding: 0 14px 0 0", p.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(p), p;
}
function F(g, f, x) {
if (g.stopPropagation(), w(), f) {
if (y = E(g.target), g.dataTransfer) {
const p = new Image();
p.src = "", g.dataTransfer.setDragImage(p, 0, 0);
}
I = g.pageX, C = g.pageY, setTimeout(() => {
d.value = x, r.value = !0, f.moving = !0;
});
}
}
function R(g, f) {
if (g.preventDefault(), d.value !== f && d.value !== -1) {
const x = i.value[d.value], p = l.value[d.value];
x && p && (i.value.splice(d.value, 1), i.value.splice(f, 0, x), l.value.splice(d.value, 1), l.value.splice(f, 0, p), l.value.forEach((_, D) => {
_.index = D, _.raw.__fv_index__ = D;
}), d.value = f, h(g.pageX, g.pageY));
}
}
function A(g) {
g.preventDefault(), g.dataTransfer && (g.dataTransfer.dropEffect = "move"), h(g.pageX, g.pageY), M(g);
}
function O(g, f) {
var p, _;
U(), b = null, f && (f.moving = !1, y && (document.body.removeChild(y), y = null)), i.value.forEach((D, L) => {
D.__fv_index__ = L;
}), l.value.forEach((D, L) => {
D.index = L, D.raw && (D.raw.__fv_index__ = L);
}), r.value = !1, v();
const x = ((p = f.raw) == null ? void 0 : p.__fv_index__) ?? 0;
u.value = x, m.value = x, c.value = (_ = f.raw) == null ? void 0 : _[o.value], e.emit("change", i.value), e.emit("activeChange", [f.raw]);
}
return {
dragstart: F,
dragenter: R,
dragover: A,
dragend: O,
isDragging: r
};
}
function st(s, e, t, n, l, o) {
var O, g;
const i = V(s.idField), d = V(s.disableField), r = V(s.draggable);
V(s.itemClass);
const m = V(((O = s.selection) == null ? void 0 : O.multiSelect) ?? !1), c = V(((g = s.selection) == null ? void 0 : g.multiSelectMode) || "DependOnCheck"), { isDragging: u } = n, { activeIndex: v, focusedItemId: w, hoverIndex: y } = l, { clearSelection: I, getSelectedItems: C, toggleSelectItem: b, currentSelectedDataId: S, multiSelectOnlyOnCheck: P } = o, k = V(C()), B = (f) => k.value.length === 0 ? !1 : k.value.some((x) => {
let p = "";
return x.data ? p = x.data[i.value] : p = x[i.value], p === f;
});
function T() {
k.value = C();
}
function U(f, x) {
return f.raw[i.value] != null ? f.raw[i.value] + "_" + x : "";
}
function M(f, x) {
const p = {
"f-list-view-group-item": !0,
"f-list-view-draggable-item": r.value,
"f-un-click": !f.checked,
"f-un-select": !!f.raw[d.value],
"f-listview-active": (
// 多选
m.value && B(U(f, x)) && s.showActiveWhenMultiSelect || // 单选
!m.value && f.raw[i.value] === S.value || m.value && !s.showActiveWhenMultiSelect && f.raw[i.value] === S.value
),
"f-listview-hover": !u.value && x === y.value,
moving: !!f.moving
};
if (typeof s.itemClass == "string")
return ne(p, s.itemClass);
if (typeof s.itemClass == "function") {
const _ = s.itemClass(f);
return ne(p, _);
}
return p;
}
function h(f, x) {
const p = {};
if (typeof s.itemStyle == "string")
return te(p, s.itemStyle);
if (typeof s.itemStyle == "function") {
const _ = s.itemStyle(f);
return te(p, _);
}
return p;
}
const E = $(() => !m.value);
function F(f, x, p) {
f.checked = p, !f.raw[d.value] && (E.value && (w.value = f.raw[i.value]), b(f));
}
const R = $(() => !m.value || m.value && c.value === "OnCheckAndClick");
function A(f, x, p) {
if (f.raw[d.value]) {
p == null || p.preventDefault(), p == null || p.stopPropagation();
return;
}
S.value = f.raw[i.value], w.value = f.raw[i.value], v.value = x, R.value && (b(f), T()), e.emit("clickItem", { data: k.value, index: x, dataItem: f.raw }), e.emit("activeChange", k.value);
}
return {
getKey: U,
selectedItems: k,
listViewItemClass: M,
listViewItemStyle: h,
updateSelectedItems: T,
onCheckItem: F,
onClickItem: A
};
}
const z = /* @__PURE__ */ new Map([
["appearance", xe]
]), ot = "root-viewmodel";
function lt(s, e) {
const {
formSchemaUtils: t,
designViewModelUtils: n
} = e;
function l(c) {
return {
id: `${c.componentId}-component-viewmodel`,
code: `${c.componentId}-component-viewmodel`,
name: c.componentName,
bindTo: c.bindTo,
parent: ot,
fields: [],
commands: [],
states: [],
enableValidation: !0
};
}
function o(c) {
const u = s.getSchemaByType("component-ref");
return Object.assign(u, {
id: `${c.componentId}-component-ref`,
component: `${c.componentId}-component`
}), u;
}
function i(c, u, v) {
var C, b, S, P;
const w = (b = (C = u == null ? void 0 : u.parentComponentInstance) == null ? void 0 : C.schema) == null ? void 0 : b.type, y = (P = (S = t.getFormSchema()) == null ? void 0 : S.module) == null ? void 0 : P.templateId;
if (["double-list-template", "tree-list-template", "list-template"].includes(y))
return c;
const I = [G["content-container"].type, G["response-layout-item"].type, G["splitter-pane"].type, G.drawer.type];
if (w && I.includes(w)) {
const k = s.getSchemaByType(
"section",
{
parentComponentInstance: u.parentComponentInstance,
mainTitle: u.componentName
},
e
);
if (k && k.contents && k.contents.length) {
const B = k.contents[0];
return B.contents = [c], k;
}
}
return c;
}
function d(c) {
var y, I, C;
const u = s.getSchemaByType("list-view");
let v = !1;
const w = (C = (I = (y = c.parentComponentInstance) == null ? void 0 : y.schema) == null ? void 0 : I.appearance) == null ? void 0 : C.class;
return w && w.includes("f-page-main") && (v = !0), Object.assign(u, {
id: c.componentId + "-listView",
appearance: {
class: v ? "" : "f-grid-is-sub"
},
type: "list-view",
dataSource: c.dataSource || "",
columns: [
{ field: "name", title: "", dataType: "string" }
],
pagination: {
enable: !1
}
}), [u];
}
function r(c) {
var I, C, b;
const u = s.getSchemaByType("component"), v = d(c);
let w = !1;
const y = (b = (C = (I = c.parentComponentInstance) == null ? void 0 : I.schema) == null ? void 0 : C.appearance) == null ? void 0 : b.class;
return y && y.includes("f-page-main") && (w = !0), Object.assign(u, {
id: `${c.componentId}-component`,
viewModel: `${c.componentId}-component-viewmodel`,
componentType: c.componentType,
contents: v,
appearance: {
class: w ? "f-struct-wrapper f-utils-fill-flex-column" : ""
}
}), u;
}
function m(c) {
const u = o(c), v = r(c), w = l(c), y = t.getFormSchema();
return y.module.viewmodels.push(w), y.module.components.push(v), n.assembleDesignViewModel(), i(u, c);
}
return { createComponent: m };
}
function Y(s, e, t, n) {
var o, i, d, r, m, c;
const l = t.parentComponentInstance;
if (l && n) {
const u = Math.random().toString(36).slice(2, 6), v = {
componentId: `list-view-${u}`,
componentName: ((o = t.bindingSourceContext) == null ? void 0 : o.entityTitle) || ((d = (i = t.bindingSourceContext) == null ? void 0 : i.bindingEntity) == null ? void 0 : d.name) || `列表-${u}`,
componentType: "list-view",
parentContainerId: l.schema.id,
parentComponentInstance: l,
// editable: true,
bindTo: ((r = t.bindingSourceContext) == null ? void 0 : r.bindTo) || "",
dataSource: (c = (m = t.bindingSourceContext) == null ? void 0 : m.bindingEntity) == null ? void 0 : c.label
// selectedFields: context.bindingSourceContext?.bindingEntityFields
}, { createComponent: w } = lt(s, n);
return w(v);
} else
return e;
}
const at = "https://json-schema.org/draft/2020-12/schema", rt = "https://farris-design.gitee.io/list-view.schema.json", ct = "list-view", dt = "A Farris Component", ut = "object", pt = {
id: {
description: "The unique identifier for list-view",
type: "string"
},
type: {
description: "The type string of list-view",
type: "string",
default: "list-view"
},
dataSource: {
description: "",
type: "string",
default: ""
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
},
itemClass: {
description: "",
type: "string",
default: ""
},
itemStyle: {
description: "",
type: "string",
default: ""
},
contentTemplate: {
description: "",
type: "string",
default: ""
},
footerTemplate: {
description: "",
type: "string",
default: ""
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
pagination: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
disablePagination: {
description: "",
type: "string",
default: ""
},
contentTemplate: {
description: "",
type: "string",
default: ""
},
index: {
description: "",
type: "number",
default: 1
},
mode: {
description: "",
type: "enum",
default: "server",
enum: [
"server",
"client"
]
},
showGoto: {
description: "",
type: "boolean",
default: !1
},
showIndex: {
description: "",
type: "boolean",
default: !0
},
showLimits: {
description: "",
type: "boolean",
default: !1
},
showPageInfo: {
description: "",
type: "boolean",
default: !0
},
size: {
description: "",
type: "number",
default: 20
},
sizeLimits: {
description: "",
type: "array",
default: [
10,
20,
30,
50,
100
]
},
onPageChange: {
description: "",
type: "string",
default: ""
},
onPageSizeChange: {
description: "",
type: "string",
default: ""
}
}
}
}, mt = [
"id",
"type"
], ft = {
onClickItem: "行点击事件"
}, de = {
$schema: at,
$id: rt,
title: ct,
description: dt,
type: ut,
properties: pt,
required: mt,
events: ft
}, Q = ye(Ve, "headerTemplate"), Gt = oe(Q, de, z, Y), ue = le(
Q,
de,
z,
Y
), K = {
"tab-page": { type: "tab-page" },
section: { type: "section" },
"list-view": { name: "列表" }
};
function gt(s) {
const { formSchemaUtils: e, formStateMachineUtils: t } = s;
function n(r, m = "") {
return {
path: m + r.code,
field: r.id,
fullPath: r.code
};
}
function l(r, m = "") {
const c = e.getViewModelById(r);
return c ? c.states.map((u) => n(u, m)) : [];
}
function o(r) {
const m = e.getRootViewModelId(), c = l(r);
if (r === m)
return c;
const u = l(m, "root-component.");
return [...c, ...u];
}
function i(r) {
return r.binding && r.binding.path || r.id || "";
}
function d() {
return t && t.getRenderStates() || [];
}
return { getVariables: o, getControlName: i, getStateMachines: d };
}
class vt {
constructor(e) {
N(this, "sessionVariables", [
{
key: "CurrentSysOrgName",
name: "当前组织Name",
description: "当前组织Name"
},
// {
// key: "CurrentSysOrgCode",
// name: "当前组织Code",
// description: "当前组织Code"
// },
{
key: "CurrentSysOrgId",
name: "当前组织Id",
description: "当前组织Id"
},
{
key: "CurrentUserName",
name: "当前用户Name",
description: "当前用户Name"
},
{
key: "CurrentUserCode",
name: "当前用户Code",
description: "当前用户Code"
},
{
key: "CurrentUserId",
name: "当前用户Id",
description: "当前用户Id"
},
{
key: "CurrentLanguage",
name: "当前语言编号",
description: "当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'"
}
]);
N(this, "expressionNames", {
compute: "计算表达式",
dependency: "依赖表达式",
validate: "验证表达式",
dataPicking: "帮助前表达式",
visible: "可见表达式",
readonly: "只读表达式",
required: "必填表达式"
});
N(this, "getExpressionConverter", (e, t) => ({
convertFrom: (n, l, o, i) => {
const d = o.getExpressionRuleValue(e, t || l);
return d && d.value || "";
},
convertTo: (n, l, o, i, d) => {
var r;
if (l === "dataPicking" && (o != null && o.target)) {
const m = `${o.target}_dataPicking`;
((r = o.rules) == null ? void 0 : r.some(
(u) => u.id === m && u.value
)) ? n.dictPickingExpressionId = m : delete n.dictPickingExpressionId;
}
i.updateExpression(o);
}
}));
this.formSchemaService = e;
}
getExpressionRule(e, t) {
const n = this.getExpressionData();
if (!n)
return "";
const l = n.find((i) => i.target === e);
if (!l)
return "";
const o = l.rules.find((i) => i.type === t);
return o || "";
}
// 获取上下文表单变量
getContextFormVariables() {
const { module: e } = this.formSchemaService.getFormSchema();
if (!e.viewmodels || e.viewmodels.length === 0)
return [];
const t = this.formSchemaService.getRootViewModelId(), n = this.formSchemaService.getViewModelById(t);
if (!n || !n.states || n.states.length === 0)
return [];
const l = [];
return n.states.filter((o) => o.category === "remote").forEach((o) => {
l.push({
key: o.code,
name: o.name,
description: o.name,
category: o.category
});
}), l;
}
createTreeNode(e, t, n = "label") {
return {
id: e.id,
name: e.name,
bindingPath: e[n],
parents: t,
type: "field"
};
}
buildEntityFieldsTreeData(e = null, t) {
const n = [];
return e == null || e.forEach((l) => {
var d;
const o = this.createTreeNode(l, t);
let i = [];
(d = l.type) != null && d.fields && (i = this.buildEntityFieldsTreeData(l.type.fields, [...t, l.label])), n.push({
data: o,
children: i,
expanded: !0
});
}), n;
}
buildChildEntityTreeData(e = null, t) {
const n = [];
return e == null || e.forEach((l) => {
var r, m;
const o = this.createTreeNode(l, t);
o.type = "entity";
const i = this.buildEntityFieldsTreeData((r = l.type) == null ? void 0 : r.fields, [...t, l.label]), d = this.buildChildEntityTreeData((m = l.type) == null ? void 0 : m.entities, [...t, l.label]);
d != null && d.length && (i == null || i.push(...d)), n.push({
data: o,
children: i || [],
// 空值回退
expanded: !0
});
}), n;
}
getEntitiesTreeData() {
const e = this.formSchemaService.getSchemaEntities();
if (!(e != null && e.length))
return [];
const t = e[0];
if (!(t != null && t.type))
return [];
const n = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), l = this.buildChildEntityTreeData(t.type.entities, [t.code]);
return l != null && l.length && (n == null || n.push(...l)), {
entityCode: t.code,
fields: [{
data: this.createTreeNode(t, [], "code"),
children: n || []
}]
};
}
getEntitiesAndVariables() {
return {
entities: this.getEntitiesTreeData(),
variables: {
session: {
name: "系统变量",
items: this.sessionVariables,
visible: !1
},
forms: {
name: "表单变量",
items: this.getContextFormVariables(),
visible: !0
}
}
};
}
onBeforeOpenExpression(e, t, n) {
const l = n === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(l, t), i = this.getEntitiesAndVariables(), d = {
message: ["validate", "required", "dataPicking"].includes(t) && o ? o.message : "",
...i
};
return o.messageType != null && (d.messageType = o.messageType), d;
}
buildRule(e, t, n, l) {
const { expression: o, message: i, messageType: d } = t, r = {
id: `${e}_${n}`,
type: n,
value: o
};
return (n === "validate" || n === "dataPicking" || n === "required") && (r.message = i), n === "dataPicking" && (r.messageType = d), n === "validate" && l && (r.elementId = l), r;
}
getExpressionData() {
const { expressions: e } = this.formSchemaService.getFormSchema().module;
return e || [];
}
updateExpression(e, t, n, l) {
const o = t === "Field" ? e.binding.field : e.id, i = this.buildRule(o, n, l, e.type === "form-group" ? e.id : "");
let r = this.getExpressionData().find((c) => c.targetType === t && c.target === o);
const m = (c) => c.value.trim() === "";
if (r) {
const c = r.rules.find((u) => u.id === i.id);
if (c)
m(i) ? r.rules = r.rules.filter((u) => u.id !== i.id) : (Object.assign(c, i), l === "validate" && e.type === "form-group" && (c.elementId = e.id));
else {
if (m(i))
return null;
r.rules = r.rules || [], r.rules.push(i);
}
} else {
if (m(i))
return null;
r = {
target: `${o}`,
rules: [i],
targetType: t
};
}
return r;
}
getExpressionEditorOptions(e, t, n, l) {
return n.reduce((o, i) => {
var r, m;
const d = t === "Field" ? (r = e == null ? void 0 : e.binding) == null ? void 0 : r.field : e.id;
return o[i] = {
hide: t === "Field" ? !!((m = e == null ? void 0 : e.binding) != null && m.field) : !1,
description: "",
title: this.expressionNames[i],
type: "string",
$converter: this.getExpressionConverter(d),
refreshPanelAfterChanged: !0,
editor: {
type: "expression-editor",
singleExpand: !1,
dialogTitle: `${this.expressionNames[i]}编辑器`,
showMessage: i === "validate" || i === "dataPicking" || i === "required",
showMessageType: i === "dataPicking",
beforeOpen: () => this.onBeforeOpenExpression(e, i, t),
onSubmitModal: (c) => {
const u = this.updateExpression(e, t, c, i);
if (l) {
const v = this.buildRule(d, c, i);
l(v);
}
return u;
}
}
}, o;
}, {});
}
getExpressionInfo(e, t, n) {
const l = t === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(l, n), i = {
value: o && o.value,
targetId: l,
targetType: t,
expressionType: n
};
return o && o.message && (i.message = o.message), i;
}
getExpressionConfig(e, t, n = ["compute", "dependency", "validate"], l) {
var o;
return {
description: "表达式",
title: "表达式",
hide: !(e.binding && ((o = e.binding) == null ? void 0 : o.type) === "Form"),
properties: {
...this.getExpressionEditorOptions(e, t, n, l)
}
};
}
getExpressionOptions(e, t, n) {
const l = this.getExpressionInfo(e, t, n);
return {
dialogTitle: `${this.expressionNames[n] || "表达式"}编辑器`,
singleExpand: !1,
showMessage: n === "required",
beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
expressionInfo: l
};
}
}
class ht {
constructor(e, t) {
N(this, "componentId");
N(this, "viewModelId");
N(this, "eventsEditorUtils");
N(this, "formSchemaUtils");
N(this, "formMetadataConverter");
N(this, "designViewModelUtils");
N(this, "designViewModelField");
N(this, "controlCreatorUtils");
N(this, "designerHostService");
N(this, "designerContext");
N(this, "modalService", null);
/** 表单规则 */
N(this, "formRule", null);
N(this, "schemaService", null);
N(this, "metadataService", null);
N(this, "propertyConfig", {
type: "object",
categories: {}
});
N(this, "expressionProperty");
var n;
this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((n = this.formSchemaUtils) == null ? void 0 : n.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext, this.modalService = t.modalService, this.expressionProperty = new vt(this.formSchemaUtils);
}
/**
* 是否在响应式表单中
*/
inResponsiveForm() {
var e;
return !!((e = this.designerContext) != null && e.responsiveForm);
}
getFormDesignerInstance() {
var e, t;
return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
}
getTableInfo() {
var e;
return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(e) {
var n;
const t = e.binding && e.binding.type === "Form" && e.binding.field;
if (t) {
if (!this.designViewModelField) {
const l = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = l.fields.find((o) => o.id === t);
}
e.updateOn = (n = this.designViewModelField) == null ? void 0 : n.updateOn;
}
}
getBasicPropConfig(e) {
return {
description: "Basic Information",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "combo-list",
textField: "name",
valueField: "value",
idField: "value",
editable: !1,
data: [{ value: e.type, name: G[e.type] && G[e.type].name }]
}
}
}
};
}
getAppearanceConfig(e = null, t = {}, n) {
const l = {
title: "外观",
description: "Appearance"
}, o = {
class: {
title: "class样式",
type: "string",
description: "组件的CSS样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
},
style: {
title: "style样式",
type: "string",
description: "组件的样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
}
};
for (const i in t)
o[i] = Object.assign(o[i] || {}, t[i]);
return {
...l,
properties: { ...o },
setPropertyRelates(i, d) {
if (i) {
switch (i && i.propertyID) {
case "class":
case "style": {
Fe.value++;
break;
}
}
n && n(i, e, d);
}
}
};
}
/**
*
* @param propertyData
* @param propertyTypes
* @param propertyName
* @param constInfos
* @param variableInfos
* @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
* @returns
*/
getPropertyEditorParams(e, t = [], n = "visible", l = {}, o = {}, i = "") {
const { getVariables: d, getControlName: r, getStateMachines: m } = gt(this.designerHostService), c = this.getRealTargetType(e), u = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], v = {
type: "property-editor",
propertyTypes: u
};
return u.map((w) => {
switch (w) {
case "Const":
Object.assign(v, {
constType: "enum",
constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
}, l);
break;
case "Expression":
v.expressionConfig = this.getExpressionOptions(e, c, i || n);
break;
case "StateMachine":
v.stateMachines = m();
break;
case "Variable":
Object.assign(v, {
controlName: r(e),
newVariablePrefix: "is",
newVariableType: "Boolean",
variables: d(this.viewModelId),
parentComponentId: this.componentId === "root-component" ? "" : "root-component",
onBeforeOpenVariables: (y) => {
y.value = d(this.viewModelId);
}
}, o), this.designerContext.designerMode === "PC_RTC" && (v.newVariablePrefix = "ext_" + v.newVariablePrefix);
break;
}
}), v;
}
getVisibleProperty(e, t = "") {
var o;
let n = ["Const", "Variable", "StateMachine", "Expression"];
return t === "gridFieldEditor" ? n = ["Const", "Expression"] : t === "form-group" && !((o = e.binding) != null && o.field) ? n = ["Const", "Variable", "StateMachine", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? n = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (n = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
visible: {
title: "是否可见",
type: "boolean",
description: "运行时组件是否可见",
editor: this.getPropertyEditorParams(e, n, "visible")
}
};
}
/**
* 获取行为
* @param propertyData
* @param viewModelId
* @returns
*/
getBehaviorConfig(e, t = "", n = {}, l) {
const o = {
title: "行为",
description: ""
}, i = this.getVisibleProperty(e, t);
for (const r in n)
i[r] = Object.assign(i[r] || {}, n[r]);
const d = this;
return {
...o,
properties: { ...i },
setPropertyRelates(r, m) {
if (r) {
switch (r.propertyID) {
case "disabled":
case "readonly":
case "visible":
d.afterMutilEditorChanged(e, r);
break;
}
l && l(r, m);
}
}
};
}
/**
* 当多值编辑器变更时
* @param propertyData
* @param changeObject
*/
afterMutilEditorChanged(e, t) {
this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t, e), this.clearExpression(t, e);
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(e, t) {
const n = t && t.parent && t.parent.schema;
if (!n)
return;
const l = n.contents.findIndex((i) => i.id === e), o = Ye(n.contents[l]);
n.contents.splice(l, 1), n.contents.splice(l, 0, o), Re();
}
/**
* 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
* @param changeObject
* @param viewModelId
* @returns
*/
addNewVariableToViewModel(e, t) {
const n = e.propertyValue;
if (!(n && typeof n == "object") || !(n.type === "Variable" && n.isNewVariable))
return;
const i = {
id: n.field,
category: "locale",
code: n.fullPath,
name: n.fullPath,
type: n.newVariableType || "String",
isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
};
delete n.newVariableType, delete n.isNewVariable, this.formSchemaUtils.getVariableByCode(i.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(i);
}
getExpressions() {
let e = [];
return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
}
/**
* 更新表达式到expressions节点
* @param changeObject
*/
updateExpressionValue(e, t) {
const n = e.propertyValue;
if (!((n && n.type) === "Expression" && n.expressionInfo))
return;
const { expressionId: i, expressionInfo: d } = n, { targetId: r, targetType: m, expressionType: c, value: u, message: v } = d, w = this.getExpressions();
let y = w.find((C) => C.target === r);
y || (y = { target: r, rules: [], targetType: m }, w.push(y));
const I = y.rules.find((C) => C.type === c);
if (I)
I.id = i, I.value = u, I.message = v, (c === "minDate" || c === "maxDate" || c === "defaultTime") && (I.elementId = t.id);
else {
const C = { id: i, type: c, value: u, message: v, elementId: t.id };
y.rules.push(C);
}
delete n.expressionInfo;
}
/**
* 属性类型切换为非表达式后，清除原表达式
* @param changeObject
* @param propertyData
* @returns
*/
clearExpression(e, t) {
const n = e.propertyValue;
if (n && n.type === "Expression")
return;
const o = e.propertyID, i = this.getExpressions(), d = t.binding ? t.binding.field : t.id, r = i.find((m) => m.target === d);
!r || !r.rules || (r.rules = r.rules.filter((m) => m.type !== o));
}
getExpressionOptions(e, t, n) {
return this.expressionProperty.getExpressionOptions(e, t, n);
}
getRealTargetType(e) {
return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
}
createBaseEventProperty(e) {
const t = {};
return t[this.viewModelId] = {
type: "events-editor",
editor: {
initialData: e,
viewSourceHandle: (n) => {
var l;
((l = n.controller) == null ? void 0 : l.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(n);
}
}
}, t;
}
}
class wt extends ht {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e) {
return this.getBasicPropConfig(e), this.getAppearanceProperties(e), this.getEventPropConfig(e), this.propertyConfig;
}
getBasicPropConfig(e) {
var i, d, r;
const t = (r = (d = (i = this.formSchemaUtils.getFormSchema()) == null ? void 0 : i.module) == null ? void 0 : d.entity[0]) == null ? void 0 : r.entities[0], n = this.assembleSchemaEntityToTree(t, 0), l = this, o = super.getBasicPropConfig(e);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...o.properties,
dataSource: {
description: "绑定数据源",
title: "绑定数据源",
editor: {
type: "combo-tree",
textField: "name",
valueField: "label",
data: n,
editable: !1
},
readonly: !0
}
},
setPropertyRelates(m, c) {
switch (m && m.propertyID) {
case "dataSource": {
const u = l.formSchemaUtils.getViewModelById(l.viewModelId);
if (u) {
const v = n.find((w) => w.label === m.propertyValue);
u.bindTo = v.bindTo;
}
l.designViewModelUtils.assembleDesignViewModel();
break;
}
}
}
};
}
/**
* 将schema实体表组装成树
*/
assembleSchemaEntityToTree(e, t, n, l = "", o = []) {
if (!e)
return o;
const i = l ? `${l}/${e.label}` : "/";
return o.push({
id: e.id,
name: e.name,
label: e.label,
layer: t,
parent: n && n.id,
bindTo: i.replace("//", "/")
}), e.type.entities && e.type.entities.length && e.type.entities.map((d) => this.assembleSchemaEntityToTree(d, t + 1, e, i, o)), o;
}
getAppearanceProperties(e) {
this.propertyConfig.categories.appearance = {
title: "外观",
properties: {
class: {
title: "列表class样式",
type: "string",
description: "组件的CSS样式"
},
itemClass: {
title: "行样式class",
type: "string",
description: "行样式class",
editor: {
type: "code-editor",
language: "javascript",
leftTemplate: () => a(q, null, [a("h5", null, [j("示例代码")]), a("pre", null, [`
(dataItem) => {
if(dataItem.code === '0001') {
return 'bg-danger text-center';
}
return '';
}
注：dataItem 行数据
函数返回值是一个字符串，
是由空格分隔的class组成 `])])
}
},
itemStyle: {
title: "行样式style",
type: "string",
description: "行样式style",
editor: {
type: "code-editor",
language: "javascript",
leftTemplate: () => a(q, null, [a("h5", null, [j("示例代码")]), a("pre", null, [`
(dataItem) => {
if(dataItem.code === '0001') {
return 'textAlign:center;color:green';
}
return '';
}
注：dataItem 行数据
函数返回值是一个字符串，
由分号分隔的css样式组成 `])])
}
},
contentTemplate: {
description: "内容模板",
title: "内容模板",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
type: "code-editor",
language: "html"
}
},
footerTemplate: {
description: "底部模板",
title: "底部模板",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
type: "code-editor",
language: "html"
}
},
emptyTemplate: {
description: "空数据模板",
title: "空数据模板",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
type: "code-editor",
language: "html"
}
}
},
setPropertyRelates(t, n) {
switch (t && t.propertyID) {
case "useBlankWhenDataIsEmpty":
e.emptyDataHeight = e.useBlankWhenDataIsEmpty ? 36 : 240;
break;
case "columns":
e.columns = t.propertyValue || [];
break;
}
}
};
}
getEventPropConfig(e) {
var i;
const t = [{
label: "onClickItem",
name: "行点击事件"
}];
(i = e.pagination) == null || i.enable;
const n = this, l = n.eventsEditorUtils.formProperties(e, n.viewModelId, t), o = n.createBaseEventProperty(l);
this.propertyConfig.categories.eventsEditor = {
title: "事件",
hideTitle: !0,
properties: o,
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: Ce,
tabName: "交互",
setPropertyRelates(d, r) {
const m = d.propertyValue;
delete e[n.viewModelId], m && (m.setPropertyRelates = this.setPropertyRelates, n.eventsEditorUtils.saveRelatedParameters(e, n.viewModelId, m.events, m)), e.remoteSort = !!e.columnSorted, e.command && (e.command.onClickEdit