zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request '修改气泡弹出框定位问题' (#41) from zq-ui into master 

Reviewed-on: #41
master
zhangqi 1 week ago
parent
aa4b3f7acc f6cc5b4acc
commit
c9a24b58a4
2 changed files with 48 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/style/theme/common.scss
  2. 62
      src/views/super/Ranking/RankBatchList.vue

8
src/style/theme/common.scss
View File

@ -951,6 +951,14 @@ body {
.el-popover { .el-popover {
padding: 32px; padding: 32px;
} }
::v-deep .custom-popover {
position: fixed !important;
max-height: 290px;
overflow-y: auto;
margin-top: 0 !important;
margin-left: 0 !important;
transform: none !important;
}
// 日历区间背景颜色 // 日历区间背景颜色
.el-date-table td.in-range div { .el-date-table td.in-range div {

62
src/views/super/Ranking/RankBatchList.vue
View File

@ -26,7 +26,7 @@
<GuipTable :tableData="tableData" style="width: 100%" :border="true" @sort-change="handleSortChange" <GuipTable :tableData="tableData" style="width: 100%" :border="true" @sort-change="handleSortChange"
:loading="loading" @cell-mouse-enter="handleRowHover"> :loading="loading" @cell-mouse-enter="handleRowHover">
<el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column> <el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column>
<el-table-column <el-table-column
v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')"
prop="name" :key="selectedType" :label="type_select[selectedType]" min-width="120"> prop="name" :key="selectedType" :label="type_select[selectedType]" min-width="120">
@ -47,20 +47,23 @@
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column> <el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column>
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" <el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]"
:prop="String(index + 1)" :prop="String(index + 1)"
:render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label" :render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label"
sortable="custom" min-width="170"> sortable="custom" min-width="170">
<!--产品利润排行展示查看更多--> <!--产品利润排行展示查看更多-->
<template v-if="index == 3 && dataRank == 1" v-slot="{ row, $index }"> <template v-if="index == 3 && dataRank == 1" v-slot="{ row, $index }">
<el-popover v-model="row.id_popover" placement="top" trigger="manual" <!-- <el-popover v-model="row.id_popover" placement="top" trigger="manual"
:ref="`popover-${$index}`" :append-to-body="false" :visible-arrow="true" :ref="`popover-${$index}`" :append-to-body="false" :visible-arrow="true"
popper-class="custom-popover" @show="popshow"> popper-class="custom-popover" @show="popshow"> -->
<el-popover v-model="row.id_popover" :ref="`popover-${row.id}`"
placement="top" trigger="manual" :append-to-body="false" :visible-arrow="true"
popper-class="custom-popover" @show="popshow" >
<div v-if="type != 'agent'" class="pop-wrap"> <div v-if="type != 'agent'" class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3> <h3>
{{ text }} {{ row.name }} {{ row.name }}
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span> <span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span>
</h3> </h3>
<span class="flex point" @click="closePop(row,'id')"> <span class="flex point" @click="closePop(row,'id')">
@ -82,7 +85,7 @@
<div v-else class="pop-wrap"> <div v-else class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3> <h3>
{{ text }} {{ row.name }} {{ row.name }}
<span class="lookMore" @click="goLookCheckTypeRank(row.id)">查看更多</span> <span class="lookMore" @click="goLookCheckTypeRank(row.id)">查看更多</span>
</h3> </h3>
<span class="flex point" @click="closePop(row,'id')"> <span class="flex point" @click="closePop(row,'id')">
@ -91,7 +94,7 @@
</div> </div>
<el-table :data="tableData1" style="width: 100%"> <el-table :data="tableData1" style="width: 100%">
<el-table-column prop="sort" width="95" label="排序"> <el-table-column prop="sort" width="95" label="排序">
</el-table-column> </el-table-column>
<el-table-column prop="name" width="250" label="服务名称"></el-table-column> <el-table-column prop="name" width="250" label="服务名称"></el-table-column>
<el-table-column prop="rate" width="130" label="毛利占比"> <el-table-column prop="rate" width="130" label="毛利占比">
@ -114,15 +117,15 @@
<div class="flex" slot="reference"> <div class="flex" slot="reference">
{{ row[field] }} {{ row[field] }}
<svg-icon v-if="row[field] > 0" :size="14" <svg-icon :size="14" v-if="row[field] *100 != 0"
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" /> :hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" />
</div> </div>
</el-popover> </el-popover>
</template> </template>
<template v-else slot-scope="scope" > <template v-else slot-scope="scope">
<div class="flex" > <div class="flex">
{{ scope.row[field] }} {{ scope.row[field] }}
</div> </div>
</template> </template>
@ -133,9 +136,10 @@
:render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) " :render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) "
key="top" prop="top" label="代理商排行" width="250" fixed="right"> key="top" prop="top" label="代理商排行" width="250" fixed="right">
<template v-slot="{ row, $index }"> <template v-slot="{ row, $index }">
<el-popover v-model="row.id_popover_2" placement="top" trigger="manual" <el-popover v-model="row.id_popover_2" :ref="`popover_2-${$index}`" placement="top" trigger="manual"
popper-class="custom-popover" popper-class="custom-popover" @show="popshow" :append-to-body="false"
:ref="`popover_2-${$index}`" @show="popshow" :append-to-body="false" :visible-arrow="true"> :visible-arrow="true"
>
<div class="pop-wrap"> <div class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3> <h3>
@ -152,7 +156,7 @@
<el-table-column prop="value_1" width="200" label="销售额"></el-table-column> <el-table-column prop="value_1" width="200" label="销售额"></el-table-column>
</el-table> </el-table>
</div> </div>
<span v-if="top_list[row.id]" slot="reference"> <span v-if="top_list[row.id]" slot="reference" class="flex">
No.1 {{ top_list[row.id]['name'] }} No.1 {{ top_list[row.id]['name'] }}
<svg-icon :size="14" @click="handleClick2(row, $index, 'id')" <svg-icon :size="14" @click="handleClick2(row, $index, 'id')"
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
@ -177,6 +181,7 @@ import GuipTable from '@/components/GuipTable.vue';
import CustomDropdown from '@/components/CustomDropdown.vue'; import CustomDropdown from '@/components/CustomDropdown.vue';
import SvgIcon from '@/components/SvgIcon.vue'; import SvgIcon from '@/components/SvgIcon.vue';
import GuipToolTip from '@/components/GuipToolTip.vue'; import GuipToolTip from '@/components/GuipToolTip.vue';
// import HoverImage from '@/components/super/HoverImage.vue';
export default { export default {
name: 'rank_batch_list', name: 'rank_batch_list',
props: { props: {
@ -372,6 +377,7 @@ export default {
} }
}, },
handleClick2(row, index, type) { handleClick2(row, index, type) {
console.log('执行了');
// 关闭其他行的弹框 // 关闭其他行的弹框
this.tableData.forEach((item, i) => { this.tableData.forEach((item, i) => {
item[type + '_popover'] = false; item[type + '_popover'] = false;
@ -406,7 +412,7 @@ export default {
}) })
}, },
handleSortChange({ prop, order }) { handleSortChange({ prop, order }) {
console.log('prop--排序',prop); console.log('prop--排序', prop);
this.sort_by = 4; this.sort_by = 4;
this.sort_order = 2; this.sort_order = 2;
if (order == 'ascending') { if (order == 'ascending') {
@ -598,16 +604,26 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.pagetitle{ .pagetitle {
h4{ h4 {
margin-bottom: 0; margin-bottom: 0;
} }
} }
::v-deep .custom-popover {
position: fixed !important;
max-height: 290px;
overflow-y: auto;
margin-top: 0 !important;
margin-left: 0 !important;
transform: none !important;
}
.lookMore { .lookMore {
cursor: pointer; cursor: pointer;
font-weight: 400; font-weight: 400;
} }
.beforeNotice{
.beforeNotice {
margin-top: 12px; margin-top: 12px;
border-radius: 4px; border-radius: 4px;
background: #F2F7FF; background: #F2F7FF;
@ -615,12 +631,14 @@ export default {
padding: 20px 14px; padding: 20px 14px;
color: #1E2226; color: #1E2226;
letter-spacing: 0.08em; letter-spacing: 0.08em;
.noticeTop{
.noticeTop {
gap: 8px; gap: 8px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.noticeBot{
.noticeBot {
gap: 10px; gap: 10px;
} }

Write Preview
Loading…
Cancel
Save