@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,700 lines • 315 kB
JavaScript
var jn = Object.defineProperty;
var _n = (e, t, n) => t in e ? jn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var pe = (e, t, n) => _n(e, typeof t != "symbol" ? t + "" : t, n);
import { createVNode as m, Fragment as ze, createTextVNode as Ee, defineComponent as re, ref as V, inject as ae, computed as O, onMounted as xe, watch as _, reactive as Se, toRaw as Hn, nextTick as Ve, withDirectives as Ue, vModelCheckbox as Jt, onUnmounted as $e, vModelText as Qt, resolveDirective as Xt, mergeProps as mt, vModelSelect as Wn, watchEffect as Gn, isVNode as He, provide as Pe } from "vue";
import Yt from "../../designer/button-edit/index.esm.js";
import { useDesignerComponent as Zt, DgControl as zt, canvasChanged as Kn, refreshCanvas as Jn } from "../designer-canvas/index.esm.js";
import { resolveAppearance as en, createPropsResolver as tn, getPropsResolverGenerator as nn } from "../dynamic-resolver/index.esm.js";
import { InputBaseProperty as an, ExpressionProperty as Qn } from "../property-panel/index.esm.js";
import { FieldSelectorRepositoryToken as ut } from "../field-selector/index.esm.js";
import { isNil as Xn, isNaN as Yn, flatten as ln, cloneDeep as Xe, debounce as vt, get as qe, isUndefined as Zn, isEmpty as ea } from "lodash-es";
import { FNotifyService as ta, F_NOTIFY_SERVICE_TOKEN as Pt } from "../notify/index.esm.js";
import { EVENT_PROPERTY_TAB_IDS as Et, resolveField as ke, encrypt as na, useNumberFormat as aa, useDateFormat as la, useResizeObserver as ia, useTouchMomentum as oa, useTouch as sa, useCommonUtils as gt, useBem as Ie, useFarrisConfig as ra, FormSchemaEntityFieldType$Type as rt, withInstall as on, useTextBox as ua, useClear as ca, isMobilePhone as Ne } from "../common/index.esm.js";
import { F_MODAL_SERVICE_TOKEN as sn } from "../modal/index.esm.js";
import da, { FButtonEdit as Vt } from "../button-edit/index.esm.js";
import { FLayout as fa, FLayoutPane as Ut } from "../layout/index.esm.js";
import { FDataGrid as yt } from "../data-grid/index.esm.js";
import { LocaleService as Oe } from "../locale/index.esm.js";
import { FTreeGrid as Bt } from "../tree-grid/index.esm.js";
import { FComboList as rn } from "../combo-list/index.esm.js";
import pa from "../list-view/index.esm.js";
import "bignumber.js";
import { useNumber as ha, useFormat as ma, useSpinner as va, useTextBox as ga, getSpinnerRender as ya, getNumberTextBoxRender as ba, FNumberSpinner as Ct } from "../number-spinner/index.esm.js";
import { useInputExpand as Sa } from "../common/index.esm.js/text-box/use-input-expand";
import { FSwitch as Ca } from "../switch/index.esm.js";
import { FDatePicker as jt } from "../components/index.esm.js";
import { FRadioGroup as Ta } from "../radio-group/index.esm.js";
import { FCheckboxGroup as xa } from "../checkbox-group/index.esm.js";
import { SearchRelation as Tt, SearchComparisonOperator as xt } from "../field-search-box/index.esm.js";
import Fa from "../popover/index.esm.js";
import un from "../checkbox/index.esm.js";
import wa from "../capsule/index.esm.js";
import We from "../scroll-list/index.esm.js";
import Ia from "../drawer/index.esm.js";
function _t(e) {
return typeof e == "string" && e.startsWith("{") && e.endsWith("}") ? (e = e.replace(/'/g, '"'), { mappingFields: JSON.parse(e) }) : { mappingFields: e };
}
const cn = /* @__PURE__ */ new Map([
["appearance", en],
["mappingFields", (e, t, n) => {
if (t)
return _t(t);
const { mappingFields: a } = n;
return _t(a);
}],
["uri", (e, t, n) => {
var a;
return t ? { uri: t } : { uri: (a = n == null ? void 0 : n.dataSource) == null ? void 0 : a.uri };
}],
["idField", (e, t, n) => {
var l;
const a = (l = n == null ? void 0 : n.dataSource) == null ? void 0 : l.idField;
return a ? { idField: a } : { idField: t || "id" };
}]
]), La = "https://json-schema.org/draft/2020-12/schema", ka = "https://farris-design.gitee.io/lookup.schema.json", Pa = "lookup", Ea = "A Farris Input Component", Va = "object", Ba = {
id: {
description: "The unique identifier for a combo list",
type: "string"
},
type: {
description: "The type string of number combo list component",
type: "string",
default: "lookup"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
editable: {
description: "",
type: "boolean",
default: !1
},
enableLinkLabel: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: "帮助"
},
lableWidth: {
description: "",
type: "number"
},
placeholder: {
description: "",
type: "string",
default: "请选择"
},
readonly: {
description: "",
type: "boolean",
default: !1
},
required: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
textAlign: {
description: "",
type: "string",
enum: [
"left",
"middle",
"right"
],
default: "left"
},
visible: {
description: "",
type: "boolean",
default: !0
},
textField: {
description: "帮助显示文本字段",
type: "string",
default: ""
},
mappingFields: {
description: "帮助字段映射",
type: "object",
default: {}
},
uri: {
type: "string",
default: ""
},
dataSource: {
type: "object",
default: null
},
displayType: {
type: "string",
default: "list"
},
"onUpdate:dataMapping": {
type: "object",
default: null
},
onClear: {
type: "object",
default: null
},
context: {
type: "object",
default: null
},
enableToSelect: {
type: "boolean",
default: !0
},
idValue: {
type: "string",
default: ""
},
multiSelect: {
type: "boolean",
default: !1
},
separator: {
type: "string",
default: ","
},
fitColumns: {
type: "boolean",
default: !0
},
enableFavorite: {
type: "boolean",
default: !1
},
enableUserData: {
type: "boolean",
default: !1
},
showSelections: {
type: "boolean",
default: !0
},
treeToList: {
type: "boolean",
default: !1
},
navTreeToList: {
type: "boolean",
default: !1
},
showNavigation: {
type: "boolean",
default: !0
},
dictPicking: {
type: "object",
default: null
},
dictPicked: {
type: "object",
default: null
},
enableSearchBar: {
type: "boolean",
default: !0
},
enableMultiFieldSearch: {
type: "boolean",
default: !1
},
searchAnyField: {
type: "boolean",
default: !0
},
dialog: {
type: "object",
default: null
},
idField: {
type: "string",
default: "id"
},
pagination: {
type: "object",
default: null
},
allowFreeInput: {
type: "boolean",
default: !1
},
loadTreeDataType: {
type: "string",
default: "default"
},
onlySelectLeaf: {
type: "boolean",
default: !1
},
enableFullTree: {
type: "boolean",
default: !0
},
beforeLoadData: {
type: "object",
default: null
},
beforeSelectData: {
type: "object",
default: null
},
enableCascade: {
type: "boolean",
default: !1
},
showCascadeControl: {
type: "boolean",
default: !0
},
cascadeItems: {
type: "object",
default: {
both: !0,
up: !0,
down: !0,
disable: !0
}
},
cascadeValue: {
type: "string",
default: "both"
},
expandLevel: {
type: "number",
default: 0
},
enableClear: {
type: "boolean",
default: !0
},
openType: {
type: "string",
default: "Modal"
},
enableTitle: {
type: "boolean",
default: !1
},
showIncludeChildNodes: {
type: "boolean",
default: !0
},
includeChildNodesValue: {
type: "boolean",
default: !0
},
enableEqualSearch: {
type: "boolean",
default: !1
},
onClearMapping: {
type: "string",
default: ""
},
customFormatter: {
type: "object",
default: null
},
customNavFormatter: {
type: "object",
default: null
},
enableTips: {
type: "boolean",
default: !1
},
tipsContent: {
type: "string",
default: ""
},
expandable: {
description: "",
type: "boolean",
default: !1
},
expandMode: {
description: "",
type: "string",
default: "text"
},
expandContent: {
description: "",
type: "string",
default: ""
},
expandDisabled: {
description: "",
type: "boolean",
default: !1
},
loader: {
type: "object",
default: null
},
selectFirstNavItem: {
type: "boolean",
default: !1
},
onExpandClick: {
description: "",
type: "string",
default: ""
},
userDataKey: {
type: "string",
default: ""
}
}, Da = [
"type"
], Ma = [
"appearance",
"binding",
"visible"
], Na = {
dictPicking: "帮助前事件",
dictPicked: "帮助后事件",
beforeSelectData: "数据选择确认前事件",
beforeLoadData: "数据加载前事件",
clear: "清空事件"
}, dn = {
$schema: La,
$id: ka,
title: Pa,
description: Ea,
type: Va,
properties: Ba,
required: Da,
ignore: Ma,
events: Na
};
function fn(e, t, n) {
return t;
}
var pn = /* @__PURE__ */ ((e) => (e.Both = "both", e.Up = "up", e.Down = "down", e.Disable = "disable", e))(pn || {});
const Ft = [
{ value: "both", text: "同步选择" },
{ value: "up", text: "包含上级" },
{ value: "down", text: "包含下级" },
{ value: "disable", text: "仅选择自身" }
], hn = "";
var Fe = /* @__PURE__ */ ((e) => (e.List = "LIST", e.Tree = "TREELIST", e.ListList = "NAVLIST", e.TreeList = "NAVTREELIST", e.ListTree = "NAVLISTTREE", e))(Fe || {}), Be = /* @__PURE__ */ ((e) => (e.default = "default", e.all = "all", e.async = "async", e))(Be || {});
const et = "__lookup_active_tab__", Mo = "__lookup_user_data_id__";
var Te = /* @__PURE__ */ ((e) => (e.dataList = "datalist", e.favorite = "favorite", e))(Te || {});
const mn = {
showPageInfo: !0,
enable: !1,
showLimits: !0,
sizeLimits: [10, 20, 30, 50, 100],
size: 20,
index: 1,
total: 0,
mode: "server",
showGoto: !1
}, vn = Symbol("f_lookup-http-service_token");
var ct = /* @__PURE__ */ ((e) => (e[e.Equal = 0] = "Equal", e[e.NotEqual = 1] = "NotEqual", e[e.Greater = 2] = "Greater", e[e.GreaterOrEqual = 3] = "GreaterOrEqual", e[e.Less = 4] = "Less", e[e.LessOrEqual = 5] = "LessOrEqual", e[e.Like = 6] = "Like", e[e.LikeStartWith = 7] = "LikeStartWith", e[e.LikeEndWith = 8] = "LikeEndWith", e[e.NotLike = 9] = "NotLike", e[e.NotLikeStartWith = 10] = "NotLikeStartWith", e[e.NotLikeEndWith = 11] = "NotLikeEndWith", e[e.Is = 12] = "Is", e[e.IsNot = 13] = "IsNot", e[e.In = 14] = "In", e[e.NotIn = 15] = "NotIn", e))(ct || {}), dt = /* @__PURE__ */ ((e) => (e[e.Empty = 0] = "Empty", e[e.And = 1] = "And", e[e.Or = 2] = "Or", e))(dt || {}), Oa = /* @__PURE__ */ ((e) => (e[e.Value = 0] = "Value", e[e.Expression = 1] = "Expression", e.FrontExpress = "frontExpress", e))(Oa || {});
const Aa = {
showCloseButton: !0,
showMaxButton: !0,
draggable: !0,
resizeable: !0,
enableEsc: !0,
rememberSize: !0
};
function Ra() {
function e(t, n, a) {
const l = {};
return l.dictPicking = (i) => n.call("dictPicking", t, [i, t], a), l.beforeLoadData = (i) => n.call("beforeLoadData", t, [i, t], a), l.beforeSelectData = (i) => n.call("beforeSelectData", t, [i, t], a), l.dictPicked = (i) => n.call("dictPicked", t, [i, t], a), l;
}
return {
resolve: e
};
}
const tt = {
/**
* 组件标识ID
*/
id: { type: String, require: !0 },
uri: { type: String, default: "" },
title: { type: String, default: "" },
/**
* 是否只读
* @default false
*/
readonly: { type: Boolean, default: !1 },
/**
* 是否禁用
* @default false
*/
disabled: { type: Boolean, default: !1 },
/**
* 是否允编
* @default false
*/
editable: { type: Boolean, default: !1 },
enableFavorite: { type: Boolean, default: !1 },
mappingFields: { type: Object, default: null },
/**
* 是否自动调整列宽，默认为 true
* @default true
*/
fitColumns: { type: Boolean, default: !0 },
/**
* 显示列配置，参考表格组件的 columns 属性
* @default []
*/
columns: { type: Array, default: [] },
/**
* 标识字段
* @default 'id'
*/
idField: { type: String, default: "id" },
/**
* 显示文本字段
*/
textField: { type: String, defalut: "name" },
/**
* 数据源
* @default []
*/
data: { type: Array, default: [] },
/**
* 显示类型，可选值：LIST(普通表格)、TREELIST(树表)、NAVLIST(双列表)、NAVTREELIST(左树右列表)
* @default LookupDisplayType.List
*/
displayType: { type: String, default: Fe.List },
/**
* 弹窗配置，参考弹窗组件的 props 属性
* @default { title: '' }
*/
dialog: {
type: Object,
default: {
title: ""
}
},
/**
* 是否多选
* @default false
*/
multiSelect: { type: Boolean, default: !1 },
showSelections: { type: Boolean, default: !0 },
/**
* 多选时，分隔符，默认为 ','
* @default ','
*/
separator: { type: String, default: "," },
/**
* 分页配置，参考表格组件的 pagination 属性
* @default DEFAULT_PAGINATION_OPTIONS
*/
pagination: { type: Object, default: mn },
/**
* 是否显示清除按钮
* @default true
*/
enableClear: { type: Boolean, default: !0 },
inputType: { type: String, default: "text" },
/**
* 默认值
* @default ''
*/
idValue: { type: String, default: "" },
/**
* 窗口打开前事件
* @default null
*/
dictPicking: { type: Function, default: null },
/**
* 确认选中数据后触发
* @default null
*/
dictPicked: { type: Function, default: null },
/**
* 确认选中数据前触发
* @default null
*/
beforeSelectData: { type: Function, default: null },
beforeLoadData: { type: Function, default: null },
/**
* 是否显示搜索框
* @default true
*/
enableSearchBar: { type: Boolean, default: !0 },
/**
* 搜索字段，默认为空数组，即不搜索
* @default []
*/
searchFields: { type: Array, default: [] },
searchAnyField: { type: Boolean, default: !0 },
/**
* 导航配置，参考表格组件的 navigation 属性
* @default null
*/
navigation: { type: Object, default: null },
textChangeType: { type: String, default: "any" },
showNavigation: { type: Boolean, default: !0 },
showNavSearchBar: { type: Boolean, default: !0 },
showIncludeChildNodes: { type: Boolean, default: !0 },
selectFirstNavItem: { type: Boolean, default: !1 },
navDefaultQueryValue: { type: Object, default: null },
includeChildNodesValue: { type: Boolean, default: !0 },
enableMultiFieldSearch: { type: Boolean, default: !1 },
treeToList: { type: Boolean, default: !1 },
navTreeToList: { type: Boolean, default: !1 },
loadTreeDataType: { type: String, default: Be.default },
enableToSelect: { type: Boolean, default: !0 },
customData: { type: Object, default: null },
modelValue: { type: String, default: "" },
enableUserData: { type: Boolean, default: !1 },
userDataKey: { type: String, default: "" },
onReady: { type: Function, default: null },
context: { type: Object, default: {} },
placeholder: { type: String, default: "请选择" },
loader: { type: Function, default: null },
allowFreeInput: { type: Boolean, default: !1 },
onlySelectLeaf: { type: Boolean, default: !1 },
enableFullTree: { type: Boolean, default: !0 },
enableCascade: { type: Boolean, default: !1 },
showCascadeControl: { type: Boolean, default: !0 },
cascadeItems: { type: Object, default: {
both: !0,
up: !0,
down: !0,
disable: !0
} },
cascadeValue: { type: String, default: "both" },
/**
* 0: 不展开； -1: 全部展开；>0: 展开到指定级数
*/
expandLevel: { type: Number, default: 0 },
openType: { type: String, default: "Modal" },
enableTitle: { type: Boolean, default: !1 },
/**
* 是否启用等于搜索功能
*/
enableEqualSearch: { type: Boolean, default: !1 },
togglePopupOnClickInput: { type: Boolean, default: !1 },
customFormatter: { type: Object, default: null },
customNavFormatter: { type: Object, default: null },
textAlign: { type: String, default: "left" },
/**
* 是否可扩展
*/
expandable: { type: Boolean, default: !1 },
/**
* 扩展模式 text | button
*/
expandMode: { type: String, default: "text" },
/**
* 扩展文本内容
*/
expandContent: { type: String, default: "" },
/**
* 扩展按钮是否禁用
*/
expandDisabled: { type: Boolean, default: !1 }
}, No = tn(tt, dn, cn, fn), $a = Ra(), gn = nn(
tt,
dn,
cn,
fn
);
function pt(e) {
let t = [10, 20, 30, 50, 100];
return e && (typeof e == "string" && (t = e.replaceAll("[", "").replaceAll("]", "").replaceAll(" ", "").split(",")), Array.isArray(e) && (t = e)), t.map((n) => ({ value: parseInt(n, 10) })).sort((n, a) => n.value - a.value);
}
const se = {
convertFrom: (e, t) => {
const n = e.editor ? e.editor : e;
return t === "multiSelect" || t === "enableTitle" ? !!n[t] : t === "separator" ? n[t] || "," : t === "onlySelectLeaf" ? n[t] == null ? !1 : n[t] : t === "loadTreeDataType" ? n[t] || "default" : t === "placeholder" ? Xn(n[t]) ? "请选择" : n[t] : t === "openType" ? n[t] || "Modal" : n[t];
},
convertTo: (e, t, n) => {
const a = e.editor ? e.editor : e;
if (a[t] = n, t === "multiSelect" && !n && (a.enableCascade = !1), t === "openType") {
if (n === "Popup")
a.showSelections = !1, a.enableCascade = !1;
else if (a.dialog) {
const { width: l } = a.dialog, { displayType: i } = a;
i && i.toUpperCase().indexOf("NAV") > -1 && (!l || l < 520) && (a.dialog.width = 960);
}
}
a.multiSelect && a.openType === "Popup" && (a.editable = !1, a.allowFreeInput = !1);
}
};
function qa(e) {
let t = "form_group_" + Date.now();
return e && (t = e.replace(/-/g, "_").replace(/\./g, "_")), "lookup." + t;
}
function za(e, t) {
const { enablePager: n, pageSize: a, pageList: l } = t;
e.pagination = e.pagination || {}, Object.assign(e.pagination, {
enable: n,
sizeLimits: pt(l).map((i) => i.value),
size: a,
showLimits: !0,
showGoto: !1,
mode: "server"
});
}
const yn = {
convertFrom: (e, t) => {
var a;
return (a = (e.editor ? e.editor : e).dataSource) == null ? void 0 : a.displayName;
},
convertTo: (e, t, n) => {
if (n && n.length > 0) {
const a = e.editor ? e.editor : e, l = n[0], { name: i, id: o, metadataContent: c, code: s } = l;
a.dataSource || (a.dataSource = {}), a.dataSource.displayName = `${i}(${s})`, a.helpId = o;
const { displayType: r, idField: u, textField: d } = c;
a.displayType = r, a.dataSource.idField = u, a.textField = d, a.dataSource.type = "ViewObject", a.enableEqualSearch = !1;
const { pageInfo: b } = c.dataSource;
za(a, b);
const { treeInfo: F } = r.toUpperCase() === "NAVTREELIST" ? c.navigation : c.dataSource;
if (F) {
const { onlySelectLeaf: p, loadDataType: w } = F;
a.loadTreeDataType = "default", a.onlySelectLeaf = p ?? !1;
}
if (a.dataSource.uri || (a.dataSource.uri = qa(e.id)), a.dialog) {
const { width: p } = a.dialog;
r && r.toUpperCase().indexOf("NAV") > -1 && (!p || p < 520) && (a.dialog.width = 960);
}
}
}
}, Ua = {
convertFrom: (e, t) => {
var n;
return (n = e.editor.dataSource) == null ? void 0 : n.idField;
},
convertTo: (e, t, n) => {
if (n && n.length > 0) {
const a = n[0];
e.editor.dataSource.idField = a == null ? void 0 : a.bindingPath;
}
}
}, ja = {
convertFrom: (e, t) => {
var n;
return (n = e.editor) == null ? void 0 : n.textField;
},
convertTo: (e, t, n) => {
if (n && n.length > 0) {
const a = n[0];
e.editor.textField = a == null ? void 0 : a.bindingPath;
}
}
}, _a = {
convertFrom: (e, t) => e.editor.displayType ? e.editor.displayType.toUpperCase() : "LIST",
convertTo: (e, t, n) => {
e.editor.displayType = n;
}
}, Me = {
convertFrom: (e, t) => {
var i;
let n = e.editor ? e.editor.dialog : e.dialog;
const a = e.editor ? e.editor.openType : e.openType;
if (n || (n = {}), t === "title")
return n[t] || hn;
if (!a || a === "Modal") {
if (t === "width")
return (i = n.displayType) != null && i.toUpperCase().startsWith("NAV") ? n[t] || 960 : n[t] || 590;
if (t === "height")
return n[t] || 620;
if (t === "navigatorWidth")
return n[t] || 320;
} else {
if (t === "width")
return n[t] || 460;
if (t === "height")
return n[t] || 380;
}
if (t === "draggable")
return !0;
if (["showMaxButton", "showCloseButton", "resizeable", "enableEsc", "rememberSize"].includes(t))
return n[t] == null ? !0 : n[t];
},
convertTo: (e, t, n) => {
const a = e.editor ? e.editor : e;
a.dialog = a.dialog || {}, a.dialog[t] = n;
}
}, Ha = {
convertFrom: (e, t) => {
const n = e.editor ? e.editor : e;
if (n.pagination = n.pagination || {}, t === "enable" || t === "showLimits")
return n.pagination[t] == null ? !1 : n.pagination[t];
if (t === "sizeLimits") {
const a = n.pagination[t];
return pt(a);
}
if (t === "size")
return n.pagination[t] || 20;
},
convertTo: (e, t, n) => {
var l;
const a = e.editor ? e.editor || {} : e;
if (a.pagination = a.pagination || {}, t === "sizeLimits") {
const i = n.map((c) => c.value);
a.pagination[t] = i;
const o = ((l = a.pagination) == null ? void 0 : l.size) ?? 20;
i.includes(o) || (a.pagination.size = i[0]);
return;
}
a.pagination[t] = n;
}
}, Wa = [
{
label: "clear",
name: "清空事件"
},
{
label: "dictPicking",
name: "帮助前事件"
},
{
label: "beforeLoadData",
name: "数据加载前事件"
},
{
label: "beforeSelectData",
name: "选择数据确认前事件"
},
{
label: "dictPicked",
name: "帮助后事件"
}
], Ga = [
{
label: "dictPicking",
name: "帮助前事件"
},
{
label: "beforeLoadData",
name: "数据加载前事件"
},
{
label: "beforeSelectData",
name: "选择数据确认前事件"
},
{
label: "dictPicked",
name: "帮助后事件"
}
], Ka = `{
"name": ({rowData, column}) => {
return rowData.name;
},
"rowStyler": ({rowData}) => {
return {
style: {
color: 'red'
},
class: {
'bg-red': true
}
}
},
"cellStyler": ({rowData, column}) => {
return {
style: {
backgroundColor: 'red'
},
class: {
'bg-red': true
}
}
}
}`, Ht = (e) => m(ze, null, [m("h5", {
style: "display: flex;justify-content: space-between;align-items: center;"
}, [Ee("示例代码："), m("button", {
class: "btn btn-link align-items-center d-flex",
onClick: () => e.value.setValue(Ka)
}, [m("span", {
class: "f-icon f-icon-source-code mr-1"
}, null), Ee("应用代码")])]), m("pre", {
style: "height: calc(100% - 35px);margin: 0;"
}, [`{
// 列表字段自定义数据，rowData: 行数据， column: 列信息；
// 返回字符串. name为字段名称。其他字段可根据需求自定义。
"name": ({rowData, column}) => {
return rowData.name;
},
// 行样式，rowData: 行数据；
// 返回格式 { style?: { [key]: string }, class?: { [key]: boolean } }
"rowStyler": ({rowData}) => {
return {
style: {
color: 'red'
},
class: {
'bg-red': true
}
}
},
// 单元格样式，rowData: 行数据， column: 列信息；
// 返回格式 { style?: { [key]: string }, class?: { [key]: boolean } }
"cellStyler": ({rowData, column}) => {
return {
style: {
backgroundColor: 'red'
},
class: {
'bg-red': true
}
}
}
}`])]), Ja = Symbol("schema_repository_token");
function Qa(e, t) {
const n = /* @__PURE__ */ new Map();
t.forEach((l) => {
n.set(l.id, l.title);
});
const a = (l) => {
var i;
if (!(!l || l.length === 0))
for (const o of l) {
const c = (i = o.data) == null ? void 0 : i.id;
c && n.has(c) && (o.data.name = n.get(c)), o.children && o.children.length > 0 && a(o.children);
}
};
a(e);
}
function Xa(e, t) {
const n = (a) => a && a.length ? a.map((l) => `${l.name}[${l.bindingPath}]`).join(",") : "";
return {
dataSourceEditor: {
type: "schema-selector",
title: "选择数据源",
editorParams: {
propertyData: e,
formBasicInfo: t.formSchemaUtils.getFormMetadataBasicInfo()
},
viewOptions: ["PC_RTC", "PC_NoCode"].includes(t.formSchemaUtils.designerMode) ? [
{ id: "total", title: "全部", type: "List", dataSource: "Total" }
] : [
{
id: "recommend",
title: "推荐",
type: "List",
dataSource: "Recommand",
enableGroup: !0,
groupField: "category",
groupFormatter: (a, l) => `${a === "local" ? "本地元数据" : "最近使用"}`
},
{ id: "total", title: "全部", type: "List", dataSource: "Total" }
],
repositoryToken: Ja
},
dataSourceConverter: yn,
defaultConverter: se,
idFieldEditor: {
type: "field-selector",
textField: "bindingPath",
idField: "bindingPath",
disabled: !1,
editorParams: {
propertyData: e,
formBasicInfo: t.formSchemaUtils.getFormMetadataBasicInfo()
},
columns: [
{ field: "name", title: "名称" },
{ field: "code", title: "编号" },
{ field: "bindingPath", title: "绑定字段" }
],
repositoryToken: ut
},
textFieldEditor: {
type: "field-selector",
textField: "bindingPath",
idField: "bindingPath",
editorParams: {
propertyData: e,
formBasicInfo: t.formSchemaUtils.getFormMetadataBasicInfo()
},
columns: [
{ field: "name", title: "名称" },
{ field: "code", title: "编号" },
{ field: "bindingPath", title: "绑定字段" }
],
repositoryToken: ut
},
mappingFieldsEditor: {
type: "mapping-editor",
modalWidth: 800,
modalHeight: 600,
editable: !1,
editorParams: {
propertyData: e,
formBasicInfo: t.formSchemaUtils.getFormMetadataBasicInfo()
},
fromData: {
editable: !0,
formatter: (a, l) => `${l.raw.name} [${l.raw.bindingPath}]`,
idField: "bindingPath",
textField: "name",
valueField: "bindingPath",
searchFields: ["name", "bindingPath"],
repositoryToken: ut,
displayFormatter: n
},
toData: {
editable: !1,
idField: "bindingPath",
textField: "name",
valueField: "bindingPath",
searchFields: ["name", "bindingPath"],
dataSource: () => {
const a = t.designViewModelUtils.getAllFields2TreeByVMId(t.viewModelId);
if (t.formRule) {
const i = t.formRule.fields.map((o) => ({
id: o.binding.field,
title: o.label
}));
Qa(a, i);
}
const l = t.schemaService.getPrimaryField();
return l ? a.filter((i) => i.data.bindingPath !== l) : a;
},
formatter: (a, l) => `${l.raw.name} [${l.raw.bindingPath}]`,
displayFormatter: n
}
}
};
}
function Ya(e) {
var i;
const t = {
type: "combo-list",
enableClear: !1,
editable: !1
}, n = {
type: "number-spinner",
useThousands: !1
}, a = () => e.displayType ? e.displayType.toUpperCase() : "", l = () => a().startsWith("NAV") ? e.showNavigation === void 0 ? !0 : !!e.showNavigation : !1;
return {
openType: {
description: "窗口展示方式：弹出窗口、下拉面板",
title: "打开方式",
type: "string",
refreshPanelAfterChanged: !0,
$converter: se,
editor: {
...t,
data: [
{ text: "弹出窗口", value: "Modal" },
{ text: "下拉面板", value: "Popup" }
],
valueField: "value",
textField: "text",
idField: "value"
},
visible: !0,
defaultValue: "Modal"
},
title: {
description: "帮助标题",
title: "标题",
type: "string",
visible: e.openType !== "Popup",
$converter: Me
},
width: {
description: "窗口宽度，单位：px，最小值：300px",
title: "宽度",
type: "number",
editor: {
...n,
min: l() ? 520 : 300,
needValid: !0
},
$converter: Me
},
height: {
description: "窗口高度，单位：px，最小值：200px",
title: "高度",
type: "number",
editor: {
...n,
min: 200,
needValid: !0
},
$converter: Me
},
resizeable: {
description: "允许鼠标拖拽窗口边缘调整尺寸",
title: "允许调整窗口尺寸",
type: "boolean",
visible: e.openType !== "Popup",
$converter: Me
},
rememberSize: {
description: "记录窗口尺寸",
title: "记录窗口尺寸",
type: "boolean",
visible: !!e.enableUserData && (((i = e == null ? void 0 : e.dialog) == null ? void 0 : i.resizeable) ?? !0) && e.openType !== "Popup",
$converter: Me
},
enableEsc: {
description: "允许ESC关闭",
title: "允许ESC关闭",
type: "boolean",
visible: e.openType !== "Popup",
$converter: Me
},
showMaxButton: {
description: "显示最大化按钮",
title: "显示最大化按钮",
type: "boolean",
visible: e.openType !== "Popup",
$converter: Me
},
showCloseButton: {
description: "显示关闭按钮",
title: "显示关闭按钮",
type: "boolean",
visible: e.openType !== "Popup",
$converter: Me
}
};
}
function Za(e, t = !0) {
var i, o, c, s;
const n = !((i = e.pagination) != null && i.enable), a = () => e.displayType ? e.displayType.toUpperCase() : "", l = (r, u) => {
const d = a() !== "TREELIST" || r.treeToList;
return u && d ? r.pagination && r.pagination[u] : d;
};
return {
hide: !l(e) || n,
description: "分页配置",
title: "分页",
parentPropertyID: "pagination",
$converter: Ha,
properties: {
// enable: {
// description: "启用分页",
// title: "启用分页",
// type: "boolean",
// refreshPanelAfterChanged: true,
// $converter: lookupPaginationConverter
// },
showLimits: {
description: "显示每页条数选择器",
title: "显示条数选择器",
type: "boolean",
refreshPanelAfterChanged: t,
visible: l(e)
},
sizeLimits: {
description: "每页可显示条数",
title: "每页显示条数",
type: "array",
refreshPanelAfterChanged: t,
visible: l(e, "showLimits"),
editor: {
columns: [
{
field: "value",
title: "显示条数",
dataType: "number",
editor: {
type: "number-spinner",
useThousands: !1,
min: 10,
max: 1e4
}
}
],
title: "每页显示条数编辑器",
modalWidth: 400,
modalHeight: 500,
type: "item-collection-editor",
valueField: "value",
nameField: "value",
requiredFields: ["value"],
uniqueFields: ["value"],
modelValue: pt((o = e.pagination) == null ? void 0 : o.sizeLimits),
beforeSubmit: ({ notifyService: r, data: u }) => !u || !u.length ? (r == null || r.warning({ message: "每页显示条数不能为空！" }), !1) : new Set(u.map((b) => parseInt(b.value, 10))).size === u.length ? !0 : (r == null || r.warning({ message: "每页显示条数不能重复！" }), !1)
}
},
size: {
description: "默认显示条数",
title: "默认显示条数",
type: "number",
visible: l(e),
editor: {
type: "combo-list",
enableClear: !1,
editable: !1,
data: pt((c = e.pagination) == null ? void 0 : c.sizeLimits),
textField: "value",
idField: "value",
valueField: "value",
modelValue: (s = e.pagination) == null ? void 0 : s.size
}
}
}
};
}
class bn extends an {
constructor() {
super(...arguments);
pe(this, "comboListEditor", {
type: "combo-list",
enableClear: !1,
editable: !1
});
pe(this, "numberEditor", {
type: "number-spinner",
useThousands: !1
});
pe(this, "readonlyEditor", { ...this.comboListEditor, editable: !0 });
pe(this, "visibleEditor", { ...this.comboListEditor, editable: !1 });
pe(this, "requiredEditor", { ...this.comboListEditor, editable: !1 });
pe(this, "freeInputEditor", { ...this.comboListEditor, editable: !1 });
}
getExpressionConfig(n, a) {
const l = ["validate"];
return n.type === "form-group" && l.push("dataPicking"), this.expressionProperty.getExpressionConfig(n, "Field", l);
}
getPropertyConfig(n, a, l = "Card") {
var v;
const i = (v = n.binding) != null && v.field ? [] : ["Const", "Variable", "StateMachine"];
this.readonlyEditor = this.getPropertyEditorParams(n, i, "readonly"), this.visibleEditor = this.getPropertyEditorParams(n, i, "visible"), this.requiredEditor = this.getPropertyEditorParams(n, i, "required"), this.freeInputEditor = this.getPropertyEditorParams(n, ["Const", "Variable"], "allowFreeInput"), this.readonlyEditor.propertyTypes.push("Custom"), this.visibleEditor.propertyTypes.push("Custom"), this.requiredEditor.propertyTypes.push("Custom");
const o = this.getBasicProperties(n, a, l), c = this.getBehaviorConfig(n, l), s = this.getAppearanceProperties(n, a), r = this.getLookupConfig(n), u = this.getEventPropConfig(n), d = this.getDialogPropertyConfig(n), b = this.getPageConfig(n.editor), F = this.getTreePropConfig(n.editor), p = this.getSearchConfig(n), w = this.getExpandProperties(n, l), h = this.getNavigatorConfig(n), f = this.getExpressionConfig(n, "Field"), g = {
basic: o,
appearance: s,
behavior: c,
expandConfig: w,
lookup: r,
navigatiorConfig: h,
treeConfig: F,
dialog: d,
pager: b,
searchConfig: p,
expressions: f
};
return n.type === "form-group" && (g.eventsEditor = u), {
type: "object",
categories: g
};
}
getGridFieldEdtiorPropConfig(n) {
return this.getPropertyConfig(n, null, "Grid").categories;
}
flattenTreeNodes(n) {
return n.reduce((a, l) => {
var i;
return a.push(l), (i = l.children) != null && i.length && a.push(...this.flattenTreeNodes(l.children)), a;
}, []);
}
isSimpleStringField() {
var c;
const n = ((c = this.designViewModelField) == null ? void 0 : c.path) || "";
if (!n || !n.includes("."))
return !0;
const a = n.split("."), l = this.designViewModelUtils.getAllFields2TreeByVMId(this.viewModelId);
if (!(l != null && l.length))
return !1;
const i = l.find((s) => s.data.code === a[0]);
if (!i)
return !1;
const o = [i, ...this.flattenTreeNodes(i.children)];
return !a.reduce(
(s, r, u) => [...s, u ? `${s[u - 1]}.${r}` : r],
[]
).some(
(s) => {
var r, u, d;
return ((d = (u = (r = o.find((b) => b.data.path === s)) == null ? void 0 : r.data) == null ? void 0 : u.type) == null ? void 0 : d.$type) === "EntityType";
}
);
}
getBehaviorConfig(n, a = "Card") {
const l = a === "Card" ? this.getTipsConfig(n) : {};
return {
description: "Basic Infomation",
title: "行为",
properties: {
visible: {
description: "运行时组件是否可见",
title: "是否可见",
type: "boolean",
editor: this.visibleEditor
},
...l
},
setPropertyRelates: (i, o) => {
this.afterMutilEditorChanged(o, i);
}
};
}
// 绑定字段更新后，处理lookup 的相关属性
changeBindingField(n, a) {
super.changeBindingField(n, a), n.editor.multiSelect = !1;
}
getDisplayType(n) {
return n.displayType ? n.displayType.toUpperCase() : "";
}
mapFieldsDisplayFormatter(n) {
return n && n.length ? n.map((a) => `${a.name}[${a.bindingPath}]`).join(",") : "";
}
getSearchConfig(n) {
const a = () => {
var i;
return n.editor.openType !== "Popup" && (((i = n.editor) == null ? void 0 : i.enableSearchBar) ?? !0) !== !1 && (this.getDisplayType(n.editor) !== "TREELIST" || n.editor.treeToList === !0) && !n.editor.enableMultiFieldSearch;
};
return {
description: "Lookup Search Infomation",
title: "搜索",
parentPropertyID: "editor",
properties: {
enableSearchBar: {
$converter: se,
description: "是否启用搜索栏",
refreshPanelAfterChanged: !0,
title: "启用搜索栏",
type: "boolean",
visible: !1
},
enableMultiFieldSearch: {
$converter: se,
refreshPanelAfterChanged: !0,
description: "是否启用多字段搜索",
title: "启用多字段查询",
type: "boolean",
visible: !0
},
searchAnyField: {
description: "显示所有列",
$converter: se,
title: "允许查询所有列",
type: "boolean",
visible: n.editor.openType !== "Popup" && n.editor.enableSearchBar == null ? !n.editor.enableMultiFieldSearch : !!n.editor.enableSearchBar
},
enableEqualSearch: {
$converter: se,
description: "是否启用等于搜索",
title: "启用精确搜索",
type: "boolean",
visible: a()
}
},
hide: n.editor.openType === "Popup"
};
}
getNavigatorConfig(n) {
var l;
const a = n.editor;
return {
description: "自定义左侧导航数据格式化、样式",
title: "导航栏",
properties: {
showNavigation: {
description: "显示导航栏",
$converter: se,
refreshPanelAfterChanged: !0,
title: "显示导航栏",
type: "boolean",
visible: this.getDisplayType(a).includes("NAV") && a.openType !== "Popup"
},
navigatorWidth: {
description: "导航栏宽度，最小200px, 最大为窗口宽度减去200px",
title: "导航栏宽度",
type: "number",
visible: this.showNavigatiorWidth(a) && a.openType !== "Popup",
editor: {
...this.numberEditor,
min: 200,
max: (((l = a == null ? void 0 : a.dialog) == null ? void 0 : l.width) ?? 960) - 200,
needValid: !0
},
$converter: Me
},
selectFirstNavItem: {
$converter: se,
description: "是否默认选中首条导航数据，开启后，打开弹窗后，会自动选中导航第1条数据",
title: "默认选中首条导航数据",
type: "boolean",
visible: this.showNavigatiorWidth(a) && a.openType !== "Popup"
},
customNavFormatter: {
description: "自定义左侧导航数据格式化、样式",
title: "左侧导航格式化",
type: "string",
$converter: se,
editor: {
type: "code-editor",
language: "javascript",
leftTemplate: Ht
},
visible: this.showNavigatiorWidth(a) && a.openType !== "Popup"
}
},
hide: !this.getDisplayType(a).startsWith("NAV") || a.openType === "Popup"
};
}
getLookupConfig(n) {
var r, u;
const a = n.editor, l = () => {
const d = this.formSchemaUtils.getFormSchema().module.entity[0].id, b = this.formSchemaUtils.getFormMetadataBasicInfo();
return { propertyData: a, formBasicInfo: b, viewModelId: d, dataSourceId: a.helpId };
}, { dataSourceEditor: i, idFieldEditor: o, textFieldEditor: c, mappingFieldsEditor: s } = Xa(a, this);
return {
description: "Basic Infomation",
title: "编辑器",
setPropertyRelates: (d, b) => {
if (d)
switch (d.propertyID) {
case "readonly":
case "required":
this.afterMutilEditorChanged(b, d);
break;
}
},
parentPropertyID: "editor",
properties: {
readonly: {
description: "",
title: "只读",
type: "boolean",
$converter: "/converter/property-editor.converter",
editor: this.readonlyEditor
},
required: {
description: "",
title: "必填",
type: "boolean",
$converter: "/converter/property-editor.converter",
editor: this.requiredEditor,
visible: !!((r = n.binding) != null && r.field) && ((u = n.binding) == null ? void 0 : u.type) === "Form"
},
placeholder: {
description: "当控件没有值时在输入框中显示的文本",
title: "提示文本",
type: "string",
$converter: se
},
enableClear: {
description: "是否显示清除按钮",
title: "启用清除按钮",
type: "boolean",
$converter: se
},
enableTitle: {
description: "鼠标悬停显示文本内容",
title: "悬停提示",
type: "boolean",
$converter: se,
editor: this.comboListEditor
},
editable: {
description: "",
title: "允许编辑",
type: "boolean",
$converter: se,
refreshPanelAfterChanged: !0,
editor: this.comboListEditor,
visible: !(a.multiSelect && a.openType === "Popup")
},
allowFreeInput: {
description: "",
title: "任意输入",
type: "boolean",
$converter: se,
editor: this.freeInputEditor,
visible: !!a.editable && this.isSimpleStringField()
},
dataSource: {
description: "数据源",
title: "数据源",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
...i,
displayFormatter: (d) => d && d.length ? d.map((b) => `${b.name}(${b.code})`).join(",") : "",
validateFunction: async (d) => this.formSchemaUtils.designerMode !== "PC_RTC" ? !0 : this.checkSameBESource(d, n),
onSubmitModal: (d) => {
if (d) {
delete a.mappingFields;
const b = this.formSchemaUtils.getFormMetadataBasicInfo();
return this.metadataService.getPickMetadata(b.relativePath, d[0].data).then((F) => JSON.parse(F == null ? void 0 : F.metadata.content));
}
}
},
$converter: yn
},
filterConditions: {
descriptions: "帮助过滤条件",
title: "过滤条件",
type: "string",
$converter: se,
editor: {
type: "filter-condition-editor",
editable: !1,
displayText: "点击配置",
enableClear: !1,
enableExpression: !0,
editorParams: {
propertyData: a,
formBasicInfo: this.formSchemaUtils.getFormMetadataBasicInfo(),
viewModelId: this.formSchemaUtils.getFormSchema().module.entity[0].id
},
idField: "path",
repositoryToken: ut,
beforeOpen: async ({ repository: d, notifyService: b }) => {
var g;
if (!(a == null ? void 0 : a.helpId))
return b == null || b.warning({ message: "请先配置数据源！" }), !1;
const p = l(), h = new Qn(this.formSchemaUtils).getEntitiesAndVariables();
let f = {};
if (d) {
const v = await d.getData(p), y = await d.getLookupConditions(p);
f = { fieldList: v, conditionList: y };
}
return (g = h.variables) != null && g.forms && (h.variables.forms.items = h.variables.forms.items.filter((v) => v.category === "remote")), { ...f, ...h, isServerSide: !0 };
},
onSubmitModal: async ({ loadingService: d, repository: b, conditions: F, originalConditions: p, FMessageBoxService: w }) => {
if (b)
try {
const h = l(), f = await b.getLookupConditions(h) || [];
return JSON.stringify(f) !== JSON.stringify(p.value) ? (d == null || d.clearAll(), w.question("视图对象中的帮助过滤条件已更改，请点击确定同步过滤数据", "", () => {
F.value = f, p.value = JSON.parse(JSON.stringify(F.value));
}, () => {
}), !1) : (JSON.stringify(F.value) === JSON.stringify(p.value) || await b.saveFilterCondition(F.value, h, this.formSchemaUtils.getFormMetadataBasicInfo()), !0);
} catch {
return w == null || w.error("保存失败", ""), !1;
} finally {
d == null || d.clearAll();
}
}
},
visible: !!a.helpId
},
displayType: {
description: "类型： 树列表、列表、双列表、左树右列表",
title: "展示类型",
type: "string",
$converter: _a,
editor: {
type: "combo-list",
editable: !1,
disabled: !0,
data: [
{ text: "列表", value: "LIST" },
{ text: "树列表", value: "TREELIST" },
{ text: "双列表", value: "NAVLIST" },
{ text: "左树右列表", value: "NAVTREELIST" }
],
textField: "text",
idField: "value",
valueField: "value"
}
},
idField: {
description: "数据源标识字段",
title: "标识字段",
type: "string",
editor: {
...o
},
$converter: Ua
},
textField: {
description: "显示文本字段",
title: "文本字段",
type: "string",
$converter: ja,
editor: c
},
mappingFields: {
description: "字段映射",
title: "字段映射",
type: "string",
$converter: se,
editor: {
...s
}
},
textAlign: {
description: "文本对齐方式",
title: "文本对齐方式",
type: "string",
$converter: se,
editor: {
type: "combo-list",
editable: !1,
data: [
{ text: "左对齐", value: "left" },
{ text: "居中对齐", value: "center" },
{ text: "右对齐", value: "right" }
],
textField: "text",
idField: "value",
valueField: "value"
}
},
customFormatter: {
description: "自定义数据格式化、样式",
title: "格式化",
type: "string",
$converter: se,
editor: {
type: "code-editor",
language: "javascript",
leftTemplate: Ht
}
},
enableToSelect: {
description: "数据加载后是否选中现有值",
$converter: se,
title: "选中已选值",
type: "boolean",
editor: this.comboListEditor
},
multiSelect: {
description: "启用多选",
$converter: se,
title: "启用多选",
type: "boolean",
editor: this.comboListEditor,
refreshPanelAfterChanged: !0,
visible: this.isSimpleStringField()
},
showSelections: {
description: "显示已选记录",
$converter: se,
title: "显示已选记录",
type: "boolean",
visible: !!a.multiSelect && a.openType !== "Popup"
},
separator: {
description: "多选分隔符",
$converter: se,
title: "多选分隔符",
type: "string",
editor: {
type: "combo-list",
editable: !1,
disabled: !1,
data: [
{ text: ",", value: "," },
{ text: "|", value: "|" },
{ text: "#", value: "#" }
],
textField: "text",
idField: "value",
valueField: "value",
separator: "@"
},
visible: !!a.multiSelect
},
enableSearchBar: {
description: "显示搜索工具条",
$converter: se,
refreshPanelAfterChanged: !0,
title: "启用搜索框",
type: "boolean",
visible: !1
},
enableFavorite: {
description: "启用收藏夹",
$converter: se,
title: "启用收藏夹",
type: "boolean",
visible: a.openType !== "Popup"
},
enableUserData: {
description: "保存界面状态",
$converter: se,
refreshPanelAfterChanged: !0,
title: "保存界面状态",
type: "boolean",
visible: a.openType !== "Popup"
}
}
};
}
showNavigatiorWidth(n) {
return this.getDisplayType(n).startsWith("NAV") && n.openType !== "Popup" ? n.showNavigation === void 0 ? !0 : !!n.showNavigation : !1;
}
getDialogPropertyConfig(n) {
const a = Ya(n.editor);
return a.openType.$converter = se, {
description: "帮助窗口尺寸配置",
title: "帮助窗口",
parentPropertyID: "dialog",
$converter: Me,
properties: a
};
}
showPagerProperty(n, a) {
const l = this.getDisplayType(n) !== "TREELIST" || n.treeToList;
return a && l ? n.pagination && n.pagination[a] : l;
}
/**
* 获取页配置
* @param editorOptions
* @returns
*/
getPageConfig(n) {
return Za(n);
}
showLoadType(n) {
const a = this.getDisplayType(n);
return (a === "TREELIST" || a === "NAVTREELIST") && !n.treeToList && !n.navTreeToList;
}
isTree(n) {
return this.getDisplayType(n) === "TREELIST" && !n.treeToList;
}
getTreePropConfig(n) {
return {
hide: this.getDisplayType(n) !== "TREELIST" && this.getDisplayType(n) !== "NAVTREELIST",
description: "树形数据配置",
title: "树形数据配置",
parentPropertyID: "editor",
properties: {
treeToList: {
description: "以列表的形式展示树结构数据",
$converter: se,
refreshPanelAfterChanged: !0,
title: "以列表形式展示",
type: "boolean",
visible: this.getDisplayType(n) === "TREELIST"
},
navTreeToList: {
description: "以列表的形式展示树结构数据",
$converter: se,
refreshPanelAfterChanged: !0,
title: "以列表形式展示",
type: "boolean",
visible: this.getDisplayType(n) === "NAVTREELIST"
},
loadTreeDataType: {
d