From fbed61bcbdf7e486b7cf84bee9a8e2bb5a4e90a7 Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Wed, 20 Mar 2024 00:57:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A1=E6=9F=A5=E5=8E=86=E5=8F=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                    |   6 ++
 src/assets/icons/approve.svg       |  21 ++++
 src/views/task/content/History.vue | 160 +++++++++++++++++++++++++++++
 3 files changed, 187 insertions(+)
 create mode 100644 src/assets/icons/approve.svg
 create mode 100644 src/views/task/content/History.vue

diff --git a/components.d.ts b/components.d.ts
index e5c3631..1353fc5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -20,11 +20,13 @@ declare module 'vue' {
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
+    NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
@@ -38,7 +40,11 @@ declare module 'vue' {
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NTimeline: typeof import('naive-ui')['NTimeline']
+    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
diff --git a/src/assets/icons/approve.svg b/src/assets/icons/approve.svg
new file mode 100644
index 0000000..cacbb4c
--- /dev/null
+++ b/src/assets/icons/approve.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>通过备份</title>
+    <g id="任务审批" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="审查日志" transform="translate(-452.000000, -800.000000)" fill-rule="nonzero">
+            <g id="编组-12" transform="translate(406.000000, 590.000000)">
+                <g id="编组-9" transform="translate(0.000000, 96.000352)">
+                    <g id="编组-30" transform="translate(30.000000, 47.999648)">
+                        <g id="通过备份" transform="translate(16.000000, 66.000000)">
+                            <path d="M7.99938587,0 C3.60011067,0 0,3.60011065 0,8.00068366 C0,12.4000516 3.60011065,16.0001622 7.99938587,16.0001622 C12.3998894,16.0001622 16,12.4000516 16,8.00068366 C16,3.60011065 12.3998894,0 7.99938587,0" id="形状结合" fill="#507AFD"></path>
+                            <g id="审核" transform="translate(2.782878, 2.782878)" fill="#FFFFFF">
+                                <rect id="矩形" opacity="0" x="0" y="0" width="10.203886" height="10.203886"></rect>
+                                <path d="M8.73757565,5.82777412 L7.37719037,5.82777412 C7.07555792,5.82777412 6.80322178,5.64741247 6.68543865,5.36979502 L6.21988635,4.27237904 C6.15232546,4.11304297 6.19567205,3.93048907 6.32441639,3.81479852 C6.78428879,3.40186001 7.03370605,2.76003159 6.88722448,2.06648622 C6.74233727,1.37991615 6.18690308,0.825079847 5.50003407,0.681687347 C4.3222027,0.43575775 3.28527264,1.32799989 3.28527264,2.46248468 C3.28527264,3.00865167 3.52751529,3.49582744 3.9088656,3.8288488 C4.04159583,3.94473863 4.08852972,4.12988336 4.01967342,4.29210921 L3.5624915,5.36979502 C3.44470836,5.64741247 3.17227257,5.82777412 2.87073977,5.82777412 L1.46621073,5.82777412 C1.26213301,5.82777412 1.09671845,5.99318868 1.09671845,6.1972664 L1.09671845,7.64484309 C1.09671845,7.84892081 1.26213301,8.01433537 1.46621073,8.01433537 L8.73757565,8.01433537 C8.94165337,8.01433537 9.10706797,7.84892081 9.10706797,7.64484309 L9.10706797,6.19736605 C9.10716757,5.99328833 8.94175301,5.82777412 8.73757565,5.82777412 L8.73757565,5.82777412 Z M8.56458789,8.74624496 L1.64527697,8.74624496 C1.54353706,8.74624496 1.46112872,8.8286533 1.46112872,8.93039322 L1.46112872,9.29091724 C1.46112872,9.39265716 1.54353706,9.4750655 1.64527697,9.4750655 L8.56458789,9.4750655 C8.66632781,9.4750655 8.74873615,9.39265716 8.74873615,9.29091724 L8.74873615,8.93039322 C8.74873615,8.82875295 8.66632781,8.74624496 8.56458789,8.74624496 Z" id="形状"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/task/content/History.vue b/src/views/task/content/History.vue
new file mode 100644
index 0000000..83d9365
--- /dev/null
+++ b/src/views/task/content/History.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  taskTableData: {
+    type: Array,
+    default: () => [[]],
+  },
+})
+onMounted(() => {
+  console.log(props.data)
+  console.log(props.taskTableData, 'taskTableData')
+})
+</script>
+
+<template>
+  <div class="wrap">
+    <div class="info-header">
+      <div class="left_box">
+        <div class="title">
+          审查记录信息
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <n-timeline>
+        <n-timeline-item color="#507AFD">
+          <template #default>
+            <div class="time">
+              完成时间：2023-10-20 13:00:01
+            </div>
+          </template>
+        </n-timeline-item>
+        <n-timeline-item color="#507AFD">
+          <template #default>
+            <div class="card">
+              <n-collapse arrow-placement="right">
+                <template #header-extra>
+                  审批结果：不合格
+                </template>
+                <n-collapse-item title="收起" name="1">
+                  <div class="item">
+                    <div class="header">
+                      <SvgIcon class="icon" name="approve" size="16" />
+                      <div class="title">
+                        一级审批
+                      </div>
+                    </div>
+                    <div class="col-content">
+                      <div class="col-item">
+                        <div class="label label1">
+                          <div class="point" />审批时间：2022-12-10 12:00:09
+                        </div>
+                        <div class="label label2">
+                          审批人：张三天
+                        </div>
+                        <div class="label label3">
+                          审批结果：通过
+                        </div>
+                        <div class="label">
+                          备注：--
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </n-collapse-item>
+              </n-collapse>
+            </div>
+          </template>
+        </n-timeline-item>
+      </n-timeline>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .info-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 18px;
+    .left_box {
+      display: flex;
+      align-items: center;
+      .title {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: Medium;
+        text-align: left;
+        color: #333333;
+        line-height: 22px;
+
+        &:before {
+          content: "";
+          width: 4px;
+          height: 18px;
+          background: #507afd;
+          border-radius: 3px;
+          display: inline-block;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .card{
+    background: #f9fafc;
+    padding: 16px;
+  }
+
+  .point{
+    width: 4px;
+    height: 4px;
+    background: #999999;
+    border-radius: 50%;
+    margin-right: 6px;
+  }
+
+  .header{
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .icon{
+      margin-right: 10px;
+    }
+  }
+
+  .col-item{
+    display: flex;
+    align-items: center;
+    padding-left: 26px;
+
+    .label{
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC-Regular;
+      font-weight: Regular;
+      text-align: center;
+      color: #666666;
+    }
+
+    .label1{
+      width: 305px;
+    }
+    .label2{
+      width: 194px;
+    }
+    .label3{
+      width: 208px;
+    }
+  }
+</style>