From ce87554ea83c8094418636ada270283c97ce199b Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Fri, 27 May 2022 13:34:05 +0800
Subject: [PATCH] =?UTF-8?q?UP=20=E5=AF=BC=E5=85=A5=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E6=BC=94=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/common.js        |  7 +++++++
 src/views/vab/importexport.vue | 35 +++++++++++++++++++++++++---------
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/api/model/common.js b/src/api/model/common.js
index 0cd0eedd..47c5b0f5 100644
--- a/src/api/model/common.js
+++ b/src/api/model/common.js
@@ -23,6 +23,13 @@ export default {
 			return await http.get(this.url, data, config);
 		}
 	},
+	importFile: {
+		url: `${config.API_URL}/fileImport`,
+		name: "导入附件",
+		post: async function(data, config={}){
+			return await http.post(this.url, data, config);
+		}
+	},
 	file: {
 		menu: {
 			url: `${config.API_URL}/file/menu`,
diff --git a/src/views/vab/importexport.vue b/src/views/vab/importexport.vue
index 8820b244..a0b01841 100644
--- a/src/views/vab/importexport.vue
+++ b/src/views/vab/importexport.vue
@@ -2,9 +2,9 @@
 	<el-main>
 		<el-row :gutter="15">
 			<el-col :lg="12">
-				<el-card shadow="never" header="导入">
-					<sc-file-import :apiObj="$API.common.uploadFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></sc-file-import>
-					<sc-file-import :apiObj="$API.common.uploadFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
+				<el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
+					<sc-file-import :apiObj="$API.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></sc-file-import>
+					<sc-file-import :apiObj="$API.common.importFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
 						<template #default="{open}">
 							<el-button type="primary" icon="sc-icon-upload" @click="open">导入(全配置)</el-button>
 						</template>
@@ -72,6 +72,23 @@
 			</el-col>
 		</el-row>
 	</el-main>
+
+	<el-dialog v-model="importErrDialogVisible" title="导入失败" :width="680" destroy-on-close @closed="()=>{importErrData={}}">
+		<el-alert :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`" type="error" show-icon :closable="false"/>
+		<div style="margin-top: 15px;">
+			<el-table :data="importErrData.failList" border stripe max-height="270" style="width: 100%">
+				<el-table-column prop="keyName" label="主键名" width="180" />
+				<el-table-column prop="" label="状态" width="100" >
+					<el-tag type="danger"><el-icon><el-icon-circle-close-filled/></el-icon> 失败</el-tag>
+				</el-table-column>
+				<el-table-column prop="reason" label="原因" />
+			</el-table>
+		</div>
+		<template #footer>
+			<el-button type="primary" @click="importErrDialogVisible=false">我知道了</el-button>
+		</template>
+	</el-dialog>
+
 </template>
 
 <script>
@@ -86,6 +103,8 @@
 		},
 		data() {
 			return {
+				importErrDialogVisible: false,
+				importErrData: {},
 				column: [
 					{
 						label: "姓名",
@@ -121,18 +140,16 @@
 		methods: {
 			success(res, close){
 				if(res.code==200){
-					this.$alert(res, "导入成功", {
+					this.$alert("导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。", "导入成功", {
 						type: "success",
 						showClose: false,
 						center: true
 					})
 					close()
 				}else{
-					this.$alert(res, "导入失败", {
-						type: "error",
-						showClose: false,
-						center: true
-					})
+					//返回失败后的自定义操作，这里演示显示错误的条目
+					this.importErrDialogVisible = true
+					this.importErrData = res.data
 				}
 
 			}