jeecg-vue3+ant最简单分屏处理：左右分屏，同屏阅览

1.分屏按钮

<template>
    <div v-if="showButtons">
        <a-button
        v-for="item in buttons"
        :key="item.text"
        v-show="item.show"
        :class="{ active: item.active }"
        style="margin-left: 5px;"
        @click="toggleButtonActive(item)"
        >
        {{ item.text }}
        </a-button>
  </div>
</template>
<script lang="ts" setup>

    import { ref, defineProps, onMounted, computed } from 'vue';

    const flag = ref(false);
    const props = defineProps({
        parentData: { type: Object },
    });

    const showButtons = computed(() => props.parentData?.isButtonShow ?? false);

    const emit = defineEmits(['action']);

    const buttons = ref([
        { text: '同屏阅览', active: false, show: true, id: '1' },
        { text: '子屏阅览', active: false, show: true, id: '2' },
        { text: '资料阅览', active: false, show: true, id: '3' },
    ]);
    //单个选中
    function toggleButtonActive(btn) {
        buttons.value.forEach(button => {
            //判断是否为同一个，同一个恢复默认选中
            if (button.active&&button.text === btn.text) {
                flag.value = true;
                button.active = false;
            } else {
                button.active = button.text === btn.text;
            }
        });
        if (flag.value) {
            flag.value = false;
            emit('action', '0');
        } else {
            emit('action', btn.id);
        }
    };
    
    //多个选中
    function toggleButton(button) {
      // 切换按钮的选中状态
      button.active = !button.active;
      emit('action', button.active?button.id:'0');
    }

    function init(){
        const hiddenIds = props.parentData?.hiddenId?.split(',') ?? [];
        hiddenIds.forEach(id => {
            const button = buttons.value.find(button => button.id === id);
            if (button) button.show = false;
        });
    }

    //初始化
    onMounted(()=>{
        init();
    });

</script>
<style scoped>
.active {
    border-color: #1890ff; /* 按钮边框颜色 */
    color: #1890ff; /* 按钮文字颜色 */
}
</style>

2.分屏按钮控制，左右分屏

<template>
  <div class="container">
    <a-text style="margin-left: 15px; font-weight: bold;">备案申报</a-text>
    <Screen v-if="parentData.isButtonShow" :parent-data="parentData" @action="handleAction" />
  </div>
  <div class="split-screen">
    <div v-if="key === '0'">
      <Basic />
    </div>
    <div v-if="isSplitScreenVisible">
      <div v-if="key === '1'" class="split">
        <div class="left-panel">
          <Basic />
        </div>
        <div class="right-panel">
          <Basic />
        </div>
      </div>
      <div v-if="key === '2'">
        <Basic />
      </div>
      <div v-if="key === '3'" class="split">
        <div class="left-panel">
          <Basic />
        </div>
        <div class="right-panel">
          <Basic />
        </div>
      </div>
    </div>

  </div>
  
</template>

<script lang="ts" setup>
  //引入依赖
  import { ref } from 'vue';
  import Screen from '/@/components/Screen/index.vue';
  import Basic from './basic.vue';
  
  const parentData = ref({
    isButtonShow: true,
  });

  const key = ref('0');

  const isSplitScreenVisible = ref(true);

  function handleAction(data: string){
    key.value = data;
  }

</script>

<style scoped>

.container {
  background-color: white;
  padding: 5px;
  width: 100%;
  max-width: 100%; 
  box-sizing: border-box;
  margin: 0 auto; 
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  /* justify-content: space-between;  */
}

.split-screen {
  display: flex;
  height: 100%;
}

.split {
  display: flex;
}

.left-panel,
.right-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1px;
}

.left-panel {
  border-right: 1px solid #eee;
}
</style>

3.技术难点

现有不支持分屏封装，只支持左右分屏。后期会增加，子屏阅览、资料预览。