<template> <div class="STBbase-wrapper height100"> <div class="search-container"> <el-form :inline="true" :model="form"> <el-form-item> <el-select v-model="form.orgId" placeholder="请选择所属单位"> <el-option v-for="item in orgOptions" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item> <el-cascader v-model="form.areaId" :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 > </div> </div> <div class="table-content"> <div class="btn-group"> <el-button type="primary" @click="addBox">新建机顶盒账号</el-button> </div> <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> <el-table-column label="MAC地址" prop="mac"></el-table-column> <el-table-column label="所属单位" prop="organName"></el-table-column> </el-table> </div> <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> </div> <custom-dialog ref="formItem" @refreshFn="onSearch" /> </div> </template> <script> import { partyPagination } from "@/components/index"; import customDialog from "./components/dialog.vue"; import { getAreas } from "@/config/area.js"; import { getOrgListWithOutPage } from "@/config/organ.js"; export default { components: { partyPagination, customDialog }, data() { return { page: { currentPage: 1, pageSize: 10, total: 0 }, orgOptions: [], // 单位信息 areaOptions: [], //区域信息 defaultProps: { label: "name", value: "id", checkStrictly: true, }, form: { orgId: "", areaId: [], }, tableData: [], // 表格信息 }; }, mounted() { this.getAreas(); this.onSearch(); this.getOrgList(); }, methods: { // 获取单位信息 async getOrgList() { this.orgOptions = await getOrgListWithOutPage() }, // 获取区域信息 async getAreas() { this.areaOptions = await getAreas() }, // 查询 onSearch() { this.page.currentPage = 1 this.getTableData() }, // 获得数据接口 getTableData() { let vm = this; let param = { _index: this.page.currentPage, _size: this.page.pageSize, areaId: this.form.areaId.length ? this.form.areaId[this.form.areaId.length - 1] : '', organId: this.form.orgId }; vm.$https( { url: "boxOperation/selectPageList", method: "post", authType: this.backToken, }, vm.$qs.stringify(param) ) .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) } }) .catch(function (err) { console.log(err) }); }, // 新增弹框打开 addBox() { this.$refs.formItem.backFn(this.orgOptions); }, // 重置 handleReset() { this.form = { orgId: "", areaId: [], }; this.onSearch(); }, // 分页 handleCurrentChange(val) { this.page.currentPage = val; this.getTableData(); }, }, }; </script> <style lang="less"> @import "~@/style/table.less"; @import "~@/style/pagination.less"; </style>