xw_admin/src/components/scExport/index.vue

<template>
	<div class="customerPopover">
		<div class="btnBox">
			<slot></slot>
		</div>
		<div class="contentPopover" v-if="show">
			<div class="bodyMain">
				<span class="arrow"></span>
				<template v-if="listIsType">
					<div v-for="item in list" :key="item">
						<div v-if="list.length>0 && type == item.type">
							<div class="exportHeader">
								<div class="exportName">{{item.type_desc}}</div>
								<div class="status" v-if="item.status==0">
									<el-tooltip effect="dark" :content="item.msg">
										<span size="mini">{{item.msg}}</span>
									</el-tooltip>
								</div>
								<div class="finish" v-if="item.status==1"><i class="icon"><sc-icon-Finish/></i> 文件生成完成</div>
							</div>
							<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
						</div>
					</div>
				</template>
				<div v-else>
					<div>
						<div class="exportHeader">
							<div class="exportName">正在解析中...</div>
						</div>
						<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" percentage="0" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {eventBus} from "@/utils/eventBus"
export default {
	name: "index",
	props:{
		size:{type: String, default: "small" },
		show:{type:Boolean, default: false},
		type:{type: String, default: ""}
	},
	watch:{

	},
	computed:{
		listIsType(){
			let arr = this.$TOOL.objCopy(this.list);
			arr = arr.filter(item => item.type && item.type == this.type);
			return arr.length && arr.length > 0;
		}
	},
	data(){
		return{
			list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
		}
	},
	mounted() {
		// 获取新消息
		// eventBus.$on('sockBack', this.getWsResult);
		// sse 获取新消息
		eventBus.$on('sseBack', this.getWsResult);
	},
	unmounted() {
		// eventBus.$off('sockBack', this.getWsResult);

		eventBus.$off('sseBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 6 || res.data.type == 7 || res.data.type == 8 || res.data.type == 11 || res.data.type == 19 || res.data.type == 20 || res.data.type == 29 || res.data.type == 30 || res.data.type == 32 || res.data.type == 33 || res.data.type == 34 || res.data.type == 40 || res.data.type == 43 || res.data.type == 46 || res.data.type == 47 )){
				let item = {
					type:res.data.type,
					type_desc:res.data.type_desc,
					msg:res.data.msg,
					status:res.data.status,
					rate:res.data.rate,
				}
				switch(res.data.type){
					case 6:
						this.list[0] = item;
						break;
					case 7:
						this.list[1] = item;
						break;
					case 8:
						this.list[2] = item;
						break;
					case 11:
						this.list[3] = item;
						break;
					case 19:
						this.list[4] = item;
						break;
					case 20:
						this.list[5] = item;
						break;
					case 29:
						this.list[6] = item;
						break;
					case 30:
						this.list[7] = item;
						break;
					case 32:
						this.list[8] = item;
						break;
					case 33:
						this.list[9] = item;
						break;
					case 34:
						this.list[10] = item;
						break;
					case 40:
						this.list[11] = item;
						break;
					case 43:
						this.list[12] = item;
						break;
					case 46:
						this.list[13] = item;
						break;
					case 47:
						this.list[14] = item;
						break;
					default:
						this.list[15] = item;
						break;
				}

				if(res.data && res.data.status == 1100){
					this.$message.warning(res.data.msg);
				}

				this.$emit('updateShow', item);

				if(res.data.status==1){
					this.list = this.list.map(item =>
						item.type === res.data.type ? {} : item
					);

					this.down(res.data);
				}
			}

		},
		down(item){
			const link = document.createElement('a');
			link.href = item.file_url;
			link.setAttribute('download', '');
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		},
		exportClick(){
			this.$emit('exportData');
		},
	}
}
</script>

<style scoped lang="scss">
	.exportHeader{
		font-size: 12px;
		display: flex;align-items: center;justify-content: space-around;
		margin-bottom: 6px;
		.exportName{flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding: 0;}
		.status{flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
		.finish{
			display: flex;align-items: center;justify-content: flex-end;color: var(--el-color-success);
			.icon{width: 14px;height: 14px;margin-right: 4px;}
		}
	}
	.exportPopover ::v-deep .el-progress-bar__innerText{
		height: 100%;
		display: flex;align-items: center;justify-content: flex-end;
		font-size: 10px;
	}

	.customerPopover{
		position: relative;
		height: auto;
		.btnBox{
			margin-left: 12px;
		}
		.contentPopover{
			width: 300px;
			padding: 12px;
			background: var(--el-bg-color-overlay);
			border: 1px solid var(--el-border-color-light);
			box-shadow: var(--el-box-shadow-light);
			border-radius: 4px;
			position: absolute;
			top: 38px;
			right: 0;
			z-index: 200;
		}
		.bodyMain{
			position: relative;
			.arrow{
				position: absolute;
				right: 10px;
				top: -18px;
				width: 8px;height: 8px;z-index: 10;
			}
			.arrow:before{
				position: absolute;
				top: 0;
				right: 10px;
				z-index: -1;
				content: '';
				width: 8px;
				height: 8px;
				transform:rotate(135deg);
				border: 1px solid var(--el-border-color-light);
				background: #fff;
				border-bottom-left-radius:2px;
				border-right-color:transparent;
				border-top-color:transparent;
			}
		}
	}
</style>