longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善区域配置，优化导出页面切换不显示问题

Browse Source
This commit is contained in:
龙运模
2024-11-02 16:38:05 +08:00
parent 94f254f49d
commit df9c292e5e
10 changed files with 357 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/scExport/index.vue
+96 -51
View File
@@ -1,34 +1,28 @@
<template>
<el-popover
placement="bottom-end"
title=""
trigger="click"
content=""
width="300"
v-bind="$attrs"
:visible="show"
>
<template #reference>
<div class="customerPopover">
<div class="btnBox">
<slot></slot>
</template>
<template #default>
<div v-for="item in list" :key="item">
<div v-if="list.length>0 && type == item.type">
<div class="exportHeader">
<div class="name">{{item.type_desc}}</div>
<div class="status" v-if="item.status==0">{{item.msg}}</div>
<div class="finish" v-if="item.status==1"><i class="icon"><sc-icon-Finish/></i> 文件生成完成</div>
</div>
<div class="contentPopover" v-if="show">
<div class="bodyMain">
<span class="arrow"></span>
<div v-for="item in list" :key="item">
<div v-if="list.length>0 && type == item.type">
<div class="exportHeader">
<div class="name">{{item.type_desc}}</div>
<div class="status" v-if="item.status==0">{{item.msg}}</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>
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
</div>
</div>
</template>
</el-popover>
</div>
</div>
</template>
<script>
import {eventBus} from "@/utils/eventBus"
export default {
name: "index",
props:{
@@ -37,15 +31,17 @@ export default {
type:{type: String, default: ""}
},
watch:{
// show:{
// handler(){
// },
// immediate:true,
// deep:true
// }
},
data(){
return{
list:[{},{},{},{},{},{},{},{}],
list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
}
},
setup(){
},
mounted() {
// 获取新消息
@@ -56,7 +52,7 @@ export default {
},
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)){
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)){
let item = {
type:res.data.type,
type_desc:res.data.type_desc,
@@ -64,29 +60,37 @@ export default {
status:res.data.status,
rate:res.data.rate,
}
if(res.data.type == 6){
this.list[0] = item;
}
if(res.data.type == 7){
this.list[1] = item;
}
if(res.data.type == 8){
this.list[2] = item;
}
if(res.data.type == 11){
this.list[3] = item;
}
if(res.data.type == 19){
this.list[4] = item;
}
if(res.data.type == 20){
this.list[5] = item;
}
if(res.data.type == 29){
this.list[6] = item;
}
if(res.data.type == 30){
this.list[7] = item;
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;
default:
this.list[9] = item;
break;
}
this.$emit('updateShow', item);
@@ -127,4 +131,45 @@ export default {
display: flex;align-items: center;justify-content: flex-end;
font-size: 10px;
}
.customerPopover{
position: relative;
height: auto;
.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: 0;
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>