index.vue 4.44 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 16
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
qzhxx's avatar
qzhxx committed
17
            v-model="form.areaId"
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
            :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>
        <span class="page-tips">可按照账号状态及所属单位进行信息筛选。可新增机顶盒账号,“*”为必填项。请先创建单位管理员账号,否则机顶盒无法激活</span>
33
      </div>
34 35 36 37
    </div>
    <div class="table-content">
      <div class="btn-group">
        <el-button type="primary" @click="addBox">新建机顶盒账号</el-button>
38
      </div>
39 40 41
      <div class="party-table">
        <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
42 43
          <el-table-column label="MAC地址" prop="mac"></el-table-column>
          <el-table-column label="所属单位" prop="organName"></el-table-column>
44 45
        </el-table>
      </div>
qzhxx's avatar
qzhxx committed
46 47 48 49 50 51 52 53 54 55
      <div class="partyt-pagination" style="margin:0 20px;">
        <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>
56 57
    </div>
    <custom-dialog ref="formItem" @refreshFn="onSearch" />
58 59 60
  </div>
</template>
<script>
61 62 63
import { partyPagination } from "@/components/index";
import customDialog from "./components/dialog.vue";
import { getAreas } from "@/config/area.js";
qzhxx's avatar
qzhxx committed
64
import { getOrgListWithOutPage } from "@/config/organ.js";
65
export default {
66 67 68 69 70 71 72 73 74 75
  components: { partyPagination, customDialog },
  data() {
    return {
      page: { currentPage: 1, pageSize: 10, total: 0 },
      areaOptions: [],
      defaultProps: {
        label: "name",
        value: "id",
        checkStrictly: true
      },
qzhxx's avatar
qzhxx committed
76
      orgOptions: [],
77
      form: {
qzhxx's avatar
qzhxx committed
78 79
        orgId: "",
        areaId: []
80
      },
qzhxx's avatar
qzhxx committed
81
      tableData: []
82 83 84 85 86
    };
  },

  mounted() {
    this.getAreas();
qzhxx's avatar
qzhxx committed
87 88
    this.onSearch();
    this.getOrgList();
89 90
  },
  methods: {
qzhxx's avatar
qzhxx committed
91 92 93 94 95 96
    getOrgList(){
      getOrgListWithOutPage().then(res => {
        console.log(res)
        this.orgOptions = res;
      });
    },
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
    getAreas() {
      getAreas().then(res => {
        this.areaOptions = res;
      });
    },
    // 查询
    onSearch() {
      this.page.currentPage = 1;
      this.getTableData();
    },
    // 获得数据接口
    getTableData() {
      let vm = this;
      let param = {
        _index: this.page.currentPage,
        _size: this.page.pageSize,
qzhxx's avatar
qzhxx committed
113 114
        areaId: this.form.areaId[this.form.areaId.length-1],
        organId: this.form.orgId,
115 116 117
      };
      vm.$https(
        {
qzhxx's avatar
qzhxx committed
118
          url: "boxOperation/selectPageList",
119 120 121 122 123 124
          method: "post",
          authType: this.backToken
        },
        vm.$qs.stringify(param)
      )
        .then(res => {
qzhxx's avatar
qzhxx committed
125 126
          console.log(res.data.data);
          let data = res.data.data;
127
          vm.page.total = data.total;
qzhxx's avatar
qzhxx committed
128
          vm.tableData = data.records;
129 130 131 132 133 134 135 136
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 新增弹框打开
    addBox() {
      console.log(this.$refs.formItem);
qzhxx's avatar
qzhxx committed
137
      this.$refs.formItem.backFn(this.orgOptions);
138 139
    },
    handleReset() {
qzhxx's avatar
qzhxx committed
140 141 142 143 144
      this.form = {
        orgId: "",
        areaId: []
      };
      this.onSearch()
145 146 147 148 149
    },
    // 分页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
150
    }
151 152
  }
};
153 154 155
</script>
<style lang="less">
@import "../../../style/dialog.less";
156 157
@import "../../../style/table.less";
@import "../../../style/pagination.less";
158
</style>