<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" >机顶盒账号为机顶盒所属单位名称,新建后生成6位数字及字母的随机密码,作为机顶盒的登录密码。</span > </div> </div> <div class="table-content"> <div class="btn-group"> <el-button type="primary" @click="addBox">新建机顶盒账号</el-button> </div> <party-table :currentPage="page._index" :feildList="feildList" :list="tableData"/> <party-pagination :page="page" @changePage="handleCurrentChange"/> </div> <custom-dialog ref="formItem" @refreshFn="onSearch" /> </div> </template> <script> import { partyPagination,partyTable} 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,partyTable }, data() { return { page: { _index: 1, _size: 10, total: 0 }, feildList: [ { prop: "mac", label: "MAC地址" }, { prop: "organName", label: "所属单位" } ], 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._index = 1 this.getTableData() }, // 获得数据接口 getTableData() { let vm = this; let param = { _index: this.page._index, _size: this.page._size, 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._index = val; this.getTableData(); }, }, }; </script> <style lang="less"> @import "~@/style/table.less"; </style>