From d1475e8f4228ad7fe0871b6a591462f7b94e2e1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 6 Aug 2026 17:52:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(customers):=20=E5=BE=AE=E4=BF=A1=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7=E6=93=8D=E4=BD=9C=E5=88=97=E5=8A=A0=E3=80=8C=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BAHTML=E8=81=8A=E5=A4=A9=E8=AE=B0=E5=BD=95=E3=80=8D+=20?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

对齐云客：先弹「请选择时间」→ 确定后调 /api/export/chat-html 下载。

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunkes/src/views/CustomerList.vue | 67 ++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/yunkes/src/views/CustomerList.vue b/yunkes/src/views/CustomerList.vue
index a46b184..b6b3475 100644
--- a/yunkes/src/views/CustomerList.vue
+++ b/yunkes/src/views/CustomerList.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { getCustomers } from '@/api'
+import { downloadBlob } from '@/api/client'
 import type { Channel, Customer } from '@/api/types'
 import { useChannelStore } from '@/stores/channel'
 import { useOrgStore } from '@/stores/org'
@@ -165,6 +166,45 @@ function viewChatFromDrawer(): void {
   viewChat(row)
 }
 
+// ---- 操作列：导出HTML聊天记录 → 弹「请选择时间」→ /api/export/chat-html ----
+// 对齐云客：先弹时间范围 modal（可选，不选=全部），确定后下载。
+const exportOpen = ref(false)
+const exportRow = ref<Customer | null>(null)
+// el-date-picker value-format="X" 绑定秒级 unix 字符串数组；confirmExport 里 *1000 转毫秒。
+const exportRange = ref<[string, string] | null>(null)
+
+function openExport(row: Customer): void {
+  if (!row.owner_account_id || !row.friend_id) {
+    ElMessage.warning('该客户缺少归属账号/客户标识，无法导出')
+    return
+  }
+  exportRow.value = row
+  exportRange.value = null
+  exportOpen.value = true
+}
+
+async function confirmExport(): Promise<void> {
+  const row = exportRow.value
+  if (!row) return
+  const params: Record<string, unknown> = {
+    channel: row.channel,
+    owner_account_id: row.owner_account_id,
+    talker_id: row.friend_id,
+  }
+  if (exportRange.value) {
+    // value-format="X" 返回秒级字符串，后端要毫秒
+    params.start = Number(exportRange.value[0]) * 1000
+    params.end = Number(exportRange.value[1]) * 1000
+  }
+  exportOpen.value = false
+  try {
+    await downloadBlob('/export/chat-html', params)
+    ElMessage.success('导出已开始')
+  } catch (e) {
+    ElMessage.error(`导出失败，请稍后重试：${(e as Error).message}`)
+  }
+}
+
 /** 清除 owner_account_id query（保留其余 query）。 */
 function clearOwnerFilter(): void {
   const { owner_account_id: _drop, ...rest } = route.query
@@ -298,11 +338,14 @@ onMounted(() => {
           <el-table-column label="接收条数" width="100" align="right">
             <template #default="{ row }">{{ cellNum(row, 'receiveNum') }}</template>
           </el-table-column>
-          <el-table-column label="操作" width="130" fixed="right" align="center">
+          <el-table-column label="操作" width="220" fixed="right" align="center">
             <template #default="{ row }">
               <el-button link type="primary" size="small" @click.stop="viewChat(row)">
                 查看聊天记录
               </el-button>
+              <el-button link type="primary" size="small" @click.stop="openExport(row)">
+                导出HTML聊天记录
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -438,6 +481,28 @@ onMounted(() => {
         </div>
       </template>
     </el-drawer>
+
+    <!-- 导出HTML聊天记录：时间范围选择（不选=导出全部） -->
+    <el-dialog v-model="exportOpen" title="请选择时间" width="420px" @close="exportRow = null">
+      <el-form label-width="90px">
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="exportRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            value-format="X"
+            format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="exportOpen = false">取 消</el-button>
+        <el-button type="primary" @click="confirmExport">确 定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>