itable.vue

<!-- 楼层对比 -->
<template>
  <div>
    <!-- 顶部区域 S-->
    <div class="ipage_top">
      <div class="tit"><img :src="bindIcon()" />{{title||chartData.title}}</div>
      <div class="acts">
         <el-button @click="dialogBtn()" type="text" size="medium">{{$t("button.configurePanel")}}</el-button>
      </div>
    </div>
    <div v-if="params.orgType=='account'&& !params.isStore" style="position: absolute;left: 200px;top: 18px;">
      <ul class="condition-box">
          <li class="condition-item">
              <span class="condition-item-text">{{ ($Project == 'mall' ? $t('pholder.mallS') : $t('pholder.filterStores')) + ':'}}</span>
              <el-select v-model="mutiMallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" multiple
              :reserve-keyword="true" collapse-tags @change="mallChangeHandle">
                <div :class="isMallSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Mall', mallSData)">
                  <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 mallSData" :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>

          </li>
          <li class="condition-item btn-condition-item">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" @click="searchMall">{{$t('button.search')}}</el-button>
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" @click="exportMall">{{$t('button.export')}}</el-button>
          </li>
      </ul>
    </div>
    <div :class="['itable',params.sortKey,params.sortType]">
      <el-table v-loading="loading" class="asis-table" :data="tableData" @sort-change="sortTable" header-row-class-name="asis-table-head">
        <!-- 序号 S -->
        <!-- <template v-if="tableHead.length > 0">
                 <el-table-column type="order" :label="$t('table.order')" align="center" :formatter="orderFormatter" />
              </template> -->
        <!-- 序号 E -->
        <i-column v-for="(item, index) in tableHead" :key="index" :col="item" :loadingShow='1' />
        <!-- <el-table-column v-for="(col, index) in tableHead" :key="index" :label="col.label" :column-key="col.prop" :sortable="col.key?'custom':false" :prop="col.prop" align="left" :border="false" :min-width="width" :fixed="col.fixed" :type="col.type" /> -->
        <!-- 操作 S -->
        <template v-if="tableHead.length > 0 && action">
          <el-table-column align="center" :label="$t('table.operate')" width="100">
            <template slot-scope="scope">
              <el-button @click="detailBtn(scope.row)" type="text" size="small">{{$t('button.seeDetail')}}</el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 操作 E -->
      </el-table>
      <el-pagination v-if="pagination" class="ipage-pagination" background :current-page="page" :page-sizes="pageArr" :page-size="pageSize" @size-change="sizeChange" @current-change="handleCurrentChange" layout="prev, pager, next, slot,sizes" :total="total">
        <span class="slot-ele-total">{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
      </el-pagination>
    </div>
    <el-dialog
      :title="$t('button.configureCloumns')"
      :visible.sync="configBool"
      width="50%"
      :close-on-click-modal="false"
      class="manage-dialog"
      :before-close="closeDialog"
    >
      <!-- 自定义字段 S -->
      <el-checkbox-group v-model="keys" style="padding-bottom:20px;" >
        <el-checkbox style="margin-top:6px;margin-bottom:6px;min-width:120px;" v-for="item in keyList" :checked="item.checked" :disabled="item.disable" :label="item.label" :key="item.key"></el-checkbox>
      </el-checkbox-group>
      <!-- <el-transfer style="padding-bottom:20px;" v-model="keys" :titles="['显示','隐藏']" :button-texts="['加入左侧', '加入右侧']" :data="keyList"></el-transfer> -->
      <!-- 自定义字段 e -->
      <div slot="footer" class="dialog-footer">
        <el-button class="dialog-btn" @click="closeDialog">{{$t('dialog.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="confirmSubmit"
          class="dialog-btn dialog-confirm-btn"
        >{{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "./mixin";
// import mallData from "@/components/Echarts/data";
import _ from "underscore";
let tableHeads = [];
/*******************************************************/
export default {
  mixins: [mixin],
  data() {
    return {
      keyList:[],
      keys:[],
      configBool:false,
      loading: true,
      listData: [],
      configObj: {},
      total: 0,
      pageArr: [10, 50, 100],
      pageSize: 10,
      page: 1,
      tableData: [],
      tableHead: [],
      action:false,
      pagination:false,
      storgeKey:'',
      mutiMallVal:[],
      mallSData:[],
      isMallSelAll:false
    };
  },
  created() {
    if(this.ckey=='floor_comparison'){
       this.action = true;
       this.pagination = false;
    }else if(this.ckey=='format_zone_ranking'){
       this.action = false;
       this.pagination = true;
    }else if(this.ckey=='zone_ranking'){
       this.action = true;
       this.pagination = true;
    }else if(this.ckey=='mall_ranking'){
       this.action = true;
       this.pagination = true;
    }
    this.storgeKey = this.ckey + '_itable';
  },
  mounted() {
    this.getMallsearchList()
  },
  methods: {
    getMallsearchList(){
      this.$api.base.bases("/malls", { status: 1, accountId: this.$cookie.get('accountId') }).then(res=>{
        this.mallSData = res.data.data;
      })
    },
    mallChangeHandle() {
      this.isMallSelAll = this.changeHandle(this.mutiMallVal, this.mallSData)
    },
    selAllHandle(selType, option) {
      let selectAll = 'is' + selType + 'SelAll';
      let selectVal = 'muti' + selType + 'Val';
      if (this[selectAll]) {
        this[selectAll] = false;
        this[selectVal] = [];
      } else {
        this[selectAll] = true;
        this[selectVal] = [];
        option.forEach(item => {
          this[selectVal].push(item.id);
        })
      }
    },
    searchMall(){
      this.loadChartData()
    },
    exportMall(){
        let condition = `accountIds=${this.params.accountIds}&localLanguage=${localStorage.getItem("lang")}&chartIds=${this.params.chartIds}&page=${this.params.page}&pageSize=${999999}&mallIds=${this.params.mallIds}&dateType=${this.params.dateType}&startDate=${this.params.startDate}&endDate=${this.params.endDate}&groupIds=${this.params.groupIds?this.params.groupIds:[]}&orgType=${this.params.orgType}&orgIds=${this.params.orgIds}&authorization=${this.$cookie.get("atoken")}`
        let url = `${window._vionConfig.apiUrl}/new/report/month/account/body/excel?${condition}`;
        console.log(url)
        window.open(this.dealUrl(url));
    },
    dialogBtn(){
       let sitem = localStorage.getItem(this.storgeKey);
       let keys = [],otherKey=[];
       let tHead = JSON.parse(JSON.stringify(tableHeads))
       this.keyList = _.map(tHead,item=>{
          if(!item.key){
            item.key = item.prop;
            item.disable = true;
            keys.push(item.key);
          }
          item.checked = true;
          return item;
       });
       if(sitem){
          sitem.split(',').forEach(key=>{
            let item = _.findWhere(this.keyList,{key});
            item.checked = false;
          })
       }
       this.configBool = true;
    },
    confirmSubmit(){
      let slist = _.filter(this.keyList,item=>{
          return !this.keys.includes(item.label)
      });
      localStorage.setItem(this.storgeKey,_.pluck(slist,'key').join(','));
      this.configBool = false;
      this.$message({ showClose: true, type: "success", message:'设置成功'});
      this.resetList();
    },
    closeDialog(){
       this.configBool = false;
    },
    getShowHead(tableHead){
      let sitem = localStorage.getItem(this.storgeKey);
      let tbHeads = [];
      if(sitem){
        let slist = sitem.split(',');
        tbHeads = _.filter(tableHead,item=>{
           return !item.key||!slist.includes(item.key);
        })
      }else{
        tbHeads = tableHead;
      }
      return tbHeads;
    },
    setChartConfig(params) {
      if(this.ckey == "mall_ranking"){
          this.getMallList().then((res) => {
            this.listData = res.data.data;
          });
      }
      if (this.ckey == "floor_comparison") {
          this.getFloorList().then((res) => {
            this.listData = res.data.data;
          });
      } else if (this.ckey == "format_comparison") {
          this.getFormatList().then((res) => {
            this.listData = res.data.data;
          });
      } else if (this.ckey == "zone_ranking") {
          this.getZoneList().then((res) => {
            this.listData = res.data.data;
          });
      }
    },
    dealHead(data) {
      let headData = (data.xaxis||{}).data||[];
      let tableData = data.series;
      let headKeys = {};
      headData.forEach((head, index) => {
        let headObj = JSON.parse(head);
        let type = headObj.type.toLowerCase();
        let key = headObj.key||'';
        let max = 0;
        tableData.forEach((item) => {
          let value = item.data[index];
          if (item.name == "summary") return;
          if (["integer", "percent", "time","double"].includes(type) && value > max) {
            max = value;
          }
        });
        headKeys[headObj.name] = {
          prop: key||("defaultOrg" + index),
          max,
          key,
          label: headObj.name,
          type: type,
        };
      });

      return Object.keys(headKeys).reduce((arr, key) => {
        arr.push(headKeys[key]);
        return arr;
      }, []);
    },
    buildTableContent(seriesData, headData) {
      let temp = {};
      const buildResult = [];
      const propList = headData.reduce((arr, item) => {
        if (item.children) {
          arr.push(...item.children.map((child) => child.prop));
        } else {
          arr.push(item.prop);
        }
        return arr;
      }, []);
      seriesData.forEach((item, index) => {
        temp = {};
        item.data.forEach((dataItem, dataIndex) => {
          const headProp = propList[dataIndex];
          temp[headProp] =
            typeof dataItem === "number" ? dataItem : dataItem || "--";
        });
        buildResult.push(temp);
      });
      return buildResult;
    },
    sortTable(sort) {
      let params = this.params;
      if(sort.order){
          params.sortKey = sort.prop;
          params.sortType = sort.order =='ascending'?'asc':'desc';
      }else{
        delete params.sortKey;
        delete params.sortType;
      }
      this.loadChartData(params);
    },
    detailBtn(row) {
      let item = _.findWhere(this.listData, { name: typeof row.defaultOrg0=='number'?row.defaultOrg1:row.defaultOrg0});
      if(item){
        this.$router.push({
          name:'ipageStatistics',
          params:{
            id:item.id
          }
        });
         // this.evtReport({ id:item.id,orgType:this.params.orgType=='account'?'mall':this.params.orgType});
      }else{
        this.$message({
          showClose: true,
          type: "error",
          message: '未查询到对应信息',
        });
      }

    },
    sizeChange(size) {
      this.page = 1;
      this.pageSize = size;
      this.loadChartData();
    },
    handleCurrentChange(page) {
      if (this.page != page) {
        this.page = page;
        this.loadChartData();
      }
    },
    orderFormatter(row, column, cellValue, index) {
      const { tableData, $t } = this;
      /*if (index === tableData.length - 1) {
                return $t('button.summary')
            } else {
                return index + 1
            }*/
      return index + 1;
    },
    loadChartData(params) {
      this.chartId = this.getChartId(this.ckey);
      this.loading = true;
      if (this.pagination) {
        if (params) {
          this.page = 1;
          // this.pageSize = this.pageArr[0];
        }
        this.params.page = this.page;
        this.params.pageSize = this.pageSize;
      }
      if (this.chartId) {
        if(this.mutiMallVal && this.mutiMallVal.length>0){
          this.params.mallIds = this.mutiMallVal.toString()
        }else{
          if(this.params.orgType=='account'){
            this.params.mallIds = ''
          }else{
            this.params.mallIds = this.$cookie.get('mallId')
          }
        }
        this.ajaxModuleData(this.params).then((data) => {
          this.setChartData(data);
        });
      } else {
        this.setChartData();
      }
    },
    setChartData(tabData) {
      this.loading = false;
      if(_.isEmpty(tabData)){
          this.tableHead = [];
          this.tableData=[];
          return ;
      }
      if (this.pagination) this.total = tabData.pageTotal;
      this.chartData = tabData;
      tableHeads = this.dealHead(tabData)
      this.resetList();
    },
    resetList(){
      let headList = this.getShowHead(tableHeads);
      this.tableData = this.buildTableContent(this.chartData.series, tableHeads);
      this.tableHead = headList;
    },
  },
};
</script>

<style  lang="less">
    @import url('../css/public.css');
.ipage-pagination {
  position: relative;
  padding: 20px 0 10px;
  text-align: right;
}
</style>