feat: account列表notification展示、增删

nezha-fronted/src/components/common/language/cn.js

@@ -570,7 +570,8 @@ const cn = {
       inputConfirmPwd: "请再次输入密码",
       invalidPwd: "无效的密码，最少6个字符",
       confirmPwdErr: "两次密码输入不一致",
-      reinputPwd: "请再次输入密码"
+      reinputPwd: "请再次输入密码",
+      notification: "通知"
     },
     promServer: {
       promServerList: "Prometheus服务",

nezha-fronted/src/components/common/language/en.js

@@ -574,7 +574,8 @@ const en = {
       inputConfirmPwd:'Please input confirm password',
       invalidPwd:'invalide password,the length at least 6',
       confirmPwdErr:'The two passwords are inconsistent',
-      reinputPwd:'Enter password again'
+      reinputPwd:'Enter password again',
+      notification: 'Notification'
     },
     promServer: {
       promServerList: 'Prometheus server',//"Prometheus Server"

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>

nezha-fronted/src/components/page/config/account.vue

@@ -61,6 +61,10 @@
           :prop="item.prop"
           :sort-orders="['ascending', 'descending']"
         >
+          <template slot-scope="scope" slot="header">
+            <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
+            <span v-else><span>{{item.label}}</span></span>
+          </template>
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop == 'option'" class="content-right-options">
               <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -87,6 +91,9 @@
                   @change="(val)=>{statusChange(scope.row)}">
                 </el-switch>
             </span>
+            <template v-else-if="item.prop == 'tags'">
+              <span>{{filterTags(item.scriptId, scope)}}</span>
+            </template>
             <span v-else-if="item.prop == 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
@@ -165,7 +172,8 @@
           status: '1',
           createTime: '',
           receiver: [],
-          lang: ''
+          lang: '',
+          notifications: []
         },
         pageObj: { //分页对象
           pageNo: 1,
@@ -281,6 +289,13 @@
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + "";
+              response.data.list[i].notifications = [
+                {scriptId: 1, account: "杀死比尔"},
+                {scriptId: 2, account: "虎虎虎"},
+                {scriptId: 3, account: "红海行动"},
+                {scriptId: 4, account: "十面埋伏"},
+                {scriptId: 5, account: "哪吒"},
+              ];
             }
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
@@ -342,6 +357,44 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
+      
+      resetTableTitle:function(){
+        let title = this.tools.customTableTitle;
+        let tableTitle = title.slice(0, this.tableTitle.length);
+        let tagTitle = title.slice(this.tableTitle.length, title.length);
+        /*this.$get("/alert/script?pageNo=1&pageSize=-1").then(response => {
+                  this.scripts = response.data.list;
+                  this.getSelectableScripts();
+                });*/
+        let scripts = [
+          {id: 1, name: "DOLBY"},
+          {id: 2, name: "IMAX"},
+          {id: 3, name: "CGS"},
+          {id: 4, name: "LUXE"},
+          {id: 5, name: "DST:X"},
+        ];
+        scripts = scripts.map(item => {
+          return {label: item.name, prop: 'tags', show: false, allowed: true, scriptId: item.id, type: "tag"};
+        });
+        let newTags = scripts.filter(item=>{ return !tagTitle.find(t =>{return item.label == t.label})});
+        let keepTags = tagTitle.filter(item=>{ return scripts.find(t =>{return item.label == t.label})});
+        keepTags.forEach(item => {
+          let script = scripts.find(t =>{return item.label == t.label});
+          item.scriptId = script.scriptId;
+        });
+        let result = tableTitle.concat([{label: this.$t("config.account.notification"), show: false, NotSet: true, type: 'title', prop:'table-tag'}]);
+
+        result = result.concat(keepTags).concat(newTags);
+        this.tools.customTableTitle = JSON.parse(JSON.stringify(result));
+      },
+      filterTags(scriptId, scope) {
+        let notification = scope.row.notifications.find(item => {
+          return scriptId === item.scriptId;
+        });
+        if (notification) {
+          return notification.account;
+        }
+      }
     },
     computed: {
       isCurrentUser() {
@@ -373,7 +426,7 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
-
+      this.resetTableTitle();
       this.getTableData();
       this.$nextTick(() => {
         //绑定滚动条事件，控制top按钮