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

update:更新表单锚点位置计算逻辑

上级 eb6d59ba
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
viewName: '{{page.name}}', viewName: '{{page.name}}',
viewCaption: '{{page.caption}}', viewCaption: '{{page.caption}}',
subCaption: '{{page.subCaption}}', subCaption: '{{page.subCaption}}',
viewSysCss: '{{page.psSysCss.cssName}}', viewSysCss: '{{lowerCase page.codeName}} {{page.psSysCss.cssName}}',
{{!-- viewSysImage: '{{page.psSysImage}}', --}} {{!-- viewSysImage: '{{page.psSysImage}}', --}}
showCaptionBar: {{page.showCaptionBar}}, showCaptionBar: {{page.showCaptionBar}},
viewType: '{{page.viewType}}', viewType: '{{page.viewType}}',
......
<script setup lang="ts"> <script setup lang="ts">
import { IActionParam, IParam } from '@core'; import { Ref } from 'vue';
interface Props { interface Props {
anchorDatas: any[]; anchorDatas: any[];
viewType: string; viewType: string;
viewTag: string;
} }
const props = withDefaults(defineProps<Props>(), {}); const props = withDefaults(defineProps<Props>(), {});
...@@ -21,7 +22,7 @@ let datas: any[] = props.anchorDatas; ...@@ -21,7 +22,7 @@ let datas: any[] = props.anchorDatas;
* @type {any} * @type {any}
* @memberof AppAnchor * @memberof AppAnchor
*/ */
let appAnchor = ref(null); let appAnchor: Ref<any> = ref(null);
/** /**
* 滚动盒子 * 滚动盒子
...@@ -46,6 +47,7 @@ onBeforeMount(() => { ...@@ -46,6 +47,7 @@ onBeforeMount(() => {
onMounted(() => { onMounted(() => {
// 需要异步获取,有些编辑器绘制慢,确保高度获取正确 // 需要异步获取,有些编辑器绘制慢,确保高度获取正确
setTimeout(() => { setTimeout(() => {
computeAppAnchorLayout();
// 获取滚动区域 // 获取滚动区域
getScrollContainer(); getScrollContainer();
// 获取锚点到滚动条盒子顶部的距离 // 获取锚点到滚动条盒子顶部的距离
...@@ -74,6 +76,21 @@ onUnmounted(() => { ...@@ -74,6 +76,21 @@ onUnmounted(() => {
} }
}); });
/**
* 计算锚点位置
*
* @memberof AppAnchor
*/
const computeAppAnchorLayout = () => {
if (appAnchor.value && appAnchor.value.parentNode) {
const parent = appAnchor.value.parentNode;
const top = parent.getBoundingClientRect()?.top;
const right = document.body.clientWidth - parent.getBoundingClientRect()?.right;
appAnchor.value.style.top = top + 20 + 'px';
appAnchor.value.style.right = right + 'px';
}
}
/** /**
* 获取滚动区域 * 获取滚动区域
* *
...@@ -81,14 +98,12 @@ onUnmounted(() => { ...@@ -81,14 +98,12 @@ onUnmounted(() => {
*/ */
const getScrollContainer = () => { const getScrollContainer = () => {
switch (props.viewType) { switch (props.viewType) {
case 'DEEDITVIEW':
container.value = document.querySelector(`.app-view-layout__body`);
break;
case 'DEEDITVIEW3': case 'DEEDITVIEW3':
//TODO // TODO
break; break;
case 'DEEDITVIEW':
default: default:
container.value = document.querySelector(`.app-view-layout__body`); container.value = document.querySelector(`.${props.viewTag?.toLowerCase()} .app-view-layout__body`);
break; break;
} }
}; };
...@@ -112,10 +127,6 @@ const scrollEvent = (e: any) => { ...@@ -112,10 +127,6 @@ const scrollEvent = (e: any) => {
break; break;
} }
} }
// 滚动当前组件高度
if (appAnchor.value) {
(appAnchor.value as any).style.top = scrollTop + 20 + 'px';
}
}; };
/** /**
...@@ -205,9 +216,9 @@ const handleClick = (item: any, index: any) => { ...@@ -205,9 +216,9 @@ const handleClick = (item: any, index: any) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-anchor { .app-anchor {
position: absolute; position: fixed;
top: 20px; top: 20px;
right: -13px; max-width: 200px;
z-index: 99; z-index: 99;
border-radius: 4px; border-radius: 4px;
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
......
...@@ -54,7 +54,7 @@ const initRules = () => { ...@@ -54,7 +54,7 @@ const initRules = () => {
</script> </script>
<template> <template>
<AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" :class="['app-form-item', `app-form-item-${name}`, `${name}`]"> <AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" :class="['app-form-item', `label-${labelPos.toLowerCase()}`, `app-form-item-${name}`, `${name}`]">
<template v-slot:default="{slotStyle, slotClass}"> <template v-slot:default="{slotStyle, slotClass}">
<a-form-item <a-form-item
:class="slotClass" :class="slotClass"
......
...@@ -72,6 +72,7 @@ export class FormControl extends MainControl { ...@@ -72,6 +72,7 @@ export class FormControl extends MainControl {
*/ */
private setAnchorDatas() { private setAnchorDatas() {
const { detailsModel } = this.state; const { detailsModel } = this.state;
this.state.anchorDatas = [];
Object.values(detailsModel).forEach((item: IParam) => { Object.values(detailsModel).forEach((item: IParam) => {
if (item.enableAnchor) { if (item.enableAnchor) {
this.state.anchorDatas.push({ this.state.anchorDatas.push({
......
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
} }
.app-split-trigger-horizontal .trigger-icon { .app-split-trigger-horizontal .trigger-icon {
top: 50%; top: 50%;
transform: translate(-50%, -36px); transform: translate(0, -36px);
width: 100%; width: 100%;
height: 36px; height: 36px;
cursor: col-resize; cursor: col-resize;
......
...@@ -57,7 +57,8 @@ defineExpose({ name, state, load, loadDraft, save, remove, refresh, getData }); ...@@ -57,7 +57,8 @@ defineExpose({ name, state, load, loadDraft, save, remove, refresh, getData });
<AppAnchor <AppAnchor
v-if="state.anchorDatas.length > 0" v-if="state.anchorDatas.length > 0"
:anchorDatas="state.anchorDatas" :anchorDatas="state.anchorDatas"
:viewType="state.parent.state.viewType"> :viewType="state.parent.state.viewType"
:viewTag="state.parent.state.viewCodeName">
</AppAnchor> </AppAnchor>
{{#if ctrl.noTabHeader}} {{#if ctrl.noTabHeader}}
{{#each ctrl.psDEFormPages as | ctrlPage | }} {{#each ctrl.psDEFormPages as | ctrlPage | }}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册