storevisit-ui-mobile/src/views/deviceOutside/productItem.vue

<template>
  <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>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <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%;
          ">
          &nbsp;&nbsp;&nbsp;{{ 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 { getOrderUrlByStoreId } from '@/api/inventory';
export default {
  data() {
    return {
      list: [],
      tabVal: '0',
      detail: null,
      timeData: '',
    };
  },
  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,
        },
      });
    },
    getMyInventoryList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getItemList({ storeCode: this.$route.query.storeCode }).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.loading = false;
          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({
            message: res.msg,
            duration: 5000,
          });
        }
      });
    },
    onClickLeft() {
      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;
      }
    }
  }
}
</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>