1

src/views/debit-pay/admin/certificate.vue

@@ -31,16 +31,19 @@
 
         <!-- 查看报表 -->
         <hc-view-report v-model="isReportDrawer" :datas="pdfList" />
+        <!-- 任务流程 -->
+        <HcTaskModal v-model="isTaskModal" :data="taskData" />
     </div>
 </template>
 
 <script setup>
-import { getArrValue } from 'js-fast-way'
+import { deepClone, getArrValue } from 'js-fast-way'
 import { onActivated, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import { delMessage } from '~uti/tools'
 import HcAddModal from './components/certificate/addModal.vue'
 import HcEditModal from './components/certificate/editModal.vue'
+import HcTaskModal from './components/certificate/task-modal.vue'
 import mainApi from '~api/debit-pay/admin/certificate'
 import { toPdfPage } from '~uti/btn-auth'
 import { useRoute } from 'vue-router'
@@ -187,8 +190,11 @@ const rowViewRawPdf = (row)=>{
 }
 
 //查看电签流程
+const isTaskModal = ref(false)
+const taskData = ref({})
 const eVisaRowClick = (row) => {
-    console.log(row)
+    taskData.value = deepClone(row)
+    isTaskModal.value = true
 }
 </script>
 

src/views/debit-pay/admin/components/certificate/task-modal.vue

@@ -0,0 +1,169 @@
+<template>
+    <hc-new-dialog is-table widths="400px" :show="isShow" title="审批流程" :padding="false" :footer="false" @close="addModalClose">
+        <div class="hc-task-time">
+            <hc-body class="hc-task-body-card" padding="10px" scrollbar>
+                <el-timeline v-if="rowInfo.fixedFlowId == null" class="hc-time-line">
+                    <template v-for="(item, index) in flowList" :key="index">
+                        <el-timeline-item :class="item.status === '2' ? 'success' : 'primary'" size="large">
+                            <div class="timeline-item-icon">
+                                <hc-icon v-if="item.status === '2'" class="check-icon" name="check" />
+                            </div>
+                            <div class="reply-name">{{ item.name }}</div>
+                            <div class="reply-time">{{ item.date }}</div>
+                            <div class="reply-content" v-html="item.flowValue" />
+                        </el-timeline-item>
+                    </template>
+                </el-timeline>
+                <el-timeline v-else class="hc-time-line">
+                    <template v-for="(item, index) in flowListTask" :key="index">
+                        <el-timeline-item :class="item.status == '2' ? 'success' : 'primary'" size="large">
+                            <div class="timeline-item-icon">
+                                <hc-icon v-if="item.status == '2'" class="check-icon" name="check" />
+                            </div>
+                            <div v-if="!item.isTask" class="reply-name">{{ item.name }}</div>
+                            <div v-if="item.isTask">
+                                <div class="reply-name">
+                                    {{ item.name }}
+                                    <hc-icon v-if="item.type == 2" name="links" class="ml-2" />
+                                    <hc-icon v-if="item.type == 1" name="exchange-2" class="ml-2" />
+                                    <br>
+                                    <el-tooltip placement="right" effect="light" :visible="item.taskDetailvisible">
+                                        <template #content>
+                                            <el-timeline class="hc-time-line">
+                                                <template v-for="(item1, index1) in item.userList" :key="index1">
+                                                    <el-timeline-item :class="item1.status === '2' ? 'success' : 'primary'" size="large">
+                                                        <div class="timeline-item-icon">
+                                                            <hc-icon v-if="item1.status === '2'" class="check-icon" name="check" />
+                                                        </div>
+                                                        <div class="reply-name">{{ item1.name }}</div>
+                                                        <div class="reply-time">{{ item1.date }}</div>
+                                                        <div class="reply-content" v-html="item1.flowValue" />
+                                                    </el-timeline-item>
+                                                </template>
+                                            </el-timeline>
+                                        </template>
+                                        <el-link @click="getTaskDetail" @mouseenter="item.taskDetailvisible = true" @mouseleave="item.taskDetailvisible = false">点击查看详情</el-link>
+                                    </el-tooltip>
+                                </div>
+                            </div>
+                            <div class="reply-time">{{ item.date }}</div>
+                            <div class="reply-content" v-html="item.flowValue" />
+                        </el-timeline-item>
+                    </template>
+                </el-timeline>
+            </hc-body>
+        </div>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听
+const dataInfo = ref(props.data)
+watch(() => props.data, (data) => {
+    dataInfo.value = data
+}, { immediate: true, deep:true })
+
+//监听
+watch(isShow, (val) => {
+    if (val) getDataApi()
+})
+
+const rowInfo = ref({})
+const flowList = ref([])
+const flowListTask = ref([])
+const getDataApi = async () => {
+
+}
+
+//查看详情
+const getTaskDetail = () => {
+
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+.hc-task-time {
+    position: relative;
+    height: 100%;
+}
+</style>
+
+<style lang="scss">
+.hc-task-body-card {
+    background: #f7f7f7;
+    .el-scrollbar__bar.is-vertical {
+        right: -8px;
+    }
+    .hc-task-body-table {
+        position: relative;
+        height: calc(100% - 30px);
+        .hc-task-body-table-form {
+            position: relative;
+            height: 100%;
+            overflow: auto;
+            .title {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 18px;
+                border: 1px solid #e5e6ea;
+                height: 50px;
+            }
+            .name {
+                position: relative;
+                display: flex;
+                align-items: center;
+                font-size: 13px;
+                border: 1px solid #e5e6ea;
+                padding: 10px;
+                border-top: 0;
+            }
+            .input {
+                position: relative;
+                border: 1px solid #e5e6ea;
+                padding: 6px;
+                border-top: 0;
+            }
+            .input-box {
+                position: relative;
+                display: flex;
+                .box {
+                    position: relative;
+                    width: 50%;
+                }
+                .no-b {
+                    border-left: 0;
+                }
+            }
+        }
+    }
+    .hc-task-body-tip {
+        color: red;
+    }
+}
+</style>