[Refactor][UI] Refactor time display use datatable render function (#11078)

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

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']}

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) => {
+        variables.tableData = res.totalList as any
-          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.totalPage = res.totalPage
         variables.loadingRef = false
       }),