From cdc9f459c94986941f786517714f2dbeee973834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Thu, 18 Jul 2024 00:32:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=AF=BC=E5=85=A5=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/system.js             |   9 +-
 src/assets/icons/FormXls.vue        |  18 ++++
 src/assets/icons/index.js           |   1 +
 src/components/scImport/index.vue   | 153 ++++++++++++++++++++--------
 src/views/setting/company/index.vue |  33 +++---
 src/views/setting/role/dataTree.vue |  10 +-
 6 files changed, 163 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/icons/FormXls.vue

diff --git a/src/api/model/system.js b/src/api/model/system.js
index a97b4c3..5cdad4c 100644
--- a/src/api/model/system.js
+++ b/src/api/model/system.js
@@ -231,7 +231,7 @@ export default {
 			url: `${config.API_URL}/organization.import`,
 			name: "公司资料导入",
 			post: async function (params) {
-				return await http.post(this.url,params);
+				return await http.post(this.url,params,{'Content-Type': 'multipart/form-data'});
 			}
 		}
 	},
@@ -294,6 +294,13 @@ export default {
 				return await http.post(this.url, params);
 			},
 		},
+		logout: {
+			url: `${config.API_URL}/user.logout`,
+			name: "用户退出",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			}
+		},
 		add:{
 			url: `${config.API_URL}/user.add`,
 			name: "用户新增",
diff --git a/src/assets/icons/FormXls.vue b/src/assets/icons/FormXls.vue
new file mode 100644
index 0000000..a59f997
--- /dev/null
+++ b/src/assets/icons/FormXls.vue
@@ -0,0 +1,18 @@
+<template>
+	<svg t="1721228246315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3444" width="200" height="200">
+		<path d="M0 0m102.4 0l819.2 0q102.4 0 102.4 102.4l0 819.2q0 102.4-102.4 102.4l-819.2 0q-102.4 0-102.4-102.4l0-819.2q0-102.4 102.4-102.4Z" fill="#FFFFFF" p-id="3445"></path>
+		<path d="M239.8208 128A60.8768 60.8768 0 0 0 179.2 188.6208v639.4368c0 33.28 27.3408 60.6208 60.6208 60.6208h544.3584c33.28 0 60.5952-27.3408 60.5952-60.6208V369.28L620.16 128H239.8208z" fill="#45B058" p-id="3446"></path>
+		<path d="M409.7024 768.5888a9.088 9.088 0 0 1-5.9392-2.3808l-43.9808-59.4176-45.1584 59.4176a9.088 9.088 0 0 1-5.9648 2.3808 8.1152 8.1152 0 0 1-8.32-8.32c0-1.1776 0-3.584 1.2032-4.7616l46.336-60.5952-42.752-58.24c-1.2032-1.2032-2.4064-2.3808-2.4064-4.7616 0-3.584 3.584-8.32 8.32-8.32 3.584 0 5.9392 1.1776 7.1424 3.584l41.6 54.656 40.3968-54.6816a6.528 6.528 0 0 1 5.9392-3.584c4.7616 0 9.5232 3.584 9.5232 8.3456 0 2.3808-1.2032 3.584-1.2032 4.7616l-43.9552 57.0368 46.336 61.7984c1.2032 1.2032 2.3808 3.584 2.3808 4.7616 0 4.7616-4.7616 8.32-9.4976 8.32z m118.8608-1.1776H464.384a13.184 13.184 0 0 1-13.0816-13.0816v-122.4192c0-4.7616 3.5584-8.32 9.4976-8.32 4.7616 0 8.32 3.584 8.32 8.32v120.064h59.4432c4.736 0 8.32 3.5328 8.32 7.1168 0 4.736-3.584 8.32-8.32 8.32z m83.2 2.3808c-21.4016 0-38.0416-7.1424-49.92-17.8432-2.3808-1.1776-2.3808-3.584-2.3808-5.9392 0-4.7616 2.3808-9.4976 8.32-9.4976 1.1776 0 3.5584 1.1776 4.736 2.3552 9.5232 8.32 23.7824 15.4624 40.4224 15.4624 24.96 0 33.28-14.2592 33.28-24.96 0-36.864-84.3776-16.64-84.3776-66.56 0-23.7568 20.1984-40.3968 48.7168-40.3968 17.8432 0 34.4576 5.9392 45.1584 15.4368 2.3808 1.1776 3.584 3.584 3.584 5.9392 0 4.7616-3.584 9.5232-8.32 9.5232a9.0112 9.0112 0 0 1-4.7616-2.3808c-10.7008-8.32-23.7824-11.904-36.864-11.904-17.8176 0-29.696 8.3456-29.696 22.6048 0 32.0768 84.3776 13.056 84.3776 66.56 0 20.1984-14.2592 41.6-52.3008 41.6z" fill="#FFFFFF" p-id="3447"></path><path d="M844.8256 370.432v11.8784h-152.1408s-76.0576-15.4368-73.6768-80.8192c0 0 2.3808 68.9408 71.296 68.9408h154.5216z" fill="#349C42" p-id="3448"></path>
+		<path d="M619.008 128v173.5168c0 19.0208 14.2592 68.9408 73.6768 68.9408h152.1408L619.008 128z" fill="#FFFFFF" opacity=".5" p-id="3449"></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "FormXls"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 29768d2..fa8dffd 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -23,6 +23,7 @@ export { default as UserLog } from './Log.vue'
 export { default as WechartRound } from './WechartRound.vue'
 export { default as Cost } from './Cost.vue'
 export { default as Finish } from './Finish.vue'
+export { default as FormXls } from './FormXls.vue'
 
 // 列表按钮
 export { default as Delete } from './Delete.vue'
diff --git a/src/components/scImport/index.vue b/src/components/scImport/index.vue
index d055896..d7640e8 100644
--- a/src/components/scImport/index.vue
+++ b/src/components/scImport/index.vue
@@ -1,5 +1,7 @@
 <template>
-	<el-dialog :title="titleMap[mode]" v-model="visible" :width="560" destroy-on-close draggable @closed="$emit('closed')">
+	<el-button type="primary" :size="size" plain @click="importFile">批量导入</el-button>
+
+	<el-dialog v-bind="$attrs" :title="title" v-model="visible" :width="560" destroy-on-close draggable @closed="visible=false">
 		<div class="importBody">
 			<el-upload
 				class="upload"
@@ -9,14 +11,27 @@
 				:on-success="handleSuccess"
 				:on-error="handleError"
 				:before-upload="beforeUpload"
+				:http-request="uploadFile"
 				drag
-				multiple
+				:disabled="importDis"
 			>
-				<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
-				<div class="el-upload__text">
-					<span class="laText">请将Excel拖到此处</span>
-					<span class="tipText">，或点击上传</span><em> Excel</em>
+				<div v-if="!importTrue">
+					<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
+					<div class="el-upload__text">
+						<span class="laText">请将Excel拖到此处</span>
+						<span class="tipText">，或点击上传</span><em> Excel</em>
+					</div>
 				</div>
+				<div v-else>
+					<div class="el-upload__text">
+						<el-icon class="trueIcon el-icon&#45;&#45;upload">
+							<sc-icon-FormXls />
+							<div class="deleteFile" @click="deleteFile"><el-icon class="icon"><el-icon-Close/></el-icon></div>
+						</el-icon>
+						<div class="el-upload__text">{{text}}</div>
+					</div>
+				</div>
+
 				<template #tip>
 					<div class="el-upload__tip">
 						<span class="tip">如果数据导入中途业务出错，请不要刷新页面，修改后继续点击导入</span>
@@ -24,16 +39,17 @@
 							<slot></slot>
 						</span>
 					</div>
-					<div class="importBox">
+					<div class="importBox" v-if="progressShow">
 						<div class="name">导入进度</div>
-						<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="67" />
+						<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="importInfo.rate" />
 					</div>
+					<div class="errText"></div>
 				</template>
 			</el-upload>
 		</div>
 		<template #footer>
 			<el-button @click="visible=false">取 消</el-button>
-			<el-button type="primary">确定导入</el-button>
+			<el-button type="primary" @click="save">确定导入</el-button>
 		</template>
 	</el-dialog>
 </template>
@@ -41,30 +57,55 @@
 <script>
 export default {
 	name: "import",
-	emits: ['success', 'closed'],
+	emits: ['parentParams', 'closed', "importSuccess"],
+	props:{
+		size:{type:String, default:'small'},
+		title:{type:String, default: ""},
+		text:{type:String, default: ""}
+	},
 	data(){
 		return{
-			mode: "import",
-			titleMap: {
-				import: '批量导入公司组织'
-			},
 			visible: false,
 
 			oss:{
 				host:''
 			},
-			upload_data:{}
+			upload_data:{},
+			fileShow:false,
+			params:{},
+
+			importDis:false,
+			importTrue:false,
+			progressShow:false,
+			importInfo:{},
+		}
+	},
+	watch:{
+		visible(val){
+			if(val){
+				// 获取新消息
+				this.$socketApi.getSock(this.getWsResult);
+			}
 		}
 	},
 	mounted() {
 
 	},
 	methods:{
-		open(mode='import'){
-			this.mode = mode;
-			this.visible = true;
+		getWsResult(res){
+			if(res.data && (res.data.type == 5)){
+				this.importInfo = res.data;
+				this.progressShow = true;
+				if(res.data.status == 1){
+					this.progressShow = false;
+					this.$emit('importSuccess');
+				}
+			}
+		},
 
-			return this
+		// 导入文件
+		importFile(){
+			this.visible = true;
 		},
 		// 上传前
 		beforeUpload(file){
@@ -73,33 +114,35 @@ export default {
 				this.$message.warning(`只能选择的excel文件类型`);
 				return false;
 			}
-			return new Promise((resolve)=>{
-				setTimeout(async ()=>{
-					let params = {
-						dir:"user/file/"
-					}
-					const res = await this.$API.oss.ossGet.post(params);
-					this.oss = res.data;
-					this.upload_data = {
-						name: new Date().getTime() + file.name,
-						key: this.oss.dir +file.name,
-						policy: this.oss.policy,
-						OSSAccessKeyId: this.oss.accessid,
-						success_action_status: "200",
-						callback: this.oss.callback,
-						signature: this.oss.signature,
-						"Cache-Control": this.oss.cache_control,
-					};
-					resolve()
-				},100)
-			})
-
-
+			return  true
+		},
+		async uploadFile({ file }) {
+			try {
+				const formData = new FormData();
+				formData.append('file', file);
+				for (const key in this.upload_data) {
+					formData.append(key, this.upload_data[key]);
+				}
+				this.params = formData;
+				this.importTrue = true;
+				this.importDis = true;
+			} catch (error) {
+				console.log(error)
+			}
+		},
+		deleteFile(){
+			this.importTrue = false;
+			setTimeout(()=>{
+				this.importDis = false;
+			},100)
+		},
+		save(){
+			this.$emit('parentParams',this.params);
 		},
 		// 上传成功
-		handleSuccess(file){
-			this.imageUrl = this.oss.host+'/'+file.data.filename;
-			this.$emit('parentParams',this.imageUrl);
+		handleSuccess(){
+			// console.log(res,file,files)
+			// this.$message.success('上传成功，马上开始导入数据');
 		},
 		// 上传失败
 		handleError(){
@@ -117,12 +160,34 @@ export default {
 		width: 54px;height: 54px;
 	}
 	.upload :deep(.el-upload__text){
+		.trueIcon{
+			position: relative;
+			border: 1px solid var(--el-border-color);
+			border-radius: 4px;
+		}
 		.laText{
 			color: var(--el-color-dark);
 		}
 		.tipText{
 			color: var(--el-text-color-placeholder);
 		}
+		.deleteFile{
+			position: absolute;
+			right: -4px;
+			top: -12px;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			background: var(--el-color-danger);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.icon{
+				width: 12px;height: 12px;
+				color: var(--el-color-white);
+			}
+
+		}
 	}
 	.upload :deep(.el-upload__tip){
 		display: flex;
diff --git a/src/views/setting/company/index.vue b/src/views/setting/company/index.vue
index 587d31e..1d04f85 100644
--- a/src/views/setting/company/index.vue
+++ b/src/views/setting/company/index.vue
@@ -3,7 +3,9 @@
 		<el-header>
 			<div class="left-panel">
 				<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增公司</el-button>
-				<el-button type="primary" :size="size" plain @click="importFile">批量导入</el-button>
+				<scImport :size="size" title="批量导入公司组织" text="公司表单" @parentParams="importUpload" @importSuccess="importSuccess">
+					<div @click="importTemplate">下载导入模版</div>
+				</scImport>
 			</div>
 			<div class="right-panel">
 				<scExport :size="size" @exportData="exportData" @updateShow="exportChangeShow" :show="exportShow" type="6"></scExport>
@@ -51,9 +53,6 @@
 
 	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
 	<see-dialog v-if="dialog.show" ref="showDialog" @closed="dialog.show=false"></see-dialog>
-	<scImport v-if="dialog.import" ref="importDialog" @closed="dialog.import=false">
-		<div @click="importTemplate">下载导入模版</div>
-	</scImport>
 
 </template>
 
@@ -72,7 +71,6 @@ export default {
 			dialog: {
 				save: false,
 				show: false,
-				import:false
 			},
 			list: {
 				apiObj: this.$API.system.company.list,
@@ -146,25 +144,30 @@ export default {
 				this.$refs.saveDialog.open()
 			})
 		},
-		// 导入文件
-		importFile(){
-			this.dialog.import = true;
-			this.$nextTick(() => {
-				this.$refs.importDialog.open()
-			})
-		},
+
+		// 批量导入
 		async importTemplate() {
 			const res = await this.$API.system.company.template.post();
-			const blob = new Blob([res.data]);
+			const blob = new Blob([res]);
+			const text = new Date().getTime();
 			const eLink = document.createElement('a');
-			eLink.download = "company_import_template_20240716093538_6695ce6a3ca1f.xlsx";
+			eLink.download = "公司导入模版_"+text+'.xlsx';
 			eLink.style.display = 'none';
 			eLink.href = URL.createObjectURL(blob);
 			document.body.appendChild(eLink);
 			eLink.click();
-			URL.revokeObjectURL(eLink.href); // 释放URL 对象
+			URL.revokeObjectURL(eLink.href);
 			document.body.removeChild(eLink);
 		},
+		async importUpload(params) {
+			const res = await this.$API.system.company.import.post(params);
+			if(res.code == 200){
+				this.$message.success('上传成功，开始导入数据');
+			}
+		},
+		importSuccess(){
+			this.$refs.table.refresh()
+		},
 
 		//编辑
 		table_edit(row){
diff --git a/src/views/setting/role/dataTree.vue b/src/views/setting/role/dataTree.vue
index 465cc8b..6b9677c 100644
--- a/src/views/setting/role/dataTree.vue
+++ b/src/views/setting/role/dataTree.vue
@@ -241,7 +241,15 @@ export default {
 				display: flex;
 				align-items: center;
 				margin-right: 20px;
-				width: 90px;
+				width: 120px;
+				.name{
+					width: 100px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					display: block;
+					text-align: left;
+				}
 			}
 		}
 	}