fj-dc-ui/.svn/pristine/91/91f437063c87ec896e4e686bcc2d8941637cdd7f.svn-base

<template>
  <div>
    <el-dialog width="70%" append-to-body :modal="false" :title="title+'问题列表'" :visible.sync="dialogVisible" @close="dialogClose">
        <div style="text-align: left;width: 100%;height:100%;">
          <el-form ref="form" :inline="true" label-width="84px" style="display: flex;">
            <el-form-item label="问题名称">
              <el-input v-model="pblmNm" clearable autocomplete="off" style="width: 130px;"></el-input>
            </el-form-item>
            <el-form-item label="严重程度">
              <el-select v-model="pblmPasi" clearable placeholder="请选择" style="width: 130px;">
                <el-option
                  v-for="item in problemType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <div>
              <el-button  type="primary" @click="getProblemList">查 询</el-button>
            </div>
          </el-form>
          <el-table
            :data="tableData"
            border
            stripe
            v-loading='loading'
            :height="tableHeight">
            <el-table-column
              prop="pblmNm"
              label="问题名称"
              show-overflow-tooltip
              min-width="120">
            </el-table-column>
            <el-table-column
              prop="pblmDesc"
              label="问题阐述"
              show-overflow-tooltip
              min-width="180">
            </el-table-column>
            <el-table-column
              prop="pblmReason"
              show-overflow-tooltip
              min-width="160"
              label="主要原因分析">
            </el-table-column>
            <el-table-column
              prop="pblmPasi"
              show-overflow-tooltip
              min-width="100"
              label="严重程度">
              <template slot-scope="scope">
                <p v-if="scope.row.pblmPasi == 0"><span class="inspPblmCate" style="background: #27C19F;">一般</span></p>
                <p v-if="scope.row.pblmPasi == 1"><span class="inspPblmCate" style="background: #E6A23C;" >较重</span></p>
                <p v-if="scope.row.pblmPasi == 2"><span class="inspPblmCate" style="background: #F56C6C;" >严重</span></p>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="180">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="showDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination  :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>
    </el-dialog>
    <problem-detail-com v-if="showFileVisiual" :problemId="problemId" @dialogClose="dialogClose1"></problem-detail-com>
  </div>
</template>
<script>
import request from "@util/gw_ajax_request.js";
import ProblemDetailCom from '../Inspection/dialogCom/ProblemDetails2.vue'
export default {
    props: ["proPblmId","title"],
    components: {
        ProblemDetailCom
    },
    data(){
        return{
            pblmNm:"",
            pblmPasi:"",
            dialogVisible:true,
            tableData:[],
            loading:false,
            tableHeight:500,
            pageIndex:1,
            pageSize:10,
            total:0,
            problemType: [
                {label: '一般',value: '0'},
                {label: '较重',value: '1'},
                {label: '严重',value: '2'}
            ],
            showFileVisiual:false,
            problemId:""
        }
    },
    mounted(){
        this.getProblemList();
    },
    methods:{
        getProblemList(){
            this.loading = true
            let paramsObj = {
                pblmNm: this.pblmNm,
                pblmPasi: this.pblmPasi,
                rgstrId:this.proPblmId,
                pageNum:this.pageIndex,
                pageSize:this.pageSize
            }
            request.post(`/tac/pblm/info/pageProvincePblm`,paramsObj).then(res=>{

                if(res.success){
                    this.loading = false
                    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)
            })
        },
        showDetail(row){

           this.showFileVisiual = true;
           this.problemId = row.id;
        },
        pageIndexChange(val){
           this.pageIndex = val;
           this.getProblemList();
        },
        handleSizeChange(val){
            this.pageSize = val;
            this.getProblemList();
        },
        dialogClose(){
            this.$emit('closeDialog')
        },
        dialogClose1(){
            this.showFileVisiual = false;
            this.problemId = ""
        }
    },
    watch:{
        proPblmId(val){

        }
    }
}
</script>
<style scoped>
  .inspPblmCate{
    padding: 10px 10px 10px 10px;
    border-radius: 100px;
    color: white;
  }
    .custom_dialog .el-dialog{
        width: 55%;
    }
    .custom_dialog .el-dialog__body {
      padding: 30px 20px;
      color: #606266;
      font-size: 14px;
      height: 60vh;
      overflow: auto;
    }
    .left{

    }
</style>