feat(admin): synchronize fleet photos and multi-image loading documents

2026-10-26 17:12:38 +08:00
parent e399f3f76f
commit acb90007de
29 changed files with 556 additions and 95 deletions
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import AppDialog from '@/shared/components/AppDialog.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import { getResourcePhoto, uploadResourcePhoto, downloadResourcePhoto, type ResourcePhotoKind, type ResourcePhotoDetail } from '../api/resourcePhotos'
+import { overseasMasterDataPermissions as permission } from '../permissions'
+
+const props = defineProps<{ kind: ResourcePhotoKind; resourceId: string }>()
+const access = useAccessPreviewStore(), detail = ref<ResourcePhotoDetail | null>(null), loading = ref(false), busy = ref(false)
+const error = ref<ApiErrorDetails | null>(null), input = ref<HTMLInputElement | null>(null), previewOpen = ref(false), url = ref('')
+const label = computed(() => props.kind === 'VEHICLE' ? '车辆图片' : '司机照片')
+const editable = computed(() => access.can(props.kind === 'VEHICLE' ? permission.vehicleEdit : permission.driverUpload))
+let generation = 0
+function closePreview() { previewOpen.value = false; if (url.value) URL.revokeObjectURL(url.value); url.value = '' }
+async function load() {
+  const current = ++generation; closePreview(); detail.value = null; loading.value = true; error.value = null; busy.value = false
+  try { const result = await getResourcePhoto(props.kind, props.resourceId); if (current === generation) detail.value = result }
+  catch (cause) { if (current === generation) error.value = getApiErrorDetails(cause, '档案照片加载失败') }
+  finally { if (current === generation) loading.value = false }
+}
+async function upload(event: Event) {
+  const element = event.target as HTMLInputElement, file = element.files?.[0]; element.value = ''
+  if (!file || !detail.value || busy.value || !editable.value) return
+  if (!['image/jpeg', 'image/png'].includes(file.type) || !file.size || file.size > 10 * 1024 * 1024) { ElMessage.warning('请选择非空 JPG 或 PNG，最大 10MiB'); return }
+  const current = generation; busy.value = true; error.value = null
+  try {
+    const saved = await uploadResourcePhoto(props.kind, props.resourceId, detail.value.recordVersion, file)
+    if (current !== generation) return
+    detail.value = saved; closePreview(); ElMessage.success(`${label.value}已保存，新排车会自动带入`)
+  } catch (cause) { if (current === generation) error.value = getApiErrorDetails(cause, '照片保存未完成，请重新读取后重试') }
+  finally { if (current === generation) busy.value = false }
+}
+async function preview() {
+  if (!detail.value?.photo || busy.value) return
+  const current = generation; busy.value = true; error.value = null
+  try {
+    const blob = await downloadResourcePhoto(props.kind, props.resourceId, detail.value.photo.fileId)
+    if (current !== generation) return
+    closePreview(); url.value = URL.createObjectURL(blob); previewOpen.value = true
+  } catch (cause) { if (current === generation) error.value = getApiErrorDetails(cause, '照片预览失败') }
+  finally { if (current === generation) busy.value = false }
+}
+watch(() => [props.kind, props.resourceId], load, { immediate: true })
+onBeforeUnmount(() => { generation++; closePreview() })
+</script>
+<template>
+  <section v-loading="loading" :aria-label="label">
+    <LoadErrorState v-if="error" title="档案照片操作未完成" :message="error.message" compact @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
+    <div class="density-actions">
+      <el-button v-if="detail?.photo" :disabled="busy" @click="preview">查看{{ label }}</el-button><span v-else-if="detail">尚未上传{{ label }}</span>
+      <el-button v-if="editable" :disabled="!detail || busy" :loading="busy" @click="input?.click()">上传 / 替换{{ label }}</el-button>
+      <input ref="input" hidden type="file" accept="image/jpeg,image/png" :aria-label="'上传' + label" @change="upload">
+    </div>
+    <p class="density-dialog-note">排车选择此档案后自动带入照片；替换不影响已保存的排车资料。JPG、PNG，最大 10MiB。</p>
+    <AppDialog :model-value="previewOpen" class="admin-density-dialog" :title="label" width="620px" :show-confirm="false" cancel-text="关闭" @update:model-value="closePreview"><img v-if="url" class="resource-photo-preview" :src="url" :alt="label"></AppDialog>
+  </section>
+</template>
+<style scoped>.resource-photo-preview { display: block; width: 100%; max-height: 60vh; object-fit: contain; }</style>