fj-dc-ui/.svn/pristine/f8/f8c0b36cf3199d3fcf08385e9f480c87a05ef967.svn-base

<template>
  <el-dialog
    class="verify_dialog"
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    append-to-body
  >
    <div class="verify_div">
      <el-table
        :data="tableData"
        style="width: 100%;overflow: auto;"
        :row-class-name="tableRowClassName"
        height="460px"
        empty-text="上传数据已全部验证通过！"
      >
        <el-table-column
          fixed
          type="index"
          :index="getIndex"
          width="90"
          label="模板行号"
          show-overflow-tooltip
        ></el-table-column>

       <el-table-column
              prop="groupName"
              label="组别"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.groupName.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.groupName.replace('$E$','') }}
                </span>
            </template>
        </el-table-column>
        
        <el-table-column
              prop="rsCode"
              label="水库编码"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.rsCode.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.rsCode.replace('$E$','') }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="rsName" label="水库名称" width="150" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column
              prop="inspPblmCode"
              label="问题序号"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.inspPblmCode.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.inspPblmCode.replace('$E$','') }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="inspPblmDesc" label="问题详情" width="150" align="center" show-overflow-tooltip></el-table-column>

        <el-table-column
              prop="inspPblmCate"
              label="问题严重程度"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.inspPblmCate.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.inspPblmCate.replace('$E$','') }}
                </span>
            </template>
        </el-table-column>
        <el-table-column
              prop="ifCasePblm"
              label="是否典型"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.ifCasePblm.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.ifCasePblm.replace('$E$','') }}
                </span>
            </template>
        </el-table-column>
        <el-table-column
              prop="path"
              label="路径"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.path.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.path.replace('$E$','') }}
                </span>
            </template>
        </el-table-column>
    
      </el-table>
      <template>
        <lable v-show="confirmUploadState">
          <el-radio v-model="updateState" label="1">新增</el-radio>
          <el-radio v-model="updateState" label="0">覆盖</el-radio>
        </lable>
      </template>
      <el-button type="warning" v-show="reUploadState"  @click="handleClose" >重新上传</el-button>
      <el-button type="primary" v-show="confirmUploadState"  @click="confirmUpload"
        :loading="uploadLoading"
        :disabled="buttonState"
        >确定填报</el-button>
    </div>

  </el-dialog>
</template>
<script>
import request from "../../utils/gw_ajax_request.js";
export default {
  props: ['tableData','cacheId'],
  components: {},
  data() {
    return {
      dialogVisible: true,
      reUploadState:false,
      confirmUploadState:true,
      rDisabled:false,
      cDisabled:false,
      title:'小水库问题批量导入验证页面(验证通过√)',
      uploadLoading: false,
      buttonState: false,
      updateState: '1',
    };
  },
  mounted: function() {},
  computed: {
    persId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    }
  },
  methods: {
    handleClose(done) {
      this.reUploadState = false;
      this.$emit("closePlVerDialog");
    },
    getIndex(index) {
      return index + 4;
    },
    tableRowClassName({ row, rowIndex }) {
      let values = "";
      for(let key in row){
        values += row[key];
      }
      if (values.indexOf('$E$') > 0) {
        this.reUploadState = true;
        this.confirmUploadState = false;
        this.title = '小水库问题批量导入验证页面(验证未通过×)';
        return 'warning-row';
      }
      return "";
    },
    confirmUpload(){
      this.upload();
    },
    upload(){
      this.uploadLoading = true;
      this.buttonState = true;
      request.get(`/dc/imp/skpblm/insert?cacheId=${this.cacheId}&userId=${this.persId}&updateState=${this.updateState}`).then(res => {
        console.log(res)
        if(res.data.key == true){
          this.$alert('填报成功！', '提示', {
            confirmButtonText: '确定',
            type: 'success',
            callback: action => {
              this.uploadLoading = false;
              this.buttonState = true;
              this.handleClose();
            }
          });
        }else {
          this.$alert('填报失败！', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `请不要重复提交!`
              });
            }
          });
          this.uploadLoading = false;
          this.buttonState = true;
        }
      });

    }

  },
  watch: {
    reUploadState(n,o){
      if(n){
        this.confirmUploadState = false;
      }else {
        this.confirmUploadState = true;
      }
    }
  }
};
</script>
<style>
.title {
  font-size: 16px;
}
.el-icon-edit {
  margin-right: 10px;
}
.verify_dialog .el-dialog {
  width: 80% !important;
}
.verify_dialog .el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  height: 500px;
  overflow: auto;
}
.verify_div {
  text-align: center;
}
.verify_div .el-table th > .cell {
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.verify_div .el-table--border th,
.el-table__fixed-right-patch {
  background: rgba(240, 240, 240, 1);
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
    0px 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.verify_div .el-table td.is-hidden > *,
.nysgc .el-table th.is-hidden > *,
.el-table--hidden {
  visibility: visible;
}
</style>