oa-system/src/components/Sankunginfo.vue

<template>
    <div class="Sankunginfo-all">
        <div class="Sankunginfo-top">
            <div class="Sankunginfo-title">三公费用明细</div>
        </div>
        <div class="Sankunginfo-box">
            <!-- <div class="Sankunginfo-btn">
                <el-button @click="thislink" size="mini" type="primary">确认</el-button>
            </div> -->
            <!-- <iframe v-if="iframeft" style="border:none" :src='src' width="100%" :height="heights"></iframe> -->
            <!-- <msgChild :style="returnheights" :src='src' :height='heights'></msgChild> -->
            <div class="Sankunginfo-box-img">
                <img src="../assets/Pdf.png"/>
                <div class="Sankunginfo-img-title">{{fileName}}</div>
            </div>
            <div class="Sankunginfo-box-btn">
                <el-button @click="thislink" size="mini" type="primary">预览</el-button>
                <el-button @click="PostEnterExitCostIsConfirm" size="mini" type="primary">确认</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import msgChild from './sankunginfochild.vue'
export default {
    components:{
      // 声明子组件名字  
      msgChild
    },
    data () {
        return {
            input:'',
            heights:0,
            id:0,
            fileName:'',
            src:'',
            iframeft:false
        }
    },
    methods:{
        //预览
        thislink(){
            this.iframeft=true;
            // this.src="http://132.232.92.186:24/Office/Word/EnterExitCost/File/"+this.fileName
            window.open("http://132.232.92.186:24/Office/Word/EnterExitCost/File/"+this.fileName)
            // this.$router.push({path: "http://132.232.92.186:24/Office/Word/EnterExitCost/File/"+this.fileName});
        },
        //确认
        PostEnterExitCostIsConfirm(){
            var url = "/api/Groups/PostEnterExitCostIsConfirm"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    type:1,
                    id:that.id
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        returnheights(){
            return 'height: '+ this.heights+' ;'
        }
    },
    created(){
        let clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
        this.heights=clientHeight-95;
        this.fileName = this.$route.query.fileName;
        this.id = this.$route.query.sign;
        this.src="http://132.232.92.186:24/Office/Word/EnterExitCost/File/"+this.fileName;
    },
    mounted(){
        document.getElementsByClassName('Sankunginfo-box')[0].style.height=this.heights+'px';

    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
.Sankunginfo-top{
    position: fixed;
    top: 0;
    background-color: #fff;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ede8e8;
}
.Sankunginfo-title{
    margin: 10px;
    font-size: 17px;
    font-weight:600 ;
}
.Sankunginfo-search{
    padding: 8px;
}
.Sankunginfo-box{
    padding-top: 43px;
}
.Sankunginfo-btn{
    text-align: right;
    margin: 10px 0;
}
.Sankunginfo-box-img{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Sankunginfo-img-title{
    color: #555;
    margin-top: 10px;
    width: 60%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
}
.Sankunginfo-box-btn{
    margin-top: 10px;
    text-align: center;
}
.Sankunginfo-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>