28 lines
1.9 KiB
Vue
28 lines
1.9 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { reactive, watch } from 'vue'
|
||
|
|
import type { TruckAttachmentReference } from '../types'
|
||
|
|
const props = defineProps<{ modelValue: boolean; attachments: TruckAttachmentReference[]; readonly?: boolean }>()
|
||
|
|
const emit = defineEmits<{ 'update:modelValue': [boolean]; save: [TruckAttachmentReference[]] }>()
|
||
|
|
const draft = reactive<TruckAttachmentReference[]>([])
|
||
|
|
watch(() => props.attachments, (value) => { draft.splice(0, draft.length, ...(value || []).map((item) => ({ ...item }))) }, { immediate: true, deep: true })
|
||
|
|
function add() { draft.push({ fileId: '', fileName: '' }) }
|
||
|
|
function remove(index: number) { draft.splice(index, 1) }
|
||
|
|
function save() { emit('save', draft.filter((item) => item.fileId.trim() && item.fileName.trim()).map((item) => ({ ...item }))); emit('update:modelValue', false) }
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<el-dialog :model-value="props.modelValue" title="附件引用" width="min(640px, 94vw)" @update:model-value="emit('update:modelValue', $event)">
|
||
|
|
<el-alert type="info" :closable="false" title="此处仅维护文件服务返回的引用，不会模拟上传成功。" />
|
||
|
|
<div v-for="(item, index) in draft" :key="index" class="attachment-row">
|
||
|
|
<el-input v-model="item.fileId" placeholder="文件 ID" :disabled="readonly" />
|
||
|
|
<el-input v-model="item.fileName" placeholder="文件名" :disabled="readonly" />
|
||
|
|
<el-button text type="danger" :disabled="readonly" @click="remove(index)">删除</el-button>
|
||
|
|
</div>
|
||
|
|
<el-button v-if="!readonly" plain @click="add">新增引用</el-button>
|
||
|
|
<template #footer><el-button @click="emit('update:modelValue', false)">关闭</el-button><el-button v-if="!readonly" type="primary" @click="save">保存引用</el-button></template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<style scoped>
|
||
|
|
.attachment-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 14px 0; }
|
||
|
|
@media (max-width: 560px) { .attachment-row { grid-template-columns: 1fr; } }
|
||
|
|
</style>
|