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

<template>
    <div class="car_add">
        <div class="haed-yqgw">
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
            <div style="display: flex;align-items: center;">
                <el-popover placement="right" trigger="hover">
                    <el-table height="700" :data="budgeting" border>
                        <el-table-column width="100" property="date" label="日期"></el-table-column>
                        <el-table-column width="120" label="会务活动费">
                            <template slot-scope="scope">
                                <span>
                                    {{ townum(scope.row.officialActivitiesFee)+'  '+ bizhong }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column width="120" label="公务翻译费">
                            <template slot-scope="scope">
                                <span>
                                    {{ townum(scope.row.officialTransFee)+'  '+ bizhong }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column width="120" label="邀请函费用">
                            <template slot-scope="scope">
                                <span>
                                    {{ townum(scope.row.invitationFee) +'  '+ bizhong }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column width="120" label="会务费">
                            <template slot-scope="scope">
                                <span>
                                    {{ townum(scope.row.activitiesFee)+'  ' + bizhong }}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" slot="reference">移上提示成本</el-button>
                </el-popover>
                <!-- 客户名单 -->
                <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;" 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 style="padding-top: 10px;">
            <el-form :model="delegationInfo" 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="DiIdSelect" clearable filterable placeholder="团组选择"
                                @change="DecreasePaymentsChange" :disabled="isShow" style="width: 100%;">
                                <el-option v-for="item in delegationInfoList" :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>
            </el-form>
            <el-form :model="InvitationOfficialActivities" ref="InvitationOfficialActivities"
                :rules="InvitationOfficialActivitiesRules" label-width="160px" class="demo-ruleForm">
                <div style="display:flex ; flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="邀请方地区:" prop="inviterArea" label-width="160px">
                            <el-input placeholder="邀请方地区" v-model="InvitationOfficialActivities.inviterArea">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="邀请方:" prop="inviter" label-width="160px">
                            <el-input placeholder="邀请方" v-model="InvitationOfficialActivities.inviter">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="邀请方职位:" prop="job" label-width="160px">
                            <el-input placeholder="邀请方职位" v-model="InvitationOfficialActivities.job">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="邀请时间:" prop="inviteTime" label-width="160px">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="InvitationOfficialActivities.inviteTime"
                                type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="是否到场:" prop="isGoOfficaiaBussiness" label-width="160px">
                            <el-radio-group v-model="InvitationOfficialActivities.isGoOfficaiaBussiness">
                                <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="contact" label-width="160px">
                            <el-input placeholder="联系人" v-model="InvitationOfficialActivities.contact">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="联系电话:" prop="tel" label-width="160px">
                            <el-input placeholder="联系电话" v-model="InvitationOfficialActivities.tel">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="电子邮箱:" prop="email" label-width="160px">
                            <el-input placeholder="电子邮箱" v-model="InvitationOfficialActivities.email">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="传真号码:" prop="fax" label-width="160px">
                            <el-input placeholder="传真号码" v-model="InvitationOfficialActivities.fax">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex; flex-wrap: wrap;">
                    <div style="width: 775px;">
                        <el-form-item label="邀请方地址:" prop="address" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="邀请方地址"
                                v-model="InvitationOfficialActivities.address"></el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 775px;">
                        <el-form-item label="其他信息:" prop="otherInformation" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="其他信息"
                                v-model="InvitationOfficialActivities.otherInformation"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display:flex ;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <div style="display: flex;">
                            <div style="width: 72%;">
                                <el-form-item label="公务活动费:" prop="eventsCost" label-width="160px">
                                    <el-input-number @change="computerenminbi" :precision="2" placeholder="公务活动费" v-model="InvitationOfficialActivities.eventsCost" :controls='false'>
                                    </el-input-number>
                                </el-form-item>
                            </div>
                            <div style="width: 28%;">
                                <el-form-item prop="eventsCurrency" label-width="5px">
                                    <el-select @change="computerenminbi(1)" v-model="InvitationOfficialActivities.eventsCurrency" 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>
                    <div style="width: 385px;">
                        <div style="display: flex;">
                            <div style="width: 72%;">
                                <el-form-item label="公务翻译费:" prop="translateCost" label-width="160px">
                                    <el-input-number @change="computerenminbi" :precision="2" placeholder="公务翻译费" v-model="InvitationOfficialActivities.translateCost" :controls='false'>
                                    </el-input-number>
                                </el-form-item>
                            </div>
                            <div style="width: 28%;">
                                <el-form-item prop="translateCurrency" label-width="5px">
                                    <el-select @change="computerenminbi" v-model="InvitationOfficialActivities.translateCurrency" 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>
                    <div style="width: 385px;">
                        <div style="display: flex;">
                            <div style="width: 72%;">
                                <el-form-item label="快递费:" prop="sendCost" label-width="160px">
                                    <el-input-number @change="computerenminbi" :precision="2" v-model="InvitationOfficialActivities.sendCost" :controls='false'
                                ></el-input-number>
                                </el-form-item>
                            </div>
                            <div style="width: 28%;">
                                <el-form-item prop="sendCurrency" label-width="5px">
                                    <el-select @change="computerenminbi" v-model="InvitationOfficialActivities.sendCurrency" 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>
                    <div style="width: 385px;">
                        <div style="display: flex;">
                            <div style="width: 72%;">
                                <el-form-item label="邀请费用:" prop="inviteCost" label-width="160px">
                                    <el-input-number @change="computerenminbi" :precision="2" placeholder="邀请费用" v-model="InvitationOfficialActivities.inviteCost" :controls='false'>
                                    </el-input-number>
                                </el-form-item>
                            </div>
                            <div style="width: 28%;">
                                <el-form-item prop="inviteCurrency" label-width="5px">
                                    <el-select @change="computerenminbi" v-model="InvitationOfficialActivities.inviteCurrency" 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>
                    <div style="width: 385px;">
                        <div style="display: flex;">
                            <div style="width: 72%;">
                                <el-form-item label="支付总费用:" prop="payMoney" label-width="160px">
                                    <el-input-number :disabled="true" :precision="2" v-model="InvitationOfficialActivities.payMoney" :controls='false'
                                ></el-input-number>
                                </el-form-item>
                            </div>
                            <div style="width: 28%;">
                                <el-form-item prop="paymentCurrency" label-width="5px">
                                    <el-select :disabled="true" v-model="InvitationOfficialActivities.paymentCurrency" 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>
                    <div style="width: 385px;">
                        <el-form-item label="收款方:" prop="payee" label-width="160px">
                            <el-input placeholder="收款方" v-model="InvitationOfficialActivities.payee">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="费用标识:" prop="orbitalPrivateTransfer">
                            <el-select v-model="InvitationOfficialActivities.orbitalPrivateTransfer" placeholder="费用标识"
                                style="width: 100%;">
                                <el-option v-for="item in costIdentificationData" :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="consumptionDate">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="InvitationOfficialActivities.consumptionDate"
                                type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="消费方式:" prop="consumptionPatterns">
                            <el-input placeholder="消费方式" v-model="InvitationOfficialActivities.consumptionPatterns">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="支付方式:" prop="payDId">
                            <el-select v-model="InvitationOfficialActivities.payDId" placeholder="支付方式">
                                <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 v-if="InvitationOfficialActivities.payDId==72" style="width: 385px;">
                        <el-form-item label="卡类型:" prop="ctdId">
                            <el-select @change="cardhandoff" v-model="InvitationOfficialActivities.ctdId" placeholder="卡类型">
                                <el-option v-for="item in cardTypeData" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div v-if="InvitationOfficialActivities.payDId==72" style="width: 385px;">
                        <el-form-item label="银行卡号:" prop="bankNo">
                            <el-input :disabled="true" placeholder="银行卡号" v-model="InvitationOfficialActivities.bankNo">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-if="InvitationOfficialActivities.payDId==72" style="width: 385px;">
                        <el-form-item label="持卡人姓名:" prop="cardholderName">
                            <el-input :disabled="true" placeholder="持卡人姓名" v-model="InvitationOfficialActivities.cardholderName">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-if="InvitationOfficialActivities.payDId==73||InvitationOfficialActivities.payDId==83" style="width: 385px;">
                              <el-form-item label="公司银行卡号:" prop="companyBankNo">
                            <el-input placeholder="公司银行卡号" v-model="InvitationOfficialActivities.companyBankNo">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-if="InvitationOfficialActivities.payDId==73||InvitationOfficialActivities.payDId==83" style="width: 385px;">
                        <el-form-item label="对方开户行:" prop="otherBankName">
                            <el-input placeholder="对方开户行" v-model="InvitationOfficialActivities.otherBankName">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-if="InvitationOfficialActivities.payDId==73||InvitationOfficialActivities.payDId==83" style="width: 385px;">
                        <el-form-item label="对方银行账号:" prop="otherSideNo">
                            <el-input placeholder="对方银行账号" v-model="InvitationOfficialActivities.otherSideNo">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-if="InvitationOfficialActivities.payDId==73||InvitationOfficialActivities.payDId==83" style="width: 385px;">
                        <el-form-item label="对方姓名:" prop="otherSideName">
                            <el-input placeholder="对方姓名" v-model="InvitationOfficialActivities.otherSideName">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item style="position: relative;" label="附件:" prop="fileUrl" label-width="160px">
                            <span style="position: absolute;top: 0;left: -50px;color: red;">*</span>
                            <el-upload 
                                :file-list="uploadFiles" 
                                multiple ref="upload" 
                                :on-success="upLoadSuccess"
                                :on-error="upLoadError" 
                                :on-remove="handleRemove" 
                                :before-remove="beforeRemove" 
                                :on-change="onChange" 
                                :limit="10"
                                :on-exceed="exceed" 
                                action="" 
                                :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <!-- <el-button style="margin-left: 10px;" size="small" type="success"
                                    @click="submitUpload">上传到服务器</el-button> -->
                            </el-upload>
    
    
                        </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="5" placeholder="备注"
                                v-model="InvitationOfficialActivities.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="cancelbtn">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import { pinyin } from 'pinyin-pro';
var figurecharacter = (rule, value, callback) => {
    if (!(/^\d+-*[\d,-]*$/.test(value))) { 
        callback(new Error('请输正确座机或手机号格式！'));
    }else {
        callback();
    }
}
var emailat = (rule, value, callback) => {
    if (!value.includes('@')) { 
        callback(new Error('邮箱格式不正确！'));
    }else {
        callback();
    }
}
var namearr=['小姐','先生','女士','老师']
var namewy = (rule, value, callback) => {
    var array=namearr.map((item,index)=>{
        if (value.includes(item)) { 
            console.log(4123);
            callback(new Error('联系人不能包含先生、女士、小姐等字样'));
            return
        }
    })
    callback();
}
import { debounce } from '../../store/statice'
export default {
    data() {
        return {
            uploadURL: "http://132.232.92.186:8888/api/Groups/UploadProject",
            projectName: [],
            uploadFiles: [],//上传的文件列表
            DelfileName: "",
            title: "新增商邀费用",
            token: '',
            userId: 0,
            id: '',
            DiId: '',
            isShow: false,
            DiIdSelect: '',
            delegationInfo: {},
            IsAuditGM: 0,
            delegationInfoList: [],//团组下拉框
            payment: [],//支付方式下拉框
            cardTypeData:[],//卡类型下拉框
            costIdentificationData:[],//费用标识下拉框
            InvitationOfficialActivities: {
                status: 0,
                payDId: 0,
                orbitalPrivateTransfer: 0,
                payee: '',
                id: 0,
                diId: '',
                inviterArea: '',
                inviter: '',
                inviteTime: this.transformDateFormat(new Date()),
                attachment: '',
                payMoney:0,
                paymentCurrency:'',
                eventsCost:0,
                eventsCurrency:'',
                inviteCost: 0,
                inviteCurrency: '',
                translateCost:0,
                translateCurrency: '',
                sendCost: 0,
                sendCurrency:'',
                isGoOfficaiaBussiness: 0,
                createUserId: 0,
                remark: '',
                address: '',
                contact: '',
                job: '',
                tel: '',
                email: '',
                fax: '',
                otherInformation: '',
                consumptionDate: '',//消费日期
                consumptionPatterns: '',//消费方式
                ctdId: '',//卡类型
                bankNo: '',//银行卡号
                cardholderName: '',//持卡人姓名
                companyBankNo: '',//公司银行卡号
                otherBankName: '',//对方开户行
                otherSideNo: '',//对方银行账号
                otherSideName: '',//对方姓名
            },
            headers: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
                TypeName: "B"
            },
            InvitationOfficialActivitiesRules: {
                inviteCost: [
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                eventsCost: [
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                translateCost: [
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                sendCost: [
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                payMoney: [
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                companyBankNo: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '请输入', trigger: 'blur' },
                    {validator: emailat, trigger: 'blur'},
                ],
                otherBankName: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                otherSideNo: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                otherSideName: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                inviterArea: [
                    { required: true, message: '请输入邀请方地区', trigger: 'change' },
                    { required: true, message: '请输入邀请方地区', trigger: 'blur' },
                ],
                inviter: [
                    { required: true, message: '请输入邀请方', trigger: 'change' },
                    { required: true, message: '请输入邀请方', trigger: 'blur' },
                ],
                job: [
                    { required: true, message: '请输入邀请方', trigger: 'change' },
                    { required: true, message: '请输入邀请方', trigger: 'blur' },
                ],
                inviteTime: [
                    { required: true, message: '请选择邀请时间', trigger: 'change' },
                    { required: true, message: '请选择邀请时间', trigger: 'blur' },
                ],
                consumptionDate: [
                    { required: true, message: '请选择邀请时间', trigger: 'change' },
                    { required: true, message: '请选择邀请时间', trigger: 'blur' },
                ],
                consumptionPatterns: [
                    { required: true, message: '请选择邀请时间', trigger: 'change' },
                    { required: true, message: '请选择邀请时间', trigger: 'blur' },
                ],
                contact: [
                    { required: true, message: '请输入联系人', trigger: 'change' },
                    { required: true, message: '请输入联系人', trigger: 'blur' },
                    {validator: namewy, trigger: 'blur'},
                ],
                tel: [
                    { required: true, message: '请输入联系方式', trigger: 'change' },
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    {validator: figurecharacter, trigger: 'blur'},
                ],
                address: [
                    { required: true, message: '请输入邀请方地址', trigger: 'change' },
                    { required: true, message: '请输入邀请方地址', trigger: 'blur' },
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: 'change' },
                    { required: true, message: '请输入收款方', trigger: 'blur' },
                ],
                inviteCurrency: [
                    { required: true, message: '请选择币种', trigger: 'change' },
                    { required: true, message: '请选择币种', trigger: 'blur' },
                ],
                eventsCurrency: [
                    { required: true, message: '请选择币种', trigger: 'change' },
                    { required: true, message: '请选择币种', trigger: 'blur' },
                ],
                translateCurrency: [
                    { required: true, message: '请选择币种', trigger: 'change' },
                    { required: true, message: '请选择币种', trigger: 'blur' },
                ],
                sendCurrency: [
                    { required: true, message: '请选择币种', trigger: 'change' },
                    { required: true, message: '请选择币种', trigger: 'blur' },
                ],
                paymentCurrency: [
                    { required: true, message: '请选择币种', trigger: 'change' },
                    { required: true, message: '请选择币种', trigger: 'blur' },
                ],

            },
            rateList: [],
            budgeting:[],
            bizhong:'',
            rollcallarr:[],
        }
    },
    methods: {
        //拼音
        pinyingxing(val){
            return pinyin(val, { toneType: 'none' }).toUpperCase();
        },
        //fenge
        fgarr(val){
            val=val+""
            return val.split(' ')[0]
        },
        //保留两位小数
        townum(val) {
            if (val == 0.00) {
                return '--'
            } else {
                return val.toFixed(2)
            }
        },
        //卡类型切换
        cardhandoff(val){
            console.log(val)
            for(var i=0;i<this.cardTypeData.length;i++){
                if(val==this.cardTypeData[i].id){
                    this.InvitationOfficialActivities.bankNo=this.cardTypeData[i].remark;
                    this.InvitationOfficialActivities.cardholderName=this.cardTypeData[i].cardholder;
                }
            }
        },
        //获取基础数据
        InvitationOfficialActivityInitBasicData() {
            var url = "/api/Groups/InvitationOfficialActivityInitBasicData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                }
            
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res)
                    that.payment = res.data.data.payTypeData;
                    that.cardTypeData = res.data.data.cardTypeData;
                    that.costIdentificationData = res.data.data.costIdentificationData;
                    //下拉框初始值
                    that.InvitationOfficialActivities.orbitalPrivateTransfer=that.costIdentificationData[0].id;
                    that.InvitationOfficialActivities.payDId=that.payment[0].id;
                    that.InvitationOfficialActivities.ctdId=that.cardTypeData[0].id;
                    that.InvitationOfficialActivities.bankNo=that.cardTypeData[0].remark;
                    that.InvitationOfficialActivities.cardholderName=that.cardTypeData[0].cardholder;
                    if (that.id != null && that.id != undefined && that.id != 0) {
                        that.InvitationOfficialActivitiesById();
                        that.title = "修改商邀费用";
                        that.InvitationOfficialActivities.status = 2
                        that.isShow = true
                    } else {
                        that.InvitationOfficialActivities.status = 1
                        that.title = "新增商邀费用"
                        that.isShow = false
                    }
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取客户名单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.DiIdSelect,
                    pageId:104,
                    userId:233
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.rollcallarr=res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取成本提示
        getcostbudgeting() {
            this.budgeting = [];
            this.bizhong = '';
            var url = "/api/Groups/PostGroupCostModulePrompt"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    diId: that.DiIdSelect ? that.DiIdSelect : that.DiId,
                    cTable: 79,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.budgeting = res.data.data.modulePromptInfos[0].data;
                    that.bizhong = res.data.data.modulePromptInfos[0].currencyCode;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //团组下拉框
        AirTicketResSelect() {
            var url = "/api/Groups/DecreasePaymentsSelect"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    ctId: 81
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res)
                    that.delegationInfoList = res.data.data.groupName;
                    that.DiIdSelect = parseInt(that.DiId)
                    for (let index = 0; index < that.delegationInfoList.length; index++) {
                        if (that.delegationInfoList[index].id == that.DiIdSelect) {
                            that.delegationInfo = that.delegationInfoList[index];
                            break;
                        }
                    }
                    that.PostTourClientListByDiId();
                    // that.payment = res.data.data.payment
                }
            })
        },
        InvitationOfficialActivitiesById() {
            var url = "/api/Groups/InvitationOfficialActivitiesById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    Id: that.id,
                    portType: 1
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res.data.data)
                    that.InvitationOfficialActivities.payDId = res.data.data._CreditCard.payDId;
                    that.InvitationOfficialActivities.orbitalPrivateTransfer = res.data.data._CreditCard.orbitalPrivateTransfer;
                    that.InvitationOfficialActivities.payee = res.data.data._CreditCard.payee;
                    that.InvitationOfficialActivities.id = res.data.data._Invitation.id;
                    that.InvitationOfficialActivities.diId = res.data.data._Invitation.diId;
                    that.InvitationOfficialActivities.inviterArea = res.data.data._Invitation.inviterArea;
                    that.InvitationOfficialActivities.inviter = res.data.data._Invitation.inviter;
                    that.InvitationOfficialActivities.inviteTime = res.data.data._Invitation.inviteTime;
                    that.InvitationOfficialActivities.attachment = res.data.data._Invitation.attachments;
                    that.projectName = res.data.data._Invitation.attachments;
                    that.InvitationOfficialActivities.inviteCost = res.data.data._Invitation.inviteCost;
                    that.InvitationOfficialActivities.inviteCurrency = res.data.data._Invitation.inviteCurrency;
                    that.InvitationOfficialActivities.sendCost = res.data.data._Invitation.sendCost;
                    that.InvitationOfficialActivities.sendCurrency = res.data.data._Invitation.sendCurrency;
                    that.InvitationOfficialActivities.eventsCost = res.data.data._Invitation.eventsCost;
                    that.InvitationOfficialActivities.eventsCurrency = res.data.data._Invitation.eventsCurrency;
                    that.InvitationOfficialActivities.translateCost = res.data.data._Invitation.translateCost;
                    that.InvitationOfficialActivities.translateCurrency = res.data.data._Invitation.translateCurrency;
                    that.InvitationOfficialActivities.isGoOfficaiaBussiness = res.data.data._Invitation.isGoOfficaiaBussiness;
                    that.InvitationOfficialActivities.remark = res.data.data._Invitation.remark;
                    that.InvitationOfficialActivities.address = res.data.data._InvitationData.address;
                    that.InvitationOfficialActivities.contact = res.data.data._InvitationData.contact;
                    that.InvitationOfficialActivities.job = res.data.data._InvitationData.job;
                    that.InvitationOfficialActivities.tel = res.data.data._InvitationData.tel;
                    that.IsAuditGM = res.data.data._CreditCard.isAuditGM;
                    //
                    that.InvitationOfficialActivities.consumptionDate = res.data.data._CreditCard.consumptionDate;
                    that.InvitationOfficialActivities.consumptionPatterns = res.data.data._CreditCard.consumptionPatterns;
                    that.InvitationOfficialActivities.ctdId = res.data.data._CreditCard.ctdId;
                    that.InvitationOfficialActivities.bankNo = res.data.data._CreditCard.bankNo;
                    that.InvitationOfficialActivities.cardholderName = res.data.data._CreditCard.cardholderName;
                    that.InvitationOfficialActivities.companyBankNo = res.data.data._CreditCard.companyBankNo;
                    that.InvitationOfficialActivities.otherBankName = res.data.data._CreditCard.otherBankName;
                    that.InvitationOfficialActivities.otherSideNo = res.data.data._CreditCard.otherSideNo;
                    that.InvitationOfficialActivities.otherSideName = res.data.data._CreditCard.otherSideName;
                    //
                    that.InvitationOfficialActivities.payMoney=res.data.data._CreditCard.payMoney;
                    that.InvitationOfficialActivities.paymentCurrency=res.data.data._CreditCard.paymentCurrency;
                    that.InvitationOfficialActivities.email = res.data.data._InvitationData.email;
                    that.InvitationOfficialActivities.fax = res.data.data._InvitationData.fax;
                    that.InvitationOfficialActivities.otherInformation = res.data.data._InvitationData.remark;
                    
                    if (that.InvitationOfficialActivities.attachment != null && that.InvitationOfficialActivities.attachment != undefined && that.InvitationOfficialActivities.attachment != "") {
                        for (let m = 0; m < that.InvitationOfficialActivities.attachment.length; m++) {
                            that.uploadFiles.push({
                                name: that.InvitationOfficialActivities.attachment[m],
                                url: 'http://132.232.92.186:24/Office/GrpFile/商邀相关文件/'+that.InvitationOfficialActivities.attachment[m],
                            })
                        }
                    } 
                }

            })
        },
        //币种不同计算为人民币
        computerenminbi(val){
            if(val==1){
                if(this.InvitationOfficialActivities.inviteCurrency==''||this.InvitationOfficialActivities.translateCurrency==''||this.InvitationOfficialActivities.sendCurrency==''){
                    this.InvitationOfficialActivities.inviteCurrency=this.InvitationOfficialActivities.eventsCurrency;
                    this.InvitationOfficialActivities.translateCurrency=this.InvitationOfficialActivities.eventsCurrency;
                    this.InvitationOfficialActivities.sendCurrency=this.InvitationOfficialActivities.eventsCurrency;
                }
            }
            var eventsRate=0;
            var inviteRate=0;
            var translateRate=0;
            var sendRate=0;
            for (let h = 0; h < this.rateList.length; h++) {
                if(this.InvitationOfficialActivities.eventsCurrency==this.rateList[h].currencyId){
                    eventsRate=this.rateList[h].rate;
                }
                if(this.InvitationOfficialActivities.inviteCurrency==this.rateList[h].currencyId){
                    inviteRate=this.rateList[h].rate;
                }
                if(this.InvitationOfficialActivities.translateCurrency==this.rateList[h].currencyId){
                    translateRate=this.rateList[h].rate;
                }
                if(this.InvitationOfficialActivities.sendCurrency==this.rateList[h].currencyId){
                    sendRate=this.rateList[h].rate;
                }
            }
            if(
                this.InvitationOfficialActivities.eventsCurrency!=this.InvitationOfficialActivities.inviteCurrency
                ||this.InvitationOfficialActivities.inviteCurrency!=this.InvitationOfficialActivities.translateCurrency
                ||this.InvitationOfficialActivities.translateCurrency!=this.InvitationOfficialActivities.sendCurrency
                ||this.InvitationOfficialActivities.sendCurrency!=this.InvitationOfficialActivities.eventsCurrency
                ){
                this.InvitationOfficialActivities.paymentCurrency=836
                this.InvitationOfficialActivities.payMoney=(
                    this.InvitationOfficialActivities.eventsCost*eventsRate+
                    this.InvitationOfficialActivities.inviteCost*inviteRate+
                    this.InvitationOfficialActivities.translateCost*translateRate+
                    this.InvitationOfficialActivities.sendCost*sendRate
                );
            }else{
                this.InvitationOfficialActivities.paymentCurrency=this.InvitationOfficialActivities.eventsCurrency
                this.InvitationOfficialActivities.payMoney=(
                    this.InvitationOfficialActivities.eventsCost+
                    this.InvitationOfficialActivities.inviteCost+
                    this.InvitationOfficialActivities.translateCost+
                    this.InvitationOfficialActivities.sendCost
                );
            }
        },
        cancelbtn(){
            this.$router.push({
                path: "/home/InvitationOfficialActivities",
                query: {
                    DiId: this.DiId,
                }
            })
        },
        //点击保存事件
        addBtn:debounce(function () { 
            if (this.uploadFiles.length === 0) {
                return this.$message.warning('请选取文件后再上传');
            }
            if(this.InvitationOfficialActivities.payDId!=72){
                this.InvitationOfficialActivities.ctdId=0;
                this.InvitationOfficialActivities.bankNo="";
                this.InvitationOfficialActivities.cardholderName="";
            }
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (this.DiId == null && this.DiId == undefined && this.DiId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                }
                const that = this;
                that.$refs.InvitationOfficialActivities.validate((valid) => {
                    if (valid) {
                        that.submitUpload()
                        that.InvitationOfficialActivities.attachment = that.projectName
                        that.InvitationOfficialActivities.diId = that.DiIdSelect;
                        that.InvitationOfficialActivities.createUserId = that.userId;
                        var url = "/api/Groups/OpInvitationOfficialActivities"
                        that.$axios({
                            method: 'post',
                            url: url,
                            headers: {
                                Authorization: 'Bearer ' + that.token
                            },
                            data: that.InvitationOfficialActivities
                        }).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    that.cancelbtn()
                                }, 500);
                            } else {
                                that.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        this.$message.error('请完善信息在保存！');
                        return false;
                    }
                })
            }
            // 此时必填完成，做保存后的业务操作
        },1000),
        DecreasePaymentsChange(val) {
            var that = this
            for (let index = 0; index < this.delegationInfoList.length; index++) {
                if (this.delegationInfoList[index].id == parseInt(this.DiIdSelect)) {
                    this.delegationInfo = this.delegationInfoList[index];
                    break;
                }
            }
            this.QueryRate();
            setTimeout(function () {
                that.PostTourClientListByDiId(val);
            },500)

        },
        //上传
        // 文件超出限制
        exceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 10个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件,请取消要替换的文件`
            );
        },
        //文件上传成功时的钩子
        upLoadSuccess(response, file, fileList) {
            if (response.code == 200) {
                // var that = this;
                // that.$axios({
                //     method: 'post',
                //     url: "/api/Groups/DelFile",
                //     headers: {
                //         Authorization: 'Bearer ' + that.token
                //     },
                //     data: {
                //         fileName: that.DelfileName,
                //         id: that.id
                //     }
                // }).then(function (res) {
                //     if (res.data.code == 200) {

                //     }
                // })
                // that.InvitationOfficialActivities.attachment = response.data
                that.InvitationOfficialActivities.diId = that.DiIdSelect;
                that.InvitationOfficialActivities.createUserId = that.userId;
                var url = "/api/Groups/OpInvitationOfficialActivities"
                that.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: that.InvitationOfficialActivities
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        that.loading = true;
                        setTimeout(() => {
                            that.$router.push('/home/InvitationOfficialActivities?DiId='+that.DiIdSelect)
                        }, 500);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                console.log("上传成功");
            } else {
                console.log("保存失败");
            }

        },
        //上传服务器
        submitUpload(val) {
            //判断是否有文件再上传
            var verdict=false
            if (this.uploadFiles.length === 0) {
                return this.$message.warning('请选取文件后再上传');
            }
            // 下面的代码将创建一个空的FormData对象:
            const formData = new FormData()
            // 你可以使用FormData.append来添加键/值对到表单里面；
            this.uploadFiles.forEach((file) => {
                if(file.raw!=undefined){
                    verdict=true;
                    formData.append('files', file.raw);
                }
            })
            if(!verdict){
                return
            }
            var that = this;
            var url = "/api/Groups/UploadProjects"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token,
                    TypeName: "B"
                },
                data:formData
            }).then(function (res) {
                if (res.data.code == 200) {
                    
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //文件上传失败时的钩子
        upLoadError(response, file, fileList) {
            console.log("项目添加失败");
        },
        //删除文件
        beforeRemove(file,fileList){
            if(file && file.status=="success"){
                return this.$confirm('此文件已上传至服务器此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });     
                    reject(false)     
                });
            }else{
                let id1 = this.projectName.findIndex(item => {
                    if (item.name == file.name) {
                        return true
                    }
                })
                this.projectName.splice(id1, 1)
            }
        },
        handleRemove(file, fileList) {
            var that = this;
            that.$axios({
                method: 'post',
                url: "/api/Groups/DelFile",
                headers: {
                    Authorization: 'Bearer ' + that.token,
                    typeName:'B'
                },
                data: {
                    fileName: file.name,
                    id: that.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    let id1 = that.projectName.findIndex(item => {
                        if (item.name == file.name) {
                            return true
                        }
                    })
                    that.projectName.splice(id1, 1)
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                }
            })
            
        },
        onChange(file, fileList) { 
            this.uploadFiles = fileList;
            this.projectName.push(file.name)
        },
        QueryRate() {
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    "portType": 1,
                    "diId": that.DiIdSelect ? that.DiIdSelect : that.DiId,
                    "cTable": 81 //商邀
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.rateList = res.data.data.teamRates;
                    that.getcostbudgeting()
                }
            })
        },
        back() {
            this.$router.push({
                path: "/home/InvitationOfficialActivities",
                query: {
                    DiId: this.DiIdSelect ? this.DiIdSelect : this.DiId,
                }
            })
        },

    },

    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.InvitationOfficialActivityInitBasicData();
        this.AirTicketResSelect();
        this.id = this.$route.query.id
        
        this.DiId = this.$route.query.DiId
        this.QueryRate();
    }
}
</script>
<style>
.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;
    min-height: 810px;
    
}
.haed-yqgw{
    display: flex;
    justify-content: space-between;
}

.ExpressPirce .el-input input {
    text-align: left;
}
.car_add .el-date-editor.el-input,.car_add .el-input-number,.car_add .el-select{
    width: 100%;
}
@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

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