feat(south node): support fuzzy search

src/api/config.ts

@@ -22,17 +22,21 @@ import type {
 } from '@/types/config'
 
 /* NODE(DRIVER & APP) */
-
-const queryDriverList = (nodeType: number): Promise<AxiosResponse<ResponseDriverListData>> => {
-  return http.get('/node', { params: { type: nodeType } })
+const queryDriverList = (params: any): Promise<AxiosResponse<ResponseDriverListData>> => {
+  return http.get('/node', { params })
 }
 
 const getDataFromResponse = (res: AxiosResponse<ResponseDriverListData>): Array<RawDriverData> => res?.data?.nodes || []
 
-export const queryNorthDriverList = async (): Promise<Array<RawDriverData>> => {
+export const queryNorthDriverList = async (params?: any): Promise<Array<RawDriverData>> => {
   try {
     const retArr: Array<AxiosResponse<ResponseDriverListData>> = await Promise.all(
-      NORTH_DRIVER_NODE_TYPE.map((code) => queryDriverList(code)),
+      NORTH_DRIVER_NODE_TYPE.map((code) =>
+        queryDriverList({
+          type: code,
+          ...params,
+        }),
+      ),
     )
     const northList = retArr
       .reduce((arr: Array<RawDriverData>, currentData) => arr.concat(getDataFromResponse(currentData)), [])
@@ -43,10 +47,15 @@ export const queryNorthDriverList = async (): Promise<Array<RawDriverData>> => {
   }
 }
 
-export const querySouthDriverList = async (): Promise<Array<RawDriverData>> => {
+export const querySouthDriverList = async (params?: any): Promise<Array<RawDriverData>> => {
   try {
     const retArr: Array<AxiosResponse<ResponseDriverListData>> = await Promise.all(
-      SOUTH_DRIVER_NODE_TYPE.map((code) => queryDriverList(code)),
+      SOUTH_DRIVER_NODE_TYPE.map((code) =>
+        queryDriverList({
+          type: code,
+          ...params,
+        }),
+      ),
     )
     return Promise.resolve(
       retArr.reduce((arr: Array<RawDriverData>, currentData) => arr.concat(getDataFromResponse(currentData)), []),

src/components/KeywordSearchInput.vue

@@ -0,0 +1,52 @@
+<template>
+  <emqx-input
+    v-model="myValue"
+    :disabled="disabled"
+    :clearable="clearable"
+    :placeholder="$t(`${placeholder}`)"
+    class="common-search_input"
+    @input="input"
+    @change="change"
+    @clear="clear"
+    v-on:keydown.enter="enter"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  placeholder: { type: String, default: 'common.keywordSearchPlaceholder' },
+})
+
+const emits = defineEmits(['update:modelValue', 'input', 'enter', 'change', 'clear'])
+
+const myValue = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emits('update:modelValue', val)
+  },
+})
+
+const input = () => {
+  emits('input', myValue.value)
+}
+const enter = () => {
+  emits('enter', myValue.value)
+}
+const change = () => {
+  emits('change', myValue.value)
+}
+const clear = () => {
+  emits('clear', myValue.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.common-search_input {
+  width: 220px;
+}
+</style>

src/components/ViewHeaderBar.vue

@@ -0,0 +1,73 @@
+<template>
+  <emqx-row class="header-bar-container">
+    <emqx-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="header-col">
+      <div class="header-left">
+        <slot name="left"></slot>
+      </div>
+      <div class="header-right">
+        <slot name="right"></slot>
+      </div>
+    </emqx-col>
+  </emqx-row>
+</template>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
+.header-bar-container {
+  :deep(.header-col) {
+    @include display-flex(space-between, center);
+    height: auto;
+    margin-bottom: 6px;
+  }
+
+  .header-left,
+  .header-right {
+    display: flex;
+  }
+
+  :deep(.header-item) {
+    display: inline-block;
+    margin-bottom: 10px;
+  }
+
+  :deep(.header-item.btn),
+  :deep(.header-left .header-item) {
+    margin-left: 0px !important;
+    margin-right: 6px !important;
+  }
+
+  :deep(.header-right .header-item:not(:last-child)) {
+    margin-right: 6px;
+  }
+
+  /* search */
+  :deep(.search-group) {
+    display: inline-block;
+  }
+
+  :deep(.search-group.margin20) {
+    display: inline-block;
+    margin: 0 16px;
+  }
+
+  :deep(.search-group.margin10) {
+    display: inline-block;
+    margin: 0 6px;
+  }
+
+  :deep(.search-group .group-item:not(:last-child)) {
+    margin-right: 6px;
+  }
+
+  :deep(.search-group .group-item.btn) {
+    width: 80px;
+  }
+
+  :deep(.label) {
+    text-align: left;
+    color: #333;
+    font-size: 14px;
+  }
+}
+</style>

src/composables/config/useSouthDriver.ts

@@ -5,6 +5,7 @@ import type { Ref } from 'vue'
 import { onUnmounted, ref } from 'vue'
 import usePaging from '../usePaging'
 import { useFillNodeListStatusData } from './useNodeList'
+import { debounce } from 'lodash'
 
 export default (autoLoad = true, needRefreshStatus = false) => {
   const { fillNodeListStatusData } = useFillNodeListStatusData()
@@ -22,6 +23,10 @@ export default (autoLoad = true, needRefreshStatus = false) => {
   })
   const { setTotalData, getAPageData } = usePaging()
 
+  const queryKeyword = ref({
+    node: '',
+  })
+
   let refreshStatusTimer: undefined | number
 
   const getAPageTagData = async () => {
@@ -40,7 +45,7 @@ export default (autoLoad = true, needRefreshStatus = false) => {
   const getSouthDriverList = async () => {
     isListLoading.value = true
     try {
-      const driverList = await querySouthDriverList()
+      const driverList = await querySouthDriverList(queryKeyword.value)
       const totalList = driverList.map((item) => {
         return {
           ...item,
@@ -57,6 +62,10 @@ export default (autoLoad = true, needRefreshStatus = false) => {
       isListLoading.value = false
     }
   }
+  // debounce
+  const dbGetSouthDriverList = debounce(() => {
+    getSouthDriverList()
+  }, 500)
 
   const handleSizeChange = (size: number) => {
     pageController.value.pageSize = size
@@ -85,12 +94,14 @@ export default (autoLoad = true, needRefreshStatus = false) => {
   })
 
   return {
+    queryKeyword,
     pageController,
     getAPageTagData,
     handleSizeChange,
     totalSouthDriverList,
     southDriverList,
     isListLoading,
     getSouthDriverList,
+    dbGetSouthDriverList,
   }
 }

src/i18n/common.ts

@@ -347,4 +347,8 @@ export default {
     zh: '异常',
     en: 'Exceptions',
   },
+  keywordSearchPlaceholder: {
+    zh: '按 Enter 搜索',
+    en: 'Press Enter search',
+  },
 }

src/i18n/error.ts

@@ -58,6 +58,10 @@ export default {
     zh: '密码重复',
     en: 'Duplicate password',
   },
+  1014: {
+    zh: '执行指令失败',
+    en: 'Command execution failed',
+  },
   2002: {
     zh: 'Node 已存在',
     en: 'Node exist',

src/utils/constants.ts

@@ -14,11 +14,11 @@ export const MAX_NUM_IN_A_ROW_ON_THE_OVERVIEW = 3
  * doc: https://github.com/neugates/nep/blob/main/docs/Neuron%202.x%20ERROR%20CODE.md
  */
 export const ERROR_CODE_ARR = [
-  1000, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010, 1011, 1012, 1013, 2002, 2003, 2004, 2005, 2006,
-  2007, 2008, 2009, 2010, 2011, 2101, 2102, 2103, 2104, 2105, 2106, 2107, 2201, 2202, 2203, 2204, 2205, 2206, 2207,
-  2208, 2209, 2301, 2302, 2303, 2304, 2305, 2306, 2307, 2400, 2401, 2402, 2403, 2404, 2405, 2406, 2407, 3000, 3001,
-  3002, 3003, 3004, 3007, 3008, 3009, 3010, 3011, 3012, 10101, 10103, 10105, 10106, 10107, 10110, 10150, 10151, 10200,
-  10400, 10500, 10501, 10502, 10503, 10504, 10505, 10506, 10507, 10508, 10001, 10002, 10003, 10004, 10005,
+  1000, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010, 1011, 1012, 1013, 1014, 2002, 2003, 2004, 2005,
+  2006, 2007, 2008, 2009, 2010, 2011, 2101, 2102, 2103, 2104, 2105, 2106, 2107, 2201, 2202, 2203, 2204, 2205, 2206,
+  2207, 2208, 2209, 2301, 2302, 2303, 2304, 2305, 2306, 2307, 2400, 2401, 2402, 2403, 2404, 2405, 2406, 2407, 3000,
+  3001, 3002, 3003, 3004, 3007, 3008, 3009, 3010, 3011, 3012, 10101, 10103, 10105, 10106, 10107, 10110, 10150, 10151,
+  10200, 10400, 10500, 10501, 10502, 10503, 10504, 10505, 10506, 10507, 10508, 10001, 10002, 10003, 10004, 10005,
 ]
 
 export const FILLER_IN_TAG_ATTR = ' '

src/views/config/southDriver/Index.vue

@@ -6,15 +6,27 @@
         {{ $t('config.addDevice') }}
       </emqx-button>
     </div>
+
+    <ViewHeaderBar>
+      <template v-slot:right>
+        <KeywordSerachInput
+          v-model="queryKeyword.node"
+          class="header-item"
+          @enter="dbGetSouthDriverList"
+          @clear="dbGetSouthDriverList"
+        />
+      </template>
+    </ViewHeaderBar>
+
     <emqx-empty v-if="!isListLoading && southDriverList.length === 0" class="empty" />
     <div v-else>
       <ul class="setup-list">
         <emqx-row :gutter="24">
           <emqx-col :span="8" v-for="(item, index) in southDriverList" :key="item.name" tag="li" class="setup-item">
             <SouthDriveItemCard
               :data="item"
-              @deleted="getSouthDriverList"
-              @updated="getSouthDriverList"
+              @deleted="dbGetSouthDriverList"
+              @updated="dbGetSouthDriverList"
               @toggle-status="setNodeStartStopStatus(item, $event, index)"
             />
           </emqx-col>
@@ -43,9 +55,19 @@ import { DriverDirection } from '@/types/enums'
 import DriverDialog from '@/views/config/components/DriverDialog.vue'
 import { ref } from 'vue'
 import SouthDriveItemCard from './components/SouthDriveItemCard.vue'
+import KeywordSerachInput from '@/components/KeywordSearchInput.vue'
+import ViewHeaderBar from '@/components/ViewHeaderBar.vue'
 
-const { pageController, getAPageTagData, handleSizeChange, southDriverList, isListLoading, getSouthDriverList } =
-  useSouthDriver(true, true)
+const {
+  queryKeyword,
+  pageController,
+  getAPageTagData,
+  handleSizeChange,
+  southDriverList,
+  isListLoading,
+  getSouthDriverList,
+  dbGetSouthDriverList,
+} = useSouthDriver(true, true)
 
 const showDialog = ref(false)
 
@@ -68,7 +90,7 @@ const addConfig = () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .setup-list {
   list-style: none;
   .setup-item {