feat(plan): 实现计划书文档查看功能
- 集成 useFileOperation composable 实现统一文件操作 - 添加 PDF 文档查看功能,支持下载和预览 - 更新 mock 数据,添加 fileName 和 downloadUrl 字段 - 实现生成中状态的友好提示 - 添加完整的 JSDoc 注释 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
55 additions
and
6 deletions
| ... | @@ -81,12 +81,15 @@ | ... | @@ -81,12 +81,15 @@ |
| 81 | <script setup> | 81 | <script setup> |
| 82 | import { ref, computed } from 'vue' | 82 | import { ref, computed } from 'vue' |
| 83 | import { useGo } from '@/hooks/useGo' | 83 | import { useGo } from '@/hooks/useGo' |
| 84 | +import { useFileOperation } from '@/composables/useFileOperation' | ||
| 84 | import IconFont from '@/components/IconFont.vue' | 85 | import IconFont from '@/components/IconFont.vue' |
| 85 | import TabBar from '@/components/TabBar.vue' | 86 | import TabBar from '@/components/TabBar.vue' |
| 86 | import NavHeader from '@/components/NavHeader.vue' | 87 | import NavHeader from '@/components/NavHeader.vue' |
| 87 | import Taro from '@tarojs/taro' | 88 | import Taro from '@tarojs/taro' |
| 88 | 89 | ||
| 89 | const go = useGo() | 90 | const go = useGo() |
| 91 | +const { viewFile } = useFileOperation() | ||
| 92 | + | ||
| 90 | const searchValue = ref('') | 93 | const searchValue = ref('') |
| 91 | const activeTab = ref(0) | 94 | const activeTab = ref(0) |
| 92 | const tabs = [ | 95 | const tabs = [ |
| ... | @@ -95,6 +98,12 @@ const tabs = [ | ... | @@ -95,6 +98,12 @@ const tabs = [ |
| 95 | { title: '已生成', key: 'generated' } | 98 | { title: '已生成', key: 'generated' } |
| 96 | ] | 99 | ] |
| 97 | 100 | ||
| 101 | +/** | ||
| 102 | + * Mock 数据:计划书列表 | ||
| 103 | + * | ||
| 104 | + * @description 使用真实 PDF 文件进行测试 | ||
| 105 | + * downloadUrl 使用 Mozilla 的公开 PDF 测试文件 | ||
| 106 | + */ | ||
| 98 | const list = ref([ | 107 | const list = ref([ |
| 99 | { | 108 | { |
| 100 | id: 1, | 109 | id: 1, |
| ... | @@ -102,7 +111,10 @@ const list = ref([ | ... | @@ -102,7 +111,10 @@ const list = ref([ |
| 102 | client: '客户:李*生', | 111 | client: '客户:李*生', |
| 103 | date: '2024-03-15 10:12', | 112 | date: '2024-03-15 10:12', |
| 104 | tag: '年金保险', | 113 | tag: '年金保险', |
| 105 | - status: 'generated' | 114 | + status: 'generated', |
| 115 | + // 文档信息 | ||
| 116 | + fileName: '家庭财富传承保障计划(分红).pdf', | ||
| 117 | + downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf' | ||
| 106 | }, | 118 | }, |
| 107 | { | 119 | { |
| 108 | id: 2, | 120 | id: 2, |
| ... | @@ -110,7 +122,10 @@ const list = ref([ | ... | @@ -110,7 +122,10 @@ const list = ref([ |
| 110 | client: '客户:孙*', | 122 | client: '客户:孙*', |
| 111 | date: '2024-03-14 12:01', | 123 | date: '2024-03-14 12:01', |
| 112 | tag: '', | 124 | tag: '', |
| 113 | - status: 'processing' | 125 | + status: 'processing', |
| 126 | + // 生成中的文档没有下载地址 | ||
| 127 | + fileName: '', | ||
| 128 | + downloadUrl: '' | ||
| 114 | }, | 129 | }, |
| 115 | { | 130 | { |
| 116 | id: 3, | 131 | id: 3, |
| ... | @@ -118,7 +133,10 @@ const list = ref([ | ... | @@ -118,7 +133,10 @@ const list = ref([ |
| 118 | client: '客户:王*江', | 133 | client: '客户:王*江', |
| 119 | date: '2024-03-13 09:23', | 134 | date: '2024-03-13 09:23', |
| 120 | tag: '年金保险', | 135 | tag: '年金保险', |
| 121 | - status: 'generated' | 136 | + status: 'generated', |
| 137 | + // 文档信息 | ||
| 138 | + fileName: '企业高管年金计划.pdf', | ||
| 139 | + downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf' | ||
| 122 | }, | 140 | }, |
| 123 | { | 141 | { |
| 124 | id: 4, | 142 | id: 4, |
| ... | @@ -126,10 +144,16 @@ const list = ref([ | ... | @@ -126,10 +144,16 @@ const list = ref([ |
| 126 | client: '客户:李*生', | 144 | client: '客户:李*生', |
| 127 | date: '2024-03-12 15:12', | 145 | date: '2024-03-12 15:12', |
| 128 | tag: '年金保险', | 146 | tag: '年金保险', |
| 129 | - status: 'generated' | 147 | + status: 'generated', |
| 148 | + // 文档信息 | ||
| 149 | + fileName: '家庭财富传承保障计划.pdf', | ||
| 150 | + downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf' | ||
| 130 | } | 151 | } |
| 131 | ]) | 152 | ]) |
| 132 | 153 | ||
| 154 | +/** | ||
| 155 | + * 根据标签页和搜索关键词过滤列表 | ||
| 156 | + */ | ||
| 133 | const filteredList = computed(() => { | 157 | const filteredList = computed(() => { |
| 134 | let result = list.value | 158 | let result = list.value |
| 135 | 159 | ||
| ... | @@ -151,14 +175,39 @@ const filteredList = computed(() => { | ... | @@ -151,14 +175,39 @@ const filteredList = computed(() => { |
| 151 | return result | 175 | return result |
| 152 | }) | 176 | }) |
| 153 | 177 | ||
| 178 | +/** | ||
| 179 | + * 搜索处理 | ||
| 180 | + */ | ||
| 154 | const onSearch = (val) => { | 181 | const onSearch = (val) => { |
| 155 | console.log('Search:', val) | 182 | console.log('Search:', val) |
| 156 | } | 183 | } |
| 157 | 184 | ||
| 158 | -const onView = (item) => { | 185 | +/** |
| 159 | - Taro.showToast({ title: `查看: ${item.title}`, icon: 'none' }) | 186 | + * 查看计划书文档 |
| 187 | + * | ||
| 188 | + * @description 使用 useFileOperation 的 viewFile 功能查看 PDF 文档 | ||
| 189 | + * @param {Object} item - 计划书对象 | ||
| 190 | + */ | ||
| 191 | +const onView = async (item) => { | ||
| 192 | + // 检查是否已生成 | ||
| 193 | + if (item.status === 'processing') { | ||
| 194 | + Taro.showToast({ | ||
| 195 | + title: '计划书生成中,请稍后', | ||
| 196 | + icon: 'none' | ||
| 197 | + }) | ||
| 198 | + return | ||
| 199 | + } | ||
| 200 | + | ||
| 201 | + // 使用 useFileOperation 查看文档 | ||
| 202 | + await viewFile({ | ||
| 203 | + downloadUrl: item.downloadUrl, | ||
| 204 | + fileName: item.fileName | ||
| 205 | + }) | ||
| 160 | } | 206 | } |
| 161 | 207 | ||
| 208 | +/** | ||
| 209 | + * 删除计划书 | ||
| 210 | + */ | ||
| 162 | const onDelete = (item) => { | 211 | const onDelete = (item) => { |
| 163 | Taro.showModal({ | 212 | Taro.showModal({ |
| 164 | title: '提示', | 213 | title: '提示', | ... | ... |
-
Please register or login to post a comment