From 0dd3b77f2d7b65f77dd1c38bbaa415cb11d132f9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Mar 2023 09:45:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=AE=A1=E7=90=86=E7=9A=84=20date=20?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/formatTime.ts          | 17 +++++++++++++++++
 src/views/infra/config/index.vue | 21 +++++++++++----------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index 9b0e4465..39671279 100644
--- a/src/utils/formatTime.ts
+++ b/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')
+}
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index dd15ff8c..68bb5896 100644
--- a/src/views/infra/config/index.vue
+++ b/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 {
     // 导出的二次确认