|
|
@@ -1,8 +1,9 @@
|
|
|
<template>
|
|
|
- <div class="bgcolor">
|
|
|
- <div class="navBarTOP" >
|
|
|
- <van-nav-bar class="navBar" title="产品列表" left-arrow @click-left="onClickLeft">
|
|
|
+ <div class="bgcolor productItem">
|
|
|
+ <div class="navBarTOP">
|
|
|
+ <van-nav-bar class="navBar" title="产品列表" left-arrow @click-left="onClickLeft">
|
|
|
<template #right>
|
|
|
+ <span style="color: #0057ba" @click="placeOrderFn"> 去下单 </span>
|
|
|
</template>
|
|
|
</van-nav-bar>
|
|
|
</div>
|
|
|
@@ -11,42 +12,129 @@
|
|
|
<div class="lineGrey"></div>
|
|
|
<div class="lineGrey"></div>
|
|
|
<div class="lineGrey"></div>
|
|
|
- <div class="container" style="width: 100%; margin: 0 auto;">
|
|
|
- <div v-for="item in list">
|
|
|
- <p style="font-weight: bold;font-size: 14px"> {{item.m01Name}}</p>
|
|
|
- <el-table :data="item.productDetailList" border style="width: 100%" >
|
|
|
- <el-table-column label="物料名称" prop="productName" />
|
|
|
- <el-table-column label="规格" prop="productSku" />
|
|
|
+ <div class="container" style="width: 100%; margin: 0 auto">
|
|
|
+ <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
|
|
|
+ <van-tab :title="timeData + '下单SKU'" name="0"></van-tab>
|
|
|
+ <van-tab title="建议下单SKU" name="1"></van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <div class="tips" v-if="tabVal == '1'">
|
|
|
+ <p style="font-weight: bold; font-size: 16px">建议下单规则:</p>
|
|
|
+ <p>①计算该店所在销售部同店型门店:滚动3个月DIS/OMS下单的TOP产品</p>
|
|
|
+ <p>②已售品项 VS TOP产品,输出未下单产品TOP50如下</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="item in list"
|
|
|
+ v-if="list.length"
|
|
|
+ style="display: flex; flex-direction: column; align-items: center">
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ background: #d6eaff;
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px 0;
|
|
|
+ width: 94%;
|
|
|
+ ">
|
|
|
+ {{ item.m01Name }}
|
|
|
+ </p>
|
|
|
+ <el-table class="table-headermd1" :data="item.productDetailList" border>
|
|
|
+ <el-table-column label="物料名称" prop="productName" align="center" />
|
|
|
+ <el-table-column label="规格" prop="productSku" align="center" width="120px" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
+ <van-empty v-if="list.length == 0" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {getItemList} from "@/api";
|
|
|
+import { getItemList, buryingPoint } from '@/api';
|
|
|
+import { getOrderUrlByStoreId } from '@/api/inventory';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- list: []
|
|
|
- }
|
|
|
+ list: [],
|
|
|
+ tabVal: '0',
|
|
|
+ detail: null,
|
|
|
+ timeData: '',
|
|
|
+ };
|
|
|
},
|
|
|
- created() {
|
|
|
- this.getMyInventoryList()
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route(to, from) {
|
|
|
- if (to.path == "/pItem") {
|
|
|
- this.getMyInventoryList()
|
|
|
- }
|
|
|
- }
|
|
|
+ activated() {
|
|
|
+ buryingPoint({
|
|
|
+ systemModel: '门店列表',
|
|
|
+ buryingPointType: 6,
|
|
|
+ buryingPointValue: '门店拜访-下单SKU数',
|
|
|
+ buryingPointName: this.tabVal == '0' ? '滚动三个月下单SKU' : '建议下单SKU',
|
|
|
+ buryingPointPosition: '门店ICON',
|
|
|
+ });
|
|
|
+ this.getMonth();
|
|
|
+ this.getMyInventoryList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ getMonth() {
|
|
|
+ // 获取当前日期
|
|
|
+ var currentDate = new Date();
|
|
|
+
|
|
|
+ // 获取当前月份
|
|
|
+ var currentMonth = currentDate.getMonth();
|
|
|
+
|
|
|
+ // 获取当前年份
|
|
|
+ // var currentYear = currentDate.getFullYear();
|
|
|
+
|
|
|
+ var previousMonthDate1 = new Date();
|
|
|
+ if (currentDate.getDate() == 1) {
|
|
|
+ previousMonthDate1.setMonth(currentMonth - 1);
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ var previousMonth1 = previousMonthDate1.getMonth();
|
|
|
+ var previousYear1 = previousMonthDate1.getFullYear();
|
|
|
+
|
|
|
+ // 计算前三个月的年份和月份
|
|
|
+ var previousMonthDate = new Date();
|
|
|
+ if (currentDate.getDate() == 1) {
|
|
|
+ previousMonthDate.setMonth(currentMonth - 3);
|
|
|
+ } else {
|
|
|
+ previousMonthDate.setMonth(currentMonth - 2);
|
|
|
+ }
|
|
|
+ 1;
|
|
|
+ var previousMonth = previousMonthDate.getMonth();
|
|
|
+ var previousYear = previousMonthDate.getFullYear();
|
|
|
+
|
|
|
+ //前三个月
|
|
|
+ if (previousYear1 == previousYear) {
|
|
|
+ var formattedPreviousMonth1 = previousYear1 + '-' + (previousMonth1 + 1);
|
|
|
+ // 格式化年份和月份
|
|
|
+ var formattedPreviousMonth = previousYear + '-' + (previousMonth + 1);
|
|
|
+ this.timeData =
|
|
|
+ formattedPreviousMonth.split('-')[1] + '-' + formattedPreviousMonth1.split('-')[1] + '月';
|
|
|
+ } else {
|
|
|
+ var formattedPreviousMonth1 = previousYear1 + '年' + (previousMonth1 + 1) + '月';
|
|
|
+ // .toString().padStart(2, '0');
|
|
|
+ // 格式化年份和月份
|
|
|
+ var formattedPreviousMonth = previousYear + '年' + (previousMonth + 1) + '月';
|
|
|
+ this.timeData = formattedPreviousMonth + '-' + formattedPreviousMonth1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tabChange(name) {
|
|
|
+ this.tabVal = name;
|
|
|
+ buryingPoint({
|
|
|
+ systemModel: '门店列表',
|
|
|
+ buryingPointType: 6,
|
|
|
+ buryingPointValue: '门店拜访-下单SKU数',
|
|
|
+ buryingPointName: name == '0' ? '滚动三个月下单SKU' : '建议下单SKU',
|
|
|
+ buryingPointPosition: '门店ICON',
|
|
|
+ });
|
|
|
+ this.setListData();
|
|
|
+ // this.getMyInventoryList();
|
|
|
+ },
|
|
|
onSelect(action) {
|
|
|
- this.$router.push({path: "/material", query: {
|
|
|
- tabVal:action
|
|
|
- }
|
|
|
- })
|
|
|
+ this.$router.push({
|
|
|
+ path: '/material',
|
|
|
+ query: {
|
|
|
+ tabVal: action,
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
getMyInventoryList() {
|
|
|
let loading1 = this.$toast.loading({
|
|
|
@@ -54,19 +142,141 @@ export default {
|
|
|
message: '加载中...',
|
|
|
forbidClick: true,
|
|
|
});
|
|
|
- getItemList({storeCode:this.$route.query.id}).then(res => {
|
|
|
- loading1.clear()
|
|
|
+ getItemList({ storeCode: this.$route.query.storeCode }).then((res) => {
|
|
|
+ loading1.clear();
|
|
|
if (res.code == 200) {
|
|
|
this.loading = false;
|
|
|
- this.list = res.data
|
|
|
+ this.detail = res.data;
|
|
|
+ this.setListData();
|
|
|
} else {
|
|
|
- this.$toast.fail(res.msg)
|
|
|
+ this.$toast.fail(res.msg);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setListData() {
|
|
|
+ this.list = this.tabVal == '0' ? this.detail.threeMonthItemList : this.detail.adviceItemList;
|
|
|
+ },
|
|
|
+ placeOrderFn() {
|
|
|
+ buryingPoint({
|
|
|
+ systemModel: '门店列表',
|
|
|
+ buryingPointType: 6,
|
|
|
+ buryingPointValue: '门店拜访-下单SKU数',
|
|
|
+ buryingPointName: '去下单',
|
|
|
+ buryingPointPosition: '门店ICON',
|
|
|
+ });
|
|
|
+ let loading1 = this.$toast.loading({
|
|
|
+ duration: 0,
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ });
|
|
|
+ getOrderUrlByStoreId({
|
|
|
+ storeId: this.$route.query.id,
|
|
|
+ from: this.$route.query.from || '',
|
|
|
+ }).then((res) => {
|
|
|
+ loading1.clear();
|
|
|
+ if (res.code == 200 && res.data) {
|
|
|
+ window.location.href = res.data;
|
|
|
+ } else {
|
|
|
+ this.Toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 5000,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
onClickLeft() {
|
|
|
- this.$router.go(-1)
|
|
|
+ this.$router.go(-1);
|
|
|
},
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.productItem {
|
|
|
+ .container {
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ .myTab {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .van-tabs__nav--card {
|
|
|
+ margin: 0 !important;
|
|
|
+ border-left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ .van-tabs__wrap,
|
|
|
+ .van-tabs__nav--card {
|
|
|
+ height: 39px;
|
|
|
+ }
|
|
|
+ .van-tab {
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .myList {
|
|
|
+ .van-cell {
|
|
|
+ padding: 0;
|
|
|
+ &:after {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ width: 94% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ p {
|
|
|
+ line-height: 25px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.productItem {
|
|
|
+ .table-headermd1 {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ position: initial;
|
|
|
+ width: 94% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-headermd1 .el-table__header,
|
|
|
+ .table-headermd1 .el-table__body {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .table-headermd1 col {
|
|
|
+ // width: 5.8rem;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .table-headermd1 col:nth-child(2),
|
|
|
+ .table-headermd1 col:nth-child(4),
|
|
|
+ // .table-headermd1 col:nth-child(3) {
|
|
|
+ // width: 5rem;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .table-headermd1 .van-cell {
|
|
|
+ padding: 0 4px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-headermd1 th.el-table__cell > .cell {
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-headermd1 th.el-table__cell {
|
|
|
+ background-color: #f3f9ff;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-headermd1 .el-table__cell {
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
+ .el-table__body {
|
|
|
+ .cell {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|