remove device shadow

package.json

@@ -24,9 +24,9 @@
     "@vueuse/core": "9.5.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "ant-design-vue": "^4.0.0-rc.5",
     "axios": "0.27.2",
     "chart.js": "^4.2.1",
-    "dayjs": "^1.11.7",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
@@ -34,6 +34,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
     "lodash-es": "^4.17.21",
+    "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "patternomaly": "^1.3.2",
     "pinia": "2.0.22",

src/components/PagedSelect.vue

@@ -1,56 +1,271 @@
 <script setup>
-import { ref } from "vue";
+import {
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRefs,
+  watch,
+  watchEffect,
+} from "vue";
 import InfiniteLoading from "v3-infinite-loading";
-import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
+import "v3-infinite-loading/lib/style.css";
+import { debounce } from "lodash-es"; //required if you're not going to override default slots
+import { ElInput, ElPopover, ElScrollbar } from "element-plus";
 
 const props = defineProps({
-  modelValue: {
-    type: Object,
-  },
+  modelValue: {},
   remoteMethod: {
     type: Function,
+    required: true,
+  },
+  size: {
+    type: String,
+  },
+  width: {
+    type: Number,
+  },
+  prefixIcon: { type: String },
+  query: {
+    type: Object,
+    required: true,
   },
   prop: {
     type: Object,
     required: true,
   },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  defaultLabel: {
+    type: String,
+  },
 });
-const emit = defineEmits(["update:modelValue"]);
-const placeholder = ref();
 
-const loadMore = () => {
-  console.log("load more");
+const { modelValue } = toRefs(props);
+const loadKey = ref(0);
+const emit = defineEmits(["update:modelValue", "change", "confirm"]);
+
+const showPopOver = ref(false);
+
+const inputRefWhenShowPop = ref();
+const placeholderWhenShowPop = ref("");
+const placeholderWhenNotShowPop = ref("");
+const optionLabelWhenShowPop = ref("");
+const optionLabelWhenNotShowPop = ref("");
+const echoLabel = ref("");
+const options = ref([]);
+const page = ref(0);
+
+const initOptions = (keyword) => {
+  props
+    .remoteMethod({
+      [props.query.page]: page.value,
+      [props.query.size]: 10,
+      [props.query.searchKey]: keyword,
+    })
+    .then((rows) => {
+      options.value = rows;
+    });
 };
+
+const loadMore = async ($state) => {
+  page.value++;
+  props
+    .remoteMethod({
+      [props.query.page]: page.value,
+      [props.query.size]: 10,
+      [props.query.searchKey]: showPopOver.value
+        ? optionLabelWhenShowPop.value ?? null
+        : null,
+    })
+    .then((rows) => {
+      options.value.push(...rows);
+      if (rows.length < 10) {
+        $state.complete();
+      } else {
+        $state.loaded();
+      }
+    })
+    .catch(() => {
+      $state.error();
+    });
+};
+
+const handleInputClick = () => {
+  showPopOver.value = true;
+  placeholderWhenShowPop.value = optionLabelWhenNotShowPop.value;
+  nextTick(() => {
+    if (inputRefWhenShowPop.value) {
+      inputRefWhenShowPop.value.focus();
+    }
+  });
+};
+
+/**
+ * 清除选项
+ */
+const handleClearSeletion = () => {
+  emit("update:modelValue", null);
+};
+/**
+ * 点击选项
+ * @param option
+ */
+const selectOption = (option) => {
+  emit("update:modelValue", option[props.prop.value]);
+  emit("confirm", option);
+  /*重新加载选项*/
+  if (optionLabelWhenShowPop.value) {
+    page.value = 0;
+    options.value = [];
+    loadKey.value++;
+  }
+
+  showPopOver.value = false;
+
+  echoLabel.value = option[props.prop.label];
+  optionLabelWhenShowPop.value = "";
+};
+
+/**
+ * 输入时,搜索选项
+ * @type {DebouncedFuncLeading<(function(*): void)|*> | DebouncedFunc<(function(*): void)|*>}
+ */
+const handleInputChange = debounce((value) => {
+  page.value = 0;
+  options.value = [];
+  loadKey.value++;
+}, 500);
+
+watchEffect(() => {
+  if (showPopOver.value) return;
+  if (modelValue.value) {
+    optionLabelWhenNotShowPop.value =
+      options.value.find((el) => el[props.prop.value] === modelValue.value)?.[
+        props.prop.label
+      ] ??
+      echoLabel.value ??
+      props.defaultLabel ??
+      "...";
+  } else {
+    optionLabelWhenNotShowPop.value = "";
+    placeholderWhenNotShowPop.value = props.placeholder;
+  }
+});
+
+watch(modelValue, (value) => {
+  emit("change", value);
+});
+
+/**
+ * 点击空白关闭弹出选项列表
+ * @param event
+ */
+const handleBodyClick = (event) => {
+  if (showPopOver.value) {
+    if (optionLabelWhenShowPop.value) {
+      page.value = 0;
+      options.value = [];
+      loadKey.value++;
+    }
+    showPopOver.value = false;
+    optionLabelWhenShowPop.value = "";
+  }
+};
+
+onMounted(() => {
+  page.value++;
+  initOptions();
+  document.body.addEventListener("click", handleBodyClick);
+});
+
+onUnmounted(() => {
+  document.body.removeEventListener("click", handleBodyClick);
+});
 </script>
 
 <template>
-  <div class="app-container">
   <el-popover
     :popper-style="{
       padding: 0,
     }"
-      :width="320"
+    :visible="showPopOver"
+    :width="width ?? 240"
     placement="bottom"
-      trigger="click"
   >
     <template #reference>
-        <div style="width: 320px">
-          <el-input :placeholder="placeholder" />
+      <div :style="`width: ${width ?? 240}px`">
+        <!--选项显示时-->
+        <el-input
+          v-if="showPopOver"
+          ref="inputRefWhenShowPop"
+          v-model="optionLabelWhenShowPop"
+          :placeholder="placeholderWhenShowPop"
+          :prefix-icon="prefixIcon"
+          :size="size ?? 'default'"
+          class="select-inner"
+          suffix-icon="ArrowUp"
+          @input="handleInputChange"
+          @click.stop
+        >
+          <template #prefix>
+            <slot name="prefix" />
+          </template>
+        </el-input>
+        <!--选项隐藏时-->
+        <el-input
+          v-else
+          v-model="optionLabelWhenNotShowPop"
+          :placeholder="placeholderWhenNotShowPop"
+          :prefix-icon="prefixIcon"
+          :size="size ?? 'default'"
+          class="select-inner"
+          clearable
+          suffix-icon="ArrowDown"
+          @clear="handleClearSeletion"
+          @click.stop="handleInputClick"
+        >
+          <!--            @blur="handleInputBlur"-->
+          <template #prefix>
+            <slot name="prefix" />
+          </template>
+        </el-input>
       </div>
     </template>
-      <el-scrollbar class="options-wrap" height="300">
+    <el-scrollbar class="options-wrap" height="260" @click.stop>
       <ul class="options">
-          <li v-for="i in 32" :key="i" class="option-item">option</li>
+        <li
+          v-for="option in options"
+          :key="option[prop.value]"
+          :class="`option-item ${
+            option[prop.value] === modelValue ? 'selected' : null
+          }`"
+          @click.stop="selectOption(option)"
+        >
+          {{ option[prop.label] }}
+        </li>
       </ul>
-        <infinite-loading @infinite="loadMore"> </infinite-loading>
+      <infinite-loading :identifier="loadKey" @infinite="loadMore">
+        <template #spinner>
+          <div style="text-align: center; font-size: 12px">......</div>
+        </template>
+        <template #complete>
+          <div
+            style="display: flex; justify-content: center; align-items: center"
+          >
+            -
+          </div>
+        </template>
+      </infinite-loading>
     </el-scrollbar>
   </el-popover>
-  </div>
 </template>
 
 <style lang="scss" scoped>
 .options-wrap {
-  //height: 300px;
+  margin: 6px 0;
 
   .options {
     list-style: none;
@@ -58,13 +273,17 @@ const loadMore = () => {
     padding: 0;
 
     .option-item {
-      color: #409eff;
       height: 32px;
       cursor: pointer;
       font-size: 14px;
       display: flex;
       align-items: center;
       padding: 0 32px 0 20px;
+      font-weight: 700;
+
+      &.selected {
+        color: #409eff;
+      }
 
       &:hover {
         background-color: #f5f7fa;
@@ -72,4 +291,8 @@ const loadMore = () => {
     }
   }
 }
+
+.select-inner {
+  cursor: pointer;
+}
 </style>

src/main.js

@@ -46,9 +46,7 @@ import TreeSelect from "@/components/TreeSelect";
 // 字典标签组件
 import DictTag from "@/components/DictTag";
 
-// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-
-// pinia.use(piniaPluginPersistedstate)
+import "dayjs/locale/zh-cn";
 
 window._AMapSecurityConfig = {
   securityJsCode: "2b65e7751cb17e4605f4c4cdccf885f6",

src/views/iot/device/detail.vue

@@ -121,13 +121,13 @@
                   @selected="handleMapSelected"
                 />
               </el-form-item>
-              <el-form-item label="设备影子" prop="isShadow">
-                <el-switch
-                  v-model="form.isShadow"
-                  :active-value="1"
-                  :inactive-value="0"
-                />
-              </el-form-item>
+              <!--              <el-form-item label="设备影子" prop="isShadow">-->
+              <!--                <el-switch-->
+              <!--                  v-model="form.isShadow"-->
+              <!--                  :active-value="1"-->
+              <!--                  :inactive-value="0"-->
+              <!--                />-->
+              <!--              </el-form-item>-->
               <el-form-item label="启用状态" prop="status">
                 <el-switch
                   v-model="form.status"
@@ -219,7 +219,7 @@ function reset() {
     firmwareVersion: null,
     status: null,
     rssi: null,
-    isShadow: null,
+    // isShadow: null,
     locationWay: null,
     thingsModelValue: null,
     networkAddress: null,

src/views/iot/device/index.vue

@@ -450,13 +450,13 @@
         <!--            </el-form-item>-->
         <!--          </el-col>-->
         <!--        </el-row>-->
-        <el-form-item label="设备影子" prop="isShadow">
-          <el-switch
-            v-model="form.isShadow"
-            :active-value="1"
-            :inactive-value="0"
-          />
-        </el-form-item>
+        <!--        <el-form-item label="设备影子" prop="isShadow">-->
+        <!--          <el-switch-->
+        <!--            v-model="form.isShadow"-->
+        <!--            :active-value="1"-->
+        <!--            :inactive-value="0"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
         <el-form-item label="启用状态" prop="status">
           <el-switch
             v-model="form.status"
@@ -553,7 +553,7 @@ const data = reactive({
     firmwareVersion: null,
     status: null,
     rssi: null,
-    isShadow: null,
+    // isShadow: null,
     locationWay: null,
     thingsModelValue: null,
     networkAddress: null,
@@ -615,7 +615,7 @@ function reset() {
     firmwareVersion: null,
     status: null,
     rssi: null,
-    isShadow: null,
+    // isShadow: null,
     locationWay: null,
     thingsModelValue: null,
     networkAddress: null,

src/views/maintenance/handle-order/index.vue

@@ -31,25 +31,16 @@
         <!--          @keyup.enter="handleQuery"-->
         <!--        />-->
       </el-form-item>
-      <el-form-item label="负责工人" prop="workerId">
-        <el-select
-          v-model="queryParams.workerId"
-          :remote-method="loadWorkOptions"
-          clearable
-          filterable
-          placeholder="请选择负责工人"
-          remote
-          remote-show-suffix
-        >
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态">
           <el-option
-            v-for="option in workerOptions"
-            :key="option.userId"
-            :label="option.nickName"
-            :value="option.userId"
+            v-for="option in orderStatusDict"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
           />
         </el-select>
       </el-form-item>
-      <!--      <el-form-item> </el-form-item>-->
 
       <!--      <el-form-item label="建议完成时间" prop="suggestCompleteTime">-->
       <!--        <el-date-picker-->
@@ -145,7 +136,12 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column align="center" type="selection" width="55" />
-      <el-table-column align="center" label="工单编号" prop="orderNumber" />
+      <el-table-column
+        align="center"
+        label="工单编号"
+        prop="orderNumber"
+        width="280"
+      />
       <el-table-column align="center" label="级别" prop="level">
         <template #default="{ row }">
           <dict-tag :options="orderLevel" :value="row.level" effect="dark" />
@@ -183,7 +179,7 @@
         </template>
       </el-table-column>
       <!--      <el-table-column align="center" label="驳回理由" prop="rejectReason" />-->
-      <el-table-column align="center" label="备注" prop="remark" />
+      <!--      <el-table-column align="center" label="备注" prop="remark" />-->
       <el-table-column
         align="center"
         class-name="small-padding fixed-width"
@@ -208,7 +204,7 @@
             >详情
           </el-button>
           <el-button
-            v-if="row.status !== '4'"
+            v-if="row.status !== '4' && row.status !== '2'"
             icon="upload"
             link
             type="primary"
@@ -779,6 +775,6 @@ const handleConfirmAlertSelect = ({ list, regionId, regionName }) => {
 //     })
 //     .catch(() => {});
 // };
-loadWorkOptions();
+// loadWorkOptions();
 getList();
 </script>

src/views/maintenance/order/detail.vue

@@ -1,7 +1,8 @@
-<script setup>
+<script lang="jsx" setup>
 import { useRoute, useRouter } from "vue-router";
 import { getOrder } from "@/api/maintenance/order";
 import {
+  commitHandleOrder,
   getHandleOrder,
   updateHandleOrder,
 } from "@/api/maintenance/handle_order";
@@ -14,7 +15,7 @@ import {
   orderStatusDict,
 } from "@/constant/dict";
 import DictTag from "@/components/DictTag/index.vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { cloneDeep } from "lodash-es";
 import Review from "@/views/maintenance/order/review.vue";
 
@@ -151,6 +152,21 @@ const submitHandleAlert = () => {
   });
 };
 
+const handleCommitOrder = (orderId) => {
+  const messageVNode = () => <>是否确认提交审核</>;
+  ElMessageBox.confirm(messageVNode, "提交审核", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      commitHandleOrder(orderId).then(() => {
+        ElMessage.success("提交审核成功");
+        getList();
+      });
+    })
+    .catch(() => {});
+};
+
 if (route.query.id) {
   loadDetail(route.query.id);
 } else {
@@ -162,18 +178,42 @@ if (route.query.id) {
 
 <template>
   <div class="app-container">
+    <el-row>
+      <el-col :span="6">
+        <el-alert
+          v-if="detail.status === '2' || detail.status === '3'"
+          :type="detail.status === '2' ? 'success' : 'error'"
+          >{{ orderStatusDict.find((el) => el.value === detail.status)?.label }}
+          <template v-if="detail.status === '3' && detail.rejectReason">
+            驳回原因: {{ detail.rejectReason }}
+          </template>
+        </el-alert>
+      </el-col>
+      <el-col :span="1.5">
         <el-button
-      v-if="route.path === '/maintenance/order-detail' && detail.status === '4'"
+          v-if="
+            route.path === '/maintenance/order-detail' && detail.status === '4'
+          "
           icon="check"
           type="primary"
           @click="handleReview"
           >审核
         </el-button>
-    <el-alert
-      v-if="detail.status === '2' || detail.status === '3'"
-      :type="detail.status === '2' ? 'success' : 'error'"
-      >{{ orderStatusDict.find((el) => el.value === detail.status)?.label }}
-    </el-alert>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-if="
+            route.path === '/maintenance/handle-order-detail' &&
+            detail.status !== '4' &&
+            detail.status !== '2'
+          "
+          icon="upload"
+          type="primary"
+          @click="handleCommitOrder"
+          >提交审核
+        </el-button>
+      </el-col>
+    </el-row>
     <el-table
       :data="detail.alerts"
       :expand-row-keys="defaultRowKeys"

src/views/maintenance/order/index.vue

@@ -35,6 +35,19 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="负责工人" prop="workerId">
+        <paged-select
+          v-model="queryParams.workerId"
+          :prop="{ label: 'nickName', value: 'userId' }"
+          :query="{
+            page: 'pageNum',
+            size: 'pageSize',
+            searchKey: 'nickName',
+          }"
+          :remote-method="loadWorkerOptions"
+        />
+      </el-form-item>
+      <!--      </el-form-item>-->
       <!--      <el-form-item label="负责工人" prop="workerId">-->
       <!--        <el-select-->
       <!--          v-model="queryParams.workerId"-->
@@ -148,7 +161,12 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column align="center" type="selection" width="55" />
-      <el-table-column align="center" label="工单编号" prop="orderNumber" />
+      <el-table-column
+        align="center"
+        label="工单编号"
+        prop="orderNumber"
+        width="280"
+      />
       <el-table-column align="center" label="级别" prop="level">
         <template #default="{ row }">
           <dict-tag :options="orderLevel" :value="row.level" effect="dark" />
@@ -186,7 +204,12 @@
         </template>
       </el-table-column>
       <!--      <el-table-column align="center" label="驳回理由" prop="rejectReason" />-->
-      <el-table-column align="center" label="备注" prop="remark" />
+      <!--      <el-table-column-->
+      <!--        align="center"-->
+      <!--        label="备注"-->
+      <!--        prop="remark"-->
+      <!--        show-overflow-tooltip-->
+      <!--      />-->
       <el-table-column
         align="center"
         class-name="small-padding fixed-width"
@@ -276,28 +299,38 @@
           </el-select>
         </el-form-item>
         <el-form-item label="负责工人" prop="workerId">
-          <!--<el-input v-model="form.workerId" placeholder="请输入负责工人ID" />-->
-          <el-select
+          <paged-select
             v-model="form.workerId"
-            :remote-method="loadWorkOptions"
-            clearable
-            filterable
-            placeholder="请选择负责工人"
-            remote
-            remote-show-suffix
-            @change="
-              form.workerName = workerOptions.find(
-                (el) => el.userId === $event
-              )?.nickName
-            "
-          >
-            <el-option
-              v-for="option in workerOptions"
-              :key="option.userId"
-              :label="option.nickName"
-              :value="option.userId"
+            :default-label="form.workerName"
+            :prop="{ label: 'nickName', value: 'userId' }"
+            :query="{
+              page: 'pageNum',
+              size: 'pageSize',
+              searchKey: 'nickName',
+            }"
+            :remote-method="loadWorkerOptions"
           />
-          </el-select>
+          <!--          <el-select-->
+          <!--            v-model="form.workerId"-->
+          <!--            :remote-method="loadWorkOptions"-->
+          <!--            clearable-->
+          <!--            filterable-->
+          <!--            placeholder="请选择负责工人"-->
+          <!--            remote-->
+          <!--            remote-show-suffix-->
+          <!--            @change="-->
+          <!--              form.workerName = workerOptions.find(-->
+          <!--                (el) => el.userId === $event-->
+          <!--              )?.nickName-->
+          <!--            "-->
+          <!--          >-->
+          <!--            <el-option-->
+          <!--              v-for="option in workerOptions"-->
+          <!--              :key="option.userId"-->
+          <!--              :label="option.nickName"-->
+          <!--              :value="option.userId"-->
+          <!--            />-->
+          <!--          </el-select>-->
         </el-form-item>
         <el-form-item label="建议完成时间" prop="suggestCompleteTime">
           <el-date-picker
@@ -454,6 +487,7 @@ import { ElMessageBox } from "element-plus";
 import { useDict } from "@/utils/dict";
 import { useRouter } from "vue-router";
 import Review from "@/views/maintenance/order/review.vue";
+import PagedSelect from "@/components/PagedSelect.vue";
 
 const { proxy } = getCurrentInstance();
 
@@ -499,9 +533,14 @@ const data = reactive({
   },
   reviewForm: {},
   reviewRules: {},
+  workerQuery: {
+    pageNum: 1,
+    pageSize: 10,
+  },
 });
 
-const { queryParams, form, rules, reviewForm, reviewRules } = toRefs(data);
+const { queryParams, form, rules, reviewForm, reviewRules, workerQuery } =
+  toRefs(data);
 const { iot_alert_level } = useDict("iot_alert_level");
 
 /** 查询告警工单列表 */
@@ -701,6 +740,9 @@ const handlePublishOrder = (row) => {
     })
     .catch(() => {});
 };
-loadWorkOptions();
+
+const loadWorkerOptions = (query) => listUser(query).then((resp) => resp.rows);
+
+// loadWorkOptions();
 getList();
 </script>

src/views/maintenance/region/index.vue

@@ -77,7 +77,13 @@
     >
       <el-table-column align="center" type="selection" width="55" />
       <el-table-column align="center" label="大区名称" prop="regionName" />
-      <el-table-column align="center" label="负责人" prop="leaderName" />
+      <!--TODO:hide temp-->
+      <el-table-column
+        v-if="false"
+        align="center"
+        label="负责人"
+        prop="leaderName"
+      />
       <el-table-column align="center" label="排序" prop="sort" />
       <el-table-column
         align="center"
@@ -136,7 +142,8 @@
         <!--        <el-form-item label="领导id" prop="leaderId">-->
         <!--          <el-input v-model="form.leaderId" placeholder="请输入领导id" />-->
         <!--        </el-form-item>-->
-        <el-form-item label="负责人" prop="leaderName">
+        <!--TODO:hide temp-->
+        <el-form-item v-if="false" label="负责人" prop="leaderId">
           <!--          <el-input v-model="form.leaderName" placeholder="请输入领导名称" />-->
           <el-tag
             v-if="form.leaderId"

src/views/maintenance/user/index.vue

@@ -112,16 +112,6 @@
           >删除
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          v-hasPermi="['maintenance:user:export']"
-          icon="Download"
-          plain
-          type="warning"
-          @click="handleExport"
-          >导出
-        </el-button>
-      </el-col>
       <right-toolbar
         v-model:showSearch="showSearch"
         @queryTable="getList"

src/views/product/product/index.vue

@@ -547,7 +547,7 @@ const getCategoryList = async () => {
 
 getList();
 getCategoryList();
-getTenantOptions();
+// getTenantOptions();
 </script>
 <style lang="scss" scoped>
 .card-item {

src/views/ttest/index.vue

@@ -1,18 +1,49 @@
 <script setup>
 import PagedSelect from "@/components/PagedSelect.vue";
-import { ref } from "vue";
+import { ConfigProvider, RangePicker } from "ant-design-vue";
+import zhCN from "ant-design-vue/es/locale/zh_CN";
+import "ant-design-vue/lib/date-picker/style";
+import { reactive, ref, toRefs } from "vue";
+import { listLog } from "@/api/alert/log";
 
-const value = ref();
+const value = ref(7);
+const options = ref([]);
+const loadAlerts = async (keyword) => {
+  queryParams.value.alertName = keyword;
+  queryParams.value.pageNum = 1;
+  const resp = await listLog(queryParams.value);
+  options.value = resp.rows;
+};
+
+const data = reactive({
+  queryParams: { pageNum: 1, pageSize: 10 },
+});
+
+const loading = ref(false);
+const { queryParams } = toRefs(data);
+
+const fetchOptions = (query) => listLog(query).then((resp) => resp.rows);
 </script>
 
 <template>
+  <div class="app-container">
+    <config-provider :locale="zhCN">
+      <range-picker show-time />
+    </config-provider>
     <PagedSelect
       v-model="value"
       :prop="{
         label: 'alertName',
         value: 'alertId',
       }"
+      :query="{
+        searchKey: 'alertName',
+        page: 'pageNum',
+        size: 'pageSize',
+      }"
+      :remote-method="fetchOptions"
     />
+  </div>
 </template>
 
 <style lang="scss" scoped></style>