fix: 🐛 修改统计图已发现的问题
“Yer”
parent
46143beb83
commit
c88c1865e7
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="breadcrumb">
|
||||
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList"
|
||||
:key="index"> {{item.title}}</span>
|
||||
<span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
|
||||
:key="index"> {{ item.title }}</span>
|
||||
<div class="date-picker">
|
||||
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" clearable
|
||||
<Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
|
||||
style="width:200px;margin-left:10px;">
|
||||
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index" clearable>
|
||||
{{ item.year+'年'+item.month+'月' }}</Option>
|
||||
<Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
|
||||
{{ item.year + '年' + item.month + '月' }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="shop-list" v-if="!closeShop">
|
||||
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
|
||||
style="width:200px;margin-left:10px;">
|
||||
<Scroll :on-reach-bottom="handleReachBottom">
|
||||
<Option v-for="(item,index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
|
||||
<Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
|
||||
</Scroll>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
|
||||
selectedWay: {
|
||||
// 可选时间项
|
||||
title: "最近7天",
|
||||
title: "过去7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
|
|
@ -56,12 +56,35 @@ export default {
|
|||
searchType: "YESTERDAY",
|
||||
},
|
||||
{
|
||||
title: "最近7天",
|
||||
title: "过去7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
{
|
||||
title: "最近30天",
|
||||
title: "过去30天",
|
||||
selected: false,
|
||||
searchType: "LAST_THIRTY",
|
||||
},
|
||||
],
|
||||
originDateList: [
|
||||
// 筛选条件
|
||||
{
|
||||
title: "今天",
|
||||
selected: false,
|
||||
searchType: "TODAY",
|
||||
},
|
||||
{
|
||||
title: "昨天",
|
||||
selected: false,
|
||||
searchType: "YESTERDAY",
|
||||
},
|
||||
{
|
||||
title: "过去7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
{
|
||||
title: "过去30天",
|
||||
selected: false,
|
||||
searchType: "LAST_THIRTY",
|
||||
},
|
||||
|
|
@ -126,8 +149,8 @@ export default {
|
|||
this.dates = dates.reverse();
|
||||
},
|
||||
// 改变已选店铺
|
||||
changeSelect() {
|
||||
console.log(this.month);
|
||||
changeSelect(e) {
|
||||
this.month = e
|
||||
if (this.month) {
|
||||
this.dateList.forEach((res) => {
|
||||
res.selected = false;
|
||||
|
|
@ -138,34 +161,36 @@ export default {
|
|||
|
||||
this.$emit("selected", this.selectedWay);
|
||||
} else {
|
||||
const current = this.dateList.find(item=>{return item.selected})
|
||||
|
||||
const current = this.dateList.find(item => { return item.selected })
|
||||
this.selectedWay = current
|
||||
this.clickBreadcrumb(current)
|
||||
this.$emit("selected", this.selectedWay);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
// 变更时间
|
||||
clickBreadcrumb(item) {
|
||||
this.dateList.forEach((res) => {
|
||||
|
||||
let currentIndex;
|
||||
this.dateList.forEach((res,index) => {
|
||||
res.selected = false;
|
||||
if(res.title === item.title){
|
||||
currentIndex = index
|
||||
}
|
||||
});
|
||||
item.selected = true;
|
||||
item.storeId = this.storeId;
|
||||
this.month = "";
|
||||
const dateList = this.dateList
|
||||
let currentDate
|
||||
if (item.searchType == "") {
|
||||
if (
|
||||
dateList.some((date) => {
|
||||
currentDate = date
|
||||
return date.title == item.title;
|
||||
})
|
||||
) {
|
||||
item.searchType = currentDate.searchType;
|
||||
let currentDate = this.originDateList[currentIndex].searchType
|
||||
if (currentDate) {
|
||||
item.searchType = currentDate
|
||||
} else {
|
||||
item.searchType = "LAST_SEVEN";
|
||||
}
|
||||
}
|
||||
|
||||
this.selectedWay = item;
|
||||
this.selectedWay.year = new Date().getFullYear();
|
||||
this.selectedWay.month = "";
|
||||
|
|
@ -179,15 +204,20 @@ export default {
|
|||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
|
||||
>span {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $theme_color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.date-picker {}
|
||||
|
||||
.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,50 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="breadcrumb">
|
||||
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span>
|
||||
<span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
|
||||
:key="index"> {{ item.title }}</span>
|
||||
<div class="date-picker">
|
||||
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;">
|
||||
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+'年'+item.month+'月' }}</Option>
|
||||
<Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
|
||||
style="width:200px;margin-left:10px;">
|
||||
<Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
|
||||
{{ item.year + '年' + item.month + '月' }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="shop-list" v-if="!closeShop">
|
||||
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
|
||||
style="width:200px;margin-left:10px;">
|
||||
<Scroll :on-reach-bottom="handleReachBottom">
|
||||
<Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
|
||||
</Scroll>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Cookies from "js-cookie";
|
||||
import { getShopListData } from "@/api/shops.js";
|
||||
export default {
|
||||
props: ["closeShop"],
|
||||
data() {
|
||||
return {
|
||||
month: "", // 所选月份
|
||||
|
||||
defuaultWay: {
|
||||
title: "最近7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
month: "", // 月份
|
||||
|
||||
selectedWay: {
|
||||
title: "最近7天",
|
||||
// 可选时间项
|
||||
title: "过去7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
storeId: "", // 店铺id
|
||||
dates: [], // 日期列表
|
||||
params: { // 请求参数
|
||||
params: {
|
||||
// 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
storeName: "",
|
||||
storeId: "",
|
||||
},
|
||||
|
||||
dateList: [
|
||||
// 筛选条件
|
||||
{
|
||||
title: "今天",
|
||||
selected: false,
|
||||
|
|
@ -51,23 +56,77 @@ export default {
|
|||
searchType: "YESTERDAY",
|
||||
},
|
||||
{
|
||||
title: "最近7天",
|
||||
title: "过去7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
{
|
||||
title: "最近30天",
|
||||
title: "过去30天",
|
||||
selected: false,
|
||||
searchType: "LAST_THIRTY",
|
||||
},
|
||||
],
|
||||
originDateList: [
|
||||
// 筛选条件
|
||||
{
|
||||
title: "今天",
|
||||
selected: false,
|
||||
searchType: "TODAY",
|
||||
},
|
||||
{
|
||||
title: "昨天",
|
||||
selected: false,
|
||||
searchType: "YESTERDAY",
|
||||
},
|
||||
{
|
||||
title: "过去7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
{
|
||||
title: "过去30天",
|
||||
selected: false,
|
||||
searchType: "LAST_THIRTY",
|
||||
},
|
||||
],
|
||||
|
||||
shopTotal: "", // 店铺总数
|
||||
shopsData: [], // 店铺数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.storeId = JSON.parse(Cookies.get("userInfoSeller")).id;
|
||||
this.getFiveYears();
|
||||
this.getShopList();
|
||||
},
|
||||
methods: {
|
||||
// 页面触底
|
||||
handleReachBottom() {
|
||||
setTimeout(() => {
|
||||
if (this.params.pageNumber * this.params.pageSize <= this.shopTotal) {
|
||||
this.params.pageNumber++;
|
||||
this.getShopList();
|
||||
}
|
||||
}, 1500);
|
||||
},
|
||||
// 查询店铺列表
|
||||
getShopList() {
|
||||
getShopListData(this.params).then((res) => {
|
||||
if (res.success) {
|
||||
/**
|
||||
* 解决数据请求中，滚动栏会一直上下跳动
|
||||
*/
|
||||
this.shopTotal = res.result.total;
|
||||
|
||||
this.shopsData.push(...res.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 变更店铺
|
||||
changeshop(val) {
|
||||
this.selectedWay.storeId = this.storeId;
|
||||
this.$emit("selected", this.selectedWay);
|
||||
},
|
||||
|
||||
// 获取近5年 年月
|
||||
getFiveYears() {
|
||||
let getYear = new Date().getFullYear();
|
||||
|
|
@ -89,8 +148,9 @@ export default {
|
|||
}
|
||||
this.dates = dates.reverse();
|
||||
},
|
||||
// 选择回调
|
||||
changeSelect() {
|
||||
// 改变已选店铺
|
||||
changeSelect(e) {
|
||||
this.month = e
|
||||
if (this.month) {
|
||||
this.dateList.forEach((res) => {
|
||||
res.selected = false;
|
||||
|
|
@ -101,33 +161,36 @@ export default {
|
|||
|
||||
this.$emit("selected", this.selectedWay);
|
||||
} else {
|
||||
const current = this.dateList.find(item=>{return item.selected})
|
||||
|
||||
const current = this.dateList.find(item => { return item.selected })
|
||||
this.selectedWay = current
|
||||
this.clickBreadcrumb(current)
|
||||
this.$emit("selected", this.selectedWay);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
// 点击时间筛选
|
||||
// 变更时间
|
||||
clickBreadcrumb(item) {
|
||||
this.dateList.forEach((res) => {
|
||||
|
||||
let currentIndex;
|
||||
this.dateList.forEach((res,index) => {
|
||||
res.selected = false;
|
||||
if(res.title === item.title){
|
||||
currentIndex = index
|
||||
}
|
||||
});
|
||||
item.selected = true;
|
||||
item.storeId = this.storeId;
|
||||
this.month = "";
|
||||
const dateList = this.dateList
|
||||
let currentDate
|
||||
if (item.searchType == "") {
|
||||
if (
|
||||
dateList.some((date) => {
|
||||
return date.title == item.title;
|
||||
})
|
||||
) {
|
||||
item.searchType = currentDate.searchType;
|
||||
let currentDate = this.originDateList[currentIndex].searchType
|
||||
if (currentDate) {
|
||||
item.searchType = currentDate
|
||||
} else {
|
||||
item.searchType = "LAST_SEVEN";
|
||||
}
|
||||
}
|
||||
|
||||
this.selectedWay = item;
|
||||
this.selectedWay.year = new Date().getFullYear();
|
||||
this.selectedWay.month = "";
|
||||
|
|
@ -141,17 +204,20 @@ export default {
|
|||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
|
||||
>span {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $theme_color;
|
||||
position: relative;
|
||||
}
|
||||
.date-picker {
|
||||
}
|
||||
|
||||
.date-picker {}
|
||||
|
||||
.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in New Issue