案件日志页面开发

2023-10-10 11:30:50 +08:00
parent 24d064eaad
commit 0a590130c7
3 changed files with 183 additions and 23 deletions
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <el-dialog
+      title="案件日志"
+      :visible="showcaseLog"
+      @close="cancel"
+      center
+      :distroy-on-close="true"
+    >
+      <div class="loading" v-if="flagLoading">
+        <i class="el-icon-loading"></i>
+      </div>
+      <div v-else>
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.timestamp"
+            placement="top"
+          >
+            <el-card>
+              <h4>{{ activity.doOperate }}</h4>
+              <p>{{ activity.content }}</p>
+            </el-card>
+          </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">
+        <el-button @click="cancel" class="endbutton1"
+          ><span>取 消</span></el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["showcaseLog", "flagLoading"],
+  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: "提交立案"
+        },
+      ],
+    };
+  },
+  methods: {
+    cancel() {
+      this.$emit("cancelcaseLog");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 700px !important;
+  overflow: auto !important;
+}
+::v-deep .el-dialog {
+  width: 800px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+.endbutton1 {
+  width: 154px;
+  height: 37px;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-radius: 19px;
+  span {
+    width: 31px;
+    height: 13px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #959595;
+  }
+}
+.loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-icon-loading {
+    font-size: 50px;
+  }
+}
+</style>