审查历史

src/views/task/content/History.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
+import { onBeforeMount, onMounted, ref, watch } from 'vue'
+import { formatToDateHMS } from '@/utils/dateUtil'
+import { useDictionary } from '@/store/modules/dictonary'
 
 const props = defineProps({
   data: {
@@ -11,9 +13,29 @@ const props = defineProps({
     default: () => [[]],
   },
 })
+const dicStore = useDictionary()
+const izstatusList = ref([])
+
+onBeforeMount(() => {
+  dicStore.fetchizstatusListt()
+})
+
+watch(
+  () => dicStore.izstatusList,
+  (newval) => {
+    izstatusList.value = newval
+  },
+)
+
+function getLabel(states) {
+  const item: any = izstatusList.value.find(
+    (item: any) => item.value == states,
+  )
+  return item ? item.label : ''
+}
+
 onMounted(() => {
-  console.log(props.data)
-  console.log(props.taskTableData, 'taskTableData')
+
 })
 </script>
 
@@ -28,41 +50,51 @@ onMounted(() => {
     </div>
     <div class="content">
       <n-timeline>
-        <n-timeline-item color="#507AFD">
+        <n-timeline-item color="#507AFD" size="medium">
+          <template #icon>
+            <div class="point-line" />
+          </template>
           <template #default>
-            <div class="time">
-              完成时间：2023-10-20 13:00:01
+            <div class="time-wrap">
+              <div class="triangle" />
+              <div class="time">
+                完成时间：{{ formatToDateHMS(props.data.createdate) }}
+              </div>
             </div>
           </template>
         </n-timeline-item>
         <n-timeline-item color="#507AFD">
+          <template #icon>
+            <div class="point-empty" />
+          </template>
           <template #default>
             <div class="card">
-              <n-collapse arrow-placement="right">
+              <n-collapse arrow-placement="right" :default-expanded-names="['1']">
                 <template #header-extra>
-                  审批结果：不合格
+                  审批结果：{{ getLabel(props.data.states) }}
                 </template>
+
                 <n-collapse-item title="收起" name="1">
-                  <div class="item">
+                  <div v-for="items in props.data.userapproveList" :key="items.nodeName" class="item">
                     <div class="header">
                       <SvgIcon class="icon" name="approve" size="16" />
                       <div class="title">
-                        一级审批
+                        {{ items.nodeName }}
                       </div>
                     </div>
                     <div class="col-content">
-                      <div class="col-item">
+                      <div v-for="item in items.userapproveList" :key="item.id" class="col-item">
                         <div class="label label1">
-                          <div class="point" />审批时间：2022-12-10 12:00:09
+                          <div class="point" />审批时间：{{ formatToDateHMS(item.createdate) }}
                         </div>
                         <div class="label label2">
-                          审批人：张三天
+                          审批人：{{ item.username }}
                         </div>
                         <div class="label label3">
-                          审批结果：通过
+                          审批结果：{{ getLabel(item.statshis) }}
                         </div>
                         <div class="label">
-                          备注：--
+                          备注：{{ item.taskcomment }}
                         </div>
                       </div>
                     </div>
@@ -109,6 +141,49 @@ onMounted(() => {
     }
   }
 
+  .point-line{
+    width: 10px;
+    height: 10px;
+    background: #507afd;
+    border-radius: 50%;
+  }
+
+  .point-empty{
+    width: 10px;
+    height: 10px;
+    background: #dde5fe;
+    border: 2px solid #7395ff;
+    border-radius: 50%;
+  }
+
+  .time-wrap{
+    display: flex;
+    align-items: center;
+  }
+
+  .time{
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: 500;
+    color: #507afd;
+    line-height: 24px;
+    position: relative;
+    height: 24px;
+    background: rgba(80,122,253,0.10);
+    display: inline-block;
+    padding-right: 6px;
+  }
+
+  .triangle{
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-right: 15px solid rgba(80,122,253,0.10);
+    border-left: 15px solid transparent;
+    border-bottom: 12px solid transparent;
+    margin-left: -15px;
+  }
+
   .card{
     background: #f9fafc;
     padding: 16px;
@@ -132,10 +207,15 @@ onMounted(() => {
     }
   }
 
+  .item{
+    margin-bottom: 16px;
+  }
+
   .col-item{
     display: flex;
     align-items: center;
     padding-left: 26px;
+    margin-bottom: 8px;
 
     .label{
       display: flex;