index.vue

<template>
    <div class="clerk-wrapper queueManagementContainer">
        <div class="header manage-head-wrapper">
            <el-form ref="form" class="boxShadow searchFormSocial" inline>
                <el-form-item :label="$t('table.mall')">
                    <el-select v-model="searchForm.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>
                </el-form-item>
                <el-form-item :label="$t('table.areaName')">
                    <el-select v-model="searchForm.cashierAreaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange">
                        <el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('Lane Type')">
                    <el-select v-model="searchForm.counterType" clearable :placeholder="$t('pholder.selectLane')" @change="counterTypeChange">
                       <el-option :label="$t('pholder.all')" value="" />
                        <el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.laneName')">
                    <ul class="condition-box">
                      <li class="condition-item">
                        <div class="condition-item-option">
                          <el-select v-model="searchForm.channelIds" filterable :placeholder="$t('pholder.select')" class="mall-sel-box" multiple
                          :reserve-keyword="true" collapse-tags @change="channelChangeHandle">
                            <div :class="isMallSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Mall', channelListData)">
                              <span class="custom-checkbox__input">
                                <span class="custom-checkbox__inner"></span>
                              </span>
                              <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                            </div>
                            <el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id">
                              <span class="custom-checkbox__input">
                                <span class="custom-checkbox__inner"></span>
                              </span>
                              <span style="padding-left: 5px;">{{ item.name }}</span>
                            </el-option>
                          </el-select>
                        </div>
                      </li>
                    </ul>
                </el-form-item>
                <el-form-item :label="$t('table.date')">
                  <el-date-picker
                        v-model="searchForm.countDate"
                        type="date"
                        :placeholder="$t('table.date')">
                      </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="manage-content">
            <div class="asis-table-content boxShadow" v-loading="loading">
              <el-table
                :data="tableData"
                :max-height="tableHeight"
                style="width: 100%;"
                ref="row_table"
                v-loading="loading"
                class="clerk-manage-table"
                header-row-class-name="manage-tab-head"
                show-summary
                :summary-method="getSummaries"
              >
                <el-table-column label="Time" align="center" prop="counttime">
                  <template slot-scope="{row}">
                    <span>{{row.countDate.substring(0,10)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="Lane" align="center" prop="name" ></el-table-column>
                <el-table-column label="Exit from Closed Counters" align="center" prop="exitFromClosed"></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> -->
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
              counterTypeData:[],
              mallListForTerm:[],
              channelListData:[],
              areaListData:[],
              tableData: [],
              total: 0,
              pageSize: 10,
              currentPage: 1,
              pagesizeArr: [10, 20, 50, 100],
              loading: false,
              searchForm: {
                 mallId: '',
                 cashierAreaId: '',
                 channelIds: '',
                 counterType:'',
                 countDate: new Date(),
              },
              isMallSelAll:false,
            }
        },
        mounted() {
          this.getCounterType()
            this.getMallListForTerm()
        },
        computed: {
            tableHeight() {
                const windowInnerHeight = window.innerHeight;
                return windowInnerHeight - windowInnerHeight * 0.24;
            },
        },
        methods: {
          getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = 'Total';
                return;
              }
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
              } else {
                sums[index] = '';
              }
            });

            return sums;
          },
          timeFormat(val){
            if(val){
              if(val>60){
                return Math.floor(val/60)+'min'+(val%60) +'s'
              }else{
                return val +'s'
              }
            }else{
              return '0'
            }

          },
          // 通道类型
          getCounterType(){
              this.$api.base.dataDic({
                type: 'counterType'
              }).then(res => {
                this.counterTypeData = res.data.data.map(item=>{
                     if(localStorage.getItem('lang') == 'en_US'){
                        item.value = item.valueEn;
                     }
                     item.text = item.value
                     return item;
                  });
              })
          },
            // 广场
            getMallListForTerm() {
                this.mallListForTerm = [];
                this.searchForm.mallId = "";
                this.$api.base.mall({
                    accountId: this.$cookie.get('accountId'),
                    status_arr: "1,3"
                }).then(data => {
                    let result = data.data;
                    if (result.data.length) {
                        if (this.getSessionLocal("mallId")) {
                            this.searchForm.mallId = Number(this.getSessionLocal("mallId"));
                        } else {
                            this.searchForm.mallId = result.data[0].id;
                            this.setSessionLocal("mallId", this.searchForm.mallId);
                        }
                        this.mallListForTerm = result.data;
                    }
                    this.getAreaList();
                })
            },
            mallChange(val) {
                this.setSessionLocal("mallId", val);
                this.searchForm.cashierAreaId = ''
                this.searchForm.channelIds = []
                this.areaListData = [];
                this.channelListData = [];
                this.getAreaList(val)
            },
            // 区域
            getAreaList(val) {
                this.areaListData = [];
                this.$api.queueManagementApi.getAreaList({
                    mallId: this.searchForm.mallId,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.searchForm.cashierAreaId = result.data.list[0].id
                            this.areaListData = result.data.list;
                            this.getChannelList()
                        }
                    }
                })
            },
            areaChange() {
                this.searchForm.channelIds = []
                this.getChannelList()
            },
            counterTypeChange(){
              this.searchForm.channelIds = []
              this.getChannelList()
            },
            // 通道
            getChannelList() {
                this.channelListData = [];
                this.$api.queueManagementApi.getChannelList({
                    areaId: this.searchForm.cashierAreaId,
                    counterType:this.searchForm.counterType,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.channelListData = result.data.list;
                            this.getTableData()
                        }
                    }
                })
            },
            channelChangeHandle(){
              this.isMallSelAll = this.changeHandle(this.searchForm.channelIds, this.channelListData)
            },
            selAllHandle(selType, option) {
              let selectAll = 'is' + selType + 'SelAll';
              let selectVal = 'channelIds';
              if (this[selectAll]) {
                this[selectAll] = false;
                this.searchForm.channelIds = [];
              } else {
                this[selectAll] = true;
                this.searchForm.channelIds = [];
                option.forEach(item => {
                  this.searchForm.channelIds.push(item.id);
                })
              }
            },
            searchFun(){
                this.currentPage = 1;
                this.getTableData()
            },
            getTableData() {
                this.loading = true;
                this.tableData = [];
                this.$api.queueManagementApi.getExitClosedList({
                    mallId: this.searchForm.mallId,
                    areaId: this.searchForm.cashierAreaId,
                    channelIds: this.searchForm.channelIds.toString(),
                    counterType: this.searchForm.counterType,
                    countDate: moment(this.searchForm.countDate).format('YYYY-MM-DD'),
                    // pageNum: this.currentPage,
                    // pageSize: this.pageSize
                }).then(res => {
                    let result = res.data;
                    if(result.code==200){
                       this.tableData = result.data;
                    }
                    this.loading = false;
                })
            },
            sizeChange(val) {
              this.pageSize = val;
              this.getTableData();
            },
            cerrentChange(val) {
              if (this.currentPage != val) {
                this.currentPage = val;
                this.getTableData();
              }
            },
        }
    }
</script>

<style scoped="scoped" lang="less">
  /deep/.el-select{
    width: 170px;
  }
  /deep/.el-table__cell.gutter{
    width: 0 !important;
    display: none !important;
  }
  /deep/.el-form-item__label{
    width: auto !important;
    min-width: 60px;
  }
  /deep/.el-date-editor{
    width: 220px !important;
  }
</style>