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

<template>
    <div>
        <div class="backward-all">
            <div class="backward-head">
                <div class="backward-head-li">
                    <label>团组名称:</label>
                    <el-select @change="changegroup" style="width:250px" v-model="value" filterable :filter-method="advancedFilter"
                        placeholder="请选择">
                        <el-option v-for="item in filteredOptions" :key="item.id" :label="item.teamName" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="backward-head-li">
                    <span style="color: red;"><spu>*</spu>会务倒退表没有预览直接下载即可</span>
                    <el-button @click="InforRetrogressTableFileDownload" type="primary">导出会务倒退表</el-button>
                    <el-button @click="PostInvertedListCreate" type="primary">生成倒推表</el-button>
                    <el-button @click="PostInvertedListUpdate" type="primary">保 存</el-button>
                    <el-button @click="PostInvertedListFileDownload" type="primary">导出倒推表</el-button>
                    <el-button @click="PostInvertedListClientFileDownload" type="primary">导出倒推表(客户)</el-button>
                </div>
            </div>
            <div class="backward-title">
                <div class="backward-title-yi">{{groupinfo.teamName}}团出行准备流程表</div>
                <div class="backward-title-er">
                    出访国家：{{groupinfo.visitCountry}}&nbsp;&nbsp;&nbsp;&nbsp;出访时间：{{groupinfo.visitStartDate|capitalize}}</div>
            </div>
            <div class="backward-table">
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedAirportd"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.approvalDataDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_ApprovalDataDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">报批资料准备</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.approvalDataRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedApprovalData"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.approvalDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_ApprovalDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <div style="line-height: 25px;">
                            报批/提供送签资料
                        </div>
                        <div style="line-height: 25px;">
                            <el-radio v-model="datainfo.approvalType" label="1">预批件</el-radio>
                            <el-radio v-model="datainfo.approvalType" label="2">正常批件</el-radio>
                        </div>
                    </div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.approvalRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedIssueApproval"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.issueApprovalDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_IssueApprovalDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span"><div style="line-height: 25px;padding: 0;">出批件</div><div  style="line-height: 25px;padding: 0;">护照办理</div></div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.issueApprovalRemark">
                        </el-input>
                    </div>
                </div>
                <!-- <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-date-picker v-model="datainfo.applyPassportDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">护照办理</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.applyPassportRemark">
                        </el-input>
                    </div>
                </div> -->
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedVisaInfo"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.visaInformationDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_VisaInformationDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">签证资料准备</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.visaInformationRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedSendVisa"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.sendVisaDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_SendVisaDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">送签签证</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.sendVisaRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <!-- <el-checkbox v-model="isSelectedAirportd"></el-checkbox> -->
                    </div>
                    <div class="backward-li-span">
                        送签国家选择：
                    </div>
                    <div class="backward-li-span"></div>
                    <div class="backward-li-span"></div>
                    <div class="backward-li-span">
                        <el-table :data="datainfo.visaCountryData" border style="width: 100%">
                            <el-table-column prop="country" label="国家">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.country" placeholder="请输入内容"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="officialTypeId" label="公务类型" width="150">
                                <template slot-scope="scope">
                                    <el-select style="width:100%" v-model="scope.row.officialTypeId" clearable placeholder="请选择"
                                        @change="filterStatus(value)">
                                        <el-option v-for="item in officialTypeData" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="visaTypeId" label="签证类型" width="150">
                                <template slot-scope="scope">
                                    <el-select style="width:100%" v-model="scope.row.visaTypeId" clearable placeholder="请选择"
                                        @change="filterStatus(value)">
                                        <el-option v-for="item in visaTypeData" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="visaDay" label="签证时间" width="150">
                                <template slot-scope="scope">
                                    <el-input-number style="width:100%" :min="1" :precision="0" placeholder="数量" v-model="scope.row.visaDay" :controls='false'>
                                    </el-input-number>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedIssueVisa"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.issueVisaDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_IssueVisaDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">出签</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.issueVisaRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedAirTicket"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.airTicketDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_AirTicketDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">机票</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.airTicketRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedHotel"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.hotelDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_HotelDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">酒店</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.hotelRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedPreTripMeeting"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.preTripMeetingDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_PreTripMeetingDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">开行前会</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.preTripMeetingRemark">
                        </el-input>
                    </div>
                </div>
                <div class="backward-table-li">
                    <div class="backward-li-span">
                        <el-checkbox v-model="datainfo.isSelectedAirportdDropOff"></el-checkbox>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.airportdDropOffDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="datainfo.client_AirportdDropOffDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="backward-li-span">送机</div>
                    <div class="backward-li-span">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入内容"
                            v-model="datainfo.airportdDropOffRemark">
                        </el-input>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            userId:'',
            token:'',
            value:'',
            options:[],
            filteredOptions: [],
            searchMode: 'character', // 'character': 字符匹配, 'fuzzy': 模糊匹配
            groupinfo:{},
            value1:'',
            radio:'1',
            datainfo:{
                airportdDropOffDt:'',//送机 - A
                airportdDropOffRemark:'',//送机 备注
                applyPassportDt:'',//办护照时间 - B
                applyPassportRemark:'',//办护照 备注
                approvalDataDt:'',//报批资料准备时间 - A
                approvalDataRemark:'',//报批资料准备 备注
                approvalDt:'',//报批时间 - A
                approvalRemark:'',//报批 备注
                approvalType:0,//报批时间 1 预批件 2 正常批件 默认值？？-1
                diId:0,
                id:0,
                isAirportdDropOff:0,//送机 是否完成
                isApplyPassport:0,//办护照 是否完成
                isApproval:0,//报批 是否完成
                isApprovalData:0,//报批资料准备 是否完成
                isIssueApproval:0,//出批件 是否完成
                isIssueVisa:0,//出签 是否完成
                isPreTripMeeting:0,//行前会 是否完成
                isQuery:false,//查询标识 true 需提醒客户该团未创建倒推表
                isSendVisa:0,//送签 是否完成
                isVisaInformation:0,//签证资料准备 是否完成
                issueApprovalDt:'',//出批件时间 - A
                issueApprovalRemark:'',//出批件时间 备注
                issueVisaDt:'',//出签时间 - B
                issueVisaRemark:'',//出签 备注

                airTicketDt:'',//机票 - B
                isAirTicket:0,//机票 是否完成
                airTicketRemark:'',//机票 备注
                hotelDt:'',//酒店 - B
                isHotel:0,//酒店 是否完成
                hotelRemark:'',//酒店 备注
                isSelectedAirportd:0,//报批资料准备
                isSelectedApprovalData:0,//报批/提供送签资料 是否选中
                isSelectedIssueApproval:0,//出批件 是否选中
                isSelectedVisaInfo:0,//签证资料准备 是否选中
                isSelectedSendVisa:0,//送签签证 是否选中
                isSelectedIssueVisa:0,//出签 是否选中
                isSelectedAirTicket:0,//机票 是否选中
                isSelectedHotel:0,//酒店 是否选中
                isSelectedPreTripMeeting:0,//行前会 是否选中
                isSelectedAirportdDropOff:0,//送机 是否选中

                preTripMeetingDt:'',//行前会 - A
                preTripMeetingRemark:'',//行前会 备注
                sendVisaDt:'',//送签时间 - B
                sendVisaRemark:'',//送签 备注
                visaCountryData:[],
                visaInformationDt:'',//签证资料准备时间
                visaInformationRemark:'',//签证资料准备 备注
                client_ApprovalDataDt:'',//报批资料准备时间(客户) - A
                client_ApprovalDt:'',//报批时间(客户) - A
                client_IssueApprovalDt:'',//出批件时间(客户) - A
                client_VisaInformationDt:'',//签证资料准备时间(客户)
                client_SendVisaDt:'',//送签时间(客户) - B
                client_IssueVisaDt:'',//出签时间(客户) - B
                client_AirTicketDt:'',//机票(客户) - B
                client_HotelDt:'',//酒店(客户) - B
                client_PreTripMeetingDt:'',//行前会(客户) - A
                client_AirportdDropOffDt:'',//送机(客户) - A
            },
            officialTypeData:[],
            visaTypeData:[],
        }   
    },
    methods:{
        advancedFilter(query) {
            if (!query || query.trim() === '') {
                this.filteredOptions = [...this.options];
                return;
            }

            const trimmedQuery = query.trim();

            if (this.searchMode === 'character') {
                // 字符匹配模式：每个字都必须包含
                this.characterMatchFilter(trimmedQuery);
            } else {
                // 模糊匹配模式（默认的filterable行为）
                this.fuzzyMatchFilter(trimmedQuery);
            }
        },

        /*** 严格的字符匹配 - 每个查询字符都必须出现*/
        characterMatchFilter(query) {
            const queryChars = query.split('').filter(char => char.trim() !== '');

            this.filteredOptions = this.options.filter(item => {
                const groupName = item.teamName || '';
                return queryChars.every(char => groupName.includes(char));
            });
        },
        /*** 模糊匹配 - 包含整个查询字符串即可*/
        fuzzyMatchFilter(query) {
            const lowerQuery = query.toLowerCase();
            this.filteredOptions = this.options.filter(item => {
                const groupName = (item.teamName || '').toLowerCase();
                return groupName.includes(lowerQuery);
            });
        },
        //获取团组list
        GetGroupNameList() {
            var url = "/api/Groups/PostInvertedListInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.options=res.data.data.groupData;
                    that.filteredOptions= that.options;
                    console.log(that.filteredOptions);
                    
                    that.value=that.options[0].id;
                    that.officialTypeData=res.data.data.officialTypeData;
                    that.visaTypeData=res.data.data.visaTypeData;
                    that.officialTypeData.push({id:-1,name:'未选择'});
                    that.visaTypeData.push({id:-1,name:'未选择'});
                    that.PostShareGroupInfo();
                    that.PostInvertedListInfo();
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //获取团组倒推表
        PostInvertedListInfo() {
            var url = "/api/Groups/PostInvertedListInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    diId: that.value
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.datainfo.airportdDropOffDt=res.data.data.airportdDropOffDt;
                    that.datainfo.airportdDropOffRemark=res.data.data.airportdDropOffRemark;
                    that.datainfo.applyPassportDt=res.data.data.applyPassportDt;
                    that.datainfo.applyPassportRemark=res.data.data.applyPassportRemark;
                    that.datainfo.approvalDataDt=res.data.data.approvalDataDt;
                    that.datainfo.approvalDataRemark=res.data.data.approvalDataRemark;
                    that.datainfo.approvalDt=res.data.data.approvalDt;
                    that.datainfo.approvalRemark=res.data.data.approvalRemark;
                    that.datainfo.approvalType=res.data.data.approvalType+'';
                    that.datainfo.diId=res.data.data.diId;
                    that.datainfo.id=res.data.data.id;
                    that.datainfo.isAirportdDropOff=res.data.data.isAirportdDropOff;
                    that.datainfo.isApplyPassport=res.data.data.isApplyPassport;
                    that.datainfo.isApproval=res.data.data.isApproval;
                    that.datainfo.isApprovalData=res.data.data.isApprovalData;
                    that.datainfo.isIssueApproval=res.data.data.isIssueApproval;
                    that.datainfo.isIssueVisa=res.data.data.isIssueVisa;
                    that.datainfo.isPreTripMeeting=res.data.data.isPreTripMeeting;
                    that.datainfo.isQuery=res.data.data.isQuery;
                    that.datainfo.isSendVisa=res.data.data.isSendVisa;
                    that.datainfo.isVisaInformation=res.data.data.isVisaInformation;
                    that.datainfo.issueApprovalDt=res.data.data.issueApprovalDt;
                    that.datainfo.issueApprovalRemark=res.data.data.issueApprovalRemark;
                    that.datainfo.issueVisaDt=res.data.data.issueVisaDt;
                    that.datainfo.issueVisaRemark=res.data.data.issueVisaRemark;

                    that.datainfo.airTicketDt=res.data.data.airTicketDt;
                    that.datainfo.isAirTicket=res.data.data.isAirTicket;
                    that.datainfo.airTicketRemark=res.data.data.airTicketRemark;
                    that.datainfo.hotelDt=res.data.data.hotelDt;
                    that.datainfo.isHotel=res.data.data.isHotel;
                    that.datainfo.hotelRemark=res.data.data.hotelRemark;
                    that.datainfo.isSelectedAirportd=res.data.data.isSelectedAirportd;
                    that.datainfo.isSelectedApprovalData=res.data.data.isSelectedApprovalData;
                    that.datainfo.isSelectedIssueApproval=res.data.data.isSelectedIssueApproval;
                    that.datainfo.isSelectedVisaInfo=res.data.data.isSelectedVisaInfo;
                    that.datainfo.isSelectedSendVisa=res.data.data.isSelectedSendVisa;
                    that.datainfo.isSelectedIssueVisa=res.data.data.isSelectedIssueVisa;
                    that.datainfo.isSelectedAirTicket=res.data.data.isSelectedAirTicket;
                    that.datainfo.isSelectedHotel=res.data.data.isSelectedHotel;
                    that.datainfo.isSelectedPreTripMeeting=res.data.data.isSelectedPreTripMeeting;
                    that.datainfo.isSelectedAirportdDropOff=res.data.data.isSelectedAirportdDropOff;

                    that.datainfo.preTripMeetingDt=res.data.data.preTripMeetingDt;
                    that.datainfo.preTripMeetingRemark=res.data.data.preTripMeetingRemark 
                    that.datainfo.sendVisaDt=res.data.data.sendVisaDt;
                    that.datainfo.sendVisaRemark=res.data.data.sendVisaRemark;
                    that.datainfo.visaCountryData=res.data.data.visaCountryData;
                    that.datainfo.visaInformationDt=res.data.data.visaInformationDt;
                    that.datainfo.visaInformationRemark=res.data.data.visaInformationRemark;
                    that.datainfo.client_ApprovalDataDt=res.data.data.client_ApprovalDataDt;
                    that.datainfo.client_ApprovalDt=res.data.data.client_ApprovalDt;
                    that.datainfo.client_IssueApprovalDt=res.data.data.client_IssueApprovalDt;
                    that.datainfo.client_VisaInformationDt=res.data.data.client_VisaInformationDt;
                    that.datainfo.client_SendVisaDt=res.data.data.client_SendVisaDt;
                    that.datainfo.client_IssueVisaDt=res.data.data.client_IssueVisaDt;
                    that.datainfo.client_AirTicketDt=res.data.data.client_AirTicketDt;
                    that.datainfo.client_HotelDt=res.data.data.client_HotelDt;
                    that.datainfo.client_PreTripMeetingDt=res.data.data.client_PreTripMeetingDt;
                    that.datainfo.client_AirportdDropOffDt=res.data.data.client_AirportdDropOffDt;
                    if(that.datainfo.isQuery==true){
                        that.PostInvertedListCreate()
                        // that.$notify({
                        // title: '提示',
                        // message: '暂无签证费用信息！',
                        // duration: 0
                        // });
                    }
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //数据初始化
        datacsh(){
            this.datainfo={
                airportdDropOffDt:'',//送机 - A
                airportdDropOffRemark:'',//送机 备注
                applyPassportDt:'',//办护照时间 - B
                applyPassportRemark:'',//办护照 备注
                approvalDataDt:'',//报批资料准备时间 - A
                approvalDataRemark:'',//报批资料准备 备注
                approvalDt:'',//报批时间 - A
                approvalRemark:'',//报批 备注
                approvalType:0,//报批时间 1 预批件 2 正常批件 默认值？？-1
                diId:0,
                id:0,
                isAirportdDropOff:0,//送机 是否完成
                isApplyPassport:0,//办护照 是否完成
                isApproval:0,//报批 是否完成
                isApprovalData:0,//报批资料准备 是否完成
                isIssueApproval:0,//出批件 是否完成
                isIssueVisa:0,//出签 是否完成

                airTicketDt:'',//机票 - B
                isAirTicket:0,//机票 是否完成
                airTicketRemark:'',//机票 备注
                hotelDt:'',//酒店 - B
                isHotel:0,//酒店 是否完成
                hotelRemark:'',//酒店 备注
                isSelectedAirportd:0,//送机 是否选中
                isSelectedApprovalData:0,//报批/提供送签资料 是否选中
                isSelectedIssueApproval:0,//出批件 是否选中
                isSelectedVisaInfo:0,//签证资料准备 是否选中
                isSelectedSendVisa:0,//送签签证 是否选中
                isSelectedIssueVisa:0,//出签 是否选中
                isSelectedAirTicket:0,//机票 是否选中
                isSelectedHotel:0,//酒店 是否选中
                isSelectedPreTripMeeting:0,//行前会 是否选中
                isSelectedAirportdDropOff:0,//送机 是否选中

                isPreTripMeeting:0,//行前会 是否完成
                isQuery:false,//查询标识 true 需提醒客户该团未创建倒推表
                isSendVisa:0,//送签 是否完成
                isVisaInformation:0,//签证资料准备 是否完成
                issueApprovalDt:'',//出批件时间 - A
                issueApprovalRemark:'',//出批件时间 备注
                issueVisaDt:'',//出签时间 - B
                issueVisaRemark:'',//出签 备注
                preTripMeetingDt:'',//行前会 - A
                preTripMeetingRemark:'',//行前会 备注
                sendVisaDt:'',//送签时间 - B
                sendVisaRemark:'',//送签 备注
                visaCountryData:[],
                visaInformationDt:'',//签证资料准备时间
                visaInformationRemark:'',//签证资料准备 备注
                client_ApprovalDataDt:'',//
                client_ApprovalDt:'',//
                client_IssueApprovalDt:'',//
                client_VisaInformationDt:'',//
                client_SendVisaDt:'',//
                client_IssueVisaDt:'',//
                client_AirTicketDt:'',//
                client_HotelDt:'',//
                client_PreTripMeetingDt:'',//
                client_AirportdDropOffDt:'',//
            }
        },
        //获取团组info
        PostShareGroupInfo() {
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    id: that.value,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.groupinfo=res.data.data;
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //团组切换
        changegroup(){
            this.datacsh();
            this.PostShareGroupInfo();
            this.PostInvertedListInfo();
        },
        //生成会务倒推表
        InforRetrogressTableFileDownload() {
            var url = "/api/Groups/InforRetrogressTableFileDownload"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    groupId:that.value,
                    currUserId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                        offset:50
                    });
                    window.open(res.data.data.url)
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //生成倒推表
        PostInvertedListCreate() {
            var url = "/api/Groups/PostInvertedListCreate"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    diId: that.value
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                        offset:50
                    });
                    that.PostInvertedListInfo();
                    
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //保存
        PostInvertedListUpdate() {
            var that = this
            var url = "/api/Groups/PostInvertedListUpdate"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    isQuery:that.datainfo.isQuery,
                    id: that.datainfo.id,
                    diId: that.datainfo.diId,
                    approvalDataDt: that.datainfo.approvalDataDt,
                    isApprovalData: that.datainfo.isApprovalData,
                    approvalDataRemark: that.datainfo.approvalDataRemark,
                    approvalDt: that.datainfo.approvalDt,
                    approvalType: that.datainfo.approvalType,
                    isApproval: that.datainfo.isApproval,
                    approvalRemark: that.datainfo.approvalRemark,
                    issueApprovalDt: that.datainfo.issueApprovalDt,
                    isIssueApproval: that.datainfo.isIssueApproval,
                    issueApprovalRemark: that.datainfo.issueApprovalRemark,
                    applyPassportDt: that.datainfo.applyPassportDt,
                    isApplyPassport: that.datainfo.isApplyPassport,
                    applyPassportRemark: that.datainfo.applyPassportRemark,
                    visaInformationDt: that.datainfo.visaInformationDt,
                    isVisaInformation: that.datainfo.isVisaInformation,
                    visaInformationRemark: that.datainfo.visaInformationRemark,
                    visaCountryData: that.datainfo.visaCountryData,
                    sendVisaDt: that.datainfo.sendVisaDt,
                    isSendVisa: that.datainfo.isSendVisa,
                    sendVisaRemark: that.datainfo.sendVisaRemark,
                    issueVisaDt: that.datainfo.issueVisaDt,
                    isIssueVisa: that.datainfo.isIssueVisa,
                    issueVisaRemark: that.datainfo.issueVisaRemark,

                    airTicketDt: that.datainfo.airTicketDt,
                    isAirTicket: that.datainfo.isAirTicket,
                    airTicketRemark: that.datainfo.airTicketRemark,
                    hotelDt: that.datainfo.hotelDt,
                    isHotel: that.datainfo.isHotel,
                    hotelRemark: that.datainfo.hotelRemark,
                    isSelectedAirportd: that.datainfo.isSelectedAirportd,
                    isSelectedApprovalData: that.datainfo.isSelectedApprovalData,
                    isSelectedIssueApproval: that.datainfo.isSelectedIssueApproval,
                    isSelectedVisaInfo: that.datainfo.isSelectedVisaInfo,
                    isSelectedSendVisa: that.datainfo.isSelectedSendVisa,
                    isSelectedIssueVisa: that.datainfo.isSelectedIssueVisa,
                    isSelectedAirTicket: that.datainfo.isSelectedAirTicket,
                    isSelectedHotel: that.datainfo.isSelectedHotel,
                    isSelectedPreTripMeeting: that.datainfo.isSelectedPreTripMeeting,
                    isSelectedAirportdDropOff: that.datainfo.isSelectedAirportdDropOff,

                    preTripMeetingDt: that.datainfo.preTripMeetingDt,
                    isPreTripMeeting: that.datainfo.isPreTripMeeting,
                    preTripMeetingRemark: that.datainfo.preTripMeetingRemark,
                    airportdDropOffDt: that.datainfo.airportdDropOffDt,
                    isAirportdDropOff: that.datainfo.isAirportdDropOff,
                    airportdDropOffRemark: that.datainfo.airportdDropOffRemark,
                    client_ApprovalDataDt: that.datainfo.client_ApprovalDataDt,
                    client_ApprovalDt: that.datainfo.client_ApprovalDt,
                    client_IssueApprovalDt: that.datainfo.client_IssueApprovalDt,
                    client_VisaInformationDt: that.datainfo.client_VisaInformationDt,
                    client_SendVisaDt: that.datainfo.client_SendVisaDt,
                    client_IssueVisaDt: that.datainfo.client_IssueVisaDt,
                    client_AirTicketDt: that.datainfo.client_AirTicketDt,
                    client_HotelDt: that.datainfo.client_HotelDt,
                    client_PreTripMeetingDt: that.datainfo.client_PreTripMeetingDt,
                    client_AirportdDropOffDt: that.datainfo.client_AirportdDropOffDt,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                        offset:50
                    });
                    that.PostInvertedListInfo();
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //导出倒推表
        PostInvertedListFileDownload() {
            var that = this
            var url = "/api/Groups/PostInvertedListUpdate"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    isQuery:that.datainfo.isQuery,
                    id: that.datainfo.id,
                    diId: that.datainfo.diId,
                    approvalDataDt: that.datainfo.approvalDataDt,
                    isApprovalData: that.datainfo.isApprovalData,
                    approvalDataRemark: that.datainfo.approvalDataRemark,
                    approvalDt: that.datainfo.approvalDt,
                    approvalType: that.datainfo.approvalType,
                    isApproval: that.datainfo.isApproval,
                    approvalRemark: that.datainfo.approvalRemark,
                    issueApprovalDt: that.datainfo.issueApprovalDt,
                    isIssueApproval: that.datainfo.isIssueApproval,
                    issueApprovalRemark: that.datainfo.issueApprovalRemark,
                    applyPassportDt: that.datainfo.applyPassportDt,
                    isApplyPassport: that.datainfo.isApplyPassport,
                    applyPassportRemark: that.datainfo.applyPassportRemark,
                    visaInformationDt: that.datainfo.visaInformationDt,
                    isVisaInformation: that.datainfo.isVisaInformation,
                    visaInformationRemark: that.datainfo.visaInformationRemark,
                    visaCountryData: that.datainfo.visaCountryData,
                    sendVisaDt: that.datainfo.sendVisaDt,
                    isSendVisa: that.datainfo.isSendVisa,
                    sendVisaRemark: that.datainfo.sendVisaRemark,
                    issueVisaDt: that.datainfo.issueVisaDt,
                    isIssueVisa: that.datainfo.isIssueVisa,
                    issueVisaRemark: that.datainfo.issueVisaRemark,

                    airTicketDt: that.datainfo.airTicketDt,
                    isAirTicket: that.datainfo.isAirTicket,
                    airTicketRemark: that.datainfo.airTicketRemark,
                    hotelDt: that.datainfo.hotelDt,
                    isHotel: that.datainfo.isHotel,
                    hotelRemark: that.datainfo.hotelRemark,
                    isSelectedAirportd: that.datainfo.isSelectedAirportd,
                    isSelectedApprovalData: that.datainfo.isSelectedApprovalData,
                    isSelectedIssueApproval: that.datainfo.isSelectedIssueApproval,
                    isSelectedVisaInfo: that.datainfo.isSelectedVisaInfo,
                    isSelectedSendVisa: that.datainfo.isSelectedSendVisa,
                    isSelectedIssueVisa: that.datainfo.isSelectedIssueVisa,
                    isSelectedAirTicket: that.datainfo.isSelectedAirTicket,
                    isSelectedHotel: that.datainfo.isSelectedHotel,
                    isSelectedPreTripMeeting: that.datainfo.isSelectedPreTripMeeting,
                    isSelectedAirportdDropOff: that.datainfo.isSelectedAirportdDropOff,

                    preTripMeetingDt: that.datainfo.preTripMeetingDt,
                    isPreTripMeeting: that.datainfo.isPreTripMeeting,
                    preTripMeetingRemark: that.datainfo.preTripMeetingRemark,
                    airportdDropOffDt: that.datainfo.airportdDropOffDt,
                    isAirportdDropOff: that.datainfo.isAirportdDropOff,
                    airportdDropOffRemark: that.datainfo.airportdDropOffRemark,
                    client_ApprovalDataDt: that.datainfo.client_ApprovalDataDt,
                    client_ApprovalDt: that.datainfo.client_ApprovalDt,
                    client_IssueApprovalDt: that.datainfo.client_IssueApprovalDt,
                    client_VisaInformationDt: that.datainfo.client_VisaInformationDt,
                    client_SendVisaDt: that.datainfo.client_SendVisaDt,
                    client_IssueVisaDt: that.datainfo.client_IssueVisaDt,
                    client_AirTicketDt: that.datainfo.client_AirTicketDt,
                    client_HotelDt: that.datainfo.client_HotelDt,
                    client_PreTripMeetingDt: that.datainfo.client_PreTripMeetingDt,
                    client_AirportdDropOffDt: that.datainfo.client_AirportdDropOffDt,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                        offset:50
                    });
                    that.PostInvertedListInfo();
                    var urls = "/api/Groups/PostInvertedListFileDownload"
                    that.$axios({
                        method: 'post',
                        url: urls,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            portType: 1,
                            diId: that.value
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.$message({
                                message:res.data.msg ,
                                type: 'success',
                                offset:50
                            });
                            window.open(res.data.data);
                        }else{
                            that.$message.error(res.data.msg);
                        }
                    }).catch(function (error) {
                        that.$message.error(error);
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //导出倒推表（客户）
        PostInvertedListClientFileDownload() {
            var that = this
            var url = "/api/Groups/PostInvertedListUpdate"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    isQuery:that.datainfo.isQuery,
                    id: that.datainfo.id,
                    diId: that.datainfo.diId,
                    approvalDataDt: that.datainfo.approvalDataDt,
                    isApprovalData: that.datainfo.isApprovalData,
                    approvalDataRemark: that.datainfo.approvalDataRemark,
                    approvalDt: that.datainfo.approvalDt,
                    approvalType: that.datainfo.approvalType,
                    isApproval: that.datainfo.isApproval,
                    approvalRemark: that.datainfo.approvalRemark,
                    issueApprovalDt: that.datainfo.issueApprovalDt,
                    isIssueApproval: that.datainfo.isIssueApproval,
                    issueApprovalRemark: that.datainfo.issueApprovalRemark,
                    applyPassportDt: that.datainfo.applyPassportDt,
                    isApplyPassport: that.datainfo.isApplyPassport,
                    applyPassportRemark: that.datainfo.applyPassportRemark,
                    visaInformationDt: that.datainfo.visaInformationDt,
                    isVisaInformation: that.datainfo.isVisaInformation,
                    visaInformationRemark: that.datainfo.visaInformationRemark,
                    visaCountryData: that.datainfo.visaCountryData,
                    sendVisaDt: that.datainfo.sendVisaDt,
                    isSendVisa: that.datainfo.isSendVisa,
                    sendVisaRemark: that.datainfo.sendVisaRemark,
                    issueVisaDt: that.datainfo.issueVisaDt,
                    isIssueVisa: that.datainfo.isIssueVisa,
                    issueVisaRemark: that.datainfo.issueVisaRemark,

                    airTicketDt: that.datainfo.airTicketDt,
                    isAirTicket: that.datainfo.isAirTicket,
                    airTicketRemark: that.datainfo.airTicketRemark,
                    hotelDt: that.datainfo.hotelDt,
                    isHotel: that.datainfo.isHotel,
                    hotelRemark: that.datainfo.hotelRemark,
                    isSelectedAirportd: that.datainfo.isSelectedAirportd,
                    isSelectedApprovalData: that.datainfo.isSelectedApprovalData,
                    isSelectedIssueApproval: that.datainfo.isSelectedIssueApproval,
                    isSelectedVisaInfo: that.datainfo.isSelectedVisaInfo,
                    isSelectedSendVisa: that.datainfo.isSelectedSendVisa,
                    isSelectedIssueVisa: that.datainfo.isSelectedIssueVisa,
                    isSelectedAirTicket: that.datainfo.isSelectedAirTicket,
                    isSelectedHotel: that.datainfo.isSelectedHotel,
                    isSelectedPreTripMeeting: that.datainfo.isSelectedPreTripMeeting,
                    isSelectedAirportdDropOff: that.datainfo.isSelectedAirportdDropOff,

                    preTripMeetingDt: that.datainfo.preTripMeetingDt,
                    isPreTripMeeting: that.datainfo.isPreTripMeeting,
                    preTripMeetingRemark: that.datainfo.preTripMeetingRemark,
                    airportdDropOffDt: that.datainfo.airportdDropOffDt,
                    isAirportdDropOff: that.datainfo.isAirportdDropOff,
                    airportdDropOffRemark: that.datainfo.airportdDropOffRemark,
                    client_ApprovalDataDt: that.datainfo.client_ApprovalDataDt,
                    client_ApprovalDt: that.datainfo.client_ApprovalDt,
                    client_IssueApprovalDt: that.datainfo.client_IssueApprovalDt,
                    client_VisaInformationDt: that.datainfo.client_VisaInformationDt,
                    client_SendVisaDt: that.datainfo.client_SendVisaDt,
                    client_IssueVisaDt: that.datainfo.client_IssueVisaDt,
                    client_AirTicketDt: that.datainfo.client_AirTicketDt,
                    client_HotelDt: that.datainfo.client_HotelDt,
                    client_PreTripMeetingDt: that.datainfo.client_PreTripMeetingDt,
                    client_AirportdDropOffDt: that.datainfo.client_AirportdDropOffDt,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                        offset:50
                    });
                    that.PostInvertedListInfo();
                    var urls = "/api/Groups/PostInvertedListClientFileDownload"
                    that.$axios({
                        method: 'post',
                        url: urls,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            portType: 1,
                            diId: that.value
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.$message({
                                message:res.data.msg ,
                                type: 'success',
                                offset:50
                            });
                            window.open(res.data.data);
                        }else{
                            that.$message.error(res.data.msg);
                        }
                    }).catch(function (error) {
                        that.$message.error(error);
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
    },
    filters: {
        capitalize: function (value) {
            value=value+'';
            return value.split(" ")[0]
        }
    },
    created(){
        this.GetGroupNameList()
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;   
    }
    
}
</script>
<style>
.backward-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
    min-width: 1550px;
}
.backward-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.backward-head{
    display: flex;
    justify-content: space-between;
}
.backward-title{
    margin: 30px 0 ;
    text-align: center;
}
.backward-title-yi{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}
.backward-title-er{
    color: #606266;
    font-size: 14px;
    font-weight: 600;
}
.backward-table-li{
    display: flex;
    border-top: 1px solid #ebeef5;
}
.backward-table-li:last-child{ 
    border-bottom: 1px solid #ebeef5;
}
.backward-li-span:nth-child(1){
    width: 3%;
}
.backward-li-span:nth-child(2){
    width: 15%;
}
.backward-li-span:nth-child(3){
    width: 15%;
}
.backward-li-span:nth-child(4){
    width: 20%;
    color: #606266;
    font-size: 14px;
    font-weight: 600;
}
.backward-li-span:nth-child(5){ 
    width: 47%;
}
.backward-li-span{
    border-left: 1px solid #ebeef5;
    padding: 10px;
    text-align: center;
    line-height: 54px;
}
.backward-li-span:last-child{
    border-right: 1px solid #ebeef5;
}
.backward-li-span .el-radio{
    font-size: 14px;
    margin-right: 6px;
}
.backward-li-span .el-radio__label{
    padding-left: 4px;
}
</style>