<template>
|
<template if:true={showSpinner}>
|
<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>
|
<!-- 正常申请 -->
|
<template if:false={showImportSection}>
|
<!-- 按产品明细申请 -->
|
<template if:true={showProductDetailSection}>
|
<div style="border: 1px solid #d4d4d4;border-radius: 5px;background-color: white;">
|
<!-- search -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="padding: 10px">
|
<table>
|
<tr style="font-size: 14px;">
|
<td align="right"></td>
|
<td align="right">管理编码：</td>
|
<td style="text-align:left; width:70px;" colspan = "2">
|
<lightning-formatted-text value={manageCode}></lightning-formatted-text>
|
</td>
|
<td align="right">经销商名称：</td>
|
<td style="text-align:left; width:70px;" colspan = "3">
|
<lightning-formatted-text value={agencyName}></lightning-formatted-text>
|
</td>
|
<td align="right">经销商合同：</td>
|
<td style="text-align:left; width:70px;" colspan = "4">
|
<lightning-formatted-text value={contractName}></lightning-formatted-text>
|
</td>
|
<td align="right"></td>
|
</tr>
|
<tr>
|
<td colspan = "16" style="height: 20px"></td>
|
</tr>
|
<tr>
|
<td align="right" style="width: 60px;"></td>
|
<td align="right" style="width: 85px;">第1分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category1} options={category1OptionList} onchange={category1Change}></lightning-combobox>
|
</td>
|
<td style="width: 100px;"></td>
|
<td align="right" style="width: 85px;">第2分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category2} options={category2OptionList} onchange={category2Change}></lightning-combobox>
|
</td>
|
<td style="width: 100px;"></td>
|
<td align="right" style="width: 85px;">第3分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category3} options={category3OptionList} onchange={category3Change}></lightning-combobox>
|
</td>
|
<td style="width: 100px;"></td>
|
<td align="right" style="width: 85px;">第4分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category4} options={category4OptionList} onchange={category4Change}></lightning-combobox>
|
</td>
|
<td></td>
|
<td align="right"></td>
|
</tr>
|
<tr style="height: 10px;"></tr>
|
<tr>
|
<td align="right"></td>
|
<td align="right">关键字：<lightning-helptext content="可以使用关键字检索OT Code和产品名称"></lightning-helptext></td>
|
<td style="text-align:left; width:70px;" colspan = "2">
|
<lightning-input disabled={isDisable} variant="label-hidden" value={keyword} onchange={keywordChange}></lightning-input>
|
</td>
|
<td></td>
|
<td>
|
<lightning-button disabled={isDisable} label="检索" onclick={searchProduct} style=" height: 32px;margin-right: 10px;"></lightning-button>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<p style="height: 15px;"></p>
|
<!-- product info -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="border-bottom: 1px solid #d4d4d4;padding: 3px;">
|
<lightning-layout>
|
<lightning-layout-item padding="around-small" size="11">
|
<p style="font-size: 18px">
|
<strong>产品信息</strong>
|
</p>
|
</lightning-layout-item>
|
<lightning-layout-item padding="around-small" size="1">
|
<button disabled={isDisable} onclick={save} class="saveButton slds-button slds-button_neutral">保存</button>
|
</lightning-layout-item>
|
</lightning-layout>
|
</div>
|
<div style="padding: 10px">
|
<template if:true={isDisable}>
|
<lightning-datatable hide-checkbox-column style="word-wrap: break-word;word-break: break-all;" key-field="recordId" columns={conCols} data={currentRecord}></lightning-datatable>
|
</template>
|
<template if:false={isDisable}>
|
<lightning-datatable key-field="recordId" style="word-wrap: break-word;word-break: break-all;" columns={conCols} data={currentRecord} selected-rows={selectedRows} onrowselection={checkRows}></lightning-datatable>
|
<c-paginator
|
onprevious={prePageClick}
|
onnext={nextPageClick}
|
onpageschange={pageSizeChange}
|
onfirst={goFirstPage}
|
onlast={goLastPage}
|
page-size-options={pageSizeOptions}
|
previous-button-disabled={previousButtonDisabled}
|
next-button-disabled={nextButtonDisabled}
|
record-start={recordStart}
|
record-end={recordEnd}
|
total-records={totalRecords}
|
></c-paginator>
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- 按分类选取 -->
|
<template if:false={showProductDetailSection}>
|
<div style="border: 1px solid #d4d4d4;border-radius: 5px;background-color: white;">
|
<!-- search -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="padding: 10px">
|
<table>
|
<tr style="font-size: 14px;">
|
<td align="right"></td>
|
<td align="right">管理编码：</td>
|
<td style="text-align:left; width:70px;" colspan = "2">
|
<lightning-formatted-text value={manageCode}></lightning-formatted-text>
|
</td>
|
<td align="right">经销商名称：</td>
|
<td style="text-align:left; width:70px;" colspan = "3">
|
<lightning-formatted-text value={agencyName}></lightning-formatted-text>
|
</td>
|
<td align="right">经销商合同：</td>
|
<td style="text-align:left; width:70px;" colspan = "4">
|
<lightning-formatted-text value={contractName}></lightning-formatted-text>
|
</td>
|
<td align="right"></td>
|
</tr>
|
<tr>
|
<td colspan = "16" style="height: 20px"></td>
|
</tr>
|
<tr>
|
<td align="right" style="width: 60px;"></td>
|
<td align="right" style="width: 85px;">第1分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category1} options={category1OptionList} onchange={category1Change}></lightning-combobox>
|
</td>
|
<td style="width: 100px;"></td>
|
<td align="right" style="width: 85px;">第2分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category2} options={category2OptionList} onchange={category2Change}></lightning-combobox>
|
</td>
|
<td style="width: 100px;"></td>
|
<td align="right" style="width: 85px;">第3分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category3} options={category3OptionList} onchange={category3Change}></lightning-combobox>
|
</td>
|
<td style="width: 100px;"></td>
|
<td align="right" style="width: 85px;">第4分类：</td>
|
<td style="text-align:left; width:100px;">
|
<lightning-combobox disabled={isDisable} variant="label-hidden" value={category4} options={category4OptionList} onchange={category4Change}></lightning-combobox>
|
</td>
|
<td style="width: 50px;"></td>
|
<td style="width: 10%">
|
<div>
|
<lightning-button disabled={isDisable} label="检索" onclick={searchProduct} style=" height: 32px;margin-right: 10px;"></lightning-button>
|
<lightning-button disabled={isDisable} label="添加当前分类" onclick={addCurrentCategory} style=" height: 32px;margin-right: 10px;"></lightning-button>
|
</div>
|
</td>
|
<td></td>
|
<td align="right"></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<p style="height: 15px;"></p>
|
<!-- 当前已添加分类 -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="border-bottom: 1px solid #d4d4d4;padding: 3px;">
|
<lightning-layout>
|
<lightning-layout-item padding="around-small" size="11">
|
<p style="font-size: 18px">
|
<strong>当前已添加分类</strong>
|
</p>
|
</lightning-layout-item>
|
</lightning-layout>
|
</div>
|
<div style="padding: 10px">
|
<lightning-datatable hide-checkbox-column key-field="recordKey" style="word-wrap: break-word;word-break: break-all;" columns={categroyCol} data={selectedCategroy} onrowaction={deleteCurrentCategroy}></lightning-datatable>
|
</div>
|
</div>
|
<p style="height: 15px;"></p>
|
<!-- product info -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="border-bottom: 1px solid #d4d4d4;padding: 3px;">
|
<lightning-layout>
|
<lightning-layout-item padding="around-small" size="11">
|
<p style="font-size: 18px">
|
<strong>产品信息</strong>
|
</p>
|
</lightning-layout-item>
|
<lightning-layout-item padding="around-small" size="1">
|
<button disabled={isDisable} onclick={save} class="saveButton slds-button slds-button_neutral">保存</button>
|
</lightning-layout-item>
|
</lightning-layout>
|
</div>
|
<div style="padding: 10px">
|
<lightning-datatable
|
hide-checkbox-column
|
key-field="recordId"
|
style="word-wrap: break-word;word-break: break-all;"
|
columns={conCols}
|
data={currentRecord}></lightning-datatable>
|
<c-paginator
|
onprevious={prePageClick}
|
onnext={nextPageClick}
|
onpageschange={pageSizeChange}
|
onfirst={goFirstPage}
|
onlast={goLastPage}
|
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>
|
</template>
|
</template>
|
<!-- 批量导入 -->
|
<template if:true={showImportSection}>
|
<div style="border: 1px solid #d4d4d4;border-radius: 5px;background-color: white;">
|
<!-- search -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="padding: 10px">
|
<table>
|
<tr>
|
<td style="width: 30%;">
|
<lightning-input class="fileUpload" type="file" label="附件上传" accept=".csv" onchange={attChange} variant="label-hidden"></lightning-input>
|
<p style="font-size: 14px">
|
已选择文件：{fileName}
|
|
<template if:true={attDelBtn}>
|
<a onclick={removeAtt}>移除</a>
|
</template>
|
</p>
|
</td>
|
<td style="width: 70%;">
|
<button disabled={disableReadBtn} onclick={readCsvFile} class="slds-button slds-button_neutral" style="width: 100px;">读取CSV</button>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<p style="height: 15px;"></p>
|
<!-- 警告提醒 -->
|
<template if:true={hasWarning}>
|
<div
|
style="
|
border: 1px solid #d4d4d4;
|
border-radius: 5px;
|
margin-bottom: 7px;
|
"
|
>
|
<div
|
style="
|
border-bottom: 1px solid #d4d4d4;
|
border-radius: 5px;
|
margin-bottom: 7px;
|
color: #ff6a00;
|
font-size: 17px;
|
"
|
>
|
<lightning-icon
|
style="margin: 3px"
|
icon-name="utility:warning"
|
size="small"
|
></lightning-icon>
|
<strong> 警告</strong>
|
</div>
|
<template for:each={warningMsgs} for:item="msg">
|
<p
|
key={msg}
|
style="
|
color: #ff6a00;
|
padding-left: 7px;
|
font-size: 16px;
|
margin-bottom: 7px;
|
"
|
>
|
・ {msg}
|
</p>
|
</template>
|
</div>
|
</template>
|
<!-- product info -->
|
<div style="border: 1px solid #d4d4d4;border-top: 3px solid #51606e;border-radius: 5px;background-color: white;">
|
<div style="border-bottom: 1px solid #d4d4d4;padding: 3px;">
|
<lightning-layout>
|
<lightning-layout-item padding="around-small" size="10">
|
<p style="font-size: 18px">
|
<strong>导入明细</strong>
|
</p>
|
</lightning-layout-item>
|
<lightning-layout-item padding="around-small" size="2">
|
<button onclick={importSave} disabled={canSave} class="saveButton slds-button slds-button_neutral">确认导入</button>
|
</lightning-layout-item>
|
</lightning-layout>
|
</div>
|
<div style="padding: 10px">
|
<lightning-datatable hide-checkbox-column style="word-wrap: break-word;word-break: break-all;" key-field="recordId" columns={importCol} data={carrList}></lightning-datatable>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- 导入成功弹窗 -->
|
<template if:true={showImportSuccessPop}>
|
<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 slds-modal_small"
|
style="border: 1px solid #d4d4d4"
|
>
|
<div class="slds-modal__container">
|
<header
|
class="slds-modal__header"
|
style="background-color: #f3f3f3"
|
>
|
<h2
|
id="modal-heading-01"
|
class="slds-text-heading_medium slds-hyphenate"
|
>
|
导入产品限制申请明细
|
</h2>
|
</header>
|
<div
|
class="slds-modal__content slds-p-around_medium"
|
id="modal-content-id-1"
|
style="border: 1px solid #f3f3f3"
|
>
|
<div class="slds-m-top_medium slds-m-bottom_x-large">
|
<lightning-datatable
|
class="wrapped-header-datatable"
|
key-field="Id"
|
hide-checkbox-column="true"
|
data={plrList}
|
columns={importPlrCol}
|
onrowaction={showPlrDetail}
|
></lightning-datatable>
|
</div>
|
</div>
|
<footer class="slds-modal__footer">
|
<lightning-button label="继续导入" onclick={importNew}></lightning-button>
|
</footer>
|
</div>
|
</section>
|
<div class="slds-backdrop slds-backdrop_open"></div>
|
</template>
|
<!-- 选择产品限制申请类型 -->
|
<template if:true={showSelectApplyType}>
|
<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 slds-modal_small"
|
style="border: 1px solid #d4d4d4"
|
>
|
<div class="slds-modal__container">
|
<header
|
class="slds-modal__header"
|
style="background-color: #f3f3f3"
|
>
|
<h2
|
id="modal-heading-02"
|
class="slds-text-heading_medium slds-hyphenate"
|
>
|
请选择申请类型
|
</h2>
|
</header>
|
<div
|
class="slds-modal__content slds-p-around_medium"
|
id="modal-content-id-2"
|
style="border: 1px solid #f3f3f3"
|
>
|
<div class="slds-m-top_medium slds-m-bottom_x-large">
|
<lightning-layout>
|
<lightning-layout-item padding="around-small" size="4">
|
|
</lightning-layout-item>
|
<lightning-layout-item padding="around-small" size="4">
|
<lightning-radio-group name="radioGroup"
|
label="申请类型："
|
options={options}
|
value={typeValue}
|
type="radio"
|
onchange={radioChange}
|
></lightning-radio-group>
|
</lightning-layout-item>
|
<lightning-layout-item padding="around-small" size="4">
|
|
</lightning-layout-item>
|
</lightning-layout>
|
</div>
|
</div>
|
<footer class="slds-modal__footer">
|
<lightning-button disabled={confirmDisable} label="确认" onclick={confirm}></lightning-button>
|
</footer>
|
</div>
|
</section>
|
<div class="slds-backdrop slds-backdrop_open"></div>
|
</template>
|
</template>
|
