form-designer-xinyi
Version:
基于vue3的设计器,可视化开发页面表单
645 lines (644 loc) • 17.9 kB
JavaScript
var b = Object.defineProperty;
var x = (i, e, t) => e in i ? b(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var a = (i, e, t) => x(i, typeof e != "symbol" ? e + "" : e, t);
import { defineAsyncComponent as G, ref as f, shallowRef as w } from "vue";
const g = (i, e) => G({
loader: i,
loadingComponent: e,
delay: 80
});
function y(i = 10) {
return Math.random().toString(36).substring(2, 2 + i);
}
function R(i) {
return i.charAt(0).toUpperCase() + i.slice(1);
}
function v(i, e = /* @__PURE__ */ new WeakMap()) {
if (typeof i != "object" || i === null)
return i;
if (e.has(i))
return e.get(i);
if (Array.isArray(i)) {
const s = i.map((n) => v(n, e));
return e.set(i, s), s;
}
const t = {};
return e.set(i, t), Object.keys(i).forEach((s) => {
t[s] = v(i[s], e);
}), t;
}
function B(i) {
const [e] = A([v(i)], (t) => {
var n, o;
const s = {
...t,
id: `${t.type}_${y(8)}`
};
return (s.field || s.input) && !((o = (n = M.getComponentConfingByType(s.type)) == null ? void 0 : n.editConstraints) != null && o.fixedField) && (s.field = s.id), s;
});
return e;
}
function S(i, e) {
for (const [t, s] of Object.entries(e)) {
const n = i == null ? void 0 : i[t];
n && s && typeof n == "object" && typeof s == "object" ? S(n, s) : i[t] = s;
}
Object.keys(i).reverse().forEach((t) => {
e.hasOwnProperty(t) || (Array.isArray(e) ? i.splice(t, 1) : delete i[t]);
});
}
function F(i, e, t = [], s = /* @__PURE__ */ new WeakMap()) {
const n = (o) => {
if (Array.isArray(o))
return o.map(n);
if (typeof o == "object" && o !== null) {
if (s.has(o))
return "[Circular]";
s.set(o, !0);
const r = Object.keys(o).sort(), l = {};
return r.forEach((u) => {
t.includes(u) || (l[u] = n(o[u]));
}), s.delete(o), l;
} else
return o;
};
return JSON.stringify(n(i)) === JSON.stringify(n(e));
}
function P(i, e) {
const t = [];
let s = !1;
function n(o) {
if (t.push(o), o.id === e && (s = !0), !s && o.children != null && o.children.length > 0)
for (let r = 0; r < o.children.length && (n(o.children[r]), !s); r++)
;
if (!s && o.slots)
for (let r in o.slots)
for (let l = 0; l < o.slots[r].length && (n(o.slots[r][l]), !s); l++)
;
s || t.pop();
}
return i.forEach(n), s || console.error(`没有查询到id为${e}的节点`), t;
}
function z(i, e) {
const t = i.split(".");
let s = e;
for (let n = 0; n < t.length; n++)
if (s = s[t[n]], typeof s > "u") return;
return s;
}
function E(i, e, t) {
const s = e.split(".");
let n = t;
s.forEach((o, r) => {
if (r === s.length - 1) {
n[o] = i;
return;
}
n = n[o] ?? (n[o] = {});
});
}
function V(i, e = "default") {
return I(i, e).map((s) => s.field);
}
function I(i, e = "default") {
const t = h(
i,
(n) => {
var o;
return n.type === "form" && (((o = n.componentProps) == null ? void 0 : o.name) ?? n.name === e);
},
!0
);
return h(
(t == null ? void 0 : t.children) ?? [],
(n) => !!n.input,
!1,
(n) => n.type !== "subform"
);
}
function h(i, e, t = !1, s) {
const n = [], o = [...i];
for (; o.length; ) {
const r = o.pop();
if (r != null && r.children && (!s || s(r)) && o.push(...r.children), r != null && r.slots && (!s || s(r)))
for (let l in r.slots)
o.push(...r.slots[l]);
if (e(r) && (n.push(r), t))
return r;
}
return t ? !1 : n;
}
function A(i, e, t) {
const s = [...i];
for (; s.length; ) {
const n = s.pop();
if (n != null && n.children && (!t || t(n)) && s.push(...n.children), n != null && n.slots && (!t || t(n)))
for (let o in n.slots)
s.push(...n.slots[o]);
S(n, e(n));
}
return i;
}
function J(i, e) {
const t = h(
i,
(s) => s.id === e,
!0
);
if (!t)
throw new Error(`没有查询到id为${e}的节点`);
return t;
}
function N(i, e) {
const t = [{ type: "", children: i }];
let s = 0, n = null;
if (h(
t,
(o) => {
if (n = o.children ?? null, !n) {
if (o != null && o.slots)
for (let r in o.slots) {
n = o.slots[r];
for (let l = 0; l < n.length; l++)
if (n[l].id === e)
return s = l, !0;
}
return !1;
}
for (let r = 0; r < n.length; r++)
if (n[r].id === e)
return s = r, !0;
return !1;
},
!0
), !n)
throw new Error(`没有查询到id为${e}的节点`);
return {
list: n,
schema: n[s],
index: s
};
}
function W(i) {
const e = {
schemas: [
{
type: "page",
id: "root",
label: "页面",
children: [
{
label: "表单",
type: "form",
icon: "epic-icon-daibanshixiang",
labelWidth: i.config.labelWidth || 100,
name: "default",
componentProps: {
layout: i.config.layout || "horizontal",
labelWidth: i.config.labelWidth || 100,
labelLayout: i.config.labelLayout === "flex" ? "fixed" : "flex",
labelCol: i.config.labelCol || { span: 5 },
wrapperCol: i.config.wrapperCol || { span: 19 },
hideRequiredMark: i.config.hideRequiredMark || !1,
colon: i.config.colon || !0,
labelAlign: i.config.labelAlign || "right",
size: i.config.size || "middle"
},
children: [],
id: "form_" + y()
}
],
componentProps: {
style: {
padding: "16px"
}
}
}
],
script: i.script || ""
};
return e.schemas[0].children[0].children = c(
i.list
), e;
}
function c(i, e) {
return i.map((t) => {
var u, p, C;
let s = t.type ?? "";
const n = t.options ?? {}, o = (d, m) => {
s === d && (s = m, n.defaultValue && (n.defaultValue = JSON.parse(n.defaultValue)));
};
if (o("uploadImg", "upload-image"), o("uploadFile", "upload-file"), s === "date" && n.range && (n.type = "daterange", delete n.range), (s === "date" || s === "time") && (n.valueFormat = n.format), s === "textarea") {
const { minRows: d, maxRows: m } = n;
n.autoSize = { minRows: d, maxRows: m }, delete n.minRows, delete n.maxRows;
}
s === "number" && !n.precision && delete n.precision, n.width && (n.style = { width: n.width }, delete n.width), s === "grid" && (s = "row"), e && e.type === "grid" && (s = "col", n.span = t.span, t.key = y());
const r = {
label: t.label,
type: s,
icon: t.icon || "",
field: t.model,
componentProps: n,
id: t.key
};
return (n.noFormItem || !n.showLabel) && (r.noFormItem = !0, delete n.noFormItem, delete n.showLabel), n.clearable && (n.allowClear = !0, delete n.clearable), [
"input",
"textarea",
"number",
"password",
"select",
"cascader",
"checkbox",
"radio",
"date",
"time",
"slider",
"switch",
"color-picker",
"upload-file",
"upload-image"
].includes(s) && (r.input = !0, ((p = (u = t.rules) == null ? void 0 : u[0]) == null ? void 0 : p.required) === !1 && t.rules.shift(), ((C = t.rules) == null ? void 0 : C.length) > 0 && (r.rules = t.rules)), t.list && (r.children = c(t.list, t)), t.columns && (r.children = c(t.columns, t)), t.trs && (r.children = c(t.trs, t)), t.tds && (r.children = c(t.tds, t)), r;
});
}
class k {
constructor() {
// 已初始化基础UI
a(this, "initialized", f(!1));
// 组件对象字典，key 为组件type，value 为组件
a(this, "components", {});
// 组件配置记录字典，key 为组件type，value 为组件配置
a(this, "componentConfigs", {});
// 基础组件type，切换ui时，可先移除该数组记录的type
a(this, "baseComponentTypes", []);
// 组件模式分组，使用 Vue Composition API 的 ref 进行响应式处理
a(this, "componentSchemaGroups", f([]));
// 隐藏的组件列表，存储需要隐藏的组件名称
a(this, "hiddenComponents", []);
// 组件分组名称映射，key 为组件原名称，value 为组件分组映射名称
a(this, "componentGroupNameMap", {});
// 组件分组排序列表(设置之后，按该数组下标排序)
a(this, "sortedGroups", ["表单", "布局"]);
// 视图容器模型，包含活动栏和右侧边栏的配置
a(this, "viewsContainers", {
activitybars: w([]),
// 活动栏配置列表
rightSidebars: w([])
// 右侧边栏配置列表
});
// 公共方法模型，存储插件的公共方法
a(this, "publicMethods", {
// 示例数据
// publicTest: {
// describe: "测试函数",
// name: "test",
// handler: (e) => {
// console.log(e)
// // alert("测试函数弹出");
// },
// },
});
}
/**
* 添加组件到插件管理器中
* @param componentType 组件类型
* @param component 组件
*/
component(e, t) {
typeof t == "function" && (t = g(t)), this.components[e] = t;
}
/**
* 注册组件到插件管理器中
* @param componentConfig 组件配置
*/
registerComponent(e) {
this.component(
e.defaultSchema.type,
e.component
), e.defaultSchema.input && (e.config.action || (e.config.action = []), e.config.action.unshift(
{
type: "setValue",
describe: "设置值",
// 参数配置
argsConfigs: [
{
...e.defaultSchema,
label: "设置数据",
field: "0"
}
]
},
{
type: "getValue",
describe: "获取值"
}
)), this.componentConfigs[e.defaultSchema.type] = e, this.computedComponentSchemaGroups();
}
/**
* 从已记录的基础组件类型中移除特定类型的组件
* @param componentType 要移除的组件类型
*/
removeComponent(e) {
delete this.componentConfigs[e], delete this.components[e];
}
/**
* 记录基础组件类型
* @returns baseComponentTypes string[]
*/
setBaseComponentTypes(e) {
this.baseComponentTypes = e;
}
/**
* 添加基础组件类型
* @returns baseComponentType string
*/
addBaseComponentTypes(e) {
this.baseComponentTypes.push(e);
}
/**
* 移除已记录的基础组件类型
*/
removeBaseComponents() {
this.baseComponentTypes.forEach((e) => {
this.removeComponent(e);
}), this.setBaseComponentTypes([]), this.computedComponentSchemaGroups();
}
/**
* 获取所有插件管理中的所有组件
* @returns components
*/
getComponents() {
return this.components;
}
/**
* 通过type 查询相应的组件
* @returns components
*/
getComponent(e) {
return this.components[e];
}
/**
* 注册或更新活动栏（Activitybar）模型。
* 如果模型中的组件是一个函数，则异步加载该组件。
* @param activitybar 要注册或更新的活动栏模型
*/
registerActivitybar(e) {
typeof e.component == "function" && (e.component = g(e.component)), typeof e.visible > "u" && (e.visible = !0);
const t = this.viewsContainers.activitybars.value.findIndex(
(s) => s.id === e.id
);
t !== -1 ? this.viewsContainers.activitybars.value[t] = e : this.viewsContainers.activitybars.value.push(e);
}
/**
* 获取所有activitybars
* @returns activitybars
*/
getActivitybars() {
return this.viewsContainers.activitybars.value;
}
/**
* 隐藏活动栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
hideActivitybar(e, t = "title") {
const s = this.viewsContainers.activitybars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.activitybars.value[s].visible = !1);
}
/**
* 显示活动栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
showActivitybar(e, t = "title") {
const s = this.viewsContainers.activitybars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.activitybars.value[s].visible = !0);
}
/**
* 注册右侧栏
*/
registerRightSidebar(e) {
typeof e.component == "function" && (e.component = g(e.component)), typeof e.visible > "u" && (e.visible = !0);
const t = this.viewsContainers.rightSidebars.value.findIndex(
(s) => s.id === e.id
);
t !== -1 ? this.viewsContainers.rightSidebars.value[t] = e : this.viewsContainers.rightSidebars.value.push(e);
}
/**
* 获取所有rightSidebars
* @returns rightSidebars
*/
getRightSidebars() {
return this.viewsContainers.rightSidebars.value;
}
/**
* 隐藏右侧边栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
hideRightSidebar(e, t = "title") {
const s = this.viewsContainers.rightSidebars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.rightSidebars.value[s].visible = !1);
}
/**
* 显示右侧边栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
showRightSidebar(e, t = "title") {
const s = this.viewsContainers.rightSidebars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.rightSidebars.value[s].visible = !0);
}
/**
* 获取所有插件管理中的所有组件配置
* @returns componentAttrs
*/
getComponentConfings() {
return this.componentConfigs;
}
/**
* 通过type获取ComponentConfing
* @returns
*/
getComponentConfingByType(e) {
return this.componentConfigs[e];
}
/**
* 计算componentSchemaGroups
*/
computedComponentSchemaGroups() {
const e = [];
Object.values(this.componentConfigs).forEach((t) => {
if (!this.hiddenComponents.includes(t.defaultSchema.type) && t.groupName) {
const s = this.componentGroupNameMap[t.groupName] ?? t.groupName;
let n = e.findIndex(
(r) => r.title === s
);
n === -1 && (e.push({
title: s,
list: []
}), n = e.length - 1);
let o = e[n].list.findIndex(
(r) => r.type === t.defaultSchema.type
);
o !== -1 ? e[n].list[o] = t.defaultSchema : e[n].list.push(
t.defaultSchema
);
}
}), e.sort((t, s) => {
const n = this.sortedGroups.indexOf(t.title), o = this.sortedGroups.indexOf(s.title);
return n === -1 ? 1 : o === -1 ? -1 : n - o;
}), this.componentSchemaGroups.value = e;
}
/**
* 按照分组获取componentSchemaGroups 暂时没啥用
* @returns componentSchemaGroups
*/
getComponentSchemaGroups() {
return this.componentSchemaGroups;
}
/**
* 设置组件分组名称到映射名称的关系
* @param groupName 组件分组名称
* @param mapName 映射的名称
*/
setComponentGroupNameMap(e, t) {
this.componentGroupNameMap[e] = t;
}
/**
* 清空组件分组名称到映射名称的关系
*/
clearComponentGroupNameMap() {
this.componentGroupNameMap = {};
}
/**
* 设置组件分组的排序
* @param sortedGroups 包含组名和排序字段的对象数组
*/
setSortedGroups(e) {
this.sortedGroups = e, this.computedComponentSchemaGroups();
}
/**
* 清空组件分组的排序
*/
clearSortedGroups() {
this.sortedGroups = [], this.computedComponentSchemaGroups();
}
/**
* 添加需要隐藏的组件类型
* @param {*} type
* @returns
*/
hideComponent(e) {
this.hiddenComponents.push(e), this.computedComponentSchemaGroups();
}
/**
* 移除需要隐藏的组件类型
* @param {*} type
* @returns
*/
showComponent(e) {
this.hiddenComponents = this.hiddenComponents.filter(
(t) => t !== e
), this.computedComponentSchemaGroups();
}
/**
* 设置需要隐藏的组件类型数组
* @param {*} type[]
* @returns
*/
setHideComponents(e) {
this.hiddenComponents = e, this.computedComponentSchemaGroups();
}
/**
* 设置initialized的状态。
*
* @param value 要设置的布尔值。
*/
setInitialized(e) {
this.initialized.value = e;
}
/**
* 添加公共方法
* @param publicMethod
*/
addPublicMethod(e) {
const t = e.methodName ?? e.name, s = e.method ?? e.handler;
this.publicMethods[t] = {
...e,
name: t,
handler: s
};
}
/**
* 移除公共方法
* @param methodName
*/
removePublicMethod(e) {
delete this.publicMethods[e];
}
}
const M = new k();
function O() {
const i = f([]), e = f([]), t = f(null);
let s = 0;
function n(l, u = "插入组件") {
const p = Date.now();
s + 150 > p || (s = p, t.value != null && (i.value.push(t.value), e.value.splice(0, e.value.length)), t.value = {
type: u,
componentSchema: JSON.stringify(l)
}, i.value.length > 20 && i.value.unshift());
}
function o() {
if (i.value.length === 0)
return !1;
const l = i.value.pop();
return t.value != null && e.value.push(t.value), t.value = l, JSON.parse(l.componentSchema);
}
function r() {
if (e.value.length === 0)
return !1;
const l = e.value.pop();
return t.value != null && i.value.push(t.value), t.value = l, JSON.parse(l.componentSchema);
}
return {
recordList: i,
undoList: e,
currentRecord: t,
push: n,
undo: o,
redo: r
};
}
const q = O();
export {
k as P,
v as a,
P as b,
F as c,
S as d,
B as e,
h as f,
y as g,
z as h,
V as i,
I as j,
J as k,
g as l,
A as m,
N as n,
W as o,
M as p,
c as q,
q as r,
E as s,
R as t,
O as u
};