form-center-front/src/components/admin/ImportPanel.vue

<script setup lang="ts">
/**
 * 批量导入面板（契约 v2 §5.1/C14，T18）：通用壳管理员视图「导入」按钮背后的弹窗。
 *
 * 三件事：下载模板 → 选文件 → 逐行结果。四处分明：
 * 1. **导入入口只在管理员视图**（§5.1）：能不能进来由该表单 ALL 档决定，守卫在后端
 *    （`requireData`），这里只负责不把这个按钮画给填报者；
 * 2. **坏行不静默**：响应是逐行结果，表格里 ok/error 全摊开；整体"成功 N 行失败 M 行"
 *    不等于"文件里有 N+M 行"这件事也由行号列自证；
 * 3. **重复导入同一个文件是逐行 200+原 answerId**（C13 服务端确定性幂等键），
 *    所以"手抖点两次导入"不会产生重复数据，也不会报错——提示语里写清楚，否则用户以为没执行；
 * 4. 模板与解析共用后端那一份映射（`AnswerImportService`），前端不重述字段规则；
 *    行上限 1000 超限是整批拒（不是截断），文案按后端 msg 原样给。
 */
import { computed, ref, watch } from "vue";
import { Message } from "view-ui-plus";
import { dataApi, downloadBlob, importTemplateBlob } from "@/api/module/data";
import type { ImportRowResult } from "@/types/data";

const props = defineProps<{
    modelValue: boolean;
    /** 导入目标：数据面按 uuid 寻址（code 只作填报入口，契约 §1） */
    form: { formUuid: string; code: string; name: string; appCode?: string | null };
}>();
const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>();

const file = ref<File | null>(null);
const inputRef = ref<HTMLInputElement | null>(null);
const busy = ref(false);
const rows = ref<ImportRowResult[]>([]);
const counts = ref<{ ok: number; fail: number } | null>(null);

const visible = computed({
    get: () => props.modelValue,
    set: (next: boolean) => emit("update:modelValue", next)
});

const columns = computed(() => [
    { title: "行号", key: "rowNo", width: 70 },
    {
        title: "结果",
        key: "ok",
        width: 80,
        render: (h: any, p: any) =>
            h("Tag", { color: p.row.ok ? "green" : "red" }, p.row.ok ? "已写入" : "未写入")
    },
    { title: "答卷ID", key: "answerId", minWidth: 150, ellipsis: true, tooltip: true },
    { title: "原因", key: "error", minWidth: 220 }
]);

function pick(next: Event) {
    const picked = (next.target as HTMLInputElement).files?.[0] || null;
    file.value = picked;
    rows.value = [];
    counts.value = null;
}

async function downloadTemplate() {
    busy.value = true;
    try {
        const blob = await importTemplateBlob(props.form.formUuid);
        downloadBlob(blob, `import-template-${props.form.code}.xlsx`);
    } catch (e: any) {
        Message.error(e?.message || "模板下载失败");
    } finally {
        busy.value = false;
    }
}

async function runImport() {
    if (!file.value) {
        Message.warning("先选择按模板填好的 xlsx 文件");
        return;
    }
    busy.value = true;
    try {
        const result = await dataApi.import(props.form.formUuid, file.value).send();
        rows.value = result?.rows || [];
        counts.value = { ok: result?.okCount ?? 0, fail: result?.failCount ?? 0 };
        if (counts.value.fail === 0) {
            Message.success(`导入完成：${counts.value.ok} 行已写入`);
        } else {
            Message.warning(`导入完成：${counts.value.ok} 行已写入，${counts.value.fail} 行未写入（见下表原因）`);
        }
    } catch (e: any) {
        // 整批被拒的情形都在这里（不是这张表的模板、label 重复、行数超上限、解析失败）：
        // 后端给的是可诊断文案，原样亮出来，不在前端改写
        Message.error(e?.message || "导入失败");
    } finally {
        busy.value = false;
    }
}

watch(visible, (open) => {
    if (!open) return;
    file.value = null;
    rows.value = [];
    counts.value = null;
    if (inputRef.value) inputRef.value.value = "";
});
</script>

<template>
    <Modal v-model="visible" :title="`批量导入｜${form.name}`" :width="760" :mask-closable="false">
        <div class="import-bar">
            <Button :loading="busy" icon="md-download" @click="downloadTemplate">下载模板</Button>
            <input ref="inputRef" type="file" accept=".xlsx" @change="pick" />
            <Button type="primary" :loading="busy" :disabled="!file" icon="md-cloud-upload" @click="runImport">
                导入
            </Button>
        </div>
        <Alert show-icon type="info" class="import-tip">
            每一行都走与手工填报<b>同一条提交管线</b>（值校验、限次、截止、幂等、索引），所以导入的数据与
            手工填的完全可比；重复导入同一个文件不会落重复行，而是逐行返回原答卷ID。
            第一列「被记录人」留空即以你本人为被记录人；填他人 ID 需要该表单的 ALL 档。
        </Alert>
        <p v-if="counts" class="import-count">
            共 {{ rows.length }} 行：已写入 {{ counts.ok }}，未写入 {{ counts.fail }}
        </p>
        <Table :columns="columns" :data="rows" size="small" :border="false" max-height="320" />
        <template #footer>
            <Button @click="visible = false">关闭</Button>
        </template>
    </Modal>
</template>

<style scoped>
.import-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.import-tip {
    margin-bottom: 10px;
}
.import-count {
    margin: 0 0 8px;
    font-size: 13px;
    color: #515a6e;
}
</style>