fix: 修复ImportDialog模板根元素问题

- 添加div根元素包裹两个dialog组件
- 解决Vue 2 'Component template should contain exactly one root element'编译错误

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
wkc
2026-02-05 16:33:33 +08:00
parent 9aa3faf452
commit 8b6967bf32

View File

@@ -1,98 +1,101 @@
<template> <template>
<el-dialog <div>
:title="title" <!-- 导入对话框 -->
:visible.sync="visible" <el-dialog
width="550px" :title="title"
center :visible.sync="visible"
append-to-body width="550px"
@open="handleDialogOpen" center
@close="handleDialogClose" append-to-body
:close-on-click-modal="false" @open="handleDialogOpen"
:close-on-press-escape="false" @close="handleDialogClose"
custom-class="import-dialog-wrapper" :close-on-click-modal="false"
> :close-on-press-escape="false"
<!-- 全屏Loading遮罩层 --> custom-class="import-dialog-wrapper"
<div v-show="isUploading" class="import-loading-overlay"> >
<i class="el-icon-loading"></i> <!-- 全屏Loading遮罩层 -->
<p>正在导入中,请稍候...</p> <div v-show="isUploading" class="import-loading-overlay">
</div> <i class="el-icon-loading"></i>
<p>正在导入中,请稍候...</p>
</div>
<el-form :model="formData" label-position="top" size="medium"> <el-form :model="formData" label-position="top" size="medium">
<!-- 导入类型 --> <!-- 导入类型 -->
<el-form-item label="导入类型"> <el-form-item label="导入类型">
<el-radio-group v-model="formData.importType" @change="handleImportTypeChange" style="width: 100%"> <el-radio-group v-model="formData.importType" @change="handleImportTypeChange" style="width: 100%">
<el-radio label="person" border>个人中介</el-radio> <el-radio label="person" border>个人中介</el-radio>
<el-radio label="entity" border>机构中介</el-radio> <el-radio label="entity" border>机构中介</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 文件上传 --> <!-- 文件上传 -->
<el-form-item label="选择文件"> <el-form-item label="选择文件">
<el-upload <el-upload
ref="upload" ref="upload"
:limit="1" :limit="1"
accept=".xlsx, .xls" accept=".xlsx, .xls"
:headers="headers" :headers="headers"
:action="uploadUrl" :action="uploadUrl"
:disabled="isUploading" :disabled="isUploading"
:on-progress="handleFileUploadProgress" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :on-success="handleFileSuccess"
:on-error="handleFileError" :on-error="handleFileError"
:on-change="handleFileChange" :on-change="handleFileChange"
:on-remove="handleFileRemove" :on-remove="handleFileRemove"
:auto-upload="false" :auto-upload="false"
drag drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
仅支持 .xls .xlsx 格式,文件大小不超过 10MB
</div>
</el-upload>
</el-form-item>
<!-- 其他选项 -->
<el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-checkbox v-model="formData.updateSupport" :disabled="isUploading">
更新已存在的数据
</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right">
<el-link type="primary" :underline="false" @click="handleDownloadTemplate">
<i class="el-icon-download"></i>
下载导入模板
</el-link>
</el-col>
</el-row>
</el-form-item>
</el-form>
<!-- 底部按钮 -->
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
icon="el-icon-upload2"
:loading="isUploading"
:disabled="!isFileSelected"
@click="handleSubmit"
> >
<i class="el-icon-upload"></i> {{ isUploading ? '导入中...' : '开始导入' }}
<div class="el-upload__text">将文件拖到此处,<em>点击上传</em></div> </el-button>
<div class="el-upload__tip" slot="tip"> <el-button icon="el-icon-close" @click="visible = false" :disabled="isUploading">
仅支持 .xls .xlsx 格式,文件大小不超过 10MB
</div> </el-button>
</el-upload> </div>
</el-form-item> </el-dialog>
<!-- 其他选项 --> <!-- 导入结果对话框 -->
<el-form-item> <import-result-dialog
<el-row :gutter="20"> :visible.sync="importResultVisible"
<el-col :span="12"> :content="importResultContent"
<el-checkbox v-model="formData.updateSupport" :disabled="isUploading"> title="导入结果"
更新已存在的数据 @close="handleImportResultClose"
</el-checkbox> />
</el-col> </div>
<el-col :span="12" style="text-align: right">
<el-link type="primary" :underline="false" @click="handleDownloadTemplate">
<i class="el-icon-download"></i>
下载导入模板
</el-link>
</el-col>
</el-row>
</el-form-item>
</el-form>
<!-- 底部按钮 -->
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
icon="el-icon-upload2"
:loading="isUploading"
:disabled="!isFileSelected"
@click="handleSubmit"
>
{{ isUploading ? '导入中...' : '开始导入' }}
</el-button>
<el-button icon="el-icon-close" @click="visible = false" :disabled="isUploading">
</el-button>
</div>
</el-dialog>
<!-- 导入结果对话框 -->
<import-result-dialog
:visible.sync="importResultVisible"
:content="importResultContent"
title="导入结果"
@close="handleImportResultClose"
/>
</template> </template>
<script> <script>