@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
277 lines (276 loc) • 10.6 kB
JavaScript
import { ref as u, defineComponent as T, inject as x, onMounted as O, createVNode as F } from "vue";
import { FTreeView as B } from "../tree-view/index.esm.js";
import { cloneDeep as D } from "lodash-es";
const E = {
/** 树表数据 */
data: { type: Object, default: [] },
/** 树表是否支持可选状态 */
selectable: { type: Boolean, default: !1 },
/** 选中父节点会自动选中子节点 */
autoCheckChildren: { type: Boolean, default: !0 },
/** 返回值展示父节点和子节点 */
cascade: { type: Boolean, default: !0 },
/** 是否显示图标集 */
showTreeNodeIcons: { type: Boolean, default: !0 },
/** 是否显示连接线 */
showLines: { type: Boolean, default: !1 },
/** 新增值 */
newDataItem: { type: Object, default: {} },
/** 连接线颜色 */
lineColor: { type: String, default: "#9399a0" },
/** 单元格高度 */
cellHeight: { type: Number, default: 28 }
}, S = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
"input-group": { type: "input-group", name: "文本" },
textarea: { type: "textarea", name: "多行文本" },
lookup: { type: "lookup", name: "帮助" },
"number-spinner": { type: "number-spinner", name: "数值" },
"date-picker": { type: "date-picker", name: "日期" },
switch: { type: "switch", name: "开关" },
"radio-group": { type: "radio-group", name: "单选组" },
"check-box": { type: "check-box", name: "复选框" },
"check-group": { type: "check-group", name: "复选框组" },
"combo-list": { type: "combo-list", name: "下拉列表" },
"response-form": { type: "response-form", name: "卡片面板" },
"response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
"response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
"tree-grid": { type: "tree-grid", name: "树表格" },
"tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
"data-grid": { type: "data-grid", name: "表格" },
"data-grid-column": { type: "data-grid-column", name: "表格列" },
module: { type: "Module", name: "模块" },
component: { type: "component", name: "组件" },
tabs: { type: "tabs", name: "标签页" },
"tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
"tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
"time-picker": { type: "time-picker", name: "时间选择" },
section: { type: "section", name: "分组面板" },
"section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
"section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
splitter: { type: "splitter", name: "分栏面板" },
"splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
"component-ref": { type: "component-ref", name: "组件引用节点" },
uploader: { type: "uploader", name: "附件上传" },
"page-header": { type: "page-header", name: "页头" },
"page-footer": { type: "page-footer", name: "页脚" },
"tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
fieldset: { type: "fieldset", name: "分组" },
"query-solution": { type: "query-solution", name: "筛选方案" },
drawer: { type: "drawer", name: "抽屉" }
};
var f = /* @__PURE__ */ ((n) => (n.Frame = "frame", n.dataGrid = "data-grid", n.listView = "list-view", n.form = "form", n.attachmentPanel = "attachment-panel", n.modalFrame = "modal-frame", n.table = "table", n.appointmentCalendar = "appointment-calendar", n))(f || {});
function V(n, g) {
const c = u("");
function p(t) {
var a;
let r = "controlIcon mr-2 fd-i-Family ", e = "";
switch (t == null ? void 0 : t.type) {
case "form-group": {
e = t.editor && t.editor.type ? `fd_pc-${t.editor.type}` : "";
break;
}
default: {
const l = ((a = S[t.type]) == null ? void 0 : a.icon) || t.type;
r += `fd_pc-${l}`;
}
}
return r += e, r;
}
function h(t, r) {
var l;
let e = t.id;
const a = r == null ? void 0 : r.contents;
if ((r == null ? void 0 : r.type) === "splitter" && a && a.length === 2) {
const o = r.direction !== "column";
t.id === ((l = a[0]) == null ? void 0 : l.id) ? e = o ? "左侧区域" : "上方区域" : e = o ? "右侧区域" : "下方区域";
}
return e;
}
function b(t) {
if (t.isLikeCardContainer)
return "区块";
const r = t.appearance && t.appearance.class || "", e = r.split(" ");
return t.id === "page-header" && r && r === "f-page-header" ? "页头" : e.includes("f-page-header-base") ? "页头容器" : e.includes("f-page-header-extend") ? "页头扩展容器" : e.includes("f-title") ? "标题容器" : e.includes("f-page") ? "根容器" : e.includes("f-page-main") ? "内容区域" : e.includes("f-scrollspy-content") && t.isScrollspyContainer ? "滚动监听容器" : e.includes("f-grid-is-sub") ? "表格容器" : e.includes("f-filter-container") ? "筛选条容器" : "容器";
}
function y(t) {
const { componentType: r } = t;
switch (r) {
case f.Frame:
return "根组件";
case f.dataGrid:
case f.table:
return (n == null ? void 0 : n.formSchemaUtils.selectNode(t, (a) => a.type === (S["tree-grid"] && S["tree-grid"].type))) ? "树表格组件" : "表格组件";
case f.attachmentPanel:
return "附件组件";
case f.listView:
return "列表视图组件";
case f.modalFrame:
return "弹窗页面";
case f.appointmentCalendar:
return "预约日历组件";
default:
if (r.startsWith("form"))
return "卡片组件";
}
return "组件";
}
function m(t, r) {
const e = t.name || t.text || t.label || t.title || t.mainTitle;
if (e && typeof e == "string")
return e.trim();
switch (t.type) {
case "content-container":
return b(t);
case "splitter-pane":
return h(t, r);
case "component":
return y(t);
default:
return S[t.type] && S[t.type].name || t.id;
}
}
function w(t) {
const r = t.length ? t[0] : null;
if (!r)
return;
c.value = r.originalId;
const e = r ? `${r.originalId}-design-item` : "", a = document.getElementById(e);
a && a.click(), g.emit("selectionChanged", r.rawSchema);
}
return { getIcon: p, getTitle: m, onChanged: w, currentSelectedNodeId: c };
}
function L(n, g) {
const c = n.data.module ? u(n.data.module.components[0]) : u(n.data), { getIcon: p, getTitle: h } = g;
function b(e, a, l, o) {
var s;
const i = (s = n.data.module) == null ? void 0 : s.components.find((d) => d.id === e.component);
i && y([i], a, l, o);
}
function y(e, a, l, o) {
return e.forEach((i) => {
if (i.type === "component-ref") {
b(i, a, l, o);
return;
}
const s = {
originalId: i.id,
layer: l,
originalParent: o == null ? void 0 : o.id,
name: h(i, o),
type: i.type,
controlIcon: p(i),
rawSchema: i
};
a.push(D(s)), (i.contents || i.buttons) && y(i.contents || i.buttons, a, l + 1, i);
}), a;
}
function m(e) {
const a = [], l = e.find((d) => d.layer === 0);
e = e.filter((d) => d.layer !== 0), a.push(l);
let o = l.originalId, i = 0, s = 1e3;
for (; e.length !== 0 || s === 0; ) {
const d = e.find((v) => v.originalParent === o);
d ? (a.push(d), o = d.originalId, e = e.filter((v) => v.originalId !== o), i = 0) : (i -= 1, o = a.slice(i)[0].originalId), s -= 1;
}
return a;
}
function w(e) {
return e.forEach((a, l) => {
a.id = (l + 1).toString();
}), e.forEach((a) => {
var l;
a.parent = ((l = e.find((o) => o.originalId === a.originalParent)) == null ? void 0 : l.id) || "";
}), e.forEach((a) => {
a.hasChildren = e.findIndex((l) => l.parent === a.id) > 0;
}), e;
}
function t(e) {
const a = {
originalId: n.data.module.id,
layer: 0,
originalParent: null,
name: "页面",
type: "module",
controlIcon: "fd-i-Family fd_pc-module",
rawSchema: n.data.module
};
return e[0].originalParent = a.originalId, e.unshift(a), a;
}
function r() {
let e;
if (c.value) {
const a = [];
a.push(c.value);
const i = y(a, [], 1, null);
t(i);
const s = m(i);
e = w(s);
}
return e;
}
return { getData: r };
}
const $ = /* @__PURE__ */ T({
name: "FDesignerOutline",
props: E,
emits: ["outputValue", "currentEvent", "selectionChanged"],
setup(n, g) {
const c = u(), p = u(n.selectable), h = u(n.autoCheckChildren), b = u(n.cascade), y = u(n.showTreeNodeIcons), m = u(n.showLines), w = u(n.newDataItem), t = u(n.lineColor), r = u(n.cellHeight), e = u([{
field: "name",
title: "",
dataType: "string",
width: 400
}]), a = x("designer-host-service"), l = V(a, g), {
onChanged: o,
currentSelectedNodeId: i
} = l, {
getData: s
} = L(n, l);
let d = s();
function v() {
d = s(), c.value && c.value.updateDataSource && (c.value.updateDataSource(d), i && c.value.clearSelection && (c.value.clearSelection(), k({
id: i.value
})));
}
function k(C) {
if (!C && c.value && c.value.clearSelection && c.value.clearSelection(), C && c.value && c.value.selectItem) {
const N = d.find((P) => P.originalId === C.id);
N ? (c.value.selectItemById(N.id), i && (i.value = N.originalId)) : i && (i.value = "");
}
}
return g.expose({
selectControlTreeNode: k,
refreshControlTree: v
}), O(() => {
d.length && c.value && k({
id: d[0].originalId
});
}), () => F("div", {
class: "designer-control-tree"
}, [F(B, {
ref: c,
data: d,
columns: e.value,
selectable: p.value,
autoCheckChildren: h.value,
cascade: b.value,
showTreeNodeIcons: y.value,
showLines: m.value,
newDataItem: w.value,
lineColor: t.value,
cellHeight: r.value,
fit: !0,
iconField: "controlIcon",
onSelectionChange: o
}, null)]);
}
});
export {
f as ComponentType,
$ as FDesignerOutline,
E as designerOutlineProps
};