ip标签化

src/pages/authority/user/organizationuser.vue

@@ -18,7 +18,7 @@
       <el-form ref="form" :rules="rules" :model="form" label-width="0px">
         <el-form-item prop="account">
           <p class="formname">用户账号：</p>
-          <el-input v-model="form.account"></el-input>
+          <el-input v-model="form.account" :disabled="tranform_flag(edit_flag)"></el-input>
         </el-form-item>
         <el-form-item prop="password" :class="{ shortpass: edit_flag }">
           <p class="formname">登录密码：</p>
@@ -36,7 +36,7 @@
         </el-form-item>
         <el-form-item prop="type">
           <p class="formname">用户类型：</p>
-          <el-select v-model="form.type" placeholder="请选择">
+          <el-select v-model="form.type" placeholder="请选择" @change="change_type()">
             <el-option
               v-for="item in typeoptions"
               :key="item.value"
@@ -56,7 +56,29 @@
         </el-form-item>
         <el-form-item prop="ip" v-if="form.type==3||form.type==4">
           <p class="formname">IP白名单：</p>
-          <el-input v-model="form.ip"></el-input>
+          <!-- <el-input v-model="form.ip"></el-input> -->
+          <div style="width:1022px;min-height:60px;border:1px solid #dcdfe6;border-radius:4px;padding:5px;">
+            <el-tag
+              v-if="form.ip.length"
+              :key="tag"
+              v-for="tag in form.ip"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)">
+              {{tag}}
+            </el-tag>
+            <el-input
+              class="input-new-tag"
+              v-if="inputVisible"
+              v-model="inputValue"
+              ref="saveTagInput"
+              size="small"
+              @keyup.enter.native="handleInputConfirm"
+              @blur="handleInputConfirm"
+            >
+            </el-input>
+            <el-button v-else class="button-new-tag" size="small" @click="showInput">新增</el-button>
+          </div>
         </el-form-item>
         <el-form-item prop="contact">
           <p class="formname">联系人：</p>
@@ -171,9 +193,13 @@ export default {
         desc: "",
         person: "",
         date: "",
-        ip: "",
+        ip: [],
         domain: "",
       },
+      dynamicTags: ['标签一', '标签二', '标签三'],
+      inputVisible: false,
+      inputValue: '',
+      ip_arr:[],
       now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
       typeoptions: [
         {
@@ -245,14 +271,6 @@ export default {
       baseinfo: {},
     };
   },
-  watch: {
-    'form.type'(n,o){
-      this.form.systemname = ''
-      this.form.domain = ''
-      this.form.ip = ''
-      this.form.origin = ''
-    }
-  },
   computed: {},
   created() {
     this.get_now_user();
@@ -261,6 +279,31 @@ export default {
   },
   mounted() {},
   methods: {
+    change_type(){
+      this.form.systemname = ''
+      this.form.domain = ''
+      this.form.ip = []
+      this.form.origin = ''
+    },
+    handleClose(tag) {
+        this.form.ip.splice(this.form.ip.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.form.ip.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      },
     get_now_page() {
       console.log(this.$route);
       if (this.$route.path.indexOf("add") !== -1) {
@@ -314,7 +357,7 @@ export default {
               desc: data.description,
               person: data.create_user,
               date: data.create_date,
-              ip: this.transform_func(data.ip_whitelist),
+              ip: data.ip_whitelist,
               domain: data.domain_name,
             };
           }else{
@@ -374,7 +417,7 @@ export default {
         is_admin: this.form.type,
         state: this.form.able, // 用户状态，1——启用，0 禁用
         domain_name: this.form.domain, //
-        ip_whitelist: this.form.ip.split(";"), //
+        ip_whitelist: this.form.ip, //
         description: this.form.desc, //描述
         link_man: this.form.contact,
       };
@@ -405,7 +448,7 @@ export default {
         state: this.form.able, // 用户状态，1——启用，0 禁用
         domain_name: this.form.domain, //
         ip_whitelist:
-          this.form.ip && this.form.ip.length ? this.form.ip.split(";") : [], //
+          this.form.ip && this.form.ip.length ? this.form.ip : [], //
         description: this.form.desc, //描述
         link_man: this.form.contact,
       };
@@ -423,12 +466,23 @@ export default {
           this.$message.error("修改失败");
         });
     },
+    check_user(){
+      return this.$http
+        .get(`/apaas/backmgt/user/checkUserId?user_id=${this.form.account}`)
+    },
     onSubmit(formName) {
       console.log("submit!");
       this.$refs[formName].validate((valid) => {
         if (valid) {
           if (this.edit_flag == 0) {
-            this.add_user();
+            this.check_user().then((res)=>{
+              console.log(res);
+              if(res.data.success){
+                this.add_user();
+              }else{
+                this.$message.error(res.data.errMsg)
+              }
+            })
           } else {
             this.set_user();
           }
@@ -437,6 +491,7 @@ export default {
           return false;
         }
       });
+      
     },
     check_account(){
       
@@ -473,11 +528,11 @@ export default {
   background-color: #f7f8f9;
   width: 1022px;
 }
-.shortpass .el-input__inner {
+.info_contain .shortpass .el-input__inner {
   background-color: #f7f8f9;
   width: 888px;
 }
-.shortpass .el-input {
+.info_contain .shortpass .el-input {
   width: 888px;
 }
 .info_contain .el-textarea__inner {
@@ -494,6 +549,26 @@ export default {
 .info_contain .el-input.is-disabled .el-input__inner {
   background-color: #e3e4e6;
 }
+ .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+ .info_contain .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+ .info_contain .input-new-tag .el-input__inner {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
 </style>
 
 <style scoped>