@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
689 lines (688 loc) • 21.4 kB
JavaScript
import { reactive as R, 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 I } 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 = R({}), 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 i(o) {
return e.data.find((c) => c[e.idField || "id"] === o) ? o : "";
}
function u() {
var o;
P[((o = e.editor) == null ? void 0 : o.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: i
};
}
function s() {
}
return { createEditorProps: u, onValueChange: s };
}
function de(e) {
function i(o) {
return typeof o == "string" && o !== "" ? o === "true" : o;
}
function u() {
var o;
P[((o = e.editor) == null ? void 0 : o.type) || e.editorType] = {
type: "switch",
componentProps: {},
convertEventParamValue2EditorValue: i
};
}
function s() {
}
return { createEditorProps: u, onValueChange: s };
}
function B(e) {
const i = N(() => e.editor.type === g.Default || e.editorType === g.Default);
function u() {
var o;
P[((o = e.editor) == null ? void 0 : o.type) || e.editorType] = {
type: "input-group",
componentProps: {}
};
}
function s() {
}
return { createEditorProps: u, shouldRenderAppendButton: i, onValueChange: s };
}
function ce(e) {
const i = N(() => e.editor.type === g.Default || e.editorType === g.Default);
function u(c, n) {
var f;
for (const t of c)
if (((f = t.data) == null ? void 0 : f.id) === n || t.children && t.children.length > 0 && u(t.children, n))
return !0;
return !1;
}
function s(c) {
return e.data.find((f) => {
const t = f;
return t.children ? u(t.children, c) : !1;
}) ? c : "";
}
function o() {
var c;
P[((c = e.editor) == null ? void 0 : c.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: s
};
}
V(() => e.data, (c, n) => {
var f, t, l;
c !== n && ((t = P[((f = e.editor) == null ? void 0 : f.type) || e.editorType]) == null ? void 0 : t.type) === "combo-tree" && (P[((l = e.editor) == null ? void 0 : l.type) || e.editorType].componentProps.data = c);
});
function d() {
}
return { createEditorProps: o, shouldRenderAppendButton: i, onValueChange: d };
}
function se(e) {
function i(o) {
return o ? "" : "/api/runtime/sys/v1.0/functions/allfuncs";
}
function u() {
var o;
P[((o = e.editor) == null ? void 0 : o.type) || e.editorType] = {
type: "menu-lookup",
componentProps: {
fetchNodeApi: i
}
};
}
function s() {
}
return { createEditorProps: u, onValueChange: s };
}
function fe(e) {
function i() {
var n, f;
const d = e.editorControlSource, c = (f = (n = d == null ? void 0 : d.context) == null ? void 0 : n.schema) == null ? void 0 : f.value;
if (!c || typeof c != "string")
return [];
try {
const t = JSON.parse(c);
return Array.isArray(t) ? t.filter((l) => l.id !== "sync") : [];
} catch (t) {
return console.error(`${F.getLocaleValue("eventParameter.jsonEditor.error")}`, t), [];
}
}
function u() {
return Promise.resolve({
parameterDescriptors: i(),
formContextData: {
fieldData: e.fieldData,
varData: e.varData,
formData: e.formData
}
});
}
function s() {
var d;
P[((d = e.editor) == null ? void 0 : d.type) || e.editorType] = {
type: "json-editor",
componentProps: {
parameterDescriptors: i(),
formContextData: {
fieldData: e.fieldData,
varData: e.varData,
formData: e.formData
},
beforeOpen: u,
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 o() {
}
return { createEditorProps: s, onValueChange: o };
}
function me(e) {
function i(t) {
t.forEach((l) => {
l.sortType === "1" ? l.sortType = "desc" : l.sortType === "0" && (l.sortType = "asc");
});
}
function u(t) {
t.forEach((l) => {
l.sortType === "desc" ? l.sortType = "1" : l.sortType === "asc" && (l.sortType = "0");
});
}
function s(t) {
if (!t && typeof t != "string")
return [];
try {
const l = JSON.parse(t);
if (Array.isArray(l))
return i(l), l;
} catch {
return [];
}
return [];
}
function o(t) {
return typeof t == "string" ? t : !Array.isArray(t) || t.length === 0 ? "" : (u(t), JSON.stringify(t));
}
function d() {
const t = e.activeViewModelFieldData || [], l = [];
return t.forEach((m) => {
var b;
l.push(
Object.assign({}, m, { id: m.path, parent: (b = m.parentNode) == null ? void 0 : b.path })
);
}), l;
}
function c() {
const t = d(), l = s(e.modelValue), m = [], b = [], D = {};
return Promise.resolve({ fieldList: t, conditionList: l, entities: m, variables: b, formContextData: D });
}
function n() {
var t;
P[((t = e.editor) == null ? void 0 : t.type) || e.editorType] = {
type: "sort-condition-editor",
componentProps: {
fields: d(),
beforeOpen: c
},
convertEditorValue2EventParamValue: o
};
}
function f() {
}
return { createEditorProps: n, onValueChange: f };
}
function pe(e) {
function i(n) {
if (!n && typeof n != "string")
return [];
try {
const f = JSON.parse(n);
if (Array.isArray(f))
return f;
} catch {
return [];
}
return [];
}
function u(n) {
return typeof n == "string" ? n : !Array.isArray(n) || n.length === 0 ? "" : JSON.stringify(n);
}
function s() {
const n = e.activeViewModelFieldData || [], f = [];
return n.forEach((t) => {
var l;
f.push(
Object.assign({}, t, { id: t.path, parent: (l = t.parentNode) == null ? void 0 : l.path })
);
}), f;
}
function o() {
const n = s(), f = i(e.modelValue), t = [], l = [], m = {
fieldData: e.fieldData,
varData: e.varData
};
return Promise.resolve({ fieldList: n, conditionList: f, entities: t, variables: l, formContextData: m });
}
function d() {
var n;
P[((n = e.editor) == null ? void 0 : n.type) || e.editorType] = {
type: "filter-condition-editor",
componentProps: {
fields: s(),
singleValue: !1,
beforeOpen: o
},
convertEditorValue2EventParamValue: u
};
}
function c() {
}
return { createEditorProps: d, onValueChange: c };
}
function ve(e) {
function i() {
var s, o;
P[((s = e.editor) == null ? void 0 : s.type) || e.editorType] = {
type: "custom",
componentProps: {},
render: (o = e.editor) == null ? void 0 : o.customRender
};
}
function u() {
}
return { createEditorProps: i, onValueChange: u };
}
function ye(e) {
var T;
const i = h(((T = e.editor) == null ? void 0 : T.type) || e.editorType), u = ue(e), s = de(e), o = B(e), d = ce(e), c = se(e), n = fe(e), f = me(e), t = pe(e), l = ve(e);
function m() {
const C = i.value;
return C === g.Combolist || C === g.Select ? u.createEditorProps() : C === g.Checkbox || (C === g.MenuIdSelector ? c.createEditorProps() : C === g.ConfigurationParameterEditor ? n.createEditorProps() : C === g.SortEditor ? f.createEditorProps() : C === g.FilterEditor ? t.createEditorProps() : C === g.AppIdSelector || (C === g.ComboLookup ? d.createEditorProps() : C === g.Numberbox || (C === g.Switch ? s.createEditorProps() : C === g.Custom ? l.createEditorProps() : o.createEditorProps()))), P[i.value];
}
function b() {
return "input-group";
}
function D() {
return {};
}
return { getEditorConfig: m, getEditorType: b, getEditorMap: D };
}
function ge(e) {
const i = R([
{
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, (o, d) => {
o !== d && (i[0].treeConfigs.data = o);
}), V(() => e.varData, (o, d) => {
o !== d && (i[1].treeConfigs.data = o);
}), V(() => e.formData, (o, d) => {
o !== d && (i[2].treeConfigs.data = o);
}), V(
() => e.showOutline,
() => {
i[2].visible = !!e.showOutline;
},
{ immediate: !0 }
);
function u(o) {
o.forEach((d) => {
Object.keys(d).forEach((c) => {
c.indexOf("__fv") > -1 && delete d[c];
});
});
}
function s() {
u(i[0].treeConfigs.data), u(i[1].treeConfigs.data), u(i[2].treeConfigs.data);
}
return { tabs: i, 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, i) {
const {
isNull: u,
isUndefined: s
} = ne(), o = h(e.id);
B(e);
const d = h(), c = h("tabField"), n = h(), {
getEditorConfig: f
} = ye(e);
V([() => e.editor, () => e.editorType, () => e.data], () => {
n.value = f();
}, {
immediate: !0
});
function t() {
return !u(e.defaultValue) && !s(e.defaultValue) && e.defaultValue !== "" && (u(e.modelValue) || s(e.modelValue) || e.modelValue === "") ? e.defaultValue : e.modelValue;
}
function l(a) {
var r, v;
return (r = n.value) != null && r.checkAndProcessBeforeAssign ? n.value.checkAndProcessBeforeAssign(a) : (v = n.value) != null && v.convertEventParamValue2EditorValue ? n.value.convertEventParamValue2EditorValue(a) : a;
}
const m = h(t());
m.value = l(m.value);
const b = h(m.value);
V(() => e.modelValue, () => {
const a = h(t());
m.value = l(a.value);
}), V(n, () => {
m.value = l(m.value);
}), V(() => e.data, () => {
m.value = l(m.value);
});
const D = X(te), T = h([{
field: "name",
title: "",
dataType: "string"
}]), C = h({
enable: !1
}), _ = h({
customRowStatus: (a) => (a.collapse, a.raw.hasChildren && (a.disabled = !0), a)
}), J = h({
customRowStatus: (a) => (a.layer === 0 && (a.disabled = !0), a)
}), L = N(() => {
var a, r;
return {
// 编辑器类型
type: (a = n.value) == null ? void 0 : a.type,
// 根据不同编辑器，设置不同编辑器的属性
...(r = n.value) == null ? void 0 : r.componentProps,
readonly: e.readonly
};
}), {
tabs: M,
cleanTreeData: A
} = ge(e);
function U(a) {
var r;
(r = n.value) != null && r.convertEditorValue2EventParamValue && (a = n.value.convertEditorValue2EventParamValue(a)), i.emit("update:modelValue", a), i.emit("valueChange", a);
}
function w(a, r) {
const v = r.selectionStart || 0, {
selectionEnd: p
} = r, y = p - v, j = y > 0, k = b.value && b.value.split("") || [];
return j ? k.splice(v, y, a) : k.splice(v, 0, a), k.join("");
}
function $(a, r) {
if (!a.data)
return;
const {
data: v
} = a;
let p = a.parentNode, {
label: y
} = v;
for (; p && p.parentNode; )
p.data && (y = p.data.label + "/" + y), p = p.parentNode;
return w(`{DATA~/${y}}`, r);
}
function H(a, r) {
const {
statePath: v
} = a;
let p = r.value;
if (v) {
const y = v.split("/");
if (p = v, y.length === 3) {
const k = `#{${y[1]}}`;
y.splice(1, 1, k), p = y.join("/");
}
p = `{UISTATE~${p}}`;
}
return w(p, r);
}
function O(a, r, v) {
const p = d.value.getTextareaElement();
switch (a) {
case "tabForm":
b.value = w(`#{${v.data.id}}`, p);
break;
case "tabField":
b.value = $(v, p);
break;
case "tabVar":
b.value = H(v.data, p);
break;
}
i.emit("paramChanged", {
tabId: a,
index: r,
raw: v,
value: m.value
});
}
function G() {
return M.forEach((a) => {
a.treeConfigs.data.forEach((r) => {
Object.prototype.hasOwnProperty.call(r, "__fv_visible__") && delete r.__fv_visible__;
});
}), () => {
let a;
return E(ie, {
class: "nav-tree-panel"
}, {
default: () => [E(I, {
position: "left",
width: 300,
resizable: !1
}, {
default: () => [E(oe, {
activeId: c.value,
"onUpdate:activeId": (r) => c.value = r
}, be(a = M.map((r) => r.visible && E(ae, {
key: r.id,
id: r.id,
title: r.title
}, {
default: () => [r.id === "tabField" && E(x, {
rowNumber: C,
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
rowOption: _.value,
hierarchy: {
collapseField: "collapse"
},
key: r.treeConfigs.id,
data: r.treeConfigs.data,
columns: T.value,
fit: !0,
height: 340,
onDoubleClickRow: function(p, y) {
O(r.id, p, y);
}
}, null), r.id === "tabVar" && E(x, {
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
rowNumber: C,
rowOption: J.value,
key: r.treeConfigs.id,
data: r.treeConfigs.data,
fit: !0,
height: 340,
onDoubleClickRow: function(p, y) {
O(r.id, p, y);
}
}, null), r.id === "tabForm" && E(x, {
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
rowNumber: C,
key: r.treeConfigs.id,
data: r.treeConfigs.data,
columns: T.value,
fit: !0,
height: 340,
onDoubleClickRow: function(p, y) {
O(r.id, p, y);
}
}, null)]
}))) ? a : {
default: () => [a]
})]
}), E(I, {
position: "center"
}, {
default: () => [E(re, {
ref: d,
modelValue: b.value,
"onUpdate:modelValue": (r) => b.value = r,
rows: 10,
autoHeight: !0
}, null)]
})]
});
};
}
function z() {
b.value = m.value;
const a = 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: () => {
a.destroy(), A();
}
}, {
class: "btn btn-primary",
text: "确定",
handle: () => {
m.value = b.value, i.emit("update:modelValue", m.value), i.emit("confirm", m.value), a.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 = () => {
i.emit("update:modelValue", "");
}, Q = () => d.value.elementRef;
return i.expose({
getInputRef: Q
}), () => {
var a, r;
return ((a = n.value) == null ? void 0 : a.type) === "custom" && ((r = n.value) != null && r.render) ? n.value.render() : E(ee, {
id: o.value,
editor: L.value,
modelValue: m.value,
"onUpdate:modelValue": (v) => m.value = v,
showLabel: !1,
customClass: "f-event-parameter",
onChange: U,
onClear: q
}, {
groupTextTemplate: () => K()
});
};
}
});
S.install = (e) => {
e.component(S.name, S);
};
S.register = (e, i, u, s) => {
e["event-parameter"] = S, i["event-parameter"] = S;
};
S.registerDesigner = (e, i, u) => {
e["event-parameter"] = S, i["event-parameter"] = S;
};
export {
g as EditorType,
S as FEventParameter,
S as default,
P as editorMap,
le as eventParameterProps
};