网页设计推荐网站谷歌商店官网
在前端开发中，数据比对是一个常见需求，尤其在资产管理等场景中。本文将基于 Vue.js 和 Element UI，通过一个简化的代码示例，展示如何实现“新建比对”和“开始比对”功能的核心部分。
一、功能简介
我们将聚焦两个核心功能：
- 新建比对：打开上传对话框，允许用户选择文件。
- 开始比对：上传文件并调用后端接口进行数据比对，同时展示进度。
以下是逐步拆分的实现细节。
二、核心代码实现
1. 新建比对
“新建比对”功能通过一个按钮触发，打开文件上传对话框。
模板部分
在页面中添加按钮和上传对话框：
<template><MainCard><!-- 新建比对按钮 --><el-row><el-col :span="24"><el-button type="primary" @click="openImportDialog" class="mg20">新建比对</el-button></el-col></el-row><!-- 导入对话框 --><el-dialog title="数据比对" :visible.sync="visible" width="800px" append-to-body><div class="importDialogBody"><p class="title">数据上传</p><div class="text-box"><el-uploadref="upload":limit="limit":on-remove="handleRemove":before-upload="handleBeforeUpload":on-change="handleFileChange":file-list="fileList":auto-upload="false"action="#"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload></div></div><div slot="footer" class="dialog-footer"><el-button @click="visible = false">取消</el-button><el-button type="primary" @click="confirmImport" :loading="buttonLoading" :disabled="!fileRaw">开始比对</el-button></div></el-dialog></MainCard>
</template>- 点击“新建比对”按钮，调用 openImportDialog 方法打开对话框。
- 对话框中包含一个 el-upload 组件，用户可拖拽或点击上传文件。
脚本部分
对应的逻辑如下：
<script>
export default {data() {return {visible: false, // 控制对话框显示buttonLoading: false, // 按钮加载状态fileRaw: null, // 上传的原始文件fileList: [], // 文件列表limit: 1 // 限制上传一个文件};},methods: {// 打开导入对话框openImportDialog() {this.visible = true;this.$nextTick(() => {this.resetUpload(); // 重置上传状态});},// 重置上传组件resetUpload() {this.$refs['upload'].clearFiles();this.fileList = [];this.fileRaw = null;},// 文件移除时更新状态handleRemove(file, fileList) {this.fileList = fileList;if (fileList.length === 0) this.fileRaw = null;},// 文件选择时更新状态handleFileChange(file, fileList) {this.fileRaw = file.raw;this.fileList = fileList;},// 文件上传前校验handleBeforeUpload(file) {if (!this.validFile(file)) {return false;}this.fileRaw = file;this.fileList = [file];return false; // 阻止自动上传},// 文件校验逻辑validFile(file) {let fileName = file.name;const isLt10M = file.size / 1024 / 1024 < 10;const fitNameArr = ['xls', 'xlsx'];const index = fileName.lastIndexOf('.');if (index !== -1) {const suffName = fileName.slice(index + 1);if (!isLt10M) {this.$message({ message: '上传文件大小不能超过 10MB!', type: 'warning' });this.fileList = [];return false;}if (!fitNameArr.includes(suffName)) {this.$message.warning('只能上传xls或者xlsx格式的文件');this.fileList = [];return false;}} else {this.$message.warning('文件名称不合法');this.fileList = [];return false;}return true;}}
};
</script>- openImportDialog 打开对话框并重置上传状态。
- handleBeforeUpload 校验文件大小（<10MB）和格式（xls/xlsx）。
- handleFileChange 更新 fileRaw，用于后续比对。
2. 开始比对
点击“开始比对”按钮后，上传文件并调用后端接口。
模板部分
对话框底部已包含“开始比对”按钮，绑定 confirmImport 方法。
脚本部分
添加比对逻辑：
<script>
import { compareData } from '@/api/asset/assetReport/datacomparison';export default {data() {return {visible: false,buttonLoading: false,fileRaw: null,fileList: [],limit: 1};},methods: {// 打开导入对话框（同上，略）// 文件相关方法（同上，略）// 开始比对async confirmImport() {if (!this.fileRaw) {this.$message.warning('请先选择需要比对的文档');return;}this.buttonLoading = true;const formData = new FormData();formData.append('file', this.fileRaw);try {const response = await compareData(formData);this.$message.success('比对完成');} catch (error) {this.$message.error('比对失败');} finally {this.buttonLoading = false;this.visible = false;}}}
};
</script>- 检查是否选择了文件，未选择则提示用户。
- 使用 FormData 封装文件，调用 compareData 接口进行比对。
- 根据结果显示成功或失败提示，并关闭对话框。
三、样式优化
为对话框添加简洁样式，提升用户体验：
<style lang="scss" scoped>
.mg20 {margin-bottom: 10px;
}.importDialogBody {font-size: 13px;color: #606266;.title {font-weight: bold;margin-bottom: 10px;font-size: 16px;padding-left: 8px;position: relative;}.title::before {position: absolute;left: 0;top: 52%;transform: translateY(-50%);content: '';width: 4px;border-radius: 2px;background: #3d63c8;height: 90%;}.text-box {display: flex;flex-direction: column;align-items: center;}
}
</style>- .mg20 为按钮添加底部间距。
- .importDialogBody 美化上传区域，标题前添加蓝色标识线。
四、总结
通过以上代码，我们实现了“新建比对”和“开始比对”的核心功能：
- 点击“新建比对”打开上传对话框，支持文件校验。
- 点击“开始比对”上传文件并调用后端接口，完成数据比对。