group.vue 6.42 KB
<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>
        <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 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="groupName" :label="$t('table.group')" align="center"></el-table-column>
          <el-table-column prop="mallName" :label="$t('table.mall')" align="center">
            <template slot-scope="scope">
              <span style="color: #409EFF;cursor: pointer;" @click="storeHref(scope.row)">{{scope.row.mallName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score" :label="$t('table.comprehensiveScore')" align="center"></el-table-column>
          <el-table-column prop="patrolTimes" :label="$t('table.tourNumber')" align="center"></el-table-column>
          <el-table-column prop="unqualifiedSopNum" :label="$t('table.unqualifiedItems')" 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 {
      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')]
          }
        };
      },
      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) {
              this.mallListForTerm = result.data;
            }
            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.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.accountReport(tabelParams, null, true).then(data => {
            this.tableData = [];
            var result = data.data;
            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();
          }
        },
        storeHref(data){
          this.$emit('getStore',data)
        },
        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'),
          };
          let Url =window._vionConfig.tourUrl + "/report-form/account/export?";
          let dowloadUrl =`${Url}mallIds=${parameter.mallIds}&startDate=${parameter.startDate}&endDate=${parameter.endDate}&patrolType=1&accountId=${parameter.accountId}&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;
  }
  .manage-select-box {
    /deep/.el-date-editor.el-input__inner{
      width: 230px;
    }
    /deep/.el-select{
      width: 180px;
    }
  }
</style>