store.vue

<template>
  <div>
    <el-row class="manage-head-wrapper">
      <el-col :xs="24" :sm="24">
        <div class="manage-select-box">
          <el-select v-model="queryForm.mallId" filterable :placeholder="$t('pholder.select')"  @change="mallChange">
            <el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="manage-select-box">
          <el-date-picker
            v-model="queryForm.timeVal"
            type="daterange"
             range-separator="-"
            size='small'
            :start-placeholder="$t('table.startTime')"
            :end-placeholder="$t('table.endTime')">
          </el-date-picker>
        </div>
        <el-button type="primary" class="search-btn"  @click="searchFun">{{$t('button.search')}}</el-button>
        <el-button type="primary" class="search-btn manage-add-btn"  @click="exportFun">{{$t('button.export')}}</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="cardContent">
      <el-col :span="4" class="card">
        <img src="@/assets/img/videoShop/img1.png">
        <div>
            <p class="num">{{cardObj.score}}</p>
            <p>{{$t('table.comprehensiveScore')}}（{{$t('VideoShopTour.score')}}）</p>
        </div>
      </el-col>
     <el-col :span="4" class="card">
       <img src="@/assets/img/videoShop/img2.png">
       <div>
           <p class="num">{{cardObj.patrolTimes}}</p>
           <p>{{$t('table.tourNumber')}}（{{$t('table.times')}}）</p>
       </div>
     </el-col>
     <el-col :span="4" class="card">
       <img src="@/assets/img/videoShop/img3.png">
       <div>
           <p class="num">{{cardObj.unqualifiedSopNum}}</p>
           <p>{{$t('VideoShopTour.unqualifiedItems')}}（{{$t('iPage.number')}}）</p>
       </div>
     </el-col>
     <el-col :span="4" class="card">
       <img src="@/assets/img/videoShop/img4.png">
       <div>
           <p class="num">{{cardObj.deductPoints}}</p>
           <p>{{$t('table.deductPoints')}}（{{$t('VideoShopTour.score')}}）</p>
       </div>
     </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table
          ref="row_table"
          class="gate-table"
          :data="tableData"
          :max-height="tableHeight"
          style="width: 100%"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column prop="order" :label="$t('table.order')" align="center" width="100"></el-table-column>
          <el-table-column prop="sopProjectName" :label="$t('table.checkItemName')" align="center"></el-table-column>
          <el-table-column prop="patrolTimes" :label="$t('table.inspectionNumber')" align="center"></el-table-column>
          <el-table-column prop="unqualifiedTimes" :label="$t('table.nonconformities')" align="center"></el-table-column>
          <el-table-column prop="deductPoints" :label="$t('table.deductPoints')" align="center"></el-table-column>
        </el-table>
        <el-pagination
          class="manage-pagination-box"
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          @size-change="sizeChange"
          @current-change="cerrentChange"
          layout="sizes, prev, pager, next, slot"
          :total="total"
        >
          <span
            class="slot-ele-total"
          >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
      props:['groupMallId'],
      data() {
        return {
          mallListForTerm:[],
          tableData: [],
          total: 0,
          pageSize: 10,
          currentPage: 1,
          queryForm:{
            mallId:'',
            timeVal:[moment().subtract(30, 'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
          },
          cardObj:{
            score:'',
            patrolTimes:'',
            unqualifiedSopNum:'',
            deductPoints:'',
          }
        };
      },
      mounted(){
        this.getMallListForTerm()
      },
      computed: {
        tableHeight() {
          const windowInnerHeight = window.innerHeight;
          return windowInnerHeight - windowInnerHeight * 0.24;
      	}
      },
      methods:{
        getMallListForTerm() {
          this.mallListForTerm = [];
          this.queryForm.mallId = "";
          this.$api.base.mall({ accountId: this.$cookie.get('accountId')}).then(data => {
            let result = data.data;
            if (result.data.length) {
              if(this.groupMallId){
                this.queryForm.mallId = this.groupMallId;
              }else{
                if (this.getSessionLocal("mallId")) {
                  this.queryForm.mallId = Number(this.getSessionLocal("mallId"));
                } else {
                  this.queryForm.mallId = result.data[0].id;
                  this.setSessionLocal("mallId", this.queryForm.mallId);
                }
              }
              this.mallListForTerm = result.data;
            }
            this.getTableData();
          })
        },
        mallChange() {
          this.setSessionLocal("mallId", this.queryForm.mallId);
          this.getTableData();
        },
        getTableData(){
          if(!this.queryForm.timeVal){
            this.$message({
              message: this.$t('pgolder.date'),
              type: 'warning'
            });
            return
          }
          let tabelParams = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            accountId: this.$cookie.get('accountId'),
            mallIds:this.queryForm.mallId,
            startDate:moment(this.queryForm.timeVal[0]).format('YYYY-MM-DD'),
            endDate:moment(this.queryForm.timeVal[1]).format('YYYY-MM-DD'),
            patrolType:2
          };
          Object.keys(tabelParams).map(key => (!tabelParams[key] ? delete tabelParams[key] : ''));
          this.$api.videoShopTourReport.mallReport(tabelParams, null, true).then(data => {
            this.tableData = [];
            var result = data.data;
            if(result.code==200){
              this.cardObj = {
                score:result.data.score,
                patrolTimes:result.data.patrolTimes,
                unqualifiedSopNum:result.data.unqualifiedSopNum,
                deductPoints:result.data.deductPoints,
              }
              if(result.data.list && result.data.list.length){
                result.data.list.forEach((item, index) => {
                  item.order = (this.currentPage - 1) * this.pageSize + index + 1;
                });
              }
              this.tableData = result.data.list;
              this.total = result.data.total;
            }
          })
        },
        sizeChange(val) {
          this.pageSize = val;
          this.getTableData();
        },
        cerrentChange(val) {
          if (this.currentPage != val) {
            this.currentPage = val;
            this.getTableData();
          }
        },
        exportFun(){
          let parameter = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            mallIds:this.queryForm.mallId,
            startDate:moment(this.queryForm.timeVal[0]).format('YYYY-MM-DD'),
            endDate:moment(this.queryForm.timeVal[1]).format('YYYY-MM-DD'),
          };
          let Url =window._vionConfig.tourUrl + "/report-form/mall/export?";
          let dowloadUrl =`${Url}mallId=${parameter.mallIds}&patrolType=2&startDate=${parameter.startDate}&endDate=${parameter.endDate}&authorization=${this.$cookie.get("atoken")}`
          window.open(dowloadUrl);
        },
        searchFun(){
          this.currentPage = 1;
          this.getTableData();
        }
      }
    };
</script>

<style scoped="scoped" lang="less">
  .manage-head-wrapper{
    padding-top: 0;
  }
  .cardContent{
    padding-left: 15px;
    margin-bottom: 15px;
  }
  .card {
    padding: 10px;
    img{
        width: 64px;
    }
    img,
    div {
        display: inline-block;
        vertical-align: middle;
    }
    p {
        margin: 0 0 0 15px;
    }

    .num {
        color: #0E65E7;
        font-weight: 900;
        font-size: 24px;
    }
  }
  .manage-select-box {
    /deep/.el-date-editor.el-input__inner{
      width: 230px;
    }
    /deep/.el-select{
      width: 180px;
    }
  }
</style>