浅念
339 lines
8.9 KiB
Vue
339 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { Download } from '@element-plus/icons-vue'
|
|
import { getSms } from '@/api'
|
|
import type { Sms } from '@/api/types'
|
|
import { formatTime, smsDirectionLabel } from '@/utils/format'
|
|
import { buildSmsSections, readField } from '@/utils/smsFields'
|
|
import { exportListToCsv } from '@/utils/csvExport'
|
|
|
|
const list = ref<Sms[]>([])
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = ref(10)
|
|
const loading = ref(false)
|
|
const errorMsg = ref<string | null>(null)
|
|
|
|
/** [start, end] as Date[] | null. null = no date filter (all SMS). */
|
|
const dateRange = ref<[Date, Date] | null>(null)
|
|
|
|
// All-fields drawer state.
|
|
const drawerOpen = ref(false)
|
|
const drawerSms = ref<Sms | null>(null)
|
|
|
|
async function load(): Promise<void> {
|
|
loading.value = true
|
|
errorMsg.value = null
|
|
try {
|
|
const res = await getSms({
|
|
page: page.value,
|
|
page_size: pageSize.value,
|
|
start: dateRange.value?.[0]?.getTime(),
|
|
end: dateRange.value?.[1]?.getTime(),
|
|
})
|
|
list.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()
|
|
}
|
|
|
|
/** New date range → reset to page 1 and reload. */
|
|
function onDateChange(): void {
|
|
page.value = 1
|
|
load()
|
|
}
|
|
|
|
// ---- header 导出：全量短信 CSV（含当前日期筛选） ----
|
|
const exporting = ref(false)
|
|
|
|
async function exportSms(): Promise<void> {
|
|
if (total.value === 0) {
|
|
ElMessage.warning('当前列表为空，无数据可导出')
|
|
return
|
|
}
|
|
exporting.value = true
|
|
try {
|
|
const result = await exportListToCsv({
|
|
fetchPage: (p, pageSize) =>
|
|
getSms({
|
|
page: p,
|
|
page_size: pageSize,
|
|
start: dateRange.value?.[0]?.getTime(),
|
|
end: dateRange.value?.[1]?.getTime(),
|
|
}),
|
|
columns: [
|
|
{ key: 'create_time', label: '时间', format: (r) => (r.create_time ? formatTime(r.create_time) : '') },
|
|
{ key: 'receive_name', label: '员工', format: (r) => r.receive_name ?? r.user_id ?? '' },
|
|
{ key: 'customer_phone', label: '号码', format: (r) => r.customer_phone ?? r.sender ?? '' },
|
|
{ key: 'direction', label: '方向', format: (r) => smsDirectionLabel(r.direction) },
|
|
{ key: 'content', label: '内容', format: (r) => r.content ?? r.content_preview ?? '' },
|
|
],
|
|
filename: '短信记录',
|
|
})
|
|
ElMessage.success(`已导出 ${result.rows} 条`)
|
|
} catch (e) {
|
|
ElMessage.error(`导出失败：${(e as Error).message}`)
|
|
} finally {
|
|
exporting.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Read a raw_json camelCase key off an SMS, 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: Sms, camelKey: string): unknown {
|
|
return readField(row, camelKey)
|
|
}
|
|
|
|
function cellText(row: Sms, camelKey: string): string {
|
|
const v = cell(row, camelKey)
|
|
return v === null || v === undefined || v === '' ? '--' : String(v)
|
|
}
|
|
|
|
function timeCell(row: Sms, camelKey: string): number | undefined {
|
|
const v = cell(row, camelKey)
|
|
return typeof v === 'number' ? v : undefined
|
|
}
|
|
|
|
function openDrawer(row: Sms): void {
|
|
// Row click opens the all-fields drawer (which surfaces the full body too).
|
|
drawerSms.value = row
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
const drawerSections = computed(() =>
|
|
drawerSms.value ? buildSmsSections(drawerSms.value) : [],
|
|
)
|
|
|
|
const drawerFullBody = computed(() => {
|
|
const s = drawerSms.value
|
|
if (!s) return ''
|
|
return (
|
|
(typeof cell(s, 'sms') === 'string' ? (cell(s, 'sms') as string) : '') ||
|
|
s.content ||
|
|
s.content_preview ||
|
|
''
|
|
)
|
|
})
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="yk-sms">
|
|
<div class="yk-sms__header">
|
|
<div>
|
|
<h2 style="margin: 0 0 4px; font-size: 16px">短信记录</h2>
|
|
<span class="yk-sms__sub">共 {{ total }} 条</span>
|
|
</div>
|
|
<div class="yk-sms__actions">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
size="small"
|
|
clearable
|
|
style="width: 260px"
|
|
@change="onDateChange"
|
|
/>
|
|
<el-button size="small" :loading="exporting" @click="exportSms">
|
|
<el-icon><Download /></el-icon> 导出
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-alert
|
|
v-if="errorMsg"
|
|
:title="errorMsg"
|
|
type="error"
|
|
show-icon
|
|
:closable="false"
|
|
style="margin-bottom: 12px"
|
|
/>
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="list"
|
|
stripe
|
|
border
|
|
row-key="sms_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.create_time ?? timeCell(row, 'createTime')) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="员工" min-width="130">
|
|
<template #default="{ row }">
|
|
{{ row.receive_name || row.user_id || cellText(row, 'userId') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="客户号码" min-width="130">
|
|
<template #default="{ row }">
|
|
{{ row.customer_phone || row.sender || '--' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="方向" width="80">
|
|
<template #default="{ row }">{{ smsDirectionLabel(row.direction) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="内容预览" min-width="260">
|
|
<template #default="{ row }">
|
|
<span v-if="row.content_preview">{{ row.content_preview }}</span>
|
|
<span v-else-if="row.content">{{ row.content }}</span>
|
|
<span v-else style="color: #c0c4cc">--</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="yk-sms__pager">
|
|
<el-pagination
|
|
:current-page="page"
|
|
:page-size="pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
background
|
|
@current-change="handlePageChange"
|
|
@size-change="handlePageSizeChange"
|
|
/>
|
|
</div>
|
|
<p class="yk-sms__hint">点击任意一行查看短信全部字段。</p>
|
|
|
|
<!-- All-fields drawer -->
|
|
<el-drawer
|
|
v-model="drawerOpen"
|
|
:title="drawerSms ? `短信详情 · ${drawerSms.customer_phone ?? drawerSms.sms_id}` : '短信详情'"
|
|
direction="rtl"
|
|
size="560px"
|
|
>
|
|
<template v-if="drawerSms">
|
|
<div v-if="drawerFullBody" class="yk-sms__full">
|
|
<div class="yk-sms__full-label">短信全文</div>
|
|
<div class="yk-sms__full-body">{{ drawerFullBody }}</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 === 'empty'" class="yk-drawer__empty">—</dd>
|
|
<dd v-else>{{ f.text }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.yk-sms__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.yk-sms__sub {
|
|
color: #909399;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.yk-sms__actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.yk-sms__pager {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.yk-sms__hint {
|
|
margin: 8px 2px 0;
|
|
font-size: 12px;
|
|
color: #c0c4cc;
|
|
}
|
|
|
|
.yk-sms__full {
|
|
background: var(--el-fill-color-light, #f5f7fa);
|
|
border: 1px solid var(--el-border-color-light, #e4e7ed);
|
|
border-radius: 4px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.yk-sms__full-label {
|
|
color: #909399;
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.yk-sms__full-body {
|
|
font-size: 13px;
|
|
color: #303133;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.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__empty {
|
|
color: #c0c4cc;
|
|
}
|
|
</style>
|