树形 Tree 组件深度赋能 ERP 开发：WebBuilder XWL 实现 BOM、物料分类全场景落地

{
  cname: "tree",
  cid: "commonRemoteTree",
  url: "demo-source?xaction=listAreaTree",
  height: "15em"
}

serverScript(){
  let xaction = Params.xaction;
  const actions = {
    listAreaTree(){
      // 递归查询物料分类树形数据，parent_id关联父子层级
      let treeData = Wb.getTreeRows({
        sql: "select sid, area_name, parent_id from erp_material_cat order by sid",
        parentField: "parent_id",
        idField: "sid",
        textField: "area_name"
      });
      Wb.send(treeData);
    }
  };
  if(actions[xaction]) actions[xaction]();
}

localData: [
  {
    text: '成品-电机总成', _icon: 'product', remark: '主成品', area: 1, percentage: 1,
    items: [
      { text: '半成品-电机外壳', _leaf: true },
      { text: '半成品-电机线圈', _leaf: true, items:[{text:'铜线原材料',_leaf:true}] }
    ]
  }
]

resizable: true,    // 列宽拖拽调整
gridLine: true,      // 网格线
headerLine: true,    // 表头分割线
columnsSortable: true, // 列排序
stateId: "wb.miscTree",// 布局持久化，用户调整列宽刷新页面保留
linkedCheck: true,   // 父子节点复选联动（BOM全选/反选刚需）
frame: true,         // 边框容器
pagingBar: true      // 树形分页，大数据量BOM不卡顿

// 用量数值单元格：低于阈值标红底色+图标
render(value, data, column, el){
  if (value < 10000000) {
    el.parentNode.cls = 'w-succ-bgcolor-row';
    el.cls = 'w-error-color';
    value = '* ' + value.intText;
  }
  let wrapEl = el.addEl('w-row w-align-center');
  wrapEl.addEl('w-item-icon w-icon icon-thumb');
  wrapEl.addEl('w-text').textContent = value;
}

checkBox: "int",    // 数字型勾选值，存库0/1
checkBox: "roTrue", // 只读勾选框
toggleCol: {render: 内置开关组件} // 自制/外购物料切换开关

itemdblclick(item, e, options){
  Wb.tip(item.data.text + ' row double clicked');
}

columns : [{
  cname: "column",
  text: "物料名称",
  fieldName: "area_name",
  expander: true,
  editor: {cname: "text", required: true} //文本框编辑名称
},{
  cname: "column",
  text: "上级分类",
  fieldName: "parent_id",
  editor: {
    cname: "select",
    url: "demo-source?xaction=areaSearch" //下拉树形选择父节点
  }
}]

({
  cname: "module",
  cid: "erp_material_cat_tree",
  title: "物料分类树形管理",
  description: "物料多级分类维护，适配ERP物料主数据",
  // 服务端树形查询、新增、更新、删除逻辑
  serverScript(){
    let xaction = Params.xaction;
    const actions = {
      // 加载完整物料分类树形
      listAreaTree(){
        let tree = Wb.getTreeRows({
          sql: "select sid,cat_name,parent_id,sort from erp_material_cat order by sort",
          idField:"sid",parentField:"parent_id",textField:"cat_name"
        });
        Wb.send(tree);
      },
      // 下拉选择父分类数据源
      areaSearch(){
        Wb.sendRows("select sid,cat_name from erp_material_cat");
      },
      // 树形批量保存
      saveTree(){
        let payload = Wb.payloadParams;
        Wb.treeSync({
          tableName:"erp_material_cat",
          idField:"sid",
          parentField:"parent_id",
          data:payload
        });
        Wb.send("ok");
      }
    };
    if(actions[xaction]) actions[xaction]();
  },
  items : [{
    cname: "viewport",
    cid: "viewport1",
    layout: "grid1",
    items : [{
      cname: "label",
      cid: "mainLabel",
      text: "物料多级分类管理",
      cls: "w-title3"
    },
    {
      cname: "title",
      cid: "editableTreeTitle",
      title: "分类树形（支持新增、编辑、子分类、批量保存）"
    },
    {
      cname: "tree",
      cid: "materialCatTree",
      columnsSortable: true,
      editable: true,
      height: "30em",
      multiSelect: true,
      sorters: "sort",
      url: "erp_material_cat_tree?xaction=listAreaTree",
      pagingBar: true,
      frame: true,
      linkedCheck: true,
      stateId: "erp.materialCatTree",
      // 顶部操作工具栏
      tbar: {
        cname: "toolbar",
        cid: "tbar",
        isProperty: true,
        items : [{
          cname: "item",
          cid: "addBtn",
          text: "新增一级分类",
          icon: "add",
          keys: "Ctrl+E",
          events: {
            click(){
              app.materialCatTree.addRecord({ cat_name: '新分类', parent_id: null, sort: 0 });
            }
          }
        },
        {
          cname: "item",
          cid: "editBtn",
          text: "编辑分类",
          icon: "edit",
          keys: "Ctrl+J",
          events: {
            click(){
              let rec = app.materialCatTree.firstItem;
              if(rec){
                rec.startEdit("cat_name");
                rec.highlight();
              }
            }
          }
        },
        {
          cname: "item",
          cid: "delBtn",
          text: "删除分类",
          icon: "delete",
          keys: "Ctrl+D",
          events: {
            click(){
              app.materialCatTree.delRecords();
            }
          }
        },
        {cname: "divider"},
        {
          cname: "item",
          cid: "addChild",
          text: "新增子分类",
          icon: "insert",
          events: {
            click(){
              let tree = app.materialCatTree;
              let sel = tree.getSelection()[0];
              if(!sel){
                Wb.tipWarn("请先选中父分类");
                return;
              }
              sel.expand(()=>{
                sel.addData({ cat_name:"新子分类",parent_id:sel.data.sid,sort:0 });
              })
            }
          }
        },
        {cname: "divider"},
        {
          cname: "item",
          cid: "saveBtn",
          text: "保存全部修改",
          icon: "save",
          keys: "Ctrl+S",
          events: {
            click(){
              app.materialCatTree.sync({
                url: "erp_material_cat_tree?xaction=saveTree",
                success() { Wb.tipSucc("分类保存完成"); }
              });
            }
          }
        }
        ]
      },
      // 树形多列表头
      items : [{
        cname: "array",
        cid: "columns",
        items : [{
          cname: "column",
          cid: "catNameCol",
          text: "分类名称",
          fieldName: "cat_name",
          expander: true,
          width: -1,
          editor: {
            cname: "text",
            cid: "editor",
            isProperty: true,
            required: true
          }
        },
        {
          cname: "column",
          cid: "sidCol",
          text: "分类编码",
          fieldName: "sid",
          width: "12em",
          editor: {cname: "text",isProperty:true,required:true}
        },
        {
          cname: "column",
          cid: "parentIdCol",
          text: "上级分类",
          fieldName: "parent_id",
          width: "18em",
          editor: {
            cname: "select",
            url: "erp_material_cat_tree?xaction=areaSearch",
            textField: "cat_name",
            valueField: "sid",
            required: true
          }
        },
        {
          cname: "column",
          cid: "sortCol",
          text: "排序号",
          fieldName: "sort",
          width: "10em",
          editor: {cname: "number",isProperty:true,minValue:0}
        }
        ]
      }
      ]
    },
    {
      cname: "component",
      cid: "miscDescComp",
      html: "<div>物料分类功能说明：</div>\n<ul>\n  <li>支持无限级物料分类，原材料/半成品/成品分层管理</li>\n  <li>可拖拽调整列宽，布局自动持久化保存</li>\n  <li>支持新增一级分类、选中节点新增子分类</li>\n  <li>行内直接编辑名称、编码、上级分类、排序</li>\n  <li>一键批量保存所有新增/修改/删除数据，自动维护层级关系</li>\n</ul>",
      textSelectable: false
    }
    ]
  }
  ]
})