index.vue 5.24 KB
Newer Older
1 2
<template>
  <div class="STBbase-wrapper height100">
3 4 5
    <div class="search-container">
      <el-form :inline="true" :model="form">
        <el-form-item>
qzhxx's avatar
qzhxx committed
6
          <el-select v-model="form.orgId" placeholder="请选择所属单位">
7
            <el-option
qzhxx's avatar
qzhxx committed
8 9 10 11
              v-for="item in orgOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
12 13 14 15
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
qzhxx's avatar
qzhxx committed
16
          <el-select v-model="form.status" placeholder="请选择机顶盒状态">
17
            <el-option
qzhxx's avatar
qzhxx committed
18
              v-for="item in statusOptions"
19 20 21 22 23 24 25 26
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
qzhxx's avatar
qzhxx committed
27
            v-model="form.areaId"
28 29 30 31 32 33 34 35 36 37 38 39 40 41
            :options="areaOptions"
            :props="defaultProps"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <div class="btn-group">
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="page-tip">
        <span class="page-tip-title">页面说明:</span>
乐宝呗666's avatar
乐宝呗666 committed
42 43 44
        <span class="page-tips"
          >可按照机顶盒状态及所属单位进行信息筛选。可查看当前系统所有机顶盒运维状态信息。</span
        >
45
      </div>
46 47 48
    </div>
    <div class="table-content">
      <div class="party-table">
乐宝呗666's avatar
乐宝呗666 committed
49 50 51 52 53 54 55 56 57 58 59
        <el-table
          border
          style="width: 100%; height: 100%"
          height="100%"
          :data="tableData"
        >
          <el-table-column
            type="index"
            width="120"
            label="序号"
          ></el-table-column>
qzhxx's avatar
qzhxx committed
60 61 62 63
          <el-table-column label="mac地址" prop="mac"></el-table-column>
          <el-table-column label="所属单位" prop="organName"></el-table-column>
          <el-table-column label="机顶盒状态" prop="status">
            <template slot-scope="scope">
乐宝呗666's avatar
乐宝呗666 committed
64 65 66
              <span v-if="scope.row.status === 1">待激活</span>
              <span v-if="scope.row.status === 2">已激活</span>
              <span v-if="scope.row.status === 3">故障</span>
qzhxx's avatar
qzhxx committed
67 68
            </template>
          </el-table-column>
69
        </el-table>
70
      </div>
乐宝呗666's avatar
乐宝呗666 committed
71
      <div class="partyt-pagination" style="margin: 0 20px">
qzhxx's avatar
qzhxx committed
72 73 74 75 76 77 78 79 80
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
81
    </div>
82 83 84
  </div>
</template>
<script>
85
import { getAreas } from "@/config/area.js";
qzhxx's avatar
qzhxx committed
86
import { getOrgListWithOutPage } from "@/config/organ.js";
87
export default {
88 89
  data() {
    return {
乐宝呗666's avatar
乐宝呗666 committed
90 91 92 93 94 95 96
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      orgOptions: [], // 单位信息
      areaOptions: [], // 区域信息
97 98 99 100 101
      defaultProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
      },
qzhxx's avatar
qzhxx committed
102
      statusOptions: [
乐宝呗666's avatar
乐宝呗666 committed
103
        // 状态信息
104 105
        {
          value: "1",
乐宝呗666's avatar
乐宝呗666 committed
106
          label: "待激活",
107 108 109
        },
        {
          value: "2",
乐宝呗666's avatar
乐宝呗666 committed
110
          label: "已激活",
111 112 113
        },
        {
          value: "3",
乐宝呗666's avatar
乐宝呗666 committed
114 115
          label: "故障",
        },
116 117
      ],
      form: {
qzhxx's avatar
qzhxx committed
118 119
        orgId: "",
        status: "",
乐宝呗666's avatar
乐宝呗666 committed
120
        areaId: [],
121
      },
乐宝呗666's avatar
乐宝呗666 committed
122
      tableData: [], // 表格信息
123 124 125 126
    };
  },
  mounted() {
    this.getAreas();
乐宝呗666's avatar
乐宝呗666 committed
127
    this.getOrgList();
qzhxx's avatar
qzhxx committed
128
    this.onSearch();
129 130
  },
  methods: {
乐宝呗666's avatar
乐宝呗666 committed
131 132 133
    // 获取区域信息
    async getAreas() {
      this.areaOptions = await getAreas();
134
    },
乐宝呗666's avatar
乐宝呗666 committed
135 136 137
    // 获取单位信息
    async getOrgList() {
      this.orgOptions = await getOrgListWithOutPage();
qzhxx's avatar
qzhxx committed
138
    },
139 140 141 142
    // 查询
    onSearch() {
      this.page.currentPage = 1;
      this.getTableData();
143
    },
144 145 146 147 148 149
    // 获得数据接口
    getTableData() {
      let vm = this;
      let param = {
        _index: this.page.currentPage,
        _size: this.page.pageSize,
乐宝呗666's avatar
乐宝呗666 committed
150 151 152
        areaId: this.form.areaId.length
          ? this.form.areaId[this.form.areaId.length - 1]
          : "",
qzhxx's avatar
qzhxx committed
153 154
        organId: this.form.orgId,
        status: this.form.status,
155 156 157
      };
      vm.$https(
        {
qzhxx's avatar
qzhxx committed
158
          url: "boxOperation/getPageList",
159
          method: "post",
乐宝呗666's avatar
乐宝呗666 committed
160
          authType: this.backToken,
161
        },
162 163
        vm.$qs.stringify(param)
      )
乐宝呗666's avatar
乐宝呗666 committed
164 165 166 167 168 169 170 171
        .then((res) => {
          if (res.data.resultCode === "200") {
            let data = res.data.data;
            vm.page.total = data.total;
            vm.tableData = data.records;
          } else {
            this.$message.error(res.data.message);
          }
172
        })
乐宝呗666's avatar
乐宝呗666 committed
173
        .catch(function (err) {
174 175 176
          console.log(err);
        });
    },
乐宝呗666's avatar
乐宝呗666 committed
177
    // 重置
178
    handleReset() {
qzhxx's avatar
qzhxx committed
179 180 181
      this.form = {
        orgId: "",
        status: "",
乐宝呗666's avatar
乐宝呗666 committed
182
        areaId: [],
qzhxx's avatar
qzhxx committed
183
      };
乐宝呗666's avatar
乐宝呗666 committed
184
      this.onSearch();
185 186 187 188 189
    },
    // 分页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
乐宝呗666's avatar
乐宝呗666 committed
190 191
    },
  },
192
};
193 194
</script>
<style lang="less">
乐宝呗666's avatar
乐宝呗666 committed
195 196
@import "~@/style/table.less";
@import "~@/style/pagination.less";
197
</style>