案件日志接口联调

src/views/caseManagement/caseList.vue

@@ -364,6 +364,7 @@
     :showcaseLog="showcaseLog"
     @cancelcaseLog="cancelcaseLog"
     :flagLoading="flagLoading"
+    :caselogDataArr="caselogDataArr"
     ></caselogDialog>
   </div>
 </template>
@@ -449,7 +450,8 @@ export default {
       payForm: {},
       caseAttachList: [], //案件质证资料
       showcaseLog: false, //案件日志弹框显示
-      flagLoading: false, //案件日志弹框loading
+      flagLoading: true, //案件日志弹框loading
+      caselogDataArr: []
     };
   },
   created() {
@@ -542,10 +544,18 @@ export default {
     // 案件日志
     caselogRow(row) {
       this.showcaseLog = true;
+      this.caseLogRecordListFn(row)
     },
     // 查询案件日志信息
-    caseLogRecordListFn() {
-
+    caseLogRecordListFn(val) {
+      this.flagLoading = true;
+      let params = {
+        caseAppliId: val.id
+      }
+      caseLogRecordList(params).then((res) => {
+        this.caselogDataArr = res.rows
+        this.flagLoading = false;
+      })
     },
     // 关闭案件日志
     cancelcaseLog() {

src/views/caseManagement/components/caselogDialog.vue

@@ -11,30 +11,16 @@
         <i class="el-icon-loading"></i>
       </div>
       <div v-else>
-        <el-timeline>
+        <div class="noData" v-if="noData">暂无数据！</div>
+        <el-timeline v-else>
           <el-timeline-item
             v-for="(activity, index) in activities"
             :key="index"
-            :timestamp="activity.timestamp"
+            :timestamp="(index + 1).toString()"
             placement="top"
           >
-            <el-card>
-              <h4>{{ activity.doOperate }}</h4>
-              <p>{{ activity.content }}</p>
-            </el-card>
+            <p>{{ activity.content }}</p>
           </el-timeline-item>
-          <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
-            <el-card>
-              <h4>更新 Github 模板</h4>
-              <p>王小虎 提交于 2018/4/3 20:46</p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item timestamp="2018/4/2" placement="top">
-            <el-card>
-              <h4>更新 Github 模板</h4>
-              <p>王小虎 提交于 2018/4/2 20:46</p>
-            </el-card>
-          </el-timeline-item> -->
         </el-timeline>
       </div>
       <div slot="footer" class="dialog-footer">
@@ -48,45 +34,29 @@
 
 <script>
 export default {
-  props: ["showcaseLog", "flagLoading"],
+  props: ["showcaseLog", "flagLoading", "caselogDataArr"],
   data() {
     return {
-      // key: value
       reverse: true,
-      activities: [
-        {
-          content: "韩超勃 申请于 2023/10/3 20:46",
-          timestamp: "申请",
-          doOperate: "申请立案"
-        },
-        {
-          content: "韩超勃 提交于 2023/10/4 20:46",
-          timestamp: "提交",
-          doOperate: "提交立案"
-        },
-        {
-          content: "氢气球 立案审查 2023/10/3 20:46",
-          timestamp: "立案审查",
-          doOperate: "立案审查"
-        },
-        {
-          content: "风格的 提交于 2023/10/3 20:46",
-          timestamp: "提交",
-          doOperate: "提交立案"
-        },
-        {
-          content: "乖乖 提交于 2023/10/3 20:46",
-          timestamp: "提交",
-          doOperate: "提交立案"
-        },
-        {
-          content: "烤羊腿 提交于 2023/10/3 20:46",
-          timestamp: "提交",
-          doOperate: "提交立案"
-        },
-      ],
+      activities: [],
+      noData: false,
     };
   },
+  watch: {
+    caselogDataArr: {
+      handler(val) {
+        if (val && val.length > 0) {
+          this.noData = false;
+          this.activities = val;
+          this.activities.forEach((item) => {
+            item.content = item.content;
+          });
+        } else {
+          this.noData = true;
+        }
+      },
+    },
+  },
   methods: {
     cancel() {
       this.$emit("cancelcaseLog");
@@ -97,7 +67,7 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep .el-dialog__body {
-  height: 700px !important;
+  height: 500px !important;
   overflow: auto !important;
 }
 ::v-deep .el-dialog {
@@ -130,4 +100,14 @@ export default {
     font-size: 50px;
   }
 }
+.noData {
+  width: 100%;
+  height: 400px;
+  font-size: 30px;
+  font-weight: 700;
+  color: #959595;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>