aurora-admin/frameworks/ListPicker.vue2.vue

<template>
  <div class="kole-listpicker" ref="root">
    <div class="kole-listpicker-trigger" :class="{ 'is-open': open }" @click="open = !open; if(!open) query=''">
      <template v-if="value.length">
        <span v-for="v in value" :key="v" class="kole-listpicker-tag">
          {{ labelOf(v) }}<span class="x" @click.stop="remove(v)">×</span>
        </span>
      </template>
      <span v-else class="kole-listpicker-placeholder">{{ placeholder }}</span>
      <span class="kole-listpicker-caret">▾</span>
    </div>

    <div v-if="open" class="kole-listpicker-panel">
      <div v-if="filterable" class="kole-listpicker-search">
        <input v-model="query" placeholder="搜索">
      </div>
      <div class="kole-listpicker-selectall" @click="selectAll">全选</div>
      <template v-for="(g, gi) in visibleGroups" :key="gi">
        <div class="kole-listpicker-group-label" v-if="g.label">{{ g.label }}</div>
        <div
          v-for="o in g.children" :key="o.value"
          class="kole-listpicker-option" :class="{ 'is-checked': value.includes(o.value), 'is-disabled': o.disabled }"
          @click="toggleOpt(o)"
        >
          <span class="box">{{ value.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}
        </div>
      </template>
      <div v-if="!flatVisible.length" class="kole-listpicker-empty">无匹配项</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleListPicker',
  props: {
    value: { type: Array, default: () => [] },
    options: { type: Array, required: true },
    filterable: { type: Boolean, default: true },
    placeholder: { type: String, default: '请选择' }
  },
  data() { return { open: false, query: '' }; },
  computed: {
    isGrouped() { return this.options.length && this.options[0] && this.options[0].children; },
    flat() { return this.isGrouped ? this.options.flatMap(g => g.children) : this.options; },
    labelMap() { return Object.fromEntries(this.flat.map(o => [o.value, o.label])); },
    flatVisible() { return this.flat.filter(o => o.label.includes(this.query)); },
    visibleGroups() {
      if (!this.isGrouped) return [{ children: this.flatVisible }];
      return this.options
        .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(this.query)) }))
        .filter(g => g.children.length);
    }
  },
  methods: {
    labelOf(v) { return this.labelMap[v] || v; },
    toggleOpt(o) { if (o.disabled) return; this.commit(this.value.includes(o.value) ? this.value.filter(x => x !== o.value) : [...this.value, o.value]); },
    remove(v) { this.commit(this.value.filter(x => x !== v)); },
    selectAll() { this.commit([...new Set([...this.value, ...this.flatVisible.map(o => o.value)])]); },
    commit(next) { this.$emit('input', next); this.$emit('change', next); },
    onDocClick(e) { if (this.$refs.root && !this.$refs.root.contains(e.target)) { this.open = false; this.query = ''; } }
  },
  mounted() { document.addEventListener('click', this.onDocClick, true); },
  beforeDestroy() { document.removeEventListener('click', this.onDocClick, true); }
};
</script>

<!-- 样式对齐 组件7.txt ListPicker 规范 -->
<style>
.kole-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
.kole-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kole-listpicker-trigger:hover { border-color: #2F54EB; }
.kole-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
.kole-listpicker-tag .x { cursor: pointer; opacity: .65; }
.kole-listpicker-tag .x:hover { opacity: 1; }
.kole-listpicker-placeholder { color: #767676; font-size: 14px; }
.kole-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }
.kole-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.kole-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }
.kole-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }
.kole-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }
.kole-listpicker-selectall:hover { background: #F5F7FA; }
.kole-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }
.kole-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.kole-listpicker-option:hover { background: #F5F7FA; }
.kole-listpicker-option.is-checked { color: #2F54EB; }
.kole-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
.kole-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
.kole-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }
.kole-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }
</style>