28 lines
2.5 KiB
Vue
28 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Trash2 } from '@lucide/vue'
|
|
import { deleteTruckAppointmentAttachment } from '../api/platformTrucking'
|
|
import type { TruckAttachmentReference } from '../types'
|
|
const props = defineProps<{ modelValue: boolean; appointmentId?: string; attachments: TruckAttachmentReference[]; canManage?: boolean }>()
|
|
const emit = defineEmits<{ 'update:modelValue': [boolean]; changed: [] }>()
|
|
const busy = ref(false)
|
|
const attachmentTypeLabels: Record<string, string> = { DISPATCH_ORDER: '派车单', DRIVER_DOCUMENT: '司机证件', VEHICLE_DOCUMENT: '车辆证件', OTHER: '其他附件' }
|
|
function attachmentTypeLabel(value: string | null | undefined) { return value ? attachmentTypeLabels[value] || '业务附件' : '业务附件' }
|
|
async function remove(item: TruckAttachmentReference) { if (!props.appointmentId || !item.id) return; await ElMessageBox.confirm('确认删除该附件引用？', '删除确认', { type: 'warning' }); busy.value = true; try { await deleteTruckAppointmentAttachment(props.appointmentId, item.id); emit('changed'); ElMessage.success('附件引用已删除') } catch { ElMessage.error('删除失败') } finally { busy.value = false } }
|
|
</script>
|
|
<template>
|
|
<el-dialog :model-value="props.modelValue" title="预约附件" width="min(640px, 94vw)" @update:model-value="emit('update:modelValue', $event)">
|
|
<el-empty v-if="attachments.length === 0" description="暂无预约附件" :image-size="72" />
|
|
<div v-for="item in attachments" :key="item.fileId" class="attachment-row">
|
|
<div><strong>{{ item.fileName || '未命名文件' }}</strong><small>{{ attachmentTypeLabel(item.attachmentType) }}{{ item.uploadedAt ? ` · ${item.uploadedAt}` : '' }}</small></div>
|
|
<el-button v-if="props.appointmentId && props.canManage && item.id" text type="danger" :loading="busy" @click="remove(item)"><Trash2 :size="15" />删除</el-button>
|
|
</div>
|
|
<template #footer><el-button type="primary" @click="emit('update:modelValue', false)">关闭</el-button></template>
|
|
</el-dialog>
|
|
</template>
|
|
<style scoped>
|
|
.attachment-row { display:flex; justify-content:space-between; gap:12px; margin:14px 0; padding:12px; border:1px solid var(--el-border-color-lighter); border-radius:6px; overflow-wrap:anywhere; }.attachment-row small { display:block; margin-top:4px; color:var(--el-text-color-secondary); }
|
|
@media (max-width: 560px) { .attachment-row { flex-direction:column; } }
|
|
</style>
|