fj-dc-ui/.svn/pristine/11/11fde8934e8d2bb6a97bb2c5ec446631098a666e.svn-base

<template>
    <el-dialog class="customs_dialog" :visible.sync="dialogVisible" :before-close="handleClose" :title="dialogTitle">
        <div class="upload_div">
            <el-upload
                    ref="upload"
                    class="upload-demo"
                    drag
                    :action="actionUrl"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleSuccess"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :auto-upload="false"
                    :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将模板文件拖到此处，或<em>点击选取模板文件</em></div>
            </el-upload>

            <el-button type="primary" @click="submitUpload" :loading="uploadLoading" >点击上传</el-button>

        </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'
        ></shuiKuTianbaoPlVer>
        <a type="primary" @click="openPlVerDialog" href="javascript:void(0)" v-show="showButton">点击弹框</a>
    </el-dialog>
</template>
<script>

    import request from '@util/gw_ajax_request.js'
    import shuiKuTianbaoPlVer from './shuiKuTianbao_piliang_verify'
    export default {
        props: ['showtianBaoPiLiangCom','id','preUrl','dialogTitle'],
        components: {
            shuiKuTianbaoPlVer:shuiKuTianbaoPlVer,
        },
        data(){
            return{
                dialogVisible:true,
                fileList:[],
                uuid:1,
                socket:null,
                showShuiKuTianBaoPlVer:false,
                filePath:'',
                tableData:[],
                showButton:false,
                uploadLoading: false,
            }
        },
        mounted(){

        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            baseUrl() {
                return window.location.href.indexOf('localhost') > -1 || window.location.href.indexOf("10.1.102.136") > -1 ? '10.1.102.136:8100' : `${window.location.host}/api`
            },
            actionUrl(){
                console.log(this.preUrl)
                return '/api' + this.preUrl + '/uploadTemplate'
            }
        },
        methods:{
            handleClose(done) {
                this.$parent.getDfDataList();
                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'){
                    return file;
                }else {
                    this.$message.error('请上传编辑后的模板文件!')
                    return false;
                }
            },
            handleSuccess(res,file,fileList){
                let filePath = res.data.key;
                this.filePath = filePath;
                // 调用解析的接口
                request.post(`${this.preUrl}/parseUpload?path=${this.filePath}&startRow=2`).then(res => {
                    request.post(`${this.preUrl}/insertIntoData?dataId=${res.data.dataId}&persId=${this.persId}&groupId=${this.id}`).then(res => {
                        this.$message.success('批量填报成功')
                        this.uploadLoading = false;
                        this.$emit("closePlDialog");
                    })
                });
            },
            submitUpload() {
                this.uploadLoading = true;
                this.$refs.upload.submit();
            },
            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;
    }
    .customs_dialog .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>