Merge branch 'dev/1.10.1' into enterprise

emqx · Sep 26, 2024 · 5837779 · 5837779
2 parents 05bcc70 + 6d00b47
commit 5837779
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -425,4 +425,6 @@ export const DEFAULT_CLIENT_TABLE_COLUMNS = [
   'connected_at',
 ]
 
+export const BANNED_NEVER_EXPIRE_VALUE = 'infinity'
+
 export const BATCH_UPLOAD_CSV_MAX_ROWS = 2048
diff --git a/src/views/General/BannedClient.vue b/src/views/General/BannedClient.vue
@@ -29,7 +29,11 @@
         </template>
       </el-table-column>
       <el-table-column prop="reason" min-width="120px" :label="tl('reason')" />
-      <el-table-column prop="until" :formatter="formatterUntil" :label="tl('until')" />
+      <el-table-column prop="until" :formatter="formatterUntil" :label="tl('until')">
+        <template #default="{ row }">
+          {{ expiredAt(row.until) }}
+        </template>
+      </el-table-column>
       <el-table-column prop="oper" :label="$t('Base.operation')">
         <template #default="{ row }">
           <el-button
@@ -52,18 +56,20 @@
 </template>
 
 <script setup lang="ts">
-import { deleteBannedClient, loadBannedClient, clearAllBannedClients } from '@/api/function'
+import { clearAllBannedClients, deleteBannedClient, loadBannedClient } from '@/api/function'
+import { BANNED_NEVER_EXPIRE_VALUE } from '@/common/constants'
 import { dateFormat } from '@/common/tools'
 import useBannedType from '@/hooks/Auth/useBannedType'
 import useI18nTl from '@/hooks/useI18nTl'
 import usePaginationWithHasNext from '@/hooks/usePaginationWithHasNext'
+import { BannedItem } from '@/types/systemModule'
 import { Plus, Remove } from '@element-plus/icons-vue'
+import moment from 'moment'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Banned } from 'src/types/auth'
 import { ref } from 'vue'
 import CommonPagination from '../../components/commonPagination.vue'
 import BannedDialog from './components/BannedDialog.vue'
-import { BannedItem } from '@/types/systemModule'
 
 const { t, tl } = useI18nTl('General')
 
@@ -94,6 +100,12 @@ const refreshListData = () => {
   listBlackList()
 }
 
+const expiredAt = (value: string) => {
+  return value === BANNED_NEVER_EXPIRE_VALUE
+    ? tl('neverExpire')
+    : moment(value).format('YYYY-MM-DD HH:mm')
+}
+
 const { getLabelFromValue } = useBannedType()
 
 const deleteConfirm = async (item: Banned) => {

diff --git a/src/views/General/components/BannedDialog.vue b/src/views/General/components/BannedDialog.vue
@@ -40,6 +40,7 @@
               popper-class="datepicker-until"
               :shortcuts="datePickerShortcuts"
               :disabledDate="isItEarlierThanToday"
+              :placeholder="tl('neverExpire')"
             />
           </el-form-item>
         </el-col>