任务管理

src/styles/app/element.scss

@@ -128,3 +128,76 @@
 .hc-ui-form-upload-box .hc-ui-form-item-dashed.list .file-list-box .item .close-icon {
     top: 1px;
 }
+
+
+//时间轴
+.el-timeline.hc-time-line {
+    padding-left: 5px;
+    padding-top: 5px;
+    .el-timeline-item {
+        padding-bottom: 24px;
+        .el-timeline-item__tail {
+            top: 14px;
+            left: 3.5px;
+            height: calc(100% - 16px);
+            border-width: 1px;
+            border-color: #838791;
+        }
+        .el-timeline-item__node {
+            display: none;
+        }
+        .el-timeline-item__wrapper {
+            padding-left: 20px;
+            .el-timeline-item__content {
+                .timeline-item-icon {
+                    position: absolute;
+                    width: 18px;
+                    height: 18px;
+                    left: -5px;
+                    border: 1px solid var(--el-color-success);
+                    border-radius: 50px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: white;
+                    .check-icon {
+                        font-size: 14px;
+                    }
+                }
+                .reply-name {
+                    font-size: 15px;
+                    margin-bottom: 6px;
+                }
+                .reply-time {
+                    font-size: 12px;
+                    margin-bottom: 14px;
+                }
+                .reply-content {
+                    font-size: 14px;
+                }
+            }
+        }
+        &.success {
+            .el-timeline-item__tail {
+                border-color: var(--el-color-success);
+            }
+            .el-timeline-item__wrapper .el-timeline-item__content .timeline-item-icon {
+                background-color: var(--el-color-success);
+                border: 1px solid var(--el-color-success);
+                color: white;
+            }
+        }
+        &.primary {
+            .el-timeline-item__wrapper .el-timeline-item__content {
+                .reply-name {
+                    color: #1A1A1A;
+                }
+                .timeline-item-icon {
+                    background-color: var(--el-color-primary);
+                    border: 1px solid var(--el-color-primary);
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+}

src/views/tasks/components/hc-data/task-review.vue

@@ -10,11 +10,22 @@
             <div class="hc-task-body relative flex">
                 <div class="hc-task-time">
                     <hc-body class="hc-task-body-card" padding="10px" scrollbar>
-                        111
+                        <el-timeline class="hc-time-line">
+                            <template v-for="(item, index) in flowList" :key="index">
+                                <el-timeline-item :class="item.currentBol ? 'success' : item.current ? 'primary' : ''" size="large">
+                                    <div class="timeline-item-icon">
+                                        <hc-icon v-if="item.currentBol" class="check-icon" name="check" />
+                                    </div>
+                                    <div class="reply-name">{{ item.name }}</div>
+                                    <div class="reply-time">{{ item.time }}</div>
+                                    <div class="reply-content" v-html="item.content" />
+                                </el-timeline-item>
+                            </template>
+                        </el-timeline>
                     </hc-body>
                 </div>
                 <div class="hc-task-table">
-                    <hc-body class="hc-task-body-card" padding="10px" scrollbar>
+                    <hc-body class="hc-task-body-card" padding="10px">
                         222
                     </hc-body>
                 </div>
@@ -74,9 +85,16 @@ watch(isShow, (val) => {
 
 //设置任务信息
 const setTaskInfo = async () => {
-
+    const { taskName } = rowInfo.value
+    taskInfo.value.taskName = taskName
 }
 
+//流程信息
+const flowList = ref([
+    { currentBol: true, current: false, name: '张三', time: '2023-10-17 10:00:21', content: '上报' },
+    { currentBol: false, current: true, name: '李四', time: '2023-11-01 09:00:21', content: '结束流程</br>同意' },
+])
+
 //表格数据
 const tableColumn = ref([
     { key: 'key1', name: '名称' },
@@ -116,7 +134,7 @@ const cancelClick = () => {
         position: relative;
         height: 100%;
         flex-shrink: 0;
-        width: 200px;
+        width: 170px;
     }
     .hc-task-table, .hc-task-form {
         position: relative;

src/views/tasks/hc-data.vue

@@ -68,7 +68,7 @@
             </div>
         </template>
         <!-- 任务审核 -->
-        <taskReview v-model="isTaskReviewModalshow" />
+        <taskReview v-model="isTaskReviewModalshow" :tabs="tabsKey" :row="taskReviewRow" />
     </hc-tab-card>
 </template>
 
@@ -147,7 +147,9 @@ const tableSelectionChange = (rows) => {
 const isTaskReviewModalshow = ref(false)
 
 //任务名称被点击
-const rowTaskName = () => {
+const taskReviewRow = ref({})
+const rowTaskName = (row) => {
+    taskReviewRow.value = row
     isTaskReviewModalshow.value = true
 }