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:
@@ -1,98 +1,101 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
width="550px"
|
||||
center
|
||||
append-to-body
|
||||
@open="handleDialogOpen"
|
||||
@close="handleDialogClose"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
custom-class="import-dialog-wrapper"
|
||||
>
|
||||
<!-- 全屏Loading遮罩层 -->
|
||||
<div v-show="isUploading" class="import-loading-overlay">
|
||||
<i class="el-icon-loading"></i>
|
||||
<p>正在导入中,请稍候...</p>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
width="550px"
|
||||
center
|
||||
append-to-body
|
||||
@open="handleDialogOpen"
|
||||
@close="handleDialogClose"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
custom-class="import-dialog-wrapper"
|
||||
>
|
||||
<!-- 全屏Loading遮罩层 -->
|
||||
<div v-show="isUploading" class="import-loading-overlay">
|
||||
<i class="el-icon-loading"></i>
|
||||
<p>正在导入中,请稍候...</p>
|
||||
</div>
|
||||
|
||||
<el-form :model="formData" label-position="top" size="medium">
|
||||
<!-- 导入类型 -->
|
||||
<el-form-item label="导入类型">
|
||||
<el-radio-group v-model="formData.importType" @change="handleImportTypeChange" style="width: 100%">
|
||||
<el-radio label="person" border>个人中介</el-radio>
|
||||
<el-radio label="entity" border>机构中介</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form :model="formData" label-position="top" size="medium">
|
||||
<!-- 导入类型 -->
|
||||
<el-form-item label="导入类型">
|
||||
<el-radio-group v-model="formData.importType" @change="handleImportTypeChange" style="width: 100%">
|
||||
<el-radio label="person" border>个人中介</el-radio>
|
||||
<el-radio label="entity" border>机构中介</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<el-form-item label="选择文件">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="headers"
|
||||
:action="uploadUrl"
|
||||
:disabled="isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileError"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
<!-- 文件上传 -->
|
||||
<el-form-item label="选择文件">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="headers"
|
||||
:action="uploadUrl"
|
||||
:disabled="isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileError"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
:auto-upload="false"
|
||||
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>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
仅支持 .xls 和 .xlsx 格式,文件大小不超过 10MB
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
{{ isUploading ? '导入中...' : '开始导入' }}
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" @click="visible = false" :disabled="isUploading">
|
||||
取 消
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 其他选项 -->
|
||||
<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"
|
||||
>
|
||||
{{ 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"
|
||||
/>
|
||||
<!-- 导入结果对话框 -->
|
||||
<import-result-dialog
|
||||
:visible.sync="importResultVisible"
|
||||
:content="importResultContent"
|
||||
title="导入结果"
|
||||
@close="handleImportResultClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user