flyLong/pc/src/views/region2.vue

<template>
  <div class="context">
    <div class="panel">
      <h5>区域管理</h5>
      <el-button id="queryBtn" type="success" @click="query()" :disabled="serachBtnStatus">刷新</el-button>
      <div class="pages">
        <div class="shops" v-for="s in 2">
          <h5>  小飞龙蒙正店</h5>
          <div class="change">
            <el-button type="primary" @click="">新增区域</el-button>
            <el-button @click="" >编辑区域</el-button>
            <el-button @click="" type="danger">删除区域</el-button>
          </div>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="序列号"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="类型"
            >
            </el-table-column>
            <el-table-column
                prop="date"
                label="创建日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="状态"
            >
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
              <template slot-scope="scope">
                <el-button type="success" @click="run(scope.row.id)" v-if="state != 4">开启</el-button>
                <el-button type="danger" @click="pause(scope.row.id)">暂停</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <br>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Global from '../Global.js'
import {
  testTable,
  testSelect
} from "../api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      tableData:[],
      serachBtnStatus:true
    }
  },
  mounted() {
    this.getTableQuery();
  },
  methods: {
    // 查询按钮
    query() {
      let that = this;
      this.getTableQuery();
      that.serachBtnStatus = true;
      let totalTime = 2
      let clock = window.setInterval(() => {
        totalTime--
        if (totalTime < 0) {
          totalTime = 2;
          that.serachBtnStatus = false;
        }
      }, 1000)
      this.$message.success('查询完毕');
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
      };
      let postdata = qs.stringify(param);
      testTable(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            that.tableData = json.Rs;
          } else {
            that.tableData = [];
          }
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
  }
}
</script>

<style scoped>
@import "../assets/css/panel.css";
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.context {
  height: 770px;
  overflow-y: scroll;
  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  padding: 30px;
}

.panel-body {
  padding: 20px;
  background: #F0F2F5;
}

.pages {
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-bottom: 80px;
}
.change {
  float: right;
}
#queryBtn {
  float: right;
}
</style>