hanst
/
longchuang-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

删除文件按钮

master
han\hanst 4 weeks ago
parent
f15dfae0fd
commit
7ab1c70946
5 changed files with 1028 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 445
      src/views/modules/longtron/production-plan-cable-cop-task.vue
  2. 53
      src/views/modules/longtron/production-plan-home-order.vue
  3. 445
      src/views/modules/longtron/production-plan-machining-task.vue
  4. 53
      src/views/modules/longtron/production-plan-renovation-order.vue
  5. 44
      src/views/modules/longtron/production-work-report.vue

445
src/views/modules/longtron/production-plan-cable-cop-task.vue
View File

@ -155,6 +155,18 @@
<el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip> <el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.comment || '-' }}</template> <template slot-scope="scope">{{ scope.row.comment || '-' }}</template>
</el-table-column> </el-table-column>
<el-table-column label="影像" width="90" align="center">
<template slot-scope="scope">
<a
v-if="isMediaNodeLog(scope.row)"
type="text"
size="mini"
@click="openMediaFileDialog(scope.row)">
查看文件
</a>
<span v-else>-</span>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -256,11 +268,105 @@
<el-button plain class="add-btn" :loading="setUp.assignButton" @click="saveNodeAssigneeAction">保存分配</el-button> <el-button plain class="add-btn" :loading="setUp.assignButton" @click="saveNodeAssigneeAction">保存分配</el-button>
</el-footer> </el-footer>
</el-dialog> </el-dialog>
<el-dialog
title="报工影像文件"
:visible.sync="mediaDialogVisible"
width="600px"
:close-on-click-modal="false"
@close="handleMediaDialogClose"
v-drag>
<div v-loading="mediaDialogLoading" class="media-dialog-body">
<div class="media-dialog-meta">
<span>节点：{{ mediaDialogLog.nodeName || mediaDialogLog.nodeCode || '-' }}</span>
<span>报工时间：{{ mediaDialogLog.logTime || '-' }}</span>
</div>
<el-table v-if="mediaFileList.length > 0" class="file-table" :data="mediaFileList" border size="small" height="360px">
<el-table-column type="index" label="#" width="55" align="center"></el-table-column>
<el-table-column label="缩略图" width="150" align="center">
<template slot-scope="scope">
<div class="media-thumb-cell">
<el-button v-if="resolveMediaKind(scope.row) === 'other'" type="text" size="mini" disabled>不支持</el-button>
<span v-else-if="scope.row.previewLoading" class="media-thumb-loading">加载中...</span>
<img
v-else-if="resolveMediaKind(scope.row) === 'image' && scope.row.previewUrl"
:src="scope.row.previewUrl"
class="media-thumb media-thumb-image"
alt="media-thumb"
@click="previewMediaFile(scope.row)">
<video
v-else-if="resolveMediaKind(scope.row) === 'video'"
:src="getVideoStreamUrl(scope.row)"
class="media-thumb media-thumb-video"
muted
playsinline
preload="metadata"
@click="previewMediaFile(scope.row)">
</video>
<el-button v-else type="text" size="mini" @click="previewMediaFile(scope.row)">加载预览</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="类型" width="90" align="center">
<template slot-scope="scope">
<el-tag size="mini" :type="resolveMediaKind(scope.row) === 'video' ? 'warning' : (resolveMediaKind(scope.row) === 'image' ? 'success' : 'info')">
{{ getMediaKindLabel(scope.row) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="步骤" width="120" align="center">
<template slot-scope="scope">{{ getMediaStepLabel(scope.row) }}</template>
</el-table-column>
<el-table-column label="上传时间" min-width="170" align="center">
<template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
</el-table-column>
<el-table-column label="操作" width="90" align="center">
<template slot-scope="scope">
<el-button
type="text"
style="color:#F56C6C"
:loading="scope.row.deleting"
@click="deleteMediaFile(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-else description="当前节点暂无影像文件"></el-empty>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="mediaDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<div v-if="mediaPreviewVisible" class="media-preview-overlay" @click="closeMediaPreview">
<i class="el-icon-close media-preview-close" @click.stop="closeMediaPreview"></i>
<img
v-if="mediaPreviewType === 'image'"
:src="mediaPreviewUrl"
:alt="mediaPreviewName || 'media-preview'"
class="media-preview-image"
@click.stop="closeMediaPreview">
<video
v-else-if="mediaPreviewType === 'video'"
ref="mediaPreviewVideo"
:key="mediaPreviewUrl"
:src="mediaPreviewUrl"
class="media-preview-video"
controls
autoplay
playsinline
preload="auto"
@error="handleMediaPreviewError"
@click.stop>
</video>
</div>
</div> </div>
</template> </template>
<script> <script>
import { deleteCableCopTask, finishCableCopTask, getCableCopTaskList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportCableCopTaskNode, saveCableCopTask, saveNodeAssignee } from '@/api/longchuang/productionPlan' import { deleteCableCopTask, finishCableCopTask, getCableCopTaskList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportCableCopTaskNode, saveCableCopTask, saveNodeAssignee } from '@/api/longchuang/productionPlan'
import { getOssVideoStreamUrl, previewOssFileById2, queryOssFilePlus, removeOss } from '@/api/oss/oss'
export default { export default {
name: 'ProductionPlanCableCopTask', name: 'ProductionPlanCableCopTask',
@ -278,6 +384,14 @@ export default {
detailTabName: 'statusLogs', detailTabName: 'statusLogs',
selectedOrderLogList: [], selectedOrderLogList: [],
detailLogLoading: false, detailLogLoading: false,
mediaDialogVisible: false,
mediaDialogLoading: false,
mediaDialogLog: {},
mediaFileList: [],
mediaPreviewVisible: false,
mediaPreviewUrl: '',
mediaPreviewType: '',
mediaPreviewName: '',
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
totalPage: 0, totalPage: 0,
@ -288,6 +402,9 @@ export default {
activated() { activated() {
this.searchTable() this.searchTable()
}, },
beforeDestroy() {
this.releaseMediaFileUrls()
},
methods: { methods: {
getExpectedNodeCodeByTaskType(taskType) { getExpectedNodeCodeByTaskType(taskType) {
const text = (taskType || '').trim() const text = (taskType || '').trim()
@ -447,6 +564,262 @@ export default {
this.selectedOrderLogList = [] this.selectedOrderLogList = []
}) })
}, },
isMediaNodeLog(row) {
if (!row || !row.logNo) {
return false
}
if (row.action && row.action !== '报工完成') {
return false
}
const codeSet = ['lineProduction', 'copProduction']
const nameSet = ['线缆生产', 'COP生产']
const nodeCode = String(row.nodeCode || '').trim()
const nodeName = String(row.nodeName || '').replace(/\s+/g, '')
return codeSet.includes(nodeCode) || nameSet.some(item => item.replace(/\s+/g, '') === nodeName)
},
async openMediaFileDialog(row) {
if (!row || !row.logNo || !row.nodeCode) {
this.$message.warning('当前日志未关联影像文件')
return
}
this.releaseMediaFileUrls()
this.closeMediaPreview()
this.mediaFileList = []
this.mediaDialogLog = { ...row }
this.mediaDialogVisible = true
this.mediaDialogLoading = true
try {
const { data } = await queryOssFilePlus({
orderRef1: this.selectedOrder.orderNo || row.orderNo,
orderRef2: row.nodeCode
})
this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({
...item,
previewUrl: '',
previewLoading: false,
deleting: false
}))
this.mediaFileList.forEach(item => {
const kind = this.resolveMediaKind(item)
if (kind === 'image') {
this.loadMediaPreviewUrl(item, kind, false)
}
})
} catch (e) {
this.mediaFileList = []
this.$message.error('影像文件加载失败')
} finally {
this.mediaDialogLoading = false
}
},
handleMediaDialogClose() {
this.mediaDialogLoading = false
this.mediaDialogLog = {}
this.releaseMediaFileUrls()
this.mediaFileList = []
this.closeMediaPreview()
},
releaseMediaFileUrls() {
this.mediaFileList.forEach(item => {
if (item && item.previewUrl) {
URL.revokeObjectURL(item.previewUrl)
}
})
},
getMediaExt(fileRow) {
if (!fileRow) {
return ''
}
const ext = fileRow.fileType || fileRow.fileSuffix || this.getExtFromFileName(fileRow.fileName || fileRow.newFileName || '')
return String(ext).replace(/^\./, '').toLowerCase()
},
getExtFromFileName(fileName) {
const name = String(fileName || '')
const dotIndex = name.lastIndexOf('.')
if (dotIndex < 0 || dotIndex >= name.length - 1) {
return ''
}
return name.slice(dotIndex + 1)
},
resolveMediaKind(fileRow) {
const ext = this.getMediaExt(fileRow)
const imageExtList = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
const videoExtList = ['mp4', 'webm', 'mov', 'avi', 'm4v', '3gp']
if (imageExtList.includes(ext)) {
return 'image'
}
if (videoExtList.includes(ext)) {
return 'video'
}
return 'other'
},
getMediaKindLabel(fileRow) {
const kind = this.resolveMediaKind(fileRow)
if (kind === 'image') {
return '照片'
}
if (kind === 'video') {
return '视频'
}
return '其他'
},
getMediaStepLabel(fileRow) {
const step = String((fileRow && fileRow.orderRef6) || '').replace(/\s+/g, '')
const stepList = ['1平台箱', '2门箱', '3背景墙箱', '4框架箱', '5钣金箱', '6铝型材箱']
return stepList.includes(step) ? step : '-'
},
buildPreviewMimeType(fileRow, kind) {
const ext = this.getMediaExt(fileRow)
if (kind === 'image') {
const imageMimeMap = {
jpg: 'image/jpeg',
jpeg: 'image/jpeg',
png: 'image/png',
gif: 'image/gif',
bmp: 'image/bmp',
webp: 'image/webp'
}
return imageMimeMap[ext] || 'image/jpeg'
}
if (kind === 'video') {
const videoMimeMap = {
mp4: 'video/mp4',
m4v: 'video/mp4',
webm: 'video/webm',
mov: 'video/quicktime',
avi: 'video/x-msvideo',
'3gp': 'video/3gpp'
}
return videoMimeMap[ext] || 'video/mp4'
}
return 'application/octet-stream'
},
async loadMediaPreviewUrl(fileRow, fixedKind = '', showError = true) {
if (!fileRow || !fileRow.id) {
return false
}
const kind = fixedKind || this.resolveMediaKind(fileRow)
if (kind === 'other') {
return false
}
if (fileRow.previewUrl) {
return true
}
if (fileRow.previewLoading) {
return false
}
this.$set(fileRow, 'previewLoading', true)
const mimeType = this.buildPreviewMimeType(fileRow, kind)
try {
const { data } = await previewOssFileById2({ id: fileRow.id, fileType: mimeType })
const sourceBlob = data instanceof Blob ? data : new Blob([data])
const blobType = mimeType || sourceBlob.type || 'application/octet-stream'
const blob = new Blob([sourceBlob], { type: blobType })
this.$set(fileRow, 'previewUrl', URL.createObjectURL(blob))
return true
} catch (e) {
if (showError) {
this.$message.error('文件预览加载失败')
}
return false
} finally {
this.$set(fileRow, 'previewLoading', false)
}
},
getVideoStreamUrl(fileRow) {
if (!fileRow || !fileRow.id) {
return ''
}
return getOssVideoStreamUrl(fileRow.id)
},
async previewMediaFile(fileRow) {
const kind = this.resolveMediaKind(fileRow)
if (kind === 'other') {
this.$message.warning('当前文件暂不支持预览')
return
}
if (!fileRow || !fileRow.id) {
this.$message.warning('文件信息不完整，无法预览')
return
}
if (kind === 'video') {
const videoUrl = this.getVideoStreamUrl(fileRow)
if (!videoUrl) {
this.$message.warning('视频地址无效，无法预览')
return
}
this.mediaPreviewType = 'video'
this.mediaPreviewName = fileRow.fileName || fileRow.newFileName || ''
this.mediaPreviewUrl = videoUrl
this.mediaPreviewVisible = true
this.$nextTick(() => {
const previewVideo = this.$refs.mediaPreviewVideo
if (previewVideo && typeof previewVideo.play === 'function') {
const playPromise = previewVideo.play()
if (playPromise && typeof playPromise.catch === 'function') {
playPromise.catch(() => {})
}
}
})
return
}
const loaded = await this.loadMediaPreviewUrl(fileRow, kind, true)
if (!loaded) {
return
}
this.mediaPreviewType = kind
this.mediaPreviewName = fileRow.fileName || fileRow.newFileName || ''
this.mediaPreviewUrl = fileRow.previewUrl
this.mediaPreviewVisible = true
},
closeMediaPreview() {
const previewVideo = this.$refs.mediaPreviewVideo
if (previewVideo && typeof previewVideo.pause === 'function') {
previewVideo.pause()
}
this.mediaPreviewVisible = false
this.mediaPreviewType = ''
this.mediaPreviewName = ''
this.mediaPreviewUrl = ''
},
handleMediaPreviewError() {
this.$message.warning('视频播放失败，请稍后重试')
},
async deleteMediaFile(fileRow) {
const fileId = Number(fileRow && fileRow.id)
if (!Number.isFinite(fileId) || fileId <= 0) {
this.$message.warning('文件ID无效，无法删除')
return
}
try {
await this.$confirm('确定删除该影像文件吗？删除后不可恢复。', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
} catch (e) {
return
}
this.$set(fileRow, 'deleting', true)
try {
const { data } = await removeOss([fileId])
if (!data || data.code !== 0) {
this.$message.error((data && data.msg) || '删除失败')
return
}
const currentPreviewUrl = this.mediaPreviewUrl || ''
const isCurrentImage = !!(fileRow.previewUrl && currentPreviewUrl && fileRow.previewUrl === currentPreviewUrl)
const isCurrentVideo = !!(currentPreviewUrl && currentPreviewUrl.indexOf(`/video/${fileId}`) > -1)
if (isCurrentImage || isCurrentVideo) {
this.closeMediaPreview()
}
if (fileRow.previewUrl) {
URL.revokeObjectURL(fileRow.previewUrl)
}
this.mediaFileList = this.mediaFileList.filter(item => Number(item.id) !== fileId)
this.$message.success('删除成功')
} catch (e) {
this.$message.error('删除失败')
} finally {
this.$set(fileRow, 'deleting', false)
}
},
resetQuery() { resetQuery() {
this.searchData = { projectNo: '', taskType: '', category: '', materialName: '', materialSpec: '', status: '', planStartDate: '', planEndDate: '', page: 1, limit: 20 } this.searchData = { projectNo: '', taskType: '', category: '', materialName: '', materialSpec: '', status: '', planStartDate: '', planEndDate: '', page: 1, limit: 20 }
this.searchTable('Y') this.searchTable('Y')
@ -900,6 +1273,78 @@ export default {
.logs-table-wrapper { .logs-table-wrapper {
padding: 8px; padding: 8px;
} }
.media-dialog-body {
min-height: 360px;
}
.media-dialog-meta {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 13px;
color: #606266;
}
.media-thumb-cell {
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.media-thumb-loading {
color: #909399;
font-size: 12px;
}
.media-thumb {
width: 110px;
height: 68px;
border-radius: 4px;
object-fit: cover;
cursor: pointer;
border: 1px solid #ebeef5;
background: #f5f7fa;
}
.media-thumb-video {
background: #000;
}
.media-preview-overlay {
position: fixed;
inset: 0;
z-index: 2100;
background: rgba(0, 0, 0, 0.82);
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
}
.media-preview-close {
position: absolute;
top: 18px;
right: 22px;
color: #fff;
font-size: 30px;
cursor: pointer;
}
.media-preview-image,
.media-preview-video {
max-width: 92vw;
max-height: 88vh;
object-fit: contain;
border-radius: 6px;
background: #000;
}
.file-table {
margin-top: 5px;
}
.el-icon-check { .el-icon-check {
color: #67c23a; color: #67c23a;
font-weight: 1000; font-weight: 1000;

53
src/views/modules/longtron/production-plan-home-order.vue
View File

@ -251,7 +251,7 @@
<el-dialog <el-dialog
title="报工影像文件" title="报工影像文件"
:visible.sync="mediaDialogVisible" :visible.sync="mediaDialogVisible"
width="600px"
width="680px"
:close-on-click-modal="false" :close-on-click-modal="false"
@close="handleMediaDialogClose" @close="handleMediaDialogClose"
v-drag> v-drag>
@ -299,6 +299,17 @@
<el-table-column label="上传时间" min-width="170" align="center"> <el-table-column label="上传时间" min-width="170" align="center">
<template slot-scope="scope">{{ scope.row.createDate || '-' }}</template> <template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="60" align="center">
<template slot-scope="scope">
<el-button
type="text"
style="color:#F56C6C"
:loading="scope.row.deleting"
@click="deleteMediaFile(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table> </el-table>
<el-empty v-else description="当前节点暂无影像文件"></el-empty> <el-empty v-else description="当前节点暂无影像文件"></el-empty>
</div> </div>
@ -334,7 +345,7 @@
<script> <script>
import { deleteHomeLiftOrder, finishHomeLiftOrder, getHomeLiftOrderList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportHomeLiftOrderNode, saveHomeLiftOrder, saveNodeAssignee } from '@/api/longchuang/productionPlan' import { deleteHomeLiftOrder, finishHomeLiftOrder, getHomeLiftOrderList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportHomeLiftOrderNode, saveHomeLiftOrder, saveNodeAssignee } from '@/api/longchuang/productionPlan'
import { getOssVideoStreamUrl, previewOssFileById2, queryOssFilePlus } from '@/api/oss/oss'
import { getOssVideoStreamUrl, previewOssFileById2, queryOssFilePlus, removeOss } from '@/api/oss/oss'
export default { export default {
name: 'ProductionPlanHomeOrder', name: 'ProductionPlanHomeOrder',
@ -477,7 +488,8 @@ export default {
this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({ this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({
...item, ...item,
previewUrl: '', previewUrl: '',
previewLoading: false
previewLoading: false,
deleting: false
})) }))
this.mediaFileList.forEach(item => { this.mediaFileList.forEach(item => {
const kind = this.resolveMediaKind(item) const kind = this.resolveMediaKind(item)
@ -665,6 +677,41 @@ export default {
handleMediaPreviewError() { handleMediaPreviewError() {
this.$message.warning('视频播放失败，请稍后重试') this.$message.warning('视频播放失败，请稍后重试')
}, },
async deleteMediaFile(fileRow) {
const fileId = Number(fileRow && fileRow.id)
if (!Number.isFinite(fileId) || fileId <= 0) {
this.$message.warning('文件ID无效，无法删除')
return
}
try {
await this.$confirm('确定删除该影像文件吗？删除后不可恢复。', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
} catch (e) {
return
}
this.$set(fileRow, 'deleting', true)
try {
const { data } = await removeOss([fileId])
if (!data || data.code !== 0) {
this.$message.error((data && data.msg) || '删除失败')
return
}
const currentPreviewUrl = this.mediaPreviewUrl || ''
const isCurrentImage = !!(fileRow.previewUrl && currentPreviewUrl && fileRow.previewUrl === currentPreviewUrl)
const isCurrentVideo = !!(currentPreviewUrl && currentPreviewUrl.indexOf(`/video/${fileId}`) > -1)
if (isCurrentImage || isCurrentVideo) {
this.closeMediaPreview()
}
if (fileRow.previewUrl) {
URL.revokeObjectURL(fileRow.previewUrl)
}
this.mediaFileList = this.mediaFileList.filter(item => Number(item.id) !== fileId)
this.$message.success('删除成功')
} catch (e) {
this.$message.error('删除失败')
} finally {
this.$set(fileRow, 'deleting', false)
}
},
resetQuery() { resetQuery() {
this.searchData = { projectNo: '', modelNo: '', color: '', status: '', deliveryStartDate: '', deliveryEndDate: '', page: 1, limit: 20 } this.searchData = { projectNo: '', modelNo: '', color: '', status: '', deliveryStartDate: '', deliveryEndDate: '', page: 1, limit: 20 }
this.getDataList('Y') this.getDataList('Y')

445
src/views/modules/longtron/production-plan-machining-task.vue
View File

@ -139,6 +139,18 @@
<el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip> <el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.comment || '-' }}</template> <template slot-scope="scope">{{ scope.row.comment || '-' }}</template>
</el-table-column> </el-table-column>
<el-table-column label="影像" width="90" align="center">
<template slot-scope="scope">
<a
v-if="isMediaNodeLog(scope.row)"
type="text"
size="mini"
@click="openMediaFileDialog(scope.row)">
查看文件
</a>
<span v-else>-</span>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -229,11 +241,105 @@
<el-button plain class="add-btn" :loading="setUp.assignButton" @click="saveNodeAssigneeAction">保存分配</el-button> <el-button plain class="add-btn" :loading="setUp.assignButton" @click="saveNodeAssigneeAction">保存分配</el-button>
</el-footer> </el-footer>
</el-dialog> </el-dialog>
<el-dialog
title="报工影像文件"
:visible.sync="mediaDialogVisible"
width="600px"
:close-on-click-modal="false"
@close="handleMediaDialogClose"
v-drag>
<div v-loading="mediaDialogLoading" class="media-dialog-body">
<div class="media-dialog-meta">
<span>节点：{{ mediaDialogLog.nodeName || mediaDialogLog.nodeCode || '-' }}</span>
<span>报工时间：{{ mediaDialogLog.logTime || '-' }}</span>
</div>
<el-table v-if="mediaFileList.length > 0" class="file-table" :data="mediaFileList" border size="small" height="360px">
<el-table-column type="index" label="#" width="55" align="center"></el-table-column>
<el-table-column label="缩略图" width="150" align="center">
<template slot-scope="scope">
<div class="media-thumb-cell">
<el-button v-if="resolveMediaKind(scope.row) === 'other'" type="text" size="mini" disabled>不支持</el-button>
<span v-else-if="scope.row.previewLoading" class="media-thumb-loading">加载中...</span>
<img
v-else-if="resolveMediaKind(scope.row) === 'image' && scope.row.previewUrl"
:src="scope.row.previewUrl"
class="media-thumb media-thumb-image"
alt="media-thumb"
@click="previewMediaFile(scope.row)">
<video
v-else-if="resolveMediaKind(scope.row) === 'video'"
:src="getVideoStreamUrl(scope.row)"
class="media-thumb media-thumb-video"
muted
playsinline
preload="metadata"
@click="previewMediaFile(scope.row)">
</video>
<el-button v-else type="text" size="mini" @click="previewMediaFile(scope.row)">加载预览</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="类型" width="90" align="center">
<template slot-scope="scope">
<el-tag size="mini" :type="resolveMediaKind(scope.row) === 'video' ? 'warning' : (resolveMediaKind(scope.row) === 'image' ? 'success' : 'info')">
{{ getMediaKindLabel(scope.row) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="步骤" width="120" align="center">
<template slot-scope="scope">{{ getMediaStepLabel(scope.row) }}</template>
</el-table-column>
<el-table-column label="上传时间" min-width="170" align="center">
<template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
</el-table-column>
<el-table-column label="操作" width="90" align="center">
<template slot-scope="scope">
<el-button
type="text"
style="color:#F56C6C"
:loading="scope.row.deleting"
@click="deleteMediaFile(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-else description="当前节点暂无影像文件"></el-empty>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="mediaDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<div v-if="mediaPreviewVisible" class="media-preview-overlay" @click="closeMediaPreview">
<i class="el-icon-close media-preview-close" @click.stop="closeMediaPreview"></i>
<img
v-if="mediaPreviewType === 'image'"
:src="mediaPreviewUrl"
:alt="mediaPreviewName || 'media-preview'"
class="media-preview-image"
@click.stop="closeMediaPreview">
<video
v-else-if="mediaPreviewType === 'video'"
ref="mediaPreviewVideo"
:key="mediaPreviewUrl"
:src="mediaPreviewUrl"
class="media-preview-video"
controls
autoplay
playsinline
preload="auto"
@error="handleMediaPreviewError"
@click.stop>
</video>
</div>
</div> </div>
</template> </template>
<script> <script>
import { deleteMachiningTask, finishMachiningTask, getMachiningTaskList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportMachiningTaskNode, saveMachiningTask, saveNodeAssignee } from '@/api/longchuang/productionPlan' import { deleteMachiningTask, finishMachiningTask, getMachiningTaskList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportMachiningTaskNode, saveMachiningTask, saveNodeAssignee } from '@/api/longchuang/productionPlan'
import { getOssVideoStreamUrl, previewOssFileById2, queryOssFilePlus, removeOss } from '@/api/oss/oss'
export default { export default {
name: 'ProductionPlanMachiningTask', name: 'ProductionPlanMachiningTask',
@ -250,6 +356,14 @@ export default {
detailTabName: 'statusLogs', detailTabName: 'statusLogs',
selectedOrderLogList: [], selectedOrderLogList: [],
detailLogLoading: false, detailLogLoading: false,
mediaDialogVisible: false,
mediaDialogLoading: false,
mediaDialogLog: {},
mediaFileList: [],
mediaPreviewVisible: false,
mediaPreviewUrl: '',
mediaPreviewType: '',
mediaPreviewName: '',
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
totalPage: 0, totalPage: 0,
@ -260,6 +374,9 @@ export default {
activated() { activated() {
this.searchTable() this.searchTable()
}, },
beforeDestroy() {
this.releaseMediaFileUrls()
},
methods: { methods: {
searchTable(flag) { searchTable(flag) {
if (flag === 'Y') this.pageIndex = 1 if (flag === 'Y') this.pageIndex = 1
@ -365,6 +482,262 @@ export default {
this.selectedOrderLogList = [] this.selectedOrderLogList = []
}) })
}, },
isMediaNodeLog(row) {
if (!row || !row.logNo) {
return false
}
if (row.action && row.action !== '报工完成') {
return false
}
const codeSet = ['machiningProduction']
const nameSet = ['机加工生产']
const nodeCode = String(row.nodeCode || '').trim()
const nodeName = String(row.nodeName || '').replace(/\s+/g, '')
return codeSet.includes(nodeCode) || nameSet.some(item => item.replace(/\s+/g, '') === nodeName)
},
async openMediaFileDialog(row) {
if (!row || !row.logNo || !row.nodeCode) {
this.$message.warning('当前日志未关联影像文件')
return
}
this.releaseMediaFileUrls()
this.closeMediaPreview()
this.mediaFileList = []
this.mediaDialogLog = { ...row }
this.mediaDialogVisible = true
this.mediaDialogLoading = true
try {
const { data } = await queryOssFilePlus({
orderRef1: this.selectedOrder.orderNo || row.orderNo,
orderRef2: row.nodeCode
})
this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({
...item,
previewUrl: '',
previewLoading: false,
deleting: false
}))
this.mediaFileList.forEach(item => {
const kind = this.resolveMediaKind(item)
if (kind === 'image') {
this.loadMediaPreviewUrl(item, kind, false)
}
})
} catch (e) {
this.mediaFileList = []
this.$message.error('影像文件加载失败')
} finally {
this.mediaDialogLoading = false
}
},
handleMediaDialogClose() {
this.mediaDialogLoading = false
this.mediaDialogLog = {}
this.releaseMediaFileUrls()
this.mediaFileList = []
this.closeMediaPreview()
},
releaseMediaFileUrls() {
this.mediaFileList.forEach(item => {
if (item && item.previewUrl) {
URL.revokeObjectURL(item.previewUrl)
}
})
},
getMediaExt(fileRow) {
if (!fileRow) {
return ''
}
const ext = fileRow.fileType || fileRow.fileSuffix || this.getExtFromFileName(fileRow.fileName || fileRow.newFileName || '')
return String(ext).replace(/^\./, '').toLowerCase()
},
getExtFromFileName(fileName) {
const name = String(fileName || '')
const dotIndex = name.lastIndexOf('.')
if (dotIndex < 0 || dotIndex >= name.length - 1) {
return ''
}
return name.slice(dotIndex + 1)
},
resolveMediaKind(fileRow) {
const ext = this.getMediaExt(fileRow)
const imageExtList = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
const videoExtList = ['mp4', 'webm', 'mov', 'avi', 'm4v', '3gp']
if (imageExtList.includes(ext)) {
return 'image'
}
if (videoExtList.includes(ext)) {
return 'video'
}
return 'other'
},
getMediaKindLabel(fileRow) {
const kind = this.resolveMediaKind(fileRow)
if (kind === 'image') {
return '照片'
}
if (kind === 'video') {
return '视频'
}
return '其他'
},
getMediaStepLabel(fileRow) {
const step = String((fileRow && fileRow.orderRef6) || '').replace(/\s+/g, '')
const stepList = ['1平台箱', '2门箱', '3背景墙箱', '4框架箱', '5钣金箱', '6铝型材箱']
return stepList.includes(step) ? step : '-'
},
buildPreviewMimeType(fileRow, kind) {
const ext = this.getMediaExt(fileRow)
if (kind === 'image') {
const imageMimeMap = {
jpg: 'image/jpeg',
jpeg: 'image/jpeg',
png: 'image/png',
gif: 'image/gif',
bmp: 'image/bmp',
webp: 'image/webp'
}
return imageMimeMap[ext] || 'image/jpeg'
}
if (kind === 'video') {
const videoMimeMap = {
mp4: 'video/mp4',
m4v: 'video/mp4',
webm: 'video/webm',
mov: 'video/quicktime',
avi: 'video/x-msvideo',
'3gp': 'video/3gpp'
}
return videoMimeMap[ext] || 'video/mp4'
}
return 'application/octet-stream'
},
async loadMediaPreviewUrl(fileRow, fixedKind = '', showError = true) {
if (!fileRow || !fileRow.id) {
return false
}
const kind = fixedKind || this.resolveMediaKind(fileRow)
if (kind === 'other') {
return false
}
if (fileRow.previewUrl) {
return true
}
if (fileRow.previewLoading) {
return false
}
this.$set(fileRow, 'previewLoading', true)
const mimeType = this.buildPreviewMimeType(fileRow, kind)
try {
const { data } = await previewOssFileById2({ id: fileRow.id, fileType: mimeType })
const sourceBlob = data instanceof Blob ? data : new Blob([data])
const blobType = mimeType || sourceBlob.type || 'application/octet-stream'
const blob = new Blob([sourceBlob], { type: blobType })
this.$set(fileRow, 'previewUrl', URL.createObjectURL(blob))
return true
} catch (e) {
if (showError) {
this.$message.error('文件预览加载失败')
}
return false
} finally {
this.$set(fileRow, 'previewLoading', false)
}
},
getVideoStreamUrl(fileRow) {
if (!fileRow || !fileRow.id) {
return ''
}
return getOssVideoStreamUrl(fileRow.id)
},
async previewMediaFile(fileRow) {
const kind = this.resolveMediaKind(fileRow)
if (kind === 'other') {
this.$message.warning('当前文件暂不支持预览')
return
}
if (!fileRow || !fileRow.id) {
this.$message.warning('文件信息不完整，无法预览')
return
}
if (kind === 'video') {
const videoUrl = this.getVideoStreamUrl(fileRow)
if (!videoUrl) {
this.$message.warning('视频地址无效，无法预览')
return
}
this.mediaPreviewType = 'video'
this.mediaPreviewName = fileRow.fileName || fileRow.newFileName || ''
this.mediaPreviewUrl = videoUrl
this.mediaPreviewVisible = true
this.$nextTick(() => {
const previewVideo = this.$refs.mediaPreviewVideo
if (previewVideo && typeof previewVideo.play === 'function') {
const playPromise = previewVideo.play()
if (playPromise && typeof playPromise.catch === 'function') {
playPromise.catch(() => {})
}
}
})
return
}
const loaded = await this.loadMediaPreviewUrl(fileRow, kind, true)
if (!loaded) {
return
}
this.mediaPreviewType = kind
this.mediaPreviewName = fileRow.fileName || fileRow.newFileName || ''
this.mediaPreviewUrl = fileRow.previewUrl
this.mediaPreviewVisible = true
},
closeMediaPreview() {
const previewVideo = this.$refs.mediaPreviewVideo
if (previewVideo && typeof previewVideo.pause === 'function') {
previewVideo.pause()
}
this.mediaPreviewVisible = false
this.mediaPreviewType = ''
this.mediaPreviewName = ''
this.mediaPreviewUrl = ''
},
handleMediaPreviewError() {
this.$message.warning('视频播放失败，请稍后重试')
},
async deleteMediaFile(fileRow) {
const fileId = Number(fileRow && fileRow.id)
if (!Number.isFinite(fileId) || fileId <= 0) {
this.$message.warning('文件ID无效，无法删除')
return
}
try {
await this.$confirm('确定删除该影像文件吗？删除后不可恢复。', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
} catch (e) {
return
}
this.$set(fileRow, 'deleting', true)
try {
const { data } = await removeOss([fileId])
if (!data || data.code !== 0) {
this.$message.error((data && data.msg) || '删除失败')
return
}
const currentPreviewUrl = this.mediaPreviewUrl || ''
const isCurrentImage = !!(fileRow.previewUrl && currentPreviewUrl && fileRow.previewUrl === currentPreviewUrl)
const isCurrentVideo = !!(currentPreviewUrl && currentPreviewUrl.indexOf(`/video/${fileId}`) > -1)
if (isCurrentImage || isCurrentVideo) {
this.closeMediaPreview()
}
if (fileRow.previewUrl) {
URL.revokeObjectURL(fileRow.previewUrl)
}
this.mediaFileList = this.mediaFileList.filter(item => Number(item.id) !== fileId)
this.$message.success('删除成功')
} catch (e) {
this.$message.error('删除失败')
} finally {
this.$set(fileRow, 'deleting', false)
}
},
resetQuery() { resetQuery() {
this.searchData = { modelNo: '', materialName: '', materialSpec: '', status: '', planStartDate: '', planEndDate: '', page: 1, limit: 20 } this.searchData = { modelNo: '', materialName: '', materialSpec: '', status: '', planStartDate: '', planEndDate: '', page: 1, limit: 20 }
this.searchTable('Y') this.searchTable('Y')
@ -817,6 +1190,78 @@ export default {
.logs-table-wrapper { .logs-table-wrapper {
padding: 8px; padding: 8px;
} }
.media-dialog-body {
min-height: 360px;
}
.media-dialog-meta {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 13px;
color: #606266;
}
.media-thumb-cell {
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.media-thumb-loading {
color: #909399;
font-size: 12px;
}
.media-thumb {
width: 110px;
height: 68px;
border-radius: 4px;
object-fit: cover;
cursor: pointer;
border: 1px solid #ebeef5;
background: #f5f7fa;
}
.media-thumb-video {
background: #000;
}
.media-preview-overlay {
position: fixed;
inset: 0;
z-index: 2100;
background: rgba(0, 0, 0, 0.82);
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
}
.media-preview-close {
position: absolute;
top: 18px;
right: 22px;
color: #fff;
font-size: 30px;
cursor: pointer;
}
.media-preview-image,
.media-preview-video {
max-width: 92vw;
max-height: 88vh;
object-fit: contain;
border-radius: 6px;
background: #000;
}
.file-table {
margin-top: 5px;
}
.el-icon-check { .el-icon-check {
color: #67c23a; color: #67c23a;
font-weight: 1000; font-weight: 1000;

53
src/views/modules/longtron/production-plan-renovation-order.vue
View File

@ -248,7 +248,7 @@
<el-dialog <el-dialog
title="报工影像文件" title="报工影像文件"
:visible.sync="mediaDialogVisible" :visible.sync="mediaDialogVisible"
width="600px"
width="680px"
:close-on-click-modal="false" :close-on-click-modal="false"
@close="handleMediaDialogClose" @close="handleMediaDialogClose"
v-drag> v-drag>
@ -296,6 +296,17 @@
<el-table-column label="上传时间" min-width="170" align="center"> <el-table-column label="上传时间" min-width="170" align="center">
<template slot-scope="scope">{{ scope.row.createDate || '-' }}</template> <template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="60" align="center">
<template slot-scope="scope">
<el-button
type="text"
style="color:#F56C6C"
:loading="scope.row.deleting"
@click="deleteMediaFile(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table> </el-table>
<el-empty v-else description="当前节点暂无影像文件"></el-empty> <el-empty v-else description="当前节点暂无影像文件"></el-empty>
</div> </div>
@ -331,7 +342,7 @@
<script> <script>
import { deleteRenovationOrder, finishRenovationOrder, getNodeAssigneeList, getNodeAssigneeUsers, getRenovationOrderList, getReportLogList, reportRenovationOrderNode, saveNodeAssignee, saveRenovationOrder } from '@/api/longchuang/productionPlan' import { deleteRenovationOrder, finishRenovationOrder, getNodeAssigneeList, getNodeAssigneeUsers, getRenovationOrderList, getReportLogList, reportRenovationOrderNode, saveNodeAssignee, saveRenovationOrder } from '@/api/longchuang/productionPlan'
import { getOssVideoStreamUrl, previewOssFileById2, queryOssFilePlus } from '@/api/oss/oss'
import { getOssVideoStreamUrl, previewOssFileById2, queryOssFilePlus, removeOss } from '@/api/oss/oss'
export default { export default {
name: 'ProductionPlanRenovationOrder', name: 'ProductionPlanRenovationOrder',
@ -511,7 +522,8 @@ export default {
this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({ this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({
...item, ...item,
previewUrl: '', previewUrl: '',
previewLoading: false
previewLoading: false,
deleting: false
})) }))
this.mediaFileList.forEach(item => { this.mediaFileList.forEach(item => {
const kind = this.resolveMediaKind(item) const kind = this.resolveMediaKind(item)
@ -699,6 +711,41 @@ export default {
handleMediaPreviewError() { handleMediaPreviewError() {
this.$message.warning('视频播放失败，请稍后重试') this.$message.warning('视频播放失败，请稍后重试')
}, },
async deleteMediaFile(fileRow) {
const fileId = Number(fileRow && fileRow.id)
if (!Number.isFinite(fileId) || fileId <= 0) {
this.$message.warning('文件ID无效，无法删除')
return
}
try {
await this.$confirm('确定删除该影像文件吗？删除后不可恢复。', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
} catch (e) {
return
}
this.$set(fileRow, 'deleting', true)
try {
const { data } = await removeOss([fileId])
if (!data || data.code !== 0) {
this.$message.error((data && data.msg) || '删除失败')
return
}
const currentPreviewUrl = this.mediaPreviewUrl || ''
const isCurrentImage = !!(fileRow.previewUrl && currentPreviewUrl && fileRow.previewUrl === currentPreviewUrl)
const isCurrentVideo = !!(currentPreviewUrl && currentPreviewUrl.indexOf(`/video/${fileId}`) > -1)
if (isCurrentImage || isCurrentVideo) {
this.closeMediaPreview()
}
if (fileRow.previewUrl) {
URL.revokeObjectURL(fileRow.previewUrl)
}
this.mediaFileList = this.mediaFileList.filter(item => Number(item.id) !== fileId)
this.$message.success('删除成功')
} catch (e) {
this.$message.error('删除失败')
} finally {
this.$set(fileRow, 'deleting', false)
}
},
resetQuery() { resetQuery() {
this.searchData = { projectNo: '', modelNo: '', color: '', status: '', deliveryStartDate: '', deliveryEndDate: '', page: 1, limit: 20 } this.searchData = { projectNo: '', modelNo: '', color: '', status: '', deliveryStartDate: '', deliveryEndDate: '', page: 1, limit: 20 }
this.getDataList('Y') this.getDataList('Y')

44
src/views/modules/longtron/production-work-report.vue
View File

@ -283,6 +283,9 @@
<el-tag size="mini" :type="item.kind === 'video' ? 'warning' : 'success'"> <el-tag size="mini" :type="item.kind === 'video' ? 'warning' : 'success'">
{{ item.kind === 'video' ? '视频' : '照片' }} {{ item.kind === 'video' ? '视频' : '照片' }}
</el-tag> </el-tag>
<el-tag size="mini" :type="item.uploaded ? 'success' : 'info'">
{{ getCapturedUploadStatusLabel(item) }}
</el-tag>
</div> </div>
<el-button type="danger" @click="removeCapturedMedia(index)">删除</el-button> <el-button type="danger" @click="removeCapturedMedia(index)">删除</el-button>
</div> </div>
@ -733,7 +736,16 @@ export default {
this.submitNodeReportWithMedia(false) this.submitNodeReportWithMedia(false)
}, },
submitNodeReportWithMedia (reportNode = true) { submitNodeReportWithMedia (reportNode = true) {
if (!this.capturedMediaList.length) {
const pendingMediaList = this.getPendingCapturedMediaList()
if (!pendingMediaList.length) {
if (reportNode && this.hasUploadedMediaOnly) {
this.submitNodeReportOnly('REPORT_ONLY')
return
}
if (this.capturedMediaList.length > 0) {
this.$message.warning('当前无待上传文件，请先拍照或录像')
return
}
this.$message.warning('请先拍照或录制视频') this.$message.warning('请先拍照或录制视频')
return return
} }
@ -750,7 +762,7 @@ export default {
formData.append('remark', payload.remark || '') formData.append('remark', payload.remark || '')
formData.append('mediaStep', this.reportData.mediaStep || '') formData.append('mediaStep', this.reportData.mediaStep || '')
formData.append('reportNode', String(reportNode)) formData.append('reportNode', String(reportNode))
this.capturedMediaList.forEach(item => {
pendingMediaList.forEach(item => {
formData.append('file', item.raw, item.name) formData.append('file', item.raw, item.name)
}) })
this.reportLoading = true this.reportLoading = true
@ -772,8 +784,13 @@ export default {
if (mediaNodeKey) { if (mediaNodeKey) {
this.$set(this.uploadedMediaNodeFlagMap, mediaNodeKey, true) this.$set(this.uploadedMediaNodeFlagMap, mediaNodeKey, true)
} }
this.resetCapturedMedia()
this.captureIndex = 1
const now = new Date()
const uploadedAt = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
pendingMediaList.forEach(item => {
this.$set(item, 'uploaded', true)
this.$set(item, 'uploadedAt', uploadedAt)
this.$set(item, 'uploadedStep', this.reportData.mediaStep || '')
})
this.reportData.mediaStep = '' this.reportData.mediaStep = ''
} }
this.getDataList() this.getDataList()
@ -801,6 +818,15 @@ export default {
} }
return `${orderNo}#${nodeCode}` return `${orderNo}#${nodeCode}`
}, },
getPendingCapturedMediaList () {
return (this.capturedMediaList || []).filter(item => item && item.raw && !item.uploaded)
},
getCapturedUploadStatusLabel (item) {
if (!item || !item.uploaded) {
return '待上传'
}
return item.uploadedStep ? `已上传(${item.uploadedStep})` : '已上传'
},
async startCamera () { async startCamera () {
if (!this.requiresMediaUpload(this.reportData.orderType, this.reportData.nodeCode, this.reportData.nodeName)) { if (!this.requiresMediaUpload(this.reportData.orderType, this.reportData.nodeCode, this.reportData.nodeName)) {
return return
@ -963,7 +989,10 @@ export default {
kind: kind, kind: kind,
mimeType: file.type, mimeType: file.type,
raw: file, raw: file,
previewUrl: previewUrl
previewUrl: previewUrl,
uploaded: false,
uploadedAt: '',
uploadedStep: ''
}) })
}, },
createCaptureName (kind, mimeType) { createCaptureName (kind, mimeType) {
@ -1039,7 +1068,10 @@ export default {
kind: fileKind, kind: fileKind,
mimeType: file.type || '', mimeType: file.type || '',
raw: file, raw: file,
previewUrl: previewUrl
previewUrl: previewUrl,
uploaded: false,
uploadedAt: '',
uploadedStep: ''
}) })
}) })
if (event && event.target) { if (event && event.target) {

Write Preview
Loading…
Cancel
Save