重构：优化配置管理的 date 格式化

Author: YunaiV

src/utils/formatTime.ts

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs'
+
 /**
  * 时间日期转换
  * @param date 当前时间，new Date() 格式
@@ -174,3 +176,18 @@ export function formatPast2(ms) {
     return 0 + '秒'
   }
 }
+
+/**
+ * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
+ *
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+// @ts-ignore
+export const dateFormatter = (row, column, cellValue) => {
+  if (!cellValue) {
+    return
+  }
+  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+}

src/views/infra/config/index.vue

@@ -88,7 +88,7 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
+    <el-table v-loading="loading" :data="list" align="center">
       <el-table-column label="参数主键" align="center" prop="id" />
       <el-table-column label="参数分类" align="center" prop="category" />
       <el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
@@ -105,13 +105,13 @@
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <!-- TODO 芋艿：时间写的有点复杂 -->
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
-          <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
       <!-- TODO 芋艿：宽度；里面的 css -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
@@ -141,10 +141,10 @@
 </template>
 <script setup lang="ts" name="Config">
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
 import * as ConfigApi from '@/api/infra/config'
 import ConfigForm from './form.vue'
-import dayjs from 'dayjs'
-import download from '@/utils/download'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -206,6 +206,7 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 导出按钮操作 */
 const handleExport = async () => {
   try {
     // 导出的二次确认