<!--
|
* @Description:
|
* @version:
|
* @Author: chen jing wu
|
* @Date: 2023-04-25 17:41:26
|
* @LastEditors: chen jing wu
|
* @LastEditTime: 2023-10-16 13:23:10
|
-->
|
|
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header -->
|
<template>
|
|
<!-- Header Label -->
|
<template if:true={label}>
|
<label class="slds-form-element__label">
|
<span style="color:red;font-size: 10px;">*</span>
|
{label}</label>
|
</template>
|
<div data-id="myinput" class="slds-combobox_container">
|
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aria-expanded="true" aria-haspopup="listbox" role="combobox">
|
<!-- Search Input -->
|
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
|
<lightning-input data-id="myinput" disabled={disabled} onblur={blurEvent} class="inputBox" placeholder={placeholder} onclick={showOptions} onkeyup={filterOptions} value={searchString} auto-complete="off" variant="label-hidden" id="combobox-id-1"></lightning-input>
|
<lightning-icon class="slds-input__icon slds-input__icon_right slds-icon-utility-down slds-icon_container" icon-name="utility:down" size="x-small" alternative-text="search"></lightning-icon>
|
</div>
|
<!-- Dropdown List -->
|
<template if:true={showDropdown}>
|
<div onmousedown={dontClose} onopen={handlePayModeOpen} data-id=“scrollSec” id="listbox-id-1" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox"><!--style="{! 'max-height:' + (8 + (v.recordCount * 40)) + 'px' }""-->
|
<ul class="slds-listbox slds-listbox_vertical recordListBox" role="presentation">
|
<template if:false={message} >
|
<template for:each={optionData} for:item="option">
|
<template if:true={option.isVisible}>
|
<li key={option.value} data-id={option.value} onclick={selectItem} class="slds-listbox__item eachItem">
|
<div id="option724" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
|
<template if:true={option.selected}>
|
<lightning-icon icon-name="utility:check" size="x-small" alternative-text="icon" ></lightning-icon>
|
</template>
|
<span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{option.label}</span>
|
</div>
|
|
</li>
|
</template>
|
</template>
|
</template>
|
<template if:true={message} >
|
<li class="slds-listbox__item">
|
<span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{message}</span>
|
</li>
|
</template>
|
</ul>
|
</div>
|
</template>
|
</div>
|
</div>
|
<template if:true={errorFlag}>
|
<div style="color:#BA0517;font-size:12px">填写此字段。</div>
|
</template>
|
<!-- Multi Select Pills -->
|
<template for:each={optionData} for:item="option">
|
<template if:true={option.selected}>
|
<lightning-pill key={option.value} class="slds-m-around_xx-small" name={option.value} label={option.label} onremove={removePill}></lightning-pill>
|
</template>
|
</template>
|
</template>
|
