UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,512 lines 71.4 kB
var ne = Object.defineProperty; var re = (o, n, e) => n in o ? ne(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e; var b = (o, n, e) => re(o, typeof n != "symbol" ? n + "" : n, e); import { computed as M, ref as B, createVNode as V, defineComponent as Q, onMounted as D, watch as j, createTextVNode as W, Fragment as se, nextTick as oe, inject as K } from "vue"; import { resolveAppearance as le, createPropsResolver as ae } from "../dynamic-resolver/index.esm.js"; import I from "bignumber.js"; import { useNumberLocales as de } from "../number-spinner/index.esm.js"; import { DgControl as u, canvasChanged as A, refreshCanvas as ue, useDesignerComponent as ce } from "../designer-canvas/index.esm.js"; import { cloneDeep as pe } from "lodash-es"; import { FormSchemaEntityField$Type as Z, FormSchemaEntityFieldType$Type as ge, EVENT_PROPERTY_TAB_IDS as X, withInstall as me } from "../common/index.esm.js"; function fe(o, n, e) { return n; } const he = /* @__PURE__ */ new Map([ ["appearance", le] ]), be = "https://json-schema.org/draft/2020-12/schema", ye = "https://farris-design.gitee.io/number-range.schema.json", ve = "number-range", Ce = "A Farris Component", xe = "object", we = { id: { description: "The unique identifier for a number-range", type: "string" }, type: { description: "The type string of number-range component", type: "string", default: "number-range" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, binding: { description: "", type: "object", default: {} }, disabled: { type: "boolean", default: !1 }, editable: { description: "", type: "boolean", default: !0 }, placeholder: { description: "", type: "string", default: "" }, readonly: { description: "", type: "boolean", default: !1 }, required: { description: "", type: "boolean", default: !1 }, precision: { description: "", type: "number", default: 0 }, tabindex: { description: "", type: "number", default: -1 }, visible: { description: "", type: "boolean", default: !0 }, beginValue: { description: "", type: "number" }, endValue: { description: "", type: "number" }, nullable: { description: "", type: "boolean", default: !1 }, min: { description: "", type: "string" }, max: { description: "", type: "string" }, beginPlaceholder: { description: "", type: "string" }, endPlaceholder: { description: "", type: "string" }, textAlign: { description: "", type: "string", enum: [ "left", "middle", "right" ], default: "left" } }, Ve = [ "type" ], Ee = { $schema: be, $id: ye, title: ve, description: Ce, type: xe, properties: we, required: Ve }, z = { /** * 组件标识 */ id: String, /** * 自动补全小数 */ autoDecimal: { type: Boolean, default: !0 }, /** * 下限空白提示文本 * @default 开始数字 */ beginPlaceholder: { type: String, default: "开始数字" }, /** * 下限值 * @default '' */ beginValue: { type: [Number, String], default: "" }, /** * 启用大数支持 */ bigNumber: { type: Boolean, default: !1 }, /** * 是否允许为空 * @default false */ nullable: { type: Boolean, default: !1 }, /** * 小数点符号 * @default . */ decimalSeparator: { type: String, default: "." }, /** * 是否禁用 * @default false */ disabled: { type: Boolean, default: !1 }, /** * 是否可编辑 * @default true */ editable: { type: Boolean, default: !0 }, /** * 上限空白提示文本 * @default 结束数字 */ endPlaceholder: { type: String, default: "结束数字" }, /** * 上限值 * @default '' */ endValue: { type: [Number, String], default: "" }, /** * 格式化 formatter 和 parser 必须同时存在 formatter: (val: number) => string; parser: (val: string | number) => number; */ formatter: { type: Function }, /** * 千分位符号 * @default , */ groupSeparator: { type: String, default: "," }, /** * 使用千分位时,每组显示的字符数 * @default 3 */ groupSize: { type: Number, default: 3 }, /** * 最大值 */ max: { type: [Number, String] }, /** * 最小值 */ min: { type: [Number, String] }, /** * number) => number */ parser: { type: Function }, /** * 空白提示文本 */ placeholder: { type: String, default: "请输入数字" }, /** * 精度 * @default 0 */ precision: { type: Number, default: 0 }, /** * 前缀 * @default '' */ prefix: { type: String, default: "" }, /** * 是否只读 * @default false */ readonly: { type: Boolean, default: !1 }, /** * 间隔符---未实现 */ separator: { type: String, default: "~" }, /** * 是否显示微调按钮 * @default true */ showButton: { type: Boolean, default: !0 }, /** * 是否显示0值 * @default true */ showZero: { type: Boolean, default: !0 }, /** * up or down 步长 */ step: { type: Number, default: 1 }, /** * 后缀 * @default '' */ suffix: { type: String, default: "" }, /** * 文本对齐方式 : 左对齐left; 居中对齐center ;右对齐 right * @default left */ textAlign: { type: String, default: "left" }, /** * 是否使用千分值 * @default true */ useThousands: { type: Boolean, default: !0 } }, ee = ae(z, Ee, he, fe); function te(o, n) { const e = M(() => Number(o.precision) || 0); function t(l) { return l.toFixed(e.value); } function i(l) { return isNaN(l) || l === null || l === void 0 || l === ""; } function r(l) { const a = i(o.max) ? null : new I(String(o.max), 10), c = i(o.min) ? null : new I(String(o.min), 10); return a && l.gt(a) ? a : c && l.lt(c) ? c : l; } function s(l, a, c, d) { const g = new I(l, 10), h = i(c && c.value) ? null : new I(String(c.value), 10), f = i(a && a.value) ? null : new I(String(a.value), 10); let m; return d ? m = h && g.gt(h) ? h : g : m = f && g.lt(f) ? f : g, m.toString(); } function p(l, a = !0) { if (o.parser) return isNaN(Number(l)) ? o.parser(l) : l; let c = new I(l, 10); if (a && (c = r(c)), c.isNaN()) { if (o.nullable) return null; const g = new I("" + o.min, 10), h = new I("" + o.max, 10); if (!g.isNaN()) c = g; else if (!h.isNaN()) c = h; else return 0; } return t(c); } return { getRealValue: p, isEmpty: i, precision: e, getValidNumberObject: r, getValidNumberInRange: s }; } function ie(o, n, e) { const t = M(() => ({ prefix: o.prefix, suffix: o.suffix, decimalSeparator: o.decimalSeparator, groupSeparator: o.useThousands ? o.groupSeparator : "", groupSize: o.groupSize })), { getValidNumberObject: i, precision: r } = e; function s(a) { return a = a == null || a === "" ? "" : String(a), a = a.replace(new RegExp(o.prefix, "g"), "").replace(new RegExp(o.suffix, "g"), "").replace(/,/g, ""), o.groupSeparator && o.groupSeparator !== "," && (a = a.replace(new RegExp(`\\${o.groupSeparator}`, "g"), "")), o.decimalSeparator && o.decimalSeparator !== "." && (a = a.replace(new RegExp(`\\${o.decimalSeparator}`, "g"), ".")), a; } function p(a, c) { return o.precision !== null && o.precision !== void 0 ? a.toFormat(r.value, c) : a.toFormat(c); } function l(a, c = !0) { const d = s(a), g = new I(d, 10); let h = g; return c && (h = i(g)), h.valueOf() === "0" && !o.showZero || h.isNaN() ? "" : o.formatter ? o.formatter(h.toNumber()) : p(h, t.value); } return { cleanFormat: s, format: l }; } function U(o, n, e, t, i, r, s, p, l, a) { const { format: c } = i, { getRealValue: d, getValidNumberInRange: g } = r; function h() { const C = new I(t.value || 0); return !((o.max || o.max === 0) && !new I(o.max).isNaN() && C.gte(new I(o.max)) && (t.value || t.value === 0)); } function f() { const C = new I(t.value || 0); return !((o.min || o.min === 0) && !new I(o.min).isNaN() && C.lte(new I(o.min)) && (t.value || t.value === 0)); } function m(C) { if (o.readonly || o.disabled) return; const k = C === "up" ? h : f, F = C === "up" ? "plus" : "minus"; if (k()) { let P = new I(t.value || 0)[F](Number(o.step)).toFixed(); P = g(P, p, l, a); const T = d(P); e.value = c(P), t.value !== T && (t.value = T, s(t.value)); } } function y() { m("up"); } function v() { m("down"); } function x(C) { y(), C.stopPropagation(); } function E(C) { v(), C.stopPropagation(); } return { canDownward: f, canUpward: h, downward: v, onClickDownButton: E, onClickUpButton: x, upward: y }; } function O(o, n, e, t, i, r, s, p, l, a, c) { const { cleanFormat: d, format: g } = i, { getRealValue: h, isEmpty: f, getValidNumberInRange: m } = r, { downward: y, upward: v } = s, x = M(() => e.value), E = B(!1); function C(w) { var _; if (w.stopPropagation(), o.readonly || o.disabled) return; E.value = !1; let P = (_ = w.target) == null ? void 0 : _.value; o.nullable || (P = P || 0); let T = d(P); T = m(T, l, a, c); const R = h(T); e.value = g(T), t.value !== R && (t.value = R, p(t.value)), n.emit("blur", { event: w, formatted: e.value, value: t.value }); } function k(w) { w.stopPropagation(), !(o.readonly || o.disabled) && (E.value = !0, e.value = f(t.value) || !o.showZero && t.value === "0" ? "" : String(t.value), n.emit("focus", { event: w, formatted: e.value, value: t.value })); } function F(w) { var R; w.stopPropagation(); let P = (R = w.target) == null ? void 0 : R.value; o.nullable || (P = P || 0); const T = d(P); e.value = T, t.value = h(T), p(t.value); } function S(w) { w.key === "ArrowDown" && (w.preventDefault(), y()), w.key === "ArrowUp" && (w.preventDefault(), v()), w.stopPropagation(); } return { textBoxValue: x, onBlurTextBox: C, onFocusTextBox: k, onInput: F, onKeyDown: S, isTextBoxFocused: E }; } function Y(o, n, e, t, i) { const { onBlurTextBox: r, onFocusTextBox: s, onInput: p, onKeyDown: l, textBoxValue: a } = e, c = M(() => o.disabled || o.readonly || !o.editable ? "" : t ? i.range.begin : i.range.end), d = M(() => ({ "form-control": !0, "sub-input": !0 })), g = M(() => ({ "text-align": o.textAlign })); function h(f) { f.stopPropagation(); } return () => V("input", { class: d.value, style: g.value, type: "text", value: a.value, disabled: o.disabled, readonly: o.readonly || !o.editable, placeholder: c.value, onBlur: r, onChange: h, onFocus: s, onInput: p, onKeydown: l }, null); } function $(o, n, e) { const { canDownward: t, canUpward: i, onClickDownButton: r, onClickUpButton: s } = e, p = M(() => ({ "input-group-append": !0, "btn-group": !0, "btn-group-number": !0, "sub-btn-group": !0 })), l = M(() => ({ btn: !0, "btn-secondary": !0, "btn-number-flag": !0 })), a = M(() => ({ cursor: i() ? "pointer" : "not-allowed", "margin-left": 0 })), c = M(() => ({ cursor: t() ? "pointer" : "not-allowed", "margin-left": 0 })); return () => V("div", { class: p.value }, [V("button", { class: l.value, style: a.value, onClick: s, disabled: !i() }, [V("span", { class: "f-icon f-icon-arrow-chevron-up number-arrow-chevron" }, null)]), V("button", { class: l.value, style: c.value, onClick: r, disabled: !t() }, [V("span", { class: "f-icon f-icon-arrow-chevron-down number-arrow-chevron" }, null)])]); } const q = /* @__PURE__ */ Q({ name: "FNumberRange", props: z, emits: ["valueChange", "blur", "focus", "click", "input", "beginValueChange", "endValueChange"], setup(o, n) { const e = B(o.beginValue), t = B(""), i = B(o.endValue), r = B(""), s = te(o), p = ie(o, n, s), l = de(o), a = (F) => { n.emit("beginValueChange", F); }, c = U(o, n, t, e, p, s, a, e, i, !0), d = O(o, n, t, e, p, s, c, a, e, i, !0), g = $(o, n, c), h = Y(o, n, d, !0, l), f = (F) => { n.emit("endValueChange", F); }, m = U(o, n, r, i, p, s, f, e, i, !1), y = O(o, n, r, i, p, s, m, f, e, i, !1), v = $(o, n, m), x = Y(o, n, y, !1, l), { getRealValue: E } = s, { format: C } = p, k = M(() => !o.disabled && !o.readonly && o.showButton); return D(() => { const F = E(o.beginValue, !1), S = E(o.endValue, !1); t.value = C(F, !1), r.value = C(S, !1); }), j(() => [o.beginValue], ([F]) => { if (!d.isTextBoxFocused.value) { const S = E(F, !1); e.value = S, t.value = C(S, !1); } }), j(() => [o.endValue], ([F]) => { if (!y.isTextBoxFocused.value) { const S = E(F, !1); i.value = S, r.value = C(S, !1); } }), j(() => [o.precision, o.useThousands, o.prefix, o.suffix, o.showZero], () => { t.value = C(e.value), r.value = C(i.value); }), () => V("div", { class: "input-group number-range f-cmp-number-spinner" }, [V("div", { class: "form-control input-container" }, [V("div", { class: "sub-input-group" }, [h(), k.value && g()]), V("span", { class: "spliter" }, [W("~")]), V("div", { class: "sub-input-group" }, [x(), k.value && v()])])]); } }); function H(o, n, e, t) { const { onBlurTextBox: i, onFocusTextBox: r, onInput: s, onKeyDown: p, textBoxValue: l } = e, a = M(() => t ? o.beginPlaceholder : o.endPlaceholder), c = M(() => ({ "form-control": !0, "sub-input": !0 })), d = M(() => ({ "text-align": o.textAlign })); function g(h) { h.stopPropagation(); } return () => V("input", { class: c.value, style: d.value, type: "text", value: l.value, disabled: o.disabled, readonly: o.readonly || !o.editable, placeholder: a.value, onBlur: i, onChange: g, onFocus: r, onInput: s, onKeydown: p }, null); } function Fe(o) { const { formSchemaUtils: n, formStateMachineUtils: e } = o; function t(l, a = "") { return { path: a + l.code, field: l.id, fullPath: l.code }; } function i(l, a = "") { const c = n.getViewModelById(l); return c ? c.states.map((d) => t(d, a)) : []; } function r(l) { const a = n.getRootViewModelId(), c = i(l); if (l === a) return c; const d = i(a, "root-component."); return [...c, ...d]; } function s(l) { return l.binding && l.binding.path || l.id || ""; } function p() { return e && e.getRenderStates() || []; } return { getVariables: r, getControlName: s, getStateMachines: p }; } class Ie { constructor(n) { b(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'" } ]); b(this, "expressionNames", { compute: "计算表达式", dependency: "依赖表达式", validate: "验证表达式", dataPicking: "帮助前表达式", visible: "可见表达式", readonly: "只读表达式", required: "必填表达式" }); b(this, "getExpressionConverter", (n, e) => ({ convertFrom: (t, i, r, s) => { const p = r.getExpressionRuleValue(n, e || i); return p && p.value || ""; }, convertTo: (t, i, r, s, p) => { var l; if (i === "dataPicking" && (r != null && r.target)) { const a = `${r.target}_dataPicking`; ((l = r.rules) == null ? void 0 : l.some( (d) => d.id === a && d.value )) ? t.dictPickingExpressionId = a : delete t.dictPickingExpressionId; } s.updateExpression(r); } })); this.formSchemaService = n; } getExpressionRule(n, e) { const t = this.getExpressionData(); if (!t) return ""; const i = t.find((s) => s.target === n); if (!i) return ""; const r = i.rules.find((s) => s.type === e); return r || ""; } // 获取上下文表单变量 getContextFormVariables() { const { module: n } = this.formSchemaService.getFormSchema(); if (!n.viewmodels || n.viewmodels.length === 0) return []; const e = this.formSchemaService.getRootViewModelId(), t = this.formSchemaService.getViewModelById(e); if (!t || !t.states || t.states.length === 0) return []; const i = []; return t.states.filter((r) => r.category === "remote").forEach((r) => { i.push({ key: r.code, name: r.name, description: r.name, category: r.category }); }), i; } createTreeNode(n, e, t = "label") { return { id: n.id, name: n.name, bindingPath: n[t], parents: e, type: "field" }; } buildEntityFieldsTreeData(n = null, e) { const t = []; return n == null || n.forEach((i) => { var p; const r = this.createTreeNode(i, e); let s = []; (p = i.type) != null && p.fields && (s = this.buildEntityFieldsTreeData(i.type.fields, [...e, i.label])), t.push({ data: r, children: s, expanded: !0 }); }), t; } buildChildEntityTreeData(n = null, e) { const t = []; return n == null || n.forEach((i) => { var l, a; const r = this.createTreeNode(i, e); r.type = "entity"; const s = this.buildEntityFieldsTreeData((l = i.type) == null ? void 0 : l.fields, [...e, i.label]), p = this.buildChildEntityTreeData((a = i.type) == null ? void 0 : a.entities, [...e, i.label]); p != null && p.length && (s == null || s.push(...p)), t.push({ data: r, children: s || [], // 空值回退 expanded: !0 }); }), t; } getEntitiesTreeData() { const n = this.formSchemaService.getSchemaEntities(); if (!(n != null && n.length)) return []; const e = n[0]; if (!(e != null && e.type)) return []; const t = this.buildEntityFieldsTreeData(e.type.fields, [e.code]), i = this.buildChildEntityTreeData(e.type.entities, [e.code]); return i != null && i.length && (t == null || t.push(...i)), { entityCode: e.code, fields: [{ data: this.createTreeNode(e, [], "code"), children: t || [] }] }; } getEntitiesAndVariables() { return { entities: this.getEntitiesTreeData(), variables: { session: { name: "系统变量", items: this.sessionVariables, visible: !1 }, forms: { name: "表单变量", items: this.getContextFormVariables(), visible: !0 } } }; } onBeforeOpenExpression(n, e, t) { const i = t === "Field" ? n.binding.field : n.id, r = this.getExpressionRule(i, e), s = this.getEntitiesAndVariables(), p = { message: ["validate", "required", "dataPicking"].includes(e) && r ? r.message : "", ...s }; return r.messageType != null && (p.messageType = r.messageType), p; } buildRule(n, e, t, i) { const { expression: r, message: s, messageType: p } = e, l = { id: `${n}_${t}`, type: t, value: r }; return (t === "validate" || t === "dataPicking" || t === "required") && (l.message = s), t === "dataPicking" && (l.messageType = p), t === "validate" && i && (l.elementId = i), l; } getExpressionData() { const { expressions: n } = this.formSchemaService.getFormSchema().module; return n || []; } updateExpression(n, e, t, i) { const r = e === "Field" ? n.binding.field : n.id, s = this.buildRule(r, t, i, n.type === "form-group" ? n.id : ""); let l = this.getExpressionData().find((c) => c.targetType === e && c.target === r); const a = (c) => c.value.trim() === ""; if (l) { const c = l.rules.find((d) => d.id === s.id); if (c) a(s) ? l.rules = l.rules.filter((d) => d.id !== s.id) : (Object.assign(c, s), i === "validate" && n.type === "form-group" && (c.elementId = n.id)); else { if (a(s)) return null; l.rules = l.rules || [], l.rules.push(s); } } else { if (a(s)) return null; l = { target: `${r}`, rules: [s], targetType: e }; } return l; } getExpressionEditorOptions(n, e, t, i) { return t.reduce((r, s) => { var l, a; const p = e === "Field" ? (l = n == null ? void 0 : n.binding) == null ? void 0 : l.field : n.id; return r[s] = { hide: e === "Field" ? !!((a = n == null ? void 0 : n.binding) != null && a.field) : !1, description: "", title: this.expressionNames[s], type: "string", $converter: this.getExpressionConverter(p), refreshPanelAfterChanged: !0, editor: { type: "expression-editor", singleExpand: !1, dialogTitle: `${this.expressionNames[s]}编辑器`, showMessage: s === "validate" || s === "dataPicking" || s === "required", showMessageType: s === "dataPicking", beforeOpen: () => this.onBeforeOpenExpression(n, s, e), onSubmitModal: (c) => { const d = this.updateExpression(n, e, c, s); if (i) { const g = this.buildRule(p, c, s); i(g); } return d; } } }, r; }, {}); } getExpressionInfo(n, e, t) { const i = e === "Field" ? n.binding.field : n.id, r = this.getExpressionRule(i, t), s = { value: r && r.value, targetId: i, targetType: e, expressionType: t }; return r && r.message && (s.message = r.message), s; } getExpressionConfig(n, e, t = ["compute", "dependency", "validate"], i) { var r; return { description: "表达式", title: "表达式", hide: !(n.binding && ((r = n.binding) == null ? void 0 : r.type) === "Form"), properties: { ...this.getExpressionEditorOptions(n, e, t, i) } }; } getExpressionOptions(n, e, t) { const i = this.getExpressionInfo(n, e, t); return { dialogTitle: `${this.expressionNames[t] || "表达式"}编辑器`, singleExpand: !1, showMessage: t === "required", beforeOpen: () => this.onBeforeOpenExpression(n, t, e), expressionInfo: i }; } } class Se { constructor(n, e) { b(this, "componentId"); b(this, "viewModelId"); b(this, "eventsEditorUtils"); b(this, "formSchemaUtils"); b(this, "formMetadataConverter"); b(this, "designViewModelUtils"); b(this, "designViewModelField"); b(this, "controlCreatorUtils"); b(this, "designerHostService"); b(this, "designerContext"); b(this, "modalService", null); /** 表单规则 */ b(this, "formRule", null); b(this, "schemaService", null); b(this, "metadataService", null); b(this, "propertyConfig", { type: "object", categories: {} }); b(this, "expressionProperty"); var t; this.componentId = n, this.designerHostService = e, this.eventsEditorUtils = e.eventsEditorUtils, this.formSchemaUtils = e.formSchemaUtils, this.formMetadataConverter = e.formMetadataConverter, this.viewModelId = ((t = this.formSchemaUtils) == null ? void 0 : t.getViewModelIdByComponentId(n)) || "", 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 Ie(this.formSchemaUtils); } /** * 是否在响应式表单中 */ inResponsiveForm() { var n; return !!((n = this.designerContext) != null && n.responsiveForm); } getFormDesignerInstance() { var n, e; return (e = (n = this.designerContext) == null ? void 0 : n.instances) == null ? void 0 : e.formDesigner.value; } getTableInfo() { var n; return (n = this.schemaService) == null ? void 0 : n.getTableInfoByViewModelId(this.viewModelId); } setDesignViewModelField(n) { var t; const e = n.binding && n.binding.type === "Form" && n.binding.field; if (e) { if (!this.designViewModelField) { const i = this.designViewModelUtils.getDgViewModel(this.viewModelId); this.designViewModelField = i.fields.find((r) => r.id === e); } n.updateOn = (t = this.designViewModelField) == null ? void 0 : t.updateOn; } } getBasicPropConfig(n) { 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: n.type, name: u[n.type] && u[n.type].name }] } } } }; } getAppearanceConfig(n = null, e = {}, t) { const i = { title: "外观", description: "Appearance" }, r = { 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 s in e) r[s] = Object.assign(r[s] || {}, e[s]); return { ...i, properties: { ...r }, setPropertyRelates(s, p) { if (s) { switch (s && s.propertyID) { case "class": case "style": { A.value++; break; } } t && t(s, n, p); } } }; } /** * * @param propertyData * @param propertyTypes * @param propertyName * @param constInfos * @param variableInfos * @param expressionType 指定表达式类型,存在属性和表达式类型不一致的情况 * @returns */ getPropertyEditorParams(n, e = [], t = "visible", i = {}, r = {}, s = "") { const { getVariables: p, getControlName: l, getStateMachines: a } = Fe(this.designerHostService), c = this.getRealTargetType(n), d = e && e.length > 0 ? e : ["Const", "Variable", "StateMachine", "Expression"], g = { type: "property-editor", propertyTypes: d }; return d.map((h) => { switch (h) { case "Const": Object.assign(g, { constType: "enum", constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }] }, i); break; case "Expression": g.expressionConfig = this.getExpressionOptions(n, c, s || t); break; case "StateMachine": g.stateMachines = a(); break; case "Variable": Object.assign(g, { controlName: l(n), newVariablePrefix: "is", newVariableType: "Boolean", variables: p(this.viewModelId), parentComponentId: this.componentId === "root-component" ? "" : "root-component", onBeforeOpenVariables: (f) => { f.value = p(this.viewModelId); } }, r), this.designerContext.designerMode === "PC_RTC" && (g.newVariablePrefix = "ext_" + g.newVariablePrefix); break; } }), g; } getVisibleProperty(n, e = "") { var r; let t = ["Const", "Variable", "StateMachine", "Expression"]; return e === "gridFieldEditor" ? t = ["Const", "Expression"] : e === "form-group" && !((r = n.binding) != null && r.field) ? t = ["Const", "Variable", "StateMachine", "Custom"] : e === "dataGrid" || e === "treeGrid" || e === "wizard" ? t = ["Const", "Variable", "Expression"] : (n.type.indexOf("toolbar-item") > -1 || e === "form-group") && (t = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), { visible: { title: "是否可见", type: "boolean", description: "运行时组件是否可见", editor: this.getPropertyEditorParams(n, t, "visible") } }; } /** * 获取行为 * @param propertyData * @param viewModelId * @returns */ getBehaviorConfig(n, e = "", t = {}, i) { const r = { title: "行为", description: "" }, s = this.getVisibleProperty(n, e); for (const l in t) s[l] = Object.assign(s[l] || {}, t[l]); const p = this; return { ...r, properties: { ...s }, setPropertyRelates(l, a) { if (l) { switch (l.propertyID) { case "disabled": case "readonly": case "visible": p.afterMutilEditorChanged(n, l); break; } i && i(l, a); } } }; } /** * 当多值编辑器变更时 * @param propertyData * @param changeObject */ afterMutilEditorChanged(n, e) { this.addNewVariableToViewModel(e, this.viewModelId), this.updateExpressionValue(e, n), this.clearExpression(e, n); } /** * * @param propertyId * @param componentInstance * @returns */ updateElementByParentContainer(n, e) { const t = e && e.parent && e.parent.schema; if (!t) return; const i = t.contents.findIndex((s) => s.id === n), r = pe(t.contents[i]); t.contents.splice(i, 1), t.contents.splice(i, 0, r), ue(); } /** * 属性编辑器,在编辑过程中会新增变量,此处需要将新增的变量追加到ViewModel中 * @param changeObject * @param viewModelId * @returns */ addNewVariableToViewModel(n, e) { const t = n.propertyValue; if (!(t && typeof t == "object") || !(t.type === "Variable" && t.isNewVariable)) return; const s = { id: t.field, category: "locale", code: t.fullPath, name: t.fullPath, type: t.newVariableType || "String", isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0 }; delete t.newVariableType, delete t.isNewVariable, this.formSchemaUtils.getVariableByCode(s.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(s); } getExpressions() { let n = []; return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], n = this.formRule.expressions || []) : n = this.formSchemaUtils.getExpressions(), n; } /** * 更新表达式到expressions节点 * @param changeObject */ updateExpressionValue(n, e) { const t = n.propertyValue; if (!((t && t.type) === "Expression" && t.expressionInfo)) return; const { expressionId: s, expressionInfo: p } = t, { targetId: l, targetType: a, expressionType: c, value: d, message: g } = p, h = this.getExpressions(); let f = h.find((y) => y.target === l); f || (f = { target: l, rules: [], targetType: a }, h.push(f)); const m = f.rules.find((y) => y.type === c); if (m) m.id = s, m.value = d, m.message = g, (c === "minDate" || c === "maxDate" || c === "defaultTime") && (m.elementId = e.id); else { const y = { id: s, type: c, value: d, message: g, elementId: e.id }; f.rules.push(y); } delete t.expressionInfo; } /** * 属性类型切换为非表达式后,清除原表达式 * @param changeObject * @param propertyData * @returns */ clearExpression(n, e) { const t = n.propertyValue; if (t && t.type === "Expression") return; const r = n.propertyID, s = this.getExpressions(), p = e.binding ? e.binding.field : e.id, l = s.find((a) => a.target === p); !l || !l.rules || (l.rules = l.rules.filter((a) => a.type !== r)); } getExpressionOptions(n, e, t) { return this.expressionProperty.getExpressionOptions(n, e, t); } getRealTargetType(n) { return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(n.type) > -1 ? "Button" : n.binding && n.binding.field ? "Field" : "Container"; } createBaseEventProperty(n) { const e = {}; return e[this.viewModelId] = { type: "events-editor", editor: { initialData: n, viewSourceHandle: (t) => { var i; ((i = t.controller) == null ? void 0 : i.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(t); } } }, e; } } const N = class N { /** * 根据绑定字段类型获取可用的输入类控件 */ static getEditorTypesByMDataType(n, e = !1, t = "") { if (e) return [{ key: u["language-textbox"].type, value: u["language-textbox"].name }]; let i = N.fieldControlTypeMapping[n]; if (t === "data-grid-column" && (i != null && i.length)) { const r = [u["check-group"].type, u["radio-group"].type, u.image.type, u["rich-text-editor"].type, u.avatar.type]; i = i.filter((s) => !r.includes(s.key)); } if (t === "tree-grid-column" && (i != null && i.length)) { const r = [u["check-group"].type, u["radio-group"].type, u.image.type, u["rich-text-editor"].type, u.avatar.type, u.switch.type]; i = i.filter((s) => !r.includes(s.key)); } return i; } /** * 获取所有输入类控件 */ static getAllInputTypes() { const n = []; for (const e in N.fieldControlTypeMapping) N.fieldControlTypeMapping[e].forEach((t) => { n.find((i) => i.key === t.key && i.value === t.value) || n.push({ key: t.key, value: t.value }); }); return n; } /** * 提供schema字段基础属性和DOM控件属性的映射 * @param control 控件元数据 */ static mappingDomPropAndSchemaProp(n, e) { var r; const t = (r = n.editor) == null ? void 0 : r.type, i = []; return (n.type === u["data-grid-column"].type || n.type === u["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" }), (t === u["input-group"].type || t === u.textarea.type || t === u["number-spinner"].type) && i.push({ domField: "editor.maxLength", schemaField: "type.length" }), t === u["number-spinner"].type && i.push({ domField: "editor.precision", schemaField: "type.precision" }), (n.type === u["data-grid-column"].type || n.type === u["tree-grid-column"].type) && i.push({ domField: "formatter.precision", schemaField: "type.precision" }), (t === u["combo-list"].type || t === u["radio-group"].type) && i.push({ domField: "editor.data", schemaField: "type.enumValues" }), (n.type === u["data-grid-column"].type || n.type === u["tree-grid-column"].type) && i.push({ domField: "formatter.data", schemaField: "type.enumValues" }), t === u["date-picker"].type && (i.push({ domField: "editor.displayFormat", schemaField: "editor.format" }), i.push({ domField: "editor.fieldType", schemaField: "type.name" })), t === u["number-spinner"].type && (i.push({ domField: "editor.max", schemaField: "editor.maxValue" }), i.push({ domField: "editor.min", schemaField: "editor.minValue" })), t === u.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" }), (n.type === u["data-grid-column"].type || n.type === u["tree-grid-column"].type) && i.push({ domField: "field", schemaField: "bindingPath" }), i; } }; /** * <字段类型,可配置的控件类型列表>的映射 */ b(N, "fieldControlTypeMapping", { String: [ { key: u["input-group"].type, value: u["input-group"].name }, { key: u.lookup.type, value: u.lookup.name }, { key: u.image.type, value: u.image.name }, { key: u["date-picker"].type, value: u["date-picker"].name }, { key: u.switch.type, value: u.switch.name }, { key: u["check-box"].type, value: u["check-box"].name }, { key: u["check-group"].type, value: u["check-group"].name }, { key: u["radio-group"].type, value: u["radio-group"].name }, { key: u["combo-list"].type, value: u["combo-list"].name }, { key: u.textarea.type, value: u.textarea.name }, { key: u["time-picker"].type, value: u["time-picker"].name }, { key: u["rich-text-editor"].type, value: u["rich-text-editor"].name } ], Text: [ { key: u.textarea.type, value: u.textarea.name }, { key: u.lookup.type, value: u.lookup.name }, { key: u.image.type, value: u.image.name }, { key: u.avatar.type, value: u.avatar.name }, { key: u["rich-text-editor"].type, value: u["rich-text-editor"].name } ], Decimal: [ { key: u["number-spinner"].type, value: u["number-spinner"].name } ], Integer: [ { key: u["number-spinner"].type, value: u["number-spinner"].name } ], Number: [ { key: u["number-spinner"].type, value: u["number-spinner"].name }, { key: u.switch.type, value: u.switch.name }, { key: u["check-box"].type, value: u["check-box"].name } ], BigNumber: [ { key: u["number-spinner"].type, value: u["number-spinner"].name } ], Date: [ { key: u["date-picker"].type, value: u["date-picker"].name } ], DateTime: [ { key: u["date-picker"].type, value: u["date-picker"].name } ], Boolean: [ { key: u.switch.type, value: u.switch.name }, { key: u["check-box"].type, value: u["check-box"].name } ], Enum: [ { key: u["combo-list"].type, value: u["combo-list"].name }, { key: u["radio-group"].type, value: u["radio-group"].name } ], Object: [ { key: u.lookup.type, value: u.lookup.name }, { key: u["combo-list"].type, value: u["combo-list"].name } // { key: DgControl['radio-group'].type, value: DgControl['radio-group'].name }, ] }); let G = N; var L = /* @__PURE__ */ ((o) => (o.Form = "Form", o.Variable = "Variable", o))(L || {}); class J { constructor() { /** 控件标题 */ b(this, "label", ""); /** 控件id */ b(this, "id", ""); /** 每个控件占用的栅格数 */ b(this, "columnInSM", 12); b(this, "columnInMD", 6); b(this, "columnInLG", 3); b(this, "columnInEL", 2); /** 每个控件占用的列数 */ b(this, "displayWidthInSM", 1); b(this, "displayWidthInMD", 1); b(this, "displayWidthInLG", 1); b(this, "displayWidthInEL", 1); /** 编辑器内部默认显示的屏幕大小-----可以去掉 */ b(this, "displayColumnCountAtBreakPoint", "md"); /** 控件所在行,传0即可-----编辑器内部使用 */ b(this, "tagRow", 0); /** 控件是否显示上方空白:传0即可-----编辑器内部使用 */ b(this, "showTopBorder", 0); /** 区域,从1开始。卡片内的控件从上往下,从左往右划分区域,遇到分组fieldSet时group+1,分组结束后group+1 */ b(this, "group", 1); /** 控件是否符合标准的class配置(设计器用的) */ b(this, "isSupportedClass", !0); /** 控件所在分组id(设计器用的) */ b(this, "fieldSetId", ""); } } function Me(o) { let n, e; const t = /* @__PURE__ */ new Map(); let i = []; function r(c, d) { const h = (c || "").split(" ").filter((x) => x.startsWith("col-")); if (h.length === 0) { d.isSupportedClass = !1; return; } let f = h.find((x) => /^col-([1-9]|10|11|12)$/.test(x)), m = h.find((x) => /^col-md-([1-9]|10|11|12)$/.test(x)), y = h.find((x) => /^col-xl-([1-9]|10|11|12)$/.test(x)), v = h.find((x) => /^col-el-([1-9]|10|11|12)$/.test(x)); f = f || "col-12", d.columnInSM = parseInt(f.replace("col-", ""), 10), d.displayWidthInSM = d.columnInSM / 12, d.displayWidthInSM !== 1 && (d.isSupportedClass = !1), m = m || "col-md-" + d.columnInSM, d.columnInMD = parseInt(m.replace("col-md-", ""), 10), d.displayWidthInMD = d.columnInMD / 6, [1, 2].includes(d.displayWidthInMD) || (d.isSupportedClass = !1), y = y || "col-xl-" + d.columnInMD, d.columnInLG = parseInt(y.replace("col-xl-", ""), 10), d.displayWidthInLG = d.columnInLG / 3, [1, 2, 3, 4].includes(d.displayWidthInLG) || (d.isSupportedClass = !1), v = v || "col-el-" + d.columnInLG, d.columnInEL = parseInt(v.replace("col-el-", ""), 10), d.displayWidthInEL = d.columnInEL / 2, [1, 2, 3, 4, 5, 6].includes(d.displayWidthInEL) || (d.isSupportedClass = !1); } function s(c, d, g, h = !1) { let f = !1; if (!c.contents || c.contents.length === 0) { const m = new J(); r(c.layout, m), d.push(m); return; } c.contents.forEach((m) => { if (m.type === "fieldset") { g += 1, s(m, d, g, !0), f = !0; return; } if (m.type === "dynamic-form") return; f && (g += 1, f = !1); const y = m.appearance && m.appearance.class, v = new J(); y ? r(y, v) : v.isSupportedClass = !1, v.label = m.label || m.id, v.id = m.id, v.group = g, h && (v.fieldSetId = c.id), e === m.id && (n = g), t.set(m.id, m), d.push(v); }); } function p(c) { const d = o.getComponentById(c); if (!d || !d.componentType || !d.componentType.startsWith("form")) return { result: !1, message: "只可以在响应式表单组件中调整响应式布局配置" }; const g = o.selectNode(d, (h) => h.type === u["response-form"].type); return !g || !g.contents || g.contents.length === 0 ? { result: !1, message: "Form区域内没有控件,请先添加控件" } : { result: !0, message: "", formNode: g }; } function l(c, d) { d = d || c.id; const { result: g, message: h, formNode: f } = p(d); if (!g) return { result: g, message: h }; e = c.id, i = [], t.clear(); const m = f.contents[0].type === u.fieldset.type ? 0 : 1; s(f, i, m); const y = i.find((x) => !x.isSupportedClass); return { defaultState: { defaultGroupNumber: n || 1, model: y ? "customize" : "standard" }, importData: i }; } function a(c, d) { d = d; const { result: g, formNode: h } = p(d); if (!g) return ""; const f = []; return c.forEach((m) => { var x; const y = t.get(m.id), v = y.appearance && y.appearance.class; if (v) { const C = v.split(" ").filter((T) => !T.startsWith("col-")), k = "col-" + m.columnInSM, F = "col-md-" + m.columnInMD, S = "col-xl-" + m.columnInLG, w = "col-el-" + m.columnInEL, P = [k, F, S, w].concat(C); y.appearance.class = P.join(" "); } if (m.fieldSetId) { const E = h.contents.find((k) => k.id === m.fieldSetId), C = f.find((k) => k.id === m.fieldSetId); C ? (x = C.contents) == null || x.push(y) : (f.push(E), E.contents = [y]); } else f.push(y); }), h.contents = f, h.id; } return { checkCanFindFormNode: p, checkCanOpenLayoutEditor: l, changeFormControlsByResponseLayoutConfig: a, getResonseFormLayoutConfig: s }; } const ke = (o) => V(se, null, [V("h5", null, [W("代码示例")]), V("pre", { style: "background-color: #f5f5f5; padding: 10px; border-radius: 5px;" }, [V("code", null, [` <h3>Tips:</h3> <span style="color: blue;"> 自定义提示内容 </span> `])])]); class Pe extends Se { constructor(e, t) { super(e, t); b(this, "responseLayoutEditorFunction"); /** 控件绑定的变量 */ b(this, "bindingVarible"); b(this, "formGroupEvents", [ { label: "fieldValueChanging", name: "绑定字段值变化前事件" }, { label: "fieldValueChanged", name: "绑定字段值变化后事件" }, { label: "onClickLabel", name: "标签点击事件" } ]); b(this, "numberEditorOptions", { type: "number-spinner", useThousands: !1, keyboard: !1, showButton: !1 }); b(this, "showCustomValue", (e) => { var i; const t = this.designViewModelField != null && ((i = this.designViewModelField) == null ? void 0 : i.type.name) !== "Boolean"; return this.formRule ? e.dataType !== "boolean" : t; }); this.responseLayoutEditorFunction = Me(this.formSchemaUtils); } getCommonPropertyConfig(e, t, i = "Card") { if (this.propertyConfig.categories.basic = this.getBasicProperties(e, t, i), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e, t), this.propertyConfig.categories.behavior = this.getBehaviorConfig(e, "form-group"), i === "Card") { const r = this.getTipsConfig(e); this.propertyConfig.categories.behavior.properties = { ...this.propertyConfig.categories.behavior.properties, ...r }, ["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, t) { return this.getCommonPropertyConfig(e, t, "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, t) { return this.propertyConfig.categories = {}, this.getCommonPropertyConfig(e, t, "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, t, i = "Card") { var d; const r = this; this.setDesignViewModelField(e); const { canChangeControlType: s, editorTypeList: p } = this.getAvailableEditorType(e), l = this.getPropertyEditorParams(e, ["Variable"], "label", {}, { newVariablePrefix: "", newVariableType: "String" }); let a = p; this.formRule && (a = p.filter((g) => g.key !== "image" && g.key !== "rich-text-editor" && g.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: a, readonly: !s } }, 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: l, 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: ((d = e.editor) == null ? void 0 : d.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(g, h, f) { if (g) switch (g && g.propertyID) { case "type": { r.changeControlType(e, g, t); break; } case "label": { g.needRefreshControlTree = !0; break; } case "binding": { r.changeBindingField(e, g, f); break; } case "titleDataSource": { r.afterMutilEditorChanged(e, g); break; } } } }; return i.toLocaleLowerCase() !== "card" && (c.hide = !0, delete c.properties.showLabelType), c; } getExpandProperties(e, t = "Card") { const i = this, r = ["Const", "Variable"], s = this.getPropertyEditorParams(e, r, "expandable"), p = this.getProper