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"> 
                <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>
                    <div slot="tip" class="el-upload__tip">只能识别jpg/png文件</div>
                </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" 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="手机号" prop="phone">
                        <el-input size="medium" type="text"
                            v-model.trim="pickupinif.phone"></el-input>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="性别" prop="gender">
                        <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="身份证" prop="identity">
                        <el-input size="medium" type="text"
                            v-model.trim="pickupinif.identity"></el-input>
                    </el-form-item>
                    <el-form-item style="width:395px ;" label="出生日期" prop="birth">
                        <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>
                </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(){
            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,
                }
            }).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,
                                    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
                        console.log(10-dataarrnew.length)
                        var len = 10 - dataarrnew.length
                        console.log(len)
                        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:'',
                                }
                            )
                        }
                        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: 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>