form-center-front/src/components/fields/upload/pc.vue

<script setup lang="ts">
/**
 * upload 附件（值 [{id,fileName,key}]；单文件 ≤50MB、每字段 ≤9 个是契约 §3 的硬上限，
 * 字段级 accept/maxSize/maxFiles 只能往更严收，不能往宽放）。
 * accept 不含 .svg 由设计器把门（P28），这里只如实呈现配置。
 */
import { computed, inject, ref } from "vue";
import type { ComputedRef } from "vue";
import type { FieldWidgetProps } from "../types";
import type { FileValue } from "@/types/formSchema";
import { Upload } from "view-ui-plus";
import { alovaInstance } from "@/utils/alova/alova-iview";

/**
 * 上传端点由填报页按通道注入（匿名面必须走 `/anon/form/upload?code=`，契约 v2 C6：
 * 只有表单能定 form_file.sch_id=表单归属校）。没有注入=登录面默认，设计器预览等调用点行为不变。
 */
const uploadUrl = inject<ComputedRef<string>>("fcUploadUrl", computed(() => "/api/form/upload"));

const props = withDefaults(defineProps<FieldWidgetProps & {
    modelValue?: FileValue[];
    readonly?: boolean;
}>(), {
    modelValue: () => [],
    readonly: true
});

const emit = defineEmits<{
    (e: "update:modelValue", value: FileValue[]): void;
}>();

const fileList = computed(() => props.modelValue || []);
const uploading = ref(false);

const hints = computed(() => {
    const f = props.field;
    return [
        f.accept ? `格式 ${f.accept}` : "",
        f.maxSize ? `单个 ≤${f.maxSize}MB` : "",
        f.maxFiles ? `最多 ${f.maxFiles} 个` : ""
    ].filter(Boolean);
});

const accept = computed(() => props.field.accept || "");

async function beforeUpload(file: File) {
    const maxSize = (props.field.maxSize || 50) * 1024 * 1024;
    if (file.size > maxSize) {
        return false;
    }
    const maxFiles = props.field.maxFiles || 9;
    if (fileList.value.length >= maxFiles) {
        return false;
    }
    return true;
}

async function handleUpload(file: File) {
    uploading.value = true;
    try {
        const formData = new FormData();
        formData.append("file", file);
        const result = await alovaInstance.Post<{ id: number; fileName: string; key: string }>(
            uploadUrl.value,
            formData,
            { headers: { "Content-Type": "multipart/form-data" } }
        ).send();
        const newValue = [...fileList.value, { id: result.id, fileName: result.fileName, key: result.key }];
        emit("update:modelValue", newValue);
    } catch (e) {
        console.error("Upload failed:", e);
    } finally {
        uploading.value = false;
    }
}

function handleRemove(index: number) {
    const newValue = fileList.value.filter((_, i) => i !== index);
    emit("update:modelValue", newValue);
}
</script>

<template>
    <div class="attach">
        <div class="file-list">
            <div v-for="(item, idx) in fileList" :key="item.id" class="file-item">
                <Icon type="ios-document" class="file-icon" />
                <span class="file-name">{{ item.fileName }}</span>
                <Icon v-if="!readonly" type="ios-close-circle" class="file-remove" @click="handleRemove(idx)" />
            </div>
        </div>
        <Upload v-if="!readonly" :before-upload="beforeUpload" :handle-upload="handleUpload" :accept="accept"
            :disabled="uploading">
            <Button icon="ios-cloud-upload-outline" :loading="uploading">上传附件</Button>
        </Upload>
        <div v-if="hints.length" class="attach-hint">{{ hints.join("｜") }}</div>
    </div>
</template>

<style scoped>
.attach {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #f7f7f7;
    border-radius: 4px;
}
.file-icon {
    font-size: 16px;
    color: #515a6e;
}
.file-name {
    flex: 1;
    font-size: 13px;
    color: #515a6e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-remove {
    font-size: 16px;
    color: #ed4014;
    cursor: pointer;
}
.attach-hint {
    color: #808695;
    font-size: 12px;
}
</style>