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