oa-system/src/components/MCR/AssociatedInvitees.vue

<template>
    <div class="AssociatedInvitees-all">
        <el-dialog title="邀请方列表" :visible.sync="dialogTableVisible"  :close-on-click-modal="false">
            <el-table height="600px" :border="true" :data="invitingInfos">
                <el-table-column property="country" label="国家" width="150"></el-table-column>
                <el-table-column property="area" label="地区" width="200"></el-table-column>
                <el-table-column property="client" label="单位" width="200"></el-table-column>
                <el-table-column property="contact" label="名称" width="200"></el-table-column>
                <el-table-column property="job" label="职位"></el-table-column>
            </el-table>
        </el-dialog>
          
        <div class="AssociatedInvitees-search-head">
            <el-form label-width="75px">
                <el-form-item label="国家:">
                    <el-select @change="Countryswitching" clearable filterable v-model="nation" placeholder="请选择国家">
                        <el-option v-for="(item,index) in nationarr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form label-width="75px">
                <el-form-item label="地区:">
                    <el-select @change="Cityswitching" :disabled='disabled' clearable filterable v-model="district" placeholder="请选择地区">
                        <el-option v-for="(item,index) in districtarr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form label-width="75px">
                <el-form-item label="团组名:">
                    <el-select @change="Groupswitching" clearable filterable v-model="GroupName" placeholder="请选择团组名">
                        <el-option v-for="(item,index) in GroupNamearr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form label-width="90px">
                <el-form-item label="邀请方名称:">
                    <el-select @change="Invitingswitching" clearable filterable v-model="Invitingparty" placeholder="请选择邀请方名称">
                        <el-option v-for="(item,index) in Invitingpartyarr" :key="index" :label="item.unitName" :value="item.unitName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- <div style="margin-left: 20px;">
                <el-button type="primary">查询</el-button>
            </div> -->
        </div>
        <div class="AssociatedInvitees-table">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="teamName"
                label="团组名称">
                </el-table-column>
                <el-table-column
                prop="clientUnit"
                label="客户单位">
                </el-table-column>
                <el-table-column
                prop="clientName"
                label="客户名称"
                width="80">
                </el-table-column>
                <el-table-column
                prop="visitStartDate"
                :formatter="filteryear"
                label="开始时间"
                width="110">
                </el-table-column>
                <el-table-column
                prop="visitEndDate"
                :formatter="filteryears"
                label="结束时间"
                width="110">
                </el-table-column>
                <el-table-column
                prop="visitDays"
                label="天数"
                width="50">
                </el-table-column>
                <el-table-column
                prop="visitPNumber"
                label="人数"
                width="50">
                </el-table-column>
                <el-table-column
                prop="visitCountry"
                label="国家"
                width="150">
                </el-table-column>
                <el-table-column
                prop="jietuanOperator"
                label="接团人"
                width="80">
                </el-table-column>
                <el-table-column label="操作"  width="200">
                    <template slot-scope="scope">
                        <el-button
                        @click="clickInviting(scope.row)"
                        size="mini"
                        title="查看邀请方"
                        type="primary"
                        >查看邀请方</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[10, 12, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            pageIndex:1,
            pageSize:12,
            tableData: [] ,
            Invitingparty:'',
            Invitingpartyarr:[],
            GroupName:'',
            GroupNamearr:[],
            district:'',
            districtarr:[],
            nation:'',
            nationarr:[],
            totals:0,
            countiesId:0,
            disabled:true,
            invitingInfos:[],
            dialogTableVisible:false,
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize=val;
            this.PostGroupLinkInvitingPageList();
        },
        handleCurrentChange(val) {
            this.pageIndex=val;
            this.PostGroupLinkInvitingPageList();
        },
        filteryear(val){
            let gstime=val.visitStartDate.split(' ')[0]
            return gstime;
        },
        filteryears(val){
            let gstime=val.visitEndDate.split(' ')[0]
            return gstime;
        },
        //获取基础数据（邀请方）
        PostGroupLinkInvitingUnitNameInit() {
            var url = "/api/Groups/PostGroupLinkInvitingUnitNameInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    pageIndex:1,
                    pageSize:9999,
                    search:'',
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.Invitingpartyarr=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //获取基础数据（国家）
        PostGroupLinkInvitingCountryInit() {
            var url = "/api/Groups/PostGroupLinkInvitingCountryInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    pageIndex:1,
                    pageSize:9999,
                    search:'',
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.nationarr=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //获取基础数据（团组名称）
        PostGroupLinkInvitingGroupInit() {
            var url = "/api/Groups/PostGroupLinkInvitingGroupInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    pageIndex:1,
                    pageSize:9999,
                    search:'',
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.GroupNamearr=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //获取基础数据（地区）
        PostGroupLinkInvitingCityInit() {
            var url = "/api/Groups/PostGroupLinkInvitingCityInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    pageIndex:1,
                    pageSize:9999,
                    search:'',
                    countiesId:that.countiesId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.districtarr=res.data.data;
                    if(that.districtarr.length>0){
                        that.disabled=false
                    }
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //获取表格
        PostGroupLinkInvitingPageList() {
            var url = "/api/Groups/PostGroupLinkInvitingPageList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    pageIndex:that.pageIndex,
                    pageSize:that.pageSize,
                    counrty:that.nation,
                    area:that.district,
                    teamName:that.GroupName,
                    unitName:that.Invitingparty,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.totals=res.data.count;
                    that.tableData=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //国家切换
        Countryswitching(val){
            this.pageIndex=1;
            for(let i=0;i<this.nationarr.length;i++){
                if(this.nationarr[i].name==val){
                    this.countiesId=this.nationarr[i].id;
                }
            }
            this.PostGroupLinkInvitingCityInit();
            this.PostGroupLinkInvitingPageList();
        },
        //城市切换
        Cityswitching(){
            this.pageIndex=1;
            this.PostGroupLinkInvitingPageList();
        },
        //团组切换
        Groupswitching(){
            this.pageIndex=1;
            this.PostGroupLinkInvitingPageList();
        },
        //邀请方切换
        Invitingswitching(){
            this.pageIndex=1;
            this.PostGroupLinkInvitingPageList();
        },
        //查看邀请方
        clickInviting(val){
            console.log(val);
            this.invitingInfos=[];
            this.dialogTableVisible=true;
            this.invitingInfos=val.invitingInfos;
        }
    },
    mounted(){
        this.PostGroupLinkInvitingPageList();
        this.PostGroupLinkInvitingUnitNameInit();
        this.PostGroupLinkInvitingCountryInit();
        this.PostGroupLinkInvitingGroupInit();
    }
}
</script>
<style>
.AssociatedInvitees-all{
    background-color: #fff;

    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
    
}
.AssociatedInvitees-search-head{
    display: flex;
}
.AssociatedInvitees-search-head .el-form{
    width: 300px;
}
.AssociatedInvitees-search-head .el-select{
    width: 100%;
}
.AssociatedInvitees-table .block{
    text-align: center;
}
</style>