135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
<template>
|
||
<view class="select-user-mask" v-if="visible">
|
||
<view class="select-user-container">
|
||
<!-- 标题栏 -->
|
||
<view class="header">
|
||
<text>{{ title }}</text>
|
||
<text class="close" @click="close">×</text>
|
||
</view>
|
||
|
||
<!-- 搜索框 -->
|
||
<view class="search-box">
|
||
<input v-model="keyword" placeholder="姓名、工号" @input="onSearch" />
|
||
</view>
|
||
|
||
<!-- 列表 -->
|
||
<scroll-view class="user-list" scroll-y>
|
||
<view v-for="item in filteredList" :key="item.id" class="user-item" @click="selectUser(item)">
|
||
<view class="radio" :class="{ checked: isSelected(item) }"></view>
|
||
<text>{{ item.name }}（{{ item.department }}）</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="footer">
|
||
<button @click="confirm">{{ confirmText }}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SelectUser',
|
||
props: {
|
||
visible: { type: Boolean, default: false },
|
||
list: { type: Array, default: () => [] },
|
||
title: { type: String, default: '选择' },
|
||
multiple: { type: Boolean, default: false },
|
||
confirmText: { type: String, default: '指派' }
|
||
},
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
selected: []
|
||
}
|
||
},
|
||
computed: {
|
||
filteredList() {
|
||
if (!this.keyword) return this.list;
|
||
return this.list.filter(item => item.name.includes(this.keyword) || item.id.includes(this.keyword));
|
||
}
|
||
},
|
||
methods: {
|
||
close() {
|
||
this.$emit('update:visible', false);
|
||
},
|
||
selectUser(item) {
|
||
if (this.multiple) {
|
||
if (this.isSelected(item)) {
|
||
this.selected = this.selected.filter(i => i.id !== item.id);
|
||
} else {
|
||
this.selected.push(item);
|
||
}
|
||
} else {
|
||
this.selected = [item];
|
||
}
|
||
},
|
||
isSelected(item) {
|
||
return this.selected.some(i => i.id === item.id);
|
||
},
|
||
confirm() {
|
||
this.$emit('confirm', this.selected);
|
||
this.close();
|
||
},
|
||
onSearch() {
|
||
// 可以加节流优化
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.select-user-mask {
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
background: rgba(0,0,0,0.3);
|
||
display: flex; justify-content: center; align-items: center;
|
||
}
|
||
.select-user-container {
|
||
width: 80%;
|
||
max-height: 70%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.header {
|
||
padding: 15px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
display: flex; justify-content: space-between;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.close {
|
||
font-size: 22px; color: #999;
|
||
}
|
||
.search-box {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.search-box input {
|
||
width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px;
|
||
}
|
||
.user-list {
|
||
flex: 1; overflow-y: auto;
|
||
}
|
||
.user-item {
|
||
padding: 12px 15px; display: flex; align-items: center; border-bottom: 1px solid #eee;
|
||
}
|
||
.radio {
|
||
width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 50%; margin-right: 10px;
|
||
}
|
||
.radio.checked {
|
||
background: #2d8cf0;
|
||
border-color: #2d8cf0;
|
||
}
|
||
.footer {
|
||
padding: 12px; border-top: 1px solid #eee;
|
||
}
|
||
.footer button {
|
||
width: 100%; height: 40px; background: #2d8cf0; color: #fff; border-radius: 6px; border: none;
|
||
}
|
||
</style>
|