@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
685 lines (684 loc) • 21.3 kB
JavaScript
import { reactive as I, computed as N, watch as V, ref as h, defineComponent as W, inject as X, createVNode as E, Fragment as Y, isVNode as Z } from "vue";
import { FDynamicFormGroup as ee } from "../dynamic-form/index.esm.js";
import { F_MODAL_SERVICE_TOKEN as te } from "../modal/index.esm.js";
import oe, { FTabPage as ae } from "../tabs/index.esm.js";
import x from "../tree-view/index.esm.js";
import re from "../textarea/index.esm.js";
import { useCommonUtils as ne } from "../common/index.esm.js";
import ie, { FLayoutPane as R } from "../layout/index.esm.js";
import { LocaleService as F } from "../locale/index.esm.js";
var g = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Textbox = "Textbox", e.Numberbox = "Numberbox", e.Combolist = "Combolist", e.Select = "Select", e.Checkbox = "Checkbox", e.Switch = "Switch", e.Tags = "Tags", e.SortEditor = "SortEditor", e.FilterEditor = "FilterEditor", e.DataEditor = "DataEditor", e.MenuIdSelector = "MenuIdSelector", e.AppIdSelector = "AppIdSelector", e.ComboLookup = "ComboLookup", e.ConfigurationParameterEditor = "ConfigurationParameterEditor", e.FieldMappingEditor = "FieldMappingEditor", e.Custom = "Custom", e))(g || {});
const P = I({}), le = {
/** 编辑器类型 */
data: { type: Object, default: [] },
/** 复选框组件id */
id: { type: String, default: "" },
/** 视图模型 id */
editable: { type: Boolean, default: !0 },
/** 参数编辑器类型 */
editorType: { type: String, default: "" },
/** 参数编辑器控件源 */
editorControlSource: { type: Object, default: {} },
/** 组件标题 */
label: { type: String, default: "" },
defaultValue: { type: String, default: "" },
/** 组件值 */
modelValue: { type: [String, Boolean, Array, Number], default: "" },
paramData: { type: Object, default: [] },
/** 是否展示标题 */
showLabel: { type: Boolean, default: !0 },
/** ID字段 */
idField: { type: String, default: "" },
/** 文本字段 */
textField: { type: String, default: "" },
/** 是否只读 */
readonly: { type: Boolean, default: !1 },
/** 是否必填 */
disabled: { type: Boolean, default: !1 },
/** 通用参数编辑器字段数据 */
fieldData: { type: Array, default: [] },
/** 通用参数编辑器变量数据 */
varData: { type: Array, default: [] },
/** 通用参数编辑器表单数据 */
formData: { type: Array, default: [] },
/** 当前视图模型所绑定的实体节点的字段列表 */
activeViewModelFieldData: { type: Array, default: [] },
/** 是否在“参数编辑器”弹框中显示“表单组件”树 */
showOutline: { type: Boolean, default: !0 },
editor: { type: Object, default: { type: "Default" } },
displayFormatter: { type: Function },
/** 自定义行状态 */
customRowStatus: { type: Function, default: null }
};
function ue(e) {
function r(t) {
return e.data.find((v) => v[e.idField || "id"] === t) ? t : "";
}
function d() {
var t;
P[((t = e.editor) == null ? void 0 : t.type) || e.editorType] = {
type: "combo-list",
componentProps: {
data: e.data,
editable: e.editable === "true",
idField: e.idField || "id",
textField: e.textField || "label",
enableClear: !0
},
checkAndProcessBeforeAssign: r
};
}
function s() {
}
return { createEditorProps: d, onValueChange: s };
}
function de(e) {
function r(t) {
return typeof t == "string" && t !== "" ? t === "true" : t;
}
function d() {
var t;
P[((t = e.editor) == null ? void 0 : t.type) || e.editorType] = {
type: "switch",
componentProps: {},
convertEventParamValue2EditorValue: r
};
}
function s() {
}
return { createEditorProps: d, onValueChange: s };
}
function B(e) {
const r = N(() => e.editor.type === g.Default || e.editorType === g.Default);
function d() {
var t;
P[((t = e.editor) == null ? void 0 : t.type) || e.editorType] = {
type: "input-group",
componentProps: {}
};
}
function s() {
}
return { createEditorProps: d, shouldRenderAppendButton: r, onValueChange: s };
}
function ce(e) {
const r = N(() => e.editor.type === g.Default || e.editorType === g.Default);
function d(l) {
return e.data.find((n) => {
const m = n;
return m.children ? m.children.some((u) => {
var c;
return ((c = u.data) == null ? void 0 : c.id) === l;
}) : !1;
}) ? l : "";
}
function s() {
var l;
P[((l = e.editor) == null ? void 0 : l.type) || e.editorType] = {
type: "combo-tree",
componentProps: {
data: e.data,
placeholder: F.getLocaleValue("eventParameter.comboTree.placeholder"),
enableSearch: !1,
enableClear: !0,
editable: !1,
readonly: !1,
disabled: !1,
idField: e.idField || "id",
textField: e.textField || "name",
mapFields: { id: "selectId" },
multiSelect: !1,
// customRowStatus: (visualData: VisualData) => {
// if (visualData.raw.children && visualData.raw.children.length) {
// visualData.disabled = true;
// }
// return visualData;
// },
customRowStatus: e.customRowStatus,
displayFormatter: e.displayFormatter
},
checkAndProcessBeforeAssign: d
};
}
V(() => e.data, (l, v) => {
var n, m, i;
l !== v && ((m = P[((n = e.editor) == null ? void 0 : n.type) || e.editorType]) == null ? void 0 : m.type) === "combo-tree" && (P[((i = e.editor) == null ? void 0 : i.type) || e.editorType].componentProps.data = l);
});
function t() {
}
return { createEditorProps: s, shouldRenderAppendButton: r, onValueChange: t };
}
function se(e) {
function r(t) {
return t ? "" : "/api/runtime/sys/v1.0/functions/allfuncs";
}
function d() {
var t;
P[((t = e.editor) == null ? void 0 : t.type) || e.editorType] = {
type: "menu-lookup",
componentProps: {
fetchNodeApi: r
}
};
}
function s() {
}
return { createEditorProps: d, onValueChange: s };
}
function fe(e) {
function r() {
var n, m;
const l = e.editorControlSource, v = (m = (n = l == null ? void 0 : l.context) == null ? void 0 : n.schema) == null ? void 0 : m.value;
if (!v || typeof v != "string")
return [];
try {
const i = JSON.parse(v);
return Array.isArray(i) ? i.filter((u) => u.id !== "sync") : [];
} catch (i) {
return console.error(`${F.getLocaleValue("eventParameter.jsonEditor.error")}`, i), [];
}
}
function d() {
return Promise.resolve({
parameterDescriptors: r(),
formContextData: {
fieldData: e.fieldData,
varData: e.varData,
formData: e.formData
}
});
}
function s() {
var l;
P[((l = e.editor) == null ? void 0 : l.type) || e.editorType] = {
type: "json-editor",
componentProps: {
parameterDescriptors: r(),
formContextData: {
fieldData: e.fieldData,
varData: e.varData,
formData: e.formData
},
beforeOpen: d,
dialogTitle: F.getLocaleValue("eventParameter.jsonEditor.dialogTitle"),
keyColumnTitle: F.getLocaleValue("eventParameter.jsonEditor.keyColumnTitle"),
valueColumnTitle: F.getLocaleValue("eventParameter.jsonEditor.valueColumnTitle"),
addButtonText: F.getLocaleValue("eventParameter.jsonEditor.addButtonText"),
keyColumnPlaceholder: F.getLocaleValue("eventParameter.jsonEditor.keyColumnPlaceholder")
}
};
}
function t() {
}
return { createEditorProps: s, onValueChange: t };
}
function me(e) {
function r(i) {
i.forEach((u) => {
u.sortType === "1" ? u.sortType = "desc" : u.sortType === "0" && (u.sortType = "asc");
});
}
function d(i) {
i.forEach((u) => {
u.sortType === "desc" ? u.sortType = "1" : u.sortType === "asc" && (u.sortType = "0");
});
}
function s(i) {
if (!i && typeof i != "string")
return [];
try {
const u = JSON.parse(i);
if (Array.isArray(u))
return r(u), u;
} catch {
return [];
}
return [];
}
function t(i) {
return typeof i == "string" ? i : !Array.isArray(i) || i.length === 0 ? "" : (d(i), JSON.stringify(i));
}
function l() {
const i = e.activeViewModelFieldData || [], u = [];
return i.forEach((c) => {
var b;
u.push(
Object.assign({}, c, { id: c.path, parent: (b = c.parentNode) == null ? void 0 : b.path })
);
}), u;
}
function v() {
const i = l(), u = s(e.modelValue), c = [], b = [], D = {};
return Promise.resolve({ fieldList: i, conditionList: u, entities: c, variables: b, formContextData: D });
}
function n() {
var i;
P[((i = e.editor) == null ? void 0 : i.type) || e.editorType] = {
type: "sort-condition-editor",
componentProps: {
fields: l(),
beforeOpen: v
},
convertEditorValue2EventParamValue: t
};
}
function m() {
}
return { createEditorProps: n, onValueChange: m };
}
function pe(e) {
function r(n) {
if (!n && typeof n != "string")
return [];
try {
const m = JSON.parse(n);
if (Array.isArray(m))
return m;
} catch {
return [];
}
return [];
}
function d(n) {
return typeof n == "string" ? n : !Array.isArray(n) || n.length === 0 ? "" : JSON.stringify(n);
}
function s() {
const n = e.activeViewModelFieldData || [], m = [];
return n.forEach((i) => {
var u;
m.push(
Object.assign({}, i, { id: i.path, parent: (u = i.parentNode) == null ? void 0 : u.path })
);
}), m;
}
function t() {
const n = s(), m = r(e.modelValue), i = [], u = [], c = {
fieldData: e.fieldData,
varData: e.varData
};
return Promise.resolve({ fieldList: n, conditionList: m, entities: i, variables: u, formContextData: c });
}
function l() {
var n;
P[((n = e.editor) == null ? void 0 : n.type) || e.editorType] = {
type: "filter-condition-editor",
componentProps: {
fields: s(),
singleValue: !1,
beforeOpen: t
},
convertEditorValue2EventParamValue: d
};
}
function v() {
}
return { createEditorProps: l, onValueChange: v };
}
function ve(e) {
function r() {
var s, t;
P[((s = e.editor) == null ? void 0 : s.type) || e.editorType] = {
type: "custom",
componentProps: {},
render: (t = e.editor) == null ? void 0 : t.customRender
};
}
function d() {
}
return { createEditorProps: r, onValueChange: d };
}
function ye(e) {
var T;
const r = h(((T = e.editor) == null ? void 0 : T.type) || e.editorType), d = ue(e), s = de(e), t = B(e), l = ce(e), v = se(e), n = fe(e), m = me(e), i = pe(e), u = ve(e);
function c() {
const C = r.value;
return C === g.Combolist || C === g.Select ? d.createEditorProps() : C === g.Checkbox || (C === g.MenuIdSelector ? v.createEditorProps() : C === g.ConfigurationParameterEditor ? n.createEditorProps() : C === g.SortEditor ? m.createEditorProps() : C === g.FilterEditor ? i.createEditorProps() : C === g.AppIdSelector || (C === g.ComboLookup ? l.createEditorProps() : C === g.Numberbox || (C === g.Switch ? s.createEditorProps() : C === g.Custom ? u.createEditorProps() : t.createEditorProps()))), P[r.value];
}
function b() {
return "input-group";
}
function D() {
return {};
}
return { getEditorConfig: c, getEditorType: b, getEditorMap: D };
}
function ge(e) {
const r = I([
{
id: "tabField",
title: F.getLocaleValue("eventParameter.generalEditor.field"),
treeConfigs: {
id: "tabFieldTree",
columns: [{ field: "name" }],
data: e.fieldData,
onSelectNode: () => {
},
componentRef: h()
},
visible: !0
},
{
id: "tabVar",
title: F.getLocaleValue("eventParameter.generalEditor.tabVar"),
treeConfigs: {
id: "tabVarTree",
data: e.varData
},
visible: !0
},
{
id: "tabForm",
title: F.getLocaleValue("eventParameter.generalEditor.form"),
treeConfigs: {
id: "tabFormTree",
data: e.formData
},
visible: !0
}
]);
V(() => e.fieldData, (t, l) => {
t !== l && (r[0].treeConfigs.data = t);
}), V(() => e.varData, (t, l) => {
t !== l && (r[1].treeConfigs.data = t);
}), V(() => e.formData, (t, l) => {
t !== l && (r[2].treeConfigs.data = t);
}), V(
() => e.showOutline,
() => {
r[2].visible = !!e.showOutline;
},
{ immediate: !0 }
);
function d(t) {
t.forEach((l) => {
Object.keys(l).forEach((v) => {
v.indexOf("__fv") > -1 && delete l[v];
});
});
}
function s() {
d(r[0].treeConfigs.data), d(r[1].treeConfigs.data), d(r[2].treeConfigs.data);
}
return { tabs: r, cleanTreeData: s };
}
function be(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Z(e);
}
const S = /* @__PURE__ */ W({
name: "FEventParameter",
props: le,
emits: ["valueChange", "onBlur", "applicationSelectionChange", "componentSelectionChange", "parameterChanged", "update:modelValue", "update:parameterValue", "confirm"],
setup(e, r) {
const {
isNull: d,
isUndefined: s
} = ne(), t = h(e.id);
B(e);
const l = h(), v = h("tabField"), n = h(), {
getEditorConfig: m
} = ye(e);
V([() => e.editor, () => e.editorType, () => e.data], () => {
n.value = m();
}, {
immediate: !0
});
function i() {
return !d(e.defaultValue) && !s(e.defaultValue) && e.defaultValue !== "" && (d(e.modelValue) || s(e.modelValue) || e.modelValue === "") ? e.defaultValue : e.modelValue;
}
function u(o) {
var a, p;
return (a = n.value) != null && a.checkAndProcessBeforeAssign ? n.value.checkAndProcessBeforeAssign(o) : (p = n.value) != null && p.convertEventParamValue2EditorValue ? n.value.convertEventParamValue2EditorValue(o) : o;
}
const c = h(i());
c.value = u(c.value);
const b = h(c.value);
V(() => e.modelValue, () => {
const o = h(i());
c.value = u(o.value);
}), V(n, () => {
c.value = u(c.value);
}), V(() => e.data, () => {
c.value = u(c.value);
});
const D = X(te), T = h([{
field: "name",
title: "",
dataType: "string"
}]), C = h({
enable: !1
}), _ = h({
customRowStatus: (o) => (o.collapse, o.raw.hasChildren && (o.disabled = !0), o)
}), J = h({
customRowStatus: (o) => (o.layer === 0 && (o.disabled = !0), o)
}), L = N(() => {
var o, a;
return {
// 编辑器类型
type: (o = n.value) == null ? void 0 : o.type,
// 根据不同编辑器，设置不同编辑器的属性
...(a = n.value) == null ? void 0 : a.componentProps,
readonly: e.readonly
};
}), {
tabs: M,
cleanTreeData: A
} = ge(e);
function U(o) {
var a;
(a = n.value) != null && a.convertEditorValue2EventParamValue && (o = n.value.convertEditorValue2EventParamValue(o)), r.emit("update:modelValue", o), r.emit("valueChange", o);
}
function w(o, a) {
const p = a.selectionStart || 0, {
selectionEnd: f
} = a, y = f - p, j = y > 0, k = b.value && b.value.split("") || [];
return j ? k.splice(p, y, o) : k.splice(p, 0, o), k.join("");
}
function $(o, a) {
if (!o.data)
return;
const {
data: p
} = o;
let f = o.parentNode, {
label: y
} = p;
for (; f && f.parentNode; )
f.data && (y = f.data.label + "/" + y), f = f.parentNode;
return w(`{DATA~/${y}}`, a);
}
function H(o, a) {
const {
statePath: p
} = o;
let f = a.value;
if (p) {
const y = p.split("/");
if (f = p, y.length === 3) {
const k = `#{${y[1]}}`;
y.splice(1, 1, k), f = y.join("/");
}
f = `{UISTATE~${f}}`;
}
return w(f, a);
}
function O(o, a, p) {
const f = l.value.getTextareaElement();
switch (o) {
case "tabForm":
b.value = w(`#{${p.data.id}}`, f);
break;
case "tabField":
b.value = $(p, f);
break;
case "tabVar":
b.value = H(p.data, f);
break;
}
r.emit("paramChanged", {
tabId: o,
index: a,
raw: p,
value: c.value
});
}
function G() {
return M.forEach((o) => {
o.treeConfigs.data.forEach((a) => {
Object.prototype.hasOwnProperty.call(a, "__fv_visible__") && delete a.__fv_visible__;
});
}), () => {
let o;
return E(ie, {
class: "nav-tree-panel"
}, {
default: () => [E(R, {
position: "left",
width: 300,
resizable: !1
}, {
default: () => [E(oe, {
activeId: v.value,
"onUpdate:activeId": (a) => v.value = a
}, be(o = M.map((a) => a.visible && E(ae, {
key: a.id,
id: a.id,
title: a.title
}, {
default: () => [a.id === "tabField" && E(x, {
rowNumber: C,
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
rowOption: _.value,
hierarchy: {
collapseField: "collapse"
},
key: a.treeConfigs.id,
data: a.treeConfigs.data,
columns: T.value,
fit: !0,
height: 340,
onDoubleClickRow: function(f, y) {
O(a.id, f, y);
}
}, null), a.id === "tabVar" && E(x, {
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
rowNumber: C,
rowOption: J.value,
key: a.treeConfigs.id,
data: a.treeConfigs.data,
fit: !0,
height: 340,
onDoubleClickRow: function(f, y) {
O(a.id, f, y);
}
}, null), a.id === "tabForm" && E(x, {
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
rowNumber: C,
key: a.treeConfigs.id,
data: a.treeConfigs.data,
columns: T.value,
fit: !0,
height: 340,
onDoubleClickRow: function(f, y) {
O(a.id, f, y);
}
}, null)]
}))) ? o : {
default: () => [o]
})]
}), E(R, {
position: "center"
}, {
default: () => [E(re, {
ref: l,
modelValue: b.value,
"onUpdate:modelValue": (a) => b.value = a,
rows: 10,
autoHeight: !0
}, null)]
})]
});
};
}
function z() {
b.value = c.value;
const o = D.open({
title: "参数编辑器",
width: 900,
height: 500,
fitContent: !1,
showHeader: !0,
showCloseButton: !0,
draggable: !0,
render: G(),
onClosed: () => {
A();
},
buttons: [{
class: "btn btn-secondary",
text: "取消",
handle: () => {
o.destroy(), A();
}
}, {
class: "btn btn-primary",
text: "确定",
handle: () => {
c.value = b.value, r.emit("update:modelValue", c.value), r.emit("confirm", c.value), o.destroy(), A();
}
}]
});
}
function K() {
return L.value.type === "input-group" ? E("span", {
class: "f-icon f-icon-lookup",
onClick: z,
style: "margin-top: 2px;margin-right: 5px;color: rgba(0, 0, 0, .25)"
}, null) : E(Y, null, null);
}
const q = () => {
r.emit("update:modelValue", "");
}, Q = () => l.value.elementRef;
return r.expose({
getInputRef: Q
}), () => {
var o, a;
return ((o = n.value) == null ? void 0 : o.type) === "custom" && ((a = n.value) != null && a.render) ? n.value.render() : E(ee, {
id: t.value,
editor: L.value,
modelValue: c.value,
"onUpdate:modelValue": (p) => c.value = p,
showLabel: !1,
customClass: "f-event-parameter",
onChange: U,
onClear: q
}, {
groupTextTemplate: () => K()
});
};
}
});
S.install = (e) => {
e.component(S.name, S);
};
S.register = (e, r, d, s) => {
e["event-parameter"] = S, r["event-parameter"] = S;
};
S.registerDesigner = (e, r, d) => {
e["event-parameter"] = S, r["event-parameter"] = S;
};
export {
g as EditorType,
S as FEventParameter,
S as default,
P as editorMap,
le as eventParameterProps
};