yunke/yunkes/src/layouts/MainLayout.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ChatLineSquare, Refresh, Search } from '@element-plus/icons-vue'
import { useOrgStore } from '@/stores/org'
import { useChannelStore } from '@/stores/channel'
import type { DeptTreeNode } from '@/utils/tree'
import type { Channel } from '@/api/types'

const route = useRoute()
const router = useRouter()
const org = useOrgStore()
const channelStore = useChannelStore()

const filterText = ref('')
const treeRef = ref()

// Currently selected dept id drives the customer list via route query.
const selectedDeptId = computed<string | null>(
  () => (route.query.department_id as string | undefined) ?? null,
)

const treeProps = { label: 'label', children: 'children' }

// el-tree's `filter-node-method` is called for every node on each keystroke.
function filterNode(value: string, data: DeptTreeNode): boolean {
  if (!value) return true
  return data.label.toLowerCase().includes(value.toLowerCase())
}

watch(filterText, (val) => {
  treeRef.value?.filter(val)
})

function handleNodeClick(node: DeptTreeNode): void {
  // Toggling a dept navigates to the list with the dept filter applied. The
  // ChatTimeline view ignores this query — only CustomerList reads it.
  if (route.name !== 'customers') {
    router.push({ name: 'customers', query: { department_id: node.dept_id } })
  } else {
    router.replace({ name: 'customers', query: { department_id: node.dept_id } })
  }
}

const channelOptions: { value: Channel | 'all'; label: string }[] = [
  { value: 'all', label: '全部渠道' },
  { value: 'wechat', label: '微信' },
  { value: 'whatsapp', label: 'WhatsApp' },
]

function onChannelChange(value: string | number | boolean | undefined): void {
  channelStore.setChannel(value as Channel | 'all')
}

function goCustomers(): void {
  router.push({ name: 'customers' })
}

async function reloadTree(): Promise<void> {
  try {
    await org.ensureLoaded(true)
    ElMessage.success('部门已刷新')
  } catch (e) {
    ElMessage.error((e as Error).message)
  }
}

// The tree's `current-key` highlights the active department. We re-apply it
// whenever the underlying dept id changes (e.g. browser back/forward).
watch(selectedDeptId, (id) => {
  treeRef.value?.setCurrentKey(id ?? undefined)
})

onMounted(async () => {
  try {
    await org.ensureLoaded()
  } catch {
    /* error surfaced in the aside placeholder */
  }
  treeRef.value?.setCurrentKey(selectedDeptId.value ?? undefined)
})
</script>

<template>
  <el-container class="yk-app">
    <el-header class="yk-header">
      <h1 class="yk-header__title">云客数据镜像</h1>
      <el-radio-group
        :model-value="channelStore.channel"
        size="default"
        @change="onChannelChange"
      >
        <el-radio-button
          v-for="opt in channelOptions"
          :key="opt.value"
          :value="opt.value"
        >
          {{ opt.label }}
        </el-radio-button>
      </el-radio-group>
      <span class="yk-header__spacer" />
      <el-button text @click="goCustomers">
        <el-icon><ChatLineSquare /></el-icon>
        <span style="margin-left: 4px">客户列表</span>
      </el-button>
    </el-header>

    <el-container>
      <el-aside class="yk-aside" :width="'var(--yk-aside-width)'">
        <div class="yk-aside__search">
          <el-input
            v-model="filterText"
            size="small"
            clearable
            placeholder="搜索部门"
            :prefix-icon="Search"
          />
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 6px;
            "
          >
            <span style="color: #909399; font-size: 12px">部门</span>
            <el-button
              text
              size="small"
              :loading="org.loading"
              title="刷新"
              @click="reloadTree"
            >
              <el-icon><Refresh /></el-icon>
            </el-button>
          </div>
        </div>

        <div class="yk-aside__tree">
          <el-tree
            ref="treeRef"
            :data="org.tree"
            :props="treeProps"
            node-key="dept_id"
            :current-node-key="selectedDeptId ?? undefined"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :default-expand-all="false"
            highlight-current
            empty-text="暂无部门"
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <span class="yk-tree-node">
                {{ data.label }}
                <el-tag
                  v-if="data.dept_id === selectedDeptId"
                  size="small"
                  type="primary"
                  effect="plain"
                  style="margin-left: 4px"
                >
                  筛选中
                </el-tag>
              </span>
            </template>
          </el-tree>

          <div
            v-if="org.error"
            class="yk-empty"
            style="font-size: 12px; padding: 12px"
          >
            加载失败：{{ org.error }}
          </div>
        </div>
      </el-aside>

      <el-main class="yk-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.yk-tree-node {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}
</style>