fj-dc-ui/.svn/pristine/10/1047269ee99212205e5bc8b486c3fd0f9ab7dda7.svn-base

<template>
  <el-dialog class="customs_dialog" :visible.sync="dialogVisible" :before-close="handleClose"
             :title="titleName + '问题批量导入'">
    <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"
        :on-error="handleError"
        multiple
        :limit="2"
        :on-exceed="handleExceed"
        :auto-upload="false"
        :file-list="fileList">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将xls文件和zip文件拖到此处一块上传，或<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>

    <!-- 验证数据的弹出框 -->
    <component :is="curComponent"
               v-if="showTianBaoPlVer"
               @closePlVerDialog="closePlVerDialog"
               :tableData="tableData"
               :cacheId="cacheId"
               :uploadButtonState="uploadButtonState">
    </component>
    <a type="primary" @click="openPlVerDialog" href="javascript:void(0)" v-show="showButton">点击查看本次填报数据
                                                                                             (<b>再次填报需重新上传文件</b>)</a>
  </el-dialog>
</template>
<script>

  import request from '@util/gw_ajax_request.js'
  import shuiKuWentiPlVer from './shuiKuWenti_piliang_verify'
  import shuiZhaWentiPlVer from './shuiZhaWenti_piliang_verify'
  import JianSheWentiPlVer from './jianSheWenti_piliang_verify'
  import YunxingWentiPlVer from './yunXingWenti_piliang_verify'
  import YuDiBaWentiPlVer from './yudibaWenti_piliang_verify'
  import ShuiYuanDiWentiPlVer from './shuiYuanDiWenti_piliang_verify'
  import QuShuiKouWentiPlVer from './quShuikouWenti_piliang_verify'
  import JieShuiGLWentiPlVer from './jieShuiGLWenti_piliang_verify'
  import YongShuiDwWentiPlVer from './yongShuiDwWenti_piliang_verify'
  // import shuiKuFangHongWentiPlVer from './shuiKuFangHongWenti_piliang_verify'
  // import diFangWentiPlVer from './diFangWenti_piliang_verify.vue'
  // import shanHongWentiPlVer from './shanHongWenti_piliang_verify.vue'
  // import chaoBiaoWentiPlVer from './chaoBiaoWenti_piliang_verify.vue'
  import quYongShuiWentiPlVer from './quYongShuiWenti_piliang_verify'
  // import guanQuWentiPlVer from './guanQuWenti_piliang_verify.vue'

  export default {
    props: ['titleName'],
    components: {
      JianSheWentiPlVer: JianSheWentiPlVer,
      shuiKuWentiPlVer: shuiKuWentiPlVer,
      shuiZhaWentiPlVer: shuiZhaWentiPlVer,
      YunxingWentiPlVer: YunxingWentiPlVer,
      YuDiBaWentiPlVer: YuDiBaWentiPlVer,
      ShuiYuanDiWentiPlVer: ShuiYuanDiWentiPlVer,
      QuShuiKouWentiPlVer: QuShuiKouWentiPlVer,
      JieShuiGLWentiPlVer: JieShuiGLWentiPlVer,
      YongShuiDwWentiPlVer: YongShuiDwWentiPlVer,
      // shuiKuFangHongWentiPlVer: shuiKuFangHongWentiPlVer,
      // diFangWentiPlVer: diFangWentiPlVer,
      // shanHongWentiPlVer: shanHongWentiPlVer,
      // chaoBiaoWentiPlVer: chaoBiaoWentiPlVer,
      // guanQuWentiPlVer: guanQuWentiPlVer,
    quYongShuiWentiPlVer: quYongShuiWentiPlVer
    },
    data() {
      return {
        curComponent: 'JianSheWentiPlVer',
        dialogVisible: true,
        fileList: [],
        uuid: 1,
        actionUrl: '/pdcApi/dc/imp/pblm/upload',
        socket: null,
        showTianBaoPlVer: false,
        filePath: '',
        tableData: [],
        showButton: false,
        uploadLoading: false,
        uploadZipLoading: false,
        cacheId: '',
        uploadButtonState: false,
        uploadSum: 0,
        uploadSuccessSum: 0,
        orgType: "001",
      }
    },
    mounted: function () {
      if (this.titleName == "小水库") {
        this.curComponent = "shuiKuWentiPlVer";
        this.orgType = "001";
      } else if (this.titleName == "水闸") {
        this.curComponent = "shuiZhaWentiPlVer";
        this.orgType = "006";
      } else if (this.titleName == "水利工程建设") {
        this.curComponent = "JianSheWentiPlVer";
        this.orgType = "004";
      } else if (this.titleName == "水利工程运行") {
        this.curComponent = "YunxingWentiPlVer";
        this.orgType = "007";
      } else if (this.titleName == "淤地坝") {
        this.curComponent = "YuDiBaWentiPlVer";
        this.orgType = "011";
      } else if (this.titleName == "取水口") {
        this.curComponent = "QuShuiKouWentiPlVer";
        this.orgType = "012";
      } else if (this.titleName == "水源地") {
        this.curComponent = "ShuiYuanDiWentiPlVer";
        this.orgType = "013";
      } else if (this.titleName == "节水管理与评价") {
        this.curComponent = "JieShuiGLWentiPlVer";
        this.orgType = "015";
      } else if (this.titleName == "用水单位") {
        this.curComponent = "YongShuiDwWentiPlVer";
        this.orgType = "016";
      } else if (this.titleName == "取用水检查") {
        this.curComponent = "quYongShuiWentiPlVer";
        this.orgType = "031";
      }
    },
    computed: {
      persId() {
        return localStorage.getItem("userid")
          ? localStorage.getItem("userid")
          : "1098101939614724096";
      }
    },
    methods: {
      handleClose(done) {
        this.$emit("closePlDialog");
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        //return this.$confirm(`确定移除 ${ file.name }？`);
      },
      beforeAvatarUpload(file) {

        this.uploadLoading = true;

        let ext = file.name.split('.');
        if (ext[ext.length - 1] === 'xls' || ext[ext.length - 1] == 'zip') {
          this.uploadSum++;
          return file;
        } else {
          this.$message.error('请上传问题模板文件和zip压缩包!')
          return false;
        }
      },
      handleError(err, file, fileList) {
        this.$message({
          showClose: true,
          message: '上传失败，可能文件过大或者其他原因！',
          type: 'error'
        });
        this.restoration();
      },
      handleSuccess(res, file, fileList) {
        let ext = file.name.split('.');
        // 加1
        this.uploadSuccessSum++;
        if (ext[ext.length - 1] == 'xls') {
          this.filePath = res.data.key;
        }
        if (this.uploadSum == 1 && ext[ext.length - 1] == 'zip') {
          this.$message({
            message: 'zip上传成功！',
            type: 'success'
          });
          this.restoration();
          return;
        }
        if (this.uploadSuccessSum == this.uploadSum) {
          this.parse();
        }

      },
      restoration() {
        this.uploadLoading = false;
        this.uploadSuccessSum = 0;
        this.uploadSum = 0;
      },
      parse() {
        // this.filePath = res.data.key;
        // 调用解析的接口
        request.get(`/dc/imp/pblm/parse?filePath=${this.filePath}&userId=${this.persId}&orgType=${this.orgType}`).then(res => {

          this.tableData = res.data.listParse;
          this.cacheId = res.data.cacheId;
          console.log("table:" + this.tableData)

          if (this.tableData.length > 0) {
            this.showButton = true;
            this.showTianBaoPlVer = true;
          } else {
            this.$alert('可填报数据条数为0，请确认！', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              callback: action => {

              }
            });
          }
          this.restoration();
        });
      },
      async submitUpload() {
        await this.setUrl();
        await this.$refs.upload.submit();
      },
      setUrl() {
        this.actionUrl = `/pdcApi/dc/imp/pblm/upload`;
        this.$refs.messageDiv.innerHTML = '';
      },
      closePlVerDialog() {
        this.showTianBaoPlVer = false;
      },
      openPlVerDialog() {
        this.uploadButtonState = true;
        this.showTianBaoPlVer = true;
      }

    }

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