liuyn
2024-03-22 e8be4d964c6b336ed39dba5900b1b9a8f3181b96
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!--
 * @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>