diff --git a/src/pages/user/user_info.vue b/src/pages/user/user_info.vue index b000cc958c7391a2f2609d97845bd2456acb71e5..cc5f9ee17d5b0fdc9d7120fe39449a68a31411dc 100644 --- a/src/pages/user/user_info.vue +++ b/src/pages/user/user_info.vue @@ -9,53 +9,109 @@ - - -

账号：

- - - -

密码：

- - 修改密码 - - -

昵称：

- - - -

头像：

- - - -

联系人：

- - - -

手机号：

- - - -

邮箱：

- - - -

组织机构：

- - - -

当前角色：

- - 升级为开发者 - - +
+ + +

账号：

+ + + +

密码：

+ + 修改密码 + + +

昵称：

+ + + +

头像：

+ + + +

联系人：

+ + + +

手机号：

+ + + +

邮箱：

+ + + +

组织机构：

+ + + +

当前角色：

+ + 升级为开发者 + + +
+
+ + +

业务系统名：

+ + + +

域名：

+ + + +

IP（白名单）：

+
+
+ {{ item.ip }} + +
+ + 增加 +
+ + +

IP（黑名单）：

+
+
+ {{ item.ip }} + +
+ + 增加 +
+ + +

密钥：

+ + 复制 + 重置 + + +

描述：

+ + + +
取消 修改 @@ -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; +} \ No newline at end of file