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;
           }
       }
    }
    .table{
        button{
            padding:6px;
        }
    }
</style>
<template>
    <section class="apply">
        <p>报名信息  >  新办</p>
        <div class="filter">
            <el-form label-width="80px" :inline="true">
                <!-- <el-divider></el-divider> -->
                <el-form-item label="姓名">
                        <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.a" 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.a" 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-form-item label="类别">
                    <Subject @subChange='subChange'/>
                </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-button 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>
                <el-table-column
                prop="name" width="100"
                label="姓名">
                </el-table-column>
                <el-table-column
                prop="phone"
                label="联系电话">
                </el-table-column>
                <el-table-column
                prop="order_status"
                label="状态">
                <template slot-scope="scope">
                    <el-tag v-if='scope.row.order_status == -2' type="info">审核未通过</el-tag>
                    <el-tag v-if='scope.row.order_status == -1' >待提交资料</el-tag>
                    <el-tag v-if='scope.row.order_status == 0' type="warning">待审核</el-tag>
                    <el-tag v-if='scope.row.order_status == 1' >已审核立即支付</el-tag>
                    <el-tag v-if='scope.row.order_status == 2' type="warning">学习中</el-tag>
                    <el-tag v-if='scope.row.order_status == 3' type="success">已培训</el-tag>
                    <el-tag v-if='scope.row.order_status == 4' type="success">已完成</el-tag>
                    <!-- -2:审核未通过,-1:待提交资料，0：待审核，1：已审核立即支付，2：学习中，3：已完成 -->
                </template>
                </el-table-column>
                <el-table-column
                prop="remark"
                label="管理员备注">
                </el-table-column>
                <el-table-column
                prop="subject_item0"
                label="报名类型">
                </el-table-column>
                <el-table-column
                prop="subject_item1"
                label="作业类别">
                </el-table-column>
                <el-table-column
                prop="subject_item2"
                label="准操项目">
                </el-table-column>
                <el-table-column
                prop="train_type"
                label="培训类型">
                </el-table-column>
                <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{
      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=>{
              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);
                    }
                        
            })
      },
      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>