yfadmin_web/src/views/apply/New.vue

<style lang="scss">
    .apply{
       .filter{
            background: #fff;
            padding: 20px 20px 10px; 
            border:1px solid #EDEDED;
            border-radius:2px;
            margin-bottom: 10px;
            margin-top: 10px;
            .el-form-item{
                margin-bottom: 10px;
            }
            .el-input,.el-select{
                width: 150px;
            }
    
       }
       .el-divider--horizontal{
           margin: 10px 0 20px;
       }
       .divider{
        //    margin-bottom: 15px;
           background: #fff;
           padding: 10px;
       }
       thead{
           th{
               background: #eee;
           }
       }     
    }
    .checkList{
           padding:0 10px;
           label{
               margin: 5px 0;
           }
    }
    .table{
        button{
            padding:6px;
        }
    }
    .el-table__fixed-right::before, .el-table__fixed::before{
        background: none;
    }
</style>
<template>
    <section class="apply">
        <p>报名信息  >  新办</p>
        <div class="filter">
            <el-form label-width="75px" :inline="true" size="small">
                <!-- <el-divider></el-divider> -->
                <el-form-item label="培训项目">
                    <Subject @subChange='subChange'/>
                </el-form-item>
                <el-form-item label="姓名" label-width="40px">
                        <el-input placeholder="姓名" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                        <el-input placeholder="联系电话" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="报名时间">
                    <el-date-picker clearable
                    v-model="form.signup_time"
                    type="date" value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="发票类型">
                    <el-select v-model="form.bill_type" placeholder="请选择" clearable>
                        <el-option  label="不需要发票"  :value="0"></el-option>
                        <el-option  label="个人发票"  :value="1"></el-option>
                        <el-option  label="公司发票"  :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="领证方式" clearable>
                    <el-select v-model="form.receive_card" placeholder="请选择">
                        <el-option  label="邮寄"  :value="1"></el-option>
                        <el-option  label="自取"  :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试设置">
                    <el-select v-model="form.set_exam_time" placeholder="请选择" clearable>
                        <el-option  label="已设置考试时间"  :value="1"></el-option>
                        <el-option  label="未设置考试时间"  :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试时间" >
                    <el-date-picker clearable
                    v-model="form.exam_time" value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="培训班级">
                    <el-select v-model="form.a" placeholder="请选择">
                        <el-option  label="不需要发票"  :value="0"></el-option>
                        <el-option  label="纸质发票"  :value="0"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="公司名称">
                        <el-input placeholder="公司名称" v-model="form.company"></el-input>
                </el-form-item>
                <el-form-item label="培训时间">
                    <el-date-picker clearable
                    v-model="form.train_time"
                    type="daterange" value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                       <el-button  @click="list=[],getData()" type="primary" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                
                <el-divider></el-divider>
            </el-form>
            <el-tabs v-model="order_status" @tab-click="tabClick">
                <el-tab-pane name="-3" label="全部"></el-tab-pane>
                <el-tab-pane name="0" label="待审核"></el-tab-pane>
                <el-tab-pane name="2" label="已支付待培训"></el-tab-pane>
                <el-tab-pane name="-2" label="审核未通过"></el-tab-pane>
                <el-tab-pane name="1" label="待付款"></el-tab-pane>
                <el-tab-pane name="-1" label="待上传资料"></el-tab-pane>
                <!-- <el-tab-pane name="7" label="已培训待考试"></el-tab-pane> -->
                <el-tab-pane name="3" label="考试完成"></el-tab-pane>
                <!-- <el-tab-pane name="9" label="已取消"></el-tab-pane> -->
            </el-tabs>
        </div>
        <div class="divider">
                <el-button @click="setStatus(1,'审核通过')" size="small" type="success" >审核通过</el-button>
                <el-button @click="setStatus(-2,'审核不通过')" size="small" type="info" >审核不通过</el-button>
                <el-button @click="setStatus(2,'已付款')" size="small" type="primary" >已付款</el-button>
                <el-button @click="setStatus(3,'已培训')"  size="small" type="danger" >已培训</el-button>
                <el-button @click="setStatus(4,'考试完成')" size="small" type="success" >考试完成</el-button>
                <el-button @click="setTime(1)" size="small" type="primary" >设置培训时间</el-button>
                <el-button @click="setTime(2)" size="small" type="primary" >设置考试时间</el-button>
                <el-divider  direction="vertical"></el-divider>
                <el-button @click="download('exam')" size="small" type="warning" >导出考勤表与申报考试表</el-button>
                <el-button @click="download('apply')"  size="small" type="warning" >导出学员申报资料</el-button>
                <el-divider  direction="vertical"></el-divider>
                <el-dropdown  trigger="click">
                    <el-button type="primary" size="mini"  plain icon="el-icon-finished">
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item>姓名</el-dropdown-item> -->
                        <div class="checkList">
                            <p v-for="(item,index) in itemList" :key='index'>
                                <el-checkbox v-model="item.checked"   :label="item.name"></el-checkbox>
                            </p>
                        </div>
                    </el-dropdown-menu>
                </el-dropdown>
                &nbsp;
                <el-button @click="print" type="primary" size="mini" plain icon="el-icon-printer"></el-button>
        </div>
        <el-table
                class="table"
                :data="list" v-loading="loading"
                 @selection-change="handleSelectionChange"
                border 
                style="width: 100%">
                <el-table-column
                type="selection" fixed="left"
                width="40">
                </el-table-column>
                <template v-for="(item,index) in itemList" >
                    <el-table-column :key='index' v-if='item.checked' :width='item.width'
                    :prop="item.value"  :label="item.name">
                    </el-table-column>
                </template>             
                <el-table-column
                prop="zip" width="220" fixed="right"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="mark(scope.row.id,scope.row.remark)" size="mini" type="primary">备注</el-button>
                    <el-button @click="$router.push({path:'/sign/detail',query:{id:scope.row.id}})"  size="mini" type="success">查看</el-button>
                    <el-button @click="$router.push({path:'/sign/edit',query:{id:scope.row.id}})" size="mini" type="warning">编辑</el-button>
                    <el-button @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
                </template>
                </el-table-column>
        </el-table>
        <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
        
        <el-dialog
            :title="text" 
            :visible.sync="dialogVisible"
            width="30%">
            <el-date-picker
            v-model="time" v-if='date_type == 1'
            type="daterange" value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <el-date-picker
            v-model="time" v-else
            type="date" value-format="yyyy-MM-dd">
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
import Subject from '../../components/Subject';
// import { Base64 } from 'js-base64';
export default {
  components:{
        Page,Subject
    },
  data(){
    return{
      checkList:[],
      itemList:[
          {name:'姓名', value:'name',checked:true},
          {name:'联系电话', value:'phone',checked:true,width:'120px'},
          {name:'状态', value:'order_status_1',checked:true},
          {name:'管理员备注', value:'remark',checked:true,width:'150px'},
          {name:'报名类型', value:'subject_item0',checked:true,width:'120px'},
          {name:'作业类别', value:'subject_item1',checked:true},
          {name:'准操项目', value:'subject_item2',checked:true},
          {name:'培训类型', value:'train_type',checked:true},
          {name:'考试时间', value:'exam_time',checked:true,width:'150px'},
          {name:'ID', value:'id',checked:true},
          {name:'支付状态', value:'pay_status_1',checked:true},
          {name:'支付金额', value:'price',checked:true},
          {name:'更新时间', value:'ctime',checked:true,width:'170px'},
          {name:'发票类型', value:'bill_type_1',checked:true,width:'120px'},
          {name:'领证方式', value:'receive_card',checked:true},
          {name:'实名认证', value:'verify_1',checked:true},
          {name:'报名时间', value:'signup_time',checked:true,width:'150px'},
          {name:'培训时间', value:'train_time',checked:true,width:'150px'},
          {name:'公司名称', value:'company',checked:true,width:'200px'},
      ],
      text:'批量设置培训时间',
      date_type:1,
      time:'',
      form:{train_type:'新办',subject_item:'',order_status:'',page:1},
      activeName:"1",
      total:1,
      list:[],
      order_status:'-3',
      ids:[],
      dialogVisible:false,
      url:'',
      loading:false
    }
  },
  methods:{
      gopage(){
            this.form.page=this.$refs.pageButton.page
            this.getData()
      },
      getData(){
          var parm=this.form;
          this.loading=true;
          if(this.order_status != '-3'){parm.order_status=this.order_status}
          this.$api.getSignList(parm).then(res=>{
              let data=res.data.data.list;
              for(let i=0;i<data.length;i++){
                    let item=data[i],status='',pay_status='',verify='',bill_type='';
                    if(item.pay_status){pay_status='已支付'}else{pay_status='未支付'}
                    if(item.verify){verify='已认证'}else{verify='未认证'}
                    if(item.bill_type == 0)bill_type='不需要发票';
                    if(item.bill_type == 1)bill_type='个人发票';
                    if(item.bill_type == 2)bill_type='公司发票';
                    if(item.order_status == -2)status='审核未通过';
                    if(item.order_status == -1)status='待提交资料';
                    if(item.order_status == 0)status='待审核';
                    if(item.order_status == 1)status='已审核立即支付';
                    if(item.order_status == 2)status='学习中';
                    if(item.order_status == 3)status='已完成';
                    item.order_status_1=status
                    item.pay_status_1=pay_status
                    item.verify_1=verify
                    item.bill_type_1=bill_type
              }
              this.list=res.data.data.list
              this.total=res.data.data.total
              this.loading=false
          })
      },
      subChange(data){
          this.form.subject_item=data.join('|')
      },
      tabClick(tab){
          this.form.order_status=tab.name
          this.list=[]
          this.getData()
      },
      del(id){
            this.$confirm('确定删除吗', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.deleteSign({id:id}).then((res)=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getData()
                })
            })
      },
      mark(id,val){
          this.$prompt('', '管理员备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue:val,
            }).then(({ value }) => {
                this.$api.updateSign({id:id,remark:value}).then(res=>{
                        if(res.data.code==0){
                            this.$message({message: '备注成功！',type: 'success'});
                            this.getData()
                        }else{
                            this.$message.error(res.data.message);
                        }
                })
            })
      },
      handleSelectionChange(val) {
          this.ids=val      
          console.log(val)
      },
      setStatus(type,text){
          var ids=[],val=this.ids;
          for(let i=0;i<val.length;i++){
              ids.push(val[i].id)
          }
          var id = ids.join(',');
        if(val.length>0){
            this.$confirm('确定修改状态为'+text, '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.updateSignStu({id:id,order_status:type}).then((res)=>{
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        this.getData()
                })
            })
        }else{
            this.$message.error('请选择数据');
        }
      },
      setTime(type){
          var ids=[],val=this.ids;
          for(let i=0;i<val.length;i++){
              ids.push(val[i].id)
          }
          var id = ids.join(',');
          this.select_ids=id;
        if(val.length>0){
            this.date_type=type
            if(type == 1){
                this.text='批量设置培训时间'
            }else{
                this.text='批量设置考试时间'
            }
            this.dialogVisible=true;
        }else{
            this.$message.error('请选择数据');
        }
      },
      save(){
          var parm={id:this.select_ids}
          if(this.date_type == 1){
              parm.train_time=this.time.join(',')
          }else{
              parm.exam_time=this.time
          }
           this.$api.updateSign(parm).then((res)=>{
                    if(res.data.code == 0){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        this.dialogVisible=false
                        this.getData()
                    }else{
                        this.$message.error(res.data.message);
                    }
                        
            })
      },
      print(){
        var newwindow = window.open("","");
        var tr='',th='';
        for(let i=0;i<this.itemList.length;i++){
            let item=this.itemList[i];
            th+=`
                <td>${item.name}</td>
            `
        }
        for(let i=0;i<this.list.length;i++){
            let item=this.list[i];
            let tds=''
            for(let j=0;j<this.itemList.length;j++){
                let item_1=this.itemList[j];
                tds+=`
                    <td>${item[item_1.value]||' '}</td>
                `
            }
            tr+=`<tr>${tds}</tr>`
        }
        var table=`
            <style>
                td{text-align:center;padding:10px 0;color:#666;font-size:12px;}
            </style>
            <table style='border-collapse: collapse;border:none;border-color:#d9d9d9;padding:10px;' border='1' cellspacing='0' cellpadding='0' width='100%'>
                <thead style="text-align:center;">
                    ${th}
                </thead>
                ${tr}
            </table>
        `
        console.log(table)
        newwindow.document.write(table);
        newwindow.window.print();  
      },
      download(type){
          var ids=[],val=this.ids;
          for(let i=0;i<val.length;i++){
              ids.push(val[i].id)
          }
          var id = ids.join(',');
          var parm={
              id:id,
              type:type
          }
          if(val.length>0){
                this.$api.downloadzip(parm).then(res=>{
                    // if(res.data.code == 0){
                        var elink = document.createElement('a');
                        let blob=new Blob([res.data], {type: 'application/zip'});
                        let objUrl=URL.createObjectURL(blob);
                        let file_name=res.headers['content-disposition'].split('=')[1];
                        elink.download = file_name;
                        elink.style.display = 'none';                
                        elink.href = objUrl;
                        document.body.appendChild(elink);
                        elink.click();
                        document.body.removeChild(elink);      
                    // }else{
                    //     this.$message.error(res.data.message);
                    // }
                })
          }else{
              this.$message.error('请选择数据');
          }
      }
  },
  created(){
      this.getData()
  }
}
</script>