| | |
| | | <!-- 巡查报告管理 --> |
| | | <template> |
| | | <basic-container> |
| | | <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form"> |
| | | <basic-container> |
| | | <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form"> |
| | | <el-form-item label="模糊搜索" prop="nickName"> |
| | | <el-input |
| | | class="gd-input" |
| | | class="gd-input gray" |
| | | v-model="searchParams.nickName" |
| | | placeholder="请输入" |
| | | clearable |
| | |
| | | |
| | | <el-form-item label="文档类型" prop="resultType"> |
| | | <el-select |
| | | class="gd-select" |
| | | class="gd-select gray" |
| | | popper-class="gd-select-popper" |
| | | v-model="searchParams.resultType" |
| | | placeholder="请选择" |
| | |
| | | @change="handleSearch" |
| | | > |
| | | <el-option |
| | | v-for="item in dictObj.patrolTaskType" |
| | | v-for="item in dictObj.workOrderType" |
| | | :key="item.dictKey" |
| | | :label="item.dictValue" |
| | | :value="item.dictKey" |
| | |
| | | </el-form> |
| | | |
| | | <div class="gd-table-toolbar"> |
| | | <el-button :icon="Download" color="#4C34FF" type="primary" @click="handleDownload">文档下载</el-button> |
| | | <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-container" v-loading="loading"> |
| | | <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="attachSize" show-overflow-tooltip label="文档大小" /> |
| | | <el-table-column prop="attachSize" show-overflow-tooltip label="文档大小"> |
| | | <template v-slot="{ row }"> |
| | | {{ formatFileSize(row.attachSize) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deptName" show-overflow-tooltip label="文档归属" /> |
| | | <!-- <el-table-column prop="resultType" show-overflow-tooltip label="文档类型" /> --> |
| | | <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) }} |
| | | {{ getDictLabel(row.resultType, dictObj.workOrderType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" class-name="operation-btns"> |
| | | <template v-slot="{ row }"> |
| | | <el-link @click="seeOnlineWord(item)">查看</el-link> |
| | | <el-link @click="openForm(row)">在线编辑</el-link> |
| | | <el-link @click="handleDelete(row)">删除</el-link> |
| | | <el-link type="primary" @click="seeOnlineWord(row)">查看</el-link> |
| | | <el-link type="primary" @click="openForm(row)">在线编辑</el-link> |
| | | <el-link type="primary" @click="handleDelete(row)">删除</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | /> |
| | | </div> |
| | | </div> |
| | | <el-dialog class="gd-dialog" append-to-body v-model="isShowEditView" :title="titleTxt" |
| | | :width="pxToRem(800)" :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-item label="文档名称" prop="nickName"> |
| | | <el-input v-model="editParams.nickName" /> |
| | | </el-form-item> |
| | | <el-form-item label="文档类型" prop="resultType" v-if="titleTxt === '上传巡查报告'"> |
| | | <el-select |
| | | class="gd-select" |
| | | popper-class="gd-select-popper" |
| | | v-model="editParams.resultType" |
| | | placeholder="请选择" |
| | | clearable |
| | | <el-dialog |
| | | class="gd-dialog" |
| | | v-model="isShowEditView" |
| | | :title="titleTxt" |
| | | :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-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" |
| | | v-model="editParams.resultType" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in dictObj.workOrderType" |
| | | :key="item.dictKey" |
| | | :label="item.dictValue" |
| | | :value="item.dictKey" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="上传文件" prop="link" v-if="titleTxt === '上传巡查报告'"> |
| | | <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="onUploadFileBefore"> |
| | | <el-button size="small" type="primary">点击上传</el-button> |
| | | </el-upload> |
| | | <div class="upload-tip"> |
| | | {{ uploadName }} |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- </div> --> |
| | | <template #footer> |
| | | <el-button color="#F2F3F5" @click="isShowEditView = false">取消</el-button> |
| | | <el-button |
| | | class="" |
| | | color="#4C34FF" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="submit(ruleFormRef)" |
| | | > |
| | | <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 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-upload> |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- </div> --> |
| | | <template #footer> |
| | | <el-button color="#F2F3F5" @click="isShowEditView = false">取消</el-button> |
| | | <el-button class="save-btn" color="#4C34FF" :loading="submitting" :disabled="submitting" @click="submit(ruleFormRef)"> |
| | | 保存 |
| | | </el-button> |
| | | </template> |
| | | </el-dialog> |
| | | <PreviewFiles v-model="previewVisible" :src="searchUrl" type="docx"/> |
| | | <el-image v-if="previewVisibleImg" :src="searchUrl" fit="contain" style="height: 100%;width: 100%" /> |
| | | </basic-container> |
| | | 保存 |
| | | </el-button> |
| | | </template> |
| | | </el-dialog> |
| | | <PreviewFiles v-model="previewVisible" :src="searchUrl" type="docx" /> |
| | | <!-- <el-image v-if="previewVisibleImg" :src="searchUrl" fit="contain" style="height: 100%;width: 100%" /> --> |
| | | <el-image-viewer |
| | | v-if="previewVisibleImg" |
| | | :url-list="[searchUrl]" |
| | | @close="previewVisibleImg = false" |
| | | ></el-image-viewer> |
| | | </basic-container> |
| | | </template> |
| | | <script setup> |
| | | import { Search, RefreshRight, Download, Upload, Delete } from '@element-plus/icons-vue' |
| | | import { fjPageApi, fjSubmitApi, fjRemoveApi, fjDetailApi, fjUploadApi } from './inspectionRequestApi' |
| | | import { useStore } from 'vuex' |
| | | import { ref, computed, inject, onMounted } from 'vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { getDictLabel } from '@ztzf/utils' |
| | | import PreviewFiles from '@/components/PreviewFiles/PreviewFiles.vue' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | | 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 PreviewFiles from '@/components/PreviewFiles/PreviewFiles.vue' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | | import { Base64 } from 'js-base64' |
| | | |
| | | const store = useStore() |
| | | const userInfo = computed(() => store.getters.userInfo); |
| | | const store = useStore() |
| | | const userInfo = computed(() => store.getters.userInfo) |
| | | |
| | | // 初始化查询参数 |
| | | |
| | | |
| | | // 初始化查询参数 |
| | | const initSearchParams = () => ({ |
| | | nickName: '', |
| | | resultType: '', |
| | |
| | | const uploadName = ref('') |
| | | |
| | | const dictObj = ref({ |
| | | patrolTaskType: [], // 巡查任务类型 |
| | | workOrderType: [], // 巡查任务类型 |
| | | }) |
| | | |
| | | const searchParams = ref(initSearchParams()) // 查询参数 |
| | |
| | | const isShowEditView = ref(false) |
| | | const titleTxt = ref('上传巡查报告') |
| | | const editParams = ref({ |
| | | id:'', |
| | | nickName: '', |
| | | resultType: '', |
| | | link: '', |
| | | id: '', |
| | | nickName: '', |
| | | resultType: '', |
| | | link: '', |
| | | }) |
| | | const ruleFormRef = ref() |
| | | const submitting = ref(false) |
| | | const rules = ref({ |
| | | nickName: [{ required: true, message: '请输入文档名称', trigger: ['blur'] }], |
| | | resultType: [{ required: true, message: '请选择文档类型', trigger: ['change'] }], |
| | | link: [{ required: true, message: '请上传文件', trigger: ['change'] }], |
| | | nickName: [{ required: true, message: '请输入', trigger: ['blur'] }], |
| | | resultType: [{ required: true, message: '请选择', trigger: ['change'] }], |
| | | link: [{ required: true, message: '请上传', trigger: ['change'] }], |
| | | }) |
| | | |
| | | // 获取字典 |
| | | function getDictList() { |
| | | getDictionaryByCode('patrolTaskType').then(res => { |
| | | getDictionaryByCode('workOrderType').then(res => { |
| | | dictObj.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | // 获取列表 |
| | | // 将字节大小转换为可读格式的函数 |
| | | const formatFileSize = (bytes) => { |
| | | if (bytes === 0 || bytes === null) return '0 B' |
| | | const k = 1024 |
| | | const sizes = ['B', 'KB', 'MB', 'GB', 'TB'] |
| | | const i = Math.floor(Math.log(bytes) / Math.log(k)) |
| | | return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] |
| | | } |
| | | |
| | | // 获取列表 |
| | | async function getList() { |
| | | loading.value = true |
| | | try { |
| | | const res = await fjPageApi({ ...searchParams.value }) |
| | | console.log(res?.data?.data?.records,'888') |
| | | list.value = res?.data?.data?.records ?? [] |
| | | console.log(list.value,'999') |
| | | total.value = res?.data?.data?.total ?? 0 |
| | | } finally { |
| | | loading.value = false |
| | |
| | | // 新增/编辑/查看 弹框 |
| | | function openForm(row) { |
| | | isShowEditView.value = true |
| | | titleTxt.value = '编辑' |
| | | titleTxt.value = '编辑' |
| | | editParams.value.id = row.id |
| | | editParams.value.nickName = row.nickName |
| | | editParams.value.resultType = row.resultType |
| | | editParams.value.link = row.link |
| | | } |
| | | |
| | | |
| | | // 'zip', 'rar', 'jar', 'tar', 'gzip', '7z', |
| | | const allSupportedExtensions = [ |
| | | 'doc', 'docx', 'xls', 'xlsx', 'xlsm', 'ppt', 'pptx', 'csv', 'tsv', 'dotm', 'xlt', 'xltm', 'dot', 'dotx', 'xlam', 'xla', |
| | | 'wps', 'dps', 'et', 'ett', 'wpt', |
| | | 'odt', 'ods', 'ots', 'odp', 'otp', 'six', 'ott', 'fodt', 'fods', |
| | | 'vsd', 'vsdx', 'wmf', 'emf', 'psd', |
| | | 'pdf', 'ofd', 'rtf', 'epub', |
| | | 'xmind', 'bpmn', 'eml', |
| | | 'obj', '3ds', 'stl', 'ply', 'gltf', 'glb', 'off', '3dm', 'fbx', 'dae', 'wrl', '3mf', 'ifc', 'brep', 'step', 'iges', 'fcstd', 'bim', |
| | | 'dwg', 'dxf', |
| | | 'txt', 'xml', 'md', 'java', 'php', 'py', 'js', 'css', |
| | | 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico', 'jfif', 'webp', 'tif', 'tiff', 'tga', 'svg', |
| | | 'mp3', 'wav', 'mp4', 'flv', 'avi', 'mov', 'rm', 'webm', 'ts', 'mkv', 'mpeg', 'ogg', 'mpg', 'rmvb', 'wmv', '3gp', 'swf' |
| | | ]; |
| | | const { VITE_APP_PREVIEW_URL } = import.meta.env |
| | | |
| | | // 在线查看文档 |
| | | function seeOnlineWord(item) { |
| | | console.log(item.link,'9999') |
| | | if (!item.link) { |
| | | ElMessage.error('文档链接不存在') |
| | | return |
| | | } else if (!item.link.includes('docx') && !item.link.includes('pdf') && !item.link.includes('png') && !item.link.includes('jpg')) { |
| | | ElMessage.error('可进行下载观看!') |
| | | return |
| | | } else if (item.link.includes('png') || item.link.includes('jpg')) { |
| | | previewVisibleImg.value = true |
| | | searchUrl.value = item.link |
| | | return |
| | | } else if (item.link.includes('docx') || item.link.includes('pdf')) { |
| | | previewVisible.value = true |
| | | searchUrl.value = item.link |
| | | return |
| | | function seeOnlineWord(row) { |
| | | // 获取点之后的文件格式名 |
| | | const fileType = row?.link?.split('.').pop() || '' |
| | | if (!row.link) { |
| | | ElMessage.warning('文件链接不存在') |
| | | } else if (allSupportedExtensions.includes(fileType)){ |
| | | window.open(`${VITE_APP_PREVIEW_URL}/onlinePreview?url=`+encodeURIComponent(Base64.encode(row.link))); |
| | | } else { |
| | | ElMessage.warning(`${fileType}文件格式,可以下载再查看`) |
| | | } |
| | | } |
| | | |
| | |
| | | // 勾选值设置 |
| | | function handleSelectionChange(rows) { |
| | | selectedFiles.value = rows |
| | | selectedIds.value = rows.map((item) => item.id) |
| | | selectedIds.value = rows.map(item => item.id) |
| | | } |
| | | |
| | | let loadingData |
| | | // 文档下载 |
| | | async function handleDownload() { |
| | | // 如果是勾选一个可以直接下载,超过一个打包下载 |
| | | // 依次下载每个文件(添加延迟以避免浏览器限制) |
| | | 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) |
| | | if (selectedFiles.value.length === 0) { |
| | | ElMessage.warning('请选择要下载的文件') |
| | | return |
| | | } |
| | | // 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 => { |
| | | 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('下载成功') |
| | | }) |
| | | } catch (e) { |
| | | } finally { |
| | | // loadingData.close() |
| | | } |
| | | }, index * 300) // 300ms delay between downloads |
| | | }) |
| | | |
| | | // } |
| | | } |
| | | |
| | | // 文档上传 |
| | | async function handleUpload() { |
| | | isShowEditView.value = true |
| | | titleTxt.value = '上传巡查报告' |
| | | titleTxt.value = '上传巡查报告' |
| | | } |
| | | |
| | | // 上传文件前处理 |
| | | function onUploadFileBefore(file) { |
| | | // 执行文件上传 |
| | | let data = new FormData(); |
| | | data.append('file', file); |
| | | |
| | | fjUploadApi(data).then(res => { |
| | | if (res.data.code === 200) { |
| | | ElMessage.success('上传成功') |
| | | // 保存文件URL到表单 |
| | | uploadName.value = res.data.data.originalName |
| | | editParams.value.link = res.data.data.link |
| | | } else { |
| | | ElMessage.error(res.msg || '上传失败') |
| | | } |
| | | }) |
| | | |
| | | return false // 阻止组件的默认上传行为 |
| | | // 执行文件上传 |
| | | let data = new FormData() |
| | | // 获取文件扩展名 |
| | | const fileExtension = file.name.split('.').pop().toLowerCase(); |
| | | data.append('file', file) |
| | | |
| | | fjUploadApi(data).then(res => { |
| | | if (res.data.code === 200) { |
| | | ElMessage.success('上传成功') |
| | | // 保存文件URL到表单 |
| | | uploadName.value = res.data.data.originalName |
| | | editParams.value.link = res.data.data.link |
| | | editParams.value.name = res.data.data.name |
| | | editParams.value.originalName = res.data.data.originalName |
| | | editParams.value.attachSize = file.size; |
| | | editParams.value.extension = fileExtension |
| | | editParams.value.domainUrl = res.data.data.link.replace(res.data.data.name, '') |
| | | } else { |
| | | ElMessage.error(res.msg || '上传失败') |
| | | } |
| | | }) |
| | | |
| | | return false // 阻止组件的默认上传行为 |
| | | } |
| | | |
| | | // 保存上传文件数据 |
| | | async function submit(formValidate) { |
| | | if (!formValidate) return |
| | | await formValidate.validate(async (valid, fields) => { |
| | | if (valid) { |
| | | submitting.value = true |
| | | try { |
| | | await fjSubmitApi({ ...editParams.value }) |
| | | ElMessage.success('保存成功') |
| | | isShowEditView.value = false |
| | | getList() |
| | | } finally { |
| | | submitting.value = false |
| | | } |
| | | } |
| | | }) |
| | | if (!formValidate) return |
| | | await formValidate.validate(async (valid, fields) => { |
| | | if (valid) { |
| | | submitting.value = true |
| | | try { |
| | | await fjSubmitApi({ ...editParams.value }) |
| | | ElMessage.success('保存成功') |
| | | isShowEditView.value = false |
| | | getList() |
| | | } finally { |
| | | submitting.value = false |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | function handleClose() { |
| | | // 清除表单内容 |
| | | uploadName.value = '' |
| | | editParams.value = { |
| | | id: '', |
| | | nickName: '', |
| | | resultType: '', |
| | | uploadFile: '', |
| | | } |
| | | // 清除表单内容 |
| | | uploadName.value = '' |
| | | editParams.value = { |
| | | id: '', |
| | | nickName: '', |
| | | resultType: '', |
| | | uploadFile: '', |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getDictList() |
| | | getList() |
| | | }) |
| | | |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | </style> |
| | | <style scoped lang="scss"></style> |