oa-system/src/components/child/Controltree.vue

<template>
    <div class="controltree-box">
        <div class="controltree-w">
            <div class="controltree-ul" >
                <div class="controltree-li" v-for="(item,index) in treeData" :key="index">
                    {{item.label}}
                    <div v-if="item.children" class="second-ul">
                        <div class="second-ul-haed">
                            <div>版块步骤</div>
                            <div>预计完成时间</div>
                            <div>完成时间</div>
                        </div>
                        <div v-if="item.panduan=='wu'">
                            <div v-for="(seconditem,index) in item.children" :key="index"   class="li-steps-li">
                                <div :style="filter_color(seconditem.state)">{{seconditem.label}}</div>
                                <div>{{seconditem.date}}</div>
                                <div>{{seconditem.enddate}}</div>
                            </div>
                        </div>
                        <div v-if="item.panduan=='you'" style="padding:5px">
                            <div v-for="(seconditem,index) in item.children" :key="index" class="second-li">
                                <span>{{seconditem.label}}</span>
                                <div class="li-steps-ul">
                                    <div class="zanwu" v-if="!seconditem.children">暂无事件</div>
                                    <div v-for="(stepsitem,index) in seconditem.children" :key="index"   class="li-steps-li">
                                        <div :style="filter_color(stepsitem.state)">{{stepsitem.label}}</div>
                                        <div>{{stepsitem.date}}</div>
                                        <div>{{stepsitem.enddate}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            treeData: [{
                    id: 1,
                    label: "团组出行",
                },
                {
                    id: 2,
                    label: "确认出团",
                },
                {
                    id: 3,
                    label: "经费预算",
                    panduan:"wu",
                    children:[
                        {
                            id:15,
                            label: "完成经费预算",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        }
                    ]
                },
                {
                    id: 4,
                    label: " 市场部人员报价对接/反馈",
                    panduan:"wu",
                    children:[
                        {
                            id:18,
                            label: "完成报价对接/反馈",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        },
                        {
                            id:19,
                            label: "录入最终总经费预算",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        },
                        {
                            id:20,
                            label: "上传明细单",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        }
                    ]
                },
                {
                    id: 5,
                    label: "报批流程"
                },
                {
                    id: 6,
                    label: "护照/签证",
                    panduan:"wu",
                    children:[
                        {
                            id:22,
                            label: "签证费用录入",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:23,
                            label: "归还护照",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:2
                        },
                        {
                            id:24,
                            label: "出签＋取护照",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:3
                        },
                        {
                            id:25,
                            label: "送签",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:3
                        },
                        {
                            id:26,
                            label: "填资料",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:27,
                            label: "取护照资料",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:28,
                            label: "收集资料",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        }
                    ]
                },
                {
                    id: 7,
                    label: "各版块操作",
                    panduan:"you",
                    children:[
                        {
                            id:29,
                            label: "机票",
                            children:[
                                {
                                    id:42,
                                    label: "询价并导入黑屏代码",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10',
                                    state:1
                                },
                                {
                                    id:43,
                                    label: "机票已占位",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10',
                                    state:1
                                },
                                {
                                    id:44,
                                    label: "已出票",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10',
                                    state:2
                                },
                                {
                                    id:45,
                                    label: "机票费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'',
                                    state:3
                                }
                            ]
                        },
                        {
                            id:30,
                            label: "酒店",
                            children:[
                                {
                                    id:46,
                                    label: "酒店费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        },
                        {
                            id:31,
                            label: "OP",
                            children:[
                                {
                                    id:47,
                                    label: "OP费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        },
                        {
                            id:32,
                            label: "商邀",
                            children:[
                                {
                                    id:48,
                                    label: "报批/商邀费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        },
                        {
                            id:33,
                            label: "其他",
                            children:[
                                {
                                    id:49,
                                    label: "增减款项录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 8,
                    label: "费用审批",
                    panduan:"wu",
                    children:[
                        {
                            id:34,
                            label: "机票费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:35,
                            label: "酒店费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:36,
                            label: "OP费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:37,
                            label: "商邀费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:38,
                            label: "增减款项审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        }
                    ]
                },
                {
                    id: 9,
                    label: "付款给供应商",
                    panduan:"wu",
                    children:[
                        {
                            id:39,
                            label: "OP费用付款",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:40,
                            label: "商邀费用付款",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:41,
                            label: "增减款项付款",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        }
                    ]
                },
                {
                    id: 10,
                    label: "开行前会"
                },
                {
                    id: 11,
                    label: "送机"
                },
                {
                    id: 12,
                    label: "数据/附件归档"
                },
                {
                    id: 13,
                    label: "接机"
                },
                {
                    id: 14,
                    label: "客户意见表"
                }
            ]
        }
    },
    created(){
       
    },
    methods:{
        filter_color(val){
            if(val==1){
                return "color:green"
            }
            if(val==3){
                return "color:red"
            }
            if(val==2){
                return "color:#8f8383"
            }
        }
    },
    filters:{
        
    }
}
</script>
<style>
    ul li{
        list-style: none;
    }
    .controltree-box{
        background-color: #fff;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        padding: 100px 0;
    }
    .controltree-ul{
        display: flex;
        flex-direction: column;
    }
    .controltree-w{
        display: inline-block;
        margin: 0 auto;

    }
    .controltree-li{
        display: inline-block;
        padding: 10px 20px;
        box-shadow: 0 0 5px #0005;
        border-radius: 5px;
        text-align: center;
        position: relative;
    }
    .controltree-li:not(:last-child){
        margin-bottom: 250px;
    }
    .controltree-li:not(:last-child)::after{
        content: "";
        display: inline-block;
        width: 1px;
        height: 245px;
        position: absolute;
        left: 50%;
        top: 44px;
        background-color: #F1B72C;
    }
    .controltree-li:nth-child(2n) .second-ul::before{
        content: "";
        display: inline-block;
        width: 75px;
        height: 1px;
        position: absolute;
        left: -75px;
        top: 20px;
        background-color: #F1B72C;
    }
    .controltree-li:nth-child(2n+1) .second-ul::before{
        content: "";
        display: inline-block;
        width: 75px;
        height: 1px;
        position: absolute;
        right: -75px;
        top: 20px;
        background-color: #1E5DA5;
    }
    .second-ul{
        width: 480px;
        position: absolute;
        top: 0px;
        box-shadow: 0 0 5px #0005;
        border-radius: 5px;
    }
    .second-li{
        text-align: left;
        position: relative;
        margin-bottom: 10px;
    }
    .controltree-li:nth-child(2n+1) .second-ul{
        flex-direction: row-reverse;
        color: #1E5DA5;
    }
    .controltree-li:nth-child(2n+1) .second-ul .second-ul-haed{
        background-color: #1E5DA5;
    }
    .controltree-li:nth-child(2n) .second-ul .second-ul-haed{
        background-color: #F1B72C;
    }
    .second-ul-haed{
        display: flex;
        justify-content: space-between;
        color: #fff;
        border-radius: 5px 5px 0px 0px;
    }
    .second-ul-haed>div{
        padding: 10px 0;
    }
    .second-ul-haed>div:nth-child(1){
        width: 30%;
    }
    .second-ul-haed>div:nth-child(2){
        border-left: 1px solid #fff;
        border-right:1px solid #fff ;
        width: 50%;
    }
    .second-ul-haed>div:nth-child(3){
        width: 20%;
    }
    /*.controltree-li:nth-child(2n+1) .second-ul .second-li::after{
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        position: absolute;
        left: 21px;
        top: 10px;
        background-color: #1E5DA5;
    }*/
    .controltree-li:nth-child(2n) .second-ul{
        left: 300px;
        color: #F1B72C;
    }
    .controltree-li:nth-child(2n+1) .second-ul{
        right: 300px;
        color: #1E5DA5;
    }
    .controltree-li:nth-child(2n){
        background-color: #F1B72C;
        color: #fff;
    }
    .controltree-li:nth-child(2n+1){
        background-color: #1E5DA5;
        color: #fff;
    }
    /*.controltree-li:nth-child(2n) .second-ul .second-li::after{
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        position: absolute;
        right: 21px;
        top: 10px;
        background-color: #F1B72C;
    }*/
    .second-li span{
        display: inline-block;
        width: 30%;
        color: #555;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .li-steps-li{
        display: flex;
        align-items: center;
        color: #8f8383;
    }
    .li-steps-li>div{
        font-size: 13px;
        padding: 5px 0;
        text-align: center;
        height: 100%;
        padding: 11px 0;
    }
    .li-steps-li{
        border: 1px solid #f7f7f7;
    }
    .li-steps-li:not(:first-child){
        border-top: none;
    }
    .li-steps-li>div:not(:first-child){
        border-left:1px solid #f7f7f7 ;
    }
    .li-steps-li>div:nth-child(1){
        width: 30%;
    }
    .li-steps-li>div:nth-child(2){
        width: 50%;
    }
    .li-steps-li>div:nth-child(3){
        width: 20%;
    }
    .zanwu{
        font-size: 12px;
        color: #8f8383;
        width: 30%;
        text-align: center;
        padding: 5px;
    }
</style>