From 594f00512b6dcda4cc9b6a51b25b1d818d17a422 Mon Sep 17 00:00:00 2001
From: Devosend <devosend@gmail.com>
Date: Thu, 21 Jul 2022 15:57:08 +0800
Subject: [PATCH] [Refactor][UI] Refactor time display use datatable render
 function (#11078)

---
 .../token-manage/components/token-modal.tsx   | 10 +++++--
 .../src/views/security/token-manage/index.tsx | 10 +++++--
 .../views/security/token-manage/use-table.ts  | 30 +++++--------------
 3 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx b/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx
index 8c75a68eae..b5fa4cc707 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx
@@ -15,7 +15,13 @@
  * limitations under the License.
  */
 
-import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
+import {
+  defineComponent,
+  getCurrentInstance,
+  PropType,
+  toRefs,
+  watch
+} from 'vue'
 import Modal from '@/components/modal'
 import {
   NForm,
@@ -192,7 +198,7 @@ const TokenModal = defineComponent({
                 <NFormItem label={t('security.token.token')} path='token'>
                   <NSpace>
                     <NInput
-                  allowInput={this.trim}
+                      allowInput={this.trim}
                       class='input-token'
                       style={{ width: '504px' }}
                       disabled
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
index 163b52be56..d9b167fc09 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
@@ -15,7 +15,13 @@
  * limitations under the License.
  */
 
-import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
+import {
+  defineComponent,
+  getCurrentInstance,
+  onMounted,
+  toRefs,
+  watch
+} from 'vue'
 import {
   NButton,
   NDataTable,
@@ -117,7 +123,7 @@ const tokenManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
-                  allowInput={this.trim}
+                allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/use-table.ts b/dolphinscheduler-ui/src/views/security/token-manage/use-table.ts
index c017f44cef..e8a2c67b54 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/use-table.ts
+++ b/dolphinscheduler-ui/src/views/security/token-manage/use-table.ts
@@ -17,12 +17,11 @@
 
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
-import { format } from 'date-fns'
 import { NButton, NIcon, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
 import { queryAccessTokenList, deleteToken } from '@/service/modules/token'
-import { parseTime } from '@/common/common'
+import { renderTableTime } from '@/common/common'
 import type { TokenRes } from '@/service/modules/token/types'
 
 export function useTable() {
@@ -53,15 +52,18 @@ export function useTable() {
       },
       {
         title: t('security.token.expiration_time'),
-        key: 'expireTime'
+        key: 'expireTime',
+        render: (row: any) => renderTableTime(row.expireTime)
       },
       {
         title: t('security.token.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        render: (row: any) => renderTableTime(row.createTime)
       },
       {
         title: t('security.token.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        render: (row: any) => renderTableTime(row.updateTime)
       },
       {
         title: t('security.token.operation'),
@@ -166,23 +168,7 @@ export function useTable() {
     variables.loadingRef = true
     const { state } = useAsyncState(
       queryAccessTokenList({ ...params }).then((res: TokenRes) => {
-        variables.tableData = res.totalList.map((item, unused) => {
-          item.expireTime = format(
-            parseTime(item.expireTime),
-            'yyyy-MM-dd HH:mm:ss'
-          )
-          item.createTime = format(
-            parseTime(item.createTime),
-            'yyyy-MM-dd HH:mm:ss'
-          )
-          item.updateTime = format(
-            parseTime(item.updateTime),
-            'yyyy-MM-dd HH:mm:ss'
-          )
-          return {
-            ...item
-          }
-        }) as any
+        variables.tableData = res.totalList as any
         variables.totalPage = res.totalPage
         variables.loadingRef = false
       }),