唯杰地图 logo唯杰地图
VJMAP
EN

secondary-dev-selection.vp.tsx

vjvp/examples/secondary-dev-selection.vp.tsx 4.0 KB140 行
原文
/** @jsx h */
// AUTO-GENERATED by export-examples-tsx —— 由同名 .vpproj.json 导出的 VP-TSX 配对视图(已回编译等值验证)。
// 修改请改 JSON 后重跑导出脚本,或改本文件后用 compile.mts 重编 JSON——保持两者一致。
import { defineProject, h } from '../scripts/vptsx/runtime'

export default defineProject({
  name: "二次开发触发选中传递示例",
  connections: [
    {
      "uid": "conn_person",
      "name": "人员名单",
      "type": "json",
      "connectorType": "json",
      "config": {
        "copyToRoot": true,
        "fileName": ""
      },
      "tables": [
        {
          "uid": "tbl_person",
          "name": "人员名单",
          "fields": [
            {
              "uid": "姓名",
              "alias": "姓名",
              "type": "string"
            },
            {
              "uid": "年龄",
              "alias": "年龄",
              "type": "number"
            },
            {
              "uid": "部门",
              "alias": "部门",
              "type": "string"
            }
          ]
        }
      ]
    }
  ],
  connectionData: {
    "conn_person": [
      {
        "tableId": "tbl_person",
        "tableName": "人员名单",
        "fields": [
          {
            "uid": "姓名",
            "alias": "姓名",
            "type": "string"
          },
          {
            "uid": "年龄",
            "alias": "年龄",
            "type": "number"
          },
          {
            "uid": "部门",
            "alias": "部门",
            "type": "string"
          }
        ],
        "rows": [
          {
            "姓名": "小张",
            "年龄": 28,
            "部门": "研发部"
          },
          {
            "姓名": "小李",
            "年龄": 32,
            "部门": "市场部"
          },
          {
            "姓名": "小王",
            "年龄": 26,
            "部门": "运维部"
          }
        ]
      }
    ]
  },
  screen: (
    <screen
      uid={"screen_main"}
      name={"主页面"}
      fullscreen-mode={"fill-uniform"} fill-auto-expand={true}
      size={[1920,1080]}
      background-color={"#0c0d0e"}
      select-sync-receive={true}
      stateOverrides={{}}
    >
      <basic-text
        uid={"w_title"}
        position={[120,60]}
        size={[1680,60]}
        text={"二次开发触发选中传递:中间组件(饼图)发起选中 → 表格按「选中字段=姓名」高亮"}
        text-font={{"size":28,"color":"#ffffff"}}
        text-position={"left"}
        stateOverrides={{}}
      />
      <basic-text
        uid={"w_note"}
        position={[120,130]}
        size={[1680,80]}
        text={"说明:本组件集无「按钮」组件,按钮内的 applySelection({姓名:'小张'}) / withdrawSelection() 属宿主二次开发代码,不在工程 JSON 内。此处用「饼图(传递给其他组件)」作为支持选中传递的中间组件来等价复现最终选中效果。"}
        text-font={{"size":18,"color":"#aab2bd"}}
        text-position={"left"}
        stateOverrides={{}}
      />
      <chart-pie
        uid={"w_pie"}
        name={"中间组件(发起选中)"}
        position={[120,240]}
        size={[600,520]}
        title={"点击姓名发起选中"}
        show-legend={true}
        show-label={true}
        select-sync-emit={true}
        category={[["conn_person","tbl_person","姓名"]]}
        value={[["conn_person","tbl_person","年龄"]]}
        stateOverrides={{}}
      />
      <basic-table
        uid={"w_table"}
        name={"基础数据表格(接收选中)"}
        position={[780,240]}
        size={[1020,520]}
        row-count={6}
        select-sync-receive={true}
        select-sync-fields={[["conn_person","tbl_person","姓名"]]}
        table-data-fields={[["conn_person","tbl_person","姓名"],["conn_person","tbl_person","年龄"],["conn_person","tbl_person","部门"]]}
        stateOverrides={{}}
      />
    </screen>
  ),
})