data-dashboard/src/pages/newReport copy.vue

<template>
  <div class="new-report" v-loading="state.loading" style="min-height:300px">
    <div v-if="!state.error && isShow">
      <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" />

          <p class="title">2.竞价空返统计</p>
          <empty-return :date="date" />
        </el-col>

        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <p class="title">3.无地址销售订单统计</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">4.竞价反馈统计</p>
          <purchase-back :date="date" @getZXTotal="getZXTotal" />
        </el-col>

        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <p class="title">5.销售订单统计</p>
          <order :date="date" />
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">

        </el-col> -->

        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <p class="title">6.备库单统计</p>
          <stock :date="date" />
        </el-col>

        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <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.loading">
      <unusual-state :hasPermission="isShow" :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 { getOpenid, getParameterByName, removeOpenid, setOpenid } 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 openid = getOpenid()
       const code = getParameterByName('code')
      //  const result = await userRequest.userinfo({ 
      //     ...( openid ? { openid } :  { 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')
           setOpenid(result.data.openid)
           break
          default:
           this.state.error = true
           this.state.message = result.message
           openid && removeOpenid()
           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>