@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,360 lines • 142 kB
JavaScript
var Mt = Object.defineProperty;
var Ft = (n, t, e) => t in n ? Mt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var S = (n, t, e) => Ft(n, typeof t != "symbol" ? t + "" : t, e);
import { radioCheckboxCommonProps as It, FormSchemaEntityField$Type as Se, FormSchemaEntityFieldType$Type as Le, EVENT_PROPERTY_TAB_IDS as Pe, isMobilePhone as re, getMaxZIndex as Ve, useGuid as xe, withInstall as kt } from "../../components/common/index.esm.js";
import { resolveAppearance as Bt, createPropsResolver as Ne, getPropsResolverGenerator as Ae } from "../../components/dynamic-resolver/index.esm.js";
import Tt, { radioGroupProps as ze } from "../../components/radio-group/index.esm.js";
import { computed as T, createVNode as p, Fragment as J, createTextVNode as Y, nextTick as ie, defineComponent as Z, ref as g, inject as fe, onMounted as Q, Teleport as He, createApp as Ee, onUnmounted as he, watch as G, onBeforeMount as St, watchEffect as Pt, Transition as $e, shallowRef as Vt, render as be, h as Rt, cloneVNode as Ot, mergeProps as Me, withDirectives as Ce, vShow as Lt, onUpdated as Nt, onBeforeUnmount as At, reactive as zt, vModelText as Re } from "vue";
import { DgControl as w, canvasChanged as de, refreshCanvas as Ht, useDesignerComponent as $t } from "../../components/designer-canvas/index.esm.js";
import { cloneDeep as Ue, debounce as We } from "lodash-es";
import { LocaleService as oe } from "../../components/locale/index.esm.js";
import "../../components/property-panel/index.esm.js";
import "../../components/button/index.esm.js";
import "../../components/field-selector/index.esm.js";
import "../../components/collection-property-editor/index.esm.js/src/use-button-items.designer";
import Ut from "../../components/tags/index.esm.js";
import { useInputExpand as Wt } from "../../components/common/index.esm.js/text-box/use-input-expand";
import qt from "../../components/popover/index.esm.js";
import jt from "../../components/drawer/index.esm.js";
import Gt from "../../components/data-grid/index.esm.js";
import { FNotifyService as Kt } from "../../components/notify/index.esm.js";
import "bignumber.js";
const Dt = {
...It,
/**
* 组件标识
*/
id: String,
/**
* 禁用组件,不允许切换单选值
*/
disabled: { type: Boolean, default: !1 },
/**
* 功能同disabled
*/
readonly: { type: Boolean, default: !1 },
/**
* 单选组枚举数组----废弃
*/
enumData: {
type: Array
},
/**
* 单选组枚举数组
*/
data: {
type: Array
},
/**
* 组件值
*/
modelValue: { type: String, default: "" },
/**
* 组件名称
*/
name: { type: String, default: "" },
/**
* 输入框Tab键索引
*/
tabIndex: { type: Number, default: -1 },
/**
* 枚举数组中展示文本的key值。
*/
textField: { type: String, default: "name" },
/**
* 枚举数组中枚举值的key值。
*/
valueField: { type: String, default: "value" }
};
function Xt(n, t, e) {
const o = T(() => !n.disabled), i = T(() => n.data || n.enumData || n.options || []);
function l(r) {
return r[n.valueField];
}
function a(r) {
return r[n.textField];
}
function s(r, d) {
if (o.value) {
const c = l(r);
e.value !== c && (e.value = c, t.emit("change", c), t.emit("changeValue", c), t.emit("update:modelValue", c));
}
d.stopPropagation();
}
return {
enumData: i,
getValue: l,
getText: a,
onClickRadio: s
};
}
function _t(n) {
const { formSchemaUtils: t, formStateMachineUtils: e } = n;
function o(r, d = "") {
return {
path: d + r.code,
field: r.id,
fullPath: r.code
};
}
function i(r, d = "") {
const c = t.getViewModelById(r);
return c ? c.states.map((u) => o(u, d)) : [];
}
function l(r) {
const d = t.getRootViewModelId(), c = i(r);
if (r === d)
return c;
const u = i(d, "root-component.");
return [...c, ...u];
}
function a(r) {
return r.binding && r.binding.path || r.id || "";
}
function s() {
return e && e.getRenderStates() || [];
}
return { getVariables: l, getControlName: a, getStateMachines: s };
}
class Yt {
constructor(t) {
S(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'"
}
]);
S(this, "expressionNames", {
compute: "计算表达式",
dependency: "依赖表达式",
validate: "验证表达式",
dataPicking: "帮助前表达式",
visible: "可见表达式",
readonly: "只读表达式",
required: "必填表达式"
});
S(this, "getExpressionConverter", (t, e) => ({
convertFrom: (o, i, l, a) => {
const s = l.getExpressionRuleValue(t, e || i);
return s && s.value || "";
},
convertTo: (o, i, l, a, s) => {
var r;
if (i === "dataPicking" && (l != null && l.target)) {
const d = `${l.target}_dataPicking`;
((r = l.rules) == null ? void 0 : r.some(
(u) => u.id === d && u.value
)) ? o.dictPickingExpressionId = d : delete o.dictPickingExpressionId;
}
a.updateExpression(l);
}
}));
this.formSchemaService = t;
}
getExpressionRule(t, e) {
const o = this.getExpressionData();
if (!o)
return "";
const i = o.find((a) => a.target === t);
if (!i)
return "";
const l = i.rules.find((a) => a.type === e);
return l || "";
}
// 获取上下文表单变量
getContextFormVariables() {
const { module: t } = this.formSchemaService.getFormSchema();
if (!t.viewmodels || t.viewmodels.length === 0)
return [];
const e = this.formSchemaService.getRootViewModelId(), o = this.formSchemaService.getViewModelById(e);
if (!o || !o.states || o.states.length === 0)
return [];
const i = [];
return o.states.filter((l) => l.category === "remote").forEach((l) => {
i.push({
key: l.code,
name: l.name,
description: l.name,
category: l.category
});
}), i;
}
createTreeNode(t, e, o = "label") {
return {
id: t.id,
name: t.name,
bindingPath: t[o],
parents: e,
type: "field"
};
}
buildEntityFieldsTreeData(t = null, e) {
const o = [];
return t == null || t.forEach((i) => {
var s;
const l = this.createTreeNode(i, e);
let a = [];
(s = i.type) != null && s.fields && (a = this.buildEntityFieldsTreeData(i.type.fields, [...e, i.label])), o.push({
data: l,
children: a,
expanded: !0
});
}), o;
}
buildChildEntityTreeData(t = null, e) {
const o = [];
return t == null || t.forEach((i) => {
var r, d;
const l = this.createTreeNode(i, e);
l.type = "entity";
const a = this.buildEntityFieldsTreeData((r = i.type) == null ? void 0 : r.fields, [...e, i.label]), s = this.buildChildEntityTreeData((d = i.type) == null ? void 0 : d.entities, [...e, i.label]);
s != null && s.length && (a == null || a.push(...s)), o.push({
data: l,
children: a || [],
// 空值回退
expanded: !0
});
}), o;
}
getEntitiesTreeData() {
const t = this.formSchemaService.getSchemaEntities();
if (!(t != null && t.length))
return [];
const e = t[0];
if (!(e != null && e.type))
return [];
const o = this.buildEntityFieldsTreeData(e.type.fields, [e.code]), i = this.buildChildEntityTreeData(e.type.entities, [e.code]);
return i != null && i.length && (o == null || o.push(...i)), {
entityCode: e.code,
fields: [{
data: this.createTreeNode(e, [], "code"),
children: o || []
}]
};
}
getEntitiesAndVariables() {
return {
entities: this.getEntitiesTreeData(),
variables: {
session: {
name: "系统变量",
items: this.sessionVariables,
visible: !1
},
forms: {
name: "表单变量",
items: this.getContextFormVariables(),
visible: !0
}
}
};
}
onBeforeOpenExpression(t, e, o) {
const i = o === "Field" ? t.binding.field : t.id, l = this.getExpressionRule(i, e), a = this.getEntitiesAndVariables(), s = {
message: ["validate", "required", "dataPicking"].includes(e) && l ? l.message : "",
...a
};
return l.messageType != null && (s.messageType = l.messageType), s;
}
buildRule(t, e, o, i) {
const { expression: l, message: a, messageType: s } = e, r = {
id: `${t}_${o}`,
type: o,
value: l
};
return (o === "validate" || o === "dataPicking" || o === "required") && (r.message = a), o === "dataPicking" && (r.messageType = s), o === "validate" && i && (r.elementId = i), r;
}
getExpressionData() {
const { expressions: t } = this.formSchemaService.getFormSchema().module;
return t || [];
}
updateExpression(t, e, o, i) {
const l = e === "Field" ? t.binding.field : t.id, a = this.buildRule(l, o, i, t.type === "form-group" ? t.id : "");
let r = this.getExpressionData().find((c) => c.targetType === e && c.target === l);
const d = (c) => c.value.trim() === "";
if (r) {
const c = r.rules.find((u) => u.id === a.id);
if (c)
d(a) ? r.rules = r.rules.filter((u) => u.id !== a.id) : (Object.assign(c, a), i === "validate" && t.type === "form-group" && (c.elementId = t.id));
else {
if (d(a))
return null;
r.rules = r.rules || [], r.rules.push(a);
}
} else {
if (d(a))
return null;
r = {
target: `${l}`,
rules: [a],
targetType: e
};
}
return r;
}
getExpressionEditorOptions(t, e, o, i) {
return o.reduce((l, a) => {
var r, d;
const s = e === "Field" ? (r = t == null ? void 0 : t.binding) == null ? void 0 : r.field : t.id;
return l[a] = {
hide: e === "Field" ? !!((d = t == null ? void 0 : t.binding) != null && d.field) : !1,
description: "",
title: this.expressionNames[a],
type: "string",
$converter: this.getExpressionConverter(s),
refreshPanelAfterChanged: !0,
editor: {
type: "expression-editor",
singleExpand: !1,
dialogTitle: `${this.expressionNames[a]}编辑器`,
showMessage: a === "validate" || a === "dataPicking" || a === "required",
showMessageType: a === "dataPicking",
beforeOpen: () => this.onBeforeOpenExpression(t, a, e),
onSubmitModal: (c) => {
const u = this.updateExpression(t, e, c, a);
if (i) {
const b = this.buildRule(s, c, a);
i(b);
}
return u;
}
}
}, l;
}, {});
}
getExpressionInfo(t, e, o) {
const i = e === "Field" ? t.binding.field : t.id, l = this.getExpressionRule(i, o), a = {
value: l && l.value,
targetId: i,
targetType: e,
expressionType: o
};
return l && l.message && (a.message = l.message), a;
}
getExpressionConfig(t, e, o = ["compute", "dependency", "validate"], i) {
var l;
return {
description: "表达式",
title: "表达式",
hide: !(t.binding && ((l = t.binding) == null ? void 0 : l.type) === "Form"),
properties: {
...this.getExpressionEditorOptions(t, e, o, i)
}
};
}
getExpressionOptions(t, e, o) {
const i = this.getExpressionInfo(t, e, o);
return {
dialogTitle: `${this.expressionNames[o] || "表达式"}编辑器`,
singleExpand: !1,
showMessage: o === "required",
beforeOpen: () => this.onBeforeOpenExpression(t, o, e),
expressionInfo: i
};
}
}
class Jt {
constructor(t, e) {
S(this, "componentId");
S(this, "viewModelId");
S(this, "eventsEditorUtils");
S(this, "formSchemaUtils");
S(this, "formMetadataConverter");
S(this, "designViewModelUtils");
S(this, "designViewModelField");
S(this, "controlCreatorUtils");
S(this, "designerHostService");
S(this, "designerContext");
S(this, "modalService", null);
/** 表单规则 */
S(this, "formRule", null);
S(this, "schemaService", null);
S(this, "metadataService", null);
S(this, "propertyConfig", {
type: "object",
categories: {}
});
S(this, "expressionProperty");
var o;
this.componentId = t, this.designerHostService = e, this.eventsEditorUtils = e.eventsEditorUtils, this.formSchemaUtils = e.formSchemaUtils, this.formMetadataConverter = e.formMetadataConverter, this.viewModelId = ((o = this.formSchemaUtils) == null ? void 0 : o.getViewModelIdByComponentId(t)) || "", this.designViewModelUtils = e.designViewModelUtils, this.controlCreatorUtils = e.controlCreatorUtils, this.metadataService = e.metadataService, this.schemaService = e.schemaService, this.designerContext = e.designerContext, this.modalService = e.modalService, this.expressionProperty = new Yt(this.formSchemaUtils);
}
/**
* 是否在响应式表单中
*/
inResponsiveForm() {
var t;
return !!((t = this.designerContext) != null && t.responsiveForm);
}
getFormDesignerInstance() {
var t, e;
return (e = (t = this.designerContext) == null ? void 0 : t.instances) == null ? void 0 : e.formDesigner.value;
}
getTableInfo() {
var t;
return (t = this.schemaService) == null ? void 0 : t.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(t) {
var o;
const e = t.binding && t.binding.type === "Form" && t.binding.field;
if (e) {
if (!this.designViewModelField) {
const i = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = i.fields.find((l) => l.id === e);
}
t.updateOn = (o = this.designViewModelField) == null ? void 0 : o.updateOn;
}
}
getBasicPropConfig(t) {
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: t.type, name: w[t.type] && w[t.type].name }]
}
}
}
};
}
getAppearanceConfig(t = null, e = {}, o) {
const i = {
title: "外观",
description: "Appearance"
}, l = {
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 a in e)
l[a] = Object.assign(l[a] || {}, e[a]);
return {
...i,
properties: { ...l },
setPropertyRelates(a, s) {
if (a) {
switch (a && a.propertyID) {
case "class":
case "style": {
de.value++;
break;
}
}
o && o(a, t, s);
}
}
};
}
/**
*
* @param propertyData
* @param propertyTypes
* @param propertyName
* @param constInfos
* @param variableInfos
* @param expressionType 指定表达式类型,存在属性和表达式类型不一致的情况
* @returns
*/
getPropertyEditorParams(t, e = [], o = "visible", i = {}, l = {}, a = "") {
const { getVariables: s, getControlName: r, getStateMachines: d } = _t(this.designerHostService), c = this.getRealTargetType(t), u = e && e.length > 0 ? e : ["Const", "Variable", "StateMachine", "Expression"], b = {
type: "property-editor",
propertyTypes: u
};
return u.map((h) => {
switch (h) {
case "Const":
Object.assign(b, {
constType: "enum",
constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
}, i);
break;
case "Expression":
b.expressionConfig = this.getExpressionOptions(t, c, a || o);
break;
case "StateMachine":
b.stateMachines = d();
break;
case "Variable":
Object.assign(b, {
controlName: r(t),
newVariablePrefix: "is",
newVariableType: "Boolean",
variables: s(this.viewModelId),
parentComponentId: this.componentId === "root-component" ? "" : "root-component",
onBeforeOpenVariables: (m) => {
m.value = s(this.viewModelId);
}
}, l), this.designerContext.designerMode === "PC_RTC" && (b.newVariablePrefix = "ext_" + b.newVariablePrefix);
break;
}
}), b;
}
getVisibleProperty(t, e = "") {
var l;
let o = ["Const", "Variable", "StateMachine", "Expression"];
return e === "gridFieldEditor" ? o = ["Const", "Expression"] : e === "form-group" && !((l = t.binding) != null && l.field) ? o = ["Const", "Variable", "StateMachine", "Custom"] : e === "dataGrid" || e === "treeGrid" || e === "wizard" ? o = ["Const", "Variable", "Expression"] : (t.type.indexOf("toolbar-item") > -1 || e === "form-group") && (o = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
visible: {
title: "是否可见",
type: "boolean",
description: "运行时组件是否可见",
editor: this.getPropertyEditorParams(t, o, "visible")
}
};
}
/**
* 获取行为
* @param propertyData
* @param viewModelId
* @returns
*/
getBehaviorConfig(t, e = "", o = {}, i) {
const l = {
title: "行为",
description: ""
}, a = this.getVisibleProperty(t, e);
for (const r in o)
a[r] = Object.assign(a[r] || {}, o[r]);
const s = this;
return {
...l,
properties: { ...a },
setPropertyRelates(r, d) {
if (r) {
switch (r.propertyID) {
case "disabled":
case "readonly":
case "visible":
s.afterMutilEditorChanged(t, r);
break;
}
i && i(r, d);
}
}
};
}
/**
* 当多值编辑器变更时
* @param propertyData
* @param changeObject
*/
afterMutilEditorChanged(t, e) {
this.addNewVariableToViewModel(e, this.viewModelId), this.updateExpressionValue(e, t), this.clearExpression(e, t);
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(t, e) {
const o = e && e.parent && e.parent.schema;
if (!o)
return;
const i = o.contents.findIndex((a) => a.id === t), l = Ue(o.contents[i]);
o.contents.splice(i, 1), o.contents.splice(i, 0, l), Ht();
}
/**
* 属性编辑器,在编辑过程中会新增变量,此处需要将新增的变量追加到ViewModel中
* @param changeObject
* @param viewModelId
* @returns
*/
addNewVariableToViewModel(t, e) {
const o = t.propertyValue;
if (!(o && typeof o == "object") || !(o.type === "Variable" && o.isNewVariable))
return;
const a = {
id: o.field,
category: "locale",
code: o.fullPath,
name: o.fullPath,
type: o.newVariableType || "String",
isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
};
delete o.newVariableType, delete o.isNewVariable, this.formSchemaUtils.getVariableByCode(a.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(a);
}
getExpressions() {
let t = [];
return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], t = this.formRule.expressions || []) : t = this.formSchemaUtils.getExpressions(), t;
}
/**
* 更新表达式到expressions节点
* @param changeObject
*/
updateExpressionValue(t, e) {
const o = t.propertyValue;
if (!((o && o.type) === "Expression" && o.expressionInfo))
return;
const { expressionId: a, expressionInfo: s } = o, { targetId: r, targetType: d, expressionType: c, value: u, message: b } = s, h = this.getExpressions();
let m = h.find((M) => M.target === r);
m || (m = { target: r, rules: [], targetType: d }, h.push(m));
const f = m.rules.find((M) => M.type === c);
if (f)
f.id = a, f.value = u, f.message = b, (c === "minDate" || c === "maxDate" || c === "defaultTime") && (f.elementId = e.id);
else {
const M = { id: a, type: c, value: u, message: b, elementId: e.id };
m.rules.push(M);
}
delete o.expressionInfo;
}
/**
* 属性类型切换为非表达式后,清除原表达式
* @param changeObject
* @param propertyData
* @returns
*/
clearExpression(t, e) {
const o = t.propertyValue;
if (o && o.type === "Expression")
return;
const l = t.propertyID, a = this.getExpressions(), s = e.binding ? e.binding.field : e.id, r = a.find((d) => d.target === s);
!r || !r.rules || (r.rules = r.rules.filter((d) => d.type !== l));
}
getExpressionOptions(t, e, o) {
return this.expressionProperty.getExpressionOptions(t, e, o);
}
getRealTargetType(t) {
return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(t.type) > -1 ? "Button" : t.binding && t.binding.field ? "Field" : "Container";
}
createBaseEventProperty(t) {
const e = {};
return e[this.viewModelId] = {
type: "events-editor",
editor: {
initialData: t,
viewSourceHandle: (o) => {
var i;
((i = o.controller) == null ? void 0 : i.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(o);
}
}
}, e;
}
}
const le = class le {
/**
* 根据绑定字段类型获取可用的输入类控件
*/
static getEditorTypesByMDataType(t, e = !1, o = "") {
if (e)
return [{ key: w["language-textbox"].type, value: w["language-textbox"].name }];
let i = le.fieldControlTypeMapping[t];
if (o === "data-grid-column" && (i != null && i.length)) {
const l = [w["check-group"].type, w["radio-group"].type, w.image.type, w["rich-text-editor"].type, w.avatar.type];
i = i.filter((a) => !l.includes(a.key));
}
return i;
}
/**
* 获取所有输入类控件
*/
static getAllInputTypes() {
const t = [];
for (const e in le.fieldControlTypeMapping)
le.fieldControlTypeMapping[e].forEach((o) => {
t.find((i) => i.key === o.key && i.value === o.value) || t.push({ key: o.key, value: o.value });
});
return t;
}
/**
* 提供schema字段基础属性和DOM控件属性的映射
* @param control 控件元数据
*/
static mappingDomPropAndSchemaProp(t, e) {
var l;
const o = (l = t.editor) == null ? void 0 : l.type, i = [];
return (t.type === w["data-grid-column"].type || t.type === w["tree-grid-column"].type) && e && e.categoryId && e.categoryId.indexOf("gridFieldEditor") < 0 && i.push({ domField: "title", schemaField: "name" }), i.push({ domField: "label", schemaField: "name" }), i.push({ domField: "editor.required", schemaField: "require" }), i.push({ domField: "editor.readonly", schemaField: "readonly" }), (o === w["input-group"].type || o === w.textarea.type || o === w["number-spinner"].type) && i.push({ domField: "editor.maxLength", schemaField: "type.length" }), o === w["number-spinner"].type && i.push({ domField: "editor.precision", schemaField: "type.precision" }), (t.type === w["data-grid-column"].type || t.type === w["tree-grid-column"].type) && i.push({ domField: "formatter.precision", schemaField: "type.precision" }), (o === w["combo-list"].type || o === w["radio-group"].type) && i.push({ domField: "editor.data", schemaField: "type.enumValues" }), (t.type === w["data-grid-column"].type || t.type === w["tree-grid-column"].type) && i.push({ domField: "formatter.data", schemaField: "type.enumValues" }), o === w["date-picker"].type && (i.push({ domField: "editor.displayFormat", schemaField: "editor.format" }), i.push({ domField: "editor.fieldType", schemaField: "type.name" })), o === w["number-spinner"].type && (i.push({ domField: "editor.max", schemaField: "editor.maxValue" }), i.push({ domField: "editor.min", schemaField: "editor.minValue" })), o === w.lookup.type && (i.push({ domField: "editor.dataSource", schemaField: "editor.dataSource" }), i.push({ domField: "editor.valueField", schemaField: "editor.valueField" }), i.push({ domField: "editor.textField", schemaField: "editor.textField" }), i.push({ domField: "editor.displayType", schemaField: "editor.displayType" }), i.push({ domField: "editor.mapFields", schemaField: "editor.mapFields" }), i.push({ domField: "editor.helpId", schemaField: "editor.helpId" })), i.push({ domField: "path", schemaField: "bindingPath" }), i.push({ domField: "binding.path", schemaField: "bindingField" }), i.push({ domField: "binding.fullPath", schemaField: "path" }), (t.type === w["data-grid-column"].type || t.type === w["tree-grid-column"].type) && i.push({ domField: "field", schemaField: "bindingPath" }), i;
}
};
/**
* <字段类型,可配置的控件类型列表>的映射
*/
S(le, "fieldControlTypeMapping", {
String: [
{ key: w["input-group"].type, value: w["input-group"].name },
{ key: w.lookup.type, value: w.lookup.name },
{ key: w.image.type, value: w.image.name },
{ key: w["date-picker"].type, value: w["date-picker"].name },
{ key: w.switch.type, value: w.switch.name },
{ key: w["check-box"].type, value: w["check-box"].name },
{ key: w["check-group"].type, value: w["check-group"].name },
{ key: w["radio-group"].type, value: w["radio-group"].name },
{ key: w["combo-list"].type, value: w["combo-list"].name },
{ key: w.textarea.type, value: w.textarea.name },
{ key: w["time-picker"].type, value: w["time-picker"].name },
{ key: w["rich-text-editor"].type, value: w["rich-text-editor"].name }
],
Text: [
{ key: w.textarea.type, value: w.textarea.name },
{ key: w.lookup.type, value: w.lookup.name },
{ key: w.image.type, value: w.image.name },
{ key: w.avatar.type, value: w.avatar.name },
{ key: w["rich-text-editor"].type, value: w["rich-text-editor"].name }
],
Decimal: [
{ key: w["number-spinner"].type, value: w["number-spinner"].name }
],
Integer: [
{ key: w["number-spinner"].type, value: w["number-spinner"].name }
],
Number: [
{ key: w["number-spinner"].type, value: w["number-spinner"].name },
{ key: w.switch.type, value: w.switch.name },
{ key: w["check-box"].type, value: w["check-box"].name }
],
BigNumber: [
{ key: w["number-spinner"].type, value: w["number-spinner"].name }
],
Date: [
{ key: w["date-picker"].type, value: w["date-picker"].name }
],
DateTime: [
{ key: w["date-picker"].type, value: w["date-picker"].name }
],
Boolean: [
{ key: w.switch.type, value: w.switch.name },
{ key: w["check-box"].type, value: w["check-box"].name }
],
Enum: [
{ key: w["combo-list"].type, value: w["combo-list"].name },
{ key: w["radio-group"].type, value: w["radio-group"].name }
],
Object: [
{ key: w.lookup.type, value: w.lookup.name },
{ key: w["combo-list"].type, value: w["combo-list"].name }
// { key: DgControl['radio-group'].type, value: DgControl['radio-group'].name },
]
});
let me = le;
var ae = /* @__PURE__ */ ((n) => (n.Form = "Form", n.Variable = "Variable", n))(ae || {});
class Oe {
constructor() {
/** 控件标题 */
S(this, "label", "");
/** 控件id */
S(this, "id", "");
/** 每个控件占用的栅格数 */
S(this, "columnInSM", 12);
S(this, "columnInMD", 6);
S(this, "columnInLG", 3);
S(this, "columnInEL", 2);
/** 每个控件占用的列数 */
S(this, "displayWidthInSM", 1);
S(this, "displayWidthInMD", 1);
S(this, "displayWidthInLG", 1);
S(this, "displayWidthInEL", 1);
/** 编辑器内部默认显示的屏幕大小-----可以去掉 */
S(this, "displayColumnCountAtBreakPoint", "md");
/** 控件所在行,传0即可-----编辑器内部使用 */
S(this, "tagRow", 0);
/** 控件是否显示上方空白:传0即可-----编辑器内部使用 */
S(this, "showTopBorder", 0);
/** 区域,从1开始。卡片内的控件从上往下,从左往右划分区域,遇到分组fieldSet时group+1,分组结束后group+1 */
S(this, "group", 1);
/** 控件是否符合标准的class配置(设计器用的) */
S(this, "isSupportedClass", !0);
/** 控件所在分组id(设计器用的) */
S(this, "fieldSetId", "");
}
}
function Zt(n) {
let t, e;
const o = /* @__PURE__ */ new Map();
let i = [];
function l(c, u) {
const h = (c || "").split(" ").filter((E) => E.startsWith("col-"));
if (h.length === 0) {
u.isSupportedClass = !1;
return;
}
let m = h.find((E) => /^col-([1-9]|10|11|12)$/.test(E)), f = h.find((E) => /^col-md-([1-9]|10|11|12)$/.test(E)), M = h.find((E) => /^col-xl-([1-9]|10|11|12)$/.test(E)), I = h.find((E) => /^col-el-([1-9]|10|11|12)$/.test(E));
m = m || "col-12", u.columnInSM = parseInt(m.replace("col-", ""), 10), u.displayWidthInSM = u.columnInSM / 12, u.displayWidthInSM !== 1 && (u.isSupportedClass = !1), f = f || "col-md-" + u.columnInSM, u.columnInMD = parseInt(f.replace("col-md-", ""), 10), u.displayWidthInMD = u.columnInMD / 6, [1, 2].includes(u.displayWidthInMD) || (u.isSupportedClass = !1), M = M || "col-xl-" + u.columnInMD, u.columnInLG = parseInt(M.replace("col-xl-", ""), 10), u.displayWidthInLG = u.columnInLG / 3, [1, 2, 3, 4].includes(u.displayWidthInLG) || (u.isSupportedClass = !1), I = I || "col-el-" + u.columnInLG, u.columnInEL = parseInt(I.replace("col-el-", ""), 10), u.displayWidthInEL = u.columnInEL / 2, [1, 2, 3, 4, 5, 6].includes(u.displayWidthInEL) || (u.isSupportedClass = !1);
}
function a(c, u, b, h = !1) {
let m = !1;
if (!c.contents || c.contents.length === 0) {
const f = new Oe();
l(c.layout, f), u.push(f);
return;
}
c.contents.forEach((f) => {
if (f.type === "fieldset") {
b += 1, a(f, u, b, !0), m = !0;
return;
}
if (f.type === "dynamic-form")
return;
m && (b += 1, m = !1);
const M = f.appearance && f.appearance.class, I = new Oe();
M ? l(M, I) : I.isSupportedClass = !1, I.label = f.label || f.id, I.id = f.id, I.group = b, h && (I.fieldSetId = c.id), e === f.id && (t = b), o.set(f.id, f), u.push(I);
});
}
function s(c) {
const u = n.getComponentById(c);
if (!u || !u.componentType || !u.componentType.startsWith("form"))
return { result: !1, message: "只可以在响应式表单组件中调整响应式布局配置" };
const b = n.selectNode(u, (h) => h.type === w["response-form"].type);
return !b || !b.contents || b.contents.length === 0 ? { result: !1, message: "Form区域内没有控件,请先添加控件" } : { result: !0, message: "", formNode: b };
}
function r(c, u) {
u = u || c.id;
const { result: b, message: h, formNode: m } = s(u);
if (!b)
return { result: b, message: h };
e = c.id, i = [], o.clear();
const f = m.contents[0].type === w.fieldset.type ? 0 : 1;
a(m, i, f);
const M = i.find((E) => !E.isSupportedClass);
return {
defaultState: {
defaultGroupNumber: t || 1,
model: M ? "customize" : "standard"
},
importData: i
};
}
function d(c, u) {
u = u;
const { result: b, formNode: h } = s(u);
if (!b)
return "";
const m = [];
return c.forEach((f) => {
var E;
const M = o.get(f.id), I = M.appearance && M.appearance.class;
if (I) {
const N = I.split(" ").filter((L) => !L.startsWith("col-")), H = "col-" + f.columnInSM, $ = "col-md-" + f.columnInMD, y = "col-xl-" + f.columnInLG, C = "col-el-" + f.columnInEL, B = [H, $, y, C].concat(N);
M.appearance.class = B.join(" ");
}
if (f.fieldSetId) {
const V = h.contents.find((H) => H.id === f.fieldSetId), N = m.find((H) => H.id === f.fieldSetId);
N ? (E = N.contents) == null || E.push(M) : (m.push(V), V.contents = [M]);
} else
m.push(M);
}), h.contents = m, h.id;
}
return {
checkCanFindFormNode: s,
checkCanOpenLayoutEditor: r,
changeFormControlsByResponseLayoutConfig: d,
getResonseFormLayoutConfig: a
};
}
const Qt = (n) => p(J, null, [p("h5", null, [Y("代码示例")]), p("pre", {
style: "background-color: #f5f5f5; padding: 10px; border-radius: 5px;"
}, [p("code", null, [`
<h3>Tips:</h3>
<span style="color: blue;">
自定义提示内容
</span>
`])])]);
class en extends Jt {
constructor(e, o) {
super(e, o);
S(this, "responseLayoutEditorFunction");
/** 控件绑定的变量 */
S(this, "bindingVarible");
S(this, "formGroupEvents", [
{
label: "fieldValueChanging",
name: "绑定字段值变化前事件"
},
{
label: "fieldValueChanged",
name: "绑定字段值变化后事件"
},
{
label: "onClickLabel",
name: "标签点击事件"
}
]);
S(this, "numberEditorOptions", {
type: "number-spinner",
useThousands: !1,
keyboard: !1,
showButton: !1
});
S(this, "showCustomValue", (e) => {
var i;
const o = this.designViewModelField != null && ((i = this.designViewModelField) == null ? void 0 : i.type.name) !== "Boolean";
return this.formRule ? e.dataType !== "boolean" : o;
});
this.responseLayoutEditorFunction = Zt(this.formSchemaUtils);
}
getCommonPropertyConfig(e, o, i = "Card") {
if (this.propertyConfig.categories.basic = this.getBasicProperties(e, o, i), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e, o), this.propertyConfig.categories.behavior = this.getBehaviorConfig(e, "form-group"), i === "Card") {
const l = this.getTipsConfig(e);
this.propertyConfig.categories.behavior.properties = { ...this.propertyConfig.categories.behavior.properties, ...l }, ["time-picker", "date-picker", "lookup", "combo-list", "number-spinner", "input-group", "language-textbox"].includes(e.editor.type) && (this.propertyConfig.categories.expansion = this.getExpandProperties(e, i));
}
}
getPropertyConfig(e, o) {
return this.getCommonPropertyConfig(e, o, "Card"), this.propertyConfig.categories.editor = this.getEditorProperties(e), this.propertyConfig.categories.expressions = this.getExpressionConfig(e, "Field"), this.propertyConfig.categories.eventsEditor = this.getEventPropertyConfig(e), this.propertyConfig;
}
getGridFieldEdtiorPropConfig(e, o) {
return this.propertyConfig.categories = {}, this.getCommonPropertyConfig(e, o, "Grid"), this.getGridFieldEdtiorProperties ? this.propertyConfig.categories.editor = this.getGridFieldEdtiorProperties(e) : this.propertyConfig.categories.editor = this.getEditorProperties(e), this.propertyConfig.categories.expressons = this.getExpressionConfig(e, "Field"), this.propertyConfig.categories;
}
getBasicProperties(e, o, i = "Card") {
var u;
const l = this;
this.setDesignViewModelField(e);
const { canChangeControlType: a, editorTypeList: s } = this.getAvailableEditorType(e), r = this.getPropertyEditorParams(e, ["Variable"], "label", {}, {
newVariablePrefix: "",
newVariableType: "String"
});
let d = s;
this.formRule && (d = s.filter((b) => b.key !== "image" && b.key !== "rich-text-editor" && b.key !== "avatar"));
const c = {
description: "Basic Information",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "编辑器类型",
title: "编辑器类型",
type: "string",
$converter: "/converter/change-editor.converter",
parentPropertyID: "editor",
editor: {
type: "combo-list",
textField: "value",
valueField: "key",
idField: "key",
editable: !1,
data: d,
readonly: !a
}
},
titleSourceType: {
description: "标签来源类型",
title: "标签类型",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
type: "combo-list",
textField: "name",
valueField: "id",
idField: "id",
editable: !1,
data: [{ id: "static", name: "静态" }, { id: "dynamic", name: "动态" }]
},
defaultValue: "static"
},
label: {
title: "标签",
type: "string",
$converter: "/converter/form-group-label.converter",
visible: !e.titleSourceType || e.titleSourceType === "static"
},
titleDataSource: {
description: "标签",
title: "标签",
type: "string",
editor: r,
visible: e.titleSourceType === "dynamic"
},
showLabelType: {
description: "标签显示方式:1、显示:显示标签 2、占位:保留标签空间,但不显示文本 3、不显示:不显示标签",
title: "标签显示",
type: "enum",
editor: {
data: [{ id: "visible", name: "显示" }, { id: "reserve-space", name: "占位" }, { id: "none", name: "不显示" }]
},
defaultValue: ((u = e.editor) == null ? void 0 : u.type) === "image" ? "none" : "visible"
},
binding: {
description: "绑定的表单字段",
title: "绑定",
editor: {
type: "binding-selector",
bindingType: { enable: !0 },
title: "绑定编辑器",
editorParams: {
componentSchema: e,
needSyncToViewModel: !0,
viewModelId: this.viewModelId,
designerHostService: this.designerHostService,
disableOccupiedFields: !0
},
textField: "bindingField"
},
refreshPanelAfterChanged: !0,
readonly: this.formSchemaUtils.designerMode === "PC_RTC" && !e.isRtcControl
}
},
setPropertyRelates(b, h, m) {
if (b)
switch (b && b.propertyID) {
case "type": {
l.changeControlType(e, b, o);
break;
}
case "label": {
b.needRefreshControlTree = !0;
break;
}
case "binding": {
l.changeBindingField(e, b, m);
break;
}
case "titleDataSource": {
l.afterMutilEditorChanged(e, b);
break;
}
}
}
};
return i.toLocaleLowerCase() !== "card" && (c.hide = !0, delete c.properties.showLabelType), c;
}
getExpandProperties(e, o = "Card") {
const i = this, l = ["Const", "Variable"], a = this.getPropertyEditorParams(e, l, "expandable"), s = this.getPropertyEditorParams(e, l, "expandDisabled");
return o === "Card" ? {
description: "Expand Information",
hide: !!this.formRule,
title: "扩展区域",
properties: {
expandable: {
description: "扩展区域是指输入框右侧的区域,常用于展示自定义按钮或者文本,以便于丰富输入控件的展示内容。",
title: "启用扩展区域",
refreshPanelAfterChanged: !0,
$converter: "/converter/property-editor.converter",
editor: a
},
expandMode: {
description: "静态文本:扩展内容不可点击;交互式按钮:扩展内容可以点击并配置交互事件。",
title: "扩展模式",
type: "enum",
refreshPanelAfterChanged: !0,
$converter: "/converter/property-editor.converter",
editor: {
data: [{ id: "text", name: "静态文本" }, { id: "button", name: "交互按钮" }]
},
defaultValue: "text",
visible: !!e.editor.expandable
},
expandContent: {
$converter: "/converter/property-editor.converter",
description: "扩展区域内展示的文本内容",
title: "扩展内容",
type: "string",
visible: !!e.editor.expandable,
editor: {
type: "code-editor",
language: "html"
}
},
expandDisabled: {
$converter: "/converter/property-editor.converter",
description: "是否动态隐藏扩展区域,常用于根据变量或自定义条件配置扩展区域的隐藏状态。",
title: "隐藏扩展区域",
editor: s,
visible: !!e.editor.expandable
}
},
setPropertyRelates(d, c) {
if (d)
switch (d.propertyID) {
case "expandable":
case "expandDisabled":
i.afterMutilEditorChanged(e, d);
break;
}
}
} : {
properties: {}
};
}
/**
* 校验控件是否支持切换类型
* @param control 控件
*/
checkCanChangeControlType(e, o) {
if (!e.binding)
return !1;
if (e.binding.type === "Variable") {
if (this.bindingVarible = this.formSchemaUtils.getVariableById(e.binding.field), !this.bindingVarible)
return !1;
} else if (!this.designViewModelField || this.designViewModelField.$type !== Se.SimpleField)
return !1;
return !0;
}
/**
* 获取可选的编辑器类型
*/
getAvailableEditorType(e) {
var l, a;
const o = this.checkCanChangeControlType(e, this.viewModelId);
if (!o)
return {
canChangeControlType: !1,
editorTypeList: [{
key: e.editor.type,
value: ((l = w[e.editor.type]) == null ? void 0 : l.name) || e.editor.type
}]
};
let i = [];
return this.designViewModelField && this.designViewModelField.$type === Se.SimpleField ? i = me.getEditorTypesByMDataType(this.designViewModelField.type.name, this.designViewModelField.multiLanguage) : this.bindingVarible && (i = me.getEditorTypesByMDataType(this.bindingVarible.type, !!((a = this.designViewModelField) != null && a.multiLanguage))), { canChangeControlType: o, editorTypeList: i };
}
changeBindingField(e, o, i) {
o.needRefreshEntityTree = !0;
}
getAppearanceProperties(e, o) {
const i = this;
return {
title: "外观",
description: "Appearance",
properties: {
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"
},
fill: {
title: "填充宽度",
description: "启用后,控件占满父容器宽度",
type: "boolean",
parentPropertyID: "appearance",
defaultValue: !1
},
responseLayout: {
description: "响应式列宽",
title: "响应式列宽",
type: "boolean",
visible: !i.formRule,
// 这个属性,标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
editor: {
type: "response-layout-editor-setting",
beforeOpen: () => i.responseLayoutEditorFunction.checkCanOpenLayoutEditor(e, i.componentId)
}
}
},
setPropertyRelates(l, a) {
if (l)
switch (l && l.propertyID) {
case "responseLayout":
i.responseLayoutEditorFunction.changeFormControlsByResponseLayoutConfig(l.propertyValue, i.componentId || e.id), i.updateUnifiedLayoutAfterResponseLayoutChanged(i.componentId), i.updateElementByParentContainer(e.id, o), delete e.responseLayout;
break;
case "class":
i.updateUnifiedLayoutAfterControlChanged(l.propertyValue, e.id, this.componentId), de.value++;
break;
case "style": {
de.value++;
break;
}
}
}
};
}
getEditorProperties(e) {
return this.getComponentConfig(e);
}
/**
* 卡片控件:切换控件类型后事件
* @param propertyData 控件DOM属性
* @param newControlType 新控件类型
*/
changeControlType(e, o, i) {
var m;
const l = o.propertyValue, a = i && i.parent && i.parent.schema;
if (!a)
return;
const s = a.contents.findIndex((f) => f.id === e.id);
if (s === -1)
return;
const r = a.contents[s];
let d;
if (this.designViewModelField) {
const I = this.formSchemaUtils.getViewModelById(this.viewModelId).fields.find((V) => V.id === this.designViewModelField.id).fieldSchema || {};
I.editor || (I.editor = {}), I.editor.$type = l, this.designViewModelUtils.getDgViewModel(this.viewModelId).changeField(this.designViewModelField.id, I, !1), d = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, l);
}
d || (d = this.controlCreatorUtils.createFormGroupWithoutField(l)), Object.assign(d, {
id: r.id,
appearance: r.appearance,
size: r.size,
label: r.label,
binding: r.binding
}), Object.prototype.hasOwnProperty.call(r, "visible") && Object.assign(d, { visible: r.visible }), r.editor && ["readonly", "required", "placeholder"].map((f) => {
Object.prototype.hasOwnProperty.call(r.editor, f) && (d.editor[f] = r.editor[f]);
});
const c = ["image", "avatar"], u = r.editor.type && c.indexOf(r.editor.type) > -1, b = ((m = d.editor) == null ? void 0 : m.type) && c.indexOf(d.editor.type) > -1;
u && r.showLabelType === "none" && !b && (d.showLabelType = "visible"), i != null && i.updateContextSchema ? i.updateContextSchema(d) : (i.schema = Object.assign(r, d), Object.assign(e, d)), Array.from(document.getElementsByClassName("dgComponentSelected")).forEach(
(f) => f.classList.remove("dgComponentSelected")
), Array.from(document.getElementsByClassName("dgComponentFocused")).forEach(
(f) => f.classList.remove("dgComponentFocused")
), ["time-picker", "date-picker", "lookup", "combo-list", "number-spinner", "input-group", "textarea", "rich-text-editor", "language-textbox"].includes(e.editor.type) || (e.enableTips = !1), de.value++, ie(() => {
this.getFormDesignerInstance().reloadPropertyPanel();
});
}
getTipsConfig(e) {
return ["time-picker", "date-picker", "lookup", "combo-list", "number-spinner", "input-group", "textarea", "rich-text-editor", "language-textbox"].includes(e.editor.type) ? {
enableTips: {
refreshPanelAfterChanged: !0,
description: "",
title: "启用提示",
type: "boolean",
default: !1,
visible: !this.formRule
},
tipsContent: {
description: "提示内容",
title: "提示内容",
type: "string",
editor: {
type: "code-editor",
language: "html",
leftTemplate: Qt
},
visible: !!e.enableTips && !this.formRule
}
} : {};
}
getComponentConfig(e, o = {}, i = {}, l) {
var b, h, m;
const a = Object.assign({
description: "编辑器",
title: "编辑器",
type: "input-group",
$converter: "/converter/property-editor.converter",
parentPropertyID: "editor"
}, o), s = (b = e.binding) != null && b.field ? ["Const", "Variable", "StateMachine", "Custom", "Expression"] : ["Const", "Variable", "StateMachine", "Custom"], r = this.getPropertyEditorParams(e, s, "readonly"), d = this.getPropertyEditorParams(e, s, "required"), c = {
readonly: {
description: "",
title: "只读",
editor: r
},
required: {
description: "",
title: "必填",
type: "boolean",
editor: d,
visible: !!((h = e.binding) != null && h.field) && ((m = e.binding) == null ? void 0 : m.type) === "Form"
},
placeholder: {
description: "当控件没有值时在输入框中显示的文本",
title: "提示文本",
type: "string"
}
};
for (const f in i)
c[f] = Object.assign(c[f] || {}, i[f]);
const u = this;
return {
...a,
properties: { ...c },
setPropertyRelates(f, M) {
if (f) {
switch (f.propertyID) {
case "readonly":
case "required":
case "label":
u.afterMutilEditorChanged(e, f);
break;
}
l && l.bind(u)(f, e, M);
}
}
};
}
/**
* 修改某一输入控件的样式后更新Form的统一布局配置
* @param controlClass 控件样式
* @param controlId 控件Id
* @param componentId 控件所在组件id
*/
updateUnifiedLayoutAfterControlChanged(e, o, i) {
const l = e.split(" ");
let a = l.find((u) => /^col-([1-9]|10|11|12)$/.test(u)), s = l.find((u) => /^col-md-([1-9]|10|11|12)$/.test(u)), r = l.find((u) => /^col-xl-([1-9]|10|11|12)$/.test(u)), d = l.find((u) => /^col-el-([1-9]|10|11|12)$/.test(u));
a = a || "col-12", s = s || "col-md-" + a.replace("col-", ""), r = r || "col-xl-" + s.replace("col-md-", ""), d = d || "col-el-" + r.replace("col-xl-", "");
const c = {
id: o,
columnInSM: parseInt(a.replace("col-", ""), 10),
columnInMD: parseInt(s.replace("col-md-", ""), 10),
columnInLG: parseInt(r.replace("col-xl-", ""), 10),
columnInEL: parseInt(d.replace("col-el-", ""), 10)
};
this.updateUnifiedLayoutAfterResponseLayoutChanged(i, c);
}
/**
* 修改控件布局配置后更新Form统一布局配置
* @param componentId 组件Id
* @param controlLayoutConfig 某单独变动的控件配置项,FormResponseLayoutContext类型
*/
updateUnifiedLayoutAfterResponseLayoutChanged(e, o) {
const { formNode: i } = this.responseLayoutEditorFunction.checkCanFindFormNode(e);
if (!i || !i.unifiedLayout)
return;
const l = [];
if (this.responseLayoutEditorFunction.getResonseFormLayoutConfig(i, l, 1), o) {
const m = l.find((f) => f.id === o.id);
Object.assign(m || {}, o);
}
const a = l.map((m) => m.columnInSM), s = l.map((m) => m.columnInMD), r = l.map((m) => m.columnInLG), d = l.map((m) => m.columnInEL), c = this.checkIsUniqueColumn(a) ? a[0] : null, u = this.checkIsUniqueColumn(s) ? s[0] : null, b = this.checkIsUniqueColumn(r) ? r[