Salesforce Lightning 项目实例页面

使用Lightning Aura 画页面

效果图如下👇




cmp代码如下👇

<aura:component controller="SalesOrderShowPageController"
    implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:searchInterface,lightning:actionOverride,lightning:hasPageReference,flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId,force:lightningQuickActionWithoutHeader"
    access="global">
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:attribute name="data" type="Object" />
    <aura:attribute name="showErrorClassQuantity" type="boolean" default="false" description="数量输入错误提示" />
    <aura:attribute name="IsRefresh" type="Boolean" default="false" />
    <aura:attribute name="errorMessage" type="String" />
    <aura:if isTrue="{!v.IsCssView}">
        <aura:html tag="style">
            .slds-backdrop {
            background: rgba(43, 40, 38, 0) !important;
            }
            .backgroundSpinner{
            background: rgba(0, 0, 0, 0) !important;
            }
            .modal-body {
            background: rgba(0, 0, 0, 0) !important;
            box-shadow: none !important;
            }
            .closeIcon {
            display:none !important;
            }
            .desktop {
            overflow: visible !important;
            }
        </aura:html>
    </aura:if>
    <aura:if isTrue="{!v.IsButtonView}">
        <aura:html tag="style">
            .slds-p-around--medium {
            padding: 0rem !important;
            }
            .slds-th__action {
            display: flex;
            padding: .25rem .5rem;
            height: 2rem;
            align-items: center;
            justify-content: center;
            }
            .slds-brand-band {
            display: flex;
            flex-direction: column;
            position: relative;
            height: 100%;
            width: 100%;
            }
        </aura:html>
        <div class="slds-col modal-body scrollable slds-p-around--medium" style="height: 100vh; max-height: 100%;">

            <lightning:card title="XXXX" iconName="standard:work_order">
                <aura:set attribute="actions">
                    <lightning:button iconName="utility:hide" variant="brand" iconPosition="left" label="显示/隐藏订单信息"
                        onclick="{!c.showQuery_btn}" />
                    <lightning:button label="返回" variant="brand" iconName="utility:back" iconPosition="left"
                        onclick="{!c.return_btn}" />
                </aura:set>

                <lightning:card aura:id="isShow">
                    <lightning:recordEditForm objectApiName="SalesOrder__c">
                        <!-- <lightning:messages /> -->
                        <div
                            class="test-id__section slds-section slds-is-open full forcePageBlockSection forcePageBlockSectionEdit">
                            <div class="test-id__section-content slds-section__content section__content"
                                id="{!GlobalId + '-Headarea'}">
                                <div class="slds-form form-horizontal slds-is-editing">
                                    <div class="slds-grid slds-gutters_small full cols-2 forcePageBlockSectionRow">
                                        <div
                                            class="slds-grid slds-col slds-is-editing slds-has-flexi-truncate full forcePageBlockItem forcePageBlockItemEdit">
                                            <lightning:inputField fieldName="Customer_Name__c"
                                                value="{}" aura:id="CusCode"
                                                variant="label-stacked" />
                                        </div>
                                        <div
                                            class="slds-grid slds-col slds-is-editing slds-has-flexi-truncate full forcePageBlockItem forcePageBlockItemEdit">
                                            <lightning:input label="单据日期起" type="date" aura:id="MakingTime"
                                                messageWhenTypeMismatch="" />
                                        </div>
                                        <div class="slds-grid slds-col slds-is-editing slds-has-flexi-truncate full forcePageBlockItem forcePageBlockItemEdit"
                                            id="getDom">
                                            <lightning:input label="单据日期迄" type="date" aura:id="MakingTimeEnd" class=""
                                                messageWhenTypeMismatch="" />
                                        </div>
                                        {!v.errorMessage}
                                        
                                        <div
                                            class="slds-grid slds-col slds-is-editing slds-has-flexi-truncate full forcePageBlockItem forcePageBlockItemEdit">
                                            <lightning:input label="xx" aura:id="ReleaseNoteNo" />
                                        </div>
                                         
                                        <div
                                            class="slds-grid slds-col slds-is-editing slds-has-flexi-truncate full forcePageBlockItem forcePageBlockItemEdit">
                                            <lightning:select name="select" label="XXX类型" required="true"
                                                aura:id="releaseTypeSelect">
                                                <aura:iteration items="{}" var="type">
                                                    <option text="{!type}" />
                                                </aura:iteration>
                                            </lightning:select>
                                        </div>
                                        <div
                                            class="slds-grid slds-col slds-is-editing slds-has-flexi-truncate full forcePageBlockItem forcePageBlockItemEdit">
                                            <div style="color: red;">注意：<br />
                                              XXXX
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="text-align: left; padding-left: 17px;">
                            <lightning:button label="查询" iconName="utility:search" iconPosition="left"
                                onclick="{!c.query_btn}" />
                            <lightning:button label="多条添加" iconName="utility:add" iconPosition="left"
                                onclick="{!c.chooseSales}" />
                        </div><br />
                    </lightning:recordEditForm>
                    <div class="slds-scrollable" style="width: 100%;height: 40vh; overflow: scroll;"
                        id="{!GlobalId + '-TEXTarea'}">
                        <!---->
                        <table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_edit
                             slds-table_resizable-cols slds-no-cell-focus slds-table_fixed-layout" style="width: 165%;"
                            role="grid">
                            <thead>
                                <tr class="slds-line-height_reset"
                                    style="position: -webkit-sticky; position: sticky;top: 10px;">
                                    <th width="3%;" height="30px;" class="" scope="col">
                                        <span class="slds-assistive-text" title="Errors">Errors</span>
                                    </th>
                                    <th width="3%;" class="slds-text-align_center" scope="col" style="width:2rem">
                                        <span class="slds-truncate slds-th__action slds-th__action_form">
                                            <ui:inputCheckbox aura:id="check" change="{!c.checkAll_btn}"
                                                class="check" />
                                        </span>
                                    </th>
                                    <th width="3%;" height="30px;" class="slds-text-align_center" scope="col">
                                        <span class="slds-th__action slds-th__action_form">操作
                                        </span>
                                    </th>
                                    <th width="10%;" height="30px;"
                                        class="slds-text-align_center slds-is-sortable slds-is-sorted slds-is-sorted_desc"
                                        scope="col" aria-sort="descending">
                                        <span class="" title="xx">日期</span>
                                    </th>
                                    <th width="15%;" height="30px;" class="slds-text-align_center" scope="col">
                                        <span class="" title="xx">XX</span>
                                    </th>
                                    <th width="14%;" height="30px;" class="slds-text-align_center" scope="col">
                                        <span class="" title="xx">XX</span>