feat: account列表notification展示、增删

nezha-fronted/src/components/common/rightBox/accountBox.vue

@@ -41,6 +41,22 @@
         <el-form-item :label="$t('config.account.createTime')" v-if="editUser.userId">
           <div class="right-box-form-content-txt">{{editUser.createTime}}</div>
         </el-form-item>
+
+        <div class="right-box-sub-title">{{$t('config.account.notification')}}
+          <button @click="addNotification" id="add-notification" type="button" class="float-right" :disabled="addDisabled">
+            <span><i class="nz-icon nz-icon-create-square"></i></span>
+          </button>
+        </div>
+
+        <div class="right-box-line"></div>
+
+        <el-form-item v-for="(notification, index) in editUser.notifications" :key="index" class="notification-item">
+          <el-select v-model="notification.scriptId" slot="label" placeholder="" popper-class="no-style-class" size="small">
+            <el-option v-for="(item, i) in selectableScripts" :label="item.name" :key="i" :value="item.id" :disabled="item.disabled"></el-option>
+          </el-select>
+          <el-input placeholder="" v-model="notification.account" size="small" style="width: calc(100% - 37px);"></el-input>
+          <span @click="removeNotification(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
+        </el-form-item>
       </el-form>
     </el-scrollbar>
     <!-- end--表单-->
@@ -68,10 +84,15 @@
         return function(username) {
           return localStorage.getItem('nz-username') == username;
         }
+      },
+      addDisabled() {
+        let enabled = this.selectableScripts.filter(item => {return !item.disabled});
+        return enabled.length === 0;
       }
     },
     data() {
       return {
+        scriptIds: [],
         rules: { //表单校验规则
           username: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -84,7 +105,9 @@
             {type: 'email', message: this.$t('validate.email')}
           ]
         },
-        editUser: {}
+        editUser: {},
+        scripts: [],
+        selectableScripts: []
       }
     },
     methods: {
@@ -140,6 +163,49 @@
           });
         });
       },
+
+      getScripts() {
+        /*this.$get("/alert/script?pageNo=1&pageSize=-1").then(response => {
+          this.scripts = response.data.list;
+          this.getSelectableScripts();
+        });*/
+        this.scripts = [
+          {id: 1, name: "DOLBY"},
+          {id: 2, name: "IMAX"},
+          {id: 3, name: "CGS"},
+          {id: 4, name: "LUXE"},
+          {id: 5, name: "DST:X"},
+        ];
+        this.getSelectableScripts();
+      },
+
+      getSelectableScripts() {
+        this.selectableScripts = this.scripts.map(item => {
+          let exist = this.editUser.notifications.some(n => {
+            return item.id === n.scriptId;
+          });
+          if (exist) {
+            this.$set(item, "disabled", true);
+          } else {
+            this.$set(item, "disabled", false);
+          }
+          return item;
+        });
+      },
+
+      addNotification() {
+        let scripts = this.selectableScripts.find(item => {
+          return item.disabled === false;
+        });
+        scripts && this.editUser.notifications.push({scriptId: scripts.id, account: ""});
+      },
+
+      removeNotification(index) {
+        this.editUser.notifications.splice(index, 1);
+      }
+    },
+    mounted() {
+      this.getScripts();
     },
     watch: {
       //将prop里的user转为组件内部对象
@@ -149,7 +215,40 @@
         handler(n) {
           this.editUser = JSON.parse(JSON.stringify(n));
         }
+      },
+      "editUser.notifications": {
+        deep: true,
+        immediate: true,
+        handler(n) {
+          this.getSelectableScripts();
+        }
       }
     },
   }
 </script>
+<style lang="scss">
+  .right-box-account {
+    .right-box-sub-title {
+      #add-notification {
+        border: none;
+        outline: none;
+        cursor: pointer;
+
+        i {
+          font-size: 17px;
+          background-color: #f6f6f6;
+        }
+      }
+    }
+  }
+
+  .notification-item {
+    .el-select {
+      width: 100px;
+
+      .el-input__inner {
+        vertical-align: top;
+      }
+    }
+  }
+</style>