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

<template>
    <div class="group-progress"  v-loading="progressloading">
        <div class="progress-hade">
            <el-form style="display: flex;justify-content: space-between;align-items: center;" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-select filterable @change="GetGroupNameList" v-model="diid" placeholder="团组名称" style="width: 250px;">
                        <el-option v-for="(item, index) in AuditStatus" :key="index" :label="item.groupName"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <div>
                    <el-form-item label="团队名称:">
                        {{ formInline.name }}
                    </el-form-item>
                    <el-form-item label="客户:">
                        {{ formInline.clientName }}
                    </el-form-item>
                    <el-form-item label="出访国家:">
                        {{ formInline.CountriesVisited }}
                    </el-form-item>
                    <el-form-item label="起止日期:">
                        {{ formInline.StartTime }}
                    </el-form-item>
                    <el-form-item label="天数/人数:">
                        {{ formInline.Days }}天 / {{ formInline.Number }}人
                    </el-form-item>
                </div>
            </el-form>    
        </div>
        <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" @click="confirmclick(item,'商邀')" @mouseenter="item.nodeName=='报批资料准备'?visible = true:''" @mouseleave="visible = false" :class="item.statusText=='已完成'?'process-diagram-lis':'process-diagram-li'" v-for="(item,index) in activities" :key="index">
                        <el-popover
                        v-if="item.nodeName=='报批资料准备'"
                        placement="top"
                        title="PS"
                        width="200"
                        trigger="manual"
                        content="其中包含：机构筛选、邮件对接、报批行程及请示、完成公务对接等"
                        v-model="visible">
                        </el-popover>
                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
                        <div>{{item.statusText}}</div>
                        <div>{{item.operator}}</div>
                        <div>{{item.opeateTime}}</div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template #title>
                    <div style="display: inline-block;width: 100%;">
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <span style="font-size: 18px; font-weight: bold;">签证流程</span>
                            <el-button @click.stop="Visaclick('签证')" style="margin-right: 20px;" size="mini" type="primary">签证流程保存</el-button>
                        </div>
                    </div>
                </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.countryName"
                                    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.isHandle1">{{scope.row.nodeName1}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime1" 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.isHandle2">{{scope.row.nodeName2}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime2" 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.isHandle3">{{scope.row.nodeName3}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime3" 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.isHandle4">{{scope.row.nodeName4}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime4" 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.handleTime5">{{scope.row.nodeName5}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime5" 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.isHandle6">{{scope.row.nodeName6}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime6" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.returner"
                                        placeholder="请输入归还人"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button style="margin-top: 10px;" size="mini" @click.native.prevent="deleteRow(scope.$index, tableData,'签证')" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px; text-align: center;">
                        <el-button @click="addRow('签证')" 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 @click="confirmclick(item,'机票')" :class="item.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesAir" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
                        <div>{{item.statusText}}</div>
                        <div>{{item.operator}}</div>
                        <div>{{item.opeateTime}}</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 @click="confirmclick(item,'酒店')" :class="item.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesHotel" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
                        <div>{{item.statusText}}</div>
                        <div>{{item.operator}}</div>
                        <div>{{item.opeateTime}}</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 @click="confirmclick(item,'OP')" :class="item.statusText=='已完成'?'process-diagram-sans':'process-diagram-san'" v-for="(item,index) in activitiesGuide" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
                        <div>{{item.statusText}}</div>
                        <div>{{item.operator}}</div>
                        <div>{{item.opeateTime}}</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.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesCost" :key="index">
                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
                        <div>{{item.statusText}}</div>
                        <div>{{item.operator}}</div>
                        <div>{{item.opeateTime}}</div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
        
    </div>
</template>
<script>
export default {
    data () {
        return {
            activeNames: ['1','2','3','4','5','6'],
            tableData: [],
            activities:[],
            activitiesAir:[],
            activitiesHotel:[],
            activitiesGuide:[],
            activitiesCost:[],
            visible: false,
            diid:'',
            AuditStatus:[],
            formInline: {
                name: '',
                clientName: '',
                CountriesVisited: '',
                StartTime: '',
                Days: 0,
                Number: 0,
                Status: '',
            },
            token:'',
            userId:'',
            progressloading:false,
            jobName:'',
            visaclickid:'',
        }
    },
    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' }
            }
        },
        //获取团组id
        GetGroupNameList(){
            this.progressloading=true;
            this.AuditStatus=[];
            var url = "/api/Business/GetGroupNameList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.AuditStatus=res.data.data;
                    if (that.diid==='') {
                        that.diid=res.data.data[0].id;
                        
                    }
                    that.PostShareGroupInfo();
                }else{
                    that.progressloading=false;
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取团组详情
        PostShareGroupInfo(){
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    id: that.diid
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.formInline.name = res.data.data.teamName;
                    that.formInline.clientName = res.data.data.clientName;
                    that.formInline.CountriesVisited = res.data.data.visitCountry;
                    that.formInline.StartTime = res.data.data.visitStartDate.split(' ')[0]+'~'+res.data.data.visitEndDate.split(' ')[0];
                    that.formInline.Days = res.data.data.visitDays;
                    that.formInline.Number = res.data.data.visitPNumber;
                    that.GroupProcessDetails();
                }else{
                    that.$message.error('获取数据源失败！');
                    that.progressloading=false;
                }
            })
        },
        //获取数据
        GroupProcessDetails() {
            var that = this
            var url = "/api/Groups/GroupProcessDetails?groupId=" + that.diid
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    for (let i = 0; i < res.data.data.length; i++) {
                        console.log(res.data.data[i]);
                        if (res.data.data[i].processName == '费用结算') {
                            that.activitiesCost=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '地接') {
                            that.activitiesGuide=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '酒店') {
                            that.activitiesHotel=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '机票') {
                            that.activitiesAir=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '商邀报批') {
                            that.activities=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '签证') {
                            that.tableData=res.data.data[i].nodes[0].visaSubNodes;
                            that.visaclickid=res.data.data[i].nodes[0].id;
                        }
                    }
                    that.progressloading=false;
                } else {
                    that.activitiesCost=[];
                    that.activitiesGuide=[];
                    that.activitiesHotel=[];
                    that.activitiesAir=[];
                    that.activities=[];
                    that.tableData=[];
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //签证添加一行
        addRow(text) {
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.tableData.push({
                countryName: '',
                nodeName1: '收集资料',
                isHandle1: false,
                handleTime1: '',
                nodeName2: '取护照资料',
                isHandle2: false,
                handleTime2: '',
                nodeName3: '填资料',
                isHandle3: false,
                handleTime3: '',
                nodeName4: '送签',
                isHandle4: false,
                handleTime4: '',
                nodeName5: '签+取护照',
                isHandle5: false,
                handleTime5: '',
                nodeName6: '归还护照',
                isHandle6: false,
                handleTime6: '',
                returner: ''
            });
        },
        //签证删除一行
        deleteRow(index, rows,text) {
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.$confirm('此操作将该数据移除并未保存,需要更新数据请点击本流程保存按钮, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rows.splice(index, 1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消！'
                });
            });
            
        },
        //点击确认
        confirmclick(item,text){
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.progressloading=true;
            var url = "/api/Groups/GroupProcessUpdateNodeStatus"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    nodeId:item.id,
                    currUserId: that.userId
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.GroupProcessDetails();
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //签证保存
        Visaclick(text){
            console.log(this.tableData);
            
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.progressloading=true;
            var url = "/api/Groups/GroupProcessUpdateVisaNodeDetails"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    nodeId:that.visaclickid,
                    currUserId:that.userId,
                    visaSubNodes:that.tableData,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.GroupProcessDetails();
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        }
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.jobName = JSON.parse(localStorage.getItem('userinif')).userInfo.jobName;
        this.GetGroupNameList();
        // this.GroupProcessDetails();
    }
}
</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>