list.vue

<!-- 主内容 -->
<template>
  <div class="container-fluid">
    <div class="page page-order-time">
      <div class="page-breadcrumb">
        <ol class="breadcrumb">
          <li class="active">商家管理</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.cycle" filterable placeholder="结算周期"    style="margin-left: 20px;" >
                    <el-option v-for="item in storeCycle" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>

                  <el-input type="text" class="" filterable placeholder="商家名称" v-model="form.name"   style="width: 170px;margin-left: 20px;"></el-input>

                <span class="mem-form">
                <button  type="submit" class="btn btn-default"  @click.prevent="search('form')" style="margin-left: 20px;">查询</button>
                <button  type="reset" class="btn btn-default"  @click.prevent="resetForm()" style="margin-left: 20px;">重置</button>
                <button   @click.prevent="createForm()" class="btn btn-default" style="margin-left: 350px;width: 80px;">添加</button>
                </span>
              </el-form>
              <table class="table table-striped table-hover table-record mb-77" align="center" border="0">
                <thead>
                <tr>
                  <th>商家ID</th>
                  <th>商家名称</th>
                  <th>公司全称</th>
                  <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.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.company}}</td>
                  <td>{{item.address}}</td>
                  <td>{{item.contact}}</td>
                  <td>{{item.contactPhone}}</td>
                  <td>{{item.dutyParagraph}}</td>
                  <td>{{item.bank}}</td>
                  <td>{{item.bankAccount}}</td>
                  <td>{{item.subscribeDay}}</td>
                  <td>{{item.cycle}}</td>
                  <td>{{item.venuesNumber}}</td>
                  <td>{{item.locked==1?"禁用":"启用"}}</td>
                  <td>
                    <router-link v-bind:to="'/store/get/'+item.id" class="js-do">查看</router-link>&nbsp;&nbsp;
                    <span v-if="item.locked==1"><a class="js-do" href="javascript:" @click="enable(item.id)">启用</a>&nbsp;&nbsp;</span>
                    <span v-if="item.locked==0">
                      <a class="js-do" href="javascript:" @click="disable(item.id)"  >禁用</a>&nbsp;&nbsp;
                    </span>
                    <router-link v-bind:to="'/store/update/'+item.id" class="js-do">编辑</router-link>&nbsp;&nbsp;

                  </td>
                </tr>


                </tbody>
              </table>
              <pagination size="md"
                          :total-rows="pageList.totalRecord"
                          :per-page="pageList.pageSize"
                          v-model="currentIndex">
                >
              </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 {
        form:{
          name:'',
          cycle:'',
        },
        pageList: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list: [],
        },
        currentIndex: 1,
        storeCycle:storeCycle,
      }
    },
    components: {
      pagination: pagination,
      breadcrumb: breadcrumb,
    },
    created: function () {

    },
    mounted: function () {
      this.getList();
    },
    updated: function () {
    },
    destroyed: function () {
    },

    methods: {
      getList:function(data) {
        let self=this;
        self.ajax({
          url:api.storeManage.list.url,
          data:data,
          success:function(res) {
            self.pageList= res.data;
            self.currentIndex = res.data.pageIndex;
          }
        });
      },

      // 筛选
      search(data) {
        var self=this;
         var data= {
               name:self.form.name,
               cycle:self.form.cycle
         }
        this.getList(data);
      },
      //重置
      resetForm(){
          var self=this;
          self.form.name="",
          self.form.cycle=""
      },
      //启用商家
      enable(id) {
        let self=this;
        this.$confirm('是否要返回列表页, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.ajax({
            type:"GET",
            url:api.storeManage.enable.url(id),
            success:function (res) {
              self.$message({
                message: res.message,
                duration:2000,
                onClose:(function () {
                  self.getList();
                })
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });




      },
      //禁用商家
      disable(id) {
          console.log(id);
        let self=this;
        this.$confirm('是否要返回列表页, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.ajax({
              type:"GET",
          url:api.storeManage.disable.url(id),
          success:function (res) {
            self.$message({
              message: res.message,
              duration:2000,
              onClose:(function () {
                self.getList();
              })
            });
          }
        });
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

      },
      close() {
        let self=this;
        this.$confirm('是否要返回列表页, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$router.push('/store/list');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      createForm(){
        var self=this;
        self.$router.push('/store/save');
      },
    },

    watch: {
      currentIndex: function (newIndex) {
        let self = this;
        let query = {
          pageIndex: newIndex
        };
        self.search(query);
      }
    },
  }
</script>