index.vue

<template>
  <div class="bloc-wrapper manage-container">

    <el-row class="manage-head-wrapper">
      <el-col :span="24">
        <div class="manage-input-box">
          <el-select v-model="mallVal" class="mall-opt" filterable clearable :placeholder="$t('pholder.shopSelect')"
            @change="chooseMall(mallVal)">
            <!-- <el-option :label="$t('pholder.all')" value='-1' /> -->
            <el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
          </el-select>
        </div>
        <!-- 店铺 -->
        <div class="manage-input-box">
          <el-select v-model="zoneId" class="mall-opt" filterable clearable :placeholder="$t('pholder.zoneSelect')" @change="chooseShop(zoneId)">
            <el-option :label="$t('pholder.all')" value='0' />
            <el-option v-for="item in shopOpt" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </div>
        <el-button type="primary" class="search-btn" @click="searchFun">{{$t('button.search')}}</el-button>
        <el-button type="primary" @click="addHandle" class="manage-add-btn" icon="el-icon-circle-plus-outline">广场店铺配置</el-button>
        <el-button type="primary" @click="addHandleAccount" class="manage-add-btn" icon="el-icon-circle-plus-outline">集团配置</el-button>
      </el-col>
    </el-row>
    <el-row class="manage-head" v-if="accountTableData.length>0">
      <p>当前集团停留时间配置：<span style="color: #3bb8ff;font-size: 24px;font-weight: 900;">{{accountTableData[0].config}}</span></p>
        <!-- <span v-for="(item,index) in accountTableData" :key="index">
          <span v-if="(index+1)<accountTableData.length">
            {{item}}————{{accountTableData[index+1]}}
          </span>
        </span> -->
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table :data="tableData" :max-height="tableHeight" style="width: 100%"
          header-row-class-name="manage-tab-head">
          <el-table-column prop="tabOrder" align="center" :label="$t('table.order')" width="100"></el-table-column>
          <el-table-column prop="mallId" align="center" label="广场">
            <template slot-scope="scope">
             {{mallFormatter(scope.row.mallId)}}
            </template>
          </el-table-column>
          <el-table-column prop="zoneId" align="center" label="店铺">
            <template slot-scope="scope">
             <span v-if="scope.row.zoneId>0">{{zoneFormatter(scope.row.zoneId)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="config" align="center" label="配置"></el-table-column>
          <el-table-column :label="$t('table.operate')" align="center" width="180">
            <template slot-scope="scope">
              <el-button @click="editRow(scope.row)" type="text" size="small" class="tab-btn">{{$t('button.edit')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="manage-pagination" background :current-page="currentPage" :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize" @size-change="sizeChange" @current-change="currentChange"
          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>
    <add-dialog ref="addRef"></add-dialog>
  </div>
</template>

<script>
  import addDialog from "./add";
  export default {
    components: {
      "add-dialog": addDialog
    },
    data() {
      return {
        mallVal: '',
        mallOpt: [],
        zoneId: '',
        shopOpt: [],
        tableData: [],
        accountTableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
      };
    },
    computed: {
      tableHeight() {
        const windowInnerHeight = window.innerHeight;
        return windowInnerHeight - windowInnerHeight * 0.24;
      }
    },
    mounted() {
      this.getAccountData();
      this.getTableData();
      this.getMallList()
    },
    methods: {
      mallFormatter(cellValue) {
        const formaterVal = this.mallOpt.find(item => item.id === cellValue)
        return formaterVal && formaterVal.name || '--'
      },
      zoneFormatter(cellValue) {
        const formaterVal = this.shopOpt.find(item => item.id === cellValue)
        return formaterVal && formaterVal.name || '--'
      },
      getMallList() {
        this.mallOpt = [];
        this.$api.base.mall({
            accountId: this.$cookie.get("accountId"),
            status_arr: '1,3'
          }, null, true)
          .then(res => {
            let result = res.data.data;
            if (result.length > 0) {
              this.mallOpt = result;
            }
          })
      },
      chooseMall(mallId) {
        this.zoneId = ''
        this.getShopList()
      },
      getShopList(val){
        let _mallId = this.mallVal || null;
        var tabelParams = {
          accountId: this.$cookie.get("accountId"),
          mallId: this.mallVal,
          floorId: null,
          sortName: 'floor.name, zone.name',
          status:1
        };
        this.$api.base
          .zone(tabelParams, null, true)
          .then(data => {
            this.shopOpt = [];
            let result = data.data;
            this.shopOpt = result.data
          })
      },
      chooseShop(){
        this.getTableData()
      },
      getAccountData(){
        this.accountTableData = []
        this.$api.management.getStayTimeConfigList({
          accountId:this.$cookie.get("accountId"),
          mallId:'-1',
          zoneId:'-1'
        }).then(data => {
            const result = data.data;
            this.accountTableData = result.data.list;
            console.log(this.accountTableData)
          })
      },
      getTableData(name, pid) {
        this.tableData = [];
        let tabelParams = {
          accountId:this.$cookie.get("accountId"),
          mallId:this.mallVal?this.mallVal:'',
          zoneId:this.zoneId?(this.zoneId=='0'?'':this.zoneId):(this.mallVal?'-1':'-1')
        };
        Object.keys(tabelParams).map(key => (!tabelParams[key] ? delete tabelParams[key] : ''));
        this.$api.management.getStayTimeConfigList(tabelParams)
          .then(data => {
            const result = data.data;
            result.data.list.forEach((item, index) => {
              item.tabOrder = (this.currentPage - 1) * this.pageSize + index + 1
            })
            this.tableData = result.data.list;
            this.total = result.data.total
          });
      },
      // 切换每页
      sizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1
        this.getTableData()
      },
      // 切换分页
      currentChange(val) {
        this.currentPage = val;
        this.getTableData()
      },
      // 新增
      addHandle() {
        this.$refs.addRef.dialogInit('add');
      },
      // 新增集团配置
      addHandleAccount(){
        console.log(this.accountTableData.length)
        if(this.accountTableData.length>0){
          this.$refs.addRef.dialogInit('edit',this.accountTableData[0],'account');
        }else{
          this.$refs.addRef.dialogInit('add','','account');
        }
      },
      //点击编辑弹框
      editRow(row) {
        let str = JSON.parse(JSON.stringify(row));
        this.$refs.addRef.dialogInit('edit', str);
      },
      // 搜索
      searchFun() {
        this.currentPage = 1;
        this.pageSize = 10;
        this.getTableData()
      }
    }
  };
</script>

<style scoped>
  .bloc-wrapper {
    width: 100%;
    height: 100%;
    font-size: 13px;
  }
  .manage-pagination{
    float:right;
    margin-top: 15px;
    margin-right: 15px;
  }
  .manage-head{
    padding: 0 0 15px 15px;
  }
</style>