fj-dc-ui/.svn/pristine/a2/a261a278266204d732c8a9b745d4998ff73d709c.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> -->
             <el-upload
                ref="upload"
                class="upload-demo"
                drag
                :http-request="conPic"
                :on-remove="removePic"
                :before-upload="beforeAvatarUpload"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :limit="1"
                action="111"
                multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
                <!-- <el-form :model="addObj" :label-width="formLabelWidth">
                    <el-form-item label="">
                        <el-input v-model="addObj.file" id="file" type="file"></el-input>
                    </el-form-item>
                </el-form> -->

        </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 { hostUrl } from "@util/global_variable.js";
    // import shuiKuTianbaoPlVer from './shuiKuTianbao_piliang_verify'
    export default {
        props: [],
        components: {
            // shuiKuTianbaoPlVer:shuiKuTianbaoPlVer,

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

        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            orgId() {
			    return localStorage.getItem("guid") ? localStorage.getItem("guid") : "";
		    },
        },
        methods:{
            removePic(file, fileList){
                this.picLists=[];
                console.log(file);
                console.log(fileList);
                fileList.forEach(ele =>{
                    this.picLists.push(ele.raw);
                })
                // this.nextStepToFrom();
                console.log(this.picLists)
            },
            conPic(item){
                // this.form['upFiles'] = item.file;
                this.picLists.push(item.file)
                // this.form.app = item.file;
                console.log(item);
                console.log(this.picLists);
            },
            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('请选择要上传的文件模板');
            //   }
                let _self = this
                var fd = new FormData();
                // fd.append('persId',_self.persId);
                // fd.append('orgId',_self.orgId);
                for (var i = 0; i < _self.picLists.length; i++) {
                    fd.append('file',_self.picLists[i]);
                }
                // fd.append("file", $("#file")[0].files[0]);
                // fd.append("orgId", _self.orgId);
                request.post(`/supervision/plan/importExcel?orgId=${_self.orgId}`,fd,{headers:{'Content-Type': 'multipart/form-data'}}).then(res => {
                // request.post("http://127.0.0.1:8080/supeplat/api/order/save",fd,{headers:{'Content-Type': 'multipart/form-data'}}).then(res => {
                console.log(res);
                    if(res.success){
                        this.$message({
                            message: '提交成功！',
                            type: 'success'
                        });
                        this.$emit('uploadSuccess',res.success);
                    }else{
                            this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });
                    }
                });

            },
            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>