From 1d552a3bad95caae4af15322df28e6240b797693 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 13 Aug 2026 15:32:06 +0800
Subject: [PATCH] feat: app视频封面图
---
applications/task-work-order/src/views/orderView/orderManage/inspectionReport/index.vue | 265 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 176 insertions(+), 89 deletions(-)
diff --git a/applications/task-work-order/src/views/orderView/orderManage/inspectionReport/index.vue b/applications/task-work-order/src/views/orderView/orderManage/inspectionReport/index.vue
index 4c99877..4a1b61f 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/inspectionReport/index.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/inspectionReport/index.vue
@@ -13,21 +13,16 @@
</el-form-item>
<el-form-item label="文档类型" prop="resultType">
- <el-select
- class="gd-select gray"
- popper-class="gd-select-popper"
+ <el-cascader
+ class="gd-cascader gray"
+ popper-class="gd-cascader-popper"
v-model="searchParams.resultType"
+ :options="workOrderTypeXT"
+ :props="taskTypeCascaderProps"
placeholder="请选择"
clearable
@change="handleSearch"
- >
- <el-option
- v-for="item in dictObj.patrolTaskType"
- :key="item.dictKey"
- :label="item.dictValue"
- :value="item.dictKey"
- />
- </el-select>
+ />
</el-form-item>
<el-form-item class="gd-search-actions">
@@ -36,17 +31,21 @@
</el-form-item>
</el-form>
- <div class="gd-table-toolbar">
- <el-button :icon="Download" color="#4C34FF" type="primary" @click="handleDownload">文档下载</el-button>
- <el-button :icon="Upload" color="#4C34FF" type="primary" @click="handleUpload">文档上传</el-button>
- </div>
-
<div class="gd-table-container" v-loading="loading">
+ <div class="gd-table-toolbar">
+ <el-button :icon="Download" color="#4C34FF" type="primary" @click="handleDownload">文档下载</el-button>
+ <el-button :icon="Upload" color="#ECECF4" type="primary" @click="handleUpload">文档上传</el-button>
+ </div>
+
<div class="gd-table-content gd-table-content-bg">
<el-table class="gd-table" :data="list" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="46" />
<el-table-column type="index" width="64" label="序号" />
- <el-table-column prop="nickName" show-overflow-tooltip label="文档名称" />
+ <el-table-column prop="nickName" class-name="operation-btns" show-overflow-tooltip label="文档名称">
+ <template v-slot="{ row }">
+ <el-link type="primary" @click="openForm(row)">{{ row.nickName }}</el-link>
+ </template>
+ </el-table-column>
<el-table-column prop="attachSize" show-overflow-tooltip label="文档大小">
<template v-slot="{ row }">
{{ formatFileSize(row.attachSize) }}
@@ -56,13 +55,13 @@
<!-- <el-table-column prop="resultType" show-overflow-tooltip label="文档类型" /> -->
<el-table-column prop="resultType" show-overflow-tooltip label="文档类型">
<template v-slot="{ row }">
- {{ getDictLabel(row.resultType, dictObj.patrolTaskType) }}
+ {{ getTaskTypeLabel(row.resultType, workOrderTypeXT) }}
</template>
</el-table-column>
- <el-table-column label="操作" class-name="operation-btns">
+ <el-table-column label="操作" class-name="operation-btns" fixed="right">
<template v-slot="{ row }">
<el-link type="primary" @click="seeOnlineWord(row)">查看</el-link>
- <el-link type="primary" @click="openForm(row)">在线编辑</el-link>
+ <el-link type="primary" :disabled="isZipRow(row)" @click="openOfficeEdit(row)">在线编辑</el-link>
<el-link type="primary" @click="handleDelete(row)">删除</el-link>
</template>
</el-table-column>
@@ -82,39 +81,36 @@
</div>
<el-dialog
class="gd-dialog"
- append-to-body
v-model="isShowEditView"
:title="titleTxt"
- :width="pxToRem(800)"
+ :width="pxToRem(500)"
:close-on-click-modal="false"
:destroy-on-close="true"
@close="handleClose"
>
- <el-form class="gd-dialog-form" ref="ruleFormRef" :model="editParams" :rules="rules" label-width="140px">
+ <el-form class="gd-dialog-form" ref="ruleFormRef" :model="editParams" :rules="rules">
<el-form-item label="文档名称" prop="nickName">
<el-input v-model="editParams.nickName" class="gd-input" placeholder="请输入" />
</el-form-item>
<el-form-item label="文档类型" prop="resultType" v-if="titleTxt === '上传巡查报告'">
- <el-select
- class="gd-select"
- popper-class="gd-select-popper"
+ <el-cascader
+ class="gd-cascader"
+ popper-class="gd-cascader-popper"
v-model="editParams.resultType"
+ :options="workOrderTypeXT"
+ :props="{ ...taskTypeCascaderProps, multiple: true }"
placeholder="请选择"
clearable
- >
- <el-option
- v-for="item in dictObj.patrolTaskType"
- :key="item.dictKey"
- :label="item.dictValue"
- :value="item.dictKey"
- />
- </el-select>
+ collapse-tags
+ />
</el-form-item>
<el-form-item label="上传文件" prop="link" v-if="titleTxt === '上传巡查报告'">
- {{ uploadName }}
<el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="onUploadFileBefore">
- <el-button size="small" type="primary">点击上传</el-button>
+ <el-button class="gd-upload-btn" type="primary">点击上传</el-button>
</el-upload>
+ <div class="upload-tip">
+ {{ uploadName }}
+ </div>
</el-form-item>
</el-form>
<!-- </div> -->
@@ -141,18 +137,21 @@
</basic-container>
</template>
<script setup>
-import { Search, RefreshRight, Download, Upload, Delete } from '@element-plus/icons-vue'
-import { fjPageApi, fjSubmitApi, fjRemoveApi, fjDetailApi, fjUploadApi,fjDownloadByByteApi } from './inspectionRequestApi'
-import { useStore } from 'vuex'
-import { ref, computed, inject, onMounted } from 'vue'
-import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
-import { getDictLabel } from '@ztzf/utils'
+import { Search, RefreshRight, Download, Upload } from '@element-plus/icons-vue'
+import { fjPageApi, fjSubmitApi, fjRemoveApi, fjUploadApi, fjDownloadByByteApi } from './inspectionRequestApi'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
import PreviewFiles from '@/components/PreviewFiles/PreviewFiles.vue'
-import { getDictionaryByCode } from '@/api/system/dictbiz'
import { Base64 } from 'js-base64'
+import { getDictListApi } from '@/api/zkxt'
+import {
+ getTaskTypeLabel,
+ normalizeTaskTypeOptions,
+ taskTypeCascaderProps,
+} from '../taskTypeOptions'
-const store = useStore()
-const userInfo = computed(() => store.getters.userInfo)
+const router = useRouter()
@@ -172,9 +171,7 @@
// 上传名称
const uploadName = ref('')
-const dictObj = ref({
- patrolTaskType: [], // 巡查任务类型
-})
+const workOrderTypeXT = ref([])
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
@@ -202,9 +199,13 @@
// 获取字典
function getDictList() {
- getDictionaryByCode('patrolTaskType').then(res => {
- dictObj.value = res.data.data
+ getDictListApi('task_inspection_type').then(res => {
+ workOrderTypeXT.value = normalizeTaskTypeOptions(res.data.data || [])
})
+}
+
+function toTaskTypeQueryValue(value) {
+ return Array.isArray(value) ? value.join(',') : value
}
// 将字节大小转换为可读格式的函数
@@ -220,7 +221,10 @@
async function getList() {
loading.value = true
try {
- const res = await fjPageApi({ ...searchParams.value })
+ const res = await fjPageApi({
+ ...searchParams.value,
+ resultType: toTaskTypeQueryValue(searchParams.value.resultType),
+ })
list.value = res?.data?.data?.records ?? []
total.value = res?.data?.data?.total ?? 0
} finally {
@@ -268,17 +272,66 @@
];
const { VITE_APP_PREVIEW_URL } = import.meta.env
+// kkfileView 中，word/pdf 默认转成只读 pdf 预览，excel 才是可编辑的 html 模式。
+// 对这些类型追加 officePreviewType=html，让其以可编辑的 html 方式打开
+const editableOfficeTypes = ['doc', 'docx', 'pdf']
+
// 在线查看文档
function seeOnlineWord(row) {
// 获取点之后的文件格式名
- const fileType = row?.link?.split('.').pop() || ''
+ const fileType = (row?.link?.split('.').pop() || '').toLowerCase()
if (!row.link) {
ElMessage.warning('文件链接不存在')
} else if (allSupportedExtensions.includes(fileType)){
- window.open(`${VITE_APP_PREVIEW_URL}/onlinePreview?url=`+encodeURIComponent(Base64.encode(row.link)));
+ // let url = `${VITE_APP_PREVIEW_URL}/onlinePreview?url=` + encodeURIComponent(Base64.encode(row.link))
+ // // word/pdf 以可编辑的 html 模式打开（与 excel 一致）
+ // if (editableOfficeTypes.includes(fileType)) {
+ // url += '&officePreviewType=html'
+ // }
+ // window.open(url)
+ const route = router.resolve({
+ path: '/documentPreview/officeEdit',
+ query: {
+ attachId: row.id,
+ mode: 'view',
+ },
+ })
+ window.open(route.href, '_blank')
} else {
ElMessage.warning(`${fileType}文件格式，可以下载再查看`)
}
+}
+
+// 取行的文件扩展名（列表数据没有 extension 字段，回退用 link 解析）
+function getRowExtension(row) {
+ return (row?.extension || row?.link?.split('.').pop() || '').toLowerCase()
+}
+
+// 是否为 zip 文件（zip 不支持在线编辑）
+function isZipRow(row) {
+ return getRowExtension(row) === 'zip'
+}
+
+function openOfficeEdit(row) {
+ if (!row?.id) {
+ ElMessage.warning('附件ID不存在')
+ return
+ }
+ if (isZipRow(row)) {
+ ElMessage.warning('zip文件格式，不能编辑')
+ return
+ }
+
+ const route = router.resolve({
+ path: '/documentPreview/officeEdit',
+ query: {
+ attachId: row.id,
+ mode: 'edit',
+ },
+ })
+ window.open(route.href, '_blank')
+ // 标记已跳转去编辑，切回本页时刷新列表
+ pendingEditRefresh = true
}
// 删除
@@ -311,43 +364,53 @@
ElMessage.warning('请选择要下载的文件')
return
}
- if (selectedFiles.value.length === 1) {
- selectedFiles.value.forEach((file, index) => {
- // setTimeout(() => {
- if (file.link) {
- const a = document.createElement('a')
- a.href = file.link
- a.download = file.originalName || `attachment_${index + 1}`
- document.body.appendChild(a)
- a.click()
- document.body.removeChild(a)
- }
- // }, index * 300) // 300ms delay between downloads
- })
- } else {
- // 批量下载
- try {
- console.log(selectedFiles.value, '9999')
- loadingData = ElLoading.service({ background: 'rgba(0, 0, 0, 0.5)', text: '打包中，请稍等...' })
- const fileIds = selectedFiles.value.map(i => i.id)
- // const res = await getDownloadStatusApi({ type: 'dpsjzx' })
- // if (!['CANCELLED', 'COMPLETED'].includes(res.data.data?.status || 'COMPLETED')) {
- // return ElMessage.warning('还有正在处理的')
- // }
- console.log(fileIds, '7777')
+ // if (selectedFiles.value.length === 1) {
+ // selectedFiles.value.forEach(async (file, index) => {
+ // if (file.link) {
+ // try {
+ // // 使用 fetch 获取 blob 数据来强制下载，避免浏览器打开文件
+ // const response = await fetch(file.link)
+ // if (!response.ok) {
+ // throw new Error(`Failed to fetch file: ${response.status}`)
+ // }
+ // const blob = await response.blob()
+ // const url = URL.createObjectURL(blob)
+ // const a = document.createElement('a')
+ // a.href = url
+ // a.download = file.originalName || `attachment_${index + 1}`
+ // document.body.appendChild(a)
+ // a.click()
+ // document.body.removeChild(a)
+ // // 释放 URL 对象
+ // setTimeout(() => URL.revokeObjectURL(url), 100)
+ // ElMessage.success('下载成功')
+ // } catch (error) {
+ // console.error('Download error:', error)
+ // ElMessage.error(`下载文件 ${file.originalName} 失败: ${error.message}`)
+ // }
+ // }
+ // })
+ // } else {
+ try {
+ const fileIds = selectedFiles.value.map(i => i.id).join(',')
await fjDownloadByByteApi({ attachIds: fileIds }).then(res => {
- if (res.data.code === 200) {
+ const blob = res.data
+ const url = URL.createObjectURL(blob)
+ const a = document.createElement('a')
+ a.href = url
+ a.download = `巡查报告.zip`
+ document.body.appendChild(a)
+ a.click()
+ document.body.removeChild(a)
+ URL.revokeObjectURL(url)
ElMessage.success('下载成功')
- } else {
- ElMessage.error(res.msg || '下载失败')
- }
- })
- } catch (e) {
- } finally {
- loadingData.close()
- }
+ })
+ } catch (e) {
+ } finally {
+ // loadingData.close()
+ }
- }
+ // }
}
// 文档上传
@@ -390,7 +453,7 @@
if (valid) {
submitting.value = true
try {
- await fjSubmitApi({ ...editParams.value })
+ await fjSubmitApi(editParams.value)
ElMessage.success('保存成功')
isShowEditView.value = false
getList()
@@ -412,9 +475,33 @@
}
}
+// 在线编辑跳转标记：从编辑页切回本页时刷新列表
+let pendingEditRefresh = false
+function handleVisibilityChange() {
+ if (document.visibilityState === 'visible' && pendingEditRefresh) {
+ pendingEditRefresh = false
+ getList()
+ }
+}
+
onMounted(() => {
getDictList()
getList()
+ document.addEventListener('visibilitychange', handleVisibilityChange)
+})
+
+onBeforeUnmount(() => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange)
})
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+// 操作列里链接的文字（span）被主题强制刷成蓝色 #0075FF，
+// 禁用时需在这里把 span 一并置灰，否则「在线编辑」禁用了还是蓝的
+:deep(.operation-btns) {
+ .el-link.is-disabled,
+ .el-link.is-disabled span {
+ color: #c0c4cc !important;
+ cursor: not-allowed !important;
+ }
+}
+</style>
--
Gitblit v1.9.3