WebBuilder Grid + 联动 Slot 组件实战应用案例
> 通用布局结构统一规范 ``` module └── viewport(layout:grid1) └── container(layout:"grid") // 左右分栏 ├ Slot(多级联动选择区) └ Grid(业务数据台账) ``` ## 案例 1:客户区域台账筛选(大洲→国家→城市三级联动) ### 业务场景 客户管理页面,左侧按行政区划层级筛选,选中区域后,右侧客户表格自动加载对应区域客户信息。 ### 完整代码 ``` ({ cname: "module", cid: "customer_slot_grid_demo", items: [{ cname: "viewport", cid: "view1", layout: "grid1", items: [ {cname: "label", text:"客户区域台账查询", cls:"w-title3"}, { cname: "container", cid: "mainCt", layout: "grid", frame: true, items: [ // 左侧联动Slot { cname: "slots", cid: "areaSlot", height: "25em", defaults: "({ autoScroll: 'hide' })", border: false, items: [ { cname: "list", cls: "Wb.SlotView", cid: "continentView", url: "demo-source?xaction=listRootArea", topTitle: "大洲", textField: "area_name", events: { "selectionchange": ` app.countryView.clear(); app.cityView.clear(); if(this.selection){ app.countryView.load({ params: { parent_id: this.selection.data.sid } }); }else{ // 清空选择,刷新全部客户 app.customerGrid.load({params:{area_id:null}}); } ` } }, { cname: "list", cls: "Wb.SlotView", cid: "countryView", url: "demo-source?xaction=listArea", topTitle: "国家", textField: "area_name", events: { "selectionchange": ` app.cityView.clear(); if(this.selection){ app.cityView.load({ params: { parent_id: this.selection.data.sid } }); }else{ app.customerGrid.load({params:{area_id:null}}); } ` } }, { cname: "list", cls: "Wb.SlotView", cid: "cityView", url: "demo-source?xaction=listArea", topTitle: "城市", textField: "area_name", events: { "selectionchange": ` let areaId = this.selection?.data.sid || null; app.customerGrid.load({ params: { area_id: areaId } }); ` } } ] }, // 右侧客户Grid表格 { cname: "grid", cid: "customerGrid", height: "25em", url: "demo-source?xaction=customerList", pageSize: 10, frame: true, items: [{ cname: "array", cid: "columns", items: [ {cname:"column",rowNum:true}, {cname:"column",text:"客户名称",fieldName:"cust_name"}, {cname:"column",text:"联系人",fieldName:"contact"}, {cname:"column",text:"所属城市",fieldName:"city_name"} ] }] } ] } ] }] }) ``` ### 业务亮点 1. 上级清空选择时,下级列表同步清空; 1. 无选中条件加载全部数据; 1. 层级逐级筛选,适合客户、网点、分支机构管理系统。 --- ## 案例 2:物资分类库存台账(一级分类→二级分类两级联动) ### 业务场景 仓储管理系统,左侧物资分类两级联动,筛选对应品类库存清单。 ``` ({ cname: "module", cid: "stock_slot_grid_demo", items: [{ cname: "viewport", cid: "view1", layout: "grid1", items: [ {cname: "label", text:"物资库存台账", cls:"w-title3"}, { cname: "container", layout: "grid", frame: true, items: [ { cname: "slots", cid: "goodsSlot", height: "25em", border: false, items: [ { cname: "list", cls: "Wb.SlotView", cid: "type1View", url: "demo-source?xaction=goodsTypeRoot", topTitle: "一级分类", textField: "type_name", events: { "selectionchange": ` app.type2View.clear(); if(this.selection){ app.type2View.load({params:{parent_id:this.selection.data.type_id}}); }else{ app.stockGrid.load({params:{type_id:null}}); } ` } }, { cname: "list", cls: "Wb.SlotView", cid: "type2View", url: "demo-source?xaction=goodsType", topTitle: "二级分类", textField: "type_name", events: { "selectionchange": ` let tid = this.selection?.data.type_id || null; app.stockGrid.load({params:{type_id:tid}}); ` } } ] }, { cname: "grid", cid: "stockGrid", height: "25em", url: "demo-source?xaction=stockList", pageSize: 10, items: [{ cname: "array", cid: "columns", items: [ {cname:"column",rowNum:true}, {cname:"column",text:"物资名称",fieldName:"goods_name"}, {cname:"column",text:"库存数量",fieldName:"stock_num"}, {cname:"column",text:"存放仓库",fieldName:"warehouse"} ] }] } ] } ] }] }) ``` 适用:ERP、物资管理、固定资产台账。 --- ## 案例 3:组织架构人员台账(公司→部门两级联动) ### 业务场景 人力资源系统,左侧组织架构联动,筛选对应部门员工清单。 ``` ({ cname: "module", cid: "hr_slot_grid_demo", items: [{ cname: "viewport", cid: "view1", layout: "grid1", items: [ {cname: "label", text:"人员台账(按组织筛选)", cls:"w-title3"}, { cname: "container", layout: "grid", frame: true, items: [ { cname: "slots", cid: "orgSlot", height: "25em", border: false, items: [ { cname: "list", cls: "Wb.SlotView", cid: "companyView", url: "demo-source?xaction=companyList", topTitle: "公司", textField: "company_name", events: { "selectionchange": ` app.deptView.clear(); if(this.selection){ app.deptView.load({params:{company_id:this.selection.data.company_id}}); }else{ app.empGrid.load({params:{dept_id:null}}); } ` } }, { cname: "list", cls: "Wb.SlotView", cid: "deptView", url: "demo-source?xaction=deptList", topTitle: "部门", textField: "dept_name", events: { "selectionchange": ` let did = this.selection?.data.dept_id || null; app.empGrid.load({params:{dept_id:did}}); ` } } ] }, { cname: "grid", cid: "empGrid", height: "25em", url: "demo-source?xaction=staffAllDict", pageSize:10, items: [{ cname:"array",cid:"columns", items:[ {cname:"column",rowNum:true}, {cname:"column",text:"姓名",fieldName:"full_name"}, {cname:"column",text:"岗位",fieldName:"post"}, {cname:"column",text:"薪资",fieldName:"salary"} ] }] } ] } ] }] }) ``` --- ## 案例 4:运维设备台账(站点→分组→设备三级联动) ### 业务场景 物联网 / 运维平台,筛选站点、设备分组,查看巡检、故障记录 Grid。 逻辑和案例 1 保持一致,替换接口字段: - SlotView:站点 → 设备分组 → 设备 - Grid:巡检记录、故障工单 ## 案例 5:弹窗内组合场景(编辑弹窗内部 Slot + 子表 Grid) ### 业务场景 新增项目弹窗:左侧联动 Slot 选择项目层级,右侧 Grid 维护项目子任务明细。 布局放在 `Wb.Window` 弹窗内部,多用于表单主子表场景。 ## 通用开发标准要点(全部案例统一遵循) 1. **清空联动逻辑** 上级重新选择时,下级 SlotView 调用 `.clear()` 清空旧数据,避免残留; 1. **空值防护** 使用 `this.selection?.data.xxx` 可选链,防止未选中时报脚本异常; 1. **表格刷新方式** 统一使用 `grid.load({params:{}})` 携带查询参数,不要操作本地 data; 1. **交互优化建议** 页面增加【重置】按钮,脚本: ``` app.areaSlot.clearAll(); app.customerGrid.load({params:{area_id:null}}); ``` ## 选型总结 ✅ 适合选用「联动 Slot + Grid」 - 层级≥2 级、选项数量多,需要列表滚动浏览; - 页面侧边筛选面板,左右分栏布局; - 需要直观展示每一级全部选项,对比多级下拉 cascader 视觉更清晰。 ❌ 不推荐 表单空间狭小、层级过多(≥4 级),界面宽度不足,优先使用级联下拉组件。 如果你需要,我可以把其中任意一个案例扩展成完整操作教学文章,或者补充**重置按钮、默认加载、多选模式**扩展版本。