Pad_New/src/pages/businessCenter/components/warehousing.vue

<template>
  <div class="page_warehousing">
    <div class="quarterBox">
      <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">近一月</p>
      <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">近三月</p>
      <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">近半年</p>
      <!-- <div class="toolBox"> -->
      <div class="toolOne" @click="startShow = true">
        <div style="display: flex;align-items: center;">
          {{ query.start_time }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="toolOne" @click="endShow = true">
        <div style="display: flex;align-items: center;">
          {{ query.end_time }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <!-- </div> -->
    </div>
    <div>
      <el-table ref="tab" :data="tableData" style="width: 100%" :height="tableHeight" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
        <el-table-column label="商品类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.is_total == 1">{{ scope.row.type.type_name }}</span>
            <span v-if="scope.row.is_total == 2">合计</span>

          </template>
        </el-table-column>
        <el-table-column label="规格名称" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.is_total == 1">{{ scope.row.specification_name }}</span>
            <span v-if="scope.row.is_total == 2"></span>

          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" width="80">
          <!--style="color: #579ef8"-->

          <template slot-scope="scope">
            <span v-if="scope.row.is_total == 1">{{calCount(scope.row) }}</span>
            <span v-if="scope.row.is_total == 2"></span>

          </template>
        </el-table-column>
        <el-table-column label="总价" align="center" width="80">
          <template slot-scope="scope">
            <span  v-if="scope.row.is_total == 1">{{getTotal(scope.row)}}</span>
            <span v-if="scope.row.is_total == 2">{{scope.row.total}}</span>

          </template>
        </el-table-column>
      </el-table>

    </div>
    <div>
      <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
    </div>
  </div>
</template>


<script>
  const moment = require('moment')
  import {GetStockInfo} from "@/api/statistics";


  export default {
    data() {
      return {
        tableHeight:'',
        currentDate1: new Date(new Date().setDate(new Date().getDate() - 7)),
        currentDate2: new Date(),
        minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
        maxDate: new Date(),
        query: {
          start_time: "",
          end_time: "",
          type: 1,
        },
        Num: 1,
        startShow: false,
        endShow: false,
        currentDate: new Date(),
        startTime: "请选择",
        endTime: "请选择",
        tableData: []
      }
    },
    methods: {
      getTotal(stock) {
        let total = 0
        var array = []
        array = stock.query_warehousing_info
        for (let i = 0; i < array.length; i++) {
          total = total + (array[i].warehousing_count * array[i].price)

        }
        return total

      },
      calCount(stock) {
        let total = 0
        var array = []
        array = stock.query_warehousing_info
        for (let i = 0; i < array.length; i++) {
          total = total + array[i].warehousing_count
        }
        return total

      },
      GetStockInfo() {


      },
      stockInCount: function (row) {
        let total = 0;
        for (let i = 0; i < row.query_warehousing_info.length; i++) {
          total = total + row.query_warehousing_info[i].warehousing_count;
        }
        return total;
      },
      onClick(id) {
        if (id == 1) {
          this.Num = 1;
        } else if (id == 2) {
          this.Num = 2;
        } else if (id == 3) {
          this.Num = 3;
        }
        switch (this.Num) {
          case 1: //近1个月
            this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() + 1)),
              this.currentDate2 = new Date()
            this.isStop = false
            const startDate = moment().subtract('month', 1).format('YYYY-MM-DD')
            this.query.start_time = startDate
            const endDate = moment(new Date()).format('YYYY-MM-DD')
            this.query.end_time = endDate
            this.GetStockInfo(this.query)
            break
          case 2: //近三月
            this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() - 3)),
              this.currentDate2 = new Date()
            this.isStop = false
            this.query.page = 1
            this.query.start_time = moment().subtract('month', 3).format('YYYY-MM-DD')
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
            this.GetStockInfo(this.query)
            break
          case 3: //近6月
            this.isStop = false
            this.query.page = 1
            this.query.start_time = moment().subtract('month', 6).format('YYYY-MM-DD')
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
            this.GetStockInfo(this.query)
            break
        }

      },
      getstartTime(value) {
        this.Num = 0
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let day = value.getDate();
        if (month >= 1 && month <= 9) {
          month = `0${month}`;
        }
        if (day >= 1 && day <= 9) {
          day = `0${day}`;
        }

        this.query.start_time = `${year}-${month}-${day}`;

        this.GetStockInfo(this.query)
        this.startShow = false;
      },
      getstartTime2(value) {
        this.Num = 0
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let day = value.getDate();
        if (month >= 1 && month <= 9) {
          month = `0${month}`;
        }
        if (day >= 1 && day <= 9) {
          day = `0${day}`;
        }

        this.query.end_time = `${year}-${month}-${day}`;
        this.GetStockInfo(this.query)

        this.endShow = false;
      },
      GetStockInfo(params) {
        this.tableData = []
        GetStockInfo(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
              let all_total = 0
              for (let i = 0; i < resp.data.list.length; i++) {
                if (resp.data.list[i].query_warehousing_info.length > 0) {
                  resp.data.list[i]['is_total'] = 1
                  this.tableData.push(resp.data.list[i])
                  for (let b = 0; b < resp.data.list[i].query_warehousing_info.length; b++) {
                    all_total = all_total + (resp.data.list[i].query_warehousing_info[b].warehousing_count * resp.data.list[i].query_warehousing_info[b].price)
                  }
                }
              }

              let obj = {
                is_total:2,
                total:all_total,
              }
              this.tableData.push(obj)
            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },

    }, created() {
      this.tableHeight = (document.documentElement.clientHeight - (Number(document.documentElement.style.fontSize.slice(0, -2)) * 2.75)) + 'px'
      // this.query.start_time = moment().subtract('day', 7).format('YYYY-MM-DD')
      this.query.start_time = moment().subtract('month', 1).format('YYYY-MM-DD')

      // 本月的结束时间
      this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
      this.GetStockInfo(this.query)
    }

  }
</script>


<style lang="scss" scoped>
  .page_warehousing {

  .quarterBox {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: space-around;

  p {
    width: 3rem;
    height: 1.875rem;
    line-height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    opacity: 0.8;
    border-radius: 0.3125rem;
    color: #8d8d8d;
    cursor: pointer;
    text-align: center;
    font-size: 0.8125rem;
  }

  .active {
    background: rgba(51, 138, 251, 1);
    color: #fff;
    border: 1px solid #338afb;
  }

  }

  .toolOne {
    width: 6.25rem;
    height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    border-radius: 5px;
    text-align: center;
    font-size: 0.8125rem;
    color: #8d8d8d;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  }


</style>
<style lang="scss">
  ::-webkit-scrollbar {
    height: 0;
    width: 0;
  }
</style>