chongqing-app/src/pages/components/DeptSelector.vue

<template>
    <u-popup :show="show" mode="bottom" :round="16" :mask-close-able="true" :safe-area-inset-bottom="true"
        :close-on-click-mask="true" @close="onClose">
        <view class="dept-picker">
            <view class="picker-header">
                <text class="picker-title">选择{{ title }}</text>
            </view>
            <view class="search-box">
                <u-input v-model="deptSearchKeyword" :placeholder="`搜索${title}`" :border="false" @confirm="onDeptSearch"
                    @input="onDeptSearch" />
            </view>
            <scroll-view scroll-y class="dept-list" :enable-back-to-top="true">
                <view class="dept-item" v-for="item in filteredDeptList" :key="item.deptId"
                    @click="onDeptSelect(item)">
                    <text class="dept-item-name">{{ item.deptName }}</text>
                    <u-icon v-if="item.deptId === selectedDeptId" name="checkmark" color="#34D399"
                        size="18"></u-icon>
                </view>
                <view v-if="filteredDeptList.length === 0 && !loading" class="empty-state">
                    <text>暂无数据</text>
                </view>
                <view v-if="loading" class="loading-state">
                    <u-loading-icon text="加载中" textSize="14"></u-loading-icon>
                </view>
            </scroll-view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: 'DeptSelector',
    props: {
        title: {
            type: String,
            default: '部门'
        },
        show: {
            type: Boolean,
            default: false
        },
        value: {
            type: [String, Number],
            default: null
        },
        options: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectedDeptId: this.value,
            filteredDeptList: [...this.options],
            deptSearchKeyword: ''
        }
    },
    watch: {
        value(newVal) {
            this.selectedDeptId = newVal
        },
        options(newVal) {
            this.filteredDeptList = [...newVal]
        },
        show(newVal) {
            if (newVal) {
                this.deptSearchKeyword = ''
                this.filteredDeptList = [...this.options]
            }
        }
    },
    methods: {
        onDeptSearch() {
            const keyword = this.deptSearchKeyword.trim()
            if (!keyword) {
                this.filteredDeptList = [...this.options]
            } else {
                this.filteredDeptList = this.options.filter(item =>
                    item.deptName.includes(keyword)
                )
            }
        },
        onDeptSelect(item) {
            this.selectedDeptId = item.deptId
            this.$emit('input', item.deptId)
            this.$emit('change', item)
            this.$emit('update:show', false)
        },
        onClose() {
            this.$emit('update:show', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.dept-picker {
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 16rpx 16rpx 0 0;
    width: 100%;
    height: 70vh;
}

.picker-header {
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.picker-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.search-box {
    padding: 16rpx 32rpx;
    flex-shrink: 0;
}

.dept-list {
    flex: 1;
    padding: 0 32rpx;
    height: 0;
    overflow: hidden;
}

.dept-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.dept-item-name {
    font-size: 28rpx;
    color: #333;
}

.empty-state,
.loading-state {
    padding: 48rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-size: 24rpx;
}
</style>