| <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> | 
|   <div style="border: 1px solid #d4d4d4; border-radius: 5px"> | 
|     <div | 
|       style=" | 
|         border-top: 3px solid #51606e; | 
|         border-bottom: 1px solid #d4d4d4; | 
|         padding: 3px; | 
|       " | 
|     > | 
|       <!-- <p style="font-size: 18px;"><strong>库存管理</strong></p> --> | 
|       <lightning-layout> | 
|         <lightning-layout-item padding="around-small"> | 
|           <p style="font-size: 18px"> | 
|             <strong>库存管理</strong> | 
|           </p> | 
|         </lightning-layout-item> | 
|       </lightning-layout> | 
|     </div> | 
|     <div style="padding: 10px"> | 
|       <div | 
|         style=" | 
|           border: 1px solid #d4d4d4; | 
|           border-radius: 5px; | 
|           margin-bottom: 7px; | 
|         " | 
|       > | 
|         <div | 
|           style=" | 
|             border-top: 3px solid #51606e; | 
|             border-bottom: 1px solid #d4d4d4; | 
|             padding: 10px; | 
|           " | 
|         > | 
|           <!-- <lightning-button variant="brand" class = 'lexstyle' style="margin:12px;" label="库存盘点" title="库存盘点" | 
|                         onclick={inventoryCount}></lightning-button> | 
|                     <lightning-button variant="brand" class = 'lexstyle' style="margin: 12px;" label="过期库存销存" title="过期库存销存" | 
|                         onclick={handleExpired}></lightning-button> | 
|                     <lightning-button variant="brand" class = 'lexstyle' style="margin: 12px;" label="拆盒" title="拆盒" onclick={removeBox}></lightning-button> | 
|                     <lightning-button variant="brand" class = 'lexstyle' style="margin: 12px;" label="取消拆盒" title="取消拆盒" | 
|                         onclick={cancelremoveBox}></lightning-button> --> | 
|           <button | 
|             style="margin-left: 5px" | 
|             class="slds-button slds-button_neutral slds-button_stretch lexBorder" | 
|             label="库存盘点" | 
|             onclick={inventoryCount} | 
|           > | 
|             库存盘点 | 
|           </button> | 
|           <button | 
|             class="slds-button slds-button_neutral slds-button_stretch lexButtoun" | 
|             label="过期库存销存" | 
|             style="margin-left: 60px" | 
|             onclick={handleExpired} | 
|           > | 
|             过期库存销存 | 
|           </button> | 
|           <button | 
|             class="slds-button slds-button_neutral slds-button_stretch lexButtoun" | 
|             label="拆盒" | 
|             style="margin-left: 60px" | 
|             onclick={removeBox} | 
|           > | 
|             拆盒 | 
|           </button> | 
|           <button | 
|             class="slds-button slds-button_neutral slds-button_stretch lexButtoun" | 
|             label="取消拆盒" | 
|             style="margin-left: 60px" | 
|             onclick={cancelremoveBox} | 
|           > | 
|             取消拆盒 | 
|           </button> | 
|         </div> | 
|       </div> | 
|   | 
|       <div | 
|         style=" | 
|           border: 1px solid #d4d4d4; | 
|           border-radius: 5px; | 
|           margin-bottom: 7px; | 
|           margin-top: 30px; | 
|         " | 
|       > | 
|         <div | 
|           style=" | 
|             border-top: 3px solid #51606e; | 
|             border-bottom: 1px solid #d4d4d4; | 
|             padding: 3px; | 
|             height: 115px; | 
|           " | 
|         > | 
|           <table style="margin-top: 10px"> | 
|             <colgroup> | 
|               <col width="160px" /> | 
|               <col width="100px" /> | 
|               <col width="10px" /> | 
|               <col width="70px" /> | 
|               <col width="100px" /> | 
|               <col width="10px" /> | 
|               <col width="70px" /> | 
|               <col width="100px" /> | 
|               <col width="10px" /> | 
|               <col width="90px" /> | 
|               <col width="100px" /> | 
|               <col width="85px" /> | 
|               <col width="100px" /> | 
|               <col width="10px" /> | 
|               <col width="70px" /> | 
|               <col width="100px" /> | 
|             </colgroup> | 
|             <tbody> | 
|               <tr> | 
|                 <td style="width: 10px"></td> | 
|                 <td style="width: 250px"> | 
|                   <div | 
|                     style="width: 90px; margin-left: 12px" | 
|                     class="searchName" | 
|                   > | 
|                     消耗品名称 | 
|                   </div> | 
|                 </td> | 
|                 <td style="width: 21%"> | 
|                   <lightning-input | 
|                     class="searchName" | 
|                     type="text" | 
|                     name="Name" | 
|                     label="消耗品名称" | 
|                     value={Name} | 
|                     variant="label-hidden" | 
|                     onchange={dataChange} | 
|                     data-field="Name" | 
|                   ></lightning-input> | 
|                 </td> | 
|                 <td style="width: 150px"> | 
|                   <div | 
|                     style="width: 90px; text-align: center" | 
|                     class="searchName" | 
|                   > | 
|                     第3分类 | 
|                   </div> | 
|                 </td> | 
|                 <td style="width: 21%"> | 
|                   <lightning-combobox | 
|                     class="inputFont" | 
|                     style="margin-left: 5px" | 
|                     name="CategoryThree" | 
|                     label="第3分类" | 
|                     value={value} | 
|                     placeholder="请选择..." | 
|                     options={category3Options} | 
|                     variant="label-hidden" | 
|                     data-field="CategoryThree" | 
|                     onchange={dataChange} | 
|                   ></lightning-combobox> | 
|                 </td> | 
|                 <td style="width: 150px"> | 
|                   <div | 
|                     style="width: 90px; text-align: center" | 
|                     class="searchName" | 
|                   > | 
|                     第4分类 | 
|                   </div> | 
|                 </td> | 
|                 <td style="width: 21%"> | 
|                   <lightning-combobox | 
|                     class="inputFont" | 
|                     name="CategoryFour" | 
|                     label="第4分类" | 
|                     value={value} | 
|                     placeholder="请选择..." | 
|                     options={category4Options} | 
|                     variant="label-hidden" | 
|                     data-field="CategoryFour" | 
|                     onchange={dataChange} | 
|                   ></lightning-combobox> | 
|                 </td> | 
|                 <td style="width: 150px"> | 
|                   <div | 
|                     style="width: 90px; text-align: center" | 
|                     class="searchName" | 
|                   > | 
|                     第5分类 | 
|                   </div> | 
|                 </td> | 
|                 <td style="width: 21%"> | 
|                   <lightning-combobox | 
|                     class="inputFont" | 
|                     name="CategoryFive" | 
|                     label="第5分类" | 
|                     value={value} | 
|                     placeholder="请选择..." | 
|                     options={category5Options} | 
|                     variant="label-hidden" | 
|                     data-field="CategoryFive" | 
|                     onchange={dataChange} | 
|                   ></lightning-combobox> | 
|                 </td> | 
|                 <td style="width: 1%"></td> | 
|               </tr> | 
|             </tbody> | 
|           </table> | 
|           <br /> | 
|           <div style="float: right; margin-right: 10px"> | 
|             <button | 
|               class="slds-button slds-button_neutral slds-button_stretch lexsearchStyle" | 
|               label="消耗品搜索" | 
|               onclick={searchOrderDetail} | 
|             > | 
|               消耗品搜索 | 
|             </button> | 
|             <button | 
|               style="margin-left: 10px" | 
|               class="slds-button slds-button_neutral slds-button_stretch lexclearStyle" | 
|               label="清空" | 
|               onclick={clearAll} | 
|             > | 
|               清空 | 
|             </button> | 
|           </div> | 
|         </div> | 
|       </div> | 
|       <div | 
|         style=" | 
|           border: 1px solid #d4d4d4; | 
|           border-radius: 5px; | 
|           margin-bottom: 7px; | 
|         " | 
|       > | 
|         <div | 
|           style=" | 
|             border-top: 3px solid #51606e; | 
|             border-bottom: 1px solid #d4d4d4; | 
|             padding: 3px; | 
|           " | 
|         > | 
|           <!-- <p style="font-size: 16px;"><strong>库存详情</strong></p> --> | 
|           <lightning-layout> | 
|             <lightning-layout-item padding="around-small"> | 
|               <p style="font-size: 18px"> | 
|                 <strong>库存详情</strong> | 
|               </p> | 
|             </lightning-layout-item> | 
|           </lightning-layout> | 
|         </div> | 
|         <div style="padding: 10px"> | 
|           <template if:true={showTable}> | 
|             <c-lex-custom-lightning-datatable | 
|               key-field="id" | 
|               data={data} | 
|               columns={columns} | 
|               default-sort-direction={defaultSortDirection} | 
|               sorted-direction={sortDirection} | 
|               sorted-by={sortedBy} | 
|               onsort={onHandleSort} | 
|               hide-checkbox-column={hidecheckboxcolumn} | 
|               class="wrapped-header-datatable" | 
|             > | 
|             </c-lex-custom-lightning-datatable> | 
|           </template> | 
|           <c-paginator | 
|             onprevious={handlePrevious} | 
|             onnext={handleNext} | 
|             onpageschange={handlePageschange} | 
|             onfirst={handleFirst} | 
|             onlast={handleLast} | 
|             page-size-options={pageSizeOptions} | 
|             previous-button-disabled={previousButtonDisabled} | 
|             next-button-disabled={nextButtonDisabled} | 
|             record-start={recordStart} | 
|             record-end={recordEnd} | 
|             total-records={totalRecords} | 
|           ></c-paginator> | 
|         </div> | 
|       </div> | 
|     </div> | 
|   </div> | 
| </template> |