<template>
|
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
|
<div class="slds-modal__container">
|
<!-- modal header start -->
|
<header class="slds-modal__header">
|
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
|
<lightning-icon icon-name="utility:close"
|
alternative-text="close"
|
variant="inverse"
|
size="small" ></lightning-icon>
|
<span class="slds-assistive-text">Close</span>
|
</button>
|
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">消耗品明细</h2>
|
</header>
|
|
<!-- modal body start -->
|
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
|
<lightning-datatable key-field="Id" data={data} columns={columns} hide-checkbox-column>
|
</lightning-datatable>
|
</div>
|
|
<!-- modal footer start-->
|
<footer class="slds-modal__footer">
|
<button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button>
|
</footer>
|
|
</div>
|
</section>
|
<div class="slds-backdrop slds-backdrop_open"></div>
|
</template>
|