fj-dc-ui/.svn/pristine/d8/d8fc79ec508ab0801bd2142d3db30df8188c7012.svn-base

<template>
  <div id="shuikutianbaoId">
    <el-dialog :title="currentObjectName" @close="closeDialog" :visible.sync="dialogFormVisible">
      <div v-loading="tableLoading" :style="{'height':testHeight+'px',}" ref="dialogHeight">
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column
            show-overflow-tooltip="true"
            prop="inspPblmsName"
            label="督查问题类别"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            show-overflow-tooltip="true"
            min-width="120"
            prop="inspPblmCate"
            label="问题严重程度"
          >
            <template slot-scope="scope">
              <span
                style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.inspPblmCate == 0"
              >一般</span>
              <span
                style="padding: 3px 10px;background:#E6A23C;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.inspPblmCate == 1"
              >较重</span>
              <span
                style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.inspPblmCate == 2"
              >严重</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="120"
            prop="ifCasePblm"
            label="是否典型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.ifCasePblm == 1">典型</span>
              <span v-if="scope.row.ifCasePblm == 0">非典型</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="collTime"
            label="上报时间"
            align="center"
            :formatter="timestampToTime"
            show-overflow-tooltip="true"
            min-width="170"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="address"
            min-width="100"
            label="操作"
            show-overflow-tooltip
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="showDetails(scope.row.pblmId)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加/编辑人员弹窗 -->
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog class="outerDialog" title="问题详情" :visible.sync="qusDetails">
      <dcdxTableListDetails ref="xianqing" :dialogHeightA="dialogHeightA" :problemId="currentProblemId"></dcdxTableListDetails>
      <!-- <span slot="footer">
        <el-button style="margin-top:5px;" @click="qusDetails = false">返回</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import request from "../../utils/gw_ajax_request.js";

export default {
  components: {
      dcdxTableListDetails: resolve => {
            require(["../../views/duChaWenTi/supervisionDetails_shuihui.vue"], resolve);
        }
  },
  props: [
    "currentObjectRgstrId",
    "currentObjectId",
    "currentObjectName",
    "objType",
  ],

  data() {
    return {
      testHeight: window.innerHeight * 0.7,
      tableLoading: true,
      dialogHeightA: "",
      value: "",
      dialogShow: false,
      currentViewId: "基础信息",
      dialogFormVisible: true,
      pageNum: 1,
      pageSize: 10,
      problemForm: {},
      tableData: [],
      qusDetails: false,
      currentProblemId: '',
    };
  },
  computed: {
    persId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    }
  },
  mounted() {
    this.getQusList();
    this.$nextTick(() => {
      this.dialogHeightA = this.$refs.dialogHeight.offsetHeight - 80;
    });
  },

  watch: {},

  methods: {
    getQusList() {
      this.problemForm.presId = this.persId;
      this.problemForm.objId = this.currentObjectId;
      this.problemForm.objType = this.objType;
      this.problemForm.pageNum = this.pageNum;
      this.problemForm.pageSize = this.pageSize;
      request
        .post(`/dc/insp/pblm/list/${this.persId}`, this.problemForm)
        .then(res => {
          if (res.success) {
            this.tableData = res.data.list;
            this.tableLoading =false;
          }
        });
    },
    showDetails(id) {
      this.currentProblemId = id;
      this.qusDetails = true;
    },
    appearDialog(type) {
      this.dialogShow = true;
      // this.problemSmallType = type
    },
    closePDialog() {
      this.dialogShow = false;
    },
    showDialog() {
      this.dialogFormVisible = true;
    },
    cancelHandler() {
      this.$emit("cancelHandler");
    },
    addShuiKuSuccess() {
      this.$emit("addShuiKuSuccess");
    },
    closeDialog() {
      this.$emit("cancelHandler");
    },
    timestampToTime(row, column) {
      var date = new Date(row.collTime);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : "0" + date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    }
  }
};
</script>

<style>
#shuikutianbaoId .el-dialog {
  margin-top: 10vh;
}
#shuikutianbaoId .el-dialog .el-dialog__body {
  padding: 5px 20px;
}
</style>