zky-admin/src/views/conference/Checker.vue

<style lang='scss'>
    .checker{
        .el-dialog__footer{
            text-align: right;
        }
    }
</style>
<template>
    <section class="checker">
        <p><span>会议管理></span>核销员管理</p>
        <div class="content">
            <div class="filter">
                <el-form size="small" label-width="70px" :inline="true"  label-position="left">
                    <el-form-item label="">
                             <el-select v-model="form.conference_id" clearable placeholder="请选择会议">
                                <el-option
                                    v-for="(item, index) in conference_list"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="">
                            <el-input  clearable placeholder="请输入姓名" v-model="form.user_name">
                            </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="getData" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right" >
                         <el-button @click="dialogVisible=true"  icon="el-icon-plud" type="primary">添加核销员</el-button>
                        <el-button plain icon="el-icon-download" type="primary">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </div>
             <el-table
                    class="table"
                    :data="list"
                    height='59vh'
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column
                    prop="name"  
                    label="核销员头像">
                    <template slot-scope="scope"><img width="100" :src="scope.row.user_avatar" alt=""></template>
                    </el-table-column>
                    <el-table-column
                    prop="user_name"  
                    label="核销员昵称">
                    </el-table-column>
                    <el-table-column
                    prop="conference_name"  
                    label="所属会议">
                    </el-table-column>
                    <el-table-column
                    prop="ctime"  
                    label="加入时间">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="核销详细">
                    </el-table-column>
                  
                    <el-table-column  
                    prop="zip"  width="100" fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row.id)" class="edit"  type="text" >解除核销员</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <Page  ref="pageButton" :current='form.page' :page_size='form.page_size' :total='total' @pageChange='gopage'/>
        </div>
        
        <el-dialog width="70%"
        title="添加核销员" :close-on-click-modal='false'
        :visible.sync="dialogVisible">
           <el-table
                    class="table"
                    :data="conference_list"
                    default-expand-all 
                    style="width: 100%">
                    <el-table-column
                    width="55">
                    <template slot-scope="scope"><el-radio v-model="check" :label="scope.row.id">&nbsp;</el-radio></template>
                    </el-table-column>
                    <el-table-column
                    prop="name"  
                    label="会议名称">
                    </el-table-column>
                    <el-table-column
                    prop="name"  
                    label="会议头像">
                        <template slot-scope="scope"><img width="100" :src="scope.row.img" alt=""></template>
                    </el-table-column>
                    <el-table-column
                    prop="ctime"  
                    label="创建时间">
                    </el-table-column>
           </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sure" size="small" type="primary">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog width="70%"
        title="备选核销员列表" :close-on-click-modal='false'
        :visible.sync="dialogVisible1">
         <el-input @change="getUser"  clearable placeholder="请输入姓名" v-model="name">
              <el-button @click="getUser"  slot="append" icon="el-icon-search"></el-button>
         </el-input>
           <el-table
                    class="table"
                    :data="user_list" height="400"
                    default-expand-all 
                    style="width: 100%;margin-top:10px;">
                    <el-table-column
                    width="55">
                    <template slot-scope="scope"><el-radio v-model="check1" :label="scope.row.id">&nbsp;</el-radio></template>
                    </el-table-column>
                    <el-table-column
                    prop="nickname"  
                    label="用户昵称">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="用户头像">
                    <template slot-scope="scope"><img width="100" :src="scope.row.avatar" alt=""></template>
                    </el-table-column>
           </el-table>
           <span slot="footer" class="dialog-footer">
               <el-button @click="dialogVisible1=false" size="small">返回</el-button>
                <el-button @click="add" size="small" type="primary">确认选择</el-button>
            </span>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
    data(){
        return{
            form:{},
            list:[{}],
            dialogVisible:false,
            dialogVisible1:false,
            conference_list:[],
            user_list:[],
            loading:false,
            total:0,
            check:'',
            check1:'',
            name:''
        }
    },
    methods:{
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        add(){
            this.$api.addVerifier({conference_id:this.check,user_id:this.check1}).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        this.dialogVisible=false;
                        this.dialogVisible1=false;
                        this.getData();
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        })
                    }
            })
        },
        del(id){
                this.$confirm('确定解除', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteVerifier({id:id}).then((res)=>{
                        if(res.data.code==0){
                            this.$message({
                                message: '解除成功',
                                type: 'success'
                            })
                            this.getData()
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                })
        },
        getData(){
            var parm=this.form;        
            this.loading=true
            this.$api.getVerifierList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false
            })
            this.$api.getConferenceList().then(res=>{
                this.conference_list=res.data.data.list;
            })
            
        },
        getUser(){
            this.$api.getUserinfoList({name:this.name}).then(res=>{
                this.user_list=res.data.data.list;
            })
        },
        sure(){
            if(this.check){
                this.dialogVisible1=true
            }else{
                this.$message({
                            message: '请选择会议',
                            type: 'error'
                })
            }
            
        }
    },
    created(){
        this.getData();
        this.getUser();
    }
}
</script>