aurora-admin/frameworks/Cascader.vue3.vue

<template>
  <div class="kole-cascader" ref="root">
    <div class="kole-cascader-trigger" :class="{ 'is-open': open }" @click="toggle">
      <span v-if="multiple">
        <span v-if="!modelValue.length" class="placeholder">{{ placeholder }}</span>
        <span v-else class="kole-cascader-tags">
          <span v-for="(p, i) in modelValue" :key="i" class="kole-cascader-tag">{{ pathLabels(p).join(' / ') }}</span>
        </span>
      </span>
      <span v-else>{{ modelValue && modelValue.length ? pathLabels(modelValue).join(' / ') : placeholder }}</span>
      <span class="caret">▾</span>
    </div>

    <div v-if="open && filterable" class="kole-cascader-search">
      <input v-model="query" placeholder="搜索">
    </div>

    <div v-if="open" class="kole-cascader-panel">
      <template v-if="query">
        <div class="kole-cascader-results">
          <div v-if="!results.length" class="kole-cascader-empty">无匹配结果</div>
          <div v-for="(p, i) in results" :key="i" class="kole-cascader-result" @click="pickResult(p)">{{ pathLabels(p).join(' / ') }}</div>
        </div>
      </template>
      <template v-else>
        <div v-for="(col, ci) in columns" :key="ci" class="kole-cascader-col">
          <div
            v-for="n in col" :key="n.value"
            class="kole-cascader-opt"
            :class="{ 'is-active': activePath[ci] === n.value, 'is-checked': multiple && isLeafChecked([...pathTo(ci), n.value]) }"
            @click="choose(n, ci)"
          >
            <span v-if="multiple && !n.children" class="box">{{ isLeafChecked([...pathTo(ci), n.value]) ? '✓' : '' }}</span>
            <span>{{ n.label }}</span>
            <span v-if="n.children && n.children.length" class="arrow">›</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue';

const props = defineProps({
  modelValue: { type: [Array, null], default: () => [] }, // single: 路径数组 | null ; multiple: 路径数组的数组
  options: { type: Array, required: true },               // [{ value, label, children? }]
  multiple: { type: Boolean, default: false },
  filterable: { type: Boolean, default: true },
  placeholder: { type: String, default: '请选择' }
});
const emit = defineEmits(['update:modelValue', 'change']);

const root = ref(null);
const open = ref(false);
const activePath = ref([]);
const query = ref('');

function pathLabels(values) {
  let nodes = props.options, labels = [];
  for (const v of (values || [])) {
    const n = nodes.find(x => x.value === v);
    if (!n) break;
    labels.push(n.label); nodes = n.children || [];
  }
  return labels;
}
function pathTo(level) { return activePath.value.slice(0, level); }

const columns = computed(() => {
  const cols = [];
  let nodes = props.options, path = [];
  for (let lv = 0; lv <= activePath.value.length; lv++) {
    cols.push(nodes);
    if (lv < activePath.value.length) {
      const next = nodes.find(x => x.value === activePath.value[lv]);
      path = [...path, activePath.value[lv]];
      nodes = next.children || [];
    } else break;
  }
  return cols;
});

const allLeaves = computed(() => {
  const out = [];
  (function walk(list, acc) {
    list.forEach(n => {
      const p = [...acc, n.value];
      if (n.children && n.children.length) walk(n.children, p);
      else out.push(p);
    });
  })(props.options, []);
  return out;
});
const results = computed(() =>
  query.value ? allLeaves.value.filter(p => pathLabels(p).join('/').includes(query.value)) : []
);

function choose(n, lv) {
  const full = [...activePath.value.slice(0, lv), n.value];
  if (n.children && n.children.length) {
    activePath.value = full;
  } else {
    if (props.multiple) {
      const k = JSON.stringify(full);
      const arr = Array.isArray(props.modelValue) ? props.modelValue : [];
      const next = arr.some(p => JSON.stringify(p) === k)
        ? arr.filter(p => JSON.stringify(p) !== k)
        : [...arr, full];
      commit(next);
    } else {
      commit(full);
      open.value = false;
    }
  }
}
function isLeafChecked(p) {
  return Array.isArray(props.modelValue) && props.modelValue.some(x => JSON.stringify(x) === JSON.stringify(p));
}
function pickResult(p) {
  if (props.multiple) {
    const k = JSON.stringify(p);
    const arr = Array.isArray(props.modelValue) ? props.modelValue : [];
    const next = arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : [...arr, p];
    commit(next);
  } else { commit(p); open.value = false; }
}
function commit(next) {
  emit('update:modelValue', next);
  emit('change', next);
}
function toggle() {
  open.value = !open.value;
  if (!open.value) { query.value = ''; }
}
function onDocClick(e) {
  if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = ''; }
}
document.addEventListener('click', onDocClick, true);
onBeforeUnmount(() => document.removeEventListener('click', onDocClick, true));
</script>

<!-- 样式对齐 组件7.txt Cascader 规范 -->
<style scoped>
.kole-cascader { position: relative; display: inline-block; min-width: 200px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
.kole-cascader-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 12px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.kole-cascader-trigger:hover { border-color: #2F54EB; }
.kole-cascader-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-cascader-trigger .placeholder { color: #767676; }
.kole-cascader-trigger .caret { color: #6E6E6E; transition: transform .15s; flex-shrink: 0; }
.kole-cascader-trigger.is-open .caret { transform: rotate(180deg); }
.kole-cascader-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kole-cascader-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; white-space: nowrap; }
.kole-cascader-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; }
.kole-cascader-col { min-width: 140px; max-height: 240px; overflow: auto; border-right: 1px solid #E8ECF1; padding: 4px 0; }
.kole-cascader-col:last-child { border-right: none; }
.kole-cascader-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; color: #262626; }
.kole-cascader-opt:hover { background: #F5F7FA; }
.kole-cascader-opt.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }
.kole-cascader-opt .arrow { color: #6E6E6E; font-size: 12px; }
.kole-cascader-opt .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-cascader-opt.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
.kole-cascader-search { position: absolute; z-index: 101; top: calc(100% + 4px); left: 0; width: 260px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 8px; }
.kole-cascader-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-cascader-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-cascader-search input::placeholder { color: #767676; }
.kole-cascader-results { max-height: 200px; overflow: auto; margin-top: 8px; }
.kole-cascader-result { padding: 6px 8px; cursor: pointer; font-size: 14px; color: #262626; }
.kole-cascader-result:hover { background: #F5F7FA; }
.kole-cascader-empty { padding: 16px 8px; text-align: center; color: #767676; font-size: 13px; }
</style>