Merge branch 'ldx' into dev

src/pages/user/user_info.vue

@@ -9,6 +9,7 @@
         <el-tab-pane label="个人信息详情" name="0"></el-tab-pane>
         <el-tab-pane label="业务系统详情" name="1"></el-tab-pane>
       </el-tabs>
+      <div v-if="activeName == '0'">
         <el-form ref="form" :model="form">
           <el-form-item class="info_item">
             <p>账号：</p>
@@ -56,6 +57,61 @@
             <el-button class="option_btn" @click="upLevel">升级为开发者</el-button>
           </el-form-item>
         </el-form>
+      </div>
+      <div v-if="activeName == '1'">
+        <el-form ref="formBusiness" :model="formBusiness">
+          <el-form-item class="info_item">
+            <p>业务系统名：</p>
+            <el-input v-model="formBusiness.businessSystemName"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>域名：</p>
+            <el-input v-model="formBusiness.domainName"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>IP（白名单）：</p>
+            <div class="ip_block">
+              <div v-for="item in formBusiness.ip_white" :key="item.id" class="ip_item">
+                {{ item.ip }}
+                <i class="el-icon-close ip_del" @click="delIp(item.ip, 'white')"></i>
+              </div>
+              <el-input
+                v-if="whiteAddShow"
+                class="ip_input"
+                v-model="newIpWhite"
+                @keyup.enter.native="watchKeyboardWhite"
+              ></el-input>
+              <el-button class="add_ip" @click="addIp('white')" icon="el-icon-plus">增加</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>IP（黑名单）：</p>
+            <div class="ip_block">
+              <div v-for="item in formBusiness.ip_black" :key="item.id" class="ip_item">
+                {{ item.ip }}
+                <i class="el-icon-close ip_del" @click="delIp(item.ip, 'black')"></i>
+              </div>
+              <el-input
+                v-if="blackAddShow"
+                class="ip_input"
+                v-model="newIpBlack"
+                @keyup.enter.native="watchKeyboardBlack"
+              ></el-input>
+              <el-button class="add_ip" @click="addIp('black')" icon="el-icon-plus">增加</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item class="info_item info_item_right_btn_2">
+            <p>密钥：</p>
+            <el-input ref="keys" v-model="formBusiness.key"></el-input>
+            <el-button class="option_btn" @click="copyKey">复制</el-button>
+            <el-button class="option_btn_gray" @click="upLevel">重置</el-button>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>描述：</p>
+            <el-input type="textarea" :rows="2" v-model="formBusiness.description"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
       <div class="btn_footer">
         <el-button class="previous" @click="previous">取消</el-button>
         <el-button class="registe" @click="registe">修改</el-button>
@@ -112,6 +168,32 @@ export default {
       role: ""
     },
     imgList: [],
+    formBusiness: {
+      businessSystemName: "",
+      domainName: "",
+      ip_white: [
+        { ip: "255.255.255.255", id: "123789244" },
+        { ip: "255.255.255.255", id: "123576744" },
+        { ip: "255.255.255.255", id: "123467866874" },
+        { ip: "255.255.255.255", id: "1226783544" }
+      ],
+      ip_black: [
+        { ip: "255.255.255.255", id: "12773844" },
+        { ip: "255.255.255.255", id: "12561344" },
+        { ip: "255.255.255.255", id: "1235672344" },
+        { ip: "255.255.255.255", id: "12342314" },
+        { ip: "255.255.255.255", id: "12386444" },
+        { ip: "255.255.255.255", id: "12783544" },
+        { ip: "255.255.255.255", id: "121678344" },
+        { ip: "255.255.255.255", id: "127678344" }
+      ],
+      key: "",
+      description: ""
+    },
+    whiteAddShow: false,
+    blackAddShow: false,
+    newIpWhite: "",
+    newIpBlack: "",
     diaPassWord: false
   }),
   mounted() {
@@ -135,6 +217,50 @@ export default {
     submitChangePwd() {},
     upLevel() {
       this.diaPassWord = true;
+    },
+    copyKey() {
+      this.$refs.keys.select();
+      document.execCommand("Copy");
+      this.$message({
+        message: "复制成功",
+        type: "success"
+      });
+    },
+    delIp(ip, type) {
+      console.log(ip, type);
+    },
+    addIp(type) {
+      if (type == "white") {
+        this.whiteAddShow
+          ? this.$message({
+              message: "请按回车完善本次ip填写",
+              type: "error"
+            })
+          : (this.whiteAddShow = true);
+      } else if (type == "black") {
+        this.blackAddShow
+          ? this.$message({
+              message: "请按回车完善本次ip填写",
+              type: "error"
+            })
+          : (this.blackAddShow = true);
+      }
+    },
+    watchKeyboardWhite() {
+      let self = this;
+      if (self.newIpWhite != "") {
+        self.formBusiness.ip_white.push({ ip: self.newIpWhite, id: 0 });
+        self.whiteAddShow = false;
+        self.newIpWhite = "";
+      }
+    },
+    watchKeyboardBlack() {
+      let self = this;
+      if (self.newIpBlack != "") {
+        self.formBusiness.ip_black.push({ ip: self.newIpBlack, id: 0 });
+        self.blackAddShow = false;
+        self.newIpBlack = "";
+      }
     }
   }
 };
@@ -147,7 +273,7 @@ export default {
 .btn_footer {
   display: flex;
   justify-content: flex-end;
-  margin: 40px 20px 10px;
+  margin: 60px 20px 10px;
 }
 .previous {
   width: 100px;
@@ -165,6 +291,12 @@ export default {
   border-radius: 8px;
   color: #f8f9fd;
 }
+.option_btn_gray {
+  width: 124px;
+  background-color: #e3e5ef;
+  border-radius: 8px;
+  color: #0f2683;
+}
 .info_item {
   width: 70%;
   min-width: 600px;
@@ -191,12 +323,60 @@ export default {
   justify-content: flex-end;
   margin: 20px 0 0;
 }
+.ip_block {
+  border-radius: 8px;
+  border: solid 1px #e3e5ef;
+  padding: 10px 0 0 10px;
+  line-height: 24px;
+}
+.ip_item {
+  display: inline-block;
+  position: relative;
+  background-color: #e6ebfe;
+  border-radius: 4px;
+  color: #0f2683;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 26px 0 8px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+.ip_del {
+  position: absolute;
+  right: 8px;
+  top: 6px;
+  font-size: 14px;
+  color: #6573ae;
+  cursor: pointer;
+}
+.ip_del:hover {
+  color: #e56600;
+}
+.add_ip {
+  background-color: #495feb;
+  border-radius: 4px;
+  color: #f8f9fd;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 8px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+.ip_input {
+  width: 110px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
 </style>
 <style>
 .info_item_right_btn .el-input {
   width: calc(100% - 140px);
   margin-right: 10px;
 }
+.info_item_right_btn_2 .el-input {
+  width: calc(100% - 280px);
+  margin-right: 10px;
+}
 .info_block .el-dialog__wrapper {
   padding-left: 180px;
 }
@@ -209,4 +389,11 @@ export default {
 .info_block .el-dialog__body {
   padding: 15px 20px 20px;
 }
+.ip_input .el-input__inner {
+  border-radius: 4px;
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 24px;
+  height: 24px;
+}
 </style>
\ No newline at end of file