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

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div class="opcustomers-box">
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 390px;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="OpCustomersData.diId" clearable filterable placeholder="团组选择"
                                :disabled="isShow" @change="DiIdSelectChange">
                                <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: 390px;">
                        <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: 390px;">
                        <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: 390px;">
                        <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: 390px;">
                        <el-form-item label="出访时间:" label-width="160px">
                            <el-input placeholder="出访时间" v-model="VisitDate" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 390px;">
                        <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: 390px;">
                        <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="OpCustomersData" ref="OpCustomersData" :rules="OpCustomersDataRules" label-width="100px"
                class="demo-ruleForm">
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 390px;">
                        <el-form-item label="保险种类:" prop="iid" label-width="160px">
                            <el-select v-model="OpCustomersData.iid" filterable placeholder="保险种类" @change="iidChane">
                                <el-option v-for="item in insuranceCostList" :key="item.id" :label="item.gName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- <div style="width: 25%;">
                        <el-form-item label="保险余额:" label-width="160px">
                            <el-input placeholder="保险余额" v-model="Balance" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div> -->

                    <div style="width: 390px;">
                        <el-form-item label="保险费用:" prop="insuranceCosts" label-width="160px">
                            <el-input placeholder="保险费用" v-model="OpCustomersData.insuranceCosts" style="width: 48%;">
                            </el-input>
                            <el-select v-model="OpCustomersData.currency" filterable placeholder="币种"
                                style="width: 50%;">
                                <el-option v-for="item in currencyList" :key="item.currencyId"
                                    :label="item.currencyCode" :value="item.currencyId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="width: 100%;">
                    <el-form-item label="客户名称:" prop="clientName" label-width="160px">
                        <el-select v-model="OpCustomersData.clientName" placeholder="客户名称" multiple clearable
                            filterable>
                            <el-option v-for="item in fliterClient" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <!-- <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="附件" prop="attachment" label-width="160px">

                            <el-upload :file-list="uploadFiles" ref="upload" :on-success="upLoadSuccess"
                                style="width: 200px;" :before-remove="beforeRemove" :limit="1" :on-exceed="exceed"
                                :action="uploadURL" :headers="headers" :auto-upload="false" :on-change="onChange">
                                <el-button slot="trigger" size="small" type="primary">选取文件</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="OpCustomersData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <hr style='background-color:#5555; height:1px; border:none;margin-top: 10px;' />
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 390px;">
                        <el-form-item label="支付方式:" prop="payDId" label-width="160px">
                            <el-select v-model="OpCustomersData.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: 390px;">
                        <el-form-item label="消费方式:" prop="consumptionPatterns" label-width="160px">
                            <el-input placeholder="消费方式" v-model="OpCustomersData.consumptionPatterns">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 390px;">
                        <el-form-item label="消费日期:" prop="consumptionDate" label-width="160px">
                            <el-date-picker v-model="OpCustomersData.consumptionDate" placeholder="消费日期" type="date">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 390px;">
                        <el-form-item label="付款金额:" prop="payMoney" label-width="160px">
                            <el-input placeholder="付款金额" v-model="OpCustomersData.insuranceCosts" style="width: 52%;"
                                :disabled="true">
                            </el-input>
                            <el-select v-model="OpCustomersData.currency" style="width: 45%;" :disabled="true">
                                <el-option v-for="item in currencyList" :key="item.currencyId"
                                    :label="item.currencyCode" :value="item.currencyId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div v-if="OpCustomersData.payDId == 72">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="width: 390px;">
                            <el-form-item label="卡类型:" prop="ctdId" label-width="160px">
                                <el-select v-model="OpCustomersData.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: 390px;">
                            <el-form-item label="银行卡号:" prop="bankNo" label-width="160px">
                                <el-input placeholder="银行卡号" v-model="OpCustomersData.bankNo" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 390px;">
                            <el-form-item label="持卡人姓名:" prop="cardholderName" label-width="160px">
                                <el-input placeholder="持卡人姓名" v-model="OpCustomersData.cardholderName" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="OpCustomersData.payDId == 73">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="width: 390px;">
                            <el-form-item label="公司银行账号:" label-width="160px" prop="companyBankNo">
                                <el-input placeholder="公司银行账号" v-model="OpCustomersData.companyBankNo">
                                </el-input>

                            </el-form-item>
                        </div>
                        <div style="width: 390px;">
                            <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                <el-input placeholder="对方开户行:" v-model="OpCustomersData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 390px;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                <el-input placeholder="对方银行卡号" v-model="OpCustomersData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 390px;">
                            <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                <el-input placeholder="对方姓名" v-model="OpCustomersData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="OpCustomersData.payDId == 83">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="width: 390px;">
                            <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                <el-input placeholder="对方开户行" v-model="OpCustomersData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 390px;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                <el-input placeholder="对方银行卡号" v-model="OpCustomersData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 390px;">
                            <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                <el-input placeholder="对方姓名" v-model="OpCustomersData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else></div>
                <div style="display:flex;flex-wrap: wrap;">
                    <div style="width: 390px;">
                        <el-form-item label="收款方:" prop="payee" label-width="160px">
                            <el-input placeholder="对方姓名:" v-model="OpCustomersData.payee">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 390px;">
                        <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
                            <el-select v-model="OpCustomersData.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;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpCustomersData.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>
export default {
    data() {
        return {
            title: "新增保险费用",
            token: '',
            userId: 0,
            id: '',
            isShow: false,
            uploadURL: "http://132.232.92.186:8888/api/Groups/UploadCus",
            headers: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
            },
            projectName: "",
            uploadFiles: [],//上传的文件列表
            DelfileName: "",
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            insuranceCostList: [],//保险类型下拉框
            Balance: 0,//保险余额
            currencyList: [],//币种下拉框
            bankCard: [],//卡类型下拉框
            payment: [],//支付方式下拉框
            OpCustomersData: {
                status: 0,
                id: 0,
                diId: 0,
                iid: 2,
                clientName: [],
                insuranceCosts: 0,
                currency: '',
                attachment: '',
                createUserId: 0,
                remark: '',
                payDId: 72,
                consumptionPatterns: '',
                consumptionDate: '',
                ctdId: '',
                companyBankNo: '',
                otherBankName: '',
                otherSideNo: '',
                otherSideName: '',
                bankNo: '',
                cardholderName: '',
                payee: '',
                orbitalPrivateTransfer: 0,
                cRemark: '',
            },
            IsAuditGM: 0,
            VisitDate: '',
            passengerTypeSelect: [],
            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;
            },
            OpCustomersDataRules: {
                iid: [
                    { required: true, message: '请选择保险名称', trigger: ['blur', 'change'] },
                ],
                clientName: [
                    { type: "array", required: true, message: '请选择客户名称', trigger: ['blur', 'change'] },
                ],
                insuranceCosts: [
                    { required: true, message: '请输入费用金额', trigger: ['blur', 'change'] },
                    { pattern: /^(([1-9]?\d{0,8}(\.\d{1,2})?)|999999999|999999999\.(0){1,2})$/, message: '请输入正确的金额(最多2位小数)' }
                ],
                currency: [
                    { required: true, message: '请选择支付币种', trigger: ['blur', 'change'] },
                ],
                payDId: [
                    { required: true, message: '请选择支付方式', trigger: ['blur', 'change'] },
                ],
                consumptionPatterns: [
                    { 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'] },],
            },
            clientNameId: [],
        }
    },
    methods: {
        //初始化下拉框
        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: 82
                }
            }).then(function (res) {
                console.log('DecreasePaymentsSelect', res.data.data);
                if (res.data.code == 200) {
                    that.delegationInfoList = res.data.data.groupName; //团组列表
                    that.payment = res.data.data.payment; //支付方式
                    for (let index = 0; index < that.delegationInfoList.length; index++) {
                        if (that.delegationInfoList[index].id == that.OpCustomersData.diId) {
                            that.delegationInfo = that.delegationInfoList[index];
                            //that.OpCustomersData.diId = that.delegationInfo.id
                            that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate); //时间
                            var url = "/api/Groups/CustomersInitialize"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                data: {
                                    portType: 1,
                                    diId: that.OpCustomersData.diId
                                }
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.insuranceCostList = res.data.data.insuranceCost;//保险类型下拉框
                                    that.OpCustomersData.iid = that.insuranceCostList[0].id;
                                    that.Balance = that.insuranceCostList[0].balance;
                                    that.currencyList = res.data.data.currencyList;//币种下拉框
                                    if (that.currencyList.length != 0) {
                                        that.OpCustomersData.currency = that.currencyList[0].currencyId
                                    }

                                    that.bankCard = res.data.data.bankCard;//卡类型下拉框
                                    that.payment = res.data.data.payment;//支付方式下拉框


                                    if (that.OpCustomersData.id != null && that.OpCustomersData.id != undefined && that.OpCustomersData.id != 0) {
                                        that.QueryCustomersById();
                                        that.title = "修改保险费用";
                                        that.OpCustomersData.status = 2
                                        that.isShow = true
                                    } else {
                                        that.OpCustomersData.status = 1
                                        that.title = "新增保险费用"
                                        that.isShow = false
                                    }
                                }
                            })
                            break;
                        }
                    }

                }
            })

        },
        DiIdSelectChange() {
            var that = this;
            for (let index = 0; index < that.delegationInfoList.length; index++) {
                if (that.delegationInfoList[index].id == that.OpCustomersData.diId) {
                    that.delegationInfo = that.delegationInfoList[index];

                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                    var url = "/api/Groups/CustomersInitialize"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            portType: 1,
                            diId: that.OpCustomersData.diId
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.insuranceCostList = res.data.data.insuranceCost;//保险类型下拉框
                            that.OpCustomersData.iid = that.insuranceCostList[0].id;
                            that.Balance = that.insuranceCostList[0].balance;
                            that.currencyList = res.data.data.currencyList;//币种下拉框
                            if (that.currencyList.length != 0) {
                                that.OpCustomersData.currency = that.currencyList[0].currencyId
                            }
                            that.bankCard = res.data.data.bankCard;//卡类型下拉框
                            that.payment = res.data.data.payment;//支付方式下拉框
                        }
                        that.QueryClient();
                        that.OpCustomersData.clientName = [];
                    })
                    break;
                }
            }
            that.$nextTick(() => {
                that.$refs.OpCustomersData.clearValidate();
            })
        },
        iidChane(row) {
            for (let index = 0; index < this.insuranceCostList.length; index++) {
                if (this.insuranceCostList[index].id == row) {
                    this.Balance = this.insuranceCostList[index].balance;
                    break;
                }
            }

        },
        payChange() {
            this.OpCustomersData.ctdId = '';
            this.OpCustomersData.bankNo = '';
            this.OpCustomersData.cardholderName = '';
            this.OpCustomersData.companyBankNo = '';
            this.OpCustomersData.otherBankName = '';
            this.OpCustomersData.otherSideNo = '';
            this.OpCustomersData.otherSideName = '';
            this.OpCustomersData.cRemark = '';
            if (this.OpCustomersData.payDId == 73) {
                this.OpCustomersDataRules.companyBankNo = [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.ctdId = []
            } else if (this.OpCustomersData.payDId == 72) {
                this.OpCustomersDataRules.ctdId = [{ required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.companyBankNo = []
                this.OpCustomersDataRules.otherBankName = []
                this.OpCustomersDataRules.otherSideNo = []
                this.OpCustomersDataRules.otherSideName = []
            } else if (this.OpCustomersData.payDId == 83) {
                this.OpCustomersDataRules.companyBankNo = []
                this.OpCustomersDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
                this.OpCustomersDataRules.ctdId = []
            } else {
                this.OpCustomersDataRules.companyBankNo = []
                this.OpCustomersDataRules.otherBankName = []
                this.OpCustomersDataRules.otherSideNo = []
                this.OpCustomersDataRules.otherSideName = []
                this.OpCustomersDataRules.ctdId = []
            }
            this.$nextTick(() => {
                this.$refs.OpCustomersData.clearValidate();
            })
        },
        ctdChange(id) {
            this.OpCustomersData.cardholderName = 'Zhang Hailin';
            for (var i = 0; i < this.bankCard.length; i++) {
                if (this.bankCard[i].id == parseInt(id)) {
                    this.OpCustomersData.bankNo = this.bankCard[i].remark
                }
            }
        },
        //根据Id获取单挑数据及C表数据
        QueryCustomersById() {
            var url = "/api/Groups/CustomersById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: that.OpCustomersData.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var CreditCardPayment = res.data.data.creditCard;
                    var Customers = res.data.data.customers;
                    that.IsAuditGM = CreditCardPayment.isAuditGM;
                    that.OpCustomersData.iid = Customers.iid
                    for (let index = 0; index < that.insuranceCostList.length; index++) {
                        if (that.insuranceCostList[index].id == that.OpCustomersData.iid) {
                            that.Balance = that.insuranceCostList[index].balance;
                            break;
                        }
                    }
                    var respClientName = Customers.clientName
                    that.OpCustomersData.clientName = that.ClientFormat(respClientName);

                    that.OpCustomersData.insuranceCosts = Customers.insuranceCosts
                    that.OpCustomersData.currency = Customers.currency
                    that.OpCustomersData.attachment = Customers.attachment
                    that.uploadFiles = []
                    if (that.OpCustomersData.attachment != null && that.OpCustomersData.attachment != undefined && that.OpCustomersData.attachment != "") {
                        that.uploadFiles.push({
                            name: that.OpCustomersData.attachment,
                            url: 'http://132.232.92.186:24/Office/GrpFile/保险费用文件上传/',
                        })
                    }
                    that.OpCustomersData.remark = Customers.remark
                    that.OpCustomersData.payDId = CreditCardPayment.payDId;
                    that.OpCustomersData.consumptionPatterns = CreditCardPayment.consumptionPatterns;
                    that.OpCustomersData.consumptionDate = CreditCardPayment.consumptionDate;
                    that.OpCustomersData.ctdId = CreditCardPayment.ctdId;
                    that.OpCustomersData.bankNo = CreditCardPayment.bankNo;
                    that.OpCustomersData.cardholderName = CreditCardPayment.cardholderName;
                    that.OpCustomersData.companyBankNo = CreditCardPayment.companyBankNo
                    that.OpCustomersData.otherBankName = CreditCardPayment.otherBankName
                    that.OpCustomersData.otherSideNo = CreditCardPayment.otherSideNo
                    that.OpCustomersData.otherSideName = CreditCardPayment.otherSideName
                    that.OpCustomersData.payee = CreditCardPayment.payee;
                    that.OpCustomersData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer;
                    that.OpCustomersData.cRemark = CreditCardPayment.remark;
                }
            })
        },
        addBtn() {
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (this.OpCustomersData.diId == null || this.OpCustomersData.diId == undefined || this.OpCustomersData.diId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                } else {
                    const that = this;
                    that.$refs.OpCustomersData.validate((valid) => {
                        if (valid) {
                            {

                                that.OpCustomersData.createUserId = that.userId;
                                if (that.OpCustomersData.ctdId == '') {
                                    that.OpCustomersData.ctdId = 0
                                }

                                var url = "/api/Groups/OpCustomers"
                                that.OpCustomersData.clientName = that.ClientFormat(that.OpCustomersData.clientName);//处理数组

                                that.$axios({
                                    method: 'post',
                                    url: url,
                                    headers: {
                                        Authorization: 'Bearer ' + that.token
                                    },
                                    data: that.OpCustomersData
                                }).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/Customers",
                                                query: {
                                                    diId: that.OpCustomersData.diId
                                                }
                                            })
                                        }, 500);
                                    } else {
                                        that.$message.error(res.data.msg);
                                    }
                                }).finally(() => {
                                    that.OpCustomersData.clientName = that.ClientFormat(that.OpCustomersData.clientName);
                                    console.log('run finally code');
                                });
                            }

                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },

        /* 文件上传相关

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

                        }
                    })
                }
                //that.ctdId = that.ctdIdPay;
                that.OpCustomersData.createUserId = that.userId;
                that.OpCustomersData.attachment = that.projectName;
                if (that.OpCustomersData.ctdId == '') {
                    that.OpCustomersData.ctdId = 0
                }

                var url = "/api/Groups/OpCustomers"
                that.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: that.OpCustomersData
                }).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/Customers",
                                query: {
                                    diId: that.OpCustomersData.diId
                                }
                            })
                        }, 3000);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })

            } else {
                if (that.DelfileName != null && that.DelfileName != "" && that.DelfileName != undefined) {
                    that.$axios({
                        method: 'post',
                        url: "/api/Groups/DelFile",
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            fileName: that.DelfileName,
                            id: that.OpCustomersData.id
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {

                        }
                    })
                }
                that.OpCustomersData.createUserId = that.userId;
                if (that.OpCustomersData.ctdId == '') {
                    that.OpCustomersData.ctdId = 0
                }

                var url = "/api/Groups/OpCustomers"
                that.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: that.OpCustomersData
                }).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/Customers",
                                query: {
                                    diId: that.OpCustomersData.diId
                                }
                            })
                        }, 3000);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            }

        },

        beforeRemove(file, fileList) {

            console.log(file.name)
            let id1 = this.uploadFiles.findIndex(item => {
                if (item.name == file.name) {
                    return true
                }
            })
            this.uploadFiles.splice(id1, 1)
            this.projectName = ""
            this.DelfileName = file.name
        },
        onChange(file, fileList) {

            this.projectName = file.name
        },
        */

        EscAdd() {
            this.$router.push({
                path: "/home/Customers",
                query: {
                    diId: this.OpCustomersData.diId
                }
            })
        },
        //加载团组客户名单
        QueryClient() {
            var url = "/api/Groups/QueryClientInfoByDIID"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    diid: this.OpCustomersData.diId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    //客户名单
                    console.log(res.data.data);
                    that.clientNameId = res.data.data;
                }
            })
        },
        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;


        }
    },

    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.OpCustomersData.diId = parseInt(this.$route.query.DiId)
        this.QueryClient();
        this.initializeSelect();
        this.OpCustomersData.id = this.$route.query.id
    },
    computed: {
        //客户名单属性
        fliterClient() {
            var arr = [];
            if (this.clientNameId.length < 1) {
                return [];
            }

            this.clientNameId.forEach(element => {

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

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

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

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

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

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.opcustomers-box .el-select {
    width: 100%;
}

.opcustomers-box .el-date-editor .el-input {
    width: 100%;
}

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

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