oa-system/src/components/OP/GroupProgress.vue

<template>
    <div class="group-progress">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">商邀报批流程</span>
                </template>
                <div class="process-diagram">
                    <div slot="reference" @mouseenter="item.content=='报批资料准备'?visible = true:''" @mouseleave="visible = false" :class="item.done?'process-diagram-lis':'process-diagram-li'" v-for="(item,index) in activities" :key="index">
                        <el-popover
                        v-if="item.content=='报批资料准备'"
                        placement="top"
                        title="PS"
                        width="200"
                        trigger="manual"
                        content="其中包含：机构筛选、邮件对接、报批行程及请示、完成公务对接等"
                        v-model="visible">
                        </el-popover>
                        <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
                        <div>{{item.people}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">签证流程</span>
                </template>
                <div class="progress-table">
                    <el-table :border="true" :header-cell-style="headerCellStyle" :data="tableData" style="width: 100%">
                        <el-table-column prop="a" label="国家" width="150">
                            <template slot-scope="scope">
                                <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.a"
                                    placeholder="请输入归还人"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.b">收集资料</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.c" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.b">取护照资料</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.c" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.b">填资料</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.c" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.b">送签</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.c" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.b">出签+取护照</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.c" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.b">归还护照</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.c" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.c"
                                        placeholder="请输入归还人"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template>
                                <el-button style="margin-top: 10px;" size="mini" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px; text-align: center;">
                        <el-button size="mini" type="primary">添加一行</el-button>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="3">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">机票流程</span>
                </template>
                <div class="process-diagram">
                    <div :class="item.done?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesAir" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
                        <div>{{item.people}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="4">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">酒店流程</span>
                </template>
                <div class="process-diagram">
                    <div :class="item.done?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesHotel" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
                        <div>{{item.people}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="5">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">地接流程</span>
                </template>
                <div class="process-diagram">
                    <div :class="item.done?'process-diagram-sans':'process-diagram-san'" v-for="(item,index) in activitiesGuide" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
                        <div>{{item.people}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="6">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">费用结算</span>
                </template>
                <div class="process-diagram">
                    <div :class="item.done?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesCost" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
                        <div>{{item.people}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
export default {
    data () {
        return {
            activeNames: ['1','2','3','4','5','6'],
            tableData: [
                {
                    a:'美国',
                    b: '',
                    c: '', 
                    d: '',
                    e: '',
                    f: '',
                    g: '',
                    h:'',
                    i:'',
                    j:'',
                    k:'',
                    l:'',
                    m:'',
                },
                {
                    a:'日本',
                    b: '',
                    c: '', 
                    d: '',
                    e: '',
                    f: '',
                    g: '',
                    h:'',
                    i:'',
                    j:'',
                    k:'',
                    l:'',
                    m:'',
                },
                {
                    a:'新加坡',
                    b: '',
                    c: '', 
                    d: '',
                    e: '',
                    f: '',
                    g: '',
                    h:'',
                    i:'',
                    j:'',
                    k:'',
                    l:'',
                    m:'',
                }
            ],
            activities:[
                {
                    content: '报批资料准备',
                    time: '2018-04-01 20:46',
                    people: '五六七',
                    done: true,
                },
                {
                    content: '开始报批',
                    people: '吉吉国王',
                    done: true,
                    time: '2018-04-03 20:46',
                },
                {
                    content: '报批中',
                    done: false,
                    people: '',
                    time: '',
                },
                {
                    content: '批件已出',
                    people: '',
                    done: false,
                    time: '',
                },
            ],
            activitiesAir:[
                {
                    content: '机票占位中',
                    time: '2018-04-01 20:46',
                    people: '五六七',
                    done: true,
                },
                {
                    content: '机票已出',
                    people: '',
                    done: false,
                    time: '',
                }
            ],
            activitiesHotel:[
                {
                    content: '酒店占房中',
                    time: '2018-04-01 20:46',
                    people: '五六七',
                    done: true,
                },
                {
                    content: '酒店已定',
                    people: '',
                    done: false,
                    time: '',
                }
            ],
            activitiesGuide:[
                {
                    content: '地接对接中',
                    time: '2018-04-01 20:46',
                    people: '五六七',
                    done: true,
                },
                {
                    content: '地接已安排好',
                    people: '吉吉国王',
                    done: true,
                    time: '2018-04-03 20:46',
                },
                {
                    content: '出行物资准备完毕',
                    people: '',
                    done: false,
                    time: '',
                }
            ],
            activitiesCost:[
                {
                    content: '费用结算中',
                    time: '2018-04-01 20:46',
                    people: '五六七',
                    done: true,
                },
                {
                    content: '费用结算完毕',
                    people: '',
                    done: false,
                    time: '',
                }
            ],
            visible: false

        }
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      headerCellStyle({ row, column, rowIndex, columnIndex }) {
        console.log(row, column, rowIndex, columnIndex);
        row[0].colSpan=1;
        row[6].colSpan=6; 
        row[7].colSpan=1;
        row[1].colSpan=0;
        row[2].colSpan=0;
        row[3].colSpan=0;
        row[4].colSpan=0;
        row[5].colSpan=0;
        if (columnIndex<6&&columnIndex>0) {
            return {display: 'none' }
        }
      }
    }
}
</script>
<style>
    .group-progress{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        min-height: 830px;
    }
    .progress-content{
        display: flex;
        justify-content: space-around;
    }
    .progress-content>div{
        font-size: 17px;
        font-weight: bold;
    }
    .progress-table-content{
        text-align: left;
    }
    .progress-content div{
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .process-diagram{
        color: #606266;
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
    }
    .process-diagram-li{
        width: 10%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-li::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-li:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:210%;
        height:2px;
        background-color: #606266;
        left:55%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-lis{
        width: 10%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-lis::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-lis:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:210%;
        height:2px;
        background-color: #67C23A;
        left:55%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram>div{
        cursor: pointer;
    }
    .process-diagram .el-popover{
        left: 110%;
        top: -7px;
    }

    /*liangge*/
    .process-diagram-two{
        width: 10%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-two::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-two:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:431%;
        height:2px;
        background-color: #606266;
        left:55%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-twos{
        width: 10%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-twos::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-twos:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:431%;
        height:2px;
        background-color: #67C23A;
        left:55%;
        top:-26px;
        border-radius: 50%
    }
    /*sange*/
    .process-diagram-san{
        width: 10%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-san::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-san:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:283%;
        height:2px;
        background-color: #606266;
        left:55%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-sans{
        width: 10%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-sans::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-sans:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:283%;
        height:2px;
        background-color: #67C23A;
        left:55%;
        top:-26px;
        border-radius: 50%
    }
</style>