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

<template>
    <div v-loading.fullscreen.lock="fullscreenLoading">
        <div class="pickuplist-all">
            <div class="pickuplist-head">
                <div class="pickuplist-head-li">
                    <label>团组名称:</label>
                    <el-select style="width:220px" @change="delegationSelectChange" v-model="diId" clearable filterable
                        placeholder="请选择">
                        <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.groupName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="pickuplist-info">
                    <div class="pickuplist-info-li">
                        <label>团 号：</label>
                        <span>{{ GroupInfo.tourCode }}</span>
                    </div>
                    <div class="pickuplist-info-li">
                        <label>客 户：</label>
                        <span>{{ GroupInfo.clientName }}</span>
                    </div>
                    <div class="pickuplist-info-li">
                        <label>出访国家：</label>
                        <span>{{ GroupInfo.visitCountry | filter_city }}</span>
                    </div>
                    <div class="pickuplist-info-li">
                        <label>起止日期：</label>
                        <span>{{ GroupInfo.visitStartDate | filter_time }}~{{ GroupInfo.visitEndDate | filter_time }}</span>
                    </div>
                    <div class="pickuplist-info-li">
                        <label>天数/人数：</label>
                        <span>{{ GroupInfo.visitDays }}/{{ GroupInfo.visitPNumber }}</span>
                    </div>
                </div>
            </div>
            <div class="pickuplist-Upload-box">
                <div slot="tip" class="el-upload__tip">只能识别jpg/png文件&nbsp;&nbsp;&nbsp;</div>
                <el-upload class="upload-demo" ref="upload" action="" :on-change="httpRequest" :on-remove="httpRequest"
                    accept=".png, .jpg, .jpeg" :limit="1" :file-list="fileList" :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>
            </div>
            <div class="pickuplist-table">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="55">
                    </el-table-column>
                    <el-table-column prop="lastName" label="姓" width="100">
                    </el-table-column>
                    <el-table-column prop="firstName" label="名" width="100">
                    </el-table-column>
                    <el-table-column prop="companyFullName" label="单位">
                    </el-table-column>
                    <el-table-column prop="job" label="职务">
                    </el-table-column>
                    <el-table-column prop="idCardNo" label="身份证" width="180">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="55">
                        <template slot-scope="scope">
                            {{ scope.row.sex == 0 ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="PostTourClientListDetails(scope.$index, scope.row)"
                                type="text" size="small">
                                详细
                            </el-button>
                            <el-button @click.native.prevent="PostTourClientListDel(scope.$index, scope.row)"
                                type="text" size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pickuplist-btn">
                <div class="pickuplist-btn-lable">
                    详 情
                </div>
                <div>
                    <el-button slot="trigger" @click="Exportlist(1)" type="primary">导出团组名单(英文)</el-button>
                    <el-button slot="trigger" @click="Exportlist(0)" type="primary">导出团组名单</el-button>
                    <el-button type="primary" @click="dialogTableVisible = true">添加多个资料</el-button>
                    <el-button type="primary" @click="addhandoff">新增切换</el-button>
                    <el-button type="primary" @click="preservation('pickupinif')">保存设置</el-button>
                </div>
            </div>
            <el-form :model="pickupinif" :rules="pickupinifRules" ref="pickupinif" label-width="110px"
                class="demo-OpHotelReservationsData pickuplist-form">
                <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
                    <div style="width:395px ;display: flex;">
                        <el-form-item style="width:50% ;" label="姓" prop="surname">
                            <el-autocomplete popper-class="el-autocomplete-suggestion" :popper-append-to-body="false"
                                class="inline-input" size="medium" v-model.trim="pickupinif.surname"
                                :fetch-suggestions="querySearch" @select="PromptChecked"
                                @input="InputValue"></el-autocomplete>
                        </el-form-item>
                        <el-form-item label-width="50px" style="width:50% ;" label="名" prop="name">
                            <el-input @input="InputValue" size="medium" type="text"
                                v-model.trim="pickupinif.name"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item style="width:395px ;" label="拼音" prop="Pinyin">
                        <el-input size="medium" type="text" v-model.trim="pickupinif.Pinyin"></el-input>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="单位" prop="flats">
                        <el-autocomplete style="width:100% ;" popper-class="el-autocomplete-suggestion"
                            :popper-append-to-body="false" class="inline-input" size="medium"
                            v-model.trim="pickupinif.flats" :fetch-suggestions="querySearchdw"></el-autocomplete>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="职务" prop="office">
                        <el-input size="medium" type="text" v-model.trim="pickupinif.office"></el-input>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="性别">
                        <el-radio-group v-model="pickupinif.gender">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="出生日期">
                        <el-date-picker size="medium" type="date" placeholder="选择出生日期" v-model.trim="pickupinif.birth"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="舱位类型" prop="Accommodation">
                        <el-select style="width:100%" v-model="pickupinif.Accommodation" clearable filterable
                            placeholder="请选择">
                            <el-option v-for="item in cangweiType" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="手机号">
                        <el-input size="medium" type="text" v-model.trim="pickupinif.phone"></el-input>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="身份证">
                        <el-input size="medium" type="text" v-model.trim="pickupinif.identity"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="舱位备注">
                    <el-input :rows="2" type="textarea" v-model="pickupinif.ClassRemarks"></el-input>
                </el-form-item>
                <el-form-item label="房间备注">
                    <el-input :rows="2" type="textarea" v-model="pickupinif.Roomtype"></el-input>
                </el-form-item>
                <el-form-item label="餐食备注">
                    <el-input :rows="2" type="textarea" v-model="pickupinif.Mealnotes"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input :rows="2" type="textarea" v-model="pickupinif.remark"></el-input>
                </el-form-item>
            </el-form>
            <el-dialog class="dutzl" width="1242px" title="添加多条资料" :visible.sync="dialogTableVisible"
                :before-close="closeExpertFormDialog">
                <div class="dialog-hade">
                    <label>PS:自动填写补全功能可能有误差请仔细核实，补全或修改(没有可用‘-’或‘暂无’代替)</label>
                    <el-button @click="manysave" size="mini" type="primary">保 存</el-button>
                </div>
                <el-table :border="true" :data="tourClientListInfos">
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column property="date" label="姓" width="100">
                        <template slot-scope="scope">
                            <el-autocomplete popper-class="el-autocomplete-suggestion" :popper-append-to-body="false"
                                class="inline-input" size="mini" v-model.trim="scope.row.lastName"
                                :fetch-suggestions="querySearch" @select="DTPromptChecked(scope.row)"></el-autocomplete>
                        </template>
                    </el-table-column>
                    <el-table-column label="名" width="100">
                        <template slot-scope="scope">
                            <el-input size="mini" type="text" v-model.trim="scope.row.firstName">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="单位" width="150">
                        <template slot-scope="scope">
                            <el-autocomplete style="width:100% ;" popper-class="el-autocomplete-suggestion"
                                :popper-append-to-body="false" class="inline-input" size="mini"
                                v-model.trim="scope.row.companyFullName"
                                :fetch-suggestions="querySearchdw"></el-autocomplete>
                        </template>
                    </el-table-column>
                    <el-table-column label="职务" width="150">
                        <template slot-scope="scope">
                            <el-input size="mini" type="text" v-model.trim="scope.row.job">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="身份证" width="170">
                        <template slot-scope="scope">
                            <el-input size="mini" type="text" v-model.trim="scope.row.idCardNo">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号码" width="115">
                        <template slot-scope="scope">
                            <el-input size="mini" type="text" v-model.trim="scope.row.phone">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="性别" width="150">
                        <template slot-scope="scope">
                            <el-radio-group size="mini" v-model="scope.row.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column label="出生日期" width="100">
                        <template slot-scope="scope">
                            <el-date-picker :clearable="false" size="mini" type="date" placeholder="出生日期"
                                v-model.trim="scope.row.birthDay" style="width: 100%;">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column label="舱位类型" width="115">
                        <template slot-scope="scope">
                            <el-select size="mini" style="width:100%" v-model="scope.row.shippingSpaceTypeId" clearable
                                filterable placeholder="请选择">
                                <el-option v-for="item in cangweiType" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { pinyin } from 'pinyin-pro';
import { cl, el } from '@fullcalendar/core/internal-common';
export default {
    data() {
        return {
            dialogTableVisible: false,
            tourClientListInfos: [
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
            ],
            token: '',
            pageId: '',
            userId: '',
            diId: '',
            delegationInfoList: [],
            tableData: [],
            GroupInfo: {},
            cangweiType: [],//舱位类型
            restaurants: [],//姓数组
            restaurantss: [],
            units: [],
            unit: [],//danwei数组
            id: 0,
            //必填参数
            pickupinif: {
                surname: '',//姓
                name: '',//名
                Pinyin: '',//拼音
                flats: '',//单位
                office: '',//职务
                phone: '',//手机号
                gender: '男',//性别
                identity: '',//身份证
                birth: '',//出生日期
                Accommodation: '',//舱位类型
                ClassRemarks: '',//舱位备注
                Roomtype: '',//房间类型
                Mealnotes: '',//餐食备注
                remark: '',//备注
            },
            pickupinifRules: {
                surname: [
                    { required: true, message: '请输入姓', trigger: ['blur', 'change'] }
                ],
                name: [
                    { required: true, message: '请输入名', trigger: ['blur', 'change'] }
                ],
                Pinyin: [
                    { required: true, message: '请输入拼音', trigger: ['blur', 'change'] }
                ],
                flats: [
                    { required: true, message: '请选择单位', trigger: ['blur', 'change'] }
                ],
                office: [
                    { required: true, message: '请输入职务', trigger: ['blur', 'change'] }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: ['blur', 'change'] }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: ['blur', 'change'] }
                ],
                identity: [
                    { required: true, message: '请输入身份证', trigger: ['blur', 'change'] }
                ],
                birth: [
                    { required: true, message: '请选择出生日期', trigger: ['blur', 'change'] }
                ],
                Accommodation: [
                    { required: true, message: '请选择舱位类型', trigger: ['blur', 'change'] }
                ],
            },
            fileList: [],
            upLoadFile: [],
            fullscreenLoading: false,
            timeStamp: ''
        }
    },
    methods: {
        //姓提示
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        //danwei提示
        querySearchdw(queryString, cb) {
            var unit = this.unit;
            var results = queryString ? unit.filter(this.createFilter(queryString)) : unit;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return restaurant.value.replace("  ", "").toLowerCase().match(queryString.toLowerCase());
            };
        },
        delegationSelectChange() {
            this.PostShareGroupInfo()
            this.addhandoff()
        },
        //清空
        clearedlist() {
            this.tourClientListInfos = [
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
                {
                    lastName: "",
                    firstName: "",
                    pinyin: '',
                    sex: '男',
                    companyFullName: "",
                    job: "",
                    idCardNo: "",
                    phone: "",
                    birthDay: "",
                    shippingSpaceTypeId: 460,
                    shippingSpaceSpecialNeeds: '',
                    hotelSpecialNeeds: '',
                    mealSpecialNeeds: '',
                    remark: '',
                },
            ]
        },
        //获取团组
        GetGroupNameList() {
            var url = "/api/Business/GetGroupNameList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.delegationInfoList = res.data.data;
                    that.diId = that.delegationInfoList[0].id;
                    that.PostShareGroupInfo();
                }
            }).catch(function (error) {
                that.$message.error("获取团组失败");
            });
        },
        //获取团组详情
        PostShareGroupInfo() {
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    id: that.diId
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.GroupInfo = res.data.data
                    that.PostTourClientListByDiId()
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取团组详情失败！");
            });
        },
        //获取客户table
        PostTourClientListByDiId() {
            var url = "/api/Groups/PostTourClientListByDiId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    diId: that.diId,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.tableData = res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取接团名单失败！");
            });
        },
        //获取基础数据
        PostTourClientListBasicDataInit() {
            this.fullscreenLoading = true;
            var url = "/api/Groups/PostTourClientListBasicDataInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.restaurantss = res.data.data.clientData;
                    that.cangweiType = res.data.data.shippingSpaceTypeData;
                    that.pickupinif.Accommodation = that.cangweiType[0].id;
                    that.units = res.data.data.clientCompanyData;
                    that.restaurants = that.restaurantss.map((terminal) => {
                        return {
                            value: terminal.lastName + '  ' + terminal.firstName + '  ' + terminal.pinyin + '  ' + terminal.companyFullName + '  ' + terminal.job + '  ' + terminal.phone + '  ' + (terminal.sex == 0 ? '男' : '女') + '  ' + terminal.idCardNo + '  ' + (terminal.birthDay).split(' ')[0],
                        };
                    });
                    that.unit = that.units.map((terminal) => {
                        return {
                            value: terminal.companyFullName,
                        };
                    });
                    that.fullscreenLoading = false;
                }
            }).catch(function (error) {
                that.fullscreenLoading = false;
                that.$message.error("获取基础数据失败！");
            });
        },
        //提示选中
        PromptChecked() {
            console.log(this.pickupinif.surname.split(' '))
            var inif = this.pickupinif.surname.split('  ');
            this.pickupinif.surname = inif[0];
            this.pickupinif.name = inif[1];
            this.pickupinif.Pinyin = inif[2];
            if (this.pickupinif.Pinyin == '') {
                let surname = '';
                let surname1 = pinyin(this.pickupinif.surname, { toneType: 'none' }).toUpperCase();
                let surname2 = pinyin(this.pickupinif.name, { toneType: 'none' }).toUpperCase();
                surname = surname1 + '/' + surname2;
                this.pickupinif.Pinyin = surname;
                console.log(surname)
            }
            this.pickupinif.flats = inif[3];
            this.pickupinif.office = inif[4];
            this.pickupinif.phone = inif[5];
            this.pickupinif.gender = inif[6];
            this.pickupinif.identity = inif[7];
            this.pickupinif.birth = inif[8];

        },
        //添加多条提示选中
        DTPromptChecked(val) {
            console.log(val)
            var inif = val.lastName.split('  ');
            console.log(inif)
            val.lastName = inif[0] ? inif[0] : ''
            val.firstName = inif[1] ? inif[1] : ''
            val.companyFullName = inif[3] ? inif[3] : ''
            val.job = inif[4] ? inif[4] : ''
            val.idCardNo = inif[7] ? inif[7] : ''
            val.phone = inif[5] ? inif[5] : ''
            val.sex = inif[6] ? inif[6] : ''
            val.birthDay = inif[8] ? inif[8] : ''
        },
        //姓值改变
        ChangesValue() {
            console.log(this.pickupinif.surname)
            this.pickupinif.name = '';
            this.pickupinif.Pinyin = '';
            this.pickupinif.flats = '';
            this.pickupinif.office = '';
            this.pickupinif.phone = '';
            this.pickupinif.gender = '';
            this.pickupinif.identity = '';
            this.pickupinif.birth = '';
            if (this.$refs.pickupinif) {
                this.$nextTick(() => {
                    this.$refs['pickupinif'].clearValidate();
                })
            }

        },
        //转换日期
        transferdate(val) {
            var today = new Date(val);

            var DD = String(today.getDate()).padStart(2, '0'); // 获取日
            var MM = String(today.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
            var yyyy = today.getFullYear(); // 获取年

            return yyyy + '-' + MM + '-' + DD
        },
        //输入
        InputValue() {
            let surname = '';
            let surname1 = pinyin(this.pickupinif.surname, { toneType: 'none' }).toUpperCase();
            let surname2 = pinyin(this.pickupinif.name, { toneType: 'none' }).toUpperCase();
            surname = surname1 + '/' + surname2;
            this.pickupinif.Pinyin = surname;
            console.log(surname)
        },
        //查询详情
        PostTourClientListDetails(index, row) {
            this.id = row.id;
            var url = "/api/Groups/PostTourClientListDetails"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    id: row.id,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.pickupinif = {
                        surname: res.data.data.lastName,//姓
                        name: res.data.data.firstName,//名
                        flats: res.data.data.companyFullName,//单位
                        office: res.data.data.job,//职务
                        phone: res.data.data.phone,//手机号
                        gender: res.data.data.sex == 0 ? '男' : '女',//性别
                        identity: res.data.data.idCardNo,//身份证
                        birth: res.data.data.birthDay,//出生日期
                        Accommodation: res.data.data.shippingSpaceTypeId,//舱位类型
                        ClassRemarks: res.data.data.shippingSpaceSpecialNeeds,//舱位备注
                        Roomtype: res.data.data.hotelSpecialNeeds,//房间类型
                        Mealnotes: res.data.data.mealSpecialNeeds,//餐食备注
                        remark: res.data.data.remark,//备注
                    };
                    that.pickupinif.Pinyin = res.data.data.pinyin;//拼音
                    if (that.pickupinif.Pinyin == '') {
                        let surname = '';
                        let surname1 = pinyin(that.pickupinif.surname, { toneType: 'none' }).toUpperCase();
                        let surname2 = pinyin(that.pickupinif.name, { toneType: 'none' }).toUpperCase();
                        surname = surname1 + '/' + surname2;
                        that.pickupinif.Pinyin = surname;
                    }
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("查询详情失败！");
            });
        },
        //保存
        preservation(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.PostTourClientListAddOrEdit()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //保存修改api
        PostTourClientListAddOrEdit() {
            this.fullscreenLoading = true;
            var url = "/api/Groups/PostTourClientListAddOrEdit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    diId: that.diId,
                    id: that.id,
                    lastName: that.pickupinif.surname,//姓
                    firstName: that.pickupinif.name,//名
                    pinyin: that.pickupinif.Pinyin,//姓名拼音
                    sex: that.pickupinif.gender == '男' ? 0 : 1,//性别 0 男1 女 其他值 未设置
                    phone: that.pickupinif.phone,//手机号
                    companyFullName: that.pickupinif.flats,//公司名全称
                    job: that.pickupinif.office,//职位
                    idCardNo: that.pickupinif.identity,//身份证No
                    // tel:'',//...
                    birthDay: that.pickupinif.birth,//生日
                    shippingSpaceTypeId: that.pickupinif.Accommodation,//舱位类型(数据类型表Id)
                    shippingSpaceSpecialNeeds: that.pickupinif.ClassRemarks,//舱位特殊需求
                    hotelSpecialNeeds: that.pickupinif.Roomtype,//酒店特殊需求
                    mealSpecialNeeds: that.pickupinif.Mealnotes,//餐食特殊需求
                    remark: that.pickupinif.remark,//备注
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration: '3000'
                    });
                    that.PostTourClientListByDiId();
                    setTimeout(() => {
                        that.addhandoff();
                        that.loading = false;
                    }, 500);
                    that.fullscreenLoading = false;
                } else {
                    that.$message.error(res.data.msg);
                    that.fullscreenLoading = false;

                }
            }).catch(function (error) {
                that.fullscreenLoading = false;
                that.$message.error("保存或修改失败！");
            });
        },
        //新增切换
        addhandoff() {
            this.id = 0;
            this.pickupinif = {
                surname: '',//姓
                name: '',//名
                Pinyin: '',//拼音
                flats: '',//单位
                office: '',//职务
                phone: '',//手机号
                gender: '男',//性别
                identity: '',//身份证
                birth: '',//出生日期
                Accommodation: '',//舱位类型
                ClassRemarks: '',//舱位备注
                Roomtype: '',//房间类型
                Mealnotes: '',//餐食备注
                remark: '',//备注
            };
            if (this.$refs.pickupinif) {
                this.$nextTick(() => {
                    this.$refs['pickupinif'].clearValidate();
                })
            }
            this.PostTourClientListBasicDataInit()
        },
        //清空表单
        closeExpertFormDialog(done) {
            this.clearedlist()
            done();//done 用于关闭 Dialog
        },
        //删除
        PostTourClientListDel(index, row) {
            this.$confirm('此操作将删除此条数据，是否确认', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Groups/PostTourClientListDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        portType: 1,
                        userId: that.userId,
                        pageId: that.pageId,
                        id: row.id,
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.data.code == 200) {
                        that.$message({
                            type: 'success',
                            message: res.data.msg,
                            duration: '3000'
                        });
                        that.PostTourClientListByDiId();
                    } else {
                        that.$message.error(res.data.msg);
                    }
                }).catch(function (error) {
                    that.$message.error("删除失败！");
                });
            }).catch(() => {

            });
        },
        //多条保存
        manysave() {
            var tourClientList = [];
            console.log(this.tourClientListInfos)
            for (var i = 0; i < this.tourClientListInfos.length; i++) {
                if (this.tourClientListInfos[i].lastName != "" && this.tourClientListInfos[i].firstName != "") {
                    tourClientList.push(this.tourClientListInfos[i])
                }
            }
            tourClientList = JSON.parse(JSON.stringify(tourClientList))
            for (var x = 0; x < tourClientList.length; x++) {
                tourClientList[x].sex = tourClientList[x].sex == '男' ? 0 : 1
            }
            if (tourClientList) {
                this.PostTourClientListAddMultiple(tourClientList)
            }
            console.log(tourClientList)
        },
        //多存api
        PostTourClientListAddMultiple(listinif) {
            var url = "/api/Groups/PostTourClientListAddMultiple"
            var that = this
            var data = {
                portType: 1,
                userId: that.userId,
                pageId: that.pageId,
                diId: that.diId,
                tourClientListInfos: listinif
            }
            console.log(JSON.stringify(data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    diId: that.diId,
                    tourClientListInfos: listinif
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration: '3000'
                    });
                    that.PostTourClientListByDiId();
                    that.clearedlist();
                    that.dialogTableVisible = false;
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("保存失败！");
            });
        },
        //导出团组名单
        Exportlist(val) {
            var url = "/api/Groups/PostTourClientListDownloadFile"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    diId: that.diId,
                    language: val
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    window.location.href = res.data.data
                    // that.$message({
                    //     type: 'success',
                    //     message: res.data.msg,
                    //     duration:'3000'
                    // });
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("下载失败！");
            });
        },
        async httpRequest(file, fileList) {
            this.upLoadFile = []
            for (let i in fileList) {
                this.upLoadFile[i] = await this.getBase64(fileList[i].raw)
            }
            console.log('上传文件列表', this.upLoadFile)
        },
        // 转base64码
        getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader()
                let fileResult = ''
                reader.readAsDataURL(file)
                // 开始转
                reader.onload = () => {
                    fileResult = reader.result
                }
                // 转 失败
                reader.onerror = error => {
                    reject(error)
                }
                // 转 结束
                reader.onloadend = () => {
                    resolve(fileResult)
                }
            })
        },
        submitUpload() {
            console.log(this.upLoadFile)
            if (this.upLoadFile.length == 0) {
                this.$message.error("未选择图片！");
            } else {
                this.fullscreenLoading = true;
                var url = "/api/BaiduOCR/ClientOCR"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        base64img: that.upLoadFile[0]
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.data.code == 200) {
                        that.fullscreenLoading = false;
                        var dataarr = res.data.data;
                        var dataarrnew = [];
                        for (var i = 0; i < dataarr.length; i++) {
                            dataarrnew.push(
                                {
                                    lastName: dataarr[i].lastName,
                                    firstName: dataarr[i].firstName,
                                    pinyin: '',
                                    sex: dataarr[i].sex == 0 ? '男' : '女',
                                    companyFullName: dataarr[i].companyFullName,
                                    job: dataarr[i].job,
                                    idCardNo: dataarr[i].iDcard,
                                    phone: dataarr[i].phone,
                                    birthDay: dataarr[i].birthday == '-' ? '' : dataarr[i].birthday,
                                    shippingSpaceTypeId: dataarr[i].berth,
                                    shippingSpaceSpecialNeeds: '',
                                    hotelSpecialNeeds: '',
                                    mealSpecialNeeds: '',
                                    remark: '',
                                }
                            )
                            // that.tourClientListInfos[i]=dataarrnew[i]
                        }
                        that.tourClientListInfos = dataarrnew
                        var len = 10 - dataarrnew.length
                        for (var jk = 0; jk < len; jk++) {
                            that.tourClientListInfos.push(
                                {
                                    lastName: '',
                                    firstName: "",
                                    pinyin: '',
                                    sex: '男',
                                    companyFullName: "",
                                    job: "",
                                    idCardNo: "",
                                    phone: "",
                                    birthDay: "",
                                    shippingSpaceTypeId: 460,
                                    shippingSpaceSpecialNeeds: '',
                                    hotelSpecialNeeds: '',
                                    mealSpecialNeeds: '',
                                    remark: '',
                                }
                            )
                        }
                        console.log(that.tourClientListInfos)
                        that.$message({
                            type: 'success',
                            message: res.data.msg,
                            duration: '3000'
                        });
                        // setTimeout(function(){ that.dialogTableVisible=true; }, 3000);　
                        that.dialogTableVisible = true;
                    } else {
                        that.fullscreenLoading = false;
                        that.$message.error(res.data.msg);
                    }
                }).catch(function (error) {
                    that.fullscreenLoading = false;
                    that.$message.error("导入失败！");
                });

            }
        },
    },
    filters: {
        filter_city(value) {
            if (value) {
                return value.replaceAll('|', '、')
            }
        },
        filter_time(value) {
            if (value) {
                return value.split(" ")[0]
            }
        }
    },
    mounted() {
        console.log(this.tourClientListInfos)
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.pageId = Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.GetGroupNameList();
        this.PostTourClientListBasicDataInit()
    }
}
</script>
<style>
.pickuplist-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
    min-width: 900px;
}

.pickuplist-all .block {
    margin-top: 10px;
}

.pickuplist-head-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.pickuplist-head {
    display: flex;
    justify-content: space-between;
}

.pickuplist-info {
    display: flex;
    margin-top: 10px;
}

.pickuplist-info .pickuplist-info-li:last-child {
    margin-right: 0;
}

.pickuplist-info-li {
    margin-right: 30px;
}

.pickuplist-info-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.pickuplist-info-li span {
    color: #606266;
    font-size: 14px;
}

.pickuplist-Upload-box {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

.pickuplist-Upload-box .upload-demo {
    display: flex;
    align-items: center;
}

.pickuplist-Upload-box .el-upload__tip {
    margin-top: 0px;
}

.pickuplist-Upload-box .el-upload-list__item:first-child {
    margin-top: 0px;
}

.pickuplist-table {
    margin-top: 20px;
}

.pickuplist-btn {
    margin-top: 30px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #C0C4CC;
}

.pickuplist-btn-lable {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.pickuplist-all .pickuplist-form {
    margin-top: 20px;
}

.pickuplist-all .el-autocomplete-suggestion {
    width: auto !important;
}

.dutzl .el-input__inner {
    padding: 0 5px;
}

.dutzl .el-date-editor .el-icon-date {
    display: none;
}

.dialog-hade {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dialog-hade label {
    color: red;
}

.dutzl .el-dialog__body {
    padding-top: 0;
}

.dutzl .el-dialog__title {
    font-size: 17px;
    font-weight: 600;
}

.dutzl .el-input--prefix .el-input__inner {
    padding-left: 5px;
    padding-right: 5px
}

.dutzl .el-table td.el-table__cell div,
.el-table th.el-table__cell>.cell {
    text-align: left;
}
</style>