<template> 
 | 
    <template if:true={showSpinner}> 
 | 
        <!-- <lightning-spinner size="medium" variant="brand"></lightning-spinner> --> 
 | 
        <div class="slds-spinner_container"> 
 | 
            <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand"> 
 | 
                <span class="slds-assistive-text">Loading</span> 
 | 
                <div class="slds-spinner__dot-a"></div> 
 | 
                <div class="slds-spinner__dot-b"></div> 
 | 
            </div> 
 | 
        </div> 
 | 
    </template> 
 | 
    <c-common-toast></c-common-toast> 
 | 
    <template if:true={showPage}> 
 | 
        <div style="border: 1px solid #D4D4D4;border-top: 3px solid #51606E;border-radius:5px;"> 
 | 
            <div style="padding:10px;"> 
 | 
                <!-- 按钮 --> 
 | 
                <!-- <lightning-button style="margin: 5px;" label="协议订货" onclick={agreementorder}></lightning-button> --> 
 | 
                <button class="slds-button slds-button_neutral slds-button_stretch lexBorder" style="margin-right: 150px;" onclick={agreementorder}>协议订货</button> 
 | 
                <template if:true={showHop}> 
 | 
                    <!-- <lightning-button style="margin: 5px;" label="医院特价" onclick={hospitalorder}></lightning-button> --> 
 | 
                    <button class="slds-button slds-button_neutral slds-button_stretch lexBorder" style="margin-right: 150px;" onclick={hospitalorder}>医院特价</button> 
 | 
                </template> 
 | 
                <template if:true={hasSpecial}> 
 | 
                    <!-- <lightning-button style="margin: 5px;" label="促销订货" onclick={promotionorder}></lightning-button> --> 
 | 
                    <button class="slds-button slds-button_neutral slds-button_stretch lexBorder" onclick={promotionorder}>促销订货</button> 
 | 
                </template> 
 | 
                <p style="height: 10px;"></p> 
 | 
                <!-- 搜索 --> 
 | 
                <div style="border: 1px solid #D4D4D4;border-top: 3px solid #51606E;border-radius:5px;margin-bottom:7px;"> 
 | 
                    <div style="border-bottom: 1px solid #D4D4D4;padding:3px;"> 
 | 
                        <lightning-layout> 
 | 
                            <lightning-layout-item padding="around-small"> 
 | 
                                <p style="font-size: 18px"> 
 | 
                                    <strong>检索条件</strong> 
 | 
                                </p> 
 | 
                            </lightning-layout-item> 
 | 
                        </lightning-layout> 
 | 
                        <!-- <p style="font-size: 16px;"><strong>检索条件</strong></p> --> 
 | 
                    </div> 
 | 
                    <div style="padding:10px;"> 
 | 
                        <table> 
 | 
                            <tbody> 
 | 
                                <tr> 
 | 
                                    <td style="width:10px;"></td> 
 | 
                                    <td style="width:122px;"> 
 | 
                                        <div style="color:#696969;font-size:16px;">消耗品订单名称</div> 
 | 
                                    </td> 
 | 
                                    <td > 
 | 
                                        <lightning-input class="inputFont" type="text" label="消耗品订单名称" value={category1} variant="label-hidden" onchange={category1Change}></lightning-input> 
 | 
                                    </td> 
 | 
                                    <td style="width:30px;"></td> 
 | 
                                    <td style="width: 74px;"> 
 | 
                                        <div style="color:#696969;font-size:16px;">订单日期</div> 
 | 
                                    </td> 
 | 
                                    <td > 
 | 
                                        <lightning-input class="inputFont" type="date" name="orderDate" value={orderDate} label="订单日期" variant="label-hidden"  onchange={orderDateChange}></lightning-input> 
 | 
                                    </td> 
 | 
                                    <td style="width:30px;"></td> 
 | 
                                    <td style="width: 74px;"> 
 | 
                                        <div style="color:#696969;font-size:16px;">订单状态</div> 
 | 
                                    </td> 
 | 
                                    <td style="width: 250px;"> 
 | 
                                        <lightning-combobox class="inputFont" name="orderStatus" label="订单状态" value={orderStatus} placeholder="请选择..." options={provinceOpts} variant="label-hidden"  onchange={orderStatusChange}></lightning-combobox> 
 | 
                                    </td> 
 | 
                                </tr> 
 | 
                            </tbody> 
 | 
                        </table> 
 | 
                        <p style="height:10px;"></p> 
 | 
                        <table> 
 | 
                            <tbody> 
 | 
                                <tr> 
 | 
                                    <td></td> 
 | 
                                    <td style="width:325px;"> 
 | 
                                        <button class="slds-button slds-button_neutral slds-button_stretch lexsearchStyle" style="margin-right: 20px;height:32px;width: 150px;" onclick={searchProduct}>搜索</button> 
 | 
                                        <button class="slds-button slds-button_neutral slds-button_stretch lexclearStyle" style="height:32px;width: 150px;" onclick={clear}>清空</button> 
 | 
                                    </td> 
 | 
                                </tr> 
 | 
                            </tbody> 
 | 
                        </table> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <!-- 订货明细 --> 
 | 
                <div style="border: 1px solid #D4D4D4;border-top: 3px solid #51606E;border-radius:5px;margin-bottom:7px;"> 
 | 
                    <div style="border-bottom: 1px solid #D4D4D4;padding:3px;"> 
 | 
                        <lightning-layout> 
 | 
                            <lightning-layout-item padding="around-small"> 
 | 
                                <p style="font-size: 18px"> 
 | 
                                    <strong>订货明细</strong> 
 | 
                                </p> 
 | 
                            </lightning-layout-item> 
 | 
                        </lightning-layout> 
 | 
                        <!-- <p style="font-size: 16px;"><strong>订货明细</strong></p> --> 
 | 
                    </div> 
 | 
                    <div style="padding:10px;"> 
 | 
                        <div class="table-container"> 
 | 
                            <lightning-datatable class="wrapped-header-datatable" key-field="id" hide-checkbox-column="true" data={raesList} columns={cols}></lightning-datatable> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
    </template> 
 | 
</template> 
 |