index.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. <template>
  2. <el-skeleton :loading="loading" animated>
  3. <ContentWrap>
  4. <!-- 搜索工作栏 -->
  5. <el-form
  6. class="-mb-15px"
  7. :model="queryParams"
  8. ref="queryFormRef"
  9. :inline="true"
  10. label-width="68px"
  11. >
  12. <el-form-item label="文件名称" prop="fileName">
  13. <el-input
  14. v-model="queryParams.fileName"
  15. placeholder="请输入文件名称"
  16. clearable
  17. @keyup.enter="handleQuery"
  18. class="!w-240px"
  19. />
  20. </el-form-item>
  21. <el-form-item label="配置编号" prop="configId">
  22. <el-input
  23. v-model="queryParams.configId"
  24. placeholder="请输入配置编号"
  25. clearable
  26. @keyup.enter="handleQuery"
  27. class="!w-240px"
  28. />
  29. </el-form-item>
  30. <!-- <el-form-item label="路径" prop="path">-->
  31. <!-- <el-input-->
  32. <!-- v-model="queryParams.path"-->
  33. <!-- placeholder="请输入路径"-->
  34. <!-- clearable-->
  35. <!-- @keyup.enter="handleQuery"-->
  36. <!-- class="!w-240px"-->
  37. <!-- />-->
  38. <!-- </el-form-item>-->
  39. <!-- <el-form-item label="文件大小(字节)" prop="fileSize">-->
  40. <!-- <el-input-->
  41. <!-- v-model="queryParams.fileSize"-->
  42. <!-- placeholder="请输入文件大小(字节)"-->
  43. <!-- clearable-->
  44. <!-- @keyup.enter="handleQuery"-->
  45. <!-- class="!w-240px"-->
  46. <!-- />-->
  47. <!-- </el-form-item>-->
  48. <el-form-item label="文件类型" prop="fileType">
  49. <el-select
  50. v-model="queryParams.fileType"
  51. placeholder="请选择文件类型"
  52. clearable
  53. class="!w-240px"
  54. >
  55. <el-option label="请选择字典生成" value="" />
  56. </el-select>
  57. </el-form-item>
  58. <el-form-item label="上传时间" prop="uploadDate">
  59. <el-date-picker
  60. v-model="queryParams.uploadDate"
  61. value-format="YYYY-MM-DD HH:mm:ss"
  62. type="daterange"
  63. start-placeholder="开始日期"
  64. end-placeholder="结束日期"
  65. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  66. class="!w-220px"
  67. />
  68. </el-form-item>
  69. <el-form-item label="上传者" prop="uploadedBy">
  70. <el-input
  71. v-model="queryParams.uploadedBy"
  72. placeholder="请输入上传者"
  73. clearable
  74. @keyup.enter="handleQuery"
  75. class="!w-240px"
  76. />
  77. </el-form-item>
  78. <el-form-item label="创建时间" prop="createTime">
  79. <el-date-picker
  80. v-model="queryParams.createTime"
  81. value-format="YYYY-MM-DD HH:mm:ss"
  82. type="daterange"
  83. start-placeholder="开始日期"
  84. end-placeholder="结束日期"
  85. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  86. class="!w-220px"
  87. />
  88. </el-form-item>
  89. <el-form-item>
  90. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  91. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  92. <el-button
  93. type="primary"
  94. plain
  95. @click="openForm('create')"
  96. v-hasPermi="['museums:document:create']"
  97. >
  98. <Icon icon="ep:plus" class="mr-5px" /> 新增
  99. </el-button>
  100. <el-button
  101. type="success"
  102. plain
  103. @click="handleExport"
  104. :loading="exportLoading"
  105. v-hasPermi="['museums:document:export']"
  106. >
  107. <Icon icon="ep:download" class="mr-5px" /> 导出
  108. </el-button>
  109. </el-form-item>
  110. </el-form>
  111. </ContentWrap>
  112. <!-- 列表 -->
  113. <ContentWrap>
  114. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @selection-change="handleSelectionChange">
  115. <el-table-column type="selection" width="55" />
  116. <el-table-column label="id" align="center" prop="id" width="80px"/>
  117. <el-table-column label="文件名称" align="center" prop="name" />
  118. <!-- <el-table-column label="配置编号" align="center" prop="configId" />-->
  119. <!-- <el-table-column label="路径" align="center" prop="path" />-->
  120. <el-table-column label="文件 URL" align="center" prop="url" />
  121. <el-table-column
  122. label="文件大小"
  123. align="center"
  124. prop="size"
  125. width="100"
  126. :formatter="fileSizeFormatter"
  127. />
  128. <el-table-column label="文件类型" align="center" prop="type" width="180px" />
  129. <el-table-column
  130. label="创建时间"
  131. align="center"
  132. prop="createTime"
  133. :formatter="dateFormatter"
  134. width="180px"
  135. />
  136. <el-table-column label="文件内容" align="center" prop="url" >
  137. <template #default="{ row }">
  138. <el-image
  139. v-if="row.type.includes('image')"
  140. class="h-80px w-80px"
  141. lazy
  142. :src="row.url"
  143. :preview-src-list="[row.url]"
  144. preview-teleported
  145. fit="cover"
  146. />
  147. <el-link
  148. v-else-if="row.type.includes('pdf')"
  149. type="primary"
  150. :href="row.url"
  151. :underline="false"
  152. target="_blank"
  153. >预览</el-link
  154. >
  155. <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank"
  156. >下载</el-link
  157. >
  158. </template>
  159. </el-table-column>
  160. <!-- <el-table-column-->
  161. <!-- label="上传时间"-->
  162. <!-- align="center"-->
  163. <!-- prop="uploadDate"-->
  164. <!-- :formatter="dateFormatter"-->
  165. <!-- width="180px"-->
  166. <!-- />-->
  167. <!-- <el-table-column label="上传者" align="center" prop="uploadedBy" />-->
  168. <el-table-column label="操作" align="center" >
  169. <template #default="scope">
  170. <!-- <el-button-->
  171. <!-- link-->
  172. <!-- type="primary"-->
  173. <!-- @click="openForm('update', scope.row.id)"-->
  174. <!-- v-hasPermi="['museums:document:update']"-->
  175. <!-- >-->
  176. <!-- 编辑-->
  177. <!-- </el-button>-->
  178. <el-button
  179. link
  180. type="danger"
  181. @click="handleDelete(scope.row.id)"
  182. v-hasPermi="['museums:document:delete']"
  183. >
  184. 删除
  185. </el-button>
  186. </template>
  187. </el-table-column>
  188. </el-table>
  189. <!-- 分页 -->
  190. <Pagination
  191. :total="total"
  192. v-model:page="queryParams.pageNo"
  193. v-model:limit="queryParams.pageSize"
  194. @pagination="getList"
  195. />
  196. </ContentWrap>
  197. <!-- 表单弹窗:添加/修改 -->
  198. <DocumentForm ref="formRef" @success="getList" />
  199. </el-skeleton>
  200. </template>
  201. <script setup lang="ts">
  202. import { dateFormatter } from '@/utils/formatTime'
  203. import download from '@/utils/download'
  204. import { DocumentApi, DocumentVO } from '@/api/museums/museumsdocument'
  205. import DocumentForm from './DocumentForm.vue'
  206. import {fileSizeFormatter} from "@/utils";
  207. import { useRoute} from 'vue-router';
  208. import JSZip from 'jszip';
  209. import { saveAs } from 'file-saver';
  210. import {ref} from "vue";
  211. /** 博物馆文件管理 列表 */
  212. defineOptions({ name: 'MuseumsDocument' })
  213. const message = useMessage() // 消息弹窗
  214. const { t } = useI18n() // 国际化
  215. const loading = ref(true) // 列表的加载中
  216. const list = ref<DocumentVO[]>([]) // 列表的数据
  217. const total = ref(0) // 列表的总页数
  218. const queryParams = reactive({
  219. pageNo: 1,
  220. pageSize: 10,
  221. fileName: undefined,
  222. configId: undefined,
  223. path: undefined,
  224. url: undefined,
  225. fileSize: undefined,
  226. fileType: undefined,
  227. uploadDate: [],
  228. uploadedBy: undefined,
  229. createTime: []
  230. })
  231. const queryFormRef = ref() // 搜索的表单
  232. const exportLoading = ref(false) // 导出的加载中
  233. const selectedPhotos = ref<any[]>([]) // 选中的文件
  234. /** 查询列表 */
  235. const getList = async () => {
  236. loading.value = true
  237. try {
  238. const data = await DocumentApi.getDocumentPage(queryParams)
  239. list.value = data.list
  240. total.value = data.total
  241. console.log(queryParams)
  242. } finally {
  243. loading.value = false
  244. }
  245. }
  246. /** 搜索按钮操作 */
  247. const handleQuery = () => {
  248. queryParams.pageNo = 1
  249. getList()
  250. }
  251. /** 重置按钮操作 */
  252. const resetQuery = () => {
  253. queryFormRef.value.resetFields()
  254. handleQuery()
  255. }
  256. /** 添加/修改操作 */
  257. const formRef = ref()
  258. const openForm = (type: string, id?: number) => {
  259. formRef.value.open(type, id)
  260. }
  261. /** 删除按钮操作 */
  262. const handleDelete = async (id: number) => {
  263. try {
  264. // 删除的二次确认
  265. await message.delConfirm()
  266. // 发起删除
  267. await DocumentApi.deleteDocument(id)
  268. message.success(t('common.delSuccess'))
  269. // 刷新列表
  270. await getList()
  271. } catch {}
  272. }
  273. /** 处理选中变化 */
  274. const handleSelectionChange = (selection: any[]) => {
  275. selectedPhotos.value = selection
  276. console.log("selectedPhotos.value",selectedPhotos.value)
  277. }
  278. /** 导出按钮操作 */
  279. const handleExport = async () => {
  280. try {
  281. // 导出的二次确认
  282. await message.exportConfirm()
  283. // 发起导出
  284. exportLoading.value = true
  285. if (selectedPhotos.value.length === 0) {
  286. message.warning('请勾选要导出的文件')
  287. return
  288. }
  289. const zip = new JSZip();
  290. const promises = selectedPhotos.value.map(async (photo) => {
  291. console.log("photo",photo)
  292. const response = await fetch(photo.url);
  293. const blob = await response.blob();
  294. zip.file(`${photo.name}`, blob)
  295. });
  296. await Promise.all(promises);
  297. const content = await zip.generateAsync({ type: 'blob' });
  298. saveAs(content, '选中的文件.zip');
  299. } catch {
  300. message.error('导出失败')
  301. } finally {
  302. exportLoading.value = false
  303. }
  304. }
  305. /** 初始化 **/
  306. onMounted(() => {
  307. getList()
  308. })
  309. </script>