data-dashboard/src/pages/newReport.vue

<template>
  <div class="new-report" v-loading="state.loading">
    <div v-if="!state.error">
      <div style="display:flex;justify-content:flex-end">
        <period-date-picker :start="date[0]" :end="date[1]" size="mini" width="150px" @timeReturned="time($event)" />
      </div>

      <el-row gutter="20">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <p class="title">1.咨询单情况</p>
          <consult :date="date" />
        </el-col>

        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <p class="title">2.订单未发货情况</p>
          <not-deliver-good :date="date" />
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <p class="title">3.备库单情况</p>
          <stock :date="date" />
        </el-col>

        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <p class="title">4.订单情况</p>
          <order :date="date" />
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <p class="title">5.竞价单空返情况统计:</p>
          <empty-return :date="date" />
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <p class="title">6.采购员竞价反馈情况 : 竞价单总量 : {{ zxTotal }}</p>
          <purchase-back :date="date" @getZXTotal="getZXTotal" />
        </el-col>

        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <p class="title">7.采购员采购单情况</p>
          <purchase :date="date" />
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <p class="title">8.发货工单时效:</p>
          <send-order :date="date" />
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <p class="title">9.发货单时效:</p>
          <send-exp :date="date" />
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24">
          <p class="title">10.当日库存销售情况表:</p>
          <the-sales :date="date" />
        </el-col>
      </el-row>
    </div>

    <template v-else-if="state.error">
      <unusual-state :message="state.message" path="newReport" />
    </template>
  </div>
</template>

<script>
import NotDeliverGood from "../components/newReport/src/notDeliverGood.vue";
import PurchaseBack from "../components/newReport/src/PurchaseBack.vue";
import EmptyReturn from "../components/newReport/src/emptyReturn.vue";
import SendOrder from "../components/newReport/src/sendOrder.vue";
import TheSales from "../components/newReport/src/theSales.vue";
import Purchase from "../components/newReport/src/purchase.vue";
import PeriodDatePicker from "../components/period-date-picker";
import Consult from '../components/newReport/src/consult.vue';
import SendExp from "../components/newReport/src/sendExp.vue";
import Order from '../components/newReport/src/order.vue';
import Stock from "../components/newReport/src/Stock.vue";


import dayjs from "dayjs"
import UnusualState from "@/components/unusual/index.vue";
import { getParameterByName } from "../utils/auth";
import userRequest from "@/api/index";

export default {
  name: "newReport",
  components: {
    PeriodDatePicker,
    NotDeliverGood,
    UnusualState,
    PurchaseBack,
    EmptyReturn,
    SendOrder,
    TheSales,
    Purchase,
    SendExp,
    Consult,
    Stock,
    Order
  },
  data() {
    return {
      date: [],
      zxTotal: 0,
      isDisplay: false,
      state:{
        message: '',
        error: false,
        loading: false
      }
    };
  },
  mounted() {
    document.title = "数据统计"
    if(!getParameterByName('code')){
      this.login()
    }else{
      this.requestUserinfo()
    }

    const current = dayjs(new Date()).format("YYYY-MM-DD")

    this.date = [current + " 00:00:00", current + " 23:59:59"]
  },
  methods: {
    getZXTotal(zxTotal) {
      this.zxTotal = zxTotal;
    },
    async time(e) {
      const { startTime, endTime } = e;
      this.start = startTime || "";
      this.end = endTime || "";

      const { start, end } = this;
      if ((start !== "" && end === "") || (start === "" && end !== "")) {
        this.$message.warning("时间区间不完整！");
        this.date = []
        return;
      }

      if(this.start && this.end){
        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
      }else{
        this.date = [this.start, this.end]
      }

    },
    async requestUserinfo(){
       this.state.loading = true;
       const code = getParameterByName('code')
       const result = await userRequest.userinfo({ code })

      // const result ={
      //   "code": 0,
      //  "message": "获取成功",
      //  "data": {
		  //      "id": "1",
		  //      "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
		  //      "mobile": "",
		  //      "gender": "0",
		  //      "nickname": "雪寒",
		  //      "avatar": "",
		  //      "subscribe_time": "2022-12-21 15:52:14",
		  //      "addr": "\/\/",
		  //      "status": "1",
		  //      "is_show": ["1", "2", "4"],
		  //      "companyArr": [{
		  //      	"companyNo": "GS2302231125079621",
		  //      	"companyName": "北京百辰荣达国际科贸有限公司",
		  //      	"info": [1,2]
		  //      }, {
		  //      	"companyNo": "GS2302231323386950",
		  //      	"companyName": "北京泓源广诚国际商贸有限公司",
		  //      	"info": [1,2]
		  //      }, {
		  //      	"companyNo": "GS2304031312553746",
		  //      	"companyName": "北京锦兴弘昌科技有限公司",
		  //      	"info": [1, 2]
		  //      }, {
		  //      	"companyNo": "GS2302231124114965",
		  //      	"companyName": "北京普润心堂商贸有限公司",
		  //      	"info": [1, 2]
		  //      }, {
		  //      	"companyNo": "GS2203161855277894",
		  //      	"companyName": "北京万宇恒通国际科贸有限公司",
		  //      	"info": [1, 2]
		  //      }],
		  //      "addtime": "2023-04-10 18:11:07",
		  //      "updatetime": "2023-05-09 16:22:33"
      //  	}
      //  }
      
        this.state.loading = false
        switch(Number(result.code)){
          case 0:
          this.isShow =  (result.data.is_show || []).includes(4) || (result.data.is_show || []).includes('4')
          if(!this.isShow){
            return
          }

           break
          default:
           this.state.error = true
           this.state.message = result.message
           break
        }
      },
    login(){
      const redirect_url = encodeURIComponent('http://stat.caixiao365.com/accountsReceivable')
      var state = 'wx_' + Math.random().toString(36).substr(2, 15)
      const scope = 'snsapi_userinfo'
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_url}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
      window.location.href = url
    },
  }
}
</script>

<style lang="scss" scoped>
.new-report {
  padding: 10px;
  box-sizing: border-box;

  .title {
    padding-left: 5px;
  }
}
</style>