弹窗、抽屉与消息提示体系：WebBuilder 窗口组件构建 ERP 全场景交互弹窗

click(e, options){
  let win = app.dynamicNewWin;
  delete win.cid;
  win = Wb.create(win);
  win.show();
}

events: {
  initialize(options){
    Wb.apply(app, {
      myShareTip: new Wb.Tip({
        cls: 'w-error-color', fontSize: '1.5em',
        events: {beforetip(comp) { this.text = '提示：' + comp.cid; }}
      })
    });
  }
}

({
  cname: "module",
  cid: "erp_purchase_order_win",
  title: "采购订单弹窗模块",
  events: {
    initialize(options){
      // 全局共享提示组件
      Wb.apply(app, {
        orderTip: new Wb.Tip({
          cls: 'w-normal-color', fontSize: '1em',
          events: {
            beforetip(comp){
              this.text = comp.text + "填写规范：编码不可重复，数量大于0";
            }
          }
        })
      });
    }
  },
  items : [{
    cname: "array",
    cid: "winTemplates",
    items : [{
      // 采购订单主编辑弹窗
      cname: "dialog",
      cid: "purchaseOrderDialog",
      title: "采购订单编辑",
      layout: "grid1",
      resetDialog: true, // 关闭自动清空表单
      width: "75em",
      height: "55em",
      // 弹窗顶部操作菜单
      menu: {
        cname: "menu",
        cid: "topMenu",
        isProperty: true,
        items : [{
          cname: "item",
          icon: "add",
          text: "新增明细",
          events: {click(){ app.orderLineDialog.show(); }}
        },
        {
          cname: "item",
          icon: "delete",
          text: "删除选中明细"
        },
        {cname: "divider"},
        {
          cname: "item",
          icon: "print",
          text: "打印订单"
        }
        ]
      },
      items : [{
        // 基础头部字段
        cname: "text",
        cid: "orderCode",
        text: "采购单号",
        required: true,
        tip: "@app.orderTip"
      },
      {
        cname: "select",
        cid: "supplierId",
        text: "供应商",
        url: "erp_supplier?xaction=listSupplier",
        required: true
      },
      {
        cname: "date",
        cid: "orderDate",
        text: "下单日期",
        required: true
      },
      {
        cname: "textArea",
        cid: "remark",
        text: "备注说明"
      },
      // 物料明细表格
      {
        cname: "grid",
        cid: "orderLineGrid",
        title: "物料明细",
        height: "30em",
        columns: [
          {text:"物料编码",field:"matCode"},
          {text:"物料名称",field:"matName"},
          {text:"采购数量",field:"qty"},
          {text:"单价",field:"price"},
          {text:"金额",field:"amt"}
        ]
      },
      // 弹窗内打开明细新增子弹窗按钮
      {
        cname: "button",
        cid: "addLineBtn",
        text: "新增物料明细",
        type: "primary",
        onClick: "app.orderLineDialog.show()"
      }
      ]
    },
    // 明细嵌套子弹窗
    {
      cname: "dialog",
      cid: "orderLineDialog",
      title: "添加采购物料",
      layout: "grid1",
      width: "50em",
      resetDialog: true,
      items : [
        {cname: "text", cid:"matCode", text:"物料编码", required:true},
        {cname: "number", cid:"qty", text:"采购数量", minValue:0.01, required:true},
        {cname: "number", cid:"price", text:"单价", minValue:0}
      ]
    },
    // 右侧详情抽屉
    {
      cname: "drawer",
      cid: "orderDetailDrawer",
      dockPosition: "right",
      width: "45vw",
      title: "订单完整详情预览",
      items: [{cname: "component", html: "展示订单全流程信息、入库记录、付款记录"}]
    }
    ]
  },
  {
    cname: "viewport",
    cid: "mainView",
    layout: "grid1",
    items : [{
      cname: "label",
      text: "采购订单弹窗交互演示",
      cls: "w-title3"
    },
    {
      cname: "button",
      text: "新增采购订单",
      events: {click(){ app.purchaseOrderDialog.show(); }}
    },
    {
      cname: "button",
      text: "查看订单侧边详情抽屉",
      events: {click(){ app.orderDetailDrawer.show(); }}
    },
    {
      cname: "button",
      text: "删除订单测试确认弹窗",
      events: {
        click(){
          Wb.confirm("确认删除该采购订单？删除后无法恢复", ()=>{
            Wb.succ("订单删除成功");
          });
        }
      }
    }
    ]
  }
  ]
})