fj-dc-ui/.svn/pristine/04/04cfd6aec21e8f9796c12e399e4b413347efdbbc.svn-base

<template>
  <el-container class="problem_list">
    <el-main style="padding: 10px 10px;">
      <div class="content_wrapper">
        <el-form ref="form" :inline="true" label-width="84px">
          <el-form-item label="附件序号">
            <el-input v-model="form.attach" placeholder="输入附件序号" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item label="问题类型">
            <el-select
              v-model="form.pblmType"
              clearable
              placeholder="请选择"
              @change="problemListTypeChange"
              style="width:140px"
            >
              <el-option
                v-for="(item,index) in problemTypeList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题类别">
            <el-select
              v-model="form.inspPblmsName"
              clearable
              value-key="inspPblmsName"
              placeholder="请选择"
              @change="problemListChange"
              style="width:140px"
            >
              <el-option
                v-for="(item,index) in problemList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查项目">
            <el-select
              v-model="form.checkPoint"
              clearable
              value-key="checkPointName"
              placeholder="请选择"
              style="width:140px"
            >
              <el-option
                v-for="(item,index) in currentCheckPointList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="问题描述">
                        <el-input v-model="form.pblmsDesc" placeholder="输入问题描述" clearable style="width: 140px"></el-input>
          </el-form-item>-->
          <el-form-item label="严重程度">
            <el-select v-model="form.inspPblmCate" placeholder="请选择" style="width: 140px">
              <el-option label="一般" value="0"></el-option>
              <el-option label="较重" value="1"></el-option>
              <el-option label="严重" value="2"></el-option>
              <el-option label="特别严重" value="3"></el-option>
            </el-select>
          </el-form-item>
          <div class="operate_btn">
            <el-button
              style="margin-left:0;padding:7px 10px;"
              type="primary"
              @click="getProblemList()"
            >查询</el-button>
            <el-button style="margin-left:0;padding:7px 10px;" type="primary" @click="toAddFile">添加</el-button>
            <el-button type="success" @click="exPort" icon="el-icon-upload2">导出</el-button>
            <!-- <el-button style="margin-left:0;padding:7px 10px;" type="success" @click="exportExcel()">导出excel</el-button> -->
            <!-- <el-button style="margin-left:0;padding:7px 10px;" type="success" @click="exportWord()">导出word</el-button> -->
          </div>
        </el-form>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          border
          stripe
          v-loading="loading"
          :height="tableHeight"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="attach" label="附件序号" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sn" label="问题序号" min-width="100"></el-table-column>
          <el-table-column prop="pblmType" label="问题类型" min-width="120"></el-table-column>
          <el-table-column prop="inspPblmsName" label="问题类别" min-width="120"></el-table-column>
          <el-table-column prop="checkPoint" label="检查项目" min-width="120"></el-table-column>
          <el-table-column prop="pblmDesc" label="问题描述" min-width="500"></el-table-column>
          <el-table-column label="严重程度">
            <el-table-column prop="inspPblmCate" label="一般" show-overflow-tooltip min-width="60">
              <template slot-scope="scope">{{scope.row.inspPblmCate == '0' ? '√' : ''}}</template>
            </el-table-column>
            <el-table-column prop="inspPblmCate" label="较重" show-overflow-tooltip min-width="60">
              <template slot-scope="scope">{{scope.row.inspPblmCate == '1' ? '√' : ''}}</template>
            </el-table-column>
            <el-table-column prop="inspPblmCate" label="严重" show-overflow-tooltip min-width="60">
              <template slot-scope="scope">{{scope.row.inspPblmCate == '2' ? '√' : ''}}</template>
            </el-table-column>
            <el-table-column prop="inspPblmCate" label="特别严重" show-overflow-tooltip min-width="60">
              <template slot-scope="scope">{{scope.row.inspPblmCate == '3' ? '√' : ''}}</template>
            </el-table-column>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="toEditProblem(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="deleteProblem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align: center;"
          :pager-count="5"
          :current-page="pageIndex"
          background
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          @current-change="pageIndexChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>

      <add-problem-com
        v-if="addFileVisiual"
        :titleType="titleType"
        :rowData="rowData"
        :currentNodeId="currentNodeId"
        :objId="objId"
        :listType="type"
        :pertype="pertype"
        @dialogClose="dialogClose"
      ></add-problem-com>
      <export-excel
        v-if="exportEvent"
        @dialogClose="dialogClose"
        :currentNodeId="currentNodeId"
        :listType="type"
      ></export-excel>
      <export-word
        v-if="exportWordDialog"
        @dialogClose="dialogClose"
        :problemId="problemId"
        :professionType="type"
      ></export-word>
    </el-main>
  </el-container>
</template>
<script>
import request from "@util/gw_ajax_request.js";
import { formatDateTime2 } from "@util/gw_date.js";
import addProblemCom from "./dialogCom/addInspectionProblemDcGcjsyyx.vue"; //添加
import ExportExcel from "./dialogCom/ExportExcel.vue"; //导出报表excel
import ExportWord from "./dialogCom/ExportWord.vue";
import { exportModel } from "@util/gw_exportModel"; //导出非报表
export default {
  props: [
    "currentNodeId",
    "type",
    "objId",
    "projectName",
    "pertype",
    "backStatus"
  ],
  data() {
    return {
      form: {
        attach: "", //字段是附件(序号)
        attachName: "",
        attachType: "水利工程建设",

        checkPoint: "",
        className: "",
        count: true,
        fields: "",
        id: "",
        inspPblmCate: "", //问题状态(严重程度)，0：一般，1:较重，2:严重
        isExport: " ",
        offset: "",
        orderBy: "",
        pblmType: "",
        sheet: "",
        sheetName: "",
        sn: "",
        inspPblmsName: "", //问题类别
        checkPointName: "", //检查项目
        objInspPblms: "",
        pageNum: 1,
        pageSize: 20,
        pblmDesc: "" //问题描述
        // snNum: "",    //问题序号
      },
      currentCheckPointList: [],
      problemList: [],
      problemTypeList: [],
      pblmPasi: "", //严重程度
      pblmNm: "",
      tableData: [],
      problemId: "",
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      peiXunStateData: [],
      loading: false,
      addFileVisiual: false,
      exportEvent: false, //导出对话框v-if
      exportWordDialog: false,
      tableHeight: window.innerHeight - 200,
      dialogFormVisible: false,
      titleType: "添加",
      rowData: {} //编辑时的行数据
    };
  },
  components: {
    addProblemCom,
    ExportExcel,
    ExportWord
  },
  computed: {
    persId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    }
  },
  mounted() {
    this.getPblmTypeMenu(); // 获取问题类型
    this.getProblemList(); //查询
  },
  activated() {},
  methods: {
    // add by luochenghai 20191129 后台获取问题类别
    getPblmTypeMenu() {
      let _self = this;
      let result = [];
      let params = { attachType: this.form.attachType };
      request.post("/obj/key/Pblms/getPblmTypesList", params).then(res => {
        if (res.success) {
          result = res.data;
        }
        _self.problemTypeList = result;
        console.log(_self.problemTypeList);
      });
    },

    //根据 检查项目 进行模糊查询
    problemListTypeChange: function(item) {
      let _self = this;
      let params = { pblmType: item };
      request.post("/obj/key/Pblms/getInspPblmsNameList", params).then(res => {
        if (res.success) {
          _self.problemList = res.data;
        }
      });
    },

    problemListChange: function(item) {
      let _self = this;
      let params = { inspPblmsName: item };
      request.post("/obj/key/Pblms/getCheckPointList", params).then(res => {
        if (res.success) {
          _self.currentCheckPointList = res.data;
        }
      });
    },
    // end
    // 获取数据的函数
    getProblemList() {
      this.loading = true;
      request
        .post(`/obj/key/Pblms/getObjKeyPblmsPage`, this.form)
        .then(res => {
          if (res.success) {
            this.loading = false;
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
          } else {
            this.loading = false;
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    toAddFile() {
      this.titleType = "添加";
      this.addFileVisiual = true;
    },
    //导出Excel
    exportExcel() {
      this.exportEvent = true;
    },
    //导出Word
    exportWord() {
      this.exportWordDialog = true;
    },
    toEditProblem(row) {
      this.titleType = "编辑";
      //Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）
      Object.assign(this.rowData, row);
      this.addFileVisiual = true;
    },
    // 删除
    deleteProblem(row) {
      // console.log(row)
      this.$confirm("确认删除该问题吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        request.post(`/obj/key/Pblms/${row.id}`).then(res => {
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getProblemList(); //删除之后立刻重新拉取数据
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      });
    },
    pageIndexChange(val) {
      this.form.pageNum = val;
      this.getProblemList();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getProblemList(); //查询
    },
    dialogClose() {
      this.addFileVisiual = false;
      this.exportEvent = false;
      this.exportWordDialog = false;
      this.getProblemList(); //查询
    },
    pblmPasiChange(val) {
      this.getProblemList(); //查询
    },
    handleSelectionChange(val) {
      let problemArr = [];
      val.forEach(ele => {
        problemArr.push(ele.id);
      });
    },

    formatDate(date) {
      return formatDateTime2(date);
    },

    exPort() {
      var flag = this.$confirm("此操作导出当前页，请问是否确定导出？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let _self = this;
        let data = {};
        data.pageNum = _self.form.pageNum;
        data.pageSize = _self.form.pageSize;

        data.attach = _self.form.attach;
        data.sn = _self.form.sn;
        data.inspPblmsName = _self.form.inspPblmsName;
        data.checkPointName = _self.form.checkPointName;
        data.pblmDesc = _self.form.pblmDesc;
        data.inspPblmCate = _self.form.inspPblmCate;
        data.type = _self.form.type;
        data.isExport = "1";
        let datas = JSON.stringify(data);

        let url = `/pdcApi/dc/insp/pblms/getObjInspPblmsPage`;
        let downloadName = "水利工程建设与运行督查问题清单.xls";
        let type = "post";
        let result = exportModel(type, url, downloadName, datas);
      });
    }
  },
  watch: {
    currentNodeId(val) {
      this.getProblemList(); //查询
    },
    type(val) {
      this.getProblemList(); //查询
    },
    backStatus(val) {
      if (val) {
        //回退状态为成功时
        this.getProblemList(); //查询
      }
    }
  }
};
</script>
<style lang="scss">
.problem_list {
  .project_title {
    line-height: 50px;
    text-align: center;
    color: #333;
    border-bottom: solid 1px #eee;
  }
  h4 {
    line-height: 50px;
    color: #444;
  }
  .operate_btn {
    float: right;
    margin-bottom: 10px;
  }
  .inspPblmCate {
    padding: 2px 10px;
    border-radius: 10px;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .el-form-item__label {
    font-size: large;
    color: #333;
  }
  .el-form--inline .el-form-item {
    margin-right: 6px;
  }
  .el-table__header th {
    font-size: large !important;
  }
  tr.el-table__row {
    font-size: large;
  }
}
</style>