VUE3重构改造-流程-已办任务

src/views/bpm/task/done/Taskdetail.vue

@@ -0,0 +1,47 @@
+<template>
+  <Dialog title="详情" v-model="dialogVisible" :scroll="true" :max-height="500" width="800">
+    <el-descriptions border :column="1">
+      <el-descriptions-item label="任务编号" min-width="120">
+        {{ detailData.id }}
+      </el-descriptions-item>
+      <el-descriptions-item label="任务名称">
+        {{ detailData.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="所属流程">
+        {{ detailData.processInstance.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="流程发起人">
+        {{ detailData.processInstance.startUserNickname }}
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        {{ detailData.result }}
+      </el-descriptions-item>
+      <el-descriptions-item label="原因">
+        {{ detailData.reason }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { formatDate } from '@/utils/formatTime'
+import * as TaskApi from '@/api/bpm/task'
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (data: TaskApi.TaskVO) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>