|
@@ -5,6 +5,9 @@
|
|
|
<el-button type="primary" @click="onSearch">搜索</el-button>
|
|
|
<el-button type="success" @click="addIp">新增</el-button>
|
|
|
</div> -->
|
|
|
+ <div style="margin-bottom:10px">
|
|
|
+ <el-button type="primary" plain @click="add" size="small">添加ip</el-button>
|
|
|
+ </div>
|
|
|
<el-table :data="tableData" border style="width: 100%">
|
|
|
<el-table-column align="center" type="index" width="50" label="序号" />
|
|
|
<el-table-column align="center" prop="ip" label="IP"></el-table-column>
|
|
@@ -14,23 +17,39 @@
|
|
|
</el-table-column> -->
|
|
|
<el-table-column align="center" label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag type="danger" @click="del(scope.$index)">删除</el-tag>
|
|
|
+ <el-button type="danger" plain @click="del(scope.$index)" size="small">删除</el-button>
|
|
|
+ <!-- <el-tag type="danger" @click="del(scope.$index)">删除</el-tag> -->
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<!-- <el-row style="margin-top:10px;" type="flex" justify="end">
|
|
|
<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="onPageChange" :current-page="pageNumber"></el-pagination>
|
|
|
</el-row> -->
|
|
|
+
|
|
|
+ <!-- 添加ip弹层 -->
|
|
|
+ <el-dialog title="添加ip白名单" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="ipFormData" :rules="rules" ref="ipFormData" label-width="80px">
|
|
|
+ <el-form-item label="ip" prop="name">
|
|
|
+ <el-input v-model="ipFormData.name" autocomplete="off" style="width: 300px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item >
|
|
|
+ <el-button type="primary" @click="onSubmit('ipFormData')">确定</el-button>
|
|
|
+ <el-button @click="dialogFormVisible = false">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// getIpList获取Ip列表 delIpList-删除
|
|
|
+// getIpList获取Ip列表 delIpList-删除 addIp-添加
|
|
|
import {
|
|
|
getIpList,
|
|
|
- delIpList
|
|
|
+ delIpList,
|
|
|
+ addIp
|
|
|
} from "@/api";
|
|
|
export default {
|
|
|
+ name: 'pageView',
|
|
|
data() {
|
|
|
return {
|
|
|
pageSize: 10,
|
|
@@ -47,7 +66,20 @@ export default {
|
|
|
],
|
|
|
total: 0,
|
|
|
// ip
|
|
|
- ip: null
|
|
|
+ ip: null,
|
|
|
+ // ip弹层
|
|
|
+ dialogFormVisible: false,
|
|
|
+ // 新增ip数据
|
|
|
+ ipFormData: {
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入ip', trigger: 'blur' },
|
|
|
+ { pattern: /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/, message:'请输入合法ip', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -99,6 +131,32 @@ export default {
|
|
|
return false;
|
|
|
});
|
|
|
},
|
|
|
+ // 添加
|
|
|
+ add() {
|
|
|
+ this.ipFormData.name = ''
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ },
|
|
|
+ // 确定添加
|
|
|
+ onSubmit(formName) {
|
|
|
+ this.$refs[formName].validate(async(valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // console.log('校验通过');
|
|
|
+ const res = await addIp(this.ipFormData.name)
|
|
|
+ console.log('添加ip', res);
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: '添加成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.getIpList()
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.ipFormData.name = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 新增
|
|
|
+ // addIp() {}
|
|
|
// 分页
|
|
|
// onPageChange(page) {
|
|
|
// if (page == this.pageNumber) {
|
|
@@ -117,8 +175,6 @@ export default {
|
|
|
// this.getIpList();
|
|
|
// }, 0);
|
|
|
// },
|
|
|
- // 新增
|
|
|
- // addIp() {},
|
|
|
// getBoxList() {
|
|
|
// boxList({
|
|
|
// cabinet_number: this.cabinetValue
|