Peoplesoft Peoplecode：子页面网格选中行转主页面网格实现方案咨询

下面是几种实用的实现方式，你可以根据页面架构（单页/多页、弹窗/独立页面）选择：

1. 全局状态管理（单页应用首选） #

如果是Vue、React这类单页应用，用全局状态管理工具最省心：

• 在全局状态（比如Pinia、Vuex、Redux）里定义一个数组来存选中行
• 子页面点击「Add to form」时，把选中行提交到全局状态，记得加去重逻辑，避免重复添加相同行
• 主页面的Grid直接绑定这个全局状态数组，状态更新时Grid会自动渲染新数据

示例（以Pinia为例）：

// 定义全局状态仓库
import { defineStore } from 'pinia'
export const useSelectedRowsStore = defineStore('selectedRows', {
  state: () => ({ rows: [] }),
  actions: {
    addRows(newRows) {
      // 按唯一ID去重
      const existingIds = this.rows.map(row => row.id)
      const uniqueRows = newRows.filter(row => !existingIds.includes(row.id))
      this.rows.push(...uniqueRows)
    }
  }
})

// 子页面按钮点击逻辑
import { useSelectedRowsStore } from '@/stores/selectedRows'
const store = useSelectedRowsStore()
const handleAdd = () => {
  const selectedRows = gridInstance.getSelectedRows() // 假设Grid有获取选中行的方法
  store.addRows(selectedRows)
  // 关闭子页面/弹窗
}

// 主页面Grid绑定数据
import { useSelectedRowsStore } from '@/stores/selectedRows'
const store = useSelectedRowsStore()
// 直接用store.rows作为Grid的数据源

2. 父子组件通信（弹窗/嵌套子组件场景） #

如果子页面是主页面弹出的弹窗或者嵌套组件，直接用父子通信更简单：

• 主页面打开子页面时，传给子组件一个回调函数
• 子页面点击按钮时，调用这个回调，把选中行数据传回去
• 主页面收到数据后，合并到自己的Grid数据源（同样要去重）

示例（Vue弹窗场景）：

<!-- 主页面 -->
<template>
  <ChildModal @add-rows="handleAddRows" />
  <MainGrid :data="mainGridData" />
</template>
<script setup>
import { ref } from 'vue'
const mainGridData = ref([])
const handleAddRows = (newRows) => {
  const existingIds = mainGridData.value.map(row => row.id)
  const uniqueRows = newRows.filter(row => !existingIds.includes(row.id))
  mainGridData.value = [...mainGridData.value, ...uniqueRows]
}
</script>

<!-- 子页面弹窗 -->
<template>
  <button @click="submitSelected">Add to form</button>
  <SubGrid ref="subGrid" />
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['add-rows'])
const subGrid = ref(null)
const submitSelected = () => {
  const selectedRows = subGrid.value.getSelectedRows()
  emit('add-rows', selectedRows)
}
</script>

3. 浏览器本地存储（跨独立页面场景） #

如果主页面和子页面是完全独立的页面（比如新开标签页），用localStorage/sessionStorage临时存数据：

• 子页面点击按钮时，把选中行转成JSON字符串存到本地存储，可以先合并已有数据再存储
• 主页面监听storage事件，一旦存储内容变化就读取数据更新Grid
• 用完记得清理存储，避免残留数据

示例：

// 子页面点击逻辑
const handleAdd = () => {
  const selectedRows = gridInstance.getSelectedRows()
  const existingRows = JSON.parse(localStorage.getItem('selectedRows')) || []
  const existingIds = existingRows.map(row => row.id)
  const uniqueRows = selectedRows.filter(row => !existingIds.includes(row.id))
  localStorage.setItem('selectedRows', JSON.stringify([...existingRows, ...uniqueRows]))
  window.close()
}

// 主页面监听与初始化
window.addEventListener('storage', (e) => {
  if (e.key === 'selectedRows') {
    const selectedRows = JSON.parse(e.newValue) || []
    mainGridData = selectedRows // 更新Grid数据源
    localStorage.removeItem('selectedRows') // 清理存储
  }
})
// 页面加载时检查一次存储
window.addEventListener('load', () => {
  const selectedRows = JSON.parse(localStorage.getItem('selectedRows')) || []
  if (selectedRows.length) {
    mainGridData = selectedRows
    localStorage.removeItem('selectedRows')
  }
})

4. URL参数传递（小数据量场景） #

如果选中行数据量很小，用URL参数传递也可行：

• 子页面把选中行转成JSON字符串，编码后拼到主页面URL的参数里
• 主页面读取URL参数，解析后更新Grid
• 缺点：URL长度有限制，数据多了会失效

示例：

// 子页面跳转逻辑
const handleAdd = () => {
  const selectedRows = gridInstance.getSelectedRows()
  const encodedData = encodeURIComponent(JSON.stringify(selectedRows))
  window.location.href = `/main-page?selected=${encodedData}`
}

// 主页面读取参数
window.addEventListener('load', () => {
  const params = new URLSearchParams(window.location.search)
  const selectedData = params.get('selected')
  if (selectedData) {
    const selectedRows = JSON.parse(decodeURIComponent(selectedData))
    mainGridData = selectedRows // 更新Grid数据源
    // 移除URL参数，避免刷新重复加载
    window.history.replaceState({}, document.title, window.location.pathname)
  }
})

内容的提问来源于stack exchange，提问作者Pat