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

Merge pull request '毛利润排行榜页面改造' (#39) from zq-ui into master 

Reviewed-on: #39
master
zhangqi 1 week ago
parent
2f9425f377 719755e19a
commit
acd9403c10
7 changed files with 165 additions and 111 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. 4
      src/components/CustomDropdown.vue
  2. 2
      src/components/GuipTable.vue
  3. 2
      src/components/super/DateSelect.vue
  4. 3
      src/main.js
  5. 38
      src/style/theme/index.css
  6. 17
      src/utils/headerIcon.js
  7. 208
      src/views/super/Ranking/RankBatchList.vue

4
src/components/CustomDropdown.vue
View File

@ -124,7 +124,9 @@ export default {
opacity: 1; opacity: 1;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #DFE2E6; border: 1px solid #DFE2E6;
width: calc(100% - 24px); width: 100%;
height: 40px;
box-sizing: border-box;
padding: 10px 12px; padding: 10px 12px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;

2
src/components/GuipTable.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<global-loading> <global-loading>
<el-table ref="guiptable" :data="tableData" :border="border" @selection-change="handleSelectionChange" <el-table ref="guiptable" v-bind="$attrs" :data="tableData" v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
:style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading"> :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
<!-- 多选 --> <!-- 多选 -->
<template v-if="multiple"> <template v-if="multiple">

2
src/components/super/DateSelect.vue
View File

@ -179,7 +179,7 @@
<style scoped> <style scoped>
.date-picker { .date-picker {
font-family: Microsoft YaHei UI; font-family: Microsoft YaHei UI;
width: 300px; /* width: 300px; */
/* border: 1px solid #ddd; */ /* border: 1px solid #ddd; */
border-radius: 4px; border-radius: 4px;
padding: 10px 0 0 0; padding: 10px 0 0 0;

3
src/main.js
View File

@ -13,13 +13,14 @@ import '@/assets/css/fonts.css';
import LoadingService from './services/loading' import LoadingService from './services/loading'
import { directive as clickaway } from 'vue-clickaway'; import { directive as clickaway } from 'vue-clickaway';
import GuipMessage from '@/components/GuipMessage/index'; import GuipMessage from '@/components/GuipMessage/index';
import HeaderIcon from './utils/headerIcon'
Vue.prototype.$loadingFn = LoadingService; Vue.prototype.$loadingFn = LoadingService;
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.prototype.$http = request; Vue.prototype.$http = request;
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(GuipMessage) Vue.use(GuipMessage)
Vue.directive('clickaway', clickaway); Vue.directive('clickaway', clickaway);
Vue.mixin(HeaderIcon)
new Vue({ new Vue({
router, router,
store, store,

38
src/style/theme/index.css
View File

@ -2743,7 +2743,8 @@
margin: 0 2px; margin: 0 2px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-radius: 3px border-radius: 3px;
transition: all .3s;
} }
.el-pagination__editor.el-input { .el-pagination__editor.el-input {
@ -2751,7 +2752,10 @@
} }
.el-pagination__editor.el-input .el-input__inner { .el-pagination__editor.el-input .el-input__inner {
height: 26px height: 26px;
}
.el-pagination__editor.el-input:hover{
border-color:#006AFF !important;
} }
.el-pagination__editor .el-input__inner::-webkit-inner-spin-button, .el-pagination__editor .el-input__inner::-webkit-inner-spin-button,
@ -2765,9 +2769,10 @@
.el-pagination.is-background .el-pager li { .el-pagination.is-background .el-pager li {
margin: 0 5px; margin: 0 5px;
background-color: transparent; background-color: transparent;
color: #606266; color: #8A9099;
min-width: 30px; min-width: 30px;
border-radius: 4px border-radius: 4px;
transition: all .3s;
} }
.el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next.disabled,
@ -2788,21 +2793,28 @@
} }
.el-pagination.is-background .el-pager li:not(.disabled):hover { .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #006aff color: #8A9099;
background: #F6F7FA;
} }
.el-pagination.is-background .el-pager li:not(.disabled).active { .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #006aff; background-color: #006aff;
color: #fff color: #fff;
font-weight: bold;
}
.btn-next:hover, .btn-prev:hover{
background: #F6F7FA !important;
transition: all .3s;
} }
.el-pagination.is-background.el-pagination--small .btn-next, .el-pagination.is-background.el-pagination--small .btn-next,
.el-pagination.is-background.el-pagination--small .btn-prev, .el-pagination.is-background.el-pagination--small .btn-prev,
.el-pagination.is-background.el-pagination--small .el-pager li { .el-pagination.is-background.el-pagination--small .el-pager li {
margin: 0 3px; margin: 0 3px;
min-width: 22px min-width: 22px
} }
.el-pagination__editor.el-input{
}
.el-pager { .el-pager {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -2830,10 +2842,12 @@
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
cursor: pointer; cursor: pointer;
font-weight: normal;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
margin: 0 margin: 0;
color: #8A9099;
} }
.el-pager li.btn-quicknext, .el-pager li.btn-quicknext,
@ -9457,7 +9471,7 @@
} }
.el-table--border .el-table__cell:first-child .cell { .el-table--border .el-table__cell:first-child .cell {
padding-left: 10px padding-left: 0px
} }
.el-table--border th.el-table__cell.gutter:last-of-type { .el-table--border th.el-table__cell.gutter:last-of-type {
@ -9617,7 +9631,7 @@
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
height: 34px; height: 20px;
width: 24px; width: 24px;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -9635,12 +9649,12 @@
.el-table .sort-caret.ascending { .el-table .sort-caret.ascending {
border-bottom-color: #babdc2; border-bottom-color: #babdc2;
top: 5px top: -1px
} }
.el-table .sort-caret.descending { .el-table .sort-caret.descending {
border-top-color: #babdc2; border-top-color: #babdc2;
bottom: 7px bottom: -1px
} }
.el-table .ascending .sort-caret.ascending { .el-table .ascending .sort-caret.ascending {

17
src/utils/headerIcon.js
View File

@ -0,0 +1,17 @@
export default {
methods: {
renderHeaderWithIcon(h, { column }, iconPath) {
return h('div', [
column.label,
h('img', {
attrs: { src: iconPath },
style: {
width: '10px',
height: '10px',
marginLeft: '3px',
}
})
])
}
}
}

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

@ -1,87 +1,67 @@
<template> <template>
<div class="demo-wrap min-flex-right"> <div class="demo-wrap min-flex-right">
<div class="flex-between"> <div class="flex-between flex-end pagetitle">
<h2>{{ pageTitle }}</h2> <h4>{{ pageTitle }}</h4>
<CustomDropdown ref="dropdownRef" <CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px">
:placeholder="'（'+viewDesc[this.view]+')'+text" <DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView"
width="280px"> @change="handleDateChange" />
<DateSelect slot="normal"
:view="view"
v-model="selectedDate"
@update-count="handleUpdateView"
@change="handleDateChange"/>
</CustomDropdown> </CustomDropdown>
</div> </div>
<div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" style="margin-bottom: 20px;text-align: left"> <div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')"
<el-alert type="info" :closable="false" show-icon> style="margin-bottom: 20px;text-align: left" class="beforeNotice">
<template #title> <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 未计成本</p>
未计成本 <div v-if="dataType == 'ver_type'" class="noticeBot column">
</template> <p>1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
<div style="margin-top: 8px; line-height: 1.6; font-size: 14px; color: #606266;"> <p>2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
<template v-if="dataType == 'ver_type'"> <p>3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> </div>
2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> <div v-if="dataType == 'check_type'" class="noticeBot column">
3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> <p>1. AI（服务器成本）</p>
</template> <p>2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI</p>
<template v-if="dataType == 'check_type'"> <p>3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
1. AI（服务器成本）<br /> </div>
2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI<br />
3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
</template>
</div>
</el-alert>
</div> </div>
<div class=" flex-common" id=""> <div class=" flex-common" id="">
<el-form> <el-form>
<el-table :data="tableData" <GuipTable :tableData="tableData" style="width: 100%" :border="true" @sort-change="handleSortChange"
style="width: 100%" :loading="loading" @cell-mouse-enter="handleRowHover">
@sort-change="handleSortChange" <el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column>
@cell-mouse-enter="handleRowHover">
<el-table-column prop="sort" label="排序" width="95"></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" prop="name" :key="selectedType" :label="type_select[selectedType]" min-width="120">
:key="selectedType"
:label="type_select[selectedType]" width="250">
<template slot="header"> <template slot="header">
<el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType"> <el-select class="custom-select tableHeaderSelect" popper-class="custom-select-dropdown"
<el-option v-for="(item,type) in type_select" v-model="selectedType" @change="changeRankType">
:key="type" <el-option v-for="(item,type) in type_select" :key="type" :label="item" :value="type">
:label="item"
:value="type">
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.name }} <GuipToolTip :content=" scope.row.name">
<span class=nowrap>{{ scope.row.name }}</span>
</GuipToolTip>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="250"></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" <el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]"
:key="field" :prop="String(index + 1)"
:label="labels[index] + (index == 3 ? current_month : '')" :render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label"
:prop="String(index + 1)" sortable="custom" min-width="170">
sortable="custom">
<!--产品利润排行展示查看更多--> <!--产品利润排行展示查看更多-->
<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" <el-popover v-model="row.id_popover" placement="top" trigger="manual"
placement="top" :ref="`popover-${$index}`" :append-to-body="false" :visible-arrow="true"
trigger="manual" popper-class="custom-popover" @show="popshow">
:ref="`popover-${$index}`"
@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 }} {{ text }} {{ row.name }}
<span @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')">
关闭<img src="@/assets/register/close.svg"> 关闭<img src="@/assets/register/close.svg">
@ -103,14 +83,16 @@
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3> <h3>
{{ text }} {{ row.name }} {{ text }} {{ row.name }}
<span @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')">
关闭<img src="@/assets/register/close.svg"> 关闭<img src="@/assets/register/close.svg">
</span> </span>
</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> <el-table-column prop="sort" width="95" label="排序">
</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="毛利占比">
<template slot-scope="scope"> <template slot-scope="scope">
@ -132,33 +114,32 @@
<div class="flex" slot="reference"> <div class="flex" slot="reference">
{{ row[field] }} {{ row[field] }}
<HoverImage v-if="show_detail_index == row.sort && row[field] > 0" <svg-icon v-if="row[field] > 0" :size="14"
@click="handleClick(row, $index, 'id')" :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
:normal="require('@/assets/super/list-detail.svg')" :hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" />
:hover="require('@/assets/super/list-detail-hover.svg')"/>
</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>
</el-table-column> </el-table-column>
<!--产品利润排行展示代理商排行--> <!--产品利润排行展示代理商排行-->
<el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" key="top" prop="top" :label="'代理商排行'+current_month" width="250"> <el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')"
:render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) "
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" <el-popover v-model="row.id_popover_2" placement="top" trigger="manual"
placement="top" :ref="`popover_2-${$index}`" @show="popshow">
trigger="manual"
:ref="`popover_2-${$index}`"
@show="popshow">
<div class="pop-wrap"> <div class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3> <h3>
{{ row.name }} 代理商排行 {{ row.name }} 代理商排行
<span @click="goLookAgentRank(row.id)">查看更多</span> <span class="lookMore" @click="goLookAgentRank(row.id)">查看更多</span>
</h3> </h3>
<span class="flex point" @click="closePop(row,'id')"> <span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg"> 关闭<img src="@/assets/register/close.svg">
@ -172,23 +153,18 @@
</div> </div>
<span v-if="top_list[row.id]" slot="reference"> <span v-if="top_list[row.id]" slot="reference">
No.1 {{ top_list[row.id]['name'] }} No.1 {{ top_list[row.id]['name'] }}
<HoverImage v-if="show_detail_index == row.sort" <svg-icon :size="14" @click="handleClick2(row, $index, 'id')"
@click="handleClick2(row, $index, 'id')" :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
:normal="require('@/assets/super/list-detail.svg')" :hoverColor="'#006AFF'" />
:hover="require('@/assets/super/list-detail-hover.svg')"/>
</span> </span>
<span v-else slot="reference">暂无排行</span> <span v-else slot="reference">暂无排行</span>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </GuipTable>
<el-pagination background <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
@size-change='handleSizeChange' :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
@current-change='handleCurrentChange' :total="parseInt(total)">
:current-page="currentPage"
:page-size=pageSize
layout="prev, pager, next,jumper"
:total="parseInt(total)">
</el-pagination> </el-pagination>
</el-form> </el-form>
</div> </div>
@ -196,9 +172,10 @@
</template> </template>
<script> <script>
import DateSelect from '@/components/super/DateSelect.vue'; import DateSelect from '@/components/super/DateSelect.vue';
import HoverImage from '@/components/super/HoverImage.vue'; 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 GuipToolTip from '@/components/GuipToolTip.vue';
export default { export default {
name: 'rank_batch_list', name: 'rank_batch_list',
props: { props: {
@ -216,12 +193,16 @@ export default {
} }
}, },
components: { components: {
HoverImage, // HoverImage,
GuipToolTip,
SvgIcon,
GuipTable,
DateSelect, DateSelect,
CustomDropdown CustomDropdown
}, },
data() { data() {
return { return {
loading: false,
viewDesc: { viewDesc: {
'month': '月份', 'month': '月份',
'monthTwo': '月份', 'monthTwo': '月份',
@ -245,10 +226,10 @@ export default {
selectedType: 'check_type', selectedType: 'check_type',
view: 'month', view: 'month',
labels: ['', '', '', ''], labels: ['', '', '', ''],
current_month:'', current_month: '',
valueFields: ['value_1', 'value_2', 'value_3', 'value_4'], valueFields: ['value_1', 'value_2', 'value_3', 'value_4'],
currentPage: 1, //当前页 currentPage: 1, //当前页
pageSize: 20, //每页的容量 pageSize: 10, //每页的容量
total: 0, //列表总数 total: 0, //列表总数
sort_by: 4, sort_by: 4,
sort_order: 2, sort_order: 2,
@ -381,11 +362,11 @@ export default {
if (this.dataType == 'check_type') { if (this.dataType == 'check_type') {
obj.check_type = row.id obj.check_type = row.id
} }
if(this.dataType == 'agent'){ if (this.dataType == 'agent') {
let obj = {} let obj = {}
obj.aid = row.id obj.aid = row.id
this.getCheckTypeRankingList(obj); this.getCheckTypeRankingList(obj);
}else{ } else {
this.getRankingDetail(obj); this.getRankingDetail(obj);
} }
}, },
@ -423,7 +404,8 @@ export default {
item.removeAttribute('aria-hidden') item.removeAttribute('aria-hidden')
}) })
}, },
handleSortChange({prop, order}) { handleSortChange({ prop, order }) {
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') {
@ -466,7 +448,7 @@ export default {
const currentMonth = new Date().getMonth() + 1; const currentMonth = new Date().getMonth() + 1;
this.current_month = ''; this.current_month = '';
if(this.view === 'month' && year == currentYear && month == currentMonth){ if (this.view === 'month' && year == currentYear && month == currentMonth) {
this.current_month = '(当月)'; this.current_month = '(当月)';
} }
@ -533,6 +515,7 @@ export default {
const that = this const that = this
that.tableData = [] that.tableData = []
that.top_list = [] that.top_list = []
this.loading = true;
this.$http('POST', '/supernew/ajax_get_type_batch_list', { this.$http('POST', '/supernew/ajax_get_type_batch_list', {
date: that.text, date: that.text,
rank_type: that.dataRank, rank_type: that.dataRank,
@ -541,6 +524,7 @@ export default {
cur_page: that.currentPage, cur_page: that.currentPage,
page_size: that.pageSize, page_size: that.pageSize,
}).then(response => { }).then(response => {
this.loading = false;
this.$nextTick(() => { this.$nextTick(() => {
that.tableData = response.data.list that.tableData = response.data.list
that.top_list = response.data.top_list that.top_list = response.data.top_list
@ -613,4 +597,40 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.pagetitle{
h4{
margin-bottom: 0;
}
}
.lookMore {
cursor: pointer;
font-weight: 400;
}
.beforeNotice{
margin-top: 12px;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
padding: 20px 14px;
color: #1E2226;
letter-spacing: 0.08em;
.noticeTop{
gap: 8px;
margin-bottom: 12px;
}
.noticeBot{
gap: 10px;
}
}
.tableHeaderSelect ::v-deep .el-input__inner {
font-size: 14px;
font-weight: normal;
letter-spacing: 0.08em;
font-family: Microsoft YaHei UI;
color: #1E2226;
height: 100%;
}
</style> </style>
Write Preview
Loading…
Cancel
Save