fj-dc-ui/.svn/pristine/3e/3eaa646dd99bef3268f2f299a8bd9bf5bfb62e18.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">
              <div v-if="scope.row.groupName.indexOf('$W$')>0">
                <el-popover trigger="hover" placement="bottom">
                  <p>请检查"组别"是否不对;选择继续填报,此条数据可能不会入库.</p>
                  <div slot="reference" class="name-wrapper">
                    <span :style="{ color: scope.row.groupName.indexOf('$E$')>0 ? '#ED3F14' : scope.row.groupName.indexOf('$W$')>0 ? '#E7E708' : '' }">
                      {{ scope.row.groupName.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                    </span>
                  </div>
                </el-popover>
              </div>
              <div v-else>
                <span :style="{ color: scope.row.groupName.indexOf('$E$')>0 ? '#ED3F14' : scope.row.groupName.indexOf('$W$')>0 ? '#E7E708' : '' }">
                  {{ scope.row.groupName.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                </span>
              </div>
            </template>
        </el-table-column>
        
        <el-table-column
              prop="objCode"
              label="水闸编码"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
                <span :style="{ color: scope.row.objCode.indexOf('$E$')>0 ? '#ED3F14' : '' }">
                  {{ scope.row.objCode.replace(/\$E\$/g,'') }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="gateName" label="水闸名称" width="150" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="inspPblmsName" label="问题类别" width="150" align="center" show-overflow-tooltip></el-table-column>        
        <el-table-column
              prop="attachSheet"
              label="问题标准附件编号"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
              <div v-if="scope.row.attachSheet.indexOf('$W$')>0">
                <el-popover trigger="hover" placement="top">
                  <p>请检查"问题标准附件编号"与"问题标准序号"、"严重程度"是否匹配;选择继续填报,此条数据将不会入库.</p>
                  <div slot="reference" class="name-wrapper">
                    <span :style="{ color: scope.row.attachSheet.indexOf('$E$')>0 ? '#ED3F14' : scope.row.attachSheet.indexOf('$W$')>0 ? '#E7E708' : '' }">
                      {{ scope.row.attachSheet.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                    </span>
                  </div>
                </el-popover>
              </div>
              <div v-else>
                <span :style="{ color: scope.row.attachSheet.indexOf('$E$')>0 ? '#ED3F14' : scope.row.attachSheet.indexOf('$W$')>0 ? '#E7E708' : '' }">
                  {{ scope.row.attachSheet.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                </span>
              </div>
            </template>
        </el-table-column>
        <el-table-column
              prop="inspPblmCode"
              label="问题标准序号"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
              <div v-if="scope.row.inspPblmCode.indexOf('$W$')>0">
                <el-popover trigger="hover" placement="top">
                  <p>请检查"问题标准序号"与"问题标准附件编号"、"严重程度"是否匹配;选择继续填报,此条数据将不会入库.</p>
                  <div slot="reference" class="name-wrapper">
                    <span :style="{ color: scope.row.inspPblmCode.indexOf('$E$')>0 ? '#ED3F14' : scope.row.inspPblmCode.indexOf('$W$')>0 ? '#E7E708' : '' }">
                      {{ scope.row.inspPblmCode.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                    </span>
                  </div>
                </el-popover>
              </div>
              <div v-else>
                <span :style="{ color: scope.row.inspPblmCode.indexOf('$E$')>0 ? '#ED3F14' : scope.row.inspPblmCode.indexOf('$W$')>0 ? '#E7E708' : '' }">
                  {{ scope.row.inspPblmCode.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                </span>
              </div>
            </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">
              <div v-if="scope.row.inspPblmCate.indexOf('$W$')>0">
                <el-popover trigger="hover" placement="top">
                  <p>请检查"严重程度"与"问题标准序号"、"问题标准附件编号"是否匹配;选择继续填报,此条数据将不会入库.</p>
                  <div slot="reference" class="name-wrapper">
                    <span :style="{ color: scope.row.inspPblmCate.indexOf('$E$')>0 ? '#ED3F14' : scope.row.inspPblmCate.indexOf('$W$')>0 ? '#E7E708' : '' }">
                      {{ scope.row.inspPblmCate.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                    </span>
                  </div>
                </el-popover>
              </div>
              <div v-else>
                <span :style="{ color: scope.row.inspPblmCate.indexOf('$E$')>0 ? '#ED3F14' : scope.row.inspPblmCate.indexOf('$W$')>0 ? '#E7E708' : '' }">
                  {{ scope.row.inspPblmCate.replace(/\$E\$/g,'').replace(/\$W\$/g,'') }}
                </span>
              </div>
            </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\$/g,'') }}
                </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\$/g,'') }}
                </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 "@util/gw_ajax_request.js";
export default {
  props: ['tableData','cacheId','uploadButtonState'],
  components: {},
  data() {
    return {
      dialogVisible: true,
      reUploadState:false,
      confirmUploadState:true,
      rDisabled:false,
      cDisabled:false,
      title:'水闸问题批量导入验证页面(验证通过√)',
      uploadLoading: false,
      buttonState: false,
      updateState: '1',
    };
  },
  mounted(){
    if(this.uploadButtonState != undefined){
      this.buttonState = this.uploadButtonState;
    }
  },
  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/pblm/insert/info?cacheId=${this.cacheId}&userId=${this.persId}&updateState=${this.updateState}&orgType=006`).then(res => {
        console.log(res)
        this.$alert(res.data.key, '信息', {
          dangerouslyUseHTMLString: true,
          callback: action => {
            this.uploadLoading = false;
            this.buttonState = true;
            this.handleClose();
          }
        });
        // 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;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>