添加选人搜索框

快乐的昕的电脑

2025-10-15 8c5602578a57a751c77a3157db336f144975db6f

添加选人搜索框

 components/WorkOrderPrint.vue

@@ -88,17 +88,35 @@
                </view>
            </view>

            <!-- 选人弹窗 -->
            <view v-if="isShowUserSelect" class="overlay">
                <view class="popup user-select-popup">
                    <!-- 搜索栏 -->
                    <view class="user-search-bar">
                        <input v-model.trim="userSearch"
                               type="text"
                               class="user-search-input"
                               placeholder="输入工号或姓名搜索"
                               @keydown.enter.prevent />
                        <button v-if="userSearch" class="user-search-clear" @click="userSearch=''">清空</button>
                        <view class="user-search-info">
                            匹配：{{ filteredUsers.length }} / {{ users.length }}
                        </view>
                    </view>
                    <view class="user-list-scroll">
                        <view class="user-list-grid">
                            <button v-for="(u, index) in users"
                                    :key="index"
                                    :class="['user-list-btn', {'selected': u===staffNo}]"
                                    @click="selectUser(u)">
                                <span class="user-code">{{ u.split(':')[0] }}</span>
                                <span class="user-name">{{ u.split(':')[1] }}</span>
                            </button>
                        <template v-if="filteredUsers.length">
                            <view class="user-list-grid">
                                <button v-for="(u, index) in filteredUsers"
                                        :key="index"
                                        :class="['user-list-btn', {'selected': u===staffNo}]"
                                        @click="selectUser(u)">
                                    <span class="user-code">{{ u.split(':')[0] }}</span>
                                    <span class="user-name">{{ u.split(':')[1] }}</span>
                                </button>
                            </view>
                        </template>
                        <view v-else class="no-user-result">
                            未找到匹配人员
                        </view>
                    </view>
                    <view class="user-popup-footer">
@@ -112,6 +130,7 @@
                <button class="cancel-btn" @click="cancel">取消</button>
            </view>

            <!-- 保留旧弹窗 -->
            <view v-if="isShow" class="overlay">
                <view class="popup">
                    <view class="bottom-section1">
@@ -171,7 +190,9 @@
                staffNo: '', printStr: '', printMac: '', bluetoothSocket: {}, device: '', uuid: '',
                printNum: 1, reportingList: [], printLoading: false, customAmount: '',
                isGeneratingBarcode: false, lastGenerateTime: 0, generateRequestId: null,
                nowTimeTimer: null, nowTime: ''
                nowTimeTimer: null, nowTime: '',
                // 新增：搜索关键字
                userSearch: ''
            }
        },
        computed: {
@@ -183,6 +204,12 @@
                if (!this.staffNo) return '';
                const segs = this.staffNo.split(':');
                return segs.length > 1 ? `${segs[0]} ${segs[1]}` : this.staffNo;
            },
            // 新增：过滤后的用户列表
            filteredUsers() {
                if (!this.userSearch) return this.users;
                const kw = this.userSearch.trim().toLowerCase();
                return this.users.filter(u => u.toLowerCase().includes(kw));
            }
        },
        created() {
@@ -200,7 +227,7 @@
                const segs = u.split(':');
                return segs.length > 1 ? `${segs[0]} ${segs[1]}` : u;
            },
            selectUser(u) { this.staffNo = u; this.isShowUserSelect = false; },
            selectUser(u) { this.staffNo = u; this.isShowUserSelect = false; this.userSearch = ''; },
            updateNowTime() {
                const d = new Date(), p = n => n.toString().padStart(2, '0');
                this.nowTime = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
@@ -622,11 +649,53 @@
        display: flex;
        flex-direction: column;
    }
    /* 搜索条样式 */
    .user-search-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 32px 0 32px;
        background: #fff;
        flex-wrap: wrap;
    }

    .user-search-input {
        flex: 1 1 260px;
        padding: 10px 14px;
        font-size: 16px;
        border: 1px solid #bbb;
        border-radius: 8px;
        outline: none;
    }

        .user-search-input:focus {
            border-color: #007aff;
            box-shadow: 0 0 0 2px rgba(0,122,255,.15);
        }

    .user-search-clear {
        padding: 10px 18px;
        background: #ff9f43;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
    }

        .user-search-clear:hover {
            background: #ff8920;
        }

    .user-search-info {
        font-size: 14px;
        color: #555;
    }

    .user-list-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 34px 32px 0 32px;
        padding: 24px 32px 0 32px;
    }

    .user-list-grid {
@@ -671,6 +740,13 @@
            background: #008ed0;
        }

    .no-user-result {
        padding: 40px 0;
        text-align: center;
        font-size: 18px;
        color: #666;
    }

    .user-popup-footer {
        flex-shrink: 0;
        padding: 22px 32px 32px 32px;