From 79a14ab5d3a116199f8ac294887a5df98f67149a Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 7 Jan 2025 19:01:27 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflow/components/approval-card.vue     | 17 ++++++++++----
 .../workflow/components/approval-panel.vue    |  2 +-
 .../src/views/workflow/components/helper.tsx  | 22 +++++++++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/approval-card.vue b/apps/web-antd/src/views/workflow/components/approval-card.vue
index a8b0b8f6..d283fd14 100644
--- a/apps/web-antd/src/views/workflow/components/approval-card.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-card.vue
@@ -4,10 +4,12 @@ import type { TaskInfo } from '#/api/workflow/task/model';
 import { VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
-import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { Descriptions, DescriptionsItem, Tooltip } from 'ant-design-vue';
 
 import { renderDict } from '#/utils/render';
 
+import { getDiffTimeString } from './helper';
+
 interface Props extends TaskInfo {
   active: boolean;
 }
@@ -42,10 +44,10 @@ function handleClick() {
           :is="renderDict(info.flowStatus, DictEnum.WF_BUSINESS_STATUS)"
         />
       </template>
-      <DescriptionsItem label="当前任务名称">
+      <DescriptionsItem label="当前任务">
         <div class="font-bold">{{ info.nodeName }}</div>
       </DescriptionsItem>
-      <DescriptionsItem label="开始时间">
+      <DescriptionsItem label="提交时间">
         {{ info.createTime }}
       </DescriptionsItem>
       <!-- <DescriptionsItem label="更新时间">
@@ -63,7 +65,14 @@ function handleClick() {
           {{ info.createByName }}
         </span>
       </div>
-      <div class="text-nowrap opacity-50">{{ info.updateTime }}更新</div>
+      <div class="text-nowrap opacity-50">
+        <Tooltip placement="top" :title="`更新时间: ${info.updateTime}`">
+          <div class="flex items-center gap-1">
+            <span class="icon-[mdi--clock-outline] size-[16px]"></span>
+            {{ getDiffTimeString(info.updateTime) }}前更新
+          </div>
+        </Tooltip>
+      </div>
     </div>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/workflow/components/approval-panel.vue b/apps/web-antd/src/views/workflow/components/approval-panel.vue
index cb81f319..df717f1b 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-panel.vue
@@ -396,7 +396,7 @@ async function handleCopy(text: string) {
           <div class="flex items-center opacity-50">
             <span>XXXX有限公司</span>
             <Divider type="vertical" />
-            <span>提交于: {{ task.createTime }}</span>
+            <span>提交时间: {{ task.createTime }}</span>
           </div>
         </div>
       </div>
diff --git a/apps/web-antd/src/views/workflow/components/helper.tsx b/apps/web-antd/src/views/workflow/components/helper.tsx
index 26ead674..a4ec7a41 100644
--- a/apps/web-antd/src/views/workflow/components/helper.tsx
+++ b/apps/web-antd/src/views/workflow/components/helper.tsx
@@ -1,6 +1,9 @@
 import { defineComponent, h, ref } from 'vue';
 
 import { Modal } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import ApprovalContent from './approval-content.vue';
 
@@ -36,3 +39,22 @@ export function approveWithReasonModal(props: ApproveWithReasonModalProps) {
     onOk: () => onOk(content.value),
   });
 }
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+/**
+ * 计算相差的时间
+ * @param dateTime 时间字符串
+ * @returns 相差的时间
+ */
+export function getDiffTimeString(dateTime: string) {
+  // 计算相差秒数
+  const diffSeconds = dayjs().diff(dayjs(dateTime), 'second');
+  /**
+   * 转为时间显示(x月 x天)
+   * https://dayjs.fenxianglu.cn/category/duration.html#%E4%BA%BA%E6%80%A7%E5%8C%96
+   *
+   */
+  const diffText = dayjs.duration(diffSeconds, 'seconds').humanize();
+  return diffText;
+}