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