天天看点

salesforce Lightning - Lightning Demo实例

salesforce Lightning 批量操作,及分页

前段时间简单整理了一下,使用lightning的开发方式做一个批量添加产品的功能。近期我又去对这个功能点增加了一些逻辑,比如分页,批量操作等。

总体来说还是一个批量添加产品的功能吧。

Tips:

  1. 使用按钮弹出的页面,是不能使用标准的那种提示的,这是一个saleforce 团队的 一个已知bug
  2. 使用css样式调节弹出页面的宽度,是不能够放到css中写的,这个目前不知道什么原因导致的,只能放到comment中写样式。
  3. 如果将样式写在comment中,那么对于comment的版本是有要求的,目前我使用的是41.0版本的。

这此首先做一个Demo的展示效果给大家:

salesforce Lightning - Lightning Demo实例

这次我们换了两个对象去使用,一个是使用的Contract,另外一个使用的是自定义的Product。 因为项目搭建Demo的时候突然变了。。。。所以可能代码中有些变量的命名还是没换过来,不过应该不影响阅读。

先贴代码如下:

comment:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasSObjectName,force:hasRecordId" controller="AP_ContractItems">
    <style>
        .slds-modal__container {
             max-width: rem !important;
             width:% !important;
        }
    </style>
    <!--初始化方法-->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="IsRefresh" type="Boolean" default="false"/> 
    <aura:attribute name="IsSpinner" type="Boolean" default="false"/>
    <aura:attribute name="recordId" type="String" description="获取当前记录id"/>
    <!-- 选中的添加产品的数量 -->
    <aura:attribute name="orderProductList" type="List" description="合同产品List"/>
    <aura:attribute name="ProductList" type="List" description="产品list"/>
    <aura:attribute name="SearchKeyWord" type="string" description="搜索关键字参数"/>
    <aura:attribute name="Total_Amount" type="Double" description="选中产品的总价格"/>


     <!-- 分页参数 -->
    <aura:attribute name="page" type="integer" description="当前页码"/>
    <aura:attribute name="pages" type="integer" description="页码总数"/>
    <aura:attribute name="total" type="integer" description="分页记录总数"/>
    <aura:attribute name="pagesize" type="integer" description="每页记录数"/>
    <!-- 排序参数 -->
    <aura:attribute name="arrowDirection" type="string" default="arrowup" description="标题上的箭头符号方向"/>
    <aura:attribute name="isAsc" type="boolean" default="true" description="用于排序条件传递到Apex类的布尔标志"/> 
    <aura:attribute name="selectedTabsoft" type="string" default="Core__c" description="在哪个字段的标题上显示/隐藏箭头标志"/>
    <!--页面加载动画Loading 覆盖全屏 class="slds-spinner_container"-->
    <aura:if isTrue="{!v.IsSpinner}">
       <lightning:spinner variant="brand"  size="large" />
    </aura:if>

    <!-- 卡片 title卡片头部显示信息  iconName显示图标  footer 卡片底部显示信息-->
    <lightning:card title="批量添加合同产品" iconName="standard:work_order" >
        <aura:set attribute="actions">
            <lightning:button variant="brand" label="添加" iconName="action:new" iconPosition="left" onclick="{!c.doSave}" />
            <lightning:button variant="brand" label="删除" iconName="action:reject" iconPosition="left" onclick="{!c.doDel}" />
            <lightning:button variant="brand" label="保存" iconName="action:approval" iconPosition="left" onclick="{!c.dosaveAll}" />
        </aura:set>
      <!--   <p class="slds-p-horizontal_small">
            <lightning:badge label="产品检索" />
        </p> -->
        <p class="slds-p-horizontal_small">
            <!-- 将查询图标放到输入框里 使用下面这两个样式-->
            <div class="slds-input-has-icon slds-input-has-icon--right" style="width: 300px;">
                <div class="slds-show">
                    <ui:inputText blur="{!c.SearchProduct}" class="slds-lookup__search-input slds-input leftPaddingClass" value="{!v.SearchKeyWord}" placeholder="Search Products"/>
                </div>
                <a href="javascript:void(0);" onclick="{!c.SearchProduct}">
                    <lightning:icon class="slds-input__icon slds-show" iconName="utility:search" size="x-small" alternativeText="search"/> 
                </a>
            </div>
        </p><br/>

        <p class="slds-p-horizontal_small">
            <!-- 创建table的tr -->
            <div class="slds-table_edit_container slds-is-relative">
                <table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout slds-no-cell-focus slds-table_edit" role="grid">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th scope="col" style="width: 5%;">
                                <div class="slds-th__action slds-th__action_form">
                                    <ui:inputCheckbox aura:id="pro"  change="{!c.selectAll}" class="pro"/>
                                </div>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Account Name" scope="col" style="width: 10%;">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">序号</span>
                                </a>
                            </th> 
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Account Name" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品名称</span>
                                </a>
                            </th>                                                 
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Stage" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品系列</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Stage" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品型号</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Confidence" scope="col" onclick="{!c.sortProduct}">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">内核</span>
                                    <!-- &#9660 是网页特殊符号  向下箭头 -->
                                    <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Core__c') }">&nbsp; &#9660;</aura:if>  
                                    <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Core__c') }"> &nbsp; &#9650;</aura:if>
                                </a>
                            </th>
                        </tr>
                    </thead>
                     <!-- 循环table的td -->
                    <tbody>
                        <!-- aura:iteration 页面循环 -->
                        <aura:iteration items="{!v.ProductList}" var="obj" indexVar="sNo">
                            <tr class="slds-hint-parent">
                                <td class="slds-cell-edit" role="gridcell">
                                    <!-- 这里注意当前版本 lightning标准的复选框 后台拿不到值 -->
                                    <ui:inputCheckbox aura:id="productbox" value="{!obj.flag}" change="{!c.checkboxSelect}"/>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">  
                                        <span class="slds-truncate">{!sNo + 1}</span>
                                    </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate" title="{!obj.product.Name}">{!obj.product.Name}</span>
                                    </span>
                                </td>
                                 <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">{!obj.product.Product_Series__c}</span>
                                     </span>
                                </td>

                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">{!obj.product.Product_Model__c}</span>
                                     </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">{!obj.product.Core__c}</span>
                                     </span>
                                </td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                    <tfoot class="slds-card__footer">
                        <tr>
                            <td colspan="6">
                                <div class="slds-truncate" style="text-align: center;">
                                    记录总数:{!v.total}&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button disabled="{!v.page == 1}"  text="首页" onclick="{!c.HomeLastNavigate}" class="slds-button">首页</button>
                                    <button disabled="{!v.page == 1}"  text="上一页" onclick="{!c.navigate}" class="slds-button">上一页</button>
                                    <button aura:id="previousPage" disabled="{!v.page == v.pages}"  text="下一页" onclick="{!c.navigate}" class="slds-button">下一页</button>
                                    <button disabled="{!v.page == v.pages}"  text="尾页" onclick="{!c.HomeLastNavigate}" class="slds-button">尾页</button>
                                    &nbsp;&nbsp;&nbsp;&nbsp; 第{!v.page} / {!v.pages}页
                                </div>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </p>
        </lightning:card>
        <lightning:card title="已选合同产品" footer="{!'总金额:' + v.Total_Amount}">
        <p class="slds-p-horizontal_small">
            <!-- 创建table的tr -->
            <div class="slds-table_edit_container slds-is-relative">
                <table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout slds-no-cell-focus slds-table_edit" role="grid">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th scope="col" style="width: 5%;">
                                <div class="slds-th__action slds-th__action_form">
                                    <ui:inputCheckbox aura:id="proSelect"  change="{!c.selectAll}" class="proSelect"/>
                                </div>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Account Name" scope="col" style="width: 10%;">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">序号</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Account Name" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品名称</span>
                                </a>
                            </th>                                                 
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Stage" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品系列</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Stage" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品型号</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Contact" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">总价</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Confidence" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">产品单价</span>
                                </a>
                            </th>
                            <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" aria-label="Contact" scope="col">
                                <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">
                                    <span class="slds-truncate">数量</span>
                                </a>
                            </th>
                        </tr>
                    </thead>
                    <!-- 循环table的td -->
                    <tbody>
                        <!-- aura:iteration 页面循环  indexVar属性为自动编号-->
                        <aura:iteration items="{!v.orderProductList}" var="obj" indexVar="sNo">
                            <tr class="slds-hint-parent">
                                <td class="slds-cell-edit" role="gridcell">
                                    <!-- 这里注意当前版本 lightning标准的复选框 后台拿不到值 -->
                                    <ui:inputCheckbox aura:id="proSelectBox" value="{!obj.flag}"  change="{!c.summary}"/>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">{!sNo + 1}</span>
                                    </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate" title="{!obj.pro.Name}">{!obj.pro.Name}</span>
                                    </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">{!obj.pro.Product_Series__c}</span>
                                    </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">{!obj.pro.Product_Model__c}</span>
                                     </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">
                                            <ui:outputNumber value="{!obj.total}"/>
                                        </span>
                                     </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">
                                            <ui:inputNumber updateOn="{!obj.pro.Id+'_Price'}" value="{!obj.price}" change="{!c.calculate}"/>
                                        </span>
                                     </span>
                                </td>
                                <td class="slds-cell-edit" role="gridcell">
                                    <span class="slds-grid slds-grid_align-spread">
                                        <span class="slds-truncate">
                                            <ui:inputNumber updateOn="{!obj.pro.Id+'_Num'}"  value="{!obj.num}" change="{!c.calculate}"/>
                                        </span>
                                     </span>
                                </td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
            </div>
        </p>
    </lightning:card>
</aura:component>
           

controler.js 代码如下:

({
     doInit : function(component, event, helper) {
        component.set("v.IsSpinner",true);
        helper.init(component);
    },
     //上一页下一页
    navigate: function(component, event, helper)
    {
        component.set("v.IsSpinner",true);
        var page = component.get("v.page") ||;
        var fieldName = component.get("v.selectedTabsoft");
        var direction = event.target.innerText;
        page = direction === "上一页" ? (page -) : (page +);
        helper.LoadingProduct(component, page, fieldName);
    },

    //首页尾页
    HomeLastNavigate: function(component, event, helper)
    {   
        component.set("v.IsSpinner",true);     
        var direction = event.target.innerText;
        var page = direction === "首页" ? : component.get("v.pages");
        var fieldName = component.get("v.selectedTabsoft");
        helper.LoadingProduct(component, page ,fieldName);
    },

    //搜索产品
    SearchProduct: function(component, event, helper)
    {
        var page = component.get("v.page");
        var fieldName = component.get("v.selectedTabsoft");
        component.set("v.IsSpinner",true);
        helper.LoadingProduct(component,page,fieldName);
    },
    //排序
    sortProduct: function(component, event, helper) 
    {
       component.set("v.IsSpinner",true);
       //给前台哪个字段排序参数赋值   
       component.set("v.selectedTabsoft",'Core__c');
       //将要给哪个字段排序 传给helper中
       helper.sort(component,event,'Core__c');
    },
     //全选方法
    selectAll : function(component, event, helper)
    {
        var flag = event.getSource().get('v.class');
        var info;
        var Templist;
        if(flag == "pro"){
            info = "productbox";
            Templist = component.get("v.ProductList");
        }else{
            info = "proSelectBox";
            Templist = component.get("v.orderProductList");
        }
        if(Templist.length >)
        {
            //获取标题复选框的值
            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); //component.set("v.selectedCount",); } else { component.find(info).set("v.value", false); //component.set("v.selectedCount",); } }
            else
            { //检查是否选择全部(标题复选框)为真,然后是for循环中的所有表格上的复选框 //并在selectedCount属性中设置所有选中的复选框长度。 //如果值为false,则在其他部分中将所有复选框设为false,以便循环播放 //并选择计数为0 if(selectedHeaderCheck == true) { for(var i =; i < getAllId.length; i++) { component.find(info)[i].set("v.value", true); //component.set("v.selectedCount", getAllId.length); } } else { for (var i =; i < getAllId.length; i++) { component.find(info)[i].set("v.value", false); //component.set("v.selectedCount",); } } } } }, doSave : function(component, event, helper){ component.set("v.IsSpinner",true); var prolist = component.get("v.ProductList"); var productsAdd = component.get("v.orderProductList"); //打勾的list for(var i = ; i < prolist.length ; i ++ ) { if(prolist[i].flag) { // 判断重复 for(var j = ; j < productsAdd.length ; j ++ ) { if( prolist[i].product.Id == productsAdd[j].pro.Id){ alert( prolist[i].product.Name+" 已经存在,请勿重复添加。"); component.set("v.IsSpinner",false); return; } } } if(prolist[i].flag) { prolist[i].flag = false; var newProduct = new Object(); newProduct.num =; newProduct.flag = false; newProduct.price =; newProduct.total =; newProduct.pro = prolist[i].product; productsAdd.unshift(newProduct); } } component.set("v.orderProductList", productsAdd); component.set("v.IsSpinner",false); }, doDel : function(component, event, helper){ component.set("v.IsSpinner",true); helper.delete(component); }, dosaveAll : function(component, event, helper){ component.set("v.IsSpinner",true); component.set("v.IsRefresh",false); helper.saveAll(component); if(!component.get("v.IsRefresh")){ var sObjectEvent = $A.get("e.force:navigateToSObject"); sObjectEvent.setParams({ "recordId": component.get("v.recordId") }) sObjectEvent.fire(); window.location.reload(); } }, // 计算的方法 calculate : function(component, event, helper){ var input = event.getSource().get('v.updateOn'); var value = event.getSource().get('v.value'); var id = input.split("_")[0]; var datalist = component.get("v.orderProductList");  for(var i = ; i < datalist.length ; i ++ ) { if(datalist[i].pro.Id == id) { if(input.indexOf("_Num") != -1) { datalist[i].total = (value * datalist[i].price).toFixed(4); component.set("v.orderProductList",datalist); helper.doSummary(component); break; }else if(input.indexOf("_Price") != -1) { datalist[i].total = (value * datalist[i].num).toFixed(4); component.set("v.orderProductList",datalist); helper.doSummary(component); break; } } } }, summary : function(component, event, helper){ helper.doSummary(component); } })
           

helper.js 代码如下:

({
     init : function(component) {
        //调用服务器端方法
        var action = component.get("c.searchOrderProduct");
        //给后台方法参数传值
        action.setParam("orderId",component.get("v.recordId"));
        //调用回掉函数
        action.setCallback(this, function(response)
        {
            //定义提示信息
            var toastEvent = $A.get("e.force:showToast");
            var state = response.getState();
            //判断后台返回状态
            if(state == "SUCCESS")
            {
                //获取后台返回的参数
                console.log(JSON.stringify(response.getReturnValue()));  
                component.set("v.orderProductList",response.getReturnValue());
                component.set("v.pagesize",);

                var page = component.get("v.page") || ;
                var fieldName = component.get("v.selectedTabsoft");
                // 调用初始化产品块的方法
                this.LoadingProduct(component,page,fieldName);

                //设置提示信息;
                // alert("数据初始化完成!")
                // SFDC 已知问题,尚未解决。
                /*toastEvent.setParams(
                {
                    "title" : "SUCCESS",
                    "message" : "加载产品完成!",
                    "mode": "sticky",
                    "type" : "SUCCESS"
                });*/
            }
            else
            {
                console.log("=======error======="+response.getError()[].message);
                //设置错误提示信息 
                toastEvent.setParams(
                {
                    "title" : "初始化数据",
                    "message" : "仓库产品加载失败,查看console.log!",
                    "type" : "Error"
                });
            }
            //将提示信息发出 如果不写这句话 将不会有提示信息 这个事件是系统自带事件,Lightning框架会监听这个事件
            toastEvent.fire();
        });
        //从客户端控制器调用服务器端控制器操作
        $A.enqueueAction(action);
    },
    LoadingProduct : function(component,page,fieldName){
       var action = component.get("c.searchProduct");
        /*
            第一个参数:页数
            第二个参数:每页显示的条数
            第三个参数:搜索关键字(默认为空)
            第四个参数:排序的字段名
            第五个参数:布尔类型 true:asc false desc
        */
        action.setParams({

             "pageNumber": page,
             "pagelength" : component.get("v.pagesize"),
             "searchWord": component.get("v.SearchKeyWord"),
             "sortField": fieldName,
             "isAsc": component.get("v.isAsc")
        });
        action.setCallback(this, function(response)
        {
            var toastEvent = $A.get("e.force:showToast");
            var state = response.getState();
            if(state == "SUCCESS")
            {
              /*  toastEvent.setParams(
                {
                    "title" : "SUCCESS",
                    "message" : "加载产品完成!",
                    "type" : "SUCCESS"
                });*/

                var result = response.getReturnValue();
                component.set("v.ProductList",result.ProductInnerList);
                //给分页参数赋值
                component.set("v.page", result.page);
                component.set("v.total", result.total);
                component.set("v.pages", Math.ceil(result.total / component.get("v.pagesize")));
                component.set("v.IsSpinner",false);
            }
            toastEvent.fire();
        });

        $A.enqueueAction(action); 

    },
    //排序方法
    sort: function(component,event,sortFieldName) 
    {  
        var currentDir = component.get("v.arrowDirection");

        if(currentDir == 'arrowdown') 
        {
            //修改箭头方向属性
            component.set("v.arrowDirection", 'arrowup');
            //设置排序属性 
            component.set("v.isAsc", true);
        } 
        else 
        {
            component.set("v.arrowDirection", 'arrowdown');
            component.set("v.isAsc", false);
        }

        //重新调用初始化产品方法
        var page = component.get("v.page") || ;
        this.LoadingProduct(component,page,sortFieldName);
    },
    saveAll : function(component) {
        var productsAdd = component.get("v.orderProductList");
        var flag = false;
        var productsTempAddList = new Array();
        for(var i =  ; i < productsAdd.length ; i ++ )
        {
            if(productsAdd[i].flag)
            {
                flag = true;
                productsTempAddList.unshift(productsAdd[i]);
            }
        }
        if(flag){

            var proListJson = JSON.stringify(productsTempAddList);
            var action = component.get("c.save");
            action.setParams({
                contractId : component.get("v.recordId"),
                jsonStr : proListJson,
            });
            action.setCallback(this, function (response) 
            {
                var state = response.getState();
                //请求成功
                if (state === "SUCCESS") {

                    component.set("v.IsSpinner",false);
                }     
            });
            $A.enqueueAction(action);  
        }else{
            alert("至少选中一行产品进行保存");
            component.set("v.IsRefresh",true);
            component.set("v.IsSpinner",false);
        }
    },
    delete  : function(component) {
        var productsAdd = component.get("v.orderProductList");
        var flag = false;
        var productsTempAddList = new Array();
        for(var i =  ; i < productsAdd.length ; i ++ )
        {
            if(productsAdd[i].flag)
            { 
                flag = true;
            }else{
                productsTempAddList.unshift(productsAdd[i]);
            }
        }
        if(flag){
             component.set("v.orderProductList",productsTempAddList);
             component.set("v.IsSpinner",false);
        }else{
            alert("请选择要删除的产品行");
            component.set("v.IsSpinner",false);
        }
    },
     // 计算的方法
    doSummary : function(component){
        var amount = ;
        // 计算开票金额
        var dataTemplist = component.get("v.orderProductList"); 
        for(var i =  ; i < dataTemplist.length ; i ++ ){
            if(dataTemplist[i].flag){
                amount = (amount + dataTemplist[i].total); 
            }
        }
        component.set("v.Total_Amount",amount);
    }
})
           

服务端代码如下:

public with sharing class AP_ContractItems {
    // 订单产品 
    public class OrderProductInner
    {
        @AuraEnabled
        public Product__c pro{get;set;}
        @AuraEnabled
        public Boolean flag{get;set;}
        @AuraEnabled
        public Decimal total{get;set;}
        @AuraEnabled
        public Decimal price{get;set;}
        @AuraEnabled
        public Decimal num{get;set;}
        public OrderProductInner()
        {
            this.num = ;
            this.price = ;
            this.total = ;
        }
    }
    //产品内部类
    public class ProductInner
    {
        @AuraEnabled
        public Product__c product{get;set;}
        @AuraEnabled
        public Boolean flag{get;set;}
        @AuraEnabled
        public Decimal price{get;set;}
        @AuraEnabled
        public Decimal num{get;set;}

    }
    //分页内部类
    public class PagerWrapper 
    {
        @AuraEnabled 
        public Integer pageSize{get;set;}
        @AuraEnabled 
        public Integer page{get;set;}
        @AuraEnabled 
        public Integer total{get;set;}
        @AuraEnabled 
        public List<ProductInner> ProductInnerList{get;set;}
    }
    @AuraEnabled
    public static OrderProductInner[] searchOrderProduct(String orderId) 
    {
        Map<Id,Product__c> proMap = new Map<Id,Product__c>();
        Set<Id> idSet = new Set<Id>();
        for(ContractProducts__c orderProduct : [SELECT Id,Name,Product__c,Product__r.Name,Product__r.Product_Model__c,Product__r.Product_Code__c,
                                               Product__r.Product_Series__c,Product__r.Core__c 
                                               from ContractProducts__c
                                               Where Contract__c =: orderId])
        {
            idSet.add(orderProduct.Product__c);
        }
        for(Product__c pro : [Select Id,Name,Product_Model__c,Product_Code__c,Product_Series__c,Core__c from Product__c Where Id in: idSet]){
            proMap.put(pro.Id,pro);
        }
        OrderProductInner[] orderProductlist = new OrderProductInner[]{};
        for(ContractProducts__c orderProduct : [SELECT Id,Name,Product__c,Product__r.Name,Product__r.Product_Model__c,Product__r.Product_Code__c,
                                               Product__r.Product_Series__c,Product__r.Core__c,Amount__c,Price__c  
                                               from ContractProducts__c
                                               Where Contract__c =: orderId])
        {
            OrderProductInner orderProductIn = new OrderProductInner();
            orderProductIn.pro = proMap.get(orderProduct.Product__c);
            orderProductIn.num = orderProduct.Amount__c;
            orderProductIn.price = orderProduct.Price__c;
            orderProductIn.total =  orderProduct.Amount__c *  orderProduct.Price__c;
            orderProductIn.flag = false;

            orderProductlist.add(orderProductIn);
        }

        return orderProductlist;
    }

    /*
        初始化查询所有产品
        第一个参数当前页数
        第二个参数每页的个数
        第三个参数搜索关键字
        注意这里不能用Integer,接收不到报错,必须使用Decimal
    */
    @AuraEnabled
    public static PagerWrapper searchProduct(Decimal pageNumber,Decimal pagelength,String searchWord,String sortField,boolean isAsc)
    {
        /*
            pageSize 每页显示多少个
            offset 要跳过多少条数据
        */
        Integer pageSize = (Integer)pagelength;
        Integer offset = ((Integer)pageNumber - ) * pageSize;

        PagerWrapper pw =  new PagerWrapper();
        pw.pageSize = pageSize;
        pw.page = (Integer) pageNumber;


        /*
            拼接搜索参数字符串
        */
        String searchKeyWord = '%%';
        if(searchWord != null)
            searchKeyWord = '%'+searchWord+'%';

        String sql = 'Select Id,Name,Product_Model__c,Product_Code__c,Product_Series__c,Core__c From Product__c ';
        sql += 'Where Name Like \'' + searchKeyWord + '\'';
        if (sortField != '')
            sql += ' Order By ' + sortField;
        if (isAsc)
            sql += ' asc';
        else 
            sql += ' desc';
        sql += ' LIMIT ' + pageSize;
        sql += ' OFFSET ' + offset;

        System.debug(LoggingLevel.DEBUG, '*** size: ' + Database.query(sql));

        ProductInner[] pilist = new ProductInner[]{};
        for(Product__c cp : Database.query(sql))
        {
            ProductInner pi = new ProductInner();
            pi.product = cp;
            pi.flag = false;

            pilist.add(pi);
        } 

        //总数
        pw.total = [SELECT count() FROM Product__c Where Name Like : searchKeyWord];
        pw.ProductInnerList = pilist;

        return pw;
    }
    // 保存的方法
    @AuraEnabled
    public static void save(String contractId,String jsonStr)
    {
        List<ContractProducts__c> productInsert = new List<ContractProducts__c>();

        AP_ContractItems.OrderProductInner[] jsonApex = (AP_ContractItems.OrderProductInner[])JSON.deserialize(EncodingUtil.urlDecode(jsonStr,'utf_8'),AP_ContractItems.OrderProductInner[].class);
        for(AP_ContractItems.OrderProductInner orderProduct : jsonApex)
        {
            ContractProducts__c contractProduct = new ContractProducts__c();
            contractProduct.Contract__c = contractId;
            contractProduct.Product__c = orderProduct.pro.Id;
            contractProduct.Amount__c = orderProduct.num;
            contractProduct.Price__c  = orderProduct.price;
            productInsert.add(contractProduct);
        }
        try{
            insert productInsert;
        }catch(Exception e){
            System.debug(LoggingLevel.DEBUG, '*** Exception: ' + e.getMessage());
        }
    }

}
           

总体上功能可能跟前面的那个添加产品的功能差不太多,但是处理了一些细节的点。算是一个在修修改改就可以使用的一个功能吧。自己记录一下。

继续阅读