Skip to content

I
ibizlab-generator
提交 cbbd0539 编写于 作者: Mosher's avatar Mosher
浏览文件
操作

update：更新树导航样式

上级 f7809e95
隐藏空白字符变更
内嵌 并排
正在显示 包含 145 行增加 和 50 行删除
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-split.vue
浏览文件 @ cbbd0539
......@@ -4,8 +4,11 @@
<div class="app-split-pane left-pane" :style="{ right: `${100 - offset}%` }">
<slot name="left"/>
</div>
<div class="app-split-trigger" :style="{ left: `${offset}%` }"></div>
<div class="app-split-pane right-pane" :style="{ left: `${offset}%` }">
<div class="app-split-trigger app-split-trigger-horizontal" :style="{ left: `${offset}%`, width: `${triggerSize}px` }">
<span class="trigger-icon">
</span>
</div>
<div class="app-split-pane right-pane" :style="{ left: triggerSize > 0 ? `calc(${offset}% + ${triggerSize}px)` : `${offset}%` }">
<slot name="right"/>
</div>
</div>
......@@ -13,8 +16,11 @@
<div class="app-split-pane top-pane" :style="{ bottom: `${100 - offset}%` }">
<slot name="top"/>
</div>
<div class="app-split-trigger" :style="{ top: `${offset}%` }"></div>
<div class="app-split-pane bottom-pane" :style="{ top: `${offset}%` }">
<div class="app-split-trigger app-split-trigger-vertical" :style="{ top: `${offset}%`, height: `${triggerSize}px` }">
<span class="trigger-icon">
</span>
</div>
<div class="app-split-pane bottom-pane" :style="{ top: triggerSize > 0 ? `calc(${offset}% + ${triggerSize}px)` : `${offset}%` }">
<slot name="bottom"/>
</div>
</div>
......@@ -43,7 +49,12 @@ interface IProps {
/**
* 最大阈值
*/
max: number | string
max: number | string,
/**
* 分割栏大小
*/
triggerSize: number;
}
// ref指向
......@@ -52,7 +63,8 @@ const split = ref(null);
// 参数
const props = withDefaults(defineProps < IProps > (), {
mode: 'horizontal',
value: 0.5
value: 0.5,
triggerSize: 6
})
// 是否横向布局
......@@ -125,36 +137,6 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.app-split {
position: relative;
width: 100%;
height: 100%;
}
.app-split-pane {
position: absolute;
&.left-pane,
&.right-pane {
top: 0;
bottom: 0;
}
&.left-pane {
left: 0;
}
&.right-pane {
right: 0;
}
<style lang="scss">
&.top-pane,
&.bottom-pane {
left: 0;
right: 0;
}
&.top-pane {
top: 0;
}
&.bottom-pane {
bottom: 0;
}
}
</style>
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tree-control/tree-control-state.ts
浏览文件 @ cbbd0539
......@@ -8,6 +8,13 @@ import { IParam, MDControlState } from "@core";
*/
export interface TreeControlState extends MDControlState {
/**
* @description 当前选中节点
* @type {IParam}
* @memberof TreeControlState
*/
currentSelectedNode: IParam;
/**
* @description 默认展开节点
* @type {string[]}
......@@ -37,9 +44,9 @@ export interface TreeControlState extends MDControlState {
selectedNodes: IParam[];
/**
* @description 当前选中节点
* @type {IParam}
* @description 选中节点标识集合
* @type {string[]}
* @memberof TreeControlState
*/
currentSelectedNode: IParam;
selectedKeys: string[];
}
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tree-control/tree-control.ts
浏览文件 @ cbbd0539
......@@ -191,6 +191,15 @@ export class TreeControl extends MDControl {
});
}
/**
* @description 设置默认选中
* @protected
* @param {IParam[]} items 节点数据
* @param {boolean} [isRoot=false] 是否是根节点
* @param {boolean} [isSelectedAll=false] 是否选中全部
* @return {*} {void}
* @memberof TreeControl
*/
protected setDefaultSelection(items: IParam[], isRoot: boolean = false, isSelectedAll: boolean = false): void {
if (items.length === 0) {
return;
......@@ -202,7 +211,7 @@ export class TreeControl extends MDControl {
currentSelectedNode,
isBranchAvailable
} = this.state;
let { selectedNodes, echoSelectedNodes } = this.state;
let { selectedNodes, echoSelectedNodes, selectedKeys } = this.state;
let defaultData: any;
// 导航视图中，有选中数据时选中该数据，无选中数据默认选中第一项
if (selectFirstDefault) {
......@@ -236,10 +245,13 @@ export class TreeControl extends MDControl {
}
}
defaultData = items[index];
// TODO 设置选中高亮
// 置空选中节点标识集合，避免破坏响应式
selectedKeys.splice(0, selectedKeys.length);
selectedKeys.push(defaultData.id);
currentSelectedNode.value = deepCopy(defaultData);
if (isBranchAvailable || defaultData.isLeaf) {
selectedNodes = [currentSelectedNode.value];
selectedNodes.splice(0, selectedNodes.length);
selectedNodes.push(currentSelectedNode.value);
this.emit("ctrlEvent", { tag: this.props.name, action: "selectionchange", data: selectedNodes });
}
}
......@@ -261,12 +273,14 @@ export class TreeControl extends MDControl {
echoSelectedNodes = echoSelectedNodes.filter((item: any) => !item.used);
if (!isSelectedAll) {
if (isMultiple) {
selectedNodes = selectedNodes.concat(checkedNodes);
selectedNodes.push([...checkedNodes]);
// selectedNodes = selectedNodes.concat(checkedNodes);
// TODO 设置选中树节点
} else {
// TODO 设置选中树节点高亮
currentSelectedNode.value = deepCopy(checkedNodes[0]);
selectedNodes = [currentSelectedNode.value];
selectedNodes.splice(0, selectedNodes.length);
selectedNodes.push(currentSelectedNode.value);
}
}
}
......
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/components/common/app-split.scss 0 → 100644
浏览文件 @ cbbd0539
.app-split {
position: relative;
width: 100%;
height: 100%;
}
.app-split-pane {
position: absolute;
&.left-pane,
&.right-pane {
top: 0;
bottom: 0;
}
&.left-pane {
left: 0;
}
&.right-pane {
right: 0;
}
&.top-pane,
&.bottom-pane {
left: 0;
right: 0;
}
&.top-pane {
top: 0;
}
&.bottom-pane {
bottom: 0;
}
}
.app-split-trigger {
position: absolute;
background: var(--app-bg-color);
z-index: 10;
&.app-split-trigger-horizontal {
top: 0;
height: 100%;
}
&.app-split-trigger-vertical {
left: 0;
width: 100%;
}
.trigger-icon {
background-color: #bae7ff;
position: absolute;
}
}
.app-split-trigger-horizontal .trigger-icon {
top: 50%;
transform: translate(-50%, -36px);
width: 100%;
height: 36px;
cursor: col-resize;
}
.app-split-trigger-vertical .trigger-icon {
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 100%;
cursor: row-resize;
}
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/components/index.scss
浏览文件 @ cbbd0539
@use './editors';
@use './render';
@use './layout';
\ No newline at end of file
@use './layout';
@use './common';
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/widgets/app-tree-exp-bar.scss 0 → 100644
浏览文件 @ cbbd0539
.app-tree-exp-bar {
width: 100%;
height: 100%;
// 树导航右侧视图去掉padding
.tree-exp__nav-view {
--app-view-layout-padding: 0px;
}
.app-split {
background: #fff;
}
.tree-exp-bar-body {
padding: 6px 6px 6px 0;
}
}
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/style/widgets/index.scss
浏览文件 @ cbbd0539
// 部件样式汇总
@use './search-form.scss';
@use './app-menu.scss';
\ No newline at end of file
@use './app-menu.scss';
@use './app-tree-exp-bar.scss';
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TREEEXPBAR}}-tree-exp-bar/{{ctrls@TREEEXPBAR}}-tree-exp-bar.vue.hbs
浏览文件 @ cbbd0539
......@@ -43,7 +43,7 @@ defineExpose({ state, name: '{{ctrl.name}}' });
<template>
<div class="app-tree-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
<AppSplit :value="0.2">
<AppSplit :value="0.2">
<template #left>
<div v-if="state.showTitleBar" class="tree-exp-bar-title">
<span>\{{ state.title }}</span>
......@@ -69,6 +69,7 @@ defineExpose({ state, name: '{{ctrl.name}}' });
{{#if viewRef.refPSAppView}}
<{{viewRef.refPSAppView.name}}
v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
class="tree-exp__nav-view"
:viewDefaultUsage="false"
:viewdata="JSON.stringify(state.selection.context)"
:viewParams="JSON.stringify(state.selection.viewParams)">
......
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TREEVIEW}}-tree/{{ctrls@TREEVIEW}}-tree-state.ts.hbs
浏览文件 @ cbbd0539
......@@ -191,5 +191,6 @@ export const ctrlState = {
data: [],
echoSelectedNodes: [],
expandedKeys: [],
selectedKeys: [],
selectedNodes: []
};
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TREEVIEW}}-tree/{{ctrls@TREEVIEW}}-tree.vue.hbs
浏览文件 @ cbbd0539
......@@ -5,7 +5,6 @@ import { ctrlState } from './{{spinalCase ctrl.codeName}}-tree-state';
interface Props {
context: IContext;
multiple: boolean;
selectedData: IParam[];
selectFirstDefault?: boolean;
isBranchAvailable?: boolean;
......@@ -39,9 +38,14 @@ defineExpose({ state, name: '{{ctrl.name}}' });
<template>
<a-tree
class="app-tree{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
:blockNode="true"
:tree-data="state.data"
:load-data="load"
:fieldNames="{ title: 'text', key: 'id' }"
:checkable="state.isMultiple"
:multiple="state.isMultiple"
v-model:expandedKeys="state.expandedKeys"
v-model:selectedKeys="state.selectedKeys"
@select="treeNodeSelect">
<template #title="{ text, id }">
<div class="app-tree-node">
......@@ -49,4 +53,10 @@ defineExpose({ state, name: '{{ctrl.name}}' });
</div>
</template>
</a-tree>
</template>
\ No newline at end of file
</template>
<style lang="scss" scoped>
.app-tree-node {
text-align: left;
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或