@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,841 lines • 55.9 kB
JavaScript
import { getCustomClass as vn, excludeProperties as Cn, EVENT_PROPERTY_TAB_IDS as bn, withInstall as wn } from "../../components/common/index.esm.js";
import { createVNode as F, defineComponent as Le, ref as w, computed as V, onMounted as Ue, nextTick as Ie, onUnmounted as Sn, watch as ge, Fragment as In, createTextVNode as Rn, inject as ze } from "vue";
import { useResizeObserver as $e } from "@vueuse/core";
import { isUndefined as A } from "lodash-es";
import { LocaleService as Bn } from "../../components/locale/index.esm.js";
import { getHierarchyRow as Fn, useIdentify as qe, useGroupData as Dn, useFilter as Ye, useHierarchy as Ke, useLoading as On, useDataView as Je, useSelection as Qe, useSelectHierarchyItem as Tn, usePagination as Pn, useDataViewContainerStyle as Xe, useCommandColumn as Ze, useSettingColumn as Gn, useColumn as xn, useSort as et, useGroupColumn as tt, useRow as nt, useEdit as ot, useVisualDataBound as it, useVisualDataCell as at, useVisualDataRow as lt, useVisualData as Vn, useCellPosition as kn, useSidebar as st, useVirtualScroll as rt, useFitColumn as jn, useFilterHistory as Mn, useColumnFilter as En, useDragColumn as Hn, getColumnHeader as An, getSidebar as Nn, getDisableMask as _n, getHorizontalScrollbar as dt, getVerticalScrollbar as Wn, getEmpty as zn, getPagination as Ln, getSummary as Un, ColumnSettingSolution as $n, COMMAND_COLUMN_DATA_TYPE as Ge, SETTING_COLUMN_DATA_TYPE as xe } from "../../components/data-view/index.esm.js";
import qn from "../../components/input-group/index.esm.js";
import Yn from "../../components/button/index.esm.js";
import { resolveAppearance as Kn, createPropsResolver as ut, createTreeGridSelectionItemResolver as Jn, createTreeGridBindingResolver as Qn, createDataViewUpdateColumnsResolver as Xn } from "../../components/dynamic-resolver/index.esm.js";
import { treeGridProps as ct } from "../../components/tree-grid/index.esm.js";
import { getColumnHeader as Zn } from "../data-grid/index.esm.js";
import { DgControl as Ve, useDesignerComponent as eo } from "../../components/designer-canvas/index.esm.js";
import { BaseControlProperty as to } from "../../components/property-panel/index.esm.js";
import { useCommandOption as no, useColumnOption as oo, useRowOption as io, useSummary as ao, useAppearance as lo, useSelection as so, useRowNumber as ro, useDataGridEvent as uo, useDesignerColumn as co, useDesignerVisualData as po, useDesignerFitColumn as fo } from "../data-view/index.esm.js";
const Jo = {
/** 启用分页 */
enable: { type: Boolean, default: !1 },
/** 当前页码 */
index: { type: Number, default: 1 },
/** 分页交互模式 */
mode: { type: String, default: "server" },
/** 显示页码输入框 */
showGoto: { type: Boolean, default: !1 },
/** 显示页码 */
showIndex: { type: Boolean, default: !0 },
/** 显示每页记录数 */
showLimits: { type: Boolean, default: !1 },
/** 显示分页汇总信息 */
showPageInfo: { type: Boolean, default: !0 },
/** 默认每页记录数 */
size: { type: Number, default: 20 },
/** 可选择的没有记录数据 */
sizeLimits: { type: Array, default: [10, 20, 30, 50, 100] },
/** 总记录数 */
total: { type: Number, default: 0 },
/** 禁用分页 */
disabled: { type: Boolean, default: !1 }
}, Qo = {
/** 启用排序 */
enable: { type: Boolean, default: !1 },
/** 排序字段集合 */
fields: { type: Array, default: [] },
/** 排序交互模式 */
mode: { type: String, default: "client" },
/** 多列排序 */
multiSort: { type: Boolean, default: !1 }
}, Xo = {
/** 自定义分组合计内容 */
customGroupRow: { type: Function, default: () => {
} },
/** 自定义分组行样式 */
customGroupRowStyle: { type: Function, default: () => {
} },
/** 自行分组合计行样式 */
customSummaryStyle: { type: Function, default: () => {
} },
/** 启用行数据分组 */
enable: { type: Boolean, default: !1 },
/** 分组行合并列数 */
groupColSpan: { type: Number, default: 1 },
/** 行数据分组字段；多字段分组以英文逗号分隔 */
groupFields: { type: Array, default: [] },
/** 在DataGrid中显示被分组的列 */
showGroupedColumn: { type: Boolean, default: !0 },
/** 显示分组面板 */
showGroupPanel: { type: Boolean, default: !1 },
/** 启用合计行 */
showSummary: { type: Boolean, default: !1 },
/** 显示合计行位置； */
summaryPosition: { type: String, default: "separate" }
}, Zo = {
/** 启用筛选 */
enable: { type: Boolean, default: !1 },
/** DataGrid筛选风格 */
filterStyle: { type: String, default: "filter-column" },
/** 筛选交互模式 */
mode: { type: String, default: "server" },
/** 显示过滤条件工具条 */
showSummary: { type: Boolean, default: !0 }
}, ei = {
/** 允许折行显示列标题 */
wrapHeadings: { type: Boolean, default: !1 }
}, ti = {
/** 自定义行样式 */
customRowStyle: { type: Function, default: () => {
} },
customCellStyle: { type: Function, default: () => {
} },
/** 禁止行选中表达式 */
disable: { type: Function, default: () => {
} },
/** 默认行高度为 29px */
height: { type: Number, default: 28 },
/** 鼠标滑过行效果 */
showHovering: { type: Boolean, default: !0 },
/** 禁止数据折行 */
wrapContent: { type: Boolean, default: !1 }
}, ni = {
/** 显示合计信息 */
enable: { type: Boolean, default: !1 },
/** 合计行自定义样式，对启用合计行模板无效 */
customSummaryStyle: { type: Function, default: () => {
} },
/** 分组合计字段 */
groupFields: { type: Array, default: [] },
/** 合计交互模式 */
mode: { type: String, default: "client" },
/** 合计行显示位置， top: 顶部 bottom: 底部， both: 顶部与底部同时显示 */
position: { type: String, default: "bottom" }
}, oi = {
/** 自动列宽。设为true后，所有列将填满表格并不会出现横向滚动条。 */
fitColumns: { type: Boolean, default: !1 },
/** 自动适配列宽度模式 */
fitMode: { type: String, default: "average" },
groups: { type: Array, defaut: [] },
/** 允许拖动表头改变列显示顺序 */
reorderColumn: { type: Boolean, default: !1 },
/** 允许拖动改变列宽度 */
resizeColumn: { type: Boolean, default: !0 },
/** 双击表头列自适应内容宽度 */
resizeColumnOnDoubleClick: { type: Boolean, default: !0 }
}, ii = {
/** 编辑时选中文本 */
selectOnEditing: { type: Boolean, default: !1 },
/** 编辑模式； row：整行编辑，cell: 单元格编辑 */
editMode: { type: String, default: "cell" }
}, ai = {
/** show loading */
show: { type: Boolean, default: !1 },
/** message on display when loading */
message: { type: String, default: `${Bn.getLocaleValue("datagrid.loadingMessage")}...` }
}, mo = {
/** 自定义样式 */
customClass: { type: String, default: "" },
/** 排序配置 */
sort: { type: Object },
/** 筛选配置 */
filter: { type: Object },
/** 自动勾选子节点 */
autoCheckChildren: { type: Boolean, default: !1 },
/** 列集合 */
columns: { type: Array, default: [] },
/** 列配置 */
columnOption: { type: Object },
/** 命令列配置选项 */
commandOption: {
type: Object,
default: {
enable: !1,
commands: []
}
},
/** 被绑定数据 */
data: { type: Array, default: [] },
/** 禁用组件 */
disabled: { type: Boolean, default: !1 },
/** 用于控制节点禁用状态的字段 */
disabledField: { type: String, default: "disabled" },
/** 用于显示信息的字段 */
displayField: { type: String, default: "name" },
/** 允许编辑 */
editable: { type: Boolean, default: !1 },
/** 编辑配置 */
editOption: { type: Object, default: { selectOnEditing: !1, editMode: "cell" } },
/** 适配父组件尺寸 */
fit: { type: Boolean, default: !1 },
/** 列标题配置 */
header: { type: Object },
/** 高度 */
height: { type: Number, default: -1 },
/** 层级关系配置对象 */
hierarchy: {
type: Object,
default: {
cascadeOption: {
autoCancelParent: !0,
autoCheckChildren: !1,
autoCheckParent: !1,
selectionRange: "All"
},
parentIdField: "parent"
}
},
/** DataGrid组件唯一标识 */
id: { type: String, default: "" },
/** 被绑定数据的标识字段 */
idField: { type: String, default: "id", require: !0 },
/** async loading data */
loadData: { type: Function },
// 是否展示 loading
loading: {
type: Boolean,
default: !1
},
/** 最小高度 */
minHeight: { type: Number, default: 300 },
/** 最小宽度 */
minWidth: { type: Number, default: 400 },
/** 新建数据 */
newDataItem: {
type: Function,
default: () => {
}
},
/** 分页配置 */
pagination: {
type: Object,
default: {
enable: !1,
mode: "server",
size: -1
}
},
/** 行号配置 */
rowNumber: {
type: Object,
default: {
enable: !0,
width: 36,
heading: "序号"
}
},
/** 行配置 */
rowOption: {
type: Object,
default: {
wrapContent: !1
}
},
/** 选择配置 */
selection: {
type: Object,
default: {
enableSelectRow: !0,
multiSelect: !1,
multiSelectMode: "DependOnCheck",
showCheckbox: !1,
showSelectAll: !1,
showSelection: !1
}
},
/** 已选数据标识 */
selectionValues: { type: Array, default: [] },
/** 显示边框 */
showBorder: { type: Boolean, default: !1 },
/** 显示列头 */
showHeader: { type: Boolean, default: !0 },
/** 显示横向行分割线 */
showHorizontalLines: { type: Boolean, default: !0 },
/** 显示节点连接线 */
showLines: { type: Boolean, default: !1 },
/** 显示配置按钮 */
showOptions: { type: Boolean, default: !1 },
/** 显示滚动条 */
showScrollBar: { type: String, default: "auto" },
/** 显示设置按钮 */
showSetting: { type: Boolean, default: !1 },
/** 显示条纹 */
showStripe: { type: Boolean, default: !0 },
/** 显示树节点图标 */
showTreeNodeIcons: { type: Boolean, default: !1 },
/** 显示纵向列分割线 */
showVerticallLines: { type: Boolean, default: !1 },
/** 树节点图标数据 */
treeNodeIconsData: { type: [Object, String], default: {} },
/** 宽度 */
width: { type: Number, default: -1 },
/** 启用虚拟渲染 */
virtualized: { type: Boolean, default: !1 },
/** 空数据模板 */
emptyTemplate: { type: Object },
/** 合计配置 */
summary: {
type: Object,
default: {
// 默认合计行开启后,后面不展示值,所以默认不开启
enable: !1,
groupFields: ["numericField1", "numericField2"]
}
},
/** 自动高度 **/
autoHeight: { type: Boolean, default: !1 },
/** 是否可见, 为了适配低代码表单，该属性不应该属于表格组件的行为 */
visible: { type: Boolean, default: !0 },
/** 复选框位置 */
checkboxPosition: { type: String, default: "after-expand" },
enableColumnSettingSolution: { type: Boolean, default: !1 },
/** 搜索配置 */
searchable: {
type: Boolean,
default: !1
},
customSearch: { type: Function }
};
function yo(e, n, p, s, u, b, I, S, y, a, h, C, x, r, k, j, D, c, O) {
const {
calculateCellPositionInRow: N
} = b, {
columnContext: T,
hasLeftFixedColumn: _,
hasRightFixedColumn: g
} = I, {
gridDataStyle: W,
leftFixedGridDataStyle: X,
rightFixedGridDataStyle: te
} = r, {
renderDataRow: i
} = Fn(e, n, T, D, S, y, a, h, C, x, r, k, j, c, O), le = [i];
function R(B, Z) {
const ne = N(B);
return D.value.filter((Y) => Y.visible !== !1).map((Y, z) => le[Y.type](Y, ne, Z, z));
}
function q() {
return F("div", {
ref: s,
class: "fv-grid-content-left-fixed"
}, [F("div", {
class: "fv-grid-data",
style: X.value
}, [R(T.value.leftColumns.filter((B) => B.visible), "left")])]);
}
function se() {
return F("div", {
ref: p,
class: "fv-grid-content-primary"
}, [F("div", {
class: "fv-grid-data",
style: W.value
}, [R(T.value.primaryColumns.filter((B) => B.visible), "primary")])]);
}
function H() {
return F("div", {
ref: u,
class: "fv-grid-content-right-fixed"
}, [F("div", {
class: "fv-grid-data",
style: te.value
}, [R(T.value.rightColumns.filter((B) => B.visible), "right")])]);
}
function re() {
const B = [];
return _.value && B.push(q()), B.push(se()), g.value && B.push(H()), B;
}
return {
renderDataArea: re
};
}
const go = /* @__PURE__ */ Le({
name: "FTreeGrid",
props: mo,
emits: ["selectionChange", "clickRow", "expandNode", "unSelectItem", "dblclickNode", "doubleClickRow", "unSelectItem", "selectItem", "filterChanged", "unSelectAll", "selectAll", "sortChanged", "selectionUpdate", "endEditCell"],
setup(e, n) {
var _e, We;
const p = w(!1), s = w(!1), u = 0, b = w(((_e = e.rowOption) == null ? void 0 : _e.height) || 28);
let I = [], S = [];
const y = w(20), a = w(e.columns), h = qe(e), {
idField: C
} = h, x = w(), r = w(), k = w(), j = w(), D = w(), c = w([]), O = w(!1), N = w(((We = e.rowOption) == null ? void 0 : We.wrapContent) || !1), T = Dn(e, h), _ = Ye(e, n), g = Ke(e), {
collapseField: W
} = g, {
showLoading: X,
renderLoading: te
} = On(e, x), i = Je(e, /* @__PURE__ */ new Map(), _, g, h), {
dataView: le
} = i, R = Qe(e, i, h, c, n), {
showSelection: q,
selectedValues: se
} = R, H = Tn(e, c, i, h, R, n), re = V(() => e.disabled), B = V(() => e.virtualized ? Math.min(i.dataView.value.length, y.value) : i.dataView.value.length), Z = Pn(e, i), {
shouldRenderPagination: ne
} = Z, {
containerStyleObject: Y
} = Xe(e, c), z = w(""), ee = w([]), Be = V(() => e.searchable || !1), K = w(0), de = Ze(e), {
applyCommands: he
} = de;
he(a);
const {
applyColumnSetting: oe,
removeColumnSetting: ve
} = Gn(e);
e.showSetting && oe(a);
const L = xn(e, n), ue = et(e), {
applyColumnSorter: Ce,
columnContext: U,
updateColumnRenderContext: Fe
} = L;
Ce(i, ue);
const ce = tt(e, U), J = nt(e, n, R, h), Q = ot(e, n, h, J, c), pe = it(e, i, b), De = at(e, Q, pe), be = lt(e, i, Q, g, h, pe, De, b), ie = Vn(e, a, i, B, u, be), {
getVisualData: G
} = ie, we = kn(e, U, b, p), ae = st(e, R), {
sidebarWidth: gt
} = ae, P = rt(e, i, c, U, ie, B, u, gt, b, p), {
onWheel: ht,
dataGridWidth: ke,
viewPortHeight: je,
viewPortWidth: Se,
resetScroll: Oe,
updateVisibleRowsOnLatestVisibleScope: vt
} = P, Me = jn(e, U, r, Se, ce), {
calculateColumnsSize: fe
} = Me, Ee = Mn(), Ct = En(r, D, i, Ee, P), bt = Hn(e, n, L, i, ce, T, P), wt = V(() => {
const t = {
"fv-grid": !0,
"fv-grid-bordered": e.showBorder,
"fv-grid-horizontal-bordered": e.showHorizontalLines,
"fv-datagrid-strip": e.showStripe
};
return vn(t, e.customClass);
}), St = V(() => ({
"fv-grid-content": !0,
"fv-grid-content-hover": O.value,
"fv-grid-wrap-content": N.value,
"fv-grid-scrollbar-visible": P.shouldShowVirticalScrollbar.value && O.value
})), {
renderDataArea: It
} = yo(e, n, k, j, D, we, L, i, Q, g, J, R, H, P, ie, pe, c, b, p), {
renderGridHeader: Rt,
renderGridColumnResizeOverlay: Bt,
shouldShowHeader: Ft
} = An(e, n, r, j, D, L, i, bt, Ct, _, Ee, Me, ce, R, ae, ue, P, Se, c, s), {
renderDataGridSidebar: Dt
} = Nn(e, J, R, ae, P), {
renderDisableMask: Ot
} = _n(), {
renderHorizontalScrollbar: Tt
} = dt(e, r, P), {
renderVerticalScrollbar: Pt
} = Wn(e, r, P);
function Gt() {
var t, o, v;
if (r.value && r.value.clientHeight > 0 && ((t = r.value) == null ? void 0 : t.clientWidth) > 0) {
const l = Math.ceil(r.value.clientHeight / b.value);
l > y.value && (y.value = l, vt()), je.value = ((o = k.value) == null ? void 0 : o.clientHeight) || 0, ke.value = ((v = r.value) == null ? void 0 : v.clientWidth) || 0;
}
r.value && (r.value.clientHeight > 0 || r.value.clientWidth > 0) && fe();
}
Ue(() => {
r.value && (y.value = Math.max(Math.ceil(r.value.clientHeight / b.value), y.value), c.value = G(0, B.value + u - 1), $e(r.value, Gt), fe(), Ie(() => {
r.value && (ke.value = r.value.clientWidth), k.value && (Se.value = k.value.clientWidth, je.value = k.value.clientHeight);
})), X.value && te();
}), Sn(() => {
}), ge(Se, () => {
r.value && fe();
});
function xt(t) {
i.collapseTo(t), i.reOrderVisibleIndex(), Oe();
}
function Vt(t) {
i.expandTo(t), i.reOrderVisibleIndex(), Oe();
}
function Te() {
const t = R.getSelectionRow();
return t ? t.dataIndex - 1 : -1;
}
function kt(t) {
const o = t !== void 0 ? t : Te(), v = i.insertNewDataItem(o === -1 ? 0 : o);
return c.value = G(0, B.value + u - 1), v;
}
function jt() {
const t = Te();
i.insertNewChildDataItem(t), c.value = G(0, B.value + u - 1);
}
function Mt(t, o) {
const v = c.value.find((m) => m.raw[C.value] === o), l = v ? v.dataIndex - 1 : -1;
i.insertNewChildDataItems(t, l);
}
function Et() {
const t = Te(), o = H.getNextSelectableHierarchyItemId(t);
i.removeHierarchyDataItem(t), c.value = G(0, B.value + u - 1), o && H.selectItemById(o);
}
function Ht(t) {
Q.onEditingRow(t);
}
function At(t) {
Q.acceptEditingRow(t);
}
function Nt(t) {
Q.cancelEditingRow(t);
}
function me(t) {
t && (a.value = t, he(a), e.showSetting && oe(a), Fe(a.value), Ce(i, ue), fe());
}
ge(() => e.columns, (t) => {
if (e.showSetting && e.enableColumnSettingSolution) {
me(a.value);
return;
}
me(t);
});
function _t(t, o) {
t && (i.load(t), i.reOrderVisibleIndex(), o != null && o.keepScrollPosition ? P.scrollTo(P.offsetY.value) : Oe());
}
function Pe(t) {
J.activeRowById(t);
}
function Wt(t, o = {
isCurrent: !0
}) {
o != null && o.isCurrent && Pe(t), H.selectItemById(t);
}
function zt(t) {
const o = c.value.find((v) => v.raw[h.idField.value] === t);
o && J.clickRowItem(o);
}
function Lt(t) {
H.selectItemByIds(t);
}
function Ut() {
return R.getSelectedItems();
}
function He() {
R.clearSelection();
}
function $t() {
R.emptyCurrentRowId();
}
const qt = V(() => !c.value || !c.value.length), {
renderEmpty: Yt
} = zn(e, n);
function Kt() {
return R.getSelectionRow();
}
function Jt(t, o = {
clearCurrent: !0
}) {
o != null && o.clearCurrent && Pe(""), H.unSelectItemByIds(t);
}
function Qt() {
return R.currentSelectedDataId.value;
}
function Xt(t, o, v) {
const l = le.value.find((m) => m[C.value] === t);
if (l) {
if (Object.keys(l).forEach((f) => {
Object.prototype.hasOwnProperty.call(o, f) && (l[f] = o[f]);
}), v) {
const {
collapseField: f,
disabledField: M,
checkedField: $,
visibleField: E,
hasChildren: ye
} = v;
f && !A(o[f]) && (l.__fv_collapse__ = o[f]), $ && !A(o[$]) && (l.__fv_checked__ = o[$]), M && !A(o[M]) && (l.__fv_disabled__ = o[M]), E && !A(o[E]) && (l.__fv_visible__ = o[E]), A(ye) || (l.__fv_hasChildren__ = ye);
}
const m = c.value.find((f) => f.raw[C.value] === t), d = c.value.findIndex((f) => f.raw[C.value] === t);
if (m) {
if (m.raw = l, Object.keys(m.data).forEach((f) => {
m.data[f].updateData(l);
}), v) {
const {
collapseField: f,
disabledField: M,
checkedField: $,
visibleField: E,
hasChildren: ye
} = v;
f && !A(o[f]) && (m.collapse = o[f]), $ && !A(o[$]) && (m.checked = o[$]), M && !A(o[M]) && (m.disabled = o[M]), E && !A(o[E]) && (m.visible = o[E]), A(ye) || (m.raw.__fv_hasChildren__ = ye);
}
c.value = [...c.value.slice(0, d), m, ...c.value.slice(d + 1)], i.updateSummary();
}
}
}
function Zt(t) {
return Object.prototype.hasOwnProperty.call(t, "raw") ? i.hasRealChildren(t.raw) : i.hasRealChildren(t);
}
function en(t) {
const o = i.dataView.value.find((v) => v[C.value] === t);
return o ? o[W.value] : "";
}
function tn() {
return W.value;
}
ge(() => e.showSetting, (t, o) => {
t !== o && (t ? oe(a) : ve(a), me(a.value));
});
function nn(t) {
return c.value.filter((o) => t.includes(o.raw[e.idField]));
}
function Ae(t) {
const o = h.idField.value, v = c.value.find((l) => l.raw[o] === t);
v && J.changeRow(v);
}
function on() {
R.keepSelectingOnPaging.value || He(), i.updateVisibleDataSummary(c.value);
}
function an(t) {
R.updateSelectedValues(t);
}
function ln(t) {
R.removeSelectedValues(t);
}
function sn(t) {
Ie(() => {
P.scrollToRowByIndex(t.dataIndex - 1);
});
}
function rn(t) {
let o = t;
const v = [];
for (; o && o[g.parentIdField.value]; ) {
const l = i.rawView.value.find((m) => m[h.idField.value] === o[g.parentIdField.value]);
if (l)
l[g.collapseField.value] && v.push(l), o = l;
else
break;
}
v.reverse().forEach((l) => {
l[g.collapseField.value] = !1, i.toggleChildrenVisibiltyByCollapseStatus(l);
});
}
function dn(t, o) {
if (t.length !== o.length)
return !1;
const v = t.map((m) => m[h.idField.value]).sort(), l = o.map((m) => m[h.idField.value]).sort();
return v.every((m, d) => m === l[d]);
}
function Ne() {
if (!z.value.trim()) {
ee.value = [], K.value = 0;
return;
}
const t = [], o = z.value.toLowerCase().trim();
i.rawView.value.forEach((l) => {
var d;
let m = !1;
(d = e.search) != null && d.customSearch ? m = e.search.customSearch(o, l, e.columns) : e.columns.forEach((f) => {
!m && f.field && l[f.field] !== void 0 && String(l[f.field]).toLowerCase().includes(o) && (m = !0);
}), m && t.push(l);
});
const v = !dn(t, ee.value);
if (t.length > 0) {
v ? (ee.value = t, K.value = 0) : K.value = (K.value + 1) % t.length;
const l = t[K.value];
l && (rn(l), Ie(() => {
i.reOrderVisibleIndex(), c.value = G(0, B.value + u - 1);
const m = l[h.idField.value], d = c.value.find((f) => f.raw[h.idField.value] === m);
d ? (Ae(m), sn(d)) : console.warn("搜索结果的节点未在可视数据中找到");
}));
} else
ee.value = [], K.value = 0;
}
function un(t) {
t.key === "Enter" && Ne();
}
function cn() {
Ne();
}
n.expose({
activeRowById: Pe,
addNewDataItem: kt,
addNewChildDataItem: jt,
addChildrenToNode: Mt,
collapseTo: xt,
expandTo: Vt,
removeDataItem: Et,
editDataItem: Ht,
acceptDataItem: At,
cancelDataItem: Nt,
updateColumns: me,
updateDataSource: _t,
selectItemById: Wt,
selectItemByIds: Lt,
getSelectedItems: Ut,
clearSelection: He,
getSelectionRow: Kt,
clickRowItemById: zt,
unSelectItemByIds: Jt,
getCurrentRowId: Qt,
reassignRowData: Xt,
hasChildren: Zt,
getCollapseField: tn,
getCollapseStatusById: en,
getVisibleDataByIds: nn,
selectRowById: Ae,
updateDerivedData: on,
emptyCurrentRowId: $t,
calculateColumnsSize: fe,
updateSelectedValues: an,
removeSelectedValues: ln
});
const pn = V(() => {
const t = {};
return P.shouldShowHorizontalScrollbar.value && O.value && (t.paddingBottom = "10px"), P.shouldShowVirticalScrollbar.value && O.value, t;
}), fn = V(() => ({
...Y.value,
borderRadius: "5px"
})), {
renderDataGridPagination: jo
} = Ln(e, n, i, P, Z, R), mn = V(() => ({
"d-flex": !0,
"justify-content-between": ne.value && q.value,
"justify-content-end": ne.value && !q.value,
"position-relative": !0
})), yn = V(() => ({
"d-flex": !0,
"align-items-center": !0
}));
function gn(t) {
const o = t.map((d) => d.id), v = [...a.value, ...I, ...S];
v.filter((d) => d.dataType !== Ge && d.dataType !== xe).forEach((d) => {
const f = t.find((M) => M.id === d.id);
f && (d.width = f.actualWidth || d.width || 120, f.actualWidth !== void 0 && (d.actualWidth = f.actualWidth), d.title = f.title, d.halign = f.halign, d.align = f.align, d.fixed = f.fixed);
}), S = v.filter((d) => d.dataType === Ge || d.dataType === xe);
const l = v.filter((d) => d.dataType !== Ge && d.dataType !== xe), m = l.filter((d) => o.includes(d.id));
I = l.filter((d) => !o.includes(d.id)), m.sort((d, f) => {
const M = t.findIndex((E) => E.id === d.id), $ = t.findIndex((E) => E.id === f.id);
return M - $;
}), me(m);
}
const {
renderDataGridSummary: hn
} = Un(e, i, L);
return () => e.visible && F(In, null, [Be.value && F("div", {
class: "fv-grid-search",
style: {
padding: "8px 12px",
border: "1px solid #e0e0e0",
borderBottom: "none",
borderRadius: "4px 4px 0 0"
}
}, [F("div", {
style: {
display: "flex",
alignItems: "center"
}
}, [F(qn, {
value: z.value,
onInput: (t) => z.value = t,
onKeydown: un,
placeholder: "搜索数据...",
style: {
flex: 1
}
}, null), F(Yn, {
type: "link",
onClick: cn,
style: {
cursor: "pointer",
marginLeft: "8px"
}
}, {
default: () => [F("i", {
class: "f-icon f-icon-search"
}, null)]
})])]), F("div", {
ref: x,
class: wt.value,
style: fn.value,
onWheel: ht
}, [r.value && Ft.value && Rt(), F("div", {
ref: r,
class: St.value,
onMouseover: () => O.value = !0,
onMouseleave: () => O.value = !1,
onTouchstart: (t) => {
t.stopPropagation(), O.value = !0, P.onTouchstartScrollThumb(t, r);
},
onTouchend: (t) => {
O.value = !1;
},
style: pn.value
}, [r.value && Dt(c), r.value && It(), r.value && qt.value && Yt(), r.value && Tt(), r.value && Pt()]), r.value && hn(), q.value && F("div", {
class: mn.value
}, [q.value && F("div", {
class: yn.value
}, [F("div", null, ["已选：" + se.value.length, Rn(" 条")])])]), Bt(), re.value && Ot()]), e.enableColumnSettingSolution && F($n, {
columns: [...a.value, ...I],
componentId: e.id,
modelValue: s.value,
"onUpdate:modelValue": (t) => s.value = t,
onChangeColumnSetting: gn
}, null)]);
}
}), ho = "https://json-schema.org/draft/2020-12/schema", vo = "https://farris-design.gitee.io/tree-grid.schema.json", Co = "tree-grid", bo = "A Farris Data Grid Component", wo = "object", So = {
id: {
description: "The unique identifier for a Input Group",
type: "string"
},
type: {
description: "The type string of Input Group component",
type: "string",
default: "tree-grid"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
fit: {
type: "boolean",
default: !1
},
showStripe: {
type: "boolean",
default: !0
},
showBorder: {
type: "boolean",
default: !1
},
showTreeNodeIcons: {
type: "boolean",
default: !1
},
showSetting: {
type: "boolean",
default: !1
},
size: {
description: "",
type: "object",
properties: {
width: {
type: "number"
},
height: {
type: "number"
}
},
default: null
},
dataSource: {
description: "",
type: "string",
default: ""
},
columns: {
description: "",
type: "array",
default: []
},
identifyField: {
description: "",
type: "string"
},
editable: {
description: "",
type: "boolean",
default: !1
},
disabled: {
description: "",
type: "boolean",
default: !1
},
visible: {
description: "是否可见",
type: "boolean",
default: !0
},
cell: {
type: "object",
properties: {
highlightFocusingCell: {
description: "",
type: "boolean",
default: !1
},
mergeCell: {
description: "",
type: "boolean",
default: !1
},
showEditableIcon: {
description: "",
type: "boolean",
default: !1
}
}
},
column: {
type: "object",
properties: {
fitColumns: {
description: "",
type: "boolean",
default: !1
},
fitMode: {
description: "",
type: "string",
default: "average"
},
groups: {
description: "",
type: "array",
default: []
},
reorderColumn: {
description: "Enable to drag column to reorder",
type: "boolean",
default: !1
},
resizeColumn: {
type: "boolean",
default: !0
},
resizeColumnOnDoubleClick: {
description: "",
type: "boolean",
default: !0
}
}
},
command: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
commands: {
type: "array",
default: []
},
commandColumnWidth: {
description: "",
type: "number",
default: 120
},
onClickDeleteCommand: {
description: "",
type: "string",
default: ""
},
onClickEditCommand: {
description: "",
type: "string",
default: ""
},
onHandleAction: {
description: "",
type: "string",
default: ""
},
count: {
description: "",
type: "number",
default: 2
}
}
},
contextMenu: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
}
}
},
customizaiton: {
type: "object",
properties: {
enableScheme: {
description: "",
type: "boolean",
default: !1
},
enableSetting: {
description: "",
type: "boolean",
default: !1
}
}
},
edit: {
type: "object",
properties: {
mode: {
description: "",
type: "string",
default: "cell",
enum: [
"cell",
"row",
"card"
]
},
selectOnEditing: {
description: "",
type: "boolean",
default: !1
},
onAppendRow: {
description: "",
type: "string",
default: ""
},
onBeforeEdit: {
description: "",
type: "string",
default: ""
}
}
},
filter: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
filterStyle: {
description: "",
type: "string",
default: "filter-column",
enum: [
"filter-column",
"filter-row"
]
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server"
]
},
showSummary: {
description: "",
type: "boolean",
default: !0
},
onFilterChange: {
description: "",
type: "string",
default: ""
}
}
},
footer: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customFooterStyle: {
description: "",
type: "object"
},
footerDataCommand: {
description: "",
type: "string",
default: ""
},
footerDataFrom: {
description: "",
type: "string",
default: "client"
},
footerHeight: {
description: "",
type: "number",
default: 29
},
footerPosition: {
description: "",
type: "string",
default: "bottom"
},
footerTemplate: {
description: "",
type: "string",
default: ""
}
}
},
group: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customGroupRow: {
description: "",
type: "object"
},
customGroupRowStyle: {
description: "",
type: "object"
},
customSummaryStyle: {
description: "",
type: "object"
},
groupColSpan: {
description: "",
type: "number",
default: 1
},
groupFields: {
description: "",
type: "array",
default: []
},
showGroupedColumn: {
description: "",
type: "boolean",
default: !0
},
showGroupPanel: {
description: "",
type: "boolean",
default: !1
},
showSummary: {
description: "",
type: "boolean",
default: !1
},
summaryPosition: {
description: "",
type: "string",
default: "separate",
enum: [
"separate",
"merge-to-group"
]
},
disableGroupOnEditing: {
description: "",
type: "boolean",
default: !0
},
expandGroupRows: {
description: "",
type: "boolean",
default: !0
}
}
},
header: {
type: "object",
properties: {
wrapHeadings: {
description: "",
type: "boolean",
default: !1
}
}
},
pagination: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
disablePagination: {
description: "",
type: "string",
default: ""
},
contentTemplate: {
description: "",
type: "string",
default: ""
},
index: {
description: "",
type: "number",
default: 1
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server",
"client"
]
},
showGoto: {
description: "",
type: "boolean",
default: !1
},
showIndex: {
description: "",
type: "boolean",
default: !0
},
showLimits: {
description: "",
type: "boolean",
default: !1
},
showPageInfo: {
description: "",
type: "boolean",
default: !0
},
size: {
description: "",
type: "number",
default: 20
},
disabled: {
description: "锁定分页",
type: "boolean",
default: !1
},
sizeLimits: {
description: "",
type: "array",
default: [
10,
20,
30,
50,
100
]
},
onPageChange: {
description: "",
type: "string",
default: ""
},
onPageSizeChange: {
description: "",
type: "string",
default: ""
}
}
},
rowOption: {
type: "object",
properties: {
customRowStyle: {
description: "自定义行样式",
type: "string",
default: ""
},
customCellStyle: {
description: "自定义单元格样式",
type: "string",
default: ""
},
disable: {
description: "",
type: "object"
},
height: {
description: "",
type: "number",
default: 30
},
showHovering: {
type: "boolean",
default: !0
},
wrapContent: {
type: "boolean",
default: !1
}
}
},
rowNumber: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
heading: {
description: "",
type: "string",
default: "序号"
},
width: {
description: "",
type: "number",
default: 36
},
onClickRow: {
description: "",
type: "string",
default: ""
},
onDoubleClickRow: {
description: "",
type: "string",
default: ""
}
}
},
onClickRow: {
description: "行点击事件",
type: "string",
default: ""
},
onSelectionChange: {
description: "行切换事件",
type: "string",
default: ""
},
onPageIndexChanged: {
description: "切换页码事件",
type: "string",
default: ""
},
onPageSizeChanged: {
description: "分页条数变化事件",
type: "string",
default: ""
},
selection: {
type: "object",
properties: {
enableSelectRow: {
description: "允许选中行",
type: "boolean",
default: !0
},
enable: {
description: "",
type: "boolean",
default: !0
},
checkOnSelect: {
description: "",
type: "boolean",
default: !1
},
showSelectAll: {
description: "",
type: "boolean",
default: !1
},
clearSelectionOnEmpty: {
description: "",
type: "boolean",
default: !0
},
customSelectionItem: {
description: "",
type: "object"
},
focusSelection: {
description: "",
type: "string",
default: "current",
enum: [
"current",
"all"
]
},
keepSelectingOnClick: {
description: "",
type: "boolean",
default: !0
},
keepSelectingOnPaging: {
description: "",
type: "boolean",
default: !0
},
multiSelect: {
description: "",
type: "boolean",
default: !1
},
selectionMode: {
description: "",
type: "string",
default: "default"
},
selectOnCheck: {
description: "",
type: "boolean",
default: !1
},
selectOnEditing: {
description: "",
type: "boolean",
default: !1
},
showCheckbox: {
description: "",
type: "boolean",
default: !1
},
showCheckAll: {
description: "",
type: "boolean",
default: !1
},
showSelection: {
description: "",
type: "boolean",
default: !1
},
onBeforeSelect: {
description: "",
type: "string",
default: ""
},
onBeforeUnCheck: {
description: "",
type: "",
default: ""
},
onBeforeUnSelect: {
description: "",
type: "string",
default: ""
},
onCheckAll: {
description: "",
type: "string",
default: ""
},
onChecked: {
description: "",
type: "string",
default: ""
},
onSelectionChange: {
description: "",
type: "string",
default: ""
},
onUnCheckAll: {
description: "",
type: "string",
default: ""
},
onUnChecked: {
description: "",
type: "string",
default: ""
},
onCheckedChange: {
description: "",
type: "string"
}
}
},
sort: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
fields: {
description: "",
type: "array",
default: []
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server"
]
},
multiSort: {
description: "",
type: "boolean",
default: !1
}
}
},
summary: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customSummaryStyle: {
description: "",
type: "object"
},
groupFields: {
description: "",
type: "array",
default: []
},
mode: {
description: "",
type: "string",
default: "client",
enum: [
"client",
"server"
]
},
position: {
description: "",
type: "boolean",
default: "bottom",
enum: [
"bottom",
"top",
"both"
]
}
}
},
toolbar: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
}
}
},
visualization: {
autoHeight: {
description: "",
type: "boolean",
default: !1
},
emptyDataHeight: {
description: "",
type: "number",
default: 36
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
maxHeight: {
description: "",
type: "number",
default: 300
},
scrollBarShowMode: {
description: "",
type: "string",
default: "auto"
},
showBorder: {
description: "",
type: "boolean",
default: !1
},
showScrollArrow: {
description: "",
type: "boolean",
default: !1
},
striped: {
description: "",
type: "boolean",
default: !0
},
useBlankWhenDataIsEmpty: {
description: "",
type: "boolean",
default: !1
}
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
udtField: {
description: "分级码字段",
type: "string"
},
virtualized: {
description: "是否虚拟加载",
type: "boolean",
default: !1
},
hierarchy: {
cascadeOption: {
autoCheckChildren: {
description: "向下级联",
type: "boolean"
},
autoCheckParent: {
description: "向上级联",
type: "boolean"
}
},
collapseField: {
description: "收折属性",
type: "string"
},
hasChildrenField: {
description: "存在子节点",
type: "string"
},
parentIdField: {
description: "父级字段",
type: "string"
}
},
autoCheckChildren: {
description: "向下级联",
type: "boolean"
},
autoCheckParent: {
description: "向上级联",
type: "boolean"
},
fieldEditable: {
description: "是否可编辑",
type: "boolean",
default: !1
},
searchable: {
description: "是否可搜索定位",
type: "boolean",
default: !1
},
enableColumnSettingSolution: {
description: "是否启用列配置方案",
type: "boolean",
default: !1
}
}, Io = [
"id",
"type",
"columns"
], Ro = {
onSelectionChange: "行切换事件",
onClickRow: "行点击事件",
onDoubleClickRow: "行双击事件",
onFilterChanged: "过滤事件",
onClickEditCommand: "操作列编辑事件",
onClickDeleteCommand: "操作列删除事件",
onExpandNode: "展开事件",
onSelectItem: "选中行事件",
onUnSelectItem: "取消选中行事件",
onSelectAll: "全选事件",
onUnSelectAll: "取消全选事件"
}, pt = {
$schema: ho,
$id: vo,
title: Co,
description: bo,
type: wo,
properties: So,
required: Io,
events: Ro
}, ft = /* @__PURE__ */ new Map([
["appearance", Kn],
["column", "columnOption"],
["command", "commandOption"]
]);
function Bo(e, n, p) {
var C;
const s = p.parentComponentInstance, u = s.schema.type, b = String(((C = s.schema.appearance) == null ? void 0 : C.class) || "").split(" "), I = u === "section" || u === "tab-page", S = b.includes("f-page-content-nav"), y = b.includes("f-page-main"), a = e.getSchemaByType("component");
a.id = `${n.id}-component`, a.componentType = "data-grid";
let h = "";
return h += I ? "f-struct-data-grid-in-card f-struct-is-subgrid" : "", h += S ? "f-struct-data-grid-in-nav f-struct-wrapper f-utils-fill-flex-column" : "", h += y ? "f-struct-data-grid f-struct-wrapper" : "", a.appearance = {
class: h
}, a.contents = [n], a;
}
function Fo(e, n, p) {
const s = p.parentComponentInstance, u = String(s.schema.appearance.class || "").split(" "), b = u.includes("f-page-content-nav"), I = u.includes("f-page-main"), S = e.getSchemaByType("section");
S.id = `${n.id}-section`;
let y = "";
return y += b ? "f-section-in-nav " : "", y += I ? "f-section-in-managelist " : "", y += "f-section-grid", S.appearance = { class: y }, S.contents = [n], S;
}
function Do(e, n, p) {
const s = e.getSchemaByType("content-container");
return s.id = `${n.id}-layout`, s.appearance = { class: "f-grid-is-sub f-utils-flex-column" }, s.contents = [n], s;
}
function mt(e, n, p) {
const u = p.parentComponentInstance.schema.type, b = u === "section" || u === "tab-page";
n.appearance = { class: "f-component-grid" };
const S = (b ? Do : Fo)(e, n, p);
return Bo(e, S, p);
}
const Oo = ut(ct, pt, ft, mt), To = Jn(), Po = Qn(), yt = Cn(Object.assign({}, ct, { componentId: { type: String, default: "" } }), "columnOption", "commandOption"), Go = ut(yt, pt, ft, mt), xo = Xn();
class Vo extends to {
constructor(n, p) {
super(n, p);
}
getPropertyConfig(n) {
return this.getBasicPropConfig(n), this.getAppearanceProperties(n), this.propertyConfig.categories.command = no(this).getCommandColumnProperties(n), this.propertyConfig.categories.column = oo().getColumnOptionProperties(n), this.propertyConfig.categories.rowOption = io().getRowOptionProperties(n), this.propertyConfig.categories.summary = ao().getSummaryProperties(n), this.propertyConfig.categories.filter = {
title: "过滤",
description: "",
properties: {
mode: {
title: "类型",
type: "enum",
description: "过滤类型",
$converter: "/converter/grid-filter.converter",
editor: {
data: [
{ id: "server", name: "服务端" }
]
}
}
}
}, this.getEventPropConfig(n), this.propertyConfig;
}
getBasicPropConfig(n) {
var I, S, y;
const p = (y = (S = (I = this.formSchemaUtils.getFormSchema()) == null ? void 0 : I.module) == null ? void 0 : S.entity[0]) == null ? void 0 : y.entities[0], s = this.assembleSchemaEntityToTree(p, 0), u = this, b = super.getBasicPropConfig(n);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...b.properties,
dataSource: {
description: "绑定数据源",
title: "绑定数据源",
editor: {
type: "combo-tree",
textField: "name",
valueField: "label",
data: s,
editable: !1
},
readonly: !0
}
},
setPropertyRelates(a, h) {
switch (a && a.propertyID) {
case "dataSource": {
const C = u.formSchemaUtils.getViewModelById(u.viewModelId);
if (C) {
const x = s.find((r) => r.label === a.propertyValue);
C.bindTo = x.bindTo;
}
u.designViewModelUtils.assembleDesignViewModel();
break;
}
}
}
};
}
getAppearanceProperties(n) {
const p = this;
this.propertyConfig.categories.appearance = lo(this).getTreeGrid(n, this.viewModelId, p), this.propertyConfig.categories.selection = so().getSelection(n, p, "treeGrid"), this.propertyConfig.categories.rowNumber = ro().getRowNumber(n);
}
isSubGrid() {
const n = this.formSchemaUtils.getViewModelById(this.viewModelId);
return n && n.bindTo ? n.bindTo.trim() !== "/" : !1;
}
getEventPropConfig(n) {
const p = uo().initEvent(n), s = this, u = s.eventsEditorUtils.formProperties(n, s.viewModelId, p), b = s.createBaseEventProperty(u);
this.propertyConfig.categories.eventsEditor = {
title: "事件",
hideTitle: !0,
properties: b,
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: bn,
tabName: "交互",
setPropertyRelates(I, S) {
const y = I.propertyValue;
delete n[s.viewModelId], y && (y.setPropertyRelates = this.setPropertyRelates, s.eventsEditorUtils.saveRelatedParameters(n, s.viewModelId, y.events, y)), n.remoteSort = !!n.columnSorted, n.command && (n.command.onClickEditCommand = n.onClickEditCommand, n.command.onClickDeleteCommand = n.onClickDeleteCommand, n.command.onHandleAction = n.onHandleAction);
}
};
}
/**
* 将schema实体表组装成树
*/
assembleSchemaEntityToTree(n, p, s, u = "", b = []) {
const I = u ? `${u}/${n.label}` : "/";
return b.push({
id: n.id,
name: n.name,
label: n.label,
layer: p,
parent: s && s.id,
bindTo: I.replace("//", "/")
}), n.type.entities && n.type.entities.length && n.type.entities.map((S) => this.assembleSchemaEntityToTree(S, p + 1, n, I, b)), b;
}
}
function ko(e, n) {
const p = e.schema, s = w(!0), u = w(!0);
function b(C) {
return C && C.sourceType === "control" ? C.componentCategory === "input" : !1;
}
function I() {
return !1;
}
function S() {
return !1;
}
function y() {
return !0;
}
function a(C) {
return new Vo(C, n).getPropertyConfig(p);
}
function h() {
var C, x, r, k;
if (e && n) {
const j = (C = e == null ? void 0 : e.componentInstance) == null ? void 0 : C.value.belongedComponentId;
let D = "", c = "";
const { formSchemaUtils: O } = n;
if (j) {
const T = O.getRootViewModelId(), _ = O.getComponentByViewModelId(T), g = O.selectNode(_, (W) => W.contents && W.contents.find((X) => X.component === j));
(g == null ? void 0 : g.type) === ((x = Ve["tab-page"]) == null ? void 0 : x.type) && ((r = g == null ? void 0 : g.contents) != null && r.length) && (D = g.title || ""), (g == null ? void 0 : g.type) === ((k = Ve.section) == null ? void 0 : k.type) && (g == null ? void 0 : g.showHeader) !== !1 && (D = g.mainTitle || ""), D = D ? `${D} > ` : "", c = D ? g.id : "";
}
const N = Ve["tree-grid"].name;
n == null || n.formSchemaUtils.getControlBasicInfoMap().set(e.schema.id, {
componentTitle: N,
parentPathName: `${D}${N}`,
reliedComponentId: c
});
}
}
return {
canAccepts: b,
checkCanDeleteComponent: I,
checkCanMoveComponent: S,
hideNestedPaddingInDesginerView: y,
triggerBe