aurora-admin/frameworks/Cascader.vue2.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="!value.length" class="placeholder">{{ placeholder }}</span>
        <span v-else class="kole-cascader-tags">
          <span v-for="(p, i) in value" :key="i" class="kole-cascader-tag">{{ pathLabels(p).join(' / ') }}</span>
        </span>
      </span>
      <span v-else>{{ value && value.length ? pathLabels(value).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).concat([n.value])) }"
            @click="choose(n, ci)"
          >
            <span v-if="multiple && !n.children" class="box">{{ isLeafChecked(pathTo(ci).concat([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>
export default {
  name: 'KoleCascader',
  props: {
    value: { type: [Array, null], default: () => [] },
    options: { type: Array, required: true },
    multiple: { type: Boolean, default: false },
    filterable: { type: Boolean, default: true },
    placeholder: { type: String, default: '请选择' }
  },
  data() { return { open: false, activePath: [], query: '' }; },
  computed: {
    columns() {
      const cols = [];
      let nodes = this.options, path = [];
      for (let lv = 0; lv <= this.activePath.length; lv++) {
        cols.push(nodes);
        if (lv < this.activePath.length) {
          const next = nodes.find(x => x.value === this.activePath[lv]);
          path = path.concat([this.activePath[lv]]);
          nodes = next.children || [];
        } else break;
      }
      return cols;
    },
    allLeaves() {
      const out = [];
      (function walk(list, acc) {
        list.forEach(n => {
          const p = acc.concat([n.value]);
          if (n.children && n.children.length) walk(n.children, p);
          else out.push(p);
        });
      })(this.options, []);
      return out;
    },
    results() {
      return this.query ? this.allLeaves.filter(p => this.pathLabels(p).join('/').includes(this.query)) : [];
    }
  },
  methods: {
    pathLabels(values) {
      let nodes = this.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;
    },
    pathTo(level) { return this.activePath.slice(0, level); },
    isLeafChecked(p) {
      return Array.isArray(this.value) && this.value.some(x => JSON.stringify(x) === JSON.stringify(p));
    },
    choose(n, lv) {
      const full = this.activePath.slice(0, lv).concat([n.value]);
      if (n.children && n.children.length) {
        this.activePath = full;
      } else {
        if (this.multiple) {
          const k = JSON.stringify(full);
          const arr = Array.isArray(this.value) ? this.value : [];
          const next = arr.some(p => JSON.stringify(p) === k) ? arr.filter(p => JSON.stringify(p) !== k) : arr.concat([full]);
          this.commit(next);
        } else { this.commit(full); this.open = false; }
      }
    },
    pickResult(p) {
      if (this.multiple) {
        const k = JSON.stringify(p);
        const arr = Array.isArray(this.value) ? this.value : [];
        const next = arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : arr.concat([p]);
        this.commit(next);
      } else { this.commit(p); this.open = false; }
    },
    commit(next) { this.$emit('input', next); this.$emit('change', next); },
    toggle() { this.open = !this.open; if (!this.open) this.query = ''; },
    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 Cascader 规范 -->
<style>
.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>