管理系统里添加IP

先看下效果

如果已有0.0.0.0,再次输入0.0.0.0，就会提示如下

显示的格式为0.0.0.0/32，所以要修改格式

看代码

template

<!-- 添加白IP -->
      <div class="blank">
        <el-row>
          <el-col :span="3">
            <div class="content bg-purple">添加白IP</div>
          </el-col>
          <el-col :span="3">
            <el-input placeholder="请输入内容" v-model="ip1" v-on:input="searchIP1" clearable></el-input>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple">.</div>
          </el-col>
          <el-col :span="3">
            <el-input placeholder="请输入内容" v-model="ip2" v-on:input="searchIP2" clearable></el-input>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple">.</div>
          </el-col>
          <el-col :span="3">
            <el-input placeholder="请输入内容" v-model="ip3" v-on:input="searchIP3" clearable></el-input>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple">.</div>
          </el-col>
          <el-col :span="3">
            <el-input placeholder="请输入内容" v-model="ip4" v-on:input="searchIP4" clearable></el-input>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple">/</div>
          </el-col>
          <el-col :span="2.8">
            <!-- 下拉菜单-绑定值用@command函数，给下拉选项中的每一项绑定一个command值，然后选中的值绑定为显示内容 -->
            <select v-model="choice" class="select1">
              <option value="8">8</option>
              <option value="16">16</option>
              <option value="24">24</option>
              <option selected value="32">32</option>
            </select>
            <!-- <el-dropdown trigger="click" class="bg-purple-choice" @command="handleCommand">
              <p class="el-dropdown-link">
                <span>{{choice}}</span>
                <span class="el-icon-arrow-down el-icon--right"></span>
              </p>
              下拉菜单选项
              <el-dropdown-menu slot="dropdown" class="thechoice">
                <el-dropdown-item command="8">8</el-dropdown-item>
                <el-dropdown-item command="16">16</el-dropdown-item>
                <el-dropdown-item command="24">24</el-dropdown-item>
                <el-dropdown-item command="32">32</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>-->
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              class="button"
              style="marginLeft:-2px;borderLeft:0"
              @click="searchIP"
            >添加</el-button>
          </el-col>
        </el-row>
      </div>

<!-- ip列表--白名单 -->
    <div class="ipList" v-show="showIpList">
      <!-- 标题 -->
      <div class="headerIP">
        <h3>IP列表</h3>
      </div>
      <!-- 选择区域-->
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedIP" @change="handleCheckedIPChange">
        <el-checkbox v-for="IP in showIP" :label="IP" :key="IP">{{IP}}</el-checkbox>
      </el-checkbox-group>
      <el-button size="mini" round>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选/全不选</el-checkbox>
      </el-button>
      <el-button size="mini" round @click="handleDel">删除</el-button>
    </div>

script

<script>
export default {
  data() {
    return {
        //   ip地址
      ip1: "0",
      ip1reg: false, //添加ip时的验证
      ip2: "0",
      ip2reg: false,
      ip3: "0",
      ip3reg: false,
      ip4: "0",
      ip4reg: false,
      //   选择框选中的 8、16、24、36
      choice: "32",
      // 全选ip
      checkAll: false, //控制全选按钮
      choiceIP:[], //选中的ip
      checkedIP:[], //显示选中的ip
      allIP:[], //添加的ip数组
      showIP:[], //显示的ip数组
      isIndeterminate: true, //控制样式
      showIpList: false, //控制IP列表的显示
    }
  },
  methods: {
     // 将ip改成固定格式0.0.0.0/32
    changeIP(arr) {
      let arr1 = [];
      for (let i = 0; i < arr.length; i++) {
        let str = arr[i];
        str =
          str.ip1 +
          "." +
          str.ip2 +
          "." +
          str.ip3 +
          "." +
          str.ip4 +
          "/" +
          str.port;
        arr1.push(str);
      }
      return arr1;
    },
    // 添加ip
    searchIP() {
      // 确认是否添加
      this.$confirm("确认添加?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      // 确认添加
        .then(() => {
          let ipStr =
            this.ip1 +
            "" +
            this.ip2 +
            "" +
            this.ip3 +
            "" +
            this.ip4 +
            "" +
            this.choice +
            "";
          // console.log(ipStr);//输入的ip
          let ipArr = this.allIP; //获取到当前ip数组
          //新数组（如果输入的IP已经存在于ip数组,把重复的拿出来)--将IP中的./等符号去掉，判断数字如果全等于，那么就是重复的-------------------------------------
          let newarr = [];
          for (let i = 0; i < ipArr.length; i++) {
            newarr.push(
              ipArr[i].ip1 +
                "" +
                ipArr[i].ip2 +
                "" +
                ipArr[i].ip3 +
                "" +
                ipArr[i].ip4 +
                "" +
                ipArr[i].port +
                ""
            );
          }
          // 如果新数组有0.0.0.0那么提示，已设置0.0.0.0,任何IP都不受限制
          let reg=/0{4}/;
          for (let i = 0; i < newarr.length; i++) {
            if (reg.test(newarr[i])==true) {
              this.$alert("已设置0.0.0.0,任何IP都不受限制", "提示", {
              confirmButtonText: "确定",
              callback: action => {}
              });
              return
            }
          }
          newarr = newarr.filter(item => {
            return item === ipStr;
          });
          // 新数组结束--------------------------------------------------------------------------------------
          // 判断输入的iP是否重复，如果重复，提示，否则加入新的Ip
          if (newarr.length == 0 || ipArr.length == 0) {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            // 数组里面加入这个ip
            ipArr.push({
              ip1: this.ip1,
              ip2: this.ip2,
              ip3: this.ip3,
              ip4: this.ip4,
              port: this.choice
            });
            // console.log(ipArr, this.changeIP(ipArr));
            this.showIpList = true; //控制IP列表的显示
            let reg = /0{4}/;
            if (reg.test(ipStr)==true) {
              this.showIP.push(this.ip1+'.'+this.ip2+'.'+this.ip3+'.'+this.ip4)
            }else{
              this.showIP=this.changeIP(ipArr);//显示处理过后的ip
            }
            // console.log(this.allIP);
            // 还原到初始值------------------------------------------------
            this.ip1 = 0;
            this.ip2 = 0;
            this.ip3 = 0;
            this.ip4 = 0;
            this.choice = 32;
            // 还原到初始值结束---------------------------------------------
          } else {
            this.$alert("IP已在白名单中", "提示", {
              confirmButtonText: "确定",
              callback: action => {}
            });
          }
        })
        .catch(() => {
          this.showIpList = false; //隐藏ip列表
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
      // }
    },
    //ip多选框---------------------------------------------------------------
    // 全选
    handleCheckAllChange(val) {
      // console.log(val,this.showIP,this.allIP);
      this.checkedIP = val ? this.showIP : []; //表示选中的0.0.0.0/32
      this.isIndeterminate = false;//全选按钮样式,全部选中会显示√
      this.choiceIP = val ? this.allIP : [];//表示选中的ip1:xx,ip2:xx..
      // console.log(this.choiceIP)
    },
    // 选中某一项
    handleCheckedIPChange(value) {
      // console.log(value);//value表示被选中的0.0.0.0/32
      this.checkedIP = value;//被选中的0.0.0.0/32
      // 方法1：新建一个空数组，存放选中的下标0.0.0.0/32------------------------
      let arr = [];
      let arr1 = this.showIP;
      for (let i = 0; i < arr1.length; i++) {
        if (value.indexOf(arr1[i])>-1) {
          arr.push(i);//选中的下标
        }
      }
      // 方法1结束------------------------------------------------------------
      // 方法2：从全部的真实ip中找到选中的ip1:xx,ip2:xx-------------------------
      let array=this.allIP;
      let newArr=[]
      for (let i = 0; i < array.length; i++) {
        if (arr.indexOf(i)>-1) {
          newArr.push(array[i])
        }
      }
      this.choiceIP=newArr;
      // console.log(this.choiceIP);//表示选中的ip1:xx,ip2:xx..
      // 方法2结束-------------------------------------------------------------
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.showIP.length;
      // 控制全选按钮的样式
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.showIP.length;
    },
    // 删除选中项
    handleDel() {
      let arr = this.checkedIP; //显示的选中项0.0.0.0/32
      if (arr.length == 0) {
        this.$alert("请选择你要删除的ip", "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
      }
      // 方法：新建一个空数组，存放全部IP中尚未被选中的项     0.0.0.0/32------------------------------------------------------
      let array = this.showIP; //全部IP0.0.0.0/32
      let newArr = []; //空数组
      // console.log( arr,array)
      for (let i = 0; i < array.length; i++) {
        if (arr.indexOf(array[i]) == -1) {
          newArr.push(array[i]);
        }
      }
      // 方法结束----------------------------------------------------------------------------------------------------------
      this.showIP = newArr;//显示未选中的项0.0.0.0/32
      // 方法1：新建一个空数组，存放全部IP中尚未被选中的项     ip1:xx,ip2:xx,ip3:xx------------------------------------------------------
      let arr1 = this.choiceIP; //选中项ip1:xx,ip2:xx..
      let allIPArr=this.allIP;//全部IPip1:xx,ip2:xx..
      let newArr1 = []; //空数组
      // console.log( arr,array)
      for (let i = 0; i < allIPArr.length; i++) {
        if (arr1.indexOf(allIPArr[i]) == -1) {
          newArr1.push(allIPArr[i]);
        }
      }
      this.allIP=newArr1;//未选中的项ip1:xx,ip2:xx..
      // 方法1结束----------------------------------------------------------------------------------------------------------
      // 如果全部删除了，那么ip列表为空
      if (this.showIP.length == 0) {
        this.checkAll = false; //控制全选按钮
        this.choiceIP = []; //选中的ip
        this.checkedIP = []; //显示选中的ip
        this.allIP= []; //添加的ip数组
        this.showIP = []; //显示的ip数组
        this.isIndeterminate = true; //控制样式
        this.showIpList = false; //控制IP列表的显示
        //发送ajax修改ip数组-----------------------------------------------------------------
      }
      // console.log(this.allIP);
    },
    //ip多选框结束---------------------------------------------------------------
  }     
}
</script>

style

<style scoped>
.newAgency {
  margin: 0 auto;
  width: 700px;
  margin-top: 60px;
}
.blank {
  margin-bottom: 20px;
}
.ablank {
  margin-top: 20px;
}
/* 添加ip */
.addIP {
  max-width: 700px;
  margin: 10px auto;
  margin-top: 30px;
  height: 34px;
}
.el-row:not(:last-child) {
  /* margin-bottom: 20px; */
}
.el-col {
  /* border-radius: 4px; */
}
.grid-content[data-v-1bf25fbd] {
  border-radius: 0;
  border-collapse: collapse;
}
.bg-purple-dark {
  background: #eee;
  border: 1px solid #ccc;
}
.bg-purple {
  background: #eee;
  border: 1px solid #ccc;
}
.bg-purple-light {
  background: #fff;
  border: 1px solid #ccc;
}
.grid-content {
  /* border-radius: 4px; */
  min-height: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 20px;
  font-weight: normal;
  color: #555;
  background-color: #eee;
  border: 1px solid #ccc;
  border-right: 0;
  border-left: 0;
}
.content {
  margin-right: -2px;
  min-height: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  font-weight: normal;
  color: #555;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple-choice {
  background: #fff;
  border: 1px solid #ccc;
  border-left: 1px solid #dcdfe6;
  min-height: 32px;
  width: 80px;
  text-align: left;
  line-height: 32px;
}
.bg-purple-choice > p {
  width: 80px;
  height: 32px;
  display: flex;
  justify-content: space-around;
}
.bg-purple-choice > p > span {
  vertical-align: top;
  display: inline-block;
  height: 32px;
  margin: 0;
  padding: 0;
  line-height: 32px;
}
.thechoice {
  text-align: left;
  min-width: 80px;
}
/* 白名单IP列表 */
.headerIP {
  width: 100%;
  font-size: 18px;
  margin-top: 10px;
  font-weight: 500;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  padding-top: 10px;
  padding-bottom: 10px;
}
.ipList {
  margin-top: 24px;
}
/* 选择部门 */
.section {
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  margin: 10px 0;
  margin-top: 10px;
}
.secChoice {
  height: 30px;
  margin: 5px 0;
  margin-bottom: 24px;
  line-height: 30px;
  text-align: center;
}
/* 选择权限 */
.choiceSecBlank {
  border-top: 1px solid #d4d4d4;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  margin: 10px 0;
  margin-top: 10px;
}
.choiceSec {
  width: 100%;
  height: 41px;
  line-height: 32px;
  padding: 4px 0;
  font-size: 14px;
  text-align: left;
  border-top: 1px solid #d4d4d4;
}
.choiceSec span:not(:first-child) {
  display: inline-block;
  width: 11%;
}
.choiceSec span:first-child {
  font-size: 14px;
  font-weight: 600;
}
/* 确定按钮 */
.sure {
  margin: 16px;
}
/* 添加按钮 */
.button {
  color: #fff;
  font-size: 14px;
  width: 68px;
}
/* 下拉框选择IP8，16，24，32 */
.select1 {
  border: 1px solid #ccc;
  width: 80px;
  height: 34px;
  color: #555;
}
</style>