fj-dc-ui/.svn/pristine/af/af75fae02dcb3d9fa8585a5f8c59bf298569f1f8.svn-base

<template>
    <el-dialog class="customs_dialog" :visible.sync="dialogVisible" :before-close="handleClose" title="特定飞检批量填报">
        <div class="upload_div">
            <el-upload
                    ref="upload"
                    class="upload-demo"
                    drag
                    action="/pdcApi/bis/insp/fsc/pblm/uploadTemplate"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleSuccess"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将模板文件拖到此处，或<em>点击选取模板文件</em></div>
            </el-upload>



        </div>
        <div ref="messageDiv" id="messageDiv" style="width: 100%;margin-top: 10px">

        </div>

        <!-- 验证数据的弹出框 -->
        <!--<shuiKuTianbaoPlVer v-if="showShuiKuTianBaoPlVer"-->
        <!--@closePlVerDialog="closePlVerDialog"-->
        <!--:tableData="tableData"-->
        <!--:uuid="uuid"-->
        <!--:id='id'-->
        <!--&gt;</shuiKuTianbaoPlVer>-->
        <!--<a type="primary" @click="openPlVerDialog" href="javascript:void(0)" v-show="showButton">点击弹框</a>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitUpload" :loading="uploadLoading" >点击上传</el-button>
      </span>
    </el-dialog>
</template>
<script>

    import request from '../../utils/gw_ajax_request.js'
    // import shuiKuTianbaoPlVer from './shuiKuTianbao_piliang_verify'
    export default {
        props: ['showShuiKuTianBaoPl','id'],
        components: {
            // shuiKuTianbaoPlVer:shuiKuTianbaoPlVer,

        },
        data(){
            return{
                dialogVisible:true,
                fileList:[],
                uuid:1,
                actionUrl:'',
                socket:null,
                showShuiKuTianBaoPlVer:false,
                filePath:'',
                tableData:[],
                showButton:false,
                uploadLoading: false,
            }
        },
        mounted:function(){

        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        methods:{
            handleClose(done) {
                // this.closeSocket();
                // this.$parent.getSkDataList();
                this.$emit("closePlDialog");
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                //return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeAvatarUpload(file) {
                let Xls = file.name.split('.');
                if(Xls[1] === 'xls' || Xls[1] === 'xlsx'){
                    return file;
                }else {
                    this.$message.error('请上传编辑后的模板文件!');
                    return false;
                }
            },
            handleSuccess(res,file,fileList){
                let filePath = res.data.key;
                this.filePath = filePath;
                // 调用解析的接口
                // request.get(`/dc/impExcel/parseExcel/${this.persId}/${this.uuid}?filePath=${this.filePath}&tid=08&pid=${this.id}`).then(res => {
                //
                //     this.tableData = res.data;
                //     console.log("table:" + this.tableData)
                //
                //     if(this.tableData.length > 0){
                //         this.showButton = true;
                //         this.showShuiKuTianBaoPlVer = true;
                //     }else{
                //         this.$alert('可填报数据条数为0或非本组数据，请确认！', '提示', {
                //             confirmButtonText: '确定',
                //             type: 'warning',
                //             callback: action => {
                //
                //             }
                //         });
                //     }
                //     // 只展示错误数据的逻辑
                //     // if(this.tableData[0].Message == undefined){
                //     //     this.showButton = true;
                //     //     this.showShuiKuTianBaoPlVer = true;
                //     // }else{
                //     //     var message = this.tableData[0].Message;
                //     //     if(message == 'success'){
                //     //         this.showButton = true;
                //     //         this.showShuiKuTianBaoPlVer = true;
                //     //     }else {
                //     //         this.$alert('可填报数据条数为0或非本组数据，请确认！', '提示', {
                //     //             confirmButtonText: '确定',
                //     //             type: 'warning',
                //     //             callback: action => {
                //
                //     //             }
                //     //         });
                //     //     }
                //     // }
                //
                //     this.uploadLoading = false;
                // });

            },
            openSocket() {

                if (typeof(WebSocket) == "undefined") {
                   console.log("您的浏览器不支持WebSocket");
                } else {
                    this.closeSocket();
                    console.log("您的浏览器支持WebSocket");
                    console.log("sid:" + this.uuid);
                    //实例化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                    // let baseUrl = "localhost:8101";
                    // 测试服务器
                    let baseUrl = "10.1.102.136:8100";
                    // let baseUrl = "sv.goldenwater.com.cn";
                    // let baseUrl = "localhost:8085/wsbackend";
                    this.socket = new WebSocket(`ws://${baseUrl}/websocket/${this.uuid}`);

                    // socket
                    let socket = this.socket;
                    //打开事件
                    socket.onopen = function () {
                        console.log("Socket 已打开");
                        //socket.send("这是来自客户端的消息" + location.href + new Date());
                    };
                    //获得消息事件
                    socket.onmessage = function (msg) {
                        console.log(msg.data);
                        document.getElementById('messageDiv').innerHTML = document.getElementById('messageDiv').innerHTML
                             + msg.data + "<br/>"
                        //发现消息进入    开始处理前端触发逻辑
                        if(msg.data.indexOf('完成数据校验') > 0){

                        }

                    };
                    //关闭事件
                    socket.onclose = function () {
                        console.log("Socket已关闭");
                    };
                    //发生了错误事件
                    socket.onerror = function () {
                        console.log("Socket发生了错误");
                        //此时可以尝试刷新页面
                    };
                     // 路由跳转时结束websocket链接
                    this.$router.afterEach(function () {
                        socket.close()
                    })
                }
            },
            // getUUID (){
            //     request.get('/socket/uuid').then(res => {
            //        if(res.success){
            //            this.uuid = res.data.key;
            //            this.actionUrl = `/pdcApi/dc/impExcel/imp/${this.persId}/${this.uuid}?tid=08`;
            //        }else {
            //            console.log("success不为true")
            //        }
            //     });
            // },
            closeSocket() {
                if (this.socket != null) {
                    this.socket.close();
                }
            },
            submitUpload() {
              let filePath = this.filePath;
              if(filePath){
                this.uploadLoading = true;
                request.post(`/bis/insp/fsc/pblm/parseUpload?path=${filePath}&startRow=1`).then(res =>{
                  if(res.success){
                    this.uploadLoading = false;
                    request.post(`/bis/insp/fsc/pblm/insertIntoData?dataId=${res.data.dataId}`).then(res1 =>{
                      if(res1.success){
                        this.$message.success('上传成功');
                        this.$emit('uploadSuccess');
                      }else{
                        this.$message.warning(res1.message);
                      }
                    })

                  }
                })
              }else{
                this.$message.warning('请选择要上传的文件模板');
              }


            },
            closePlVerDialog(){
                this.showShuiKuTianBaoPlVer = false;
            },
            openPlVerDialog(){
                this.showShuiKuTianBaoPlVer = true;
            }


        },
        watch:{
            showShuiKuTianBaoPl(n,o){
                // 想用监听得使用v-show,因为v-if会重新渲染DOM,子组件已关闭
                // alert("进入监听")
                // if(!n){
                //     alert(this.showShuiKuTianBaoPl)
                //     this.closeSocket();
                // }
            },

        },


    }
</script>
<style>
    .title{
        font-size: 16px;
    }
    .el-icon-edit{
        margin-right: 10px;
    }
    .customs_dialog .el-dialog{
        width: 40% !important;
    }

    .customs_dialog .el-dialog__body {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        height: 60vh;
        overflow: auto;
    }

    .upload_div {
        text-align: center;

    }

    .upload_div_left {
        border:1px solid red;
        width:50%;
        height:100px;
        float:left;

    }

    .upload_div_right {
        border:1px solid red;
        width:50%;
        height:100%;
        float:right;

    }

</style>