85 lines
6.1 KiB
Vue
85 lines
6.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAuthStore } from '@/core/auth/auth'
|
|
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|
import { overseasWarehousePermissions as permission } from '../permissions'
|
|
import { bindVehiclePhoto, getVehicleDocuments, readVehiclePhoto, uploadVehiclePhoto, type FuelSlot, type VehicleDocuments, type VehiclePhoto } from '../api/dispatchVehicleDocuments'
|
|
|
|
const props = defineProps<{ dispatchNo: string }>()
|
|
const auth = useAuthStore(), access = useAccessPreviewStore()
|
|
const emit = defineEmits<{ saved: [] }>()
|
|
const snapshot = ref<VehicleDocuments | null>(null), busy = ref(false), error = ref<ApiErrorDetails | null>(null)
|
|
const preview = ref('')
|
|
const actor = auth.user?.id || '', number = props.dispatchNo
|
|
const editable = computed(() => access.can(permission.dispatchEdit) && snapshot.value?.editable === true)
|
|
const roles: Array<{ slot: FuelSlot; label: string }> = [{ slot: 'FUEL_START', label: '起始油耗表盘' }, { slot: 'FUEL_END', label: '结束油耗表盘' }]
|
|
let active = true
|
|
function ensureScope() { if (!active || auth.user?.id !== actor || props.dispatchNo !== number) throw new Error('资料操作身份已变化，请重新打开') }
|
|
async function load() {
|
|
if (busy.value) return
|
|
busy.value = true; error.value = null
|
|
try { const result = await getVehicleDocuments(number); ensureScope(); if (result.dispatchNo !== number) throw new Error('车辆资料与排车单不一致'); snapshot.value = result }
|
|
catch (cause) { if (active) error.value = getApiErrorDetails(cause, '车辆资料读取失败') }
|
|
finally { if (active) busy.value = false }
|
|
}
|
|
async function upload(slot: FuelSlot, event: Event) {
|
|
const input = event.target as HTMLInputElement, file = input.files?.[0]; input.value = ''
|
|
if (!file || busy.value || !editable.value) return
|
|
if (!['image/jpeg','image/png'].includes(file.type) || !file.size || file.size > 10 * 1024 * 1024) { ElMessage.warning('请选择不超过10MiB的JPG或PNG图片'); return }
|
|
busy.value = true; error.value = null
|
|
try {
|
|
ensureScope()
|
|
const photo = await uploadVehiclePhoto(number, slot, file, crypto.randomUUID()); ensureScope()
|
|
const latest = await getVehicleDocuments(number); ensureScope(); snapshot.value = latest
|
|
if (!latest.editable) throw new Error('当前状态不允许修改照片')
|
|
if (photo.slot !== slot || !photo.fileId) throw new Error('上传结果与照片类别不一致')
|
|
const result = await bindVehiclePhoto(number, slot, { recordVersion: latest.recordVersion, idempotencyKey: crypto.randomUUID(), fileId: photo.fileId }); ensureScope()
|
|
snapshot.value = result; emit('saved'); ElMessage.success('照片已保存')
|
|
|
|
} catch (cause) { if (active) error.value = getApiErrorDetails(cause, '图片上传或保存失败，请重新选择图片') }
|
|
finally { busy.value = false }
|
|
}
|
|
async function view(photo: VehiclePhoto) {
|
|
if (busy.value) return
|
|
busy.value = true; error.value = null
|
|
try { const blob = await readVehiclePhoto(number, photo); ensureScope(); if (preview.value) URL.revokeObjectURL(preview.value); preview.value = URL.createObjectURL(blob) }
|
|
catch (cause) { if (active) error.value = getApiErrorDetails(cause, '图片读取失败') }
|
|
finally { if (active) busy.value = false }
|
|
}
|
|
onMounted(() => { void load() })
|
|
onBeforeUnmount(() => { active = false; if (preview.value) URL.revokeObjectURL(preview.value) })
|
|
defineExpose({ busy })
|
|
</script>
|
|
<template>
|
|
<div v-loading="busy" class="density-dialog-sections">
|
|
<LoadErrorState v-if="error" compact title="车辆资料操作失败" :message="error.message" :show-retry="true" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
|
<table class="density-table fuel-documents-table" aria-label="油耗图片"><thead><tr><th class="photo-actions">操作</th><th class="photo-category">图片类别</th><th>文件名称</th><th class="photo-time">保存时间</th></tr></thead><tbody>
|
|
<tr v-for="role in roles" :key="role.slot">
|
|
<td><label v-if="editable" class="photo-upload" :class="{ 'is-disabled': busy }">上传／替换<input type="file" accept="image/jpeg,image/png" :aria-label="role.label" :disabled="busy" @change="upload(role.slot, $event)" /></label><span v-else>—</span></td>
|
|
<td>{{ role.label }}</td>
|
|
<td><div v-for="photo in snapshot?.photos.filter(item => item.slot === role.slot) || []" :key="photo.fileId"><el-button link :disabled="busy" @click="view(photo)">{{ photo.fileName }}</el-button></div><span v-if="!snapshot?.photos.some(item => item.slot === role.slot)">未上传</span></td>
|
|
<td><div v-for="photo in snapshot?.photos.filter(item => item.slot === role.slot) || []" :key="photo.fileId">{{ photo.savedAt?.replace('T', ' ') || '—' }}</div><span v-if="!snapshot?.photos.some(item => item.slot === role.slot)">—</span></td>
|
|
</tr>
|
|
</tbody></table>
|
|
<img v-if="preview" :src="preview" alt="油耗图片预览" class="photo-preview" />
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.fuel-documents-table { table-layout: fixed; }
|
|
.fuel-documents-table td { overflow-wrap: anywhere; }
|
|
.fuel-documents-table :deep(.el-button > span) { white-space: normal; text-align: left; overflow-wrap: anywhere; }
|
|
.photo-actions { width: 110px; }
|
|
.photo-category { width: 160px; }
|
|
.photo-time { width: 190px; }
|
|
.photo-upload { position: relative; display: inline-flex; color: var(--el-color-primary); cursor: pointer; }
|
|
.photo-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
|
|
.photo-upload:focus-within { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
|
|
.photo-upload.is-disabled { color: var(--el-text-color-disabled); cursor: not-allowed; }
|
|
.photo-upload.is-disabled input { cursor: not-allowed; }
|
|
.photo-preview { display: block; max-width: 100%; max-height: 400px; object-fit: contain; }
|
|
</style>
|