feat：alert silence 列表页面增加 alerts 列

2022-04-15 13:06:02 +08:00
parent e9d1e6ce9c
commit 4f5e25bfb6
4 changed files with 429 additions and 272 deletions
--- a/nezha-fronted/build/webpack.dev.conf.js
+++ b/nezha-fronted/build/webpack.dev.conf.js
@@ -29,6 +29,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
      ],
    },
    hot: true,
+    inline:true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
--- a/nezha-fronted/config/index.js
+++ b/nezha-fronted/config/index.js
@@ -22,7 +22,7 @@ module.exports = {
    // host: '0.0.0.0', // can be overwritten by process.env.HOST
    host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
+    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -14,7 +14,8 @@
      :resizable="false"
      align="center"
      type="selection"
-      width="55">
+      width="55"
+    >
    </el-table-column>
    <el-table-column
      v-for="(item, index) in customTableTitle"
@@ -36,23 +37,38 @@
      </template>
      <template slot-scope="scope" :column="item">
        <template v-if="item.prop === 'duration'">
-          <el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right">
+          <el-tooltip
+            :disabled="!scope.row.endAt"
+            effect="light"
+            placement="right"
+          >
            <div slot="content">
-              {{$t('config.terminallog.endTime')}}<br/>
+              {{ $t("config.terminallog.endTime") }}<br />
              {{ utcTimeToTimezoneStr(scope.row.endAt) }}
            </div>
            <span>{{ getDuration(scope.row) }}</span>
          </el-tooltip>
        </template>
+        <template v-else-if="item.prop === 'alertNum'">
+          <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
+            <i
+              :class="scope.row.alertNum > 0 ? 'gray' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover(scope.row, true, $event)"
+              @mouseleave="tooltipHover(scope.row, false, $event)"
+            ></i><span>{{scope.row.alerts}}</span>
+          </span>
+        </template>
        <template v-else-if="item.prop === 'matchers'">
          <span v-for="(item1, i) in labelsSort(scope.row.matchers)" :key="i">
            <span>
              <nz-alert-tag
-                  :key="i" :cursor-point="tagType(item1.name) !== 'info'"
+                :key="i"
+                :cursor-point="tagType(item1.name) !== 'info'"
                :label="item1.name"
                :type="tagType(item1.name)"
                :regex="item1.regex"
-                  style="margin: 5px 0 5px 5px;"
+                style="margin: 5px 0 5px 5px"
              >
                {{ item1.value }}
              </nz-alert-tag>
@@ -60,9 +76,15 @@
          </span>
        </template>
        <template v-else-if="item.prop === 'state'">
-          <span v-if="scope.row.state===1" class="silence-active">active</span>
-          <span v-if="scope.row.state===2" class="silence-pending">pending</span>
-          <span v-if="scope.row.state===3" class="silence-expired">expired</span>
+          <span v-if="scope.row.state === 1" class="silence-active"
+            >active</span
+          >
+          <span v-if="scope.row.state === 2" class="silence-pending"
+            >pending</span
+          >
+          <span v-if="scope.row.state === 3" class="silence-expired"
+            >expired</span
+          >
        </template>
        <template v-else-if="item.prop === 'utime'">
          {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
@@ -70,26 +92,66 @@
        <template v-else-if="item.prop === 'startAt'">
          {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
        </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <span v-else-if="scope.row[item.prop]">{{
+          scope.row[item.prop] || "-"
+        }}</span>
        <template v-else>-</template>
      </template>
    </el-table-column>
-    <el-table-column
-      :resizable="false"
-      :width="operationWidth"
-      fixed="right">
-      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+    <el-table-column :resizable="false" :width="operationWidth" fixed="right">
+      <div slot="header" class="table-operation-title">
+        {{ $t("overall.option") }}
+      </div>
      <div slot-scope="scope" class="table-operation-items">
        <!--        <button :class="{'table-operation-item&#45;&#45;disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>-->
-        <button class="table-operation-item"  @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['alertSilence_expire', 'alertSilence_edit']" trigger="click" @command="tableOperation">
+        <button
+          class="table-operation-item"
+          @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"
+        >
+          <i class="nz-icon nz-icon-view1"></i>
+        </button>
+        <el-dropdown
+          size="medium"
+          v-has="['alertSilence_expire', 'alertSilence_edit']"
+          trigger="click"
+          @command="tableOperation"
+        >
          <div class="table-operation-item table-operation-item--more">
            <i class="nz-icon nz-icon-more3"></i>
          </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item :command="['edit', scope.row]" :class="{'table-operation-item--disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'alertSilence_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.delete')}}</span></el-dropdown-item>
+          <el-dropdown-menu
+            slot="dropdown"
+            class="right-box-select-top right-public-box-dropdown-top"
+          >
+            <el-dropdown-item
+              :command="['edit', scope.row]"
+              :class="{
+                'table-operation-item--disable': scope.row.state === 3,
+              }"
+              class="table-operation-item"
+              v-has="'alertSilence_edit'"
+              :disabled="scope.row.state === 3"
+              ><i class="nz-icon nz-icon-edit"></i
+              ><span class="operation-dropdown-text">{{
+                $t("overall.edit")
+              }}</span></el-dropdown-item
+            >
+            <el-dropdown-item
+              v-has="'alertSilence_edit'"
+              :command="['copy', scope.row]"
+              ><i class="nz-icon nz-icon-override"></i
+              ><span class="operation-dropdown-text">{{
+                $t("overall.duplicate")
+              }}</span></el-dropdown-item
+            >
+            <el-dropdown-item
+              v-has="'alertSilence_expire'"
+              :command="['delete', scope.row]"
+              ><i class="nz-icon nz-icon-delete"></i
+              ><span class="operation-dropdown-text">{{
+                $t("buttons.delete")
+              }}</span></el-dropdown-item
+            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
@@ -107,114 +169,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() {
    return {
      /* 表格相关 */
      tableTitle: [
        {
-          label: 'ID',
-          prop: 'id',
+          label: "ID",
+          prop: "id",
          show: true,
          width: 80,
-          sortable: 'custom'
+          sortable: "custom",
        },
        {
-          label: this.$t('alert.silence.name'),
-          prop: 'name',
+          label: this.$t("alert.silence.name"),
+          prop: "name",
          show: true,
-          minWidth: 150
-        }, {
-          label: this.$t('alert.silence.matchers'),
-          prop: 'matchers',
+          minWidth: 150,
+        },
+        {
+          label: this.$t("alert.silence.matchers"),
+          prop: "matchers",
          show: true,
          minWidth: 200,
-          sortable: 'custom'
-        }, {
-          label: this.$t('alert.silence.startTime'),
-          prop: 'startAt',
+          sortable: "custom",
+        },
+        {
+          label: this.$t("alert.alert"),
+          prop: "alertNum",
+          show: true,
+          minWidth: 120,
+          sortable: "custom",
+        },
+        {
+          label: this.$t("alert.silence.startTime"),
+          prop: "startAt",
          show: true,
          width: 300,
-          sortable: 'custom'
-        }, {
-          label: this.$t('config.terminallog.duration'),
-          prop: 'duration',
+          sortable: "custom",
+        },
+        {
+          label: this.$t("config.terminallog.duration"),
+          prop: "duration",
          show: true,
-          width: 120
-        }, {
-          label: this.$t('alert.silence.remark'),
-          prop: 'remark',
+          width: 120,
+        },
+        {
+          label: this.$t("alert.silence.remark"),
+          prop: "remark",
          show: true,
-          width: 120
-        }, {
-          label: this.$t('alert.silence.upTime'),
-          prop: 'utime',
+          width: 120,
+        },
+        {
+          label: this.$t("alert.silence.upTime"),
+          prop: "utime",
          show: false,
-          width: 300
-        }, {
-          label: this.$t('alert.silence.state'),
-          prop: 'state',
+          width: 300,
+        },
+        {
+          label: this.$t("alert.silence.state"),
+          prop: "state",
          show: true,
-          width: 120
-        }
-      ]
-    }
+          width: 120,
+        },
+      ],
+    };
  },
  computed: {
    getDuration() {
      return function (record) {
        if (record.endAt) {
-          return calcDurationByStringTimeB(record.startAt, record.endAt)
-        }
-        return calcDurationByStringTimeB(record.startAt, this.utcTimeToTimezoneStr(this.nowTime))
+          return calcDurationByStringTimeB(record.startAt, record.endAt);
        }
+        return calcDurationByStringTimeB(
+          record.startAt,
+          this.utcTimeToTimezoneStr(this.nowTime)
+        );
+      };
    },
    tagType() {
      return (key) => {
-        if (sameLabels.find(item => item === key)) {
-          return 'normal'
+        if (sameLabels.find((item) => item === key)) {
+          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 = []
+      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 => {
+        labels.forEach((item) => {
          if (item.name === key) {
-            result.push(item)
+            result.push(item);
          }
-        })
+        });
      }
-      labels.forEach(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>
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -10,11 +10,24 @@
      @search="search"
    >
      <template v-slot:top-tool-right>
-        <button id="roles-add" v-has="'alertSilence_add'" :title="$t('overall.createAlertSilence')" class="top-tool-btn margin-r-10"
-                type="button" @click="add">
+        <button
+          id="roles-add"
+          v-has="'alertSilence_add'"
+          :title="$t('overall.createAlertSilence')"
+          class="top-tool-btn margin-r-10"
+          type="button"
+          @click="add"
+        >
          <i class="nz-icon-create-square nz-icon"></i>
        </button>
-        <delete-button id="role-list-batch-delete" v-has="'alertSilence_expire'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          id="role-list-batch-delete"
+          v-has="'alertSilence_expire'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag = true"
+        ></delete-button>
      </template>
      <template v-slot:default="slotProps">
        <alert-silence-table
@@ -31,28 +44,59 @@
          @edit="edit"
          @copy="copy"
          @orderBy="tableDataSort"
+          @queryMessage="queryMessage"
          @reload="getTableData"
          @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></alert-silence-table>
+          @showBottomBox="
+            (targetTab, object) => {
+              $refs.dataList.showBottomBox(targetTab, object);
+            }
+          "
+        ></alert-silence-table>
      </template>
      <!-- 分页组件 -->
      <template v-slot:pagination>
-        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+        <Pagination
+          ref="Pagination"
+          :pageObj="pageObj"
+          :tableId="tableId"
+          @pageNo="pageNo"
+          @pageSize="pageSize"
+        ></Pagination>
      </template>
    </nz-data-list>
    <transition name="right-box">
-      <alert-silence-box v-if="rightBox.show" :alert-silence="object" @close="closeRightBox"></alert-silence-box>
+      <alert-silence-box
+        v-if="rightBox.show"
+        :alert-silence="object"
+        @close="closeRightBox"
+      ></alert-silence-box>
    </transition>
    <!--导出-->
    <div class="export-xlsx">
-      <el-dialog :modal-append-to-body='false' :show-close="true" :title="importBox.title"
-                 :visible.sync="importBox.show" class="nz-dialog" width="300px" @close="closeDialog">
+      <el-dialog
+        :modal-append-to-body="false"
+        :show-close="true"
+        :title="importBox.title"
+        :visible.sync="importBox.show"
+        class="nz-dialog"
+        width="300px"
+        @close="closeDialog"
+      >
        <div class="upload-body">
-          <button id="alert-msg-exportcur" class="el-button el-button--default el-button--small" @click="exportCur">
-            <span>{{$t('overall.exportCur')}}</span>
+          <button
+            id="alert-msg-exportcur"
+            class="el-button el-button--default el-button--small"
+            @click="exportCur"
+          >
+            <span>{{ $t("overall.exportCur") }}</span>
          </button>
-          <button id="alert-msg-exportall" class="el-button el-button--default el-button--small" @click="exportAll">
-            <span>{{$t('overall.exportAll')}}</span>
+          <button
+            id="alert-msg-exportall"
+            class="el-button el-button--default el-button--small"
+            @click="exportAll"
+          >
+            <span>{{ $t("overall.exportAll") }}</span>
          </button>
        </div>
      </el-dialog>
@@ -61,232 +105,266 @@
 </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() {
    return {
-      url: 'alert/silence',
-      tableId: 'silenceTable',
+      url: "alert/silence",
+      tableId: "silenceTable",
      /* 搜素相关 */
-      searchMsg: { // 给搜索框子组件传递的信息
+      searchMsg: {
+        // 给搜索框子组件传递的信息
        zheze_none: true,
        searchLabelList: [
          {
-            name: 'ID',
-            type: 'input',
-            label: 'ids',
-            disabled: false
-          }, {
-            name: this.$t('alert.silence.matchers'),
-            type: 'input',
-            label: 'matchers',
-            disabled: false
-          }
-        ]
+            name: "ID",
+            type: "input",
+            label: "ids",
+            disabled: false,
+          },
+          {
+            name: this.$t("alert.silence.matchers"),
+            type: "input",
+            label: "matchers",
+            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()
+    this.initEvent();
  },
  methods: {
+    queryMessage(alertRule) {
+      console.log(alertRule);
+      this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
+    },
    closeRightBox(refresh) {
-      this.rightBox.show = false
-      this.copyFlag = false
-      this.object = {}
+      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()
-      })
+      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)
-      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
-      this.exportExcel(searchLabel)
-      this.closeDialog()
+      const searchLabel = Object.assign({}, this.searchLabel);
+      this.$set(
+        searchLabel,
+        "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
-      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
-      this.exportExcel(temp)
-      this.closeDialog()
+      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();
    },
    closeDialog() {
-      this.importBox.show = false
-      this.deleteBox.show = false
+      this.importBox.show = false;
+      this.deleteBox.show = false;
    },
    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.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
-        this.tools.loading = false
-        this.nowTime = this.utcTimeToTimezoneStr(response.time)
+        ...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);
          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
-          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total;
+            if (
+              !this.scrollbarWrap &&
+              this.$refs.dataTable &&
+              this.$refs.dataTable.$refs.dataTable
+            ) {
              this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
+                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
+      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) {
-      this.$get(`${this.url}/${u.id}`).then(response => {
+      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
-              this.object.name = u.name.substring(0, u.name.length - length) + '-copy'
+              const length = this.object.name.length - 64;
+              this.object.name =
+                u.name.substring(0, u.name.length - length) + "-copy";
            }
          }
-          this.rightBox.show = true
+          this.rightBox.show = true;
        }
-      })
+      });
    },
    copy(u) {
-      this.edit(u, true)
+      this.edit(u, true);
    },
    del(row) {
-      this.$confirm(this.$t('tip.confirmExpired'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
+      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(response => {
+        this.$delete(this.url + "?ids=" + row.id + "&state=" + this.state).then(
+          (response) => {
            if (response.code === 200) {
-            this.delFlag = true
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.getTableData()
+              this.delFlag = true;
+              this.$message({
+                duration: 2000,
+                type: "success",
+                message: this.$t("tip.deleteSuccess"),
+              });
+              this.getTableData();
            } else {
-            this.$message.error(response.msg)
+              this.$message.error(response.msg);
            }
-        })
-      })
          }
+        );
+      });
+    },
  },
  created() {
    const searchKeys = {
      // key: path 键
      // value: vue set 参数
-      pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
-      pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
-      orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+      pageNo: { target: this.pageObj, propertyName: "pageNo", type: "number" },
+      pageSize: {
+        target: this.pageObj,
+        propertyName: "pageSize",
+        type: "number",
+      },
+      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'
-      }
-    }
-    this.initQueryFromPath(searchKeys)
-  }
-}
+        jsonKey: "val",
+      },
+    };
+    this.initQueryFromPath(searchKeys);
+  },
+};
 </script>