data-dashboard/src/pages/accountsReceivable.vue

<template>
  <div class="SalesReportRejectedNew">
    <div v-if="!state.error && isShow">
      <div class="table-header" style="line-height:36px">万宇应收账款报表看板</div>
      <el-table
        :max-height="maxHeight"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :size="'mini'"
        row-key="id"
        border
        stripe
      >
        <el-table-column label="业务公司" fixed="left" width="80" prop="depart">
          <template slot-scope="scope">{{scope.row.depart.split('@')[1] || '总计'}}</template>
        </el-table-column>
        <el-table-column label="应收账款" prop="wpay_fee" align="center" >
          <template slot-scope="scope">
             {{ unit2TenThousand(scope.row.wpay_fee) }}
          </template>
        </el-table-column>
        <el-table-column label="已开票未回票" prop="wpay_ainv_fee" align="center" >
          <template slot-scope="scope">
             {{ unit2TenThousand(scope.row.wpay_ainv_fee) }}
          </template>
        </el-table-column>
        <el-table-column label="未开票" prop="winv_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.winv_fee) }}
          </template>
        </el-table-column>
        <el-table-column label="待开票" prop="inv_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.inv_fee) }}
          </template>
        </el-table-column>
        <el-table-column label="已发货未开票" prop="winv_asend_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.winv_asend_fee) }}
          </template>
        </el-table-column>
        <el-table-column label="未发货" prop="wpay_send_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.wpay_send_fee) }}
          </template>
        </el-table-column>
        <el-table-column label="超60天已发货未开票" prop="winv_two_month" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.winv_two_month) }}
          </template>
        </el-table-column>
        <el-table-column label="超180天应收账款" prop="wpay_six_month" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.wpay_six_month) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template v-else-if="!state.loading">
      <unusual-state :hasPermission="isShow" :message="state.message" path="accountsReceivable" />
    </template>
  </div>
</template>

<script>
import asyncRequest from "@/api/report";
import userRequest from "@/api/index"
import setHeight from "@/mixins/index";
import { getParameterByName } from "../utils/auth";
import UnusualState from "@/components/unusual/index.vue"

import { 
  mapResponseCompletionCompanyName,
  unit2TenThousand,
  getCompanyLabel,
  addition
} from "@/components/reports/src/_utils";

export default {
  name: "WanyuTypeReport",
  props: ["date"],
  mixins: [setHeight],
  components:{UnusualState},
  watch: {
    date: function(val) {
      this.dataTime = val;
      if (val) {
        this.searchList();
      }
    }
  },
  data() {
    return {
      isShow:false,
      total:{
        day:0,
        month:0,
        total_tips: 0
      },
      state:{
        error:false,
        loading:false,
        message:'',
      },
      mapResponseCompletionCompanyName,
      dataTime: this.date,
      loading: false,
      maxHeight: "0",
      tableData: []
    };
  },
  async created() {
    document.title = "应收账款"
    window.onresize = () => {
      this.getHeight();
    };
  },
  mounted() {
    if(!getParameterByName('code')){
      this.login()
    }else{
      this.requestUserinfo()
    }
  },
  methods: {
    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", "3"],
		  //      "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(3) || (result.data.is_show || []).includes('3')
          // this.isShow =  (result.data.is_show || []).includes(0) || (result.data.is_show || []).includes('0') ? false : this.isShow
          if(!this.isShow){
            return
          }

          this.$nextTick(() => this.getHeight());
          this.searchList();
           break
          default:
           this.state.error = true
           this.state.message = result.message
           break
        }
      },
    getCompanyLabel,
    unit2TenThousand,
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    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
    },
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const res = await asyncRequest.list({
        daytime: this.date
      });

      if (res.code === 0 && res.data && res.data.length > 0) {
        const tableData = res.data
        const totalItem = res.data.reduce((prev, current) => Object.keys(current).reduce((prev, currentKey) => ({
        ...prev,
        [currentKey]: currentKey !== 'depart' ? addition(current[currentKey] || 0, prev[currentKey] || 0) : '总计'
      }), prev), {})

        this.tableData = [...tableData,totalItem]
      } else {
        this.tableData = [];
      }
      this.getHeight();
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.SalesReportRejectedNew {
  padding: 10px;
}

.table-header {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  border-bottom: none;
}

.table-sub__header {

  span{
    font-weight: bold !important;
  }
}
</style>