list.vue

<template xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
  <div class="container-fluid">
    <div class="page page-order-time">
      <div class="page-breadcrumb">
        <ol class="breadcrumb">
          <li><a>场馆管理</a></li>
        </ol>
      </div>
      <div class="page-body">
        <div class="main">
          <div class="tab-content">
            <!--商品库存-->
            <div role="tabpanel" class="tab-pane active pt-4 pb-4" id="tab-mem-record">
              <el-form ref="form" :model="form" label-width="50">
                <el-select v-model="form.storeId" filterable placeholder="商家" :maxlength="10"
                           style="margin-left: 20px;">
                  <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="form.sportsType" filterable placeholder="场馆类型" :maxlength="10"
                           style="margin-left: 40px;">
                  <el-option v-for="item in sportsTypeList" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="form.hasAirConditioning" filterable placeholder="空调" :maxlength="10"
                           style="margin-left: 40px;">
                  <el-option v-for="item in hasAirConditioningList" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="form.status" filterable placeholder="场馆状态" :maxlength="10"
                           style="margin-left: 20px;">
                  <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-input v-model="form.keyword" placeholder="搜索场馆" :maxlength="10"
                          style="width: 170px;margin-left: 20px;"></el-input>
                <span class="mem-form">
                  <button @click.prevent="submitForm()" class="btn btn-default">查询</button>
                  <button @click.prevent="resetForm()" class="btn btn-default">重置</button>
                </span>
              </el-form>
              <table class="table table-striped table-hover table-record mb-77" align="center" border="0">
                <thead>
                <tr>
                  <th>场馆名称</th>
                  <th>运动类型</th>
                  <th>空调</th>
                  <th>经度</th>
                  <th>纬度</th>
                  <th>联系电话</th>
                  <th>营业时间</th>
                  <th>场馆状态</th>
                  <th>人气</th>
                  <th>收藏</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in pageList.list">
                  <td>{{item.name}}</td>
                  <td>{{item.sportsType | getSportsType}}</td>
                  <td v-if="item.hasAirConditioning==true">是</td>
                  <td v-else>否</td>
                  <td>{{item.longitude}}</td>
                  <td>{{item.latitude}}</td>
                  <td>{{item.phone}}</td>
                  <td  v-html="getJson(item.businessTime)"></td>
                  <td>{{item.status | getStatus}}</td>
                  <td>{{item.viewCount}}</td>
                  <td>{{item.collectCount}}</td>
                  <td>
                    <router-link v-bind:to="'/venues/detail/'+ item.id" class="js-do">查看</router-link>
                    <a class="js-do" @click="startVenues(item.id)" v-if="item.status==0">停业</a>
                    <a class="js-do" @click="startVenues(item.id)" v-else>开业</a>
                  </td>
                </tr>
                </tbody>
              </table>
              <pagination size="md"
                          :total-rows="pageList.totalRecord"
                          :per-page="pageList.pageSize"
                          v-model="currentPage">
              </pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import pagination from "@/components/bootstrap/pagination"
  import breadcrumb from "@/components/bootstrap/breadcrumb"

  export default {
    data() {
      return {
          data:{},
        form: {
          keyword: '',
          hasAirConditioning: '',
          status: '',
          storeId: '',
          sportsType: '',
        },
        pageList: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list: [],
        },
        currentPage: 0,
        hasAirConditioningList: hasAirConditioningList,
        statusList: statusList,
        storeList: [],
        sportsTypeList: sportsTypeList,
      }
    },
    components: {
      pagination: pagination,
      breadcrumb: breadcrumb,
    },
    created: function () {
      this.getDataList();
      this.getStoreList();
    },
    mounted: function () {

    },
    updated: function () {
    },
    destroyed: function () {
    },
    filters: {
      getStatus: function (value) {
        switch (value) {
          case 1:
            value = "停业"
            break;
          case 2:
            value = "未开业"
            break;
          default:
            value = "营业中"
            break;
        }
        return value;
      },
      getSportsType: function (value) {
        if (value.length > 0) {
          var arry = new Array();
          $.each(value.split(","), function (indx, obj) {
            var type;
            switch (obj) {
              case "1":
                type = "篮球"
                break;
              case "2":
                type = "羽毛球"
                break;
              case "3":
                type = "足球"
                break;
              case"4":
                type = "网球"
                break;
              default:
                type = "排球"
                break;
            }
            arry.push(type)
          });
          return arry.join(',');
        } else {
          return "暂无数据";
        }
      },
    },
    methods: {
      getStoreList() {
        var self = this;
        self.ajax({
          url: api.storeManage.list.url,
          success: function (res) {
            self.storeList = res.data.list;

          }
        });
      },
      //处理  营业时间
      getJson: function (value) {
        var dataOne = JSON.parse(value)[0];
        var dataTwo = JSON.parse(value)[1];
        var weekOne = [];
        weekOne.push(dataOne.week[0]);
        weekOne.push(dataOne.week[dataOne.week.length - 1]);
        var arry = new Array();
        var weekTwo = [];
        weekTwo.push(dataTwo.week[0]);
        weekTwo.push(dataTwo.week[dataTwo.week.length - 1]);
        var arryTwo = new Array();
        $.each(weekOne, function (indx, obj) {
          var type;
          switch (obj) {
            case 1:
              type = "周一"
              break;
            case 2:
              type = "周二"
              break;
            case 3:
              type = "周三"
              break;
            case 4:
              type = "周四"
              break;
            case 5:
              type = "周五"
              break;
            case 6:
              type = "周六"
              break;
            default:
              type = "周日"
              break;
          }
          arry.push(type)
        });
        $.each(weekTwo, function (indx, obj) {
          var type;
          switch (obj) {
            case 1:
              type = "周一"
              break;
            case 2:
              type = "周二"
              break;
            case 3:
              type = "周三"
              break;
            case 4:
              type = "周四"
              break;
            case 5:
              type = "周五"
              break;
            case 6:
              type = "周六"
              break;
            default:
              type = "周日"
              break;
          }
          arryTwo.push(type)
        });
        var html = "<p>" + arry.join('至') + dataOne.startTime + "--" + dataOne.endTime + "</p>" + "<br>" + "<p>" +
          arryTwo.join('至') + dataTwo.startTime + "--" + dataTwo.endTime + "</p>";
        return html;
      },
      getDataList(data) {
        var self = this;
        self.ajax({
          type: 'GET',
          url: api.venues.list.url,
          data: data,
          success: function (res) {
            self.pageList = res.data;
            self.currentPage = res.data.pageIndex;
          }
        });
      },
      //改变状态
      startVenues(id) {
        var self = this;
        self.ajax({
          type: 'POST',
          url: api.venues.start.url + "/" + id,
          success: function (res) {
            self.$message({
              type: 'success',
              message: res.message
            });
            self.getDataList();
          }
        });
      },
      //搜索
      submitForm() {
        var self = this;
        self.data = {
          keyword: self.form.keyword,
          hasAirConditioning: self.form.hasAirConditioning,
          status: self.form.status,
          storeId: self.form.storeId,
          sportsType: self.form.sportsType,
        };
        self.getDataList(self.data );
      },
      //重置
      resetForm() {
        var self = this;
        self.form.keyword = "";
        self.form.hasAirConditioning = "";
        self.form.status = "";
        self.form.storeId = "";
        self.form.sportsType = "";
      }
    },
    watch: {
      currentPage: function (newData) {
        var self = this;
        self.data.pageIndex =newData;
        self.getDataList(self.data);
      },
    }
  }
</script>