提交 a607e251 编写于 作者: Mosher's avatar Mosher

update:更新分割栏组件

上级 f248649f
<template>
<div ref="split" class="app-split">
<div v-if="isHorizontal" class="app-split-horizontal">
<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}%` }">
<slot name="right"/>
</div>
</div>
<div v-else class="app-split-vertical">
<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}%` }">
<slot name="bottom"/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Ref, ref } from 'vue';
interface IProps {
/**
* horizontal 横向
* vertical 垂直
*/
mode?: string,
/**
* 位置,0-1表示百分比,也可以是具体数值
*/
value: number | string,
/**
* 最小阈值
*/
min: number | string,
/**
* 最大阈值
*/
max: number | string
}
// ref指向
const split = ref(null);
// 参数
const props = withDefaults(defineProps < IProps > (), {
mode: 'horizontal',
value: 0.5
})
// 是否横向布局
const isHorizontal: Ref<boolean> = computed(() => {
return props.mode === 'horizontal';
})
// 偏移量值
const offsetSize: Ref<string> = computed(() => {
return isHorizontal ? 'offsetWidth' : 'offsetHeight';
})
// px转百分比
const px2Percent = (numerator: any, denominator: any) => {
return parseFloat(numerator) / parseFloat(denominator);
}
// 当前分割值
const currentValue: Ref<string | number> = ref(0.5);
currentValue.value = props.value;
// 当前最小分割阈值
const currentMin: Ref<string | number> = ref(40);
currentMin.value = props.min;
// 当前最大分割阈值
const currentMax: Ref<string | number> = ref(40);
currentMax.value = props.max;
// 偏移量
const offset: Ref<number> = ref(0);
// 获取分割组件
const getSplitCom = (): any => {
return unref(split);
}
// 值是否是PX
const valueIsPx = (): boolean => {
return typeof props.value === 'string';
}
// 计算阈值
const getComputedThresholdValue = (type: 'min' | 'max'): string | number => {
const splitCom = getSplitCom();
const size = splitCom[offsetSize.value];
if (valueIsPx()) {
return typeof props[type] === 'string' ? props[type] : size * (props[type] as number);
} else {
return typeof props[type] === 'string' ? px2Percent(props[type], size) : props[type];
}
}
// 计算偏移量
const computeOffset = () => {
nextTick(() => {
const splitCom = getSplitCom();
currentMin.value = getComputedThresholdValue('min');
currentMin.value = getComputedThresholdValue('max');
offset.value = (valueIsPx() ? px2Percent(props.value, splitCom[offsetSize.value]) : props.value as number) * 10000 / 100;
})
}
// 组件挂载
onMounted(() => {
nextTick(() => {
computeOffset();
})
})
</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;
}
&.top-pane,
&.bottom-pane {
left: 0;
right: 0;
}
&.top-pane {
top: 0;
}
&.bottom-pane {
bottom: 0;
}
}
</style>
import { ControlServiceBase, ControlVOBase, deepCopy, IContext, IParam, isEmpty, TreeNodeRSVO, TreeNodeVO } from "@core";
import { Environment } from "@/environments/environment";
/**
* @description 树部件服务
......@@ -341,7 +342,18 @@ export class TreeService<T extends ControlVOBase> extends ControlServiceBase<T>
const nodeDataItems: any[] = node.deTreeNodeDataItems || [];
if (nodeDataItems.length > 0) {
nodeDataItems.forEach((item: any) => {
// TODO 节点数据项
const name = item.name.toLowerCase();
if (item.fieldCodeName) {
Object.assign(treeNode, {
[name]: entity[item.fieldCodeName.toLowerCase()],
})
}
if (Object.is('text', name) && item.customCode) {
Object.assign(treeNode, { textCustomCode: true, textScriptCode: item.scriptCode });
}
if (Object.is('icon', name) && item.customCode) {
Object.assign(treeNode, { iconCustomCode: true, iconScriptCode: item.scriptCode });
}
})
}
Object.assign(treeNode, { selected: node.selected });
......@@ -349,7 +361,6 @@ export class TreeService<T extends ControlVOBase> extends ControlServiceBase<T>
Object.assign(treeNode, { navfilter: node.navFilter });
}
Object.assign(treeNode, { curData: entity });
// TODO 导航上下文 导航参数
if (node.counterId) {
Object.assign(treeNode, { counterId: node.counterId });
}
......@@ -403,11 +414,9 @@ export class TreeService<T extends ControlVOBase> extends ControlServiceBase<T>
}
if (context && context.srfparentkey) {
Object.assign(searchFilter, { srfparentkey: deepCopy(context).srfparentkey });
// TODO 识别环境参数 enableIssue
// const Environment = AppServiceBase.getInstance().getAppEnvironment();
// if (Environment.enableIssue) {
// Object.assign(searchFilter, { nodeid: Util.deepCopy(context).srfparentkey });
// }
if (Environment && Environment.enableIssue) {
Object.assign(searchFilter, { nodeid: deepCopy(context).srfparentkey });
}
}
if (node.sortPSAppDEField?.codeName) {
Object.assign(searchFilter, { sort: `${node.sortPSAppDEField.codeName.toLowerCase()},${node.sortDir ? node.sortDir : 'asc'}` });
......
......@@ -42,10 +42,8 @@ defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
<a-layout
class="app-tree-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
>
<a-layout-sider>
<AppSplit class="app-tree-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" :value="0.2">
<template #left>
{{#ctrl.ctrls}}
{{#eq controlType "TREEVIEW"}}
<{{codeName}}Tree
......@@ -58,8 +56,8 @@ defineExpose({ state, name: '{{ctrl.name}}' });
></{{codeName}}Tree>
{{/eq}}
{{/ctrl.ctrls}}
</a-layout-sider>
<a-layout>
</template>
<template #right>
{{#each ctrl.psAppViewRefs as | viewRef |}}
{{#if viewRef.refPSAppView}}
<{{viewRef.refPSAppView.name}}
......@@ -70,6 +68,6 @@ defineExpose({ state, name: '{{ctrl.name}}' });
</{{viewRef.refPSAppView.name}}>
{{/if}}
{{/each}}
</a-layout>
</a-layout>
</template>
</AppSplit>
</template>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册