addFeeTemplate.vue

<template lang="pug">
    el-dialog(title="参赛参训费用模板",  :fullscreen="false" :visible.sync='visible' :modal-append-to-body='false' :append-to-body='true' @close="visible=false")
        el-card(shadow="never")
            div(slot="header")
                el-input(v-model='title' clearable='', style='width:80%;' placeholder="请输入模板名称")
                el-button(@click="getDataList" style='float:right;' icon='el-icon-search') 查询
            div
            el-table(:data="tableData" style="width: 100%" v-loading='dataListLoading' border highlight-current-row  @current-change="handleCurrentChange")
                el-table-column(prop='title',header-align='center',align='center',label='名称')
                el-table-column(prop='remark',header-align='center',align='center',label='模板介绍')
            el-pagination(@size-change='sizeChangeHandle', @current-change='currentChangeHandle', :current-page='pageIndex', :page-sizes='[10, 20, 50, 100]', :page-size='pageSize', :total='totalPage', layout='total, sizes, prev, pager, next, jumper')    
        span.dialog-footer(slot="footer")
            el-button(type="primary" @click="useTemplate()" :disabled="clickFlag") 确 定
            el-button(@click="visible=false") 取 消
</template>
<script>
    export default {
        data(){
            return{
                clickFlag: false,
                flagType: null,
                title:'',
                loading:null,
                visible:false,
                dataListLoading: false,
                selChangeData: [],
                tableData: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                template:{}
            }
        },
        methods:{
            init(flagType){
                this.visible=true;
                this.clickFlag = false
                this.flagType = flagType
                this.title=''
                //修改回选
                if(this.flagType){
                    this.getDataList();
                }

            },
            getDataList(){
                this.$http({
                    url: this.$http.adornUrl(`/pbFeeTemplate/getPageList/`),
                    method: 'get',
                    params: this.$http.adornParams({
                        page: this.pageIndex,
                        rows: this.pageSize,
                        typeTemp: this.flagType,
                        title: this.title
                    })
                }).then((data) =>{
                    console.log("分页模板数据：",data)
                    if(data && data.code === 0){
                        this.tableData = data.page.rows
                        this.totalPage = data.page.total
                    }else{
                        this.tableData = []
                        this.totalPage = 0
                    }
                })
            },
            openFullScreen() {
                this.loading  = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
            },
            handleCurrentChange(val){
                this.template = val;
            },
             // 每页数
            sizeChangeHandle (val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList();
            },
            // 当前页
            currentChangeHandle (val) {
                this.pageIndex = val
                this.getDataList();
            },
            //新增方法
            useTemplate(){
                if(this.template){
                    this.clickFlag = true
                    this.visible=false;
                    this.$http({
                        url: this.$http.adornUrl(`/pbFeeTemplate/getByByx1/`+this.template.byx1),
                        method: 'get'
                    }).then((data) =>{
                        if(data && data.code === 0){
                            console.log("data222:", data.list)
                            this.$emit("chooseTemplate",data.list,this.flagType);
                        }
                    })
                }else{
                    this.$message.error("请选择模板！")
                }
            },
        }
    }
</script>
<style>
    .inputWidth{
        width: 210px;
    }
  

    .font_later{
        padding-left:20px;
        font-weight: bold;
        color: #909399;
    }
    .font_color{
        font-weight: bold;
        color: #909399;
    }
    .font_style{
        font-weight: bold;
        color: red;
    }
    .dialog-footer{
        padding-bottom:150px;
    }

    /* 提示框 */
.el-tooltip__popper.is-light{
  border: 1px solid #C0C4CC;
}

.el-tooltip__popper[x-placement^=bottom] .popper__arrow{
  border-bottom-color: grey  !important ;
}

.toolTip>p{
  margin: 0;
  padding-top: 10px;
  height:14px;
  line-height:14px;
  font-size:14px;
  color: #606266;
}


 /* 弹出遮罩层 兼容ie*/
.el-dialog__wrapper {
  width: 100% !important;
  height: 100% !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

</style>