yunke/yunkes/src/views/CallList.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { ElMessage, type TabPaneName } from 'element-plus'
import { getCalls } from '@/api'
import type { CallChannel, PhoneCall } from '@/api/types'
import {
  callDirectionLabel,
  callStatusLabel,
  callTypeLabel,
  formatCallDuration,
  formatTime,
} from '@/utils/format'
import { buildCallSections, readField } from '@/utils/callFields'

// Calls aren't tied to a messaging channel — `channel` on a call is the call
// type (phone_call / voice_call / wa_voice_call). We keep a LOCAL filter so it
// doesn't fight the shared top-bar wechat/whatsapp store used by customers/groups.
const callType = ref<CallChannel>('voice_call')

const calls = ref<PhoneCall[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const errorMsg = ref<string | null>(null)

// Recording playback dialog state.
const recordDialogVisible = ref(false)
const recordSrc = ref<string | null>(null)
const recordTitle = ref('')

// All-fields drawer state.
const drawerOpen = ref(false)
const drawerCall = ref<PhoneCall | null>(null)

const tabs: { value: CallChannel; label: string }[] = [
  { value: 'voice_call', label: '微信语音' },
  { value: 'wa_voice_call', label: 'WA 语音' },
  { value: 'phone_call', label: '电话' },
]

async function load(): Promise<void> {
  loading.value = true
  errorMsg.value = null
  try {
    const res = await getCalls({
      channel: callType.value,
      page: page.value,
      page_size: pageSize.value,
    })
    calls.value = res.items
    total.value = res.total
  } catch (e) {
    errorMsg.value = (e as Error).message
    ElMessage.error(`通话记录加载失败：${(e as Error).message}`)
  } finally {
    loading.value = false
  }
}

function handlePageChange(p: number): void {
  page.value = p
  load()
}

function handlePageSizeChange(s: number): void {
  pageSize.value = s
  page.value = 1
  load()
}

function onTabChange(_name: TabPaneName): void {
  // v-model has already updated callType; just reset paging and reload.
  page.value = 1
  load()
}

/**
 * Read a raw_json camelCase key off a call, preferring the structured
 * snake_case column when it is populated. The first argument is the row so the
 * table can use the same helper as the drawer.
 */
function cell(row: PhoneCall, camelKey: string): unknown {
  return readField(row, camelKey)
}

function timeCell(row: PhoneCall, camelKey: string): number | undefined {
  const v = cell(row, camelKey)
  return typeof v === 'number' ? v : undefined
}

function playRecord(row: PhoneCall): void {
  const file =
    (typeof cell(row, 'recordFile') === 'string'
      ? (cell(row, 'recordFile') as string)
      : null) ?? row.record_file
  if (!file) {
    ElMessage.info('该通话无录音文件')
    return
  }
  recordSrc.value = file
  const who = row.user_id_name || row.user_id || row.call_id
  const when = formatTime(row.start_call_time)
  recordTitle.value = `录音 · ${who}${when !== '--' ? ` · ${when}` : ''}`
  recordDialogVisible.value = true
}

function openDrawer(row: PhoneCall): void {
  drawerCall.value = row
  drawerOpen.value = true
}

const drawerSections = computed(() =>
  drawerCall.value ? buildCallSections(drawerCall.value) : [],
)

onMounted(load)
</script>

<template>
  <div class="yk-calls">
    <div class="yk-calls__header">
      <div>
        <h2 style="margin: 0 0 4px; font-size: 16px">通话记录</h2>
        <span class="yk-calls__sub">
          共 {{ total }} 条 · 类型：{{ tabs.find(t => t.value === callType)?.label }}
        </span>
      </div>
    </div>

    <el-tabs v-model="callType" class="yk-calls__tabs" @tab-change="onTabChange">
      <el-tab-pane
        v-for="t in tabs"
        :key="t.value"
        :label="t.label"
        :name="t.value"
      />
    </el-tabs>

    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      show-icon
      :closable="false"
      style="margin-bottom: 12px"
    />

    <el-table
      v-loading="loading"
      :data="calls"
      stripe
      border
      row-key="call_id"
      style="width: 100%"
      :row-class-name="() => 'yk-clickable-row'"
      empty-text="暂无通话记录"
      @row-click="openDrawer"
    >
      <el-table-column label="时间" width="160">
        <template #default="{ row }">
          {{ formatTime(row.start_call_time ?? timeCell(row, 'startCallTime')) }}
        </template>
      </el-table-column>
      <el-table-column label="员工" min-width="130">
        <template #default="{ row }">
          {{ row.user_id_name || row.user_id || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="号码" min-width="130">
        <template #default="{ row }">
          {{ row.call_number || row.sim_phone || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="方向" width="80">
        <template #default="{ row }">{{ callDirectionLabel(row.incoming_call) }}</template>
      </el-table-column>
      <el-table-column label="类型" width="100">
        <template #default="{ row }">{{ callTypeLabel(row.channel) }}</template>
      </el-table-column>
      <el-table-column label="时长" width="90" align="right">
        <template #default="{ row }">{{ formatCallDuration(row.call_duration) }}</template>
      </el-table-column>
      <el-table-column label="状态" width="90">
        <template #default="{ row }">{{ callStatusLabel(row.call_status) }}</template>
      </el-table-column>
      <el-table-column label="录音" width="100" align="center">
        <template #default="{ row }">
          <el-button
            v-if="row.record_file || cell(row, 'recordFile')"
            size="small"
            type="primary"
            link
            @click.stop="playRecord(row)"
          >
            播放录音
          </el-button>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="yk-calls__pager">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @current-change="handlePageChange"
        @size-change="handlePageSizeChange"
      />
    </div>
    <p class="yk-calls__hint">点击任意一行查看通话全部字段。</p>

    <!-- Recording playback dialog -->
    <el-dialog
      v-model="recordDialogVisible"
      :title="recordTitle"
      width="480px"
      align-center
      @closed="recordSrc = null"
    >
      <audio
        v-if="recordSrc"
        controls
        :src="recordSrc"
        style="width: 100%"
        preload="metadata"
      >
        您的浏览器不支持音频播放。
      </audio>
      <div v-if="recordSrc" class="yk-calls__record-link">
        <a :href="recordSrc" target="_blank" rel="noopener">在新窗口打开录音文件</a>
      </div>
    </el-dialog>

    <!-- All-fields drawer -->
    <el-drawer
      v-model="drawerOpen"
      :title="drawerCall ? `通话详情 · ${drawerCall.user_id_name ?? drawerCall.user_id ?? drawerCall.call_id}` : '通话详情'"
      direction="rtl"
      size="560px"
    >
      <template v-if="drawerCall">
        <div class="yk-drawer__avatar">
          <div class="yk-drawer__avatar-meta">
            <div class="yk-drawer__avatar-name">
              {{ drawerCall.user_id_name || drawerCall.user_id || drawerCall.call_id }}
            </div>
            <div class="yk-drawer__avatar-sub">
              {{ callTypeLabel(drawerCall.channel) }}
              <template v-if="drawerCall.call_number">
                · {{ drawerCall.call_number }}
              </template>
            </div>
          </div>
        </div>

        <div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
          <el-divider content-position="left">{{ section.title }}</el-divider>
          <dl class="yk-drawer__kv">
            <div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
              <dt>{{ f.label }}</dt>
              <dd v-if="f.render === 'audio'" class="yk-drawer__audio">
                <audio
                  :src="String(f.value)"
                  controls
                  preload="metadata"
                  style="width: 100%; max-width: 320px"
                >
                  您的浏览器不支持音频播放。
                </audio>
                <a :href="String(f.value)" target="_blank" rel="noopener" class="yk-drawer__audio-link">
                  打开录音
                </a>
              </dd>
              <dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
              <dd v-else>{{ f.text }}</dd>
            </div>
          </dl>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>
.yk-calls__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.yk-calls__sub {
  color: #909399;
  font-size: 13px;
}

.yk-calls__filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.yk-calls__pager {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.yk-calls__record-link {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
}

.yk-calls__hint {
  margin: 8px 2px 0;
  font-size: 12px;
  color: #c0c4cc;
}

.yk-drawer__avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.yk-drawer__avatar-meta {
  min-width: 0;
}

.yk-drawer__avatar-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yk-drawer__avatar-sub {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.yk-drawer__kv {
  margin: 0 0 8px;
}

.yk-drawer__kv-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  padding: 3px 0;
}

.yk-drawer__kv dt {
  color: #909399;
  font-size: 13px;
  word-break: break-all;
}

.yk-drawer__kv dd {
  margin: 0;
  font-size: 13px;
  color: #303133;
  word-break: break-all;
  min-width: 0;
}

.yk-drawer__audio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.yk-drawer__audio-link {
  font-size: 12px;
  color: var(--el-color-primary, #409eff);
}

.yk-drawer__empty {
  color: #c0c4cc;
}
</style>