生命周期详情弹窗

src/services/lifeCycle.js

@@ -15,4 +15,22 @@ export function PageListByResourceId(page,limit,quickSearch) {
         method: "post",
         data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
     })
+}
+
+// 抽屉数据
+
+export function PageListByRecordId(quickSearch) {
+    return request({
+        url: '/service/lifeCycle/pageListByRecordId',
+        method: "post",
+        data: {quickSearch:JSON.stringify((quickSearch)) }
+    })
+}
+//弹窗数据
+export function PageListByType(page,limit,quickSearch) {
+    return request({
+        url: '/service/lifeCycle/pageListByType',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
 }

src/views/lifeCycle/Detail.vue

@@ -27,16 +27,12 @@
         </el-table>
         <Pagination :total="tableTotal" :page-size="pageSize" :current-page="currentPage" @pageChange="pagi_changePage" />
       </div>
-      <el-dialog v-model="detailTableVisible" title=" 详情的详情弹窗" width="55%" draggable>
-        <el-table :data="dialogData.value" height="400" class="table-style">
-          <el-table-column prop="id1" label="ID" width="110" />
-          <el-table-column prop="id2" label="ID" width="110" />
-          <el-table-column prop="id3" label="ID"  width="110"/>
-          <el-table-column prop="id4" label="ID" width="110" />
-          <el-table-column prop="id5" label="ID" width="110" />
-          <el-table-column prop="id6" label="ID"  width ="110"/>
-          <el-table-column prop="id7" label="ID" width="110" />
-          <el-table-column prop="remark" label="备注" width="110" />
+      <el-dialog v-model="detailTableVisible" title=" " width="55%" draggable>
+        <el-table
+                :data="dialogData.value"
+                height="400"
+                class="table-style">
+          <el-table-column v-for="item in tableHeadData" :key="item" :label="item" :prop="item" width="100"/>
         </el-table>
       </el-dialog>
     </div>
@@ -45,25 +41,70 @@
             title="数据生命周期"
             direction="rtl"
             size="20%"
+            :modal="false"
     >
         <el-timeline direction="vertical" :active="1">
+
+          <el-timeline-item
+                  type='primary'
+                  color='#86dbde'
+                  :hollow=true
+                  :timestamp="'汇聚数量：'+activity.convergeIn"
+                  v-if="activity.convergeIn"
+          >
+            <div class="card-descriptions">
+            <el-card shadow="never" @click="openStepDetail(1)" style="cursor: pointer">
+              <h4>数据汇聚</h4>
+              <p style="color:#909399"> {{ activity.convergeTime }}</p>
+            </el-card>
+            </div>
+          </el-timeline-item>
+          <el-timeline-item
+                  type='primary'
+                  color='#86dbde'
+                  :hollow=true
+                  :timestamp="'质检通过：'+activity.inspectPass +'&nbsp;&nbsp;&nbsp;'+'质检不通过：'+ activity.inspectNoPass"
+                  v-if="activity.inspectTime"
+          >
+            <div class="card-descriptions">
+              <el-card shadow="never" @click="openStepDetail(2)" style="cursor: pointer">
+                <h4>数据质检</h4>
+                <p style="color:#909399"> {{ activity.inspectTime }}</p>
+              </el-card>
+            </div>
+          </el-timeline-item>
+
+          <el-timeline-item
+                  type='primary'
+                  color='#86dbde'
+                  :hollow=true
+                  :timestamp="'清洗数量：' +activity.cleanNum"
+                  v-if="activity.cleanTime"
+          >
+            <div class="card-descriptions">
+              <el-card shadow="never" @click="openStepDetail(3)" style="cursor: pointer">
+                <h4>数据清洗</h4>
+                <p style="color:#909399"> {{ activity.cleanTime }}</p>
+              </el-card>
+            </div>
+          </el-timeline-item>
+
+
           <el-timeline-item
-                            v-for="activity in approvalProcess"
-                            :key="index"
-                            :icon ="activity.icon"
-                            :type="activity.type"
-                            :size="activity.size"
-                            :color="activity.color"
-                            :hollow="activity.hollow"
-                            :timestamp="activity.timestamp"
-                            >
+                  type='primary'
+                  color='#86dbde'
+                  :hollow=true
+                  :timestamp="'入库数量：' +activity.incomingNum"
+                  v-if="activity.incomingTime"
+          >
             <dev class="card-descriptions">
-              <el-card shadow="never">
-                <h4> {{ activity.content }}</h4>
-                <p style="color:#909399"> {{ activity.text }}</p>
+              <el-card shadow="never" @click="openStepDetail(4)" style="cursor: pointer">
+                <h4>数据入库</h4>
+                <p style="color:#909399"> {{ activity.incomingTime }}</p>
               </el-card>
             </dev>
           </el-timeline-item>
+
         </el-timeline>
     </el-drawer>
   </div>
@@ -75,7 +116,7 @@
   import {reactive, ref} from "vue";
   import {onBeforeMount} from "@vue/runtime-core";
   import {useRoute, useRouter} from "vue-router";
-  import {PageListByResource, PageListByResourceId} from "../../services/lifeCycle";
+  import {PageListByRecordId, PageListByResourceId, PageListByType} from "../../services/lifeCycle";
   const route = useRoute()
   const router = useRouter()
 
@@ -96,29 +137,27 @@
     currentPage.value = page
     getData(currentPage.value, pageSize.value, quickSearch.value)
   }
+  //详情表
   const tableData = reactive({value: []})
+  const activity = ref({})
+  //弹窗头
+  const tableHeadData =ref([])
+  //弹窗详情
+  const dialogData = reactive({value: []})
 
-  const dialogData = reactive({value: [
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
-
-    ]})
-
-  const approvalProcess =[
-    {content: '数据汇聚', timestamp: '汇聚数量：123442', color: '#86dbde', type: 'primary', hollow: true, text: '2022-01-01 18:30'},
-    {content: '数据质检', timestamp: '质检通过：1232212', color: '#86dbde', type: 'primary', hollow: true,text: '2022-01-01 18:30'},
-    {content: '数据清洗', timestamp: '清洗数量：1232212', color: '#86dbde', type: 'primary', hollow: true,text: '2022-01-01 18:30'},
-    {content: '数据入库', timestamp: '入库数量：1232212', color: '#86dbde', type: 'primary', hollow: true,text: '2022-01-01 18:30'},
-  ]
+  const drawerSearch = reactive({recordId:''})
+  const typeSearch = reactive({recordId:'',type:''})
+  //抽屉
   function toDetail(row) {
-    detailTableVisible.value = true
-    detailDrawerVisible.value =true
+    drawerSearch.recordId=row.id
+    typeSearch.recordId = row.id
+    getDataRecord(drawerSearch.value)
+  }
+// 弹窗
+  function openStepDetail(type) {
+    typeSearch.type = type
+    console.log(type)
+    getDataType(currentPage.value, pageSize.value, typeSearch.value)
   }
 
   const currentPage = ref(1)
@@ -140,6 +179,31 @@
       }
     })
   }
+//获取抽屉数据
+  function getDataRecord() {
+    PageListByRecordId(drawerSearch).then(res => {
+      if (res.code === 'SUCCESS' && res.data.records.length>0) {
+        activity.value = {...res.data.records[0]}
+        detailDrawerVisible.value =true
+      } else {
+        ElMessage({type: 'warning', message: '无详情数据'})
+      }
+    })
+  }
+
+  //获取弹窗数据
+  function getDataType() {
+    PageListByType(currentPage.value, pageSize.value,typeSearch).then(res => {
+      if (res.code === '200' && res.data.dataList.length>0) {
+        dialogData.value = res.data.dataList
+        tableHeadData.value = res.data.title
+        detailTableVisible.value = true
+      } else {
+        ElMessage({type: 'warning', message: '无详情数据'})
+      }
+    })
+  }
+
 
 </script>