fix：silence 搜索框添加 state下拉

nezha-fronted/src/components/common/searchSelectInfo.js

@@ -350,13 +350,13 @@ export default {
         silenceState: [
           {
             value: 1,
-            label: this.$t('issue.open')
+            label: this.$t('silence.active')
           }, {
             value: 2,
-            label: this.$t('issue.hasBeenAssigned')
+            label: this.$t('silence.pending')
           }, {
             value: 3,
-            label: this.$t('issue.beingProcessed')
+            label: this.$t('silence.expired')
           }
         ],
         priority: [

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -81,13 +81,13 @@
         </template>
         <template v-else-if="item.prop === 'state'">
           <span v-if="scope.row.state === 1" class="silence-active"
-            >active</span
+            >{{$t('silence.active')}}</span
           >
           <span v-if="scope.row.state === 2" class="silence-pending"
-            >pending</span
+            >{{$t('silence.pending')}}</span
           >
           <span v-if="scope.row.state === 3" class="silence-expired"
-            >expired</span
+            >{{$t('silence.expired')}}</span
           >
         </template>
         <template v-else-if="item.prop === 'utime'">
@@ -180,130 +180,130 @@
 </template>
 
 <script>
-import table from "@/components/common/mixin/table";
-import { calcDurationByStringTimeB } from "@/components/common/js/tools";
-import nzAlertTag from "../../../page/alert/nzAlertTag";
-import { sameLabels } from "@/components/common/js/constants";
+import table from '@/components/common/mixin/table'
+import { calcDurationByStringTimeB } from '@/components/common/js/tools'
+import nzAlertTag from '../../../page/alert/nzAlertTag'
+import { sameLabels } from '@/components/common/js/constants'
 export default {
-  name: "alertSilenceTable",
+  name: 'alertSilenceTable',
   components: {
-    nzAlertTag,
+    nzAlertTag
   },
   mixins: [table],
   props: {
     loading: Boolean,
-    nowTime: {},
+    nowTime: {}
   },
-  data() {
+  data () {
     return {
       /* 表格相关 */
       tableTitle: [
         {
-          label: "ID",
-          prop: "id",
+          label: 'ID',
+          prop: 'id',
           show: true,
           width: 80,
-          sortable: "custom",
+          sortable: 'custom'
         },
         {
-          label: this.$t("overall.name"),
-          prop: "name",
+          label: this.$t('overall.name'),
+          prop: 'name',
           show: true,
-          minWidth: 150,
+          minWidth: 150
         },
         {
-          label: this.$t("alert.silence.matchers"),
-          prop: "matchers",
+          label: this.$t('alert.silence.matchers'),
+          prop: 'matchers',
           show: true,
           minWidth: 200,
-          sortable: "custom",
+          sortable: 'custom'
         },
         {
-          label: this.$t("overall.startTime"),
-          prop: "startAt",
+          label: this.$t('overall.startTime'),
+          prop: 'startAt',
           show: true,
           width: 300,
-          sortable: "custom",
+          sortable: 'custom'
         },
         {
-          label: this.$t("config.terminallog.duration"),
-          prop: "duration",
+          label: this.$t('config.terminallog.duration'),
+          prop: 'duration',
           show: true,
-          width: 120,
+          width: 120
         },
         {
-          label: this.$t("overall.remark"),
-          prop: "remark",
+          label: this.$t('overall.remark'),
+          prop: 'remark',
           show: true,
-          width: 120,
+          width: 120
         },
         {
-          label: this.$t("alert.silence.upTime"),
-          prop: "utime",
+          label: this.$t('alert.silence.upTime'),
+          prop: 'utime',
           show: false,
-          width: 300,
+          width: 300
         },
         {
-          label: this.$t("alert.alert"),
-          prop: "alertNum",
+          label: this.$t('alert.alert'),
+          prop: 'alertNum',
           show: false,
           width: 120,
-          sortable: "custom",
+          sortable: 'custom'
         },
         {
-          label: this.$t("overall.state"),
-          prop: "state",
+          label: this.$t('overall.state'),
+          prop: 'state',
           show: true,
-          width: 120,
-        },
-      ],
-    };
+          width: 120
+        }
+      ]
+    }
   },
   computed: {
-    getDuration() {
+    getDuration () {
       return function (record) {
         if (record.endAt) {
-          return calcDurationByStringTimeB(record.startAt, record.endAt);
+          return calcDurationByStringTimeB(record.startAt, record.endAt)
         }
         return calcDurationByStringTimeB(
           record.startAt,
           this.utcTimeToTimezoneStr(this.nowTime)
-        );
-      };
+        )
+      }
     },
-    tagType() {
+    tagType () {
       return (key) => {
         if (sameLabels.find((item) => item === key)) {
-          return "normal";
+          return 'normal'
         } else {
-          return "info";
+          return 'info'
         }
-      };
-    },
+      }
+    }
   },
   methods: {
-    labelsSort(obj) {
-      obj = obj || [];
-      const buildIn = sameLabels;
-      if (typeof obj === "string") obj = JSON.parse(obj);
-      const labels = JSON.parse(JSON.stringify(obj));
-      const result = [];
-      const result2 = [];
+    labelsSort (obj) {
+      obj = obj || []
+      const buildIn = sameLabels
+      if (typeof obj === 'string') obj = JSON.parse(obj)
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      const result2 = []
       for (const key of buildIn) {
         labels.forEach((item) => {
           if (item.name === key) {
-            result.push(item);
+            result.push(item)
           }
-        });
+        })
       }
       labels.forEach((item) => {
         if (buildIn.indexOf(item.name) === -1) {
-          result2.push(item);
+          result2.push(item)
         }
-      });
+      })
       // console.log([...result, ...result2])
-      return [...result, ...result2];
-    },
-  },
-};
+      return [...result, ...result2]
+    }
+  }
+}
 </script>

nezha-fronted/src/components/page/alert/alertSilence.vue

@@ -109,153 +109,159 @@
 </template>
 
 <script>
-import bus from "@/libs/bus";
-import alertSilenceBox from "@/components/common/rightBox/alertSilenceBox";
-import deleteButton from "@/components/common/deleteButton";
-import nzDataList from "@/components/common/table/nzDataList";
-import dataListMixin from "@/components/common/mixin/dataList";
-import alertSilenceTable from "@/components/common/table/alert/alertSilenceTable";
-import routerPathParams from "@/components/common/mixin/routerPathParams";
+import bus from '@/libs/bus'
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import deleteButton from '@/components/common/deleteButton'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import alertSilenceTable from '@/components/common/table/alert/alertSilenceTable'
+import routerPathParams from '@/components/common/mixin/routerPathParams'
 
 export default {
-  name: "alertSilence",
+  name: 'alertSilence',
   components: {
     alertSilenceTable,
     deleteButton,
     nzDataList,
-    alertSilenceBox,
+    alertSilenceBox
   },
   mixins: [dataListMixin, routerPathParams],
-  data() {
+  data () {
     return {
-      url: "alert/silence",
-      tableId: "silenceTable",
+      url: 'alert/silence',
+      tableId: 'silenceTable',
       /* 搜素相关 */
       searchMsg: {
         // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [
           {
-            name: "ID",
-            type: "input",
-            label: "ids",
-            disabled: false,
+            name: 'ID',
+            type: 'input',
+            label: 'ids',
+            disabled: false
           },
           {
-            name: this.$t("alert.silence.matchers"),
-            type: "input",
-            label: "matchers",
-            disabled: false,
+            name: this.$t('alert.silence.matchers'),
+            type: 'input',
+            label: 'matchers',
+            disabled: false
           },
-        ],
+          {
+            name: this.$t('overall.state'),
+            type: 'select',
+            label: 'silenceState',
+            disabled: false
+          }
+        ]
       },
       // 导出相关
-      importBox: { show: false, title: this.$t("overall.exportExcel") },
-      deleteBox: { show: false, ids: "", remark: "", state: 2 },
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
       // 创建修改相关
       blankObject: {
-        id: "",
-        startAt: "",
-        endAt: "",
-        ruleId: "",
-        type: "asset",
-        linkId: "",
-        remark: "",
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
         time: [],
-        matchers: [{ name: "", value: "", regex: 0 }],
-        name: "",
+        matchers: [{ name: '', value: '', regex: 0 }],
+        name: ''
       },
-      nowTime: "",
-    };
+      nowTime: ''
+    }
   },
-  mounted() {
-    this.initEvent();
+  mounted () {
+    this.initEvent()
   },
   methods: {
-    queryMessage(alertRule) {
+    queryMessage (alertRule) {
       this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
     },
-    closeRightBox(refresh) {
-      this.rightBox.show = false;
-      this.copyFlag = false;
-      this.object = {};
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      this.copyFlag = false
+      this.object = {}
       if (refresh) {
-        this.delFlag = true;
-        this.getTableData();
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    initEvent() {
-      bus.$on("alert-rule-list-change", () => {
-        this.getTableData();
-      });
-      bus.$on("dc-list-change", () => {
-        this.getTableData();
-      });
-      bus.$on("alert-message-change", () => {
-        this.getTableData();
-      });
+    initEvent () {
+      bus.$on('alert-rule-list-change', () => {
+        this.getTableData()
+      })
+      bus.$on('dc-list-change', () => {
+        this.getTableData()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getTableData()
+      })
     },
-    exportCur() {
-      const searchLabel = Object.assign({}, this.searchLabel);
+    exportCur () {
+      const searchLabel = Object.assign({}, this.searchLabel)
       this.$set(
         searchLabel,
-        "language",
-        localStorage.getItem("nz-language")
-          ? localStorage.getItem("nz-language")
-          : "en"
-      );
-      this.exportExcel(searchLabel);
-      this.closeDialog();
+        'language',
+        localStorage.getItem('nz-language')
+          ? localStorage.getItem('nz-language')
+          : 'en'
+      )
+      this.exportExcel(searchLabel)
+      this.closeDialog()
     },
-    exportAll() {
-      const temp = JSON.parse(JSON.stringify(this.searchLabel));
-      temp.pageSize = -1;
+    exportAll () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
       this.$set(
         temp,
-        "language",
-        localStorage.getItem("nz-language")
-          ? localStorage.getItem("nz-language")
-          : "en"
-      );
-      this.exportExcel(temp);
-      this.closeDialog();
+        'language',
+        localStorage.getItem('nz-language')
+          ? localStorage.getItem('nz-language')
+          : 'en'
+      )
+      this.exportExcel(temp)
+      this.closeDialog()
     },
-    closeDialog() {
-      this.importBox.show = false;
-      this.deleteBox.show = false;
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
     },
-    getTableData(params) {
+    getTableData (params) {
       if (params && Object.keys(params).length > 0) {
         for (const key in params) {
-          this.$set(this.searchLabel, key, params[key]);
+          this.$set(this.searchLabel, key, params[key])
         }
       }
       if (this.orderBy) {
-        this.$set(this.searchLabel, "orderBy", this.orderBy);
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
       } else {
-        delete this.searchLabel.orderBy;
+        delete this.searchLabel.orderBy
       }
-      this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-      this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-      this.tools.loading = true;
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
       const alertRuleParam = {
         ...this.searchLabel,
-        ...this.searchCheckBox,
-      };
-      const path = this.fromRoute.alertSilence;
-      this.updatePath(alertRuleParam, path);
+        ...this.searchCheckBox
+      }
+      const path = this.fromRoute.alertSilence
+      this.updatePath(alertRuleParam, path)
       this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(
         (response) => {
-          this.tools.loading = false;
-          this.nowTime = this.utcTimeToTimezoneStr(response.time);
+          this.tools.loading = false
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
           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].status = response.data.list[i].status + ''
               // response.data.list[i].startAt = bus.UTCTimeToConfigTimezone(response.data.list[i].startAt)
               // response.data.list[i].endAt = bus.UTCTimeToConfigTimezone(response.data.list[i].endAt)
             }
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
+            this.tableData = response.data.list
+            this.pageObj.total = response.data.total
             if (
               !this.scrollbarWrap &&
               this.$refs.dataTable &&
@@ -263,111 +269,126 @@ export default {
             ) {
               this.$nextTick(() => {
                 this.scrollbarWrap =
-                  this.$refs.dataTable.$refs.dataTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
+                  this.$refs.dataTable.$refs.dataTable.bodyWrapper
+                this.toTopBtnHandler(this.scrollbarWrap)
+              })
             }
           }
         }
-      );
+      )
     },
-    add() {
-      this.blankObject.startAt = bus.getOffsetTimezoneData();
-      this.blankObject.endAt = bus.getOffsetTimezoneData(1);
-      this.object = JSON.parse(JSON.stringify(this.blankObject));
-      this.rightBox.show = true;
+    add () {
+      this.blankObject.startAt = bus.getOffsetTimezoneData()
+      this.blankObject.endAt = bus.getOffsetTimezoneData(1)
+      this.object = JSON.parse(JSON.stringify(this.blankObject))
+      this.rightBox.show = true
     },
-    edit(u, copyFlag) {
+    edit (u, copyFlag) {
       this.$get(`${this.url}/${u.id}`).then((response) => {
         if (response.code === 200) {
           this.object = {
             ...response.data,
             matchers: JSON.parse(response.data.matchers),
             startAt: bus.UTCTimeToConfigTimezone(response.data.startAt),
-            endAt: bus.UTCTimeToConfigTimezone(response.data.endAt),
-          };
+            endAt: bus.UTCTimeToConfigTimezone(response.data.endAt)
+          }
           if (copyFlag) {
-            this.object.id = "";
-            this.object.name = this.object.name + "-copy";
+            this.object.id = ''
+            this.object.name = this.object.name + '-copy'
             if (this.object.name.length > 64) {
-              const length = this.object.name.length - 64;
+              const length = this.object.name.length - 64
               this.object.name =
-                u.name.substring(0, u.name.length - length) + "-copy";
+                u.name.substring(0, u.name.length - length) + '-copy'
             }
           }
-          this.rightBox.show = true;
+          this.rightBox.show = true
         }
-      });
+      })
     },
-    copy(u) {
-      this.edit(u, true);
+    copy (u) {
+      this.edit(u, true)
     },
-    del(row) {
-      this.$confirm(this.$t("tip.confirmExpired"), {
-        confirmButtonText: this.$t("tip.yes"),
-        cancelButtonText: this.$t("tip.no"),
-        type: "warning",
+    del (row) {
+      this.$confirm(this.$t('tip.confirmExpired'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
       }).then(() => {
-        this.$delete(this.url + "?ids=" + row.id + "&state=" + this.state).then(
+        this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(
           (response) => {
             if (response.code === 200) {
-              this.delFlag = true;
+              this.delFlag = true
               this.$message({
                 duration: 2000,
-                type: "success",
-                message: this.$t("tip.deleteSuccess"),
-              });
-              this.getTableData();
+                type: 'success',
+                message: this.$t('tip.deleteSuccess')
+              })
+              this.getTableData()
             } else {
-              this.$message.error(response.msg);
+              this.$message.error(response.msg)
             }
           }
-        );
-      });
-    },
+        )
+      })
+    }
   },
-  created() {
+  created () {
     const searchKeys = {
       // key: path 键
       // value: vue set 参数
-      pageNo: { target: this.pageObj, propertyName: "pageNo", type: "number" },
+      pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
       pageSize: {
         target: this.pageObj,
-        propertyName: "pageSize",
-        type: "number",
+        propertyName: 'pageSize',
+        type: 'number'
       },
-      orderBy: { target: this.$data, propertyName: "orderBy", type: "string" },
+      orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
       ids: {
         target: this.searchLabel,
         isSearchInput: true,
-        propertyName: "ids",
-        type: "string",
+        propertyName: 'ids',
+        type: 'string',
         defaultJson: {
           disabled: false,
-          id: "ids",
-          label: "ids",
-          name: "ID",
-          type: "input",
-          val: "",
+          id: 'ids',
+          label: 'ids',
+          name: 'ID',
+          type: 'input',
+          val: ''
         },
-        jsonKey: "val",
+        jsonKey: 'val'
       },
       matchers: {
         target: this.searchLabel,
         isSearchInput: true,
-        propertyName: "matchers",
-        type: "string",
+        propertyName: 'matchers',
+        type: 'string',
         defaultJson: {
           disabled: false,
-          label: "matchers",
-          name: "Matcher",
-          type: "input",
-          val: "",
+          label: 'matchers',
+          name: 'Matcher',
+          type: 'input',
+          val: ''
         },
-        jsonKey: "val",
+        jsonKey: 'val'
       },
-    };
-    this.initQueryFromPath(searchKeys);
-  },
-};
+      state: {
+        target: this.searchLabel,
+        isSearchInput: true,
+        propertyName: 'state',
+        type: 'number',
+        defaultJson: {
+          name: 'state',
+          type: 'select',
+          label: 'silenceState',
+          disabled: false,
+          val: '',
+          listStr: 'silenceState'
+        },
+        jsonKey: 'valnum',
+      }
+    }
+    this.initQueryFromPath(searchKeys)
+  }
+}
 </script>