hookehuyr

feat(plan): 实现计划书文档查看功能

- 集成 useFileOperation composable 实现统一文件操作
- 添加 PDF 文档查看功能,支持下载和预览
- 更新 mock 数据,添加 fileName 和 downloadUrl 字段
- 实现生成中状态的友好提示
- 添加完整的 JSDoc 注释

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -81,12 +81,15 @@
<script setup>
import { ref, computed } from 'vue'
import { useGo } from '@/hooks/useGo'
import { useFileOperation } from '@/composables/useFileOperation'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const go = useGo()
const { viewFile } = useFileOperation()
const searchValue = ref('')
const activeTab = ref(0)
const tabs = [
......@@ -95,6 +98,12 @@ const tabs = [
{ title: '已生成', key: 'generated' }
]
/**
* Mock 数据:计划书列表
*
* @description 使用真实 PDF 文件进行测试
* downloadUrl 使用 Mozilla 的公开 PDF 测试文件
*/
const list = ref([
{
id: 1,
......@@ -102,7 +111,10 @@ const list = ref([
client: '客户:李*生',
date: '2024-03-15 10:12',
tag: '年金保险',
status: 'generated'
status: 'generated',
// 文档信息
fileName: '家庭财富传承保障计划(分红).pdf',
downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
},
{
id: 2,
......@@ -110,7 +122,10 @@ const list = ref([
client: '客户:孙*',
date: '2024-03-14 12:01',
tag: '',
status: 'processing'
status: 'processing',
// 生成中的文档没有下载地址
fileName: '',
downloadUrl: ''
},
{
id: 3,
......@@ -118,7 +133,10 @@ const list = ref([
client: '客户:王*江',
date: '2024-03-13 09:23',
tag: '年金保险',
status: 'generated'
status: 'generated',
// 文档信息
fileName: '企业高管年金计划.pdf',
downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
},
{
id: 4,
......@@ -126,10 +144,16 @@ const list = ref([
client: '客户:李*生',
date: '2024-03-12 15:12',
tag: '年金保险',
status: 'generated'
status: 'generated',
// 文档信息
fileName: '家庭财富传承保障计划.pdf',
downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
}
])
/**
* 根据标签页和搜索关键词过滤列表
*/
const filteredList = computed(() => {
let result = list.value
......@@ -151,14 +175,39 @@ const filteredList = computed(() => {
return result
})
/**
* 搜索处理
*/
const onSearch = (val) => {
console.log('Search:', val)
}
const onView = (item) => {
Taro.showToast({ title: `查看: ${item.title}`, icon: 'none' })
/**
* 查看计划书文档
*
* @description 使用 useFileOperation 的 viewFile 功能查看 PDF 文档
* @param {Object} item - 计划书对象
*/
const onView = async (item) => {
// 检查是否已生成
if (item.status === 'processing') {
Taro.showToast({
title: '计划书生成中,请稍后',
icon: 'none'
})
return
}
// 使用 useFileOperation 查看文档
await viewFile({
downloadUrl: item.downloadUrl,
fileName: item.fileName
})
}
/**
* 删除计划书
*/
const onDelete = (item) => {
Taro.showModal({
title: '提示',
......