From f1796d24728da8e9e69b4999bf7f052d7096112a Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Thu, 4 Jun 2020 15:04:18 +0800
Subject: [PATCH] =?UTF-8?q?am=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AFpm?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/user/user_info.vue | 283 +++++++++++++++++++++++++++++------
 1 file changed, 235 insertions(+), 48 deletions(-)

diff --git a/src/pages/user/user_info.vue b/src/pages/user/user_info.vue
index b000cc9..cc5f9ee 100644
--- a/src/pages/user/user_info.vue
+++ b/src/pages/user/user_info.vue
@@ -9,53 +9,109 @@
         <el-tab-pane label="个人信息详情" name="0"></el-tab-pane>
         <el-tab-pane label="业务系统详情" name="1"></el-tab-pane>
       </el-tabs>
-      <el-form ref="form" :model="form">
-        <el-form-item class="info_item">
-          <p>账号：</p>
-          <el-input v-model="form.accountNo"></el-input>
-        </el-form-item>
-        <el-form-item class="info_item info_item_right_btn">
-          <p>密码：</p>
-          <el-input v-model="form.password"></el-input>
-          <el-button class="option_btn" @click="changePassword">修改密码</el-button>
-        </el-form-item>
-        <el-form-item class="info_item">
-          <p>昵称：</p>
-          <el-input v-model="form.nickname"></el-input>
-        </el-form-item>
-        <el-form-item class="info_item">
-          <p>头像：</p>
-          <upload-file
-            :multiple="false"
-            :max="1"
-            type="cropper"
-            :readOnly="false"
-            :list="imgList"
-            @getNewList="getNewList"
-          ></upload-file>
-        </el-form-item>
-        <el-form-item class="info_item">
-          <p>联系人：</p>
-          <el-input v-model="form.contactPerson"></el-input>
-        </el-form-item>
-        <el-form-item class="info_item">
-          <p>手机号：</p>
-          <el-input v-model="form.phone"></el-input>
-        </el-form-item>
-        <el-form-item class="info_item">
-          <p>邮箱：</p>
-          <el-input v-model="form.email"></el-input>
-        </el-form-item>
-        <el-form-item class="info_item">
-          <p>组织机构：</p>
-          <el-input v-model="form.organization"></el-input>
-        </el-form-item>
-        <el-form-item class="info_item info_item_right_btn">
-          <p>当前角色：</p>
-          <el-input v-model="form.role"></el-input>
-          <el-button class="option_btn" @click="upLevel">升级为开发者</el-button>
-        </el-form-item>
-      </el-form>
+      <div v-if="activeName == '0'">
+        <el-form ref="form" :model="form">
+          <el-form-item class="info_item">
+            <p>账号：</p>
+            <el-input v-model="form.accountNo"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item info_item_right_btn">
+            <p>密码：</p>
+            <el-input v-model="form.password"></el-input>
+            <el-button class="option_btn" @click="changePassword">修改密码</el-button>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>昵称：</p>
+            <el-input v-model="form.nickname"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>头像：</p>
+            <upload-file
+              :multiple="false"
+              :max="1"
+              type="cropper"
+              :readOnly="false"
+              :list="imgList"
+              @getNewList="getNewList"
+            ></upload-file>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>联系人：</p>
+            <el-input v-model="form.contactPerson"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>手机号：</p>
+            <el-input v-model="form.phone"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>邮箱：</p>
+            <el-input v-model="form.email"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item">
+            <p>组织机构：</p>
+            <el-input v-model="form.organization"></el-input>
+          </el-form-item>
+          <el-form-item class="info_item info_item_right_btn">
+            <p>当前角色：</p>
+            <el-input v-model="form.role"></el-input>
+            <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
-- 
2.26.0