SmartParks_uniapp/components/SelectUser.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>