checkItem.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" multiple collapse-tags filterable :placeholder="$t('pholder.select')">
            <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>
        <div class="manage-select-box">
          <el-select v-model="queryForm.sopProjectIds" multiple collapse-tags filterable :placeholder="$t('pholder.select')">
            <el-option v-for="item in sopList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </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.totalMall}}</p>
            <p>{{$t('format.ZONENUM')}}（{{$t('iPage.number')}}）</p>
        </div>
      </el-col>
     <el-col :span="4" class="card">
       <img src="@/assets/img/videoShop/img2.png">
       <div>
           <p class="num">{{cardObj.patrolMall}}</p>
           <p>{{$t('table.tourShopNum')}}（{{$t('iPage.number')}}）</p>
       </div>
     </el-col>
     <el-col :span="4" class="card">
       <img src="@/assets/img/videoShop/img3.png">
       <div>
           <p class="num">{{cardObj.noPatrolMall}}</p>
           <p>{{$t('table.noTourShopNum')}}（{{$t('iPage.number')}}）</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="sopProjectId" :label="$t('VideoShopTour.checkItems')+'ID'" align="center"></el-table-column>
          <el-table-column prop="sopProjectName" :label="$t('table.checkItemName')" align="center"></el-table-column>
          <el-table-column prop="wrongMall" :label="$t('table.problemStores')" align="center">
            <template slot-scope="scope">
              <span style="color: #409EFF;cursor: pointer;" @click="problemStore(scope.row)">{{scope.row.wrongMall}}</span>
            </template>
          </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>
        <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>
    <detail ref='problemDetail'></detail>
  </div>
</template>

<script>
  import detail from './detail.vue'
  import moment from 'moment'
  export default {
    components:{
      detail
    },
      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:{
            totalMall:'',
            patrolMall:'',
            noPatrolMall:'',
          },
          sopList:[]
        };
      },
      mounted(){
        this.getMallListForTerm()
        this.getSopList()
      },
      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) {
              this.mallListForTerm = result.data;
            }
            this.getTableData();
          })
        },
        getSopList(){
          let tabelParams = {
            pageNum: 1,
            pageSize:9999999
          };
          this.sopList = []
          this.$api.videoShopTourReport.getPatrolSopProject(tabelParams).then(data => {
              this.tableData = [];
              var result = data.data;
              this.sopList = result.data.list;
            })
        },
        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.toString(),
            sopProjectIds:this.queryForm.sopProjectIds.toString(),
            startDate:moment(this.queryForm.timeVal[0]).format('YYYY-MM-DD'),
            endDate:moment(this.queryForm.timeVal[1]).format('YYYY-MM-DD'),
            patrolType:1
          };
          Object.keys(tabelParams).map(key => (!tabelParams[key] ? delete tabelParams[key] : ''));
          this.$api.videoShopTourReport.checkItemReport(tabelParams, null, true).then(data => {
            this.tableData = [];
            var result = data.data;
            if(result.code==200){
              this.cardObj = {
                totalMall:result.data.totalMall,
                patrolMall:result.data.patrolMall,
                noPatrolMall:result.data.noPatrolMall,
              }
              if(result.data.list && result.data.list.length>0){
                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();
          }
        },
        problemStore(data){
          let dataObj = {
            startDate:moment(this.queryForm.timeVal[0]).format('YYYY-MM-DD'),
            endDate:moment(this.queryForm.timeVal[1]).format('YYYY-MM-DD'),
            mallIds:data.wrongMalls.toString(),
            sopProjectId:data.sopProjectId
          }
          this.$refs.problemDetail.dialogInit(dataObj)
        },
        exportFun(){
          let parameter = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            accountId: this.$cookie.get('accountId'),
            mallIds:this.queryForm.mallId.toString(),
            startDate:moment(this.queryForm.timeVal[0]).format('YYYY-MM-DD'),
            endDate:moment(this.queryForm.timeVal[1]).format('YYYY-MM-DD'),
            sopProjectIds:this.queryForm.sopProjectIds.toString()
          };
          let Url =window._vionConfig.tourUrl + "/report-form/sop-project/export?";
          let dowloadUrl =`${Url}accountId=${parameter.accountId}&patrolType=1&mallIds=${parameter.mallIds}&sopProjectIds=${parameter.sopProjectIds}&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>