| | |
| | | </el-form> |
| | | </div> |
| | | <div class="table_box"> |
| | | <el-table :data="tableData" stripe style="width: 100%" height="99%"> |
| | | <el-table :data="BTableData" stripe style="width: 100%" height="85%"> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | |
| | | width="70px" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="serviceName" |
| | | :label="$t('operatManage.BWL.serviceName')" |
| | | prop="ip" |
| | | :label="$t('operatManage.BWL.whiteListIP')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="accessSourceSystem" |
| | | :label="$t('operatManage.BWL.accessSourceSystem')" |
| | | prop="visit" |
| | | :label="$t('operatManage.BWL.PageView')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="IPRequest" |
| | | :label="$t('operatManage.BWL.IPRequest')" |
| | | prop="descr" |
| | | :label="$t('operatManage.BWL.description')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="servicesRequestUrl" |
| | | :label="$t('operatManage.BWL.servicesRequestUrl')" |
| | | /> |
| | | |
| | | <el-table-column |
| | | align="center" |
| | | prop="resourceIDRequest" |
| | | :label="$t('operatManage.BWL.resourceIDRequest')" |
| | | prop="createUser" |
| | | :label="$t('operatManage.BWL.creator')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="serviceSystemRequest" |
| | | :label="$t('operatManage.BWL.serviceSystemRequest')" |
| | | :formatter="formatData" |
| | | prop="createTime" |
| | | :label="$t('operatManage.BWL.creationTime')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="blackListStatus" |
| | | :label="$t('operatManage.BWL.blackListStatus')" |
| | | prop="updateUser" |
| | | :label="$t('operatManage.BWL.update')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="operate" |
| | | :label="$t('operatManage.BWL.operate')" |
| | | :formatter="formatData" |
| | | prop="updateTime" |
| | | :label="$t('operatManage.BWL.UpdateTime')" |
| | | /> |
| | | </el-table> |
| | | <div style="margin-top: 40px" class="pagination_box"> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage" |
| | | @size-change="BhandleSizeChange" |
| | | @current-change="BhandleCurrentChange" |
| | | :current-page="BListData.pageIndex" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-size="10" |
| | | :page-size="BListData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="0" |
| | | :total="Bcount" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | |
| | | </el-form> |
| | | </div> |
| | | <div class="table_box"> |
| | | <el-table :data="tableData" stripe style="width: 100%" height="99%"> |
| | | <el-table :data="WTableData" stripe style="width: 100%" height="85%"> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | |
| | | width="70px" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="whiteListIP" |
| | | prop="ip" |
| | | :label="$t('operatManage.BWL.whiteListIP')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="effectiveDate" |
| | | :label="$t('operatManage.BWL.effectiveDate')" |
| | | prop="visit" |
| | | :label="$t('operatManage.BWL.PageView')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="requestUser" |
| | | :label="$t('operatManage.BWL.requestUser')" |
| | | prop="descr" |
| | | :label="$t('operatManage.BWL.description')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="tokenInfo" |
| | | :label="$t('operatManage.BWL.tokenInfo')" |
| | | prop="createUser" |
| | | :label="$t('operatManage.BWL.creator')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="whiteListStatus" |
| | | :label="$t('operatManage.BWL.whiteListStatus')" |
| | | :formatter="formatData" |
| | | prop="createTime" |
| | | :label="$t('operatManage.BWL.creationTime')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="operate" |
| | | :label="$t('operatManage.BWL.operate')" |
| | | prop="updateUser" |
| | | :label="$t('operatManage.BWL.update')" |
| | | /> |
| | | <el-table-column |
| | | :formatter="formatData" |
| | | prop="updateTime" |
| | | :label="$t('operatManage.BWL.UpdateTime')" |
| | | /> |
| | | </el-table> |
| | | <div style="margin-top: 40px" class="pagination_box"> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage" |
| | | @size-change="WhandleSizeChange" |
| | | @current-change="WhandleCurrentChange" |
| | | :current-page="WListData.pageIndex" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-size="10" |
| | | :page-size="WListData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="0" |
| | | :total="Wcount" |
| | | > |
| | | </el-pagination> |
| | | </div></div |
| | |
| | | |
| | | <script> |
| | | import MyBread from "../../components/MyBread.vue"; |
| | | |
| | | import { blacklistSelectByPageAndCount } from "../../api/api"; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | |
| | | unit: "", |
| | | interceptionNumber: "", |
| | | }, |
| | | tableData: [], |
| | | BTableData: [], |
| | | WTableData: [], |
| | | BListData: { |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | type: 1, |
| | | }, |
| | | WListData: { |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | type: 2, |
| | | }, |
| | | Wcount: 0, |
| | | Bcount: 0, |
| | | }; |
| | | }, |
| | | methods: { |
| | | //格式化时间 |
| | | add0(m) { |
| | | return m < 10 ? "0" + m : m; |
| | | }, |
| | | //格式化时间 |
| | | format(shijianchuo) { |
| | | //shijianchuo是整数,否则要parseInt转换 |
| | | var time = new Date(shijianchuo); |
| | | var y = time.getFullYear(); |
| | | var m = time.getMonth() + 1; |
| | | var d = time.getDate(); |
| | | var h = time.getHours(); |
| | | var mm = time.getMinutes(); |
| | | var s = time.getSeconds(); |
| | | return ( |
| | | y + "-" + this.add0(m) + "-" + this.add0(d) |
| | | // " " + |
| | | // this.add0(h) + |
| | | // ":" + |
| | | // this.add0(mm) + |
| | | // ":" + |
| | | // this.add0(s) |
| | | ); |
| | | }, |
| | | //格式化列表 |
| | | formatData(row, column) { |
| | | let data = row[column.property]; |
| | | if (data == null) { |
| | | return data; |
| | | } |
| | | return this.format(data); |
| | | }, |
| | | handleClick(tab, event) { |
| | | console.log(tab, event); |
| | | }, |
| | | handleSizeChange(val) { |
| | | console.log(`每页 ${val} 条`); |
| | | WhandleSizeChange(val) { |
| | | this.WListData.pageSize = val; |
| | | this.getList(); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | console.log(`当前页: ${val}`); |
| | | WhandleCurrentChange(val) { |
| | | this.WListData.pageIndex = val; |
| | | this.getList(); |
| | | }, |
| | | BhandleSizeChange(val) { |
| | | this.BListData.pageSize = val; |
| | | this.getList(); |
| | | }, |
| | | BhandleCurrentChange(val) { |
| | | this.BListData.pageIndex = val; |
| | | this.getList(); |
| | | }, |
| | | onSubmit() { |
| | | console.log("submit!"); |
| | |
| | | resetForm(formName) { |
| | | this.$refs[formName].resetFields(); |
| | | }, |
| | | async WGetList() { |
| | | const data = await blacklistSelectByPageAndCount(this.WListData); |
| | | |
| | | if (data.code != 200) { |
| | | return this.$message.error("列表调用失败"); |
| | | } |
| | | this.WTableData = data.result; |
| | | this.Wcount = data.count; |
| | | }, |
| | | async BGetList() { |
| | | const data = await blacklistSelectByPageAndCount(this.BListData); |
| | | console.log(data); |
| | | if (data.code != 200) { |
| | | return this.$message.error("列表调用失败"); |
| | | } |
| | | this.BTableData = data.result; |
| | | this.Bcount = data.count; |
| | | }, |
| | | }, |
| | | created() {}, |
| | | created() { |
| | | this.BGetList(); |
| | | this.WGetList(); |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="less" scoped> |
| | |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | overflow: auto; |
| | | height: 70%; |
| | | } |
| | | .text-center { |
| | | text-align: center; |
| | | } |
| | | .el-tab-pane { |
| | | height: 82vh; |
| | | } |
| | | } |
| | | </style> |
| | | |