|
|
@@ -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,96 @@
|
|
|
<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%" >
|
|
|
+ <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="建议订单" name="1"></van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <div v-for="item in list" v-if="list.length">
|
|
|
+ <p style="font-weight: bold; font-size: 14px"> {{ item.m01Name }}</p>
|
|
|
+ <el-table class="table-headermd" :data="item.productDetailList" border>
|
|
|
<el-table-column label="物料名称" prop="productName" />
|
|
|
<el-table-column label="规格" prop="productSku" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
+ <van-empty v-if="list.length == 0" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {getItemList} from "@/api";
|
|
|
+import { getItemList } from '@/api';
|
|
|
+import { getOrderUrlByStoreId } from '@/api/inventory';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- list: []
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getMyInventoryList()
|
|
|
+ list: [],
|
|
|
+ tabVal: '0',
|
|
|
+ detail: null,
|
|
|
+ timeData: '',
|
|
|
+ };
|
|
|
},
|
|
|
- watch: {
|
|
|
- $route(to, from) {
|
|
|
- if (to.path == "/pItem") {
|
|
|
- this.getMyInventoryList()
|
|
|
- }
|
|
|
- }
|
|
|
+ activated() {
|
|
|
+ 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;
|
|
|
+ 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 +109,114 @@ export default {
|
|
|
message: '加载中...',
|
|
|
forbidClick: true,
|
|
|
});
|
|
|
- getItemList({storeCode:this.$route.query.id}).then(res => {
|
|
|
- loading1.clear()
|
|
|
+ getItemList({ storeCode: this.$route.query.id }).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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setListData() {
|
|
|
+ this.list = this.tabVal == '0' ? this.detail.threeMonthItemList : this.detail.adviceItemList;
|
|
|
+ },
|
|
|
+ placeOrderFn() {
|
|
|
+ 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.fail(res.msg)
|
|
|
+ this.Toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 5000,
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
onClickLeft() {
|
|
|
- this.$router.go(-1)
|
|
|
+ this.$router.go(-1);
|
|
|
},
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.productItem {
|
|
|
+ .myTab {
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.table-headermd {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ text-align: center;
|
|
|
+ position: initial;
|
|
|
+ width: 94% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd .el-table__header,
|
|
|
+.table-headermd .el-table__body {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd col {
|
|
|
+ width: 5.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd col:nth-child(2),
|
|
|
+.table-headermd col:nth-child(4),
|
|
|
+.table-headermd col:nth-child(3) {
|
|
|
+ width: 5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd .van-cell {
|
|
|
+ padding: 0 4px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd th.el-table__cell > .cell {
|
|
|
+ padding: 0 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd th.el-table__cell {
|
|
|
+ background-color: #1989fa;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.table-headermd .el-table__cell {
|
|
|
+ padding: 4px 0;
|
|
|
+}
|
|
|
+</style>
|