增加导入优化导出

src/components/scExport/index.vue

@@ -9,7 +9,7 @@
 		:visible="show"
 	>
 		<template #reference>
-			<el-button :size="size" icon="sc-icon-Download" @click="exportClick">下载</el-button>
+			<el-button :size="size" icon="sc-icon-Download" @click="exportClick">下载 {{show}}</el-button>
 		</template>
 		<template #default>
 			<div v-for="item in list" :key="item">
@@ -30,7 +30,7 @@
 export default {
 	name: "index",
 	props:{
-		size:{ type: String, default: "small" },
+		size:{type: String, default: "small" },
 		show:{type:Boolean, default: false},
 		type:{type: String, default: ""}
 	},
@@ -65,7 +65,8 @@ export default {
 				if(res.data.type == 8){
 					this.list[2] = item;
 				}
-				this.$emit('updateShow',item);
+				this.$emit('updateShow', item);
+
 				if(res.data.status==1){
 					this.down(res.data);
 				}

src/components/scImport/index.vue

@@ -0,0 +1,149 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="560" destroy-on-close draggable @closed="$emit('closed')">
+		<div class="importBody">
+			<el-upload
+				class="upload"
+				:action="oss.host"
+				:data="upload_data"
+				:show-file-list="false"
+				:on-success="handleSuccess"
+				:on-error="handleError"
+				:before-upload="beforeUpload"
+				drag
+				multiple
+			>
+				<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>
+				<template #tip>
+					<div class="el-upload__tip">
+						<span class="tip">如果数据导入中途业务出错，请不要刷新页面，修改后继续点击导入</span>
+						<span class="btn">
+							<slot></slot>
+						</span>
+					</div>
+					<div class="importBox">
+						<div class="name">导入进度</div>
+						<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="67" />
+					</div>
+				</template>
+			</el-upload>
+		</div>
+		<template #footer>
+			<el-button @click="visible=false">取 消</el-button>
+			<el-button type="primary">确定导入</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	name: "import",
+	emits: ['success', 'closed'],
+	data(){
+		return{
+			mode: "import",
+			titleMap: {
+				import: '批量导入公司组织'
+			},
+			visible: false,
+
+			oss:{
+				host:''
+			},
+			upload_data:{}
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		open(mode='import'){
+			this.mode = mode;
+			this.visible = true;
+
+			return this
+		},
+		// 上传前
+		beforeUpload(file){
+			const text = file.name.split('.').pop();
+			if(!['xls','xlsx'].includes(text)){
+				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)
+			})
+
+
+		},
+		// 上传成功
+		handleSuccess(file){
+			this.imageUrl = this.oss.host+'/'+file.data.filename;
+			this.$emit('parentParams',this.imageUrl);
+		},
+		// 上传失败
+		handleError(){
+			this.$message.warning('上传失败请重新上传');
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.importBody{
+		padding: 0 20px;
+	}
+	.upload .el-icon--upload{
+		width: 54px;height: 54px;
+	}
+	.upload :deep(.el-upload__text){
+		.laText{
+			color: var(--el-color-dark);
+		}
+		.tipText{
+			color: var(--el-text-color-placeholder);
+		}
+	}
+	.upload :deep(.el-upload__tip){
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: 15px;color: var(--el-text-color-placeholder);
+		.btn{
+			color: var(--el-color-primary);
+			cursor: pointer;
+		}
+	}
+	.importBox{
+		border: 1px solid var(--el-border-color);
+		padding: 10px 5px;
+		margin: 15px 0;
+		border-radius: 4px;
+		.name{margin-bottom: 8px;font-size: 13px;}
+		.exportPopover :deep(.el-progress-bar__innerText){
+			height: 100%;
+			display: flex;align-items: center;justify-content: flex-end;
+			font-size: 10px;
+		}
+	}
+</style>