salesforce Lightning -- 练习Demo添加订单产品

标签: salesforce  lightning  salesforce lightning

订单添加订单产品

继上一篇博文,已经介绍过,怎样去初始化一个组件,怎样通过一个记录上的button调用组件,以及组件中的各个组块之间起什么作用等。
本篇继续延续上一个文章,简单的搭建一个lightning页面的Demo出来。

批量添加订单产品,我相信这个场景大家应该都有遇到过,可能会涉及到产品的检索,分页。添加价格,数量等操作。下面我们通过lightning的模块实现该功能,主要是体验lightning中的数据传递。


Comment Code

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasSObjectName,force:hasRecordId" controller="AP_OrderItems">
    <style>
        .slds-modal__container {
             max-width: 80rem !important;
             width:80% !important;
        }
    </style>
    <!-- 控制Waiting是否展示参数 -->
    <aura:attribute name="toggleSpinner" type="boolean" default="false"/>
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="product" type="Product__c"  default="{ 'sobjectType' : 'Product__c'}"/>
    <aura:attribute name="productListAdd" type="Object[]"/>
    <aura:attribute name="addListFlag" type="boolean" default="false"/>
    <aura:attribute name="productListSerach" type="Object[]"/>
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
    <!-- 头部模块 -->
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate"> 
              <div class="slds-media__body">
                <h1>
                    <lightning:icon iconName="action:clone"/>
                    <span class="slds-text-heading_small" style="font-size: 24px; margin-left: 15px;">添加订单产品</span>
                </h1>
              </div> 
              <div class="slds-no-flex">
                <button class="slds-button slds-button_brand" onclick="{!c.doSearch}">搜索</button>
              </div>
            </header>
        </div>
        <!-- 主体模块 -->
        <div class="slds-card__body slds-card__body_inner"> 
            <!-- 内部接着是一个article标签 -->
            <article class="slds-card">
                <div class="slds-card__body slds-card__body_inner"> 
                    <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
                        <tr class="slds-text-title_caps">
                             <th scope="col">
                                <div class="slds-truncate" title="Product_Name">
                                     <lightning:input label="产品名称:" value=""  type="text" name="Product_Name" aura:id="Product_Name"/>
                                </div>
                              </th>
                              <th scope="col">
                                <div class="slds-truncate" title="ProductID">
                                    <lightning:input label="产品标识码:" value=""  type="text" name="ProductID" aura:id="ProductID"/> 
                                </div>
                              </th>
                        </tr>
                    </table>
                </div>
            </article>
            <!-- 查询结果 -->
            <article class="slds-card slds-card_boundary">
               <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                  <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
                    </span>
                  </div>
                  <div class="slds-media__body">
                    <h2>
                        <span class="slds-text-heading_small">查询结果</span>
                    </h2>
                  </div>
                </header>
                <div class="slds-no-flex">
                  <button class="slds-button slds-button_brand" onclick="{!c.add}">添加</button>
                </div>
              </div>
              <div class="slds-card__body slds-card__body_inner">
                <div style="overflow-y: scroll;display: block;height: 300px">
                <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer"><!--  style="overflow-y: scroll;display: block;height: 300px" -->
                  <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col" style="width:3.25rem;" class="slds-text-align--right">
                                <ui:inputCheckbox aura:id="se" change="{!c.selectAll}" class="pro"/>
                            </th>
                            <th scope="col" style="width:30%;">
                            <div class="slds-truncate" title="Name">产品名称</div>
                            </th>
                            <th scope="col" style="width:15%;">
                            <div class="slds-truncate" title="Company">产品标识码</div>
                            </th>
                        </tr>
                   </thead>
                   <tbody>
                        <aura:iteration items="{!v.productListSerach}" var="prod">
                            <tr class="slds-hint-parent">
                              <td>
                                <ui:inputCheckbox aura:id="box" value="{!prod.flag}"/>
                              </td>
                              <td>
                                <div class="slds-truncate" title="">
                                    <ui:outputTextArea value="{!prod.product.Name}" click="{!c.showProduct}"/>  
                                </div>
                              </td>
                              <td>
                                <div class="slds-truncate" title="">
                                    <p>{!prod.product.Product_Code__c}</p>
                                </div>
                              </td>
                            </tr>
                        </aura:iteration>
                    </tbody>                         
                </table>
                </div>
              </div>
            </article>
        </div>


    </article>
    <aura:if isTrue="{!v.addListFlag}"> 
    <!-- 选择的产品表 -->
    <article class="slds-card slds-card_boundary">
      <div class="slds-card__header slds-grid">
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
            </span>
          </div>
          <div class="slds-media__body">
            <h2>
                <span class="slds-text-heading_small">产品列表</span>
            </h2>
          </div>
        </header>
        <div class="slds-no-flex">
          <button class="slds-button slds-button_brand" onclick="{!c.remove}">移除</button>
        </div>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer" >
          <thead>
            <tr class="slds-text-title_caps">
              <th scope="col" style="width:3.25rem;" class="slds-text-align--right">
                 <ui:inputCheckbox aura:id="pro" change="{!c.selectAll}" class="pro2"/>
              </th>
              <th scope="col" style="width:24%;">
                <div class="slds-truncate" title="Name">产品名称</div>
              </th>
              <th scope="col" style="width:8%;">
                <div class="slds-truncate" title="Email">产品号</div>
              </th>
              <th scope="col" style="width:8%;">
                <div class="slds-truncate" title="Email">数量</div>
              </th>
              <th scope="col" style="width:9%;">
                <div class="slds-truncate" title="Email">单价</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <aura:iteration items="{!v.productListAdd}" var="productAdd">
            <tr class="slds-hint-parent">
              <td>
                <ui:inputCheckbox aura:id="box1" value="{!productAdd.flag}"/>
              </td>
              <td>
                <div class="slds-truncate" title="">
                    <ui:outputText value="{!productAdd.product.Name}"/>
                </div>
              </td>
              <td>
                <ui:outputText value="{!productAdd.product.Product_Code__c}"/>
              </td>
              <td>
                <div class="slds-truncate" title="">
                    <ui:inputNumber label=" " value="{!productAdd.num}"  /> 
                </div>
              </td>

              <td>
                <div class="slds-truncate" title="">
                    <ui:inputNumber label=" " value="{!productAdd.Price}"  /> 
                </div>
              </td>
            </tr>
            </aura:iteration>
          </tbody>
        </table>
      </div>
      <!-- 页足模块 -->
        <footer class="slds-card__footer">
            <lightning:button class="slds-button slds-button_brand" label="提交" onclick="{!c.save}"/>
            <lightning:button class="slds-button slds-button_neutral" label="取消" onclick="{!c.cancel}"/>
        </footer>
    </article>
    </aura:if>
    <!-- Waiting组块 -->
<aura:if isTrue="{!v.toggleSpinner}"> 
    <div class="slds-spinner_container">
        <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
            <span class="slds-assistive-text">Loading</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
         </div>
    </div>
</aura:if> 
</aura:component>

js Controller

({
    doInit : function(component, event, helper) {
        helper.init(component);

    },
    doSearch : function(component, event, helper) {
        console.log("serach function");
        helper.showSpinner(component);
        var productName= component.find("Product_Name").get("v.value");
        var productID = component.find("ProductID").get("v.value");
        helper.serach(component,productName,productID);
        helper.hideSpinner(component);
    },
    add : function(component, event, helper) {
        var prolist = component.get("v.productListSerach");
        var productsAdd = component.get("v.productListAdd");
        //打勾的list
        for(var i = 0 ; i < prolist.length ; i ++ )
        {
            if(prolist[i].flag)
            {
                prolist[i].flag = false;
                productsAdd.unshift(prolist[i]);
                prolist.splice(i,1);
                i--;
            }

        }
        component.set("v.productListSerach", prolist);
        component.set("v.productListAdd", productsAdd);
        // 判断是否展示选中的产品块
        if(component.get("v.productListAdd").length > 0)
            component.set("v.addListFlag", true);
        else
            component.set("v.addListFlag", false);
    },
    remove : function(component, event, helper)
    {
        var proserachlist = component.get("v.productListSerach");
        var prolist = component.get("v.productListAdd");
        //打勾的list
        for(var i = 0 ; i < prolist.length ; i ++ )
        {
            //选中移除
            if(prolist[i].flag)
            {
                prolist[i].flag = false;
                proserachlist.unshift(prolist[i]);
                prolist.splice(i,1);
                i--;
            }
        }
        component.set("v.productListSerach", proserachlist);
        component.set("v.productListAdd", prolist); 
         // 判断是否展示选中的产品块
        if(component.get("v.productListAdd").length > 0)
            component.set("v.addListFlag", true);
        else
            component.set("v.addListFlag", false);
    },
    save : function(component, event, helper){
        // 先对选中的需要添加的产品进行判断
        var prolist = component.get("v.productListAdd");
        var flag  = false;
        var addpro = new Array();
        for(var i = 0 ; i < prolist.length ; i ++ ){
            if(prolist[i].flag){
                flag = true;
                addpro.unshift(prolist[i]);
            }
        }
        if(flag)
            helper.saveDate(component,addpro);
        else
            alert("请选择需要添加的产品");
    },
    cancel : function(component, event, helper){
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    },
    selectAll : function(component, event, helper)
    {
        var flag = event.getSource().get('v.class');
        var info;
        var prolist;
        if(flag == "pro"){
            info = "box";
            prolist = component.get("v.productListSerach");
        }else
        {
            info = "box1";
            prolist = component.get("v.productListAdd");
        }
        if(prolist.length > 0)
        {
            //获取标题复选框的值
            var selectedHeaderCheck = event.getSource().get("v.value");
            //使用“box ”aura id获取表格上的所有复选框(所有迭代值都具有相同的ID)
            //返回所有复选框元素的列表
            var getAllId = component.find(info);
            //alert(getAllId);
            //如果本地ID是唯一的(在单个记录的情况下),find()返回组件,不是数组
            if(!Array.isArray(getAllId)){
                if(selectedHeaderCheck == true)
                    component.find(info).set("v.value", true);
                else
                    component.find(info).set("v.value", false);
            }
            else
            {
                //检查是否选择全部(标题复选框)为真,然后是for循环中的所有表格上的复选框
                //并在selectedCount属性中设置所有选中的复选框长度。
                //如果值为false,则在其他部分中将所有复选框设为false,以便循环播放
                //并选择计数为0
                if(selectedHeaderCheck == true)
                {
                    for(var i = 0; i < getAllId.length; i++) {component.find(info)[i].set("v.value", true);}
                }
                else
                {
                    for (var i = 0; i < getAllId.length; i++) {component.find(info)[i].set("v.value", false);}
                }
            }
        }
    }
})

js Helper

({
     init : function(component) {
        var recordID = component.get("v.recordId")
        var action = component.get("c.initProduct");
        action.setParams({ orderId : recordID});
        action.setCallback(this, function(response) {
            //获取请求返回状态
            var state = response.getState();
            //请求成功
            if (state === "SUCCESS") {
                component.set("v.productListAdd",response.getReturnValue());
                     // 判断是否展示选中的产品块
                if(component.get("v.productListAdd").length > 0)
                    component.set("v.addListFlag", true);
                else
                    component.set("v.addListFlag", false);
            }
            //请求不完整
            else if (state === "INCOMPLETE") {}
            //请求出现错误
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) console.log("Error message: " + errors[0].message);
                }
                else console.log("Unknown error");
            }
        });
        $A.enqueueAction(action);
    },
    serach : function(component,productName,productID) {
        var action = component.get("c.searchProducts");
        action.setParams({ productName : productName,
                           productId : productID
                         });
        action.setCallback(this, function(response) {
            //获取请求返回状态
            var state = response.getState();
            //请求成功
            if (state === "SUCCESS") {
                // 过滤重复的元素
                component.set("v.productListSerach",response.getReturnValue());

            }
            //请求不完整
            else if (state === "INCOMPLETE") {}
            //请求出现错误
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) console.log("Error message: " + errors[0].message);
                }
                else console.log("Unknown error");
            }
        });
        $A.enqueueAction(action);
    },
    saveDate : function(component,addpro){
        var action = component.get("c.saveProducts");
        action.setParams({ innerList : JSON.stringify(addpro),
                           orderId : component.get("v.recordId")
                         });
        action.setCallback(this, function(response) {
            //获取请求返回状态
            var state = response.getState();
            //请求成功
            if (state === "SUCCESS") {
                alert("添加成功!");
                window.location.reload("one.app#/sObject/"+component.get("v.recordId")+"/view");
            }
            //请求不完整
            else if (state === "INCOMPLETE") {}
            //请求出现错误
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) console.log("Error message: " + errors[0].message);
                }
                else console.log("Unknown error");
            }
        });
        $A.enqueueAction(action);
    },
    // 开启waiting
    showSpinner : function(component){
        component.set("v.toggleSpinner", true); 
    },
    // 关闭waiting
    hideSpinner : function(component){
        component.set("v.toggleSpinner", false);
    }
})

服务端 Controller

/*
    *Author:Alan Li
    *Date:2018-08-10
    *Function:
    *1、添加订单产品

*/ 
public with sharing class AP_OrderItems {
    public class ProductInner
    {
        @AuraEnabled
        public Product__c product;
        @AuraEnabled
        public Boolean flag;
        @AuraEnabled
        public Integer num;//数量
        @AuraEnabled
        public Decimal Price;//折后价格
    }
    // 初始化
    @AuraEnabled
    public static ProductInner[] initProduct(String orderId)
    {
        ProductInner[] innerList = new ProductInner[]{};
        Order__c order  = [Select Id,(select Id,Product__c from Order_Product__r) from Order__c where Id =: orderId];
        if(order.Order_Product__r.size() > 0){
            Map<Id,Product__c> proMap = new Map<Id,Product__c>();
            Set<Id> idSet = new Set<Id>();
            for(OrderProducts__c orderProduct : order.Order_Product__r){
                idSet.add(orderProduct.Product__c);
            }
            for(Product__c pro : [Select Id,Name,Product_Code__c  from Product__c where id in: idSet]){
                proMap.put(pro.Id,pro);
            }
            System.debug('proMap==='+proMap);
            for(OrderProducts__c orderProduct : order.Order_Product__r){
                System.debug('proMap33==='+orderProduct.Product__c);
                System.debug(proMap.get(orderProduct.Product__c));
                ProductInner productInner = new ProductInner();
                productInner.product =proMap.get(orderProduct.Product__c);
                productInner.flag = false;
                productInner.num = 0;
                productInner.Price = 0;
                innerList.add(productInner);
            }
            System.debug('innerList==='+innerList);
        }
        return innerList;
    }
    // 搜索产品
    @AuraEnabled
    public static ProductInner[] searchProducts(String productName, String productId)
    {

        List<Product__c> productList = new List<Product__c>();
        String sql = 'SELECT Id,Name,Product_Code__c FROM Product__c where CreatedDate != null ';
        if(productName != null && productName != '')
        {
            sql += 'and Name  like \'%' + productName + '%\'';
        }
        if(productId != null && productId != '')
        {
            sql += 'and Product_Code__c =\'' + productId + '\'';
        }

        productList = Database.query(sql);
        ProductInner[] innerList = new ProductInner[]{};
        for(Product__c product : productList)
        {   
            ProductInner productInner = new ProductInner();
            productInner.product = product;
            productInner.flag = false;
            productInner.num = 0;
            productInner.Price = 0;
            innerList.add(productInner);        
        }
        return innerList;
    }
    // 保存
    @AuraEnabled
    public static void saveProducts(String innerList, String orderId)
    {
        Order__c order  = [Select Id from Order__c where Id =: orderId];
        AP_OrderItems.ProductInner[] jsonApex = (AP_OrderItems.ProductInner[])JSON.deserialize(EncodingUtil.urlDecode(innerList,'utf_8'),AP_OrderItems.ProductInner[].class);
        List<OrderProducts__c> orderProductList = new List<OrderProducts__c>();
        for(ProductInner innerPro : jsonApex){
            OrderProducts__c orderProduct = new OrderProducts__c();
            orderProduct.Product__c = innerPro.product.Id;
            orderProduct.Order__c = order.Id;
            orderProductList.add(orderProduct);
        }
        insert orderProductList;
    }
}

涉及对象:

  1. 订单对象
    这里写图片描述
  2. 订单产品
    这里写图片描述

  3. 产品
    这里写图片描述

实现效果:

这里写图片描述

这里写图片描述

总结:这个一个简单的Demo页面,UI没经过涉及的简版,并且功能上也是比较简单的,只是实现了批量添加订单产品的一个功能。
Tips:
1,未使用自定义事件
2,一些细节的逻辑未经过处理,还是存在BUG

版权声明:本文为weixin_42716960原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42716960/article/details/81502826

智能推荐

剑指offer 合并两个排序的链表

题目 链接:https://leetcode-cn.com/problems/he-bing-liang-ge-pai-xu-de-lian-biao-lcof/ 思路 我想的是,与合并两个有序数组一样的思维,新建一个链表,然后判断谁的值大,进而在新的链表上面进行插入。 看书思路 合并链表是一个递归问题:合并一个节点后可以转化为一个子问题。终止条件是其中一个链表为空 代码 链表反转也可以用递归解决...

Java编程思想 第三章:操作符

Java中的操作符和c/c++中的操作符基本一致,因为我之前学习过C语言和C++,所以本章的内容大部分都已熟知,下面只做简单的介绍。 Java操作符及优先级 Java中的操作符包括算术操作符,关系操作符,逻辑操作符,位运算符、自操作运算符、移位运算符、赋值运算符和其他运算符。 算术操作符:包括加减乘除和取余(%),优先级乘除取余高于加减,都是双元运算符,其中加法(+)可以用来连接两个字符串,比如:...

JetBrains 系列开发工具,如何配置 `SCSS` `File Watcher` ,相关输出配置参数详解:webStorm phpStorm IDEA

JetBrains 系列开发工具,如何配置 SCSS File Watcher ,相关输出配置参数详解:webStorm phpStorm IDEA 前言 你目前已经了解了如何使用 SCSS 进行开发,了解了该文章的内容:『 SCSS 日常用法 』 在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 Fil...

C语言小函数—二进制与十六进制

测试如下 “` int main() { long int num = 15; } “`...

仿微博或微信的文章多图显示(自定义MultiImageView)

按照一般的规矩,先上张图来供大伙看看 如果大致是大伙们需要实现的功能,不烦一观 自定义MultiImageView 工具类 具体使用 app.gradle中添加依赖 implementation 'com.github.bumptech.glide:glide:4.8.0' AndroidManifest.xml中配置联网权限 <uses-permission android:name=&q...

猜你喜欢

经典进程同步和互斥问题

经典进程同步与互斥问题 前言 一、生产者-消费者问题 1.问题描述 2.问题分析 3.代码 二、读者-写者问题 1.问题描述&&分析 2.代码 三、哲学家进餐问题 1.问题描述&&分析 2.代码 四、理发师问题 1.问题描述&&分析 2.代码 前言 在多道程序设计环境中,进程同步是一个非常重要的问题,下面讨论几个经典的进程同步问题。 一、生产者-消费...

java设计模式——ThreadLocal线程单例

1、定义一个ThreadLocal线程单例,代码如下: 2、定义一个多线程类,代码如下: 3、定义一个测试类,代码如下: 4、输出结果,如下图:...

【tensorflow】线性模型实战

线性模型:y = 1.477 * x + 0.089   1. 采样数据 采样噪声eps在均值0,方差0.01的高斯分布中,而后在均匀分布U(0,1)中,区间[-10,10]进行n=100次随机采样:   2. 计算误差 循环计算每个点的预测值与真是值之间差的平方并累加,从而获得训练集上的均芳误差损失值。   3. 计算梯度   4. 梯度更新 对权重w和偏...

常见损失函数和评价指标总结(附公式&代码)

网上看到一篇很实用的帖子关于常见损失函数和评价指标,收藏下来 本文转载于https://zhuanlan.zhihu.com/p/91511706 ------------------------------------------------------------------------------------------------------------------------------...

为什么 4G/5G 的直播延时依然很高

通信技术的发展促进了视频点播和直播业务的兴起,4G 和 5G 网络技术的进步也使得流媒体技术变得越来越重要,但是网络技术并不能解决流媒体直播的高延迟问题。 本文不会介绍网络对直播业务的影响,而是会分析直播中常见的现象 — 主播和观众之间能够感觉到的明显网络延迟。除了业务上要求的延迟直播之外,有哪些因素会导致视频直播的延迟这么高呢? live-streaming  图 1 - ...