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

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
                <!-- 客户名单 -->
                <el-popover
                placement="bottom"
                width="662"
                trigger="hover">
                    <el-table max-height="600" border :data="rollcallarr">
                        <el-table-column width="100" property="date" label="姓名">
                            <template slot-scope="scope">
                                {{ scope.row.lastName}}{{scope.row.firstName}}
                            </template>
                        </el-table-column>
                        <el-table-column width="200" property="lastName" label="拼音">
                            <template slot-scope="scope">
                                {{ pinyingxing(scope.row.lastName) }}/{{  pinyingxing(scope.row.firstName) }}
                            </template>
                        </el-table-column>
                        <el-table-column width="50" property="sex" label="性别">
                            <template slot-scope="scope">
                                {{ scope.row.sex==0?'男':'女'}}
                            </template>
                        </el-table-column>
                        <el-table-column width="110" property="birthDay" label="生日">
                            <template slot-scope="scope">
                                {{ fgarr(scope.row.birthDay) }}
                            </template>
                        </el-table-column>
                        <el-table-column width="200" property="idCardNo" label="身份证号码">
                            <template slot-scope="scope">
                                {{ scope.row.idCardNo }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button style="margin-left: 10px;" type="primary" slot="reference">移上查看客户名单</el-button>
                    <!-- <span slot="reference" style="cursor: pointer;margin-left: 20px;">"移上查看客户名单"</span> -->
                </el-popover>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;margin: 10px 0;' />
        <div>
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="OpVisaPriceData.diId" remote :remote-method="GroupFeeKeywordSearch" clearable filterable placeholder="团组选择"
                                :disabled="isShow" style="width: 100%;" @change="DiIdSelectChange">
                                <el-option v-for="item in delegationInfoLists" :key="item.id" :label="item.teamName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <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: 385px;">
                        <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: 385px;">
                        <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>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="出访时间:" label-width="160px">
                            <el-input placeholder="出访时间" v-model="VisitDate" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="出访人数:" label-width="160px">
                            <el-input placeholder="出访人数" v-model="delegationInfo.visitPNumber" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="出访天数:" label-width="160px">
                            <el-input placeholder="出访天数" v-model="delegationInfo.visitDays" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <el-form :model="OpVisaPriceData" ref="OpVisaPriceData" :rules="OpVisaPriceDataRules" label-width="100px"
                class="demo-ruleForm">
                <div style="width: 98.5%;">
                    <el-form-item label="签证描述:" prop="visaDescription" label-width="160px">
                        <!-- <el-select @change="clientNamechange" style="width: 100%;" v-model="OpVisaPriceData.visaClient"
                            placeholder="签证客户" multiple clearable filterable>
                            <el-option v-for="item in fliterClient" :key="item.id"
                                :label="item.lastName + item.firstName" :value="item.id">
                            </el-option>
                        </el-select> -->
                        <el-input placeholder="签证描述" v-model="OpVisaPriceData.visaDescription">
                        </el-input>
                    </el-form-item>
                </div>
                <div style="width: 98.5%;">
                    <el-form-item label="签证客户:" prop="visaClient" label-width="160px">
                        <el-select @change="clientNamechange" style="width: 100%;" v-model="OpVisaPriceData.visaClient"
                            placeholder="签证客户" multiple clearable filterable>
                            <el-option v-for="item in fliterClient" :key="item.id"
                                :label="item.lastName + item.firstName" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <!-- <div style="width: 385px;">
                        <el-form-item label="签证客户:" prop="visaClient" label-width="160px">
                            <el-input placeholder="签证客户" v-model="OpVisaPriceData.visaClient">
                            </el-input>
                        </el-form-item>
                    </div> -->
                    <div style="width: 385px;">
                        <el-form-item prop="area" label="区域:" label-width="160px">
                            <el-select v-model="OpVisaPriceData.area" clearable filterable placeholder="代办费类型选择"
                                 style="width: 100%;">
                                <el-option v-for="item in areaarr" :key="item.id" :label="item.country"
                                    :value="item.country">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item prop="agencyFeeType" label="代办费类型:" label-width="160px">
                            <el-select v-model="OpVisaPriceData.agencyFeeType" clearable filterable placeholder="代办费类型选择"
                             style="width: 100%;">
                                <el-option v-for="item in agencyFeeTypearr" :key="item.id" :label="item.text"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="签证费用:"  prop="visaCurrency" label-width="160px">
                            <el-input-number style="width:52%" :precision="2" placeholder="付款金额" v-model="OpVisaPriceData.visaPrice" :controls='false'>
                            </el-input-number>
                            <!-- <el-input placeholder="签证费用" v-model="OpVisaPriceData.visaPrice" style="width: 58%;">
                            </el-input> -->
                            <el-select v-model="OpVisaPriceData.visaCurrency" filterable placeholder="币种"
                                style="width: 35%;">
                                <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: 385px;">
                        <el-form-item label="是否第三方代办:" prop="isThird" label-width="160px">
                            <el-radio-group v-model="OpVisaPriceData.isThird">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="客户类型:" prop="passengerType" label-width="160px">
                            <el-select style="width: 100%;" v-model="OpVisaPriceData.passengerType" clearable filterable placeholder="客户类型">
                                <el-option v-for="item in passengerTypeSelect" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="签证办理人数:" prop="visaNumber" label-width="160px">
                            <el-input placeholder="签证办理人数" v-model="OpVisaPriceData.visaNumber" style="width: 100%;">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="免签人数:" prop="visaFreeNumber" label-width="160px">
                            <el-input placeholder="免签人数" v-model="OpVisaPriceData.visaFreeNumber" style="width: 100%;">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpVisaPriceData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <hr style='background-color:#5555; height:1px; border:none;margin: 10px 0;' />
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="支付方式:" prop="payDId" label-width="160px">
                            <el-select v-model="OpVisaPriceData.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: 385px;">
                        <el-form-item label="消费方式:" prop="consumptionPatterns" label-width="160px">
                            <el-input placeholder="消费方式" v-model="OpVisaPriceData.consumptionPatterns">
                            </el-input>
                        </el-form-item>
                    </div> -->
                    <div style="width: 385px;">
                        <el-form-item label="消费日期:" prop="consumptionDate" label-width="160px">
                            <el-date-picker style="width:100%" v-model="OpVisaPriceData.consumptionDate"
                                placeholder="消费日期" type="date">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="付款金额:" label-width="160px">
                            <el-input placeholder="付款金额" v-model="OpVisaPriceData.visaPrice" style="width: 52%;"
                                :disabled="true">
                            </el-input>
                            <el-select v-model="OpVisaPriceData.visaCurrency" 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="OpVisaPriceData.payDId == 72">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="width: 385px;">
                            <el-form-item label="卡类型:" prop="ctdId" label-width="160px">
                                <el-select v-model="OpVisaPriceData.ctdId" placeholder="卡类型" style="width: 100%;"
                                    @change="ctdChange">
                                    <el-option v-for="item in bankCard" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="银行卡号:" prop="bankNo" label-width="160px">
                                <el-input placeholder="银行卡号" v-model="OpVisaPriceData.bankNo" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="持卡人姓名:" prop="cardholderName" label-width="160px">
                                <el-input placeholder="持卡人姓名" v-model="OpVisaPriceData.cardholderName" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="OpVisaPriceData.payDId == 73">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="width: 385px;">
                            <el-form-item label="公司银行账号:" label-width="160px" prop="companyBankNo">
                                <el-input placeholder="公司银行账号" v-model="OpVisaPriceData.companyBankNo">
                                </el-input>

                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                <el-input placeholder="对方开户行:" v-model="OpVisaPriceData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                <el-input placeholder="对方银行卡号" v-model="OpVisaPriceData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                <el-input placeholder="对方姓名" v-model="OpVisaPriceData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="OpVisaPriceData.payDId == 83">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="width: 385px;">
                            <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                <el-input placeholder="对方开户行" v-model="OpVisaPriceData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                <el-input placeholder="对方银行卡号" v-model="OpVisaPriceData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 385px;">
                            <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                <el-input placeholder="对方姓名" v-model="OpVisaPriceData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else></div>
                <div style="display:flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="收款方:" label-width="160px">
                            <el-input placeholder="对方姓名:" v-model="OpVisaPriceData.payee">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
                            <el-select v-model="OpVisaPriceData.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>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpVisaPriceData.cRemark"></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="EscAdd">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { dE } from '@fullcalendar/core/internal-common';
import { pinyin } from 'pinyin-pro';
export default {
    data() {
        return {
            title: "新增商邀费用",
            token: '',
            userId: 0,
            id: '',
            isShow: false,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            delegationInfoLists: [],//团组下拉框
            currencyList: [],//币种下拉框
            bankCard: [],//卡类型下拉框
            payment: [],//支付方式下拉框
            OpVisaPriceData: {
                visaDescription:'',
                status: 0,
                id: 0,
                diId: '',
                visaClient: '',
                visaPrice: 0,
                visaCurrency: 836,
                isThird: '',
                passengerType: '',
                agencyFeeType:'',
                visaNumber: 0,
                visaFreeNumber: 0,
                createUserId: 0,
                remark: '',
                payDId: 72,
                consumptionPatterns: '暂无',
                consumptionDate: '',
                ctdId: '',
                companyBankNo: '',
                otherBankName: '',
                otherSideNo: '',
                otherSideName: '',
                bankNo: '',
                cardholderName: '',
                payee: '',
                orbitalPrivateTransfer: 0,
                cRemark: '',
                area:''
            },
            IsAuditGM: 0,
            VisitDate: '',
            passengerTypeSelect: [],
            areaarr:[],
            fliterClient: [],
            agencyFeeTypearr:[],
            transformDateFormat: function (value) {

                // 将value转换为Date对象
                var date = new Date(value);
                // 获取年、月、日
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                // 将月份和日期转换为两位数的格式

                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                // 返回格式化后的日期字符串
                return year + '-' + month + '-' + day;
            },
            OpVisaPriceDataRules: {
                visaPrice: [
                    { required: true, message: '请输入费用金额', trigger: ['blur', 'change'] },
                ],
                visaClient: [
                    { required: true, message: '请选择客户名单', trigger: ['blur'] },
                ],
                visaDescription: [
                    { required: true, message: '请输入', trigger: ['blur'] },
                ],
                area: [
                    { required: true, message: '请选择区域', trigger: ['blur'] },
                ],
                isThird: [
                    { required: true, message: '请选择是否第三方代办', trigger: ['blur', 'change'] },
                ],
                passengerType: [
                    { required: true, message: '请选择客户类型', trigger: ['blur', 'change'] },

                ],
                visaNumber: [
                    { required: true, message: '请输入办理人数', trigger: ['blur', 'change'] },
                    { pattern: /^[0-9]\d*$/, message: '请输入正确的数字', trigger: ['blur', 'change'] },
                ],
                visaFreeNumber: [
                    { required: true, message: '请输入办理人数', trigger: ['blur', 'change'] },
                    { pattern: /^[0-9]\d*$/, message: '请输入正确的数字', trigger: ['blur', 'change'] },
                ],
                payDId: [
                    { required: true, message: '请选择支付方式', trigger: ['blur', 'change'] },

                ],
                agencyFeeType:[
                    { required: true, message: '请选择代办费类型', trigger: ['blur', 'change'] },
                ],
                consumptionPatterns: [
                    { required: true, message: '请输入消费方式', trigger: ['blur', 'change'] },

                ],
                visaCurrency:[{ required: true, message: '选择币种', trigger: ['blur', 'change'] },],
                consumptionDate: [
                    { required: true, message: '请选择消费日期', trigger: ['blur', 'change'] },
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
                ],
                ctdId: [
                    { required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },
                ],
                companyBankNo: [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },],
                otherBankName: [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },],
                otherSideNo: [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },],
                totherSideName: [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },],
            },
            rateList: [],
            rollcallarr:[],
        }
    },
    methods: {
        //联想
        GroupFeeKeywordSearch(query) {
            if (query !== '') {
                // this.selectLoading=true;
                var url = "/api/search/GroupFeeKeywordSearch/" +this.userId+'/'+80 +'/'+query
                var that = this
                this.$axios({
                    method: 'get',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.delegationInfoLists = res.data.data;
                    }else{
                        that.delegationInfoLists=[];
                    }
                }).finally(()=>{
                    // that.selectLoading=false;
                })
            }else{
                this.delegationInfoLists=this.delegationInfoList;
                
            }
        },


        //拼音
        pinyingxing(val){
            return pinyin(val, { toneType: 'none' }).toUpperCase();
        },
        //fenge
        fgarr(val){
            val=val+""
            return val.split(' ')[0]
        },
        //初始化下拉框
        initializeSelect() {
            //团组下拉框绑定
            var url = "/api/Groups/DecreasePaymentsSelect"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    ctId: 80
                }
            }).then(function (res) {
                if (res.data.code == 200) {

                    that.delegationInfoList = res.data.data.groupName;
                    that.delegationInfoLists = that.delegationInfoList;
                    that.payment = res.data.data.payment
                    for (let index = 0; index < that.delegationInfoList.length; index++) {

                        if (that.delegationInfoList[index].id == that.OpVisaPriceData.diId) {
                            that.delegationInfo = that.delegationInfoList[index];

                            that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                            break;
                        }
                    }
                    that.PostTourClientListByDiId();
                }
            })

            var url = "/api/Groups/VisaPriceAddSelect"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.agencyFeeTypearr=res.data.data.agencyFeeType;
                    that.areaarr=res.data.data.countryFeeData;
                    that.bankCard = res.data.data.bankCard;
                    that.payment = res.data.data.payment;
                    that.currencyList = res.data.data.currencyList;
                    that.passengerTypeSelect = res.data.data.passengerType;
                }
            })
        },
        DiIdSelectChange(val) {
            var that = this;
            this.QueryRate();
            for (let index = 0; index < that.delegationInfoList.length; index++) {
                if (that.delegationInfoList[index].id == that.OpVisaPriceData.diId) {
                    that.delegationInfo = that.delegationInfoList[index];
                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                    break;
                }
            }
            setTimeout(function () {
                that.QueryClientInfoByDIID()
            },500)
            // that.QueryClientInfoByDIID()
            setTimeout(function () {
                that.PostTourClientListByDiId(val);
            },1000)
        },
        payChange() {
            this.OpVisaPriceData.ctdId = '';
            this.OpVisaPriceData.bankNo = '';
            this.OpVisaPriceData.cardholderName = '';
            this.OpVisaPriceData.companyBankNo = '';
            this.OpVisaPriceData.otherBankName = '';
            this.OpVisaPriceData.otherSideNo = '';
            this.OpVisaPriceData.otherSideName = '';
            this.OpVisaPriceData.cRemark = '';
            if (this.OpVisaPriceData.payDId == 73) {
                this.OpVisaPriceDataRules.companyBankNo = [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.ctdId = []
            } else if (this.OpVisaPriceData.payDId == 72) {
                this.OpVisaPriceDataRules.ctdId = [{ required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.companyBankNo = []
                this.OpVisaPriceDataRules.otherBankName = []
                this.OpVisaPriceDataRules.otherSideNo = []
                this.OpVisaPriceDataRules.otherSideName = []
            } else if (this.OpVisaPriceData.payDId == 83) {
                this.OpVisaPriceDataRules.companyBankNo = []
                this.OpVisaPriceDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.ctdId = []
            } else {
                this.OpVisaPriceDataRules.companyBankNo = []
                this.OpVisaPriceDataRules.otherBankName = []
                this.OpVisaPriceDataRules.otherSideNo = []
                this.OpVisaPriceDataRules.otherSideName = []
                this.OpVisaPriceDataRules.ctdId = []
            }
        },
        //获取客户名单info
        PostTourClientListByDiId(val) {
            this.rollcallarr=[];
            var that = this
            var url = "/api/Groups/PostTourClientListByDiId"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    diid: val?val:that.OpVisaPriceData.diId,
                    pageId:104,
                    userId:233
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.rollcallarr=res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        ctdChange(id) {
            this.OpVisaPriceData.cardholderName = 'Zhang Hailin';
            for (var i = 0; i < this.bankCard.length; i++) {
                if (this.bankCard[i].id == parseInt(id)) {
                    this.OpVisaPriceData.bankNo = this.bankCard[i].remark
                }
            }
        },
        //选择客户名单
        clientNamechange(val) {
            this.OpVisaPriceData.visaNumber = val.length;
            console.log(this.ClientFormat(this.OpVisaPriceData.visaClient))
        },
        //处理日期
        getdate(val){
            var date=new Date(val);
            var y=date.getFullYear();
            var m=date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1;
            var d=date.getDate()<10?'0'+date.getDate():date.getDate();
            return y+'-'+m+'-'+d
        },
        //获取团组客户名单
        QueryClientInfoByDIID() {
            this.OpVisaPriceData.visaClient=[];
            var url = "/api/Groups/QueryClientInfoByDIID"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    diid: that.OpVisaPriceData.diId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.fliterClient = res.data.data;
                    if(that.OpVisaPriceData.visaClient.length==0){
                        for(var i=0;i<that.fliterClient.length;i++){
                            that.OpVisaPriceData.visaClient.push(that.fliterClient[i].id)
                        }
                    }
                }
            })
        },
        //根据Id获取单挑数据及C表数据
        QueryVisaById() {
            // this.OpVisaPriceData.visaClient=""
            var url = "/api/Groups/QueryVisaById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: that.OpVisaPriceData.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var CreditCardPayment = res.data.data.creditCardPayment;
                    var VisaInfo = res.data.data.visaInfo;
                    that.IsAuditGM = CreditCardPayment.isAuditGM;
                    that.OpVisaPriceData.visaClient = that.ClientFormat(VisaInfo.visaClient);
                    console.log(that.OpVisaPriceData.visaClient);
                    that.OpVisaPriceData.visaPrice = VisaInfo.visaPrice;
                    that.OpVisaPriceData.visaCurrency = VisaInfo.visaCurrency;
                    that.OpVisaPriceData.isThird = VisaInfo.isThird;
                    that.OpVisaPriceData.passengerType = parseInt(VisaInfo.passengerType);
                    that.OpVisaPriceData.visaNumber = VisaInfo.visaNumber;
                    that.OpVisaPriceData.visaFreeNumber = VisaInfo.visaFreeNumber;
                    that.OpVisaPriceData.createUserId = VisaInfo.createUserId;
                    that.OpVisaPriceData.remark = VisaInfo.remark;
                    that.OpVisaPriceData.payDId = CreditCardPayment.payDId;
                    that.OpVisaPriceData.area = VisaInfo.area;
                    that.OpVisaPriceData.agencyFeeType = VisaInfo.agencyFeeType;
                    
                    that.OpVisaPriceData.visaDescription = VisaInfo.visaDescription;
                    // that.OpVisaPriceData.consumptionPatterns = CreditCardPayment.consumptionPatterns;
                    that.OpVisaPriceData.consumptionDate = CreditCardPayment.consumptionDate;
                    that.OpVisaPriceData.ctdId = CreditCardPayment.ctdId;
                    that.OpVisaPriceData.bankNo = CreditCardPayment.bankNo;
                    that.OpVisaPriceData.cardholderName = CreditCardPayment.cardholderName;
                    that.OpVisaPriceData.companyBankNo = CreditCardPayment.companyBankNo
                    that.OpVisaPriceData.otherBankName = CreditCardPayment.otherBankName
                    that.OpVisaPriceData.otherSideNo = CreditCardPayment.otherSideNo
                    that.OpVisaPriceData.otherSideName = CreditCardPayment.otherSideName
                    that.OpVisaPriceData.payee = CreditCardPayment.payee;
                    that.OpVisaPriceData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer;
                    that.OpVisaPriceData.cRemark = CreditCardPayment.remark;
                }
            })
        },
        //验证人数W
        verifytoll() {
            if (Number(this.OpVisaPriceData.visaNumber) + Number(this.OpVisaPriceData.visaFreeNumber) > this.OpVisaPriceData.visaClient.length) {
                this.$message.error("请检查人数");
                return false
            }
        },
        addBtn() {
            if(this.OpVisaPriceData.payDId!=72){
                this.OpVisaPriceData.ctdId=0;
                this.OpVisaPriceData.bankNo="";
                this.OpVisaPriceData.cardholderName="";
            }
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (this.OpVisaPriceData.diId == null && this.OpVisaPriceData.diId == undefined && this.OpVisaPriceData.diId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                } else {
                    const that = this;
                    that.$refs.OpVisaPriceData.validate((valid) => {
                        if (valid) {
                            that.OpVisaPriceData.createUserId = that.userId;
                            if (that.OpVisaPriceData.ctdId == '') {
                                that.OpVisaPriceData.ctdId = 0
                            }
                            if (Number(that.OpVisaPriceData.visaNumber) + Number(that.OpVisaPriceData.visaFreeNumber) > that.OpVisaPriceData.visaClient.length) {
                                that.$message.error("请检查人数");
                                return false
                            }
                            var url = "/api/Groups/OpVisaPrice"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                data:{
                                    status:that.OpVisaPriceData.id?2:1,
                                    id:that.OpVisaPriceData.id,
                                    diId:that.OpVisaPriceData.diId,
                                    visaClient:that.ClientFormat(that.OpVisaPriceData.visaClient),
                                    visaPrice:that.OpVisaPriceData.visaPrice,
                                    visaCurrency:that.OpVisaPriceData.visaCurrency,
                                    isThird:that.OpVisaPriceData.isThird,
                                    passengerType:that.OpVisaPriceData.passengerType,
                                    visaNumber:that.OpVisaPriceData.visaNumber,
                                    visaFreeNumber:that.OpVisaPriceData.visaFreeNumber,
                                    createUserId:that.OpVisaPriceData.createUserId,
                                    area:that.OpVisaPriceData.area,
                                    agencyFeeType:that.OpVisaPriceData.agencyFeeType,
                                    remark:that.OpVisaPriceData.remark,
                                    payDId:that.OpVisaPriceData.payDId,
                                    consumptionPatterns:that.OpVisaPriceData.consumptionPatterns,
                                    consumptionDate:that.getdate(that.OpVisaPriceData.consumptionDate),
                                    ctdId:that.OpVisaPriceData.ctdId,
                                    companyBankNo:that.OpVisaPriceData.companyBankNo,
                                    otherBankName:that.OpVisaPriceData.otherBankName,
                                    otherSideNo:that.OpVisaPriceData.otherSideNo,
                                    otherSideName:that.OpVisaPriceData.otherSideName,
                                    visaDescription:that.OpVisaPriceData.visaDescription,
                                    bankNo:that.OpVisaPriceData.bankNo,
                                    cardholderName:that.OpVisaPriceData.cardholderName,
                                    payee:that.OpVisaPriceData.payee,
                                    orbitalPrivateTransfer:that.OpVisaPriceData.orbitalPrivateTransfer,
                                    cRemark:that.OpVisaPriceData.cRemark
                                } ,
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    that.loading = true;
                                    setTimeout(() => {
                                        that.$router.push({
                                            path: "/home/VisaPriec",
                                            query: {
                                                diId: that.OpVisaPriceData.diId
                                            }
                                        })
                                    }, 3000);
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            })
                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },
        EscAdd() {
            this.$router.push({
                path: "/home/VisaPriec",
                query: {
                    diId: this.OpVisaPriceData.diId
                }
            })
        },
        //处理名单
        ClientFormat(val) {
            var result = [];
            if (typeof val == "string") {
                if (val.indexOf(',') != -1) {
                    result = val.split(',').map(x => { return Number(x) }).filter(f => f > 0)
                } else {
                    var clientId = Number(val);
                    if (clientId > 0) {
                        result = [clientId]
                    }
                }
            } else if (Array.isArray(val)) {
                if (val.length > 0) {
                    result = val.join();
                }
            } else {
                result = val;
            }
            return result;
        },
        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.OpVisaPriceData.diId,
                    "cTable": 80
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    //汇率
                    console.log("汇率--", res.data.data);
                    that.rateList = res.data.data.teamRates;
                }
            })


        }
    },
    mounted() {
        this.OpVisaPriceData.diId = parseInt(this.$route.query.DiId);
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.initializeSelect();
        this.QueryRate();
        this.OpVisaPriceData.id = this.$route.query.id?this.$route.query.id:0;
        this.QueryClientInfoByDIID()
        if (this.OpVisaPriceData.id != null && this.OpVisaPriceData.id != undefined && this.OpVisaPriceData.id != 0) {
            this.QueryVisaById();
            this.title = "修改签证费用";
            this.OpVisaPriceData.status = 2;
            this.isShow = true;
        } else {
            this.OpVisaPriceData.status = 1;
            this.title = "新增签证费用";
            this.isShow = false;
        }

    }
}
</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 {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

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

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