|
|
|
<template>
|
|
|
|
<div class="stat-shop">
|
|
|
|
<layout-body>
|
|
|
|
<p slot="title">商品看板</p>
|
|
|
|
<div class="box-filter" :inline="true" :col="1">
|
|
|
|
<Row>
|
|
|
|
<Col span="2">选择品牌:</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Select v-model="brandId" style="width: 200px;">
|
|
|
|
<Option value="0">请选择品牌</Option>
|
|
|
|
<Option v-for="item in brandList" :value="item.id" :key="item.id">
|
|
|
|
{{item.brandName}}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
<Col span="2">选择类目:</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<select-category :value="categoryValue" @select-change="sortChange"></select-category>
|
|
|
|
</Col>
|
|
|
|
<Col span="2">货品年季:</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Select v-model="goodsYearsValue" style="width: 120px;">
|
|
|
|
<Option value="0">请选择年</Option>
|
|
|
|
<Option v-for="item in goodsYearsList" :value="item.value" :key="item.value">
|
|
|
|
{{item.name}}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
<Select v-model="goodsSeasonsValue" style="width: 120px;">
|
|
|
|
<Option value="0">请选择季</Option>
|
|
|
|
<Option v-for="item in goodsSeasonsList" :value="item.value" :key="item.value">
|
|
|
|
{{item.name}}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<Col span="2">时间:</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Date-picker
|
|
|
|
type="daterange"
|
|
|
|
v-model="dateRange"
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
placeholder="选择开始结束日期"></Date-picker>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Poptip trigger="hover" placement="bottom-end">
|
|
|
|
<div slot="content">
|
|
|
|
* 查询的时间跨度不得超过30天
|
|
|
|
</div>
|
|
|
|
<Button type="primary" @click="list">筛选</Button>
|
|
|
|
</Poptip>
|
|
|
|
<Poptip trigger="hover" placement="bottom-end">
|
|
|
|
<div slot="content">
|
|
|
|
* 仅支持历史数据，时间跨度不得超过30天
|
|
|
|
</div>
|
|
|
|
<Button type="primary" @click="exportFile">导出</Button>
|
|
|
|
</Poptip>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<layout-list>
|
|
|
|
<Table border :columns="tableCols" :data="tableData"></Table>
|
|
|
|
<Page :total="pageData.total" :current="pageData.current"
|
|
|
|
@on-change="pageChange" :page-size="20" show-total></Page>
|
|
|
|
</layout-list>
|
|
|
|
</layout-body>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import moment from 'moment';
|
|
|
|
import InventoryStore from './store';
|
|
|
|
import InventoryService from 'services/inventory/inventory-service';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return InventoryStore.call(this);
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.inventoryService = new InventoryService();
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.loadData();
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
dateRange(newDate) {
|
|
|
|
if (!Array.isArray(newDate)) {
|
|
|
|
newDate = [];
|
|
|
|
}
|
|
|
|
if (!newDate[0]) {
|
|
|
|
newDate[0] = moment().format('YYYY-MM-DD');
|
|
|
|
}
|
|
|
|
if (!newDate[1]) {
|
|
|
|
newDate[1] = moment().format('YYYY-MM-DD');
|
|
|
|
}
|
|
|
|
this.beginDate = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.endDate = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
|
|
|
|
// this.day = this.beginDate === this.endDate === this.today ? '' : this.beginDate;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
loadData() {
|
|
|
|
this.addGoodsYears();
|
|
|
|
this.getBrandList();
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
changeLimit(limit) {
|
|
|
|
this.dateRange = [this[`day${limit}`], this.today];
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
pageChange(page) {
|
|
|
|
this.pageData.current = page;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
addGoodsYears() {
|
|
|
|
let date = new Date();
|
|
|
|
let startYear = 2018;
|
|
|
|
let yearList = [];
|
|
|
|
|
|
|
|
for (let i = date.getFullYear(); i > startYear; i--) {
|
|
|
|
yearList.push({
|
|
|
|
name: i.toString() + '年',
|
|
|
|
value: i
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
this.goodsYearsList = yearList;
|
|
|
|
},
|
|
|
|
getBrandList() {
|
|
|
|
return this.inventoryService.queryBrandsByShopId().then(result => {
|
|
|
|
this.brandList = result.data;
|
|
|
|
})
|
|
|
|
},
|
|
|
|
sortChange(sort) {
|
|
|
|
this.maxSortId = sort.max;
|
|
|
|
this.middleSortId = sort.mid;
|
|
|
|
this.smallSortId = sort.min;
|
|
|
|
},
|
|
|
|
filterParams() {
|
|
|
|
let pageNum = this.pageData.current;
|
|
|
|
let pageSize = this.pageData.pageSize;
|
|
|
|
let brandId = parseInt(this.brandId) ? {brandId: this.brandId} : {};
|
|
|
|
let goodYear = parseInt(this.goodsYearsValue) ? {goodYear: this.goodsYearsValue} : {};
|
|
|
|
let goodSeason = parseInt(this.goodsSeasonsValue) ? {goodSeason: this.goodsSeasonsValue} : {};
|
|
|
|
let smallSortId = parseInt(this.smallSortId) ? {smallSortId: this.smallSortId} : {};
|
|
|
|
|
|
|
|
let begin = this.beginDate;
|
|
|
|
let end = this.endDate;
|
|
|
|
|
|
|
|
return Promise.resolve(Object.assign({}, {
|
|
|
|
pageNum,
|
|
|
|
pageSize,
|
|
|
|
begin,
|
|
|
|
end
|
|
|
|
}, brandId, goodYear, goodSeason, smallSortId));
|
|
|
|
},
|
|
|
|
list() {
|
|
|
|
this.$Loading.start();
|
|
|
|
|
|
|
|
return this.filterParams().then(params => {
|
|
|
|
return this.inventoryService.queryProductInvoicingOverview(params)
|
|
|
|
}).then(result => {
|
|
|
|
if (!result.data) {
|
|
|
|
result.data = {
|
|
|
|
pageNo: 1,
|
|
|
|
pageSize: 1,
|
|
|
|
totalCount: 1,
|
|
|
|
totalPage: 1,
|
|
|
|
records: []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.pageData.total = result.data.totalCount;
|
|
|
|
this.pageData.current = result.data.pageNo;
|
|
|
|
this.tableData = result.data.records;
|
|
|
|
this.$Loading.finish();
|
|
|
|
}).catch(() => {
|
|
|
|
this.$Loading.finish();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
exportFile() {
|
|
|
|
let param = {};
|
|
|
|
|
|
|
|
param.begin = this.beginDate;
|
|
|
|
param.end = this.endDate;
|
|
|
|
param.platform = '1,2,3,4';
|
|
|
|
if (this.brandId && parseInt(this.brandId)) {
|
|
|
|
param.brandId = this.brandId;
|
|
|
|
}
|
|
|
|
if (this.goodsYearsValue && parseInt(this.goodsYearsValue)) {
|
|
|
|
param.goodYear = this.goodsYearsValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.goodsSeasonsValue && parseInt(this.goodsSeasonsValue)) {
|
|
|
|
param.goodSeason = this.goodsSeasonsValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.smallSortId && parseInt(this.smallSortId)) {
|
|
|
|
param.smallSortId = this.smallSortId;
|
|
|
|
}
|
|
|
|
|
|
|
|
const href = '/Api/platform/exportProductInvoicingOverview?queryConf=' +
|
|
|
|
JSON.stringify(param);
|
|
|
|
|
|
|
|
window.open(href, '_blank');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.stat-shop {
|
|
|
|
.ivu-tabs-tabpane {
|
|
|
|
height: 400px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-container {
|
|
|
|
min-height: 200px;
|
|
|
|
margin: 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
.layout-filter .line {
|
|
|
|
border-top: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.shop-card {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
font-weight: 700;
|
|
|
|
color: #495060;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 22px;
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: " ";
|
|
|
|
display: inline-block;
|
|
|
|
width: 5px;
|
|
|
|
margin-right: 2px;
|
|
|
|
height: 22px;
|
|
|
|
vertical-align: top;
|
|
|
|
background-color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item {
|
|
|
|
width: 90%;
|
|
|
|
height: 50px;
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
line-height: 50px;
|
|
|
|
font-size: 14px;
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
color: #fff;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
.box-item-label {
|
|
|
|
display: inline-block;
|
|
|
|
min-width: 75px;
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item-value {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: -7px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-filter {
|
|
|
|
.ivu-date-picker {
|
|
|
|
margin-left: 0;
|
|
|
|
width: 220px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-col {
|
|
|
|
height: 32px;
|
|
|
|
line-height: 32px;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-btn {
|
|
|
|
margin: 0 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-cascader {
|
|
|
|
max-width: 220px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.quick {
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 20px;
|
|
|
|
margin-right: 50px;
|
|
|
|
|
|
|
|
a {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.brand-select-container {
|
|
|
|
display: inline-block;
|
|
|
|
width: 280px;
|
|
|
|
}
|
|
|
|
margin-bottom: 20px;
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-table-cell {
|
|
|
|
padding-left: 6px;
|
|
|
|
padding-right: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
...
|
...
|
|
