Merge branch 'notification' into codeCheck

# Conflicts: # nezha-fronted/src/components/page/config/account.vue
2020-11-21 18:03:06 +08:00
parent 092a547f6d a21ddd47ae
commit d58f36fa19
4 changed files with 179 additions and 21 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -570,7 +570,8 @@ const cn = {
      inputConfirmPwd: "请再次输入密码",
      invalidPwd: "无效的密码，最少6个字符",
      confirmPwdErr: "两次密码输入不一致",
-      reinputPwd: "请再次输入密码"
+      reinputPwd: "请再次输入密码",
+      notification: "通知"
    },
    promServer: {
      promServerList: "Prometheus服务",
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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"
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -57,10 +57,15 @@
          v-for="(item, index) in tools.customTableTitle"
          v-if="item.show"
          :key="`col-${index}`"
+          :fixed="item.fixed"
          :label="item.label"
          :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>
@@ -70,28 +75,31 @@
              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
            </div>
            <span v-else-if="item.prop == 'lang'">
-                            {{scope.row[item.prop] == 'en' ? 'English' : ''}}
-                            {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
-                            {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
-                        </span>
+                {{scope.row[item.prop] == 'en' ? 'English' : ''}}
+                {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
+                {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
+            </span>
            <span v-else-if="item.prop == 'receiver'">
-                            <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
-                        </span>
+                <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
+            </span>
            <span v-else-if="item.prop == 'status'">
-                            <el-switch
-                              v-model="scope.row.status"
-                              active-value="1"
-                              inactive-value="0"
-                              active-color="#ee9d3f"
-                              :disabled="isCurrentUser(scope.row.username)"
-                              @change="(val)=>{statusChange(scope.row)}">
-                            </el-switch>
-                        </span>
+                <el-switch
+                  v-model="scope.row.status"
+                  active-value="1"
+                  inactive-value="0"
+                  active-color="#ee9d3f"
+                  :disabled="isCurrentUser(scope.row.username)"
+                  @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>
        </el-table-column>
-        <el-table-column width="28">
+        <el-table-column width="28" fixed="right">
          <template slot="header" slot-scope="scope" :resizable="false">
            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
              <i class="nz-icon nz-icon-gear"></i>
@@ -165,7 +173,8 @@
          status: '1',
          createTime: '',
          receiver: [],
-          lang: ''
+          lang: '',
+          notifications: []
        },
        pageObj: { //分页对象
          pageNo: 1,
@@ -199,7 +208,8 @@
            label: this.$t('config.account.option'),
            prop: 'option',
            show: true,
-            width: 120
+            width: 120,
+            fixed: "right"
          }
        ],
        tableData: [],
@@ -281,6 +291,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
@@ -355,6 +372,46 @@
      plmouseleave(el,self){
        self.tools.tableHover = false;
      }
+
+      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 => {
+          let scripts = response.data.list;
+          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));
+        });
+        /*let scripts = [
+          {id: 1, name: "DOLBY"},
+          {id: 2, name: "IMAX"},
+          {id: 3, name: "CGS"},
+          {id: 4, name: "LUXE"},
+          {id: 5, name: "DST:X"},
+        ];*/
+      },
+      filterTags(scriptId, scope) {
+        this.$nextTick(() => {
+          let notification = scope.row.notifications.find(item => {
+            return scriptId === item.scriptId;
+          });
+          if (notification) {
+            return notification.account;
+          }
+        })
+
+      }
    },
    computed: {
      isCurrentUser() {