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

<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>