fj-dc-ui/.svn/pristine/92/928b2ec4afd65b0128f423ffdfa4c5482f738cf8.svn-base

<template>
  <el-container class="monthReport">
    <el-dialog title="监督进度月报" width="70%" :visible.sync="monthDialogVisible" modal-append-to-body append-to-body :before-close="closeDialog">
    <el-card class="box-card">
       <h2 class="title_monthReport">山东省水利厅业务性监督检查开展情况表</h2>
      <el-form :inline="true" size="small" class="demo-form-inline" label-width="120px">
        <el-form-item label="年月范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            format="yyyy-MM"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="牵头处室" size="mini">-->
<!--          <el-input v-model="searchForm.leadDep" placeholder="牵头处室" clearable></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查计划事项">-->
<!--          <el-input v-model="searchForm.chkName" placeholder="类别" clearable></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="检查形式">
          <el-select v-model="searchForm.chkForm" placeholder="请选择" clearable>
            <el-option  label="暗访" value="1"></el-option>
            <el-option  label="明察" value="2"></el-option>
            <el-option  label="书面" value="3"></el-option>
            <el-option  label="四不两直" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="searchBtn">查询</el-button>
          <el-button type="primary" size="mini" @click="addBtn">添加</el-button>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" size="mini" @click="closeDialog" style="float:left;">返回年度检查计划</el-button>
        <el-table
          border
          ref="table"
          :height="tableHeight"
          show-summary
          :summary-method="getSummaries"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="loading">
          <el-table-column align="center" type="index" label="序号" width="80">
            <template slot-scope="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="200"
            prop="leadDep"
            label="牵头单位"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="200"
            prop="joinDep"
            label="参加单位"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="200"
            prop="chkName"
            label="检查计划事项"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="200"
            prop="chkForm"
            label="检查形式"
            :formatter="chkFormFormat"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="120"
            prop="chkMnth"
            :formatter="formatDate"
            label="年月"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="chkNote"
            width="300"
            label="监督检查开展情况"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="chkPers"
            width="120"
            label="检查人次"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="120"
            prop="chkPblm"
            label="检查发现问题数"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200"
            prop="chkLeder"
            label="厅领导参加检查人次"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="120"
            prop="trainNum"
            label="当月培训期次"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="120"
            prop="chkGroup"
            label="检查组次"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="120"
            prop="trainPers"
            label="参加培训人次"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="nextPlan"
            width="300"
            label="下一月计划"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            min-width="260"
            label="操作"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click.stop="lookOver(scope.row)">查看</el-button>
              <el-button type="success" size="mini" @click.stop="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click.stop="deleteData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin: 10px auto"
          background
          :pager-count="5"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout="sizes, total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      class="outerDialog custom_dialog"
      :title="dialogT+'统计月报'"
      width="60%"
      modal-append-to-body
      append-to-body
      @close="closeAddDialog"
      v-if="addDialogVisible"
      :visible.sync="addDialogVisible">
      <div style="width: 100%;height:100%;">
        <el-form ref="addForm" label-width="300px">
          <el-form-item label="检查形式" required>
            <el-select v-model="addForm.chkForm" placeholder="请选择检查形式">
              <el-option  label="暗访" value="1"></el-option>
              <el-option  label="明察" value="2"></el-option>
              <el-option  label="书面" value="3"></el-option>
              <el-option  label="四不两直" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年月" required>
            <el-date-picker
              v-model="addForm.chkMnth"
              type="month"
              placeholder="选择年月">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="监督检查开展情况" required>
            <el-input type="textarea" v-model="addForm.chkNote" placeholder="请输入监督检查开展情况"></el-input>
          </el-form-item>
          <el-form-item label="检查人次" required>
            <el-input-number v-model="addForm.chkPers" placeholder="请输入检查人次"></el-input-number>
          </el-form-item>
          <el-form-item label="检查发现问题数" required>
            <el-input-number v-model="addForm.chkPblm" placeholder="请输入检查发现问题数"></el-input-number>
          </el-form-item>
          <el-form-item label="厅领导参见检查人次" required>
            <el-input-number v-model="addForm.chkLeder" placeholder="请输入厅领导参见检查人次"></el-input-number>
          </el-form-item>
          <el-form-item label="当月培训期次" required>
            <el-input-number v-model="addForm.trainNum" placeholder="请输入当月培训期次"></el-input-number>
          </el-form-item>
          <el-form-item label="检查组次" required>
            <el-input-number v-model="addForm.chkGroup" placeholder="请输入检查组次"></el-input-number>
          </el-form-item>
          <el-form-item label="参加培训人数" required>
            <el-input-number v-model="addForm.trainPers" placeholder="请输入参加培训人数"></el-input-number>
          </el-form-item>
          <el-form-item label="下一月计划" required>
            <el-input type="textarea" v-model="addForm.nextPlan" placeholder="请输入下一月计划"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="addForm.note" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" @click="addSubmit" style="margin-bottom: 30px;">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
      <el-dialog
        class="outerDialog custom_dialog"
        :title="'监督进度月报详细'"
        width="40%"
        modal-append-to-body
        append-to-body
        @close="closeDetailDialog"
        v-if="detailDialogVisible"
        :visible.sync="detailDialogVisible">
        <div style="width: 100%;height:100%;overflow: auto;">
          <table>
            <tr><td>牵头单位</td><td>{{detailObj.leadDep}}</td></tr>
            <tr><td>参加单位</td><td>{{detailObj.joinDep}}</td></tr>
            <tr><td>检查计划事项</td><td>{{detailObj.chkName}}</td></tr>
            <tr><td>检查形式</td><td>{{detailObj.chkForm | ChkForm}}</td></tr>
            <tr><td>年月</td><td>{{detailObj.chkMnth}}</td></tr>
            <tr><td>监督检查开展情况</td><td>{{detailObj.chkNote}}</td></tr>
            <tr><td>检查人次</td><td>{{detailObj.chkPers}}</td></tr>
            <tr><td>检查发现问题数</td><td>{{detailObj.chkPblm}}</td></tr>
            <tr><td>厅领导参加检查人次</td><td>{{detailObj.chkLeder}}</td></tr>
            <tr><td>当月培训期次</td><td>{{detailObj.trainNum}}</td></tr>
            <tr><td>检查组次</td><td>{{detailObj.chkGroup}}</td></tr>
            <tr><td>参加培训人数</td><td>{{detailObj.trainPers}}</td></tr>
            <tr><td>下一月计划</td><td>{{detailObj.nextPlan}}</td></tr>
            <tr><td>备注</td><td>{{detailObj.note}}</td></tr>
          </table>
        </div>
      </el-dialog>
    </el-dialog>
  </el-container>
</template>
<script>
    import {exportModel} from "@util/gw_exportModel";
    import request from '@util/gw_ajax_request'
    import receiver from "./receiver"
    export default {
        name: "",
        props: ['rowData'],
        data() {
            return {
                detailDialogVisible:false,
                dateRange:[],
                dialogT:"",
                monthDialogVisible:true,
                addDialogVisible:false,
                tableHeight:window.innerHeight-400,
                tableData:[],
                loading:false,
                pageNum:1,
                pageSize:10,
                total:0,
                searchForm:{
                  sttm:"",
                  entm:"",
                  leadDep:"",
                  chkName:"",
                  chkForm:""
                },
                YM:"",
                orgIdDefault:"",
                addForm:{
                   chkYearId:"",
                   chkForm:"",
                   chkMnth:"",
                   chkNote:"",
                   chkGroup:"",
                   chkPers:"",
                   chkPblm:"",
                   chkLeder:"",
                   trainNum:"",
                   trainPers:"",
                   nextPlan:"",
                   note:"",
                }

            }
        },
        filters:{
            ChkForm(val){
                return  val=="1"?"暗访":val=="2"?"明察":val=="3"?"书面":val=="4"?"四不两直":"";
            }
        },
        components: {
            receiver
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            orgId() {
                return localStorage.getItem('currentOrgId') ? localStorage.getItem("currentOrgId") : "";
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
        },
        mounted() {
           this.initTableData();
        },
        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];

                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (column.property=='chkPers' || column.property=='chkPblm' || column.property=='chkLeder' || column.property=='trainNum' || column.property=='chkGroup' || column.property=='trainPers') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            },
            closeDetailDialog(){
                this.detailDialogVisible = false;
            },
            lookOver(obj){
                this.detailObj = obj;
                this.detailObj.chkMnth = this.detailObj.chkMnth?this.formatDate(this.detailObj,{property:"chkMnth"},null,null):"";
                this.detailDialogVisible = true;
            },
            closeDialog(){
               this.$emit('closeDialogMonth')
            },
            formatDate(row, column, cellValue, index){

                var dateF = row[column.property];
                if(dateF){
                    var date = new Date(dateF);
                    return date.getFullYear()+"-"+((date.getMonth()+1)>9?(date.getMonth()+1):'0'+(date.getMonth()+1))
                }
                return "";
            },
            chkFormFormat(row, column, cellValue, index){
                return  row.chkForm=="1"?"暗访":row.chkForm=="2"?"明察":row.chkForm=="3"?"书面":row.chkForm=="4"?"四不两直":"";
            },
            async exportExcel() {
                this.searchForm.chkYearId = this.rowData.id;
                this.searchForm.persId = this.persId;
                if(this.dateRange&&this.dateRange.length>1&&this.dateRange[0]!=''&&this.dateRange[1]!=''){
                    this.searchForm.sttm = this.dateRange[0];
                    this.searchForm.entm = this.dateRange[1];
                }
                let url = "/pdcApi//bis/insp/plan/year/prg/export";
                let type = "POST";
                let exportName = "监督进度月报.xls"
                let result = await exportModel(type, url, exportName,JSON.stringify(this.searchForm));
            },
            deleteData(id){
                var _self = this;
                this.$confirm('确定删除该条数据吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/bis/insp/plan/year/prg/delete/'+id).then(res=>{
                        if(res.success){
                            _self.initTableData();
                        }else{
                            _self.$message.warning(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            edit(row){
                var obj = JSON.stringify(row);
                this.addDialogVisible = true;
                this.addForm = JSON.parse(obj);
                this.dialogT = "编辑";
            },
            addSubmit(){
                this.addForm.chkYearId = this.rowData.id;
                if(!this.addForm.chkForm){
                    this.$message.warning("请选择检查形式");
                    return;
                }
                if(!this.addForm.chkMnth){
                    this.$message.warning("请选择年月");
                    return;
                }
                if(!this.addForm.chkNote){
                    this.$message.warning("请输入监督检查开展情况");
                    return;
                }
                if(!this.addForm.chkPers){
                    this.$message.warning("请输入检查人次");
                    return;
                }
                if(!this.addForm.chkPblm){
                    this.$message.warning("请输入检查发现问题数");
                    return;
                }
                if(!this.addForm.chkLeder){
                    this.$message.warning("请输入厅领导参加检查人次");
                    return;
                }
                if(!this.addForm.trainNum){
                    this.$message.warning("请输入当月培训期次");
                    return;
                }
                if(!this.addForm.chkGroup){
                    this.$message.warning("请输入检查组次");
                    return;
                }
                if(!this.addForm.trainPers){
                    this.$message.warning("请输入参加培训人数");
                    return;
                }
                if(!this.addForm.nextPlan){
                    this.$message.warning("请输入下一月计划");
                    return;
                }
                var _self = this;
                request.post('/bis/insp/plan/year/prg/',this.addForm).then(res=>{
                    if(res.success){
                        _self.$message.success("保存成功");
                        _self.addDialogVisible = false;
                        _self.addForm = {};
                        _self.initTableData();
                    }else{
                        _self.$message.warning(res.message);
                    }
                })
            },
            selectOrgChange(data){
                this.addForm.unitName = data.name;
            },
            clearRecv(){
                this.addForm.unitName = "";
            },
            closeAddDialog(){
                this.addDialogVisible = false;
            },
            initTableData(){
                this.searchForm.chkYearId = this.rowData.id;
                this.searchForm.pageNum = this.pageNum;
                this.searchForm.pageSize = this.pageSize;
                this.searchForm.persId = this.persId;
                if(this.dateRange&&this.dateRange.length>1&&this.dateRange[0]!=''&&this.dateRange[1]!=''){
                    this.searchForm.sttm = this.dateRange[0];
                    this.searchForm.entm = this.dateRange[1];
                }
                this.loading = true;
                var _self = this;
                request.post(`/bis/insp/plan/year/prg/findPageList`,this.searchForm).then(res=>{
                    if(res.success){
                        _self.tableData = res.data.list;
                        _self.total = res.data.total;
                        _self.loading = false;
                        _self.$nextTick(()=>{
                            _self.$refs.table.doLayout();
                        })
                    }else{
                        _self.$message.warning(res.message)
                    }
                })
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.initTableData();
            },
            searchBtn(){
                this.initTableData();
            },
            addBtn(){
                this.addForm = {};
                this.addDialogVisible = true;
                this.dialogT = "添加"
            }
        }
    }
</script>

<style lang="scss" scoped>
  .monthReport >>>.el-dialog{
     margin-top: 10vh !important;
  }
  table{
    width: 100%;
    height:100%;
    border-collapse: collapse;
    margin-bottom: 30px;
  }
  table tr td{
    border:1px solid #cecece;
    height:35px;
    text-indent: 15px;
    padding-right: 15px;
  }
  table tr td:first-child{
    background:  #f2f1f1;
    width: 260px;
    text-align: right;
  }
  .monthReport{
     width: 100%;
     height:90%;
     margin: 0;
     padding: 0;
  }
  .box-card{
     width: calc(100% - 60px);
     height:calc(100% - 20px);
     margin: 0 auto;
     margin-top: 10px;
  }
  .title_monthReport{
     text-align: center;
     padding: 10px;
  }
  .note_monthReport{
    width: 100%;
    background-color: rgba(255, 251, 230, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 229, 143, 1);
    color: rgba(0, 0, 0, 0.447058823529412);
    font-size: 14px;
    padding: 10px;
  }
  .note_monthReport p:first-child{
     font-size: 16px !important;
  }
  .monthReport{
    .demo-form-inline{
      .el-form-item{
         margin-bottom: 5px;
         margin-top: 8px;
      }
    }
  }
</style>