@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,610 lines (1,609 loc) • 49.3 kB
JavaScript
var fe = Object.defineProperty;
var ge = (s, e, t) => e in s ? fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var C = (s, e, t) => ge(s, typeof e != "symbol" ? e + "" : e, t);
import { EVENT_PROPERTY_TAB_IDS as O, withInstall as me } from "../../components/common/index.esm.js";
import { FWizard as he, FWizardPage as ve, FWizardPageDetail as be } from "../../components/wizard/index.esm.js";
import { ref as I, computed as k, defineComponent as L, watch as A, provide as ye, inject as N, onMounted as _, createVNode as x, compile as we } from "vue";
import Pe from "../../components/step/index.esm.js";
import { DgControl as Z, canvasChanged as Ce, refreshCanvas as Ie, useDesignerComponent as G } from "../../components/designer-canvas/index.esm.js";
import { cloneDeep as xe } from "lodash-es";
import { resolveAppearance as J, createPropsResolver as K } from "../../components/dynamic-resolver/index.esm.js";
const ze = {
stepClickable: { type: Boolean, default: !1 },
stepCls: { type: String, default: "" },
direction: { type: String, default: "vertical" },
stepPosition: { type: String, default: "None" },
fill: { type: Boolean, default: !0 },
storedIndex: { type: Boolean, default: !1 },
storedIndexState: { type: Boolean, default: !1 },
currentPageId: { type: String, default: "" },
currentStepIndex: { type: Number, default: 0 },
visible: { type: Boolean, default: !0 },
stepsData: { type: Array, default: () => [] },
customClass: { type: String, default: "" },
customStyle: { type: String, default: "" }
}, H = Symbol("WizardContext");
function Me(s, e) {
const t = I({}), i = k(() => {
var u;
return ((u = s[e.value]) == null ? void 0 : u.id) || "";
});
function r(u) {
t.value = u;
}
function o() {
return t.value;
}
function n() {
e.value > 0 && (e.value === s.length ? e.value = e.value - 2 : e.value--);
}
function d() {
e.value < s.length && e.value++;
}
function a(u) {
e.value = u;
}
function l(u, m) {
t.value[u] = m;
}
function c(u) {
return t.value[u];
}
function p() {
return t.value[i.value];
}
function g() {
const u = s.findIndex((m) => m.id === i.value);
return u > 0 ? s[u - 1].id : i.value;
}
function h() {
const u = s.findIndex((m) => m.id === i.value);
return u < s.length ? s[u + 1].id : i.value;
}
function w(u) {
const m = s.findIndex((z) => z.id === u);
return m > 0 ? t.value[s[m - 1].id] : t.value[u];
}
function v(u) {
const m = s.findIndex((z) => z.id === u);
return m < s.length ? t.value[s[m + 1].id] : t.value[u];
}
return {
currentPageId: i,
currentStepIndex: e,
wizardData: t,
setWizardData: r,
getWizardData: o,
// gotoPreviousPage,
// gotoNextPage,
gotoPreviousStep: n,
gotoNextStep: d,
setCurrentStep: a,
setDataByPageId: l,
getDataByPageId: c,
getCurrentPageData: p,
getPreviousPageDataByPageId: w,
getNextPageDataByPageId: v,
getPreviousPageId: g,
getNextPageId: h
};
}
const E = {
"tab-page": { type: "tab-page" },
section: { type: "section" },
"list-view": { name: "列表" }
};
function Te(s) {
const { formSchemaUtils: e, formStateMachineUtils: t } = s;
function i(a, l = "") {
return {
path: l + a.code,
field: a.id,
fullPath: a.code
};
}
function r(a, l = "") {
const c = e.getViewModelById(a);
return c ? c.states.map((p) => i(p, l)) : [];
}
function o(a) {
const l = e.getRootViewModelId(), c = r(a);
if (a === l)
return c;
const p = r(l, "root-component.");
return [...c, ...p];
}
function n(a) {
return a.binding && a.binding.path || a.id || "";
}
function d() {
return t && t.getRenderStates() || [];
}
return { getVariables: o, getControlName: n, getStateMachines: d };
}
class Ee {
constructor(e) {
C(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'"
}
]);
C(this, "expressionNames", {
compute: "计算表达式",
dependency: "依赖表达式",
validate: "验证表达式",
dataPicking: "帮助前表达式",
visible: "可见表达式",
readonly: "只读表达式",
required: "必填表达式"
});
C(this, "getExpressionConverter", (e, t) => ({
convertFrom: (i, r, o, n) => {
const d = o.getExpressionRuleValue(e, t || r);
return d && d.value || "";
},
convertTo: (i, r, o, n, d) => {
var a;
if (r === "dataPicking" && (o != null && o.target)) {
const l = `${o.target}_dataPicking`;
((a = o.rules) == null ? void 0 : a.some(
(p) => p.id === l && p.value
)) ? i.dictPickingExpressionId = l : delete i.dictPickingExpressionId;
}
n.updateExpression(o);
}
}));
this.formSchemaService = e;
}
getExpressionRule(e, t) {
const i = this.getExpressionData();
if (!i)
return "";
const r = i.find((n) => n.target === e);
if (!r)
return "";
const o = r.rules.find((n) => n.type === t);
return o || "";
}
// 获取上下文表单变量
getContextFormVariables() {
const { module: e } = this.formSchemaService.getFormSchema();
if (!e.viewmodels || e.viewmodels.length === 0)
return [];
const t = this.formSchemaService.getRootViewModelId(), i = this.formSchemaService.getViewModelById(t);
if (!i || !i.states || i.states.length === 0)
return [];
const r = [];
return i.states.filter((o) => o.category === "remote").forEach((o) => {
r.push({
key: o.code,
name: o.name,
description: o.name,
category: o.category
});
}), r;
}
createTreeNode(e, t, i = "label") {
return {
id: e.id,
name: e.name,
bindingPath: e[i],
parents: t,
type: "field"
};
}
buildEntityFieldsTreeData(e = null, t) {
const i = [];
return e == null || e.forEach((r) => {
var d;
const o = this.createTreeNode(r, t);
let n = [];
(d = r.type) != null && d.fields && (n = this.buildEntityFieldsTreeData(r.type.fields, [...t, r.label])), i.push({
data: o,
children: n,
expanded: !0
});
}), i;
}
buildChildEntityTreeData(e = null, t) {
const i = [];
return e == null || e.forEach((r) => {
var a, l;
const o = this.createTreeNode(r, t);
o.type = "entity";
const n = this.buildEntityFieldsTreeData((a = r.type) == null ? void 0 : a.fields, [...t, r.label]), d = this.buildChildEntityTreeData((l = r.type) == null ? void 0 : l.entities, [...t, r.label]);
d != null && d.length && (n == null || n.push(...d)), i.push({
data: o,
children: n || [],
// 空值回退
expanded: !0
});
}), i;
}
getEntitiesTreeData() {
const e = this.formSchemaService.getSchemaEntities();
if (!(e != null && e.length))
return [];
const t = e[0];
if (!(t != null && t.type))
return [];
const i = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), r = this.buildChildEntityTreeData(t.type.entities, [t.code]);
return r != null && r.length && (i == null || i.push(...r)), {
entityCode: t.code,
fields: [{
data: this.createTreeNode(t, [], "code"),
children: i || []
}]
};
}
getEntitiesAndVariables() {
return {
entities: this.getEntitiesTreeData(),
variables: {
session: {
name: "系统变量",
items: this.sessionVariables,
visible: !1
},
forms: {
name: "表单变量",
items: this.getContextFormVariables(),
visible: !0
}
}
};
}
onBeforeOpenExpression(e, t, i) {
const r = i === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(r, t), n = this.getEntitiesAndVariables(), d = {
message: ["validate", "required", "dataPicking"].includes(t) && o ? o.message : "",
...n
};
return o.messageType != null && (d.messageType = o.messageType), d;
}
buildRule(e, t, i, r) {
const { expression: o, message: n, messageType: d } = t, a = {
id: `${e}_${i}`,
type: i,
value: o
};
return (i === "validate" || i === "dataPicking" || i === "required") && (a.message = n), i === "dataPicking" && (a.messageType = d), i === "validate" && r && (a.elementId = r), a;
}
getExpressionData() {
const { expressions: e } = this.formSchemaService.getFormSchema().module;
return e || [];
}
updateExpression(e, t, i, r) {
const o = t === "Field" ? e.binding.field : e.id, n = this.buildRule(o, i, r, e.type === "form-group" ? e.id : "");
let a = this.getExpressionData().find((c) => c.targetType === t && c.target === o);
const l = (c) => c.value.trim() === "";
if (a) {
const c = a.rules.find((p) => p.id === n.id);
if (c)
l(n) ? a.rules = a.rules.filter((p) => p.id !== n.id) : (Object.assign(c, n), r === "validate" && e.type === "form-group" && (c.elementId = e.id));
else {
if (l(n))
return null;
a.rules = a.rules || [], a.rules.push(n);
}
} else {
if (l(n))
return null;
a = {
target: `${o}`,
rules: [n],
targetType: t
};
}
return a;
}
getExpressionEditorOptions(e, t, i, r) {
return i.reduce((o, n) => {
var a, l;
const d = t === "Field" ? (a = e == null ? void 0 : e.binding) == null ? void 0 : a.field : e.id;
return o[n] = {
hide: t === "Field" ? !!((l = e == null ? void 0 : e.binding) != null && l.field) : !1,
description: "",
title: this.expressionNames[n],
type: "string",
$converter: this.getExpressionConverter(d),
refreshPanelAfterChanged: !0,
editor: {
type: "expression-editor",
singleExpand: !1,
dialogTitle: `${this.expressionNames[n]}编辑器`,
showMessage: n === "validate" || n === "dataPicking" || n === "required",
showMessageType: n === "dataPicking",
beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
onSubmitModal: (c) => {
const p = this.updateExpression(e, t, c, n);
if (r) {
const g = this.buildRule(d, c, n);
r(g);
}
return p;
}
}
}, o;
}, {});
}
getExpressionInfo(e, t, i) {
const r = t === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(r, i), n = {
value: o && o.value,
targetId: r,
targetType: t,
expressionType: i
};
return o && o.message && (n.message = o.message), n;
}
getExpressionConfig(e, t, i = ["compute", "dependency", "validate"], r) {
var o;
return {
description: "表达式",
title: "表达式",
hide: !(e.binding && ((o = e.binding) == null ? void 0 : o.type) === "Form"),
properties: {
...this.getExpressionEditorOptions(e, t, i, r)
}
};
}
getExpressionOptions(e, t, i) {
const r = this.getExpressionInfo(e, t, i);
return {
dialogTitle: `${this.expressionNames[i] || "表达式"}编辑器`,
singleExpand: !1,
showMessage: i === "required",
beforeOpen: () => this.onBeforeOpenExpression(e, i, t),
expressionInfo: r
};
}
}
class ee {
constructor(e, t) {
C(this, "componentId");
C(this, "viewModelId");
C(this, "eventsEditorUtils");
C(this, "formSchemaUtils");
C(this, "formMetadataConverter");
C(this, "designViewModelUtils");
C(this, "designViewModelField");
C(this, "controlCreatorUtils");
C(this, "designerHostService");
C(this, "designerContext");
C(this, "modalService", null);
/** 表单规则 */
C(this, "formRule", null);
C(this, "schemaService", null);
C(this, "metadataService", null);
C(this, "propertyConfig", {
type: "object",
categories: {}
});
C(this, "expressionProperty");
var i;
this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((i = this.formSchemaUtils) == null ? void 0 : i.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext, this.modalService = t.modalService, this.expressionProperty = new Ee(this.formSchemaUtils);
}
/**
* 是否在响应式表单中
*/
inResponsiveForm() {
var e;
return !!((e = this.designerContext) != null && e.responsiveForm);
}
getFormDesignerInstance() {
var e, t;
return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
}
getTableInfo() {
var e;
return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(e) {
var i;
const t = e.binding && e.binding.type === "Form" && e.binding.field;
if (t) {
if (!this.designViewModelField) {
const r = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = r.fields.find((o) => o.id === t);
}
e.updateOn = (i = this.designViewModelField) == null ? void 0 : i.updateOn;
}
}
getBasicPropConfig(e) {
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: e.type, name: Z[e.type] && Z[e.type].name }]
}
}
}
};
}
getAppearanceConfig(e = null, t = {}, i) {
const r = {
title: "外观",
description: "Appearance"
}, o = {
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 n in t)
o[n] = Object.assign(o[n] || {}, t[n]);
return {
...r,
properties: { ...o },
setPropertyRelates(n, d) {
if (n) {
switch (n && n.propertyID) {
case "class":
case "style": {
Ce.value++;
break;
}
}
i && i(n, e, d);
}
}
};
}
/**
*
* @param propertyData
* @param propertyTypes
* @param propertyName
* @param constInfos
* @param variableInfos
* @param expressionType 指定表达式类型,存在属性和表达式类型不一致的情况
* @returns
*/
getPropertyEditorParams(e, t = [], i = "visible", r = {}, o = {}, n = "") {
const { getVariables: d, getControlName: a, getStateMachines: l } = Te(this.designerHostService), c = this.getRealTargetType(e), p = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], g = {
type: "property-editor",
propertyTypes: p
};
return p.map((h) => {
switch (h) {
case "Const":
Object.assign(g, {
constType: "enum",
constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
}, r);
break;
case "Expression":
g.expressionConfig = this.getExpressionOptions(e, c, n || i);
break;
case "StateMachine":
g.stateMachines = l();
break;
case "Variable":
Object.assign(g, {
controlName: a(e),
newVariablePrefix: "is",
newVariableType: "Boolean",
variables: d(this.viewModelId),
parentComponentId: this.componentId === "root-component" ? "" : "root-component",
onBeforeOpenVariables: (w) => {
w.value = d(this.viewModelId);
}
}, o), this.designerContext.designerMode === "PC_RTC" && (g.newVariablePrefix = "ext_" + g.newVariablePrefix);
break;
}
}), g;
}
getVisibleProperty(e, t = "") {
var o;
let i = ["Const", "Variable", "StateMachine", "Expression"];
return t === "gridFieldEditor" ? i = ["Const", "Expression"] : t === "form-group" && !((o = e.binding) != null && o.field) ? i = ["Const", "Variable", "StateMachine", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? i = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (i = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
visible: {
title: "是否可见",
type: "boolean",
description: "运行时组件是否可见",
editor: this.getPropertyEditorParams(e, i, "visible")
}
};
}
/**
* 获取行为
* @param propertyData
* @param viewModelId
* @returns
*/
getBehaviorConfig(e, t = "", i = {}, r) {
const o = {
title: "行为",
description: ""
}, n = this.getVisibleProperty(e, t);
for (const a in i)
n[a] = Object.assign(n[a] || {}, i[a]);
const d = this;
return {
...o,
properties: { ...n },
setPropertyRelates(a, l) {
if (a) {
switch (a.propertyID) {
case "disabled":
case "readonly":
case "visible":
d.afterMutilEditorChanged(e, a);
break;
}
r && r(a, l);
}
}
};
}
/**
* 当多值编辑器变更时
* @param propertyData
* @param changeObject
*/
afterMutilEditorChanged(e, t) {
this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t, e), this.clearExpression(t, e);
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(e, t) {
const i = t && t.parent && t.parent.schema;
if (!i)
return;
const r = i.contents.findIndex((n) => n.id === e), o = xe(i.contents[r]);
i.contents.splice(r, 1), i.contents.splice(r, 0, o), Ie();
}
/**
* 属性编辑器,在编辑过程中会新增变量,此处需要将新增的变量追加到ViewModel中
* @param changeObject
* @param viewModelId
* @returns
*/
addNewVariableToViewModel(e, t) {
const i = e.propertyValue;
if (!(i && typeof i == "object") || !(i.type === "Variable" && i.isNewVariable))
return;
const n = {
id: i.field,
category: "locale",
code: i.fullPath,
name: i.fullPath,
type: i.newVariableType || "String",
isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
};
delete i.newVariableType, delete i.isNewVariable, this.formSchemaUtils.getVariableByCode(n.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(n);
}
getExpressions() {
let e = [];
return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
}
/**
* 更新表达式到expressions节点
* @param changeObject
*/
updateExpressionValue(e, t) {
const i = e.propertyValue;
if (!((i && i.type) === "Expression" && i.expressionInfo))
return;
const { expressionId: n, expressionInfo: d } = i, { targetId: a, targetType: l, expressionType: c, value: p, message: g } = d, h = this.getExpressions();
let w = h.find((u) => u.target === a);
w || (w = { target: a, rules: [], targetType: l }, h.push(w));
const v = w.rules.find((u) => u.type === c);
if (v)
v.id = n, v.value = p, v.message = g, (c === "minDate" || c === "maxDate" || c === "defaultTime") && (v.elementId = t.id);
else {
const u = { id: n, type: c, value: p, message: g, elementId: t.id };
w.rules.push(u);
}
delete i.expressionInfo;
}
/**
* 属性类型切换为非表达式后,清除原表达式
* @param changeObject
* @param propertyData
* @returns
*/
clearExpression(e, t) {
const i = e.propertyValue;
if (i && i.type === "Expression")
return;
const o = e.propertyID, n = this.getExpressions(), d = t.binding ? t.binding.field : t.id, a = n.find((l) => l.target === d);
!a || !a.rules || (a.rules = a.rules.filter((l) => l.type !== o));
}
getExpressionOptions(e, t, i) {
return this.expressionProperty.getExpressionOptions(e, t, i);
}
getRealTargetType(e) {
return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
}
createBaseEventProperty(e) {
const t = {};
return t[this.viewModelId] = {
type: "events-editor",
editor: {
initialData: e,
viewSourceHandle: (i) => {
var r;
((r = i.controller) == null ? void 0 : r.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(i);
}
}
}, t;
}
}
function Ve() {
function s(e) {
return e.map((t) => ({
id: t.id,
type: "wizard-page",
pageId: t.id,
contents: [
{
id: "wizard-page-detail" + t.id,
type: "wizard-page-detail",
headerTemplate: "",
contentTemplate: "",
footerTemplate: `<!-- <div class="f-template-wizard-page-footer"> \r
<button class="btn btn-secondary f-btn-ml">\r
取消\r
</button>\r
<button class="btn btn-secondary f-btn-ml" v-if="context.stepIndex !== 0">\r
上一步\r
</button>\r
<button class="btn btn-primary f-btn-ml" v-if="context.stepIndex !== context.pageIdList.length -1">\r
下一步\r
</button>\r
<button class="btn btn-primary f-btn-ml" >\r
完成\r
</button>\r
</div> -->`,
contents: [
{
id: "external-container" + t.id,
type: "external-container",
appearance: {
class: "position-relative h-100"
},
visible: !0,
useIsolateJs: !1,
externalCmp: null
}
]
}
]
}));
}
return { createPageDetail: s };
}
class Se extends ee {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e) {
return this.getBasicPropConfig(e), this.getAppearanceProperties(), this.getDataPropConfig(e), this.propertyConfig.categories.behavior = this.getBehaviorConfig(
e,
"wizard",
{
stepClickable: {
description: "步骤条是否支持点击",
title: "步骤条是否支持点击",
type: "boolean"
}
}
), this.getEventPropConfig(e), this.propertyConfig;
}
/**
* 数据配置
* @param propertyData 属性
*/
getDataPropConfig(e) {
this.propertyConfig.categories.dataConfig = {
title: "数据配置",
properties: {
stepsData: {
title: "步骤条",
type: "array",
description: "是否填充",
editor: {
columns: [
{ field: "id", title: "值", dataType: "string" },
{ field: "title", title: "名称", dataType: "string" }
// { field: 'icon', title: '图标', dataType: 'string' },
],
type: "item-collection-editor",
valueField: "id",
nameField: "title",
requiredFields: ["id", "title"],
uniqueFields: ["id", "title"]
},
refreshPanelAfterChanged: !0
},
currentStepIndex: {
title: "默认显示页面索引",
type: "number",
description: "默认显示页面索引",
editor: {
needValid: !0,
min: 0,
max: e.stepsData.length - 1
}
}
},
setPropertyRelates(t, i) {
if ((t == null ? void 0 : t.propertyID) === "stepsData") {
const { createPageDetail: r } = Ve(), o = r(t.propertyValue);
e.contents = o;
}
}
};
}
getBasicPropConfig(e) {
const t = super.getBasicPropConfig(e);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...t.properties
}
};
}
/**
* 将schema实体表组装成树
*/
assembleSchemaEntityToTree(e, t, i, r = "", o = []) {
const n = r ? `${r}/${e.label}` : "/";
return o.push({
id: e.id,
name: e.name,
label: e.label,
layer: t,
parent: i && i.id,
bindTo: n.replace("//", "/")
}), e.type.entities && e.type.entities.length && e.type.entities.map((d) => this.assembleSchemaEntityToTree(d, t + 1, e, n, o)), o;
}
getAppearanceProperties() {
this.propertyConfig.categories.appearance = {
title: "外观",
properties: {
class: {
title: "class样式",
type: "string",
description: "组件的class样式"
},
fill: {
title: "是否填充",
type: "boolean",
description: "是否填充"
},
direction: {
title: "步骤条排列方式",
type: "enum",
description: "步骤条排列方式",
editor: {
data: [
{ id: "vertical", name: "垂直" },
{ id: "horizontal", name: "水平" }
]
}
},
stepPosition: {
title: "步骤条摆放位置",
type: "enum",
description: "步骤条摆放位置",
editor: {
data: [
{ id: "PageLeft", name: "左侧" },
{ id: "Top", name: "左上方" },
{ id: "HeaderRight", name: "右上方" },
{ id: "None", name: "隐藏" }
]
}
}
}
};
}
getEventPropConfig(e) {
var n;
const t = [
{
label: "onClickItem",
name: "行点击事件"
}
];
(n = e.pagination) == null || n.enable;
const i = this, r = i.eventsEditorUtils.formProperties(e, i.viewModelId, t), o = i.createBaseEventProperty(r);
this.propertyConfig.categories.eventsEditor = {
title: "事件",
hideTitle: !0,
properties: o,
// 这个属性,标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: O,
tabName: "交互",
setPropertyRelates(d, a) {
const l = d.propertyValue;
delete e[i.viewModelId], l && (l.setPropertyRelates = this.setPropertyRelates, i.eventsEditorUtils.saveRelatedParameters(e, i.viewModelId, l.events, l));
}
};
}
isSubGrid() {
const e = this.formSchemaUtils.getViewModelById(this.viewModelId);
return e && e.bindTo ? e.bindTo.trim() !== "/" : !1;
}
}
function Ne(s, e) {
const t = s.schema;
function i() {
return "";
}
function r(c) {
return !1;
}
function o() {
return !0;
}
function n() {
return !0;
}
function d() {
return !0;
}
function a(c) {
return new Se(c, e).getPropertyConfig(t);
}
function l() {
var c, p, g, h;
if (s && e) {
const w = (c = s == null ? void 0 : s.componentInstance) == null ? void 0 : c.value.belongedComponentId;
let v = "", u = "";
const { formSchemaUtils: m } = e;
if (w) {
const T = m.getRootViewModelId(), V = m.getComponentByViewModelId(T), P = m.selectNode(V, (b) => b.contents && b.contents.find((y) => y.component === w));
(P == null ? void 0 : P.type) === ((p = E["tab-page"]) == null ? void 0 : p.type) && ((g = P == null ? void 0 : P.contents) != null && g.length) && (v = P.title || ""), (P == null ? void 0 : P.type) === ((h = E.section) == null ? void 0 : h.type) && (P == null ? void 0 : P.showHeader) !== !1 && (v = P.mainTitle || ""), v = v ? `${v} > ` : "", u = v ? P.id : "";
}
const z = E["list-view"].name;
e == null || e.formSchemaUtils.getControlBasicInfoMap().set(s.schema.id, {
componentTitle: z,
parentPathName: `${v}${z}`,
reliedComponentId: u
});
}
}
return {
canAccepts: r,
checkCanDeleteComponent: o,
checkCanMoveComponent: n,
hideNestedPaddingInDesginerView: d,
// triggerBelongedComponentToMoveWhenMoved,
// triggerBelongedComponentToDeleteWhenDeleted,
getPropsConfig: a,
setComponentBasicInfoMap: l,
getDesignerClass: i
};
}
const q = /* @__PURE__ */ L({
name: "FWizardDesign",
props: ze,
emits: ["stateChange", "update:currentPageId"],
setup(s, {
slots: e,
emit: t,
expose: i
}) {
const r = I(null), o = I(null), n = I(null), d = I(null), a = I([]), l = I(s.currentPageId), c = I(s.currentStepIndex);
A(() => s.currentStepIndex, (f, M) => {
f !== M && (c.value = f);
});
const {
currentStepIndex: p,
currentPageId: g,
setDataByPageId: h,
gotoNextStep: w,
gotoPreviousStep: v,
// gotoNextPage,
// gotoPreviousPage,
getDataByPageId: u,
getPreviousPageDataByPageId: m,
getNextPageDataByPageId: z,
getPreviousPageId: T,
getNextPageId: V,
getCurrentPageData: P
} = Me(s.stepsData, c), b = k(() => ({
"f-component-wizard-fill": s.fill,
"f-component-wizard": !0
})), y = () => ({
minHeight: "100px"
});
function S(f) {
c.value = f;
}
function B(f) {
l.value = f;
}
ye(H, {
wizardPageList: a,
wizardProps: s,
activeIndex: p,
activeId: g,
updateCurrentPageId: B,
// gotoNextPage,
// gotoPreviousPage,
gotoNextStep: w,
gotoPreviousStep: v,
setDataByPageId: h,
getNextPageDataByPageId: z,
getPreviousPageDataByPageId: m,
getPreviousPageId: T,
getNextPageId: V,
getDataByPageId: u,
getCurrentPageData: P
});
const R = I(), ae = N("designer-host-service"), $ = N("design-item-context"), de = Ne($, ae), Y = G(R, $, de);
function le() {
let f = "";
switch (s.stepPosition) {
case "Top":
f = "f-component-wizard-step-top";
break;
case "HeaderRight":
f = "f-component-wizard-step-headerright";
break;
case "PageLeft":
f = "f-component-wizard-step-pageleft";
break;
case "None":
f = "f-component-wizard-step-none";
break;
default:
f = "";
}
return {
[f]: !!f,
"f-wizard": !0
};
}
function F(f) {
return s.stepPosition === f;
}
A(() => s.currentPageId, (f, M) => {
f !== M && B(f);
}), A(() => s.currentStepIndex, (f, M) => {
f !== M && S(f);
});
function Q() {
if (!R.value)
return;
const f = R.value.parentElement;
f && f.className && f.className.includes("farris-component-wizard") && (s.fill ? f.className += " f-utils-fill-flex-column" : f.className.replace("f-utils-fill-flex-column", ""));
}
A(() => s.fill, (f, M) => {
f !== M && Q();
}), _(() => {
!l.value && a.value.length > 0 && (B(a.value[0]), S(0)), Q(), R.value.componentInstance = Y;
});
function ce(f) {
p.value = f.stepIndex;
}
const pe = k(() => ({
"f-wizard-step": !0
}));
function j() {
return x("div", {
class: pe.value
}, [x(Pe, {
ref: d,
activeIndex: p.value,
steps: s.stepsData,
direction: s.direction,
height: 300,
onClick: ce,
clickable: s.stepClickable
}, {
default: () => [e.stepTemplate && {
stepTemplate: (f) => {
var X;
const {
step: M,
index: D,
length: U,
activeIndex: W,
direction: ue
} = f;
return (X = e.stepTemplate) == null ? void 0 : X.call(e, {
step: M,
index: D,
length: U,
activeIndex: W,
direction: ue
});
}
}]
})]);
}
return i(Y.value), () => {
var f, M, D, U, W;
return x("div", {
ref: R,
class: b.value,
style: y()
}, [x("div", {
ref: o,
class: le()
}, [F("Top") && ((f = e.wizardStepTemplate) == null ? void 0 : f.call(e)), F("None") && x("div", {
class: "d-none"
}, [j()]), (e.wizardHeader || F("HeaderRight")) && x("div", {
class: "f-wizard-header",
ref: r
}, [(M = e.wizardHeader) == null ? void 0 : M.call(e), F("HeaderRight") && j()]), x("div", {
class: "f-wizard-content",
ref: n
}, [F("PageLeft") && j(), x("div", {
class: "f-wizard-pages"
}, [(U = (D = $ == null ? void 0 : $.schema) == null ? void 0 : D.contents) != null && U.length ? (W = e.default) == null ? void 0 : W.call(e) : null])])])]);
};
}
}), Be = /* @__PURE__ */ new Map([
["appearance", J]
]);
function Re(s, e, t, i) {
return e;
}
const $e = "https://json-schema.org/draft/2020-12/schema", Fe = "https://farris-design.gitee.io/wizard.schema.json", ke = "wizard-page-detail", De = "A Farris Component", Ue = "object", We = {
id: {
description: "The unique identifier for wizard-page-detail",
type: "string"
},
type: {
description: "The type string of step",
type: "string",
default: "step"
},
headerTemplate: {
description: "头部模板",
type: "string",
default: ""
},
contentTemplate: {
description: "内容模板",
type: "string"
},
footerTemplate: {
description: "底部模板",
type: "string",
default: `<div class="f-template-wizard-page-footer"> \r
<button class="btn btn-secondary f-btn-ml" [disabled]="viewModel.uiState.disableCancel" (click)="viewModel.cancelWizard1()">\r
取消\r
</button>\r
<button class="btn btn-secondary f-btn-ml" [disabled]="viewModel.uiState.disablePre" (click)="viewModel.preStep1()">\r
上一步\r
</button>\r
<button class="btn btn-primary f-btn-ml" [disabled]="viewModel.uiState.disableNext" (click)="viewModel.nextStep1()">\r
下一步\r
</button>\r
<button class="btn btn-primary f-btn-ml" [disabled]="viewModel.uiState.disableFinish" (click)="viewModel.finishWizard1()">\r
完成\r
</button>\r
</div>`
}
}, Ae = [
"id",
"type"
], qe = {
$schema: $e,
$id: Fe,
title: ke,
description: De,
type: Ue,
properties: We,
required: Ae
}, te = {
// 头部模板
headerTemplate: { type: Object },
// 内容模板
contentTemplate: { type: Object },
// 底部模板
footerTemplate: { type: Object }
}, ie = K(
te,
qe,
Be,
Re
);
class ne extends ee {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e) {
return this.getBasicPropConfig(e), this.propertyConfig.categories.behavior = this.getBehaviorConfig(
e,
"wizard",
{
headerTemplate: {
description: "头部模板",
title: "头部模板",
type: "string",
editor: {
type: "code-editor",
language: "html"
}
},
contentTemplate: {
description: "内容模板",
title: "内容模板",
type: "string",
editor: {
type: "code-editor",
language: "html"
}
},
footerTemplate: {
description: "底部模板",
title: "底部模板",
type: "string",
editor: {
type: "code-editor",
language: "html"
}
}
}
), this.propertyConfig;
}
getBasicPropConfig(e) {
const t = super.getBasicPropConfig(e);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...t.properties
}
};
}
getEventPropConfig(e) {
var n;
const t = [
{
label: "onClickItem",
name: "行点击事件"
}
];
(n = e.pagination) == null || n.enable;
const i = this, r = i.eventsEditorUtils.formProperties(e, i.viewModelId, t), o = i.createBaseEventProperty(r);
this.propertyConfig.categories.eventsEditor = {
title: "事件",
hideTitle: !0,
properties: o,
// 这个属性,标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: O,
tabName: "交互",
setPropertyRelates(d, a) {
const l = d.propertyValue;
delete e[i.viewModelId], l && (l.setPropertyRelates = this.setPropertyRelates, i.eventsEditorUtils.saveRelatedParameters(e, i.viewModelId, l.events, l)), e.remoteSort = !!e.columnSorted;
}
};
}
}
function je(s, e) {
const t = s.schema, i = I(!0), r = I(!0);
function o(p) {
return !1;
}
function n() {
return !1;
}
function d() {
return !1;
}
function a() {
return !0;
}
function l(p) {
return new ne(p, e).getPropertyConfig(t);
}
function c() {
var p, g, h, w;
if (s && e) {
const v = (p = s == null ? void 0 : s.componentInstance) == null ? void 0 : p.value.belongedComponentId;
let u = "", m = "";
const { formSchemaUtils: z } = e;
if (v) {
const V = z.getRootViewModelId(), P = z.getComponentByViewModelId(V), b = z.selectNode(P, (y) => y.contents && y.contents.find((S) => S.component === v));
(b == null ? void 0 : b.type) === ((g = E["tab-page"]) == null ? void 0 : g.type) && ((h = b == null ? void 0 : b.contents) != null && h.length) && (u = b.title || ""), (b == null ? void 0 : b.type) === ((w = E.section) == null ? void 0 : w.type) && (b == null ? void 0 : b.showHeader) !== !1 && (u = b.mainTitle || ""), u = u ? `${u} > ` : "", m = u ? b.id : "";
}
const T = E["list-view"].name;
e == null || e.formSchemaUtils.getControlBasicInfoMap().set(s.schema.id, {
componentTitle: T,
parentPathName: `${u}${T}`,
reliedComponentId: m
});
}
}
return {
canAccepts: o,
checkCanDeleteComponent: n,
checkCanMoveComponent: d,
hideNestedPaddingInDesginerView: a,
triggerBelongedComponentToMoveWhenMoved: i,
triggerBelongedComponentToDeleteWhenDeleted: r,
getPropsConfig: l,
setComponentBasicInfoMap: c
};
}
const Le = /* @__PURE__ */ L({
name: "FWizardPageDetailDesign",
props: te,
emits: ["pagedetailSelected"],
setup(s, {
slots: e,
expose: t,
emit: i
}) {
const r = I(), o = N("designer-host-service"), n = N("design-item-context"), d = je(n, o), a = G(r, n, d);
_(() => {
r.value = a.value;
});
function l() {
if (typeof s.footerTemplate == "string") {
const c = we(s.footerTemplate);
return x({
render: c
});
}
return s.footerTemplate();
}
return t(a.value), () => {
var c;
return x("div", {
class: "f-component-wizard-page-detail f-component-wizard-page-detail-fill",
style: {
padding: "20px"
}
}, [s.headerTemplate ? x("div", {
class: "f-component-wizard-page-detail-header"
}, [s.headerTemplate()]) : e.headerTemplate && x("div", {
class: "f-component-wizard-page-detail-header"
}, [e.headerTemplate()]), s.contentTemplate ? x("div", {
class: "f-component-wizard-page-detail-content"
}, [s.contentTemplate()]) : e.contentTemplate ? x("div", {
class: "f-component-wizard-page-detail-content"
}, [e.contentTemplate()]) : (c = e.default) == null ? void 0 : c.call(e), s.footerTemplate ? x("div", {
class: "f-component-wizard-page-detail-footer"
}, [l()]) : e.footerTemplate && x("div", {
class: "f-component-wizard-page-detail-footer"
}, [e.footerTemplate()])]);
};
}
}), _e = /* @__PURE__ */ new Map([
["appearance", J]
]);
function Ge(s, e, t, i) {
return e;
}
const Je = "https://json-schema.org/draft/2020-12/schema", Ke = "https://farris-design.gitee.io/wizard.schema.json", Ye = "wizard-page", Qe = "A Farris Component", Xe = "object", Ze = {
id: {
description: "The unique identifier for wizard",
type: "string"
},
type: {
description: "The type string of step",
type: "string",
default: "step"
},
pageId: {
description: "当前向导页的id",
type: "string"
}
}, Oe = [
"id",
"type"
], He = {
$schema: Je,
$id: Ke,
title: Ye,
description: Qe,
type: Xe,
properties: Ze,
required: Oe
}, re = {
pageId: { type: String, default: "" },
active: { type: Boolean, default: !1 }
}, oe = K(
re,
He,
_e,
Ge
);
function et(s, e) {
const t = s.schema, i = I(!0), r = I(!0);
function o(g) {
return !1;
}
function n() {
return !1;
}
function d() {
return !1;
}
function a() {
return !0;
}
function l() {
return "f-utils-fill";
}
function c(g) {
return new ne(g, e).getPropertyConfig(t);
}
function p() {
var g, h, w, v;
if (s && e) {
const u = (g = s == null ? void 0 : s.componentInstance) == null ? void 0 : g.value.belongedComponentId;
let m = "", z = "";
const { formSchemaUtils: T } = e;
if (u) {
const P = T.getRootViewModelId(), b = T.getComponentByViewModelId(P), y = T.selectNode(b, (S) => S.contents && S.contents.find((B) => B.component === u));
(y == null ? void 0 : y.type) === ((h = E["tab-page"]) == null ? void 0 : h.type) && ((w = y == null ? void 0 : y.contents) != null && w.length) && (m = y.title || ""), (y == null ? void 0 : y.type) === ((v = E.section) == null ? void 0 : v.type) && (y == null ? void 0 : y.showHeader) !== !1 && (m = y.mainTitle || ""), m = m ? `${m} > ` : "", z = m ? y.id : "";
}
const V = E["list-view"].name;
e == null || e.formSchemaUtils.getControlBasicInfoMap().set(s.schema.id, {
componentTitle: V,
parentPathName: `${m}${V}`,
reliedComponentId: z
});
}
}
return {
canAccepts: o,
checkCanDeleteComponent: n,
checkCanMoveComponent: d,
hideNestedPaddingInDesginerView: a,
triggerBelongedComponentToMoveWhenMoved: i,
triggerBelongedComponentToDeleteWhenDeleted: r,
getPropsConfig: c,
setComponentBasicInfoMap: p,
getDesignerClass: l
};
}
const tt = /* @__PURE__ */ L({
name: "FWizardPageDesign",
props: re,
emits: ["pageSelected"],
setup(s, {
slots: e
}) {
const {
wizardPageList: t,
activeId: i,
wizardProps: r,
activeIndex: o
} = N(H, {
activeId: I(""),
activeIndex: I(0),
wizardPageList: I([]),
wizardProps: {}
}), n = I(), d = N("designer-host-service"), a = N("design-item-context"), l = et(a, d), c = G(n, a, l), p = k(() => {
var h;
return ((h = r.stepsData[o.value]) == null ? void 0 : h.id) === s.pageId;
}), g = k(() => ({
"f-component-wizard-page": !0,
active: p.value
}));
return _(() => {
n.value = c.value, t.value.includes(s.pageId) || t.value.push(s.pageId);
}), () => {
var h;
return p.value && x("div", {
class: g.value
}, [(h = e.default) == null ? void 0 : h.call(e)]);
};
}
}), it = /* @__PURE__ */ new Map([
["appearance", J]
]);
function nt(s, e) {
const {
formSchemaUtils: t,
designViewModelUtils: i
} = e;
function r(d, a) {
var l, c, p, g;
return (c = (l = a == null ? void 0 : a.parentComponentInstance) == null ? void 0 : l.schema) == null || c.type, (g = (p = t.getFormSchema()) == null ? void 0 : p.module) == null || g.templateId, d;
}
function o(d) {
const a = s.getSchemaByType("component");
return Object.assign(a, {
id: `${d.componentId}-component`,
contents: [],
type: "wizard",
appearance: {
class: "f-utils-fill"
// style: ''
},
// "header": {
// "headerTemplate": "",
// "contents": []
// },
stepsData: [],
stepClickable: !0,
// "storedIndex": false,
fill: !1,
direction: "vertical",
stepPosition: "PageLeft"
// "currentPageId": "",
// "onStateChange": "",
}), a;
}
function n(d) {
const a = o(d);
return r(a, d);
}
return { createComponent: n };
}
function rt(s, e, t, i) {
var o, n, d, a, l, c;
const r = t.parentComponentInstance;
if (r && i) {
const p = Math.random().toString(36).slice(2, 6), g = {
componentId: `wizard-${p}`,
componentName: ((o = t.bindingSourceContext) == null ? void 0 : o.entityTitle) || ((d = (n = t.bindingSourceContext) == null ? void 0 : n.bindingEntity) == null ? void 0 : d.name) || `列表-${p}`,
componentType: "wizard",
parentContainerId: r.schema.id,
parentComponentInstance: r,
bindTo: ((a = t.bindingSourceContext) == null ? void 0 : a.bindTo) || "",
dataSource: (c = (l = t.bindingSourceContext) == null ? void 0 : l.bindingEntity) == null ? void 0 : c.label
}, { createComponent: h } = nt(s, i);
return h(g);
} else
return e;
}
const ot = "https://json-schema.org/draft/2020-12/schema", st = "https://farris-design.gitee.io/wizard.schema.json", at = "wizard", dt = "A Farris Component", lt = "object", ct = {
id: {
description: "The unique identifier for wizard",
type: "string"
},
type: {
description: "The type string of step",
type: "string",
default: "step"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
fill: {
description: "是否填充",
type: "boolean",
default: !0
},
direction: {
description: "步骤条排列方式",
type: "string",
default: "vertical"
},
stepPosition: {
description: "步骤条摆放位置",
type: "string",
default: "PageLeft"
},
stepsData: {
description: "步骤条",
type: "array",
default: []
},
currentStepIndex: {
description: "默认显示页面索引",
type: "number",
default: 0
},
visible: {
description: "是否可见",
type: "boolean",
default: !0
},
stepClickable: {
description: "步骤条是否支持点击",
type: "boolean",
default: !1
}
}, pt = [
"id",
"type"
], ut = {
$schema: ot,
$id: st,
title: at,
description: dt,
type: lt,
properties: ct,
required: pt
}, ft = {
stepClickable: { type: Boolean, default: !1 },
stepCls: { type: String, default: "" },
direction: { type: String, default: "vertical" },
stepPosition: { type: String, default: "None" },
fill: { type: Boolean, default: !0 },
storedIndex: { type: Boolean, default: !1 },
storedIndexState: { type: Boolean, default: !1 },
currentPageId: { type: String, default: "" },
currentStepIndex: { type: Number, default: 0 },
stepsData: { type: Array, default: () => [] }
}, se = K(ft, ut, it, rt);
q.register = (s, e, t, i, r) => {
s.wizard = he, e.wizard = se, s["wizard-page"] = ve, e["wizard-page"] = oe, s["wizard-page-detail"] = be, e["wizard-page-detail"] = ie;
};
q.registerDesigner = (s, e, t, i) => {
s.wizard = q, e.wizard = se, s["wizard-page"] = tt, e["wizard-page"] = oe, s["wizard-page-detail"] = Le, e["wizard-page-detail"] = ie;
};
const Ct = me(q);
export {
q as FWizardDesign,
Ct as default
};