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

<template>
    <div class="car_add" v-loading.fullscreen.lock="fullscreenLoading">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <div class="opcostbudgeting">
            <span>*团组成本预算-机票的预算：</span>
            <div v-if="budgeting.length>1">
                <div class="opcostbudgeting-li" v-for="(item,index) in budgeting" :key="index">
                    <span>({{item.costType}}段)</span>
                    <span>时间:{{item.costTypeStartTime}} ~ {{item.costTypeEndTime}}</span>
                    <span v-for="(items,index) in item.data.airFeeData" :key="index">&nbsp;&nbsp;&nbsp;{{items.airType}}：{{townum(items.airDRCB)}}元/人&nbsp;&nbsp;&nbsp;{{items.airNum}}人&nbsp;&nbsp;&nbsp;共:{{townum(items.airZCB)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-popover
                        placement="right"
                        width="552"
                        trigger="hover">
                        <el-table max-height="800" border :data="item.data.airInitData">
                            <el-table-column width="150" property="date" label="DATE"></el-table-column>
                            <el-table-column width="400" property="itinerary" label="ITIN"></el-table-column>
                        </el-table>
                        <span slot="reference" style="cursor: pointer;">"移上查看详细"</span>
                    </el-popover>
                </div>
            </div>
            <div v-if="budgeting.length<=1">
                <div class="opcostbudgeting-li" v-for="(item,index) in budgeting" :key="index">
                    <span v-for="(items,index) in item.data.airFeeData" :key="index">{{items.airType}}：{{townum(items.airDRCB)}}元/人&nbsp;&nbsp;&nbsp;{{items.airNum}}人&nbsp;&nbsp;&nbsp;共:{{townum(items.airZCB)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-popover
                        placement="right"
                        width="552"
                        trigger="hover">
                        <el-table max-height="800" border :data="item.data.airInitData">
                            <el-table-column width="150" property="date" label="DATE"></el-table-column>
                            <el-table-column width="400" property="itinerary" label="ITIN"></el-table-column>
                        </el-table>
                        <span slot="reference" style="cursor: pointer;">"移上查看详细"</span>
                    </el-popover>
                </div>
            </div>
            <div v-if="budgeting.length==0">
                <div class="opcostbudgeting-li">
                    未设置团组成本或成本未通知
                </div>
            </div>
        </div>
        <!-- <div style="display: flex;">
            <div style="text-align:left;font-size: 17px;font-weight: 600;color: #555;">
                团组成本预算 - 机票的预算:
            </div>
            <div style="margin-left:20px;color: #555;" v-if="airGroupCostParameter != null">
                经济舱： {{ airGroupCostParameter.jjccb }}元/人 {{ airGroupCostParameter.jjcrs }}人
                共:{{ airGroupCostParameter.jjccb * airGroupCostParameter.jjcrs
                }}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                公务舱： {{ airGroupCostParameter.gwccb }}元/人 {{ airGroupCostParameter.gwcrs }}人
                共:{{ airGroupCostParameter.gwccb * airGroupCostParameter.gwcrs
                }}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div style="margin-left:20px;" v-else>
                团组成本暂未开放此团数据！
            </div>
        </div> -->
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div>
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="DiIdSelect" clearable filterable placeholder="团组选择"
                                @change="AirTicketResChange" :disabled="isShow" style="width: 100%;">
                                <el-option v-for="item in AirTicketResSelectData" :key="item.id" :label="item.groupName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="团 号:" prop="tourCode" label-width="160px">
                            <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="客户:" prop="clientName" label-width="160px">
                            <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <el-form :model="airTicketResOpData" :rules="airTicketResRules" ref="airTicketResOpData" label-width="100px"
                class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="舱类型:" label-width="160px" prop="cType">
                            <el-select v-model="airTicketResOpData.cType" placeholder="舱类型" style="width: 100%;"
                                @change="tankTypeChange">
                                <el-option v-for="item in ticketClass" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;display: flex;">
                        <div style="width: 72%;">
                            <el-form-item label="机票单价:" prop="prePrice" label-width="160px">
                                <el-input-number style="width:100%" :precision="2" placeholder="费用金额" @input="peiceinput" v-model="airTicketResOpData.prePrice" :controls='false'>
                                </el-input-number>
                                <!-- <el-input placeholder="机票单价" v-model="airTicketResOpData.prePrice" @input="peiceinput">
                                </el-input> -->
                            </el-form-item>
                        </div>
                        <div style="width: 28%;">
                            <el-form-item prop="preCurrency" label-width="5px">
                                <el-select v-model="airTicketResOpData.preCurrency" @change="currencyChange"
                                    placeholder="币种">
                                    <el-option v-for="item in rateList" :key="item.currencyId" :label="item.currencyCode"
                                        :value="item.currencyId"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="机票总价:" prop="price" label-width="160px">
                            <el-input placeholder="机票总价" v-model="airTicketResOpData.price" style="width: 58%;"
                                :disabled="true">
                            </el-input>
                            <el-select v-model="airTicketResOpData.currency" style="width: 40%;" :disabled="true">
                                <el-option v-for="item in rateList" :key="item.currencyId" :label="item.currencyCode"
                                    :value="item.currencyId"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="机票编号:" label-width="160px" prop="ticketNumber">
                            <el-input placeholder="机票编号" v-model="airTicketResOpData.ticketNumber">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="机票票号:" label-width="160px" prop="ticketCode">
                            <el-input placeholder="机票票号" v-model="airTicketResOpData.ticketCode">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="航班描述:" prop="flightsDescription" label-width="160px">
                            <el-input type="textarea" :rows="5"
                                placeholder="请严格遵守此格式!!! 1. EK363 R1 WE08MAR CANDXB HK7 0015 0515 SEAME 2 3 (注意空格以及多条数据换行)"
                                v-model="airTicketResOpData.flightsDescription" @change="flightsCodeChange"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="航班简述:" label-width="160px" prop="flightsCode">
                            <el-input placeholder="航班简述" v-model="airTicketResOpData.flightsCode">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="城 市:" prop="flightsCity" label-width="160px">
                            <el-input placeholder="城市" v-model="airTicketResOpData.flightsCity">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="航班日期:" prop="flightsDate" label-width="160px">
                            <el-date-picker v-model="airTicketResOpData.flightsDate" type="date" placeholder="航班日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="航班时间:" prop="flightsTime" label-width="160px">
                            <el-time-select v-model="airTicketResOpData.flightsTime" placeholder="航班时间">
                            </el-time-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="width: 100%;">
                    <el-form-item label="此舱位客人名称:" prop="clientName" label-width="160px">
                        <el-select style="width: 100%;" v-model="airTicketResOpData.clientName" placeholder="此舱位客人名称" multiple clearable
                            filterable @change="clientNamechange">
                            <el-option v-for="item in fliterClient" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="此舱位人数:" prop="clientNum" label-width="160px">
                            <el-input placeholder="此舱位人数" v-model="airTicketResOpData.clientNum" @input="peiceinput">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="是否值机: " label-width="160px">
                            <el-radio-group v-model="airTicketResOpData.isCheckIn">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="是否选座:" label-width="160px">
                            <el-radio-group v-model="airTicketResOpData.isSetSeat">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="是否购买行李:" label-width="160px">
                            <el-radio-group v-model="airTicketResOpData.isPackage">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="是否行李直挂:" label-width="160px">
                            <el-radio-group v-model="airTicketResOpData.isBagHandle">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="是否火车票出票选座:" label-width="160px">
                            <el-radio-group v-model="airTicketResOpData.isTrain">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>

                <div style="display: flex;">

                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="费用描述:" prop="priceDescription" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="费用描述"
                                v-model="airTicketResOpData.priceDescription"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="备注"
                                v-model="airTicketResOpData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div style="margin-top: 20px;">
                <div class="communal-title">付款申请</div>
                <hr style='background-color:#5555; height:1px; border:none;margin-top: 10px;' />
            </div>
            <el-form :model="cardPaymentOpData" ref="cardPaymentOpData" :rules="cardPaymentRules" label-width="130px"
                class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="支付方式:" prop="payDId">
                            <el-select v-model="cardPaymentOpData.payDId" placeholder="支付方式" style="width: 100%;"
                                @change="payChange">
                                <el-option v-for="item in payment" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- <div style="width: 25%;">
                        <el-form-item label="消费方式:" prop="consumptionPatterns">
                            <el-input placeholder="消费方式" v-model="cardPaymentOpData.consumptionPatterns">
                            </el-input>
                        </el-form-item>
                    </div> -->
                    <div style="width: 25%;">
                        <el-form-item label="消费日期:" prop="visitCountry">
                            <el-date-picker v-model="cardPaymentOpData.consumptionDate" placeholder="消费日期" type="date">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="付款金额:" prop="payMoney">
                            <el-input placeholder="付款金额" v-model="cardPaymentOpData.payMoney" style="width: 52%;"
                                :disabled="true">
                            </el-input>
                            <el-select v-model="cardPaymentOpData.paymentCurrency" style="width: 45%;" :disabled="true">
                                <el-option v-for="item in rateList" :key="item.currencyId" :label="item.currencyCode"
                                    :value="item.currencyId"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div v-if="cardPaymentOpData.payDId == 72">
                    <div style="display: flex;">
                        <div style="width: 25%;">
                            <el-form-item label="卡类型:" prop="ctdId">
                                <el-select v-model="cardPaymentOpData.ctdId" placeholder="卡类型" style="width: 100%;"
                                    @change="ctdChange">
                                    <el-option v-for="item in cardType" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="银行卡号:" prop="bankNo">
                                <el-input placeholder="银行卡号" v-model="cardPaymentOpData.bankNo" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="持卡人姓名:" prop="cardholderName">
                                <el-input placeholder="持卡人姓名" v-model="cardPaymentOpData.cardholderName" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="cardPaymentOpData.payDId == 73">
                    <div style="display: flex;">
                        <div style="width: 25%;">
                            <el-form-item label="公司银行账号:">
                                <el-input placeholder="公司银行账号" v-model="cardPaymentOpData.companyBankNo">
                                </el-input>

                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方开户行:" prop="otherBankName">
                                <el-input placeholder="对方开户行:" v-model="cardPaymentOpData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo">
                                <el-input placeholder="对方银行卡号" v-model="cardPaymentOpData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方姓名:" prop="otherSideName">
                                <el-input placeholder="对方姓名" v-model="cardPaymentOpData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="cardPaymentOpData.payDId == 83">
                    <div style="display: flex;">
                        <div style="width: 25%;">
                            <el-form-item label="对方开户行:" prop="otherBankName">
                                <el-input placeholder="对方开户行" v-model="cardPaymentOpData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo">
                                <el-input placeholder="对方银行卡号" v-model="cardPaymentOpData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方姓名:" prop="otherSideName">
                                <el-input placeholder="对方姓名" v-model="cardPaymentOpData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else></div>
                <div style="display:flex;">
                    <div style="width: 25%;">
                        <el-form-item label="收款方:" prop="payee">
                            <el-input placeholder="对方姓名:" v-model="cardPaymentOpData.payee">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="费用标识:" prop="orbitalPrivateTransfer">
                            <el-select v-model="cardPaymentOpData.orbitalPrivateTransfer" placeholder="费用标识"
                                style="width: 100%;">
                                <el-option key="0" label="公转" :value=0>
                                </el-option>
                                <el-option key="1" label="私转" :value=1>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出票方合作方资料:" prop="visitCountry">
                            <el-select v-model="airTicketAgentsId" placeholder="出票方合作方资料" style="width: 100%;"
                                @change="Agents">
                                <el-option v-for="item in airTicketAgents" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="Remark">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="cardPaymentOpData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="addBtn">保存</el-button>
                        <el-button @click="back()">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            fullscreenLoading:false,
            airTicketResRules: {
                cType: [
                    { required: true, message: '请选择舱位类型', trigger: ['blur', 'change'] }
                ],
                prePrice: [
                    { required: true, message: '请输入机票单价', trigger: ['blur', 'change'] },
                ],
                clientNum: [
                    { required: true, message: '请输入舱位人数', trigger: ['blur', 'change'] },
                ],
                flightsCode: [
                    { required: true, message: '请输入航班描述', trigger: ['blur', 'change'] },
                ],
                flightsCity: [
                    { required: true, message: '请输入城市', trigger: ['blur', 'change'] },
                ],
                flightsDate: [
                    { required: true, message: '请选择航班日期', trigger: ['blur', 'change'] },
                ],
                flightsTime: [
                    { required: true, message: '请选择航班时间', trigger: ['blur', 'change'] },
                ],
                clientName: [
                    { type: "array", required: true, message: '请选择责任人', trigger: ['blur', 'change'] }
                ],
                flightsDescription: [
                    { required: true, message: '请严格遵守格式，正确填写', trigger: ['blur', 'change'] },
                ],
                preCurrency: [
                    { required: true, message: '请选择币种', trigger: ['blur', 'change'] }
                ]
            },
            cardPaymentRules: {
                payDId: [
                    { required: true, message: '请选择支付方式', trigger: ['blur', 'change'] },
                ],
                consumptionPatterns: [
                    { required: true, message: '请输入消费方式', trigger: ['blur', 'change'] },
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
                ],
                orbitalPrivateTransfer: [
                    { required: true, message: '请选择费用表示', trigger: ['blur', 'change'] },
                ],
                // ctdId: [
                //     { required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },
                // ]
            },
            title: "新增机票费用录入",
            token: '',
            userId: 0,
            id: '',
            DiId: '',
            isShow: false,
            DiIdSelect: '',
            delegationInfo: {},
            AirTicketResSelectData: [],//团组下拉框
            ticketClass: [],//舱位下拉框
            payment: [],//支付方式下拉框
            cardType: [],//卡类型下拉框
            airTicketAgents: [],//合作的代理资料
            airTicketAgentsId: '',
            clientNameId: [
                {
                    firstName: "程单",
                    id: -1,
                    lastName: "行",
                    phone: "行程单",
                    pinyin: "行程单"
                }
            ],//客人姓名
            clientNameList: [],
            airGroupCostParameter: {},//机票成本预算
            status: 0,
            airTicketResOpData: {
                id: 0,
                diId: 0,
                cType: 460,
                prePrice: 0,
                preCurrency: 836,
                price: 0,
                currency: 836,
                clientNum: 0,
                clientName: [],
                isCheckIn: 0,
                isSetSeat: 0,
                isPackage: 0,
                isBagHandle: 0,
                isTrain: 0,
                flightsCode: '',
                flightsDate: '',
                flightsTime: '',
                flightsCity: '',
                flightsDescription: '',
                priceDescription: '',
                ticketNumber: '',
                ticketCode: '',
                createUserId: 0,
                remark: ''
            },
            cardPaymentOpData: {
                id: 0,
                payDId: 72,
                consumptionPatterns: '暂无',
                consumptionDate: this.transformDateFormat(new Date()),
                ctdId: '',
                bankNo: '',
                cardholderName: 'Zhang Hailin',
                payMoney: 0,
                paymentCurrency: 836,
                companyBankNo: '',
                otherBankName: '',
                otherSideNo: '',
                otherSideName: '',
                mfOperator: 0,
                mfOperatorDate: '',
                diId: this.DiId,
                payThenMoney: 0,
                payee: '',
                createUserId: 0,
                orbitalPrivateTransfer: '',
                remark: ''
            },
            IsAuditGM: 0,
            rateList: [],
            budgeting:[]
        }
    },
    methods: {
        //保留两位小数
        townum(val){
            return val.toFixed(2)
        },
        clientNamechange(val) {
            console.log(val.length)
            this.airTicketResOpData.clientNum = val.length;
            this.cardPaymentOpData.payMoney = parseFloat(parseFloat(this.airTicketResOpData.prePrice) * parseFloat(this.airTicketResOpData.clientNum)).toFixed(2)
            this.cardPaymentOpData.payThenMoney = this.cardPaymentOpData.payMoney
            this.airTicketResOpData.price = parseFloat(parseFloat(this.airTicketResOpData.prePrice) * parseFloat(this.airTicketResOpData.clientNum)).toFixed(2)
            console.log('airTicketResOpData.clientName', this.airTicketResOpData.clientName);
        },
        //团组下拉框(下拉列表加载)
        AirTicketResSelect() {
            var url = "/api/Groups/AirTicketResSelect"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res);
                    that.AirTicketResSelectData = res.data.data.groupName; //团组下拉列表
                    that.ticketClass = res.data.data.ticketClass;//舱位下拉框
                    that.payment = res.data.data.payment;//支付方式下拉框
                    that.cardType = res.data.data.cardType;//卡类型下拉框
                    that.cardPaymentOpData.ctdId=that.cardType[0].id;
                    that.cardPaymentOpData.bankNo=that.cardType[0].remark;
                    that.airTicketAgents = res.data.data.airTicketAgents//合作方资料下拉框
                    that.DiIdSelect = parseInt(that.DiId); //选中团组
                    that.getcostbudgeting();
                    //that.QueryTankType();
                }

            })
        },
        //团组切换
        AirTicketResChange() {
            this.getcostbudgeting();
            this.AirTicketResList();
            this.QueryClient();
        },
        //获取成本提示
        getcostbudgeting(){
            this.budgeting=[];
            var url = "/api/Groups/PostGroupCostModulePrompt"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    diId: this.DiIdSelect ? this.DiIdSelect : this.DiId,
                    cTable:85,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res)
                    that.budgeting=res.data.data.modulePromptInfos;
                } else {
                    // that.$message.error(res.data.msg);
                }
            })
        },
        //团组基础信息以及成本信息
        AirTicketResList() {
            this.fullscreenLoading=true;
            var url = "/api/Groups/AirTicketResList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    portType: 1,
                    diId: this.DiIdSelect ? this.DiIdSelect : this.DiId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.delegationInfo = res.data.data.delegationInfo;
                    that.airGroupCostParameter = res.data.data.airGroupCostParameter;
                    that.fullscreenLoading=false;
                }
            })

        },
        //(弃用 仓类型加载客户名单)
        QueryTankType() {
            var url = "/api/Groups/tankType"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    id: that.airTicketResOpData.cType
                }
            }).then(function (res) {
                if (res.data.code == 200) {

                    that.clientNameId = res.data.data
                    that.AirTicketResList()
                }
            })
        },
        tankTypeChange() {
            //this.QueryTankType();
        },
        //点击保存事件
        addBtn() {
            if (this.IsAuditGM == 1) {
               
                this.$message.error('审核已通过，不可修改！');
                return
            } else {
                if (this.DiId == null || this.DiId == undefined||this.DiId == "") {

                    this.$message.error("请选择团组名称");
                    return;
                }
                const that = this;
                let formArr = ['airTicketResOpData', 'cardPaymentOpData']//三个form表单的ref
                var resultArr = [] //用来接受返回结果的数组
                function checkForm(formName) { //封装验证表单的函数
                    var result = new Promise(function (resolve, reject) {
                        that.$refs[formName].validate((valid) => {
                            if (valid) {
                                resolve();
                            } else { reject() }
                        })
                    })
                    resultArr.push(result) //push 得到promise的结果
                }
                formArr.forEach(item => { //根据表单的ref校验
                    checkForm(item)
                })
                Promise.all(resultArr).then(values => {


                    that.airTicketResOpData.diId = parseInt(that.DiIdSelect);
                    that.airTicketResOpData.createUserId = that.userId;
                    var clientNameStr = ''
                    that.airTicketResOpData.clientName.forEach(function (item) {
                        clientNameStr += item + ","
                    });
                    that.airTicketResOpData.clientName = clientNameStr.substring(0, clientNameStr.length - 1)
                    that.cardPaymentOpData.createUserId = that.userId;
                    that.cardPaymentOpData.diId = parseInt(that.DiIdSelect);
                    if (that.cardPaymentOpData.ctdId == '') {
                        that.cardPaymentOpData.ctdId = 0;
                    }
                    var url = "/api/Groups/OpAirTicketRes"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            status: that.status,
                            airTicketResOpData: that.airTicketResOpData,
                            cardPaymentOpData: that.cardPaymentOpData
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            console.log('that.airTicketResOpData.clientName', that.airTicketResOpData.clientName)
                            setTimeout(() => {
                                that.back();
                            }, 1000);
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    }).catch(function (error) { // 此时必填完成，做保存后的业务操作
                        console.log(error)

                    }).finally(() => {
                        var ss = that.airTicketResOpData.clientName.split(',')
                        if (ss.length != 0) {
                            that.airTicketResOpData.clientName = [];
                            ss.forEach(function (item) {
                                if (item) {
                                    that.airTicketResOpData.clientName.push(parseInt(item))
                                }
                            });
                        }

                        console.log('run finally code');
                    })

                }).catch(err => {
                    this.$message.error('请完善信息在保存！');
                    return false;
                })
            }
        },
        //根据机票费用录入Id查询c表和机票费用信息
        AirTicketResById() {
            var url = "/api/Groups/AirTicketResById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: this.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var airData = res.data.data.airTicket

                    that.airTicketResOpData.id = airData.id
                    that.airTicketResOpData.diId = airData.diId
                    that.airTicketResOpData.cType = airData.cType
                    that.airTicketResOpData.prePrice = airData.prePrice
                    that.airTicketResOpData.preCurrency = airData.preCurrency
                    that.airTicketResOpData.price = airData.price
                    that.airTicketResOpData.currency = airData.currency
                    that.airTicketResOpData.clientNum = airData.clientNum
                    that.airTicketResOpData.isCheckIn = airData.isCheckIn
                    that.airTicketResOpData.isSetSeat = airData.isSetSeat
                    that.airTicketResOpData.isPackage = airData.isPackage
                    that.airTicketResOpData.isBagHandle = airData.isBagHandle
                    that.airTicketResOpData.isTrain = airData.isTrain
                    that.airTicketResOpData.flightsCode = airData.flightsCode
                    that.airTicketResOpData.flightsDate = airData.flightsDate
                    that.airTicketResOpData.flightsTime = airData.flightsTime
                    that.airTicketResOpData.flightsCity = airData.flightsCity
                    that.airTicketResOpData.flightsDescription = airData.flightsDescription
                    that.airTicketResOpData.priceDescription = airData.priceDescription
                    that.airTicketResOpData.ticketNumber = airData.ticketNumber
                    that.airTicketResOpData.ticketCode = airData.ticketCode
                    that.airTicketResOpData.createUserId = airData.createUserId
                    that.airTicketResOpData.remark = airData.remark


                    var ss = airData.clientName.split(',')
                    
                    that.airTicketResOpData.clientName = [];
                    ss.forEach(function (item) {
                        console.log()
                        console.log(item)
                        if(!item.includes('.')){
                            that.airTicketResOpData.clientName.push(parseInt(item))
                        }else{
                            that.airTicketResOpData.clientName=[]
                        }
                    });
                    that.prePrice = res.data.data.airTicket.prePrice
                    that.currencyId = res.data.data.airTicket.preCurrency
                    that.clientNum = res.data.data.airTicket.clientNum
                    var creData = res.data.data.creditCard;
                    that.cardPaymentOpData.id = creData.id
                    that.cardPaymentOpData.payDId = creData.payDId
                    // that.cardPaymentOpData.consumptionPatterns = creData.consumptionPatterns
                    that.cardPaymentOpData.consumptionDate = creData.consumptionDate
                    that.cardPaymentOpData.bankNo = creData.bankNo
                    that.cardPaymentOpData.cardholderName = creData.cardholderName
                    that.cardPaymentOpData.payMoney = creData.payMoney
                    that.cardPaymentOpData.paymentCurrency = creData.paymentCurrency
                    that.cardPaymentOpData.companyBankNo = creData.companyBankNo
                    that.cardPaymentOpData.otherBankName = creData.otherBankName
                    that.cardPaymentOpData.otherSideNo = creData.otherSideNo
                    that.cardPaymentOpData.otherSideName = creData.otherSideName
                    that.cardPaymentOpData.mfOperator = creData.mfOperator
                    that.cardPaymentOpData.mfOperatorDate = creData.mfOperatorDate
                    that.cardPaymentOpData.diId = creData.diId
                    that.cardPaymentOpData.payThenMoney = creData.payThenMoney
                    that.cardPaymentOpData.payee = creData.payee
                    that.cardPaymentOpData.createUserId = creData.createUserId
                    that.cardPaymentOpData.orbitalPrivateTransfer = creData.orbitalPrivateTransfer
                    that.cardPaymentOpData.remark = creData.remark

                    that.IsAuditGM = creData.isAuditGM

                    if (creData.ctdId == 0) {
                        that.cardPaymentOpData.ctdId = ""
                    } else {
                        that.cardPaymentOpData.ctdId = parseInt(creData.ctdId)
                    }
                    that.cardPaymentOpData.orbitalPrivateTransfer = parseInt(creData.orbitalPrivateTransfer)
                }
            })
        },
        //支付方式change事件
        payChange() {
            this.cardPaymentOpData.ctdId = '';
            this.cardPaymentOpData.bankNo = '';
            this.cardPaymentOpData.cardholderName = 'Zhang Hailin';
            this.cardPaymentOpData.companyBankNo = '';
            this.cardPaymentOpData.otherBankName = '';
            this.cardPaymentOpData.otherSideNo = '';
            this.cardPaymentOpData.otherSideName = '';
            this.cardPaymentOpData.mfOperator = 0;
            this.cardPaymentOpData.payee = '';
            this.cardPaymentOpData.orbitalPrivateTransfer = '';
            this.cardPaymentOpData.remark = ''
        },
        //合作方下拉选择事件
        Agents(Id) {
            for (var i = 0; i < this.airTicketAgents.length; i++) {
                if (this.airTicketAgents[i].id == parseInt(Id)) {
                    this.cardPaymentOpData.payee = this.airTicketAgents[i].name
                    this.cardPaymentOpData.otherBankName = this.airTicketAgents[i].bank
                    this.cardPaymentOpData.otherSideNo = this.airTicketAgents[i].account
                }
            }
        },
        //卡类型选择事件
        ctdChange(id) {
            this.airTicketAgentsId = '';
            for (var i = 0; i < this.cardType.length; i++) {
                if (this.cardType[i].id == parseInt(id)) {
                    this.cardPaymentOpData.bankNo = this.cardType[i].remark
                }
            }
        },
        //单价值改变事件
        peiceinput() {
            this.cardPaymentOpData.payMoney = parseFloat(parseFloat(this.airTicketResOpData.prePrice) * parseFloat(this.airTicketResOpData.clientNum)).toFixed(2);
            if (isNaN(this.cardPaymentOpData.payMoney)) {
                this.cardPaymentOpData.payMoney = 0;
            }
            this.cardPaymentOpData.payThenMoney = this.cardPaymentOpData.payMoney;
            this.airTicketResOpData.price = parseFloat(parseFloat(this.airTicketResOpData.prePrice) * parseFloat(this.airTicketResOpData.clientNum)).toFixed(2);
            if (isNaN(this.airTicketResOpData.price)) {
                this.airTicketResOpData.price = 0;
            }
        },
        currencyChange(Id) {
            this.cardPaymentOpData.paymentCurrency = Id;
            this.airTicketResOpData.preCurrency = Id;
            this.airTicketResOpData.currency = Id;
        },
        //航班描述值改变事件
        flightsCodeChange(val) {

            var reg = /[\r\n]+/g;
            var that = this;
            that.airTicketResOpData.flightsCode = ''
            that.airTicketResOpData.flightsCity = ''
            var dateTime = [];
            if (reg.test(val)) {

                var attrsList = val.split(reg)
                attrsList.forEach(function (item, index) {

                    var ss = item.split(' ')
                    for (var i = 0; i < ss.length; i++) {
                        ss[i] = ss[i].trim();
                        if (!ss[i]) {
                            ss.splice(i, 1);
                            i--;
                        }
                    }
                    ss = ss;

                    that.airTicketResOpData.flightsCode += ss[1] + '/'//航班号
                    that.airTicketResOpData.flightsCity += ss[4].substring(0, 3) + '-' + ss[4].substring(3) + '/'//城市
                    var dateStr = ss[3].substring(4)
                    switch (dateStr) {
                        case "JAN":
                            dateStr = "01";
                            break;
                        case "FEB":
                            dateStr = "02";
                            break;
                        case "MAR":
                            dateStr = "03";
                            break;
                        case "APR":
                            dateStr = "04";
                            break;
                        case "MAY":
                            dateStr = "05";
                            break;
                        case "JUN":
                            dateStr = "06";
                            break;
                        case "JUL":
                            dateStr = "07";
                            break;
                        case "AUG":
                            dateStr = "08";
                            break;
                        case "SEP":
                            dateStr = "09";
                            break;
                        case "OCT":
                            dateStr = "10";
                            break;
                        case "NOV":
                            dateStr = "11";
                            break;
                        case "DEC":
                            dateStr = "12";
                            break;
                    }

                    dateTime.push({
                        date: new Date(new Date().getFullYear() + '-' + dateStr + '-' + ss[3].substring(2, 4)),
                        time: ss[6].substring(0, 2) + ':' + ss[6].substring(2)
                    })//日期
                });
                that.airTicketResOpData.flightsCode = that.airTicketResOpData.flightsCode.substring(0, that.airTicketResOpData.flightsCode.length - 1)//航班号
                that.airTicketResOpData.flightsCity = that.airTicketResOpData.flightsCity.substring(0, that.airTicketResOpData.flightsCity.length - 1)//城市

                var compare = function (obj1, obj2) {
                    var val1 = obj1.date;
                    var val2 = obj2.date;
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                }

                dateTime = dateTime.sort(compare);
                that.airTicketResOpData.flightsTime = dateTime[0].time
                that.airTicketResOpData.flightsDate = dateTime[0].date
            } else {
                var ss = val.split(' ')
                for (var i = 0; i < ss.length; i++) {
                    ss[i] = ss[i].trim();
                    if (!ss[i]) {
                        ss.splice(i, 1);
                        i--;
                    }
                }
                ss = ss;
                that.airTicketResOpData.flightsCode = ss[1]//航班号
                that.airTicketResOpData.flightsCity += ss[4].substring(0, 3) + '-' + ss[4].substring(3)//城市
                that.airTicketResOpData.flightsTime = ss[6].substring(0, 2) + ':' + ss[6].substring(2)//时间

                var dateStr = ss[3].substring(4)
                switch (dateStr) {
                    case "JAN":
                        dateStr = "01";
                        break;
                    case "FEB":
                        dateStr = "02";
                        break;
                    case "MAR":
                        dateStr = "03";
                        break;
                    case "APR":
                        dateStr = "04";
                        break;
                    case "MAY":
                        dateStr = "05";
                        break;
                    case "JUN":
                        dateStr = "06";
                        break;
                    case "JUL":
                        dateStr = "07";
                        break;
                    case "AUG":
                        dateStr = "08";
                        break;
                    case "SEP":
                        dateStr = "09";
                        break;
                    case "OCT":
                        dateStr = "10";
                        break;
                    case "NOV":
                        dateStr = "11";
                        break;
                    case "DEC":
                        dateStr = "12";
                        break;
                }
                that.airTicketResOpData.flightsDate = new Date().getFullYear() + '-' + dateStr + '-' + ss[3].substring(2, 4)
            }

        },
        //加载团组客户名单
        QueryClient() {
            this.clientNameId= [
                {
                    firstName: "程单",
                    id: -1,
                    lastName: "行",
                    phone: "行程单",
                    pinyin: "行程单"
                }
            ]
            var url = "/api/Groups/QueryClientInfoByDIID"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    diid: this.DiIdSelect ? this.DiIdSelect : this.DiId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    //客户名单
                    console.log(res.data.data);
                    for(let j=0;j<res.data.data.length;j++){
                        that.clientNameId.push(res.data.data[j])
                    }
                }
            })
        },
        back() {
            this.$router.push({
                path: "/home/AirTicketRes",
                query: {
                    DiId: this.DiIdSelect ? this.DiIdSelect : this.DiId,
                }
            })
        },
        QueryRate() {
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    "portType": 1,
                    "diId": this.DiIdSelect ? this.DiIdSelect : this.DiId,
                    "cTable": 85
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    //汇率
                    console.log("汇率--", res.data.data);
                    that.rateList = res.data.data.teamRates;
                }
            })


        }

    },

    mounted() {

        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId

        this.id = this.$route.query.id
        this.DiId = this.$route.query.DiId
        this.QueryRate(); //团组机票汇率
        this.AirTicketResSelect(); //加载所有下拉框
        this.QueryClient(); //加载客户名单
        this.AirTicketResList();//加载团组基础信息以及成本信息
        var that = this
        if (that.DiId != undefined && that.id != undefined) {
            that.status = 2;
            that.isShow = true
            that.AirTicketResById(); //加载单条数据信息
        } else {
            that.isShow = false
            that.status = 1;
        }
    },
    computed: {
        //客户名单属性
        fliterClient() {
            var arr = [];
            if (this.clientNameId.length < 1) {
                return [];
            }

            this.clientNameId.forEach(element => {

                var item = "";
                if (element.pinyin) {
                    item += element.pinyin;
                }
                if (element.firstName && element.lastName) {
                    item += "(" + element.lastName + element.firstName + ")";
                }

                if (item) {
                    arr.push({ id: element.id, name: item });
                }
            });
            return arr;
        }
    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}
.car_add .el-date-editor.el-input{
    width: 100%;
}
.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}
.opcostbudgeting{
    color: red;
    font-size: 14px;
}
.opcostbudgeting-li{
    margin: 5px 0;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>