fj-dc-ui/.svn/pristine/c5/c5a5ff3a1d5dfe59bb9c79b0cb52f07b7a5961d3.svn-base

<template>
  <div style="height:100%;width:100%;">
    <el-container style="height:100%;width:100%;">
      <el-aside width="320px"  style="border-right:2px solid #d5d5ff;text-align: center" :style="{'max-height':testHeight+'px','height':testHeight+'px'}">
        <el-button size="mini" :class="tabType==1 ? 'skactive' : 'sknormal'" @click="tabChange('1')">当前数据</el-button>
<!--        <el-button size="mini" :class="tabType==2 ? 'skactive' : 'sknormal'" @click="tabChange('2')">历史数据</el-button>-->
        <el-button size="mini" :class="tabType==0 ? 'skactive' : 'sknormal'" @click="tabChange('0')">全部数据</el-button>
        <div class="tree" style="
         height: calc(100% - 50px);
          width: 100%;
          overflow: auto;
          display: inline-flex;">
          <el-tree
            :highlight-current="true"
            style="height:100%;"
            :data="treeData"
            node-key="id"
            :expand-on-click-node="false"
            @node-click = 'treeNodeClickHandler'
            ref="jigou_tree"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span style="float:left;">{{ data.pnm}}

                    </span>
            </div>
          </el-tree>
        </div>

      </el-aside>
      <!-- 主要窗口 -->
      <el-main id="dxdcListMainsk" style="padding:5px 20px;">
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" size="mini" class="demo-form-inline" style="padding-left: 10px;">
              <el-form-item label="督查状态">
                <el-select v-model="dcType" clearable placeholder="督查状态">
                  <el-option label="未督查" value="0"></el-option>
                  <el-option label="督查中" value="1"></el-option>
                  <el-option label="已督查" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="行政区名称">
                <addvSearch
                  v-model="adName"
                  :maxHeight='300'
                  :maxWidth='250'
                  :rootAddCode='curAdcode_long'
                  :level='"3"'
                  :nameOrCode="'name'"
                ></addvSearch>
              </el-form-item>
              <el-form-item label="对象名称">
                <el-input v-model="depName" placeholder="对象名称"></el-input>
              </el-form-item>
              <el-form-item label="所在组">
                <el-autocomplete v-model="groupName" clearable value-key='nm' :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                                 @select="handleSelect"></el-autocomplete>
              </el-form-item>
              <el-form-item label="督查时间">
                <div style="display: flex;">
                  <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    style="width:280px"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-table
          ref="table"
          border
          :height="tableHeight"
          :data="skDataList"
          style="width: 100%"
          v-loading="expLoading">

          <el-table-column prop="adName" label="行政区划" show-overflow-tooltip min-width="150" align="center"></el-table-column>
          <el-table-column prop="nm" label="对象名称" min-width="200" align="center" ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="depType"
            :formatter="unitFormat"
            label="单位类型"
            min-width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="tmpType"
            :formatter="industryFormat"
            label="行业类型"
            min-width="100"
          ></el-table-column>
          <el-table-column prop="groupName" label="所在组" show-overflow-tooltip min-width="100" align="center"></el-table-column>
          <el-table-column prop="intm1" label="督查时间" show-overflow-tooltip min-width="100" align="center"></el-table-column>
          <el-table-column prop="uptm" label="更新时间" align="center" :formatter="formatDate" min-width="100"></el-table-column>
          <el-table-column
            prop="wtruStat"
            label="计划用水户节约用水情况"
            align="center"
            min-width="230">
            <template slot-scope="scope">
              <p style="cursor:pointer;color:#F56C6C;" v-if="scope.row.wtruStat == 0 || !scope.row.wtruStat">待填报</p>
              <p style="cursor:pointer;color:#fbb56d" v-if="scope.row.wtruStat == 1">未完成</p>
              <p style="cursor:pointer;color:#67C23A" v-if="scope.row.wtruStat == 2">已完成</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="unitStat"
            label="取水口及监管情况"
            align="center"
            min-width="230">
            <template slot-scope="scope">
              <p style="cursor:pointer;color:#F56C6C;" v-if="scope.row.unitStat == 0 || !scope.row.unitStat">待填报</p>
              <p style="cursor:pointer;color:#fbb56d" v-if="scope.row.unitStat == 1">未完成</p>
              <p style="cursor:pointer;color:#67C23A" v-if="scope.row.unitStat == 2">已完成</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="督查状态"
            align="center"
            min-width="130">
            <template slot-scope="scope">
               <span
                 style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                 v-if="scope.row.state == 0"
               >未督查</span>
              <span
                style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.state == 1"
              >督查中</span>
              <span
                style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.state == 2"
              >已督查</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="360" fixed="right" v-if="ownPriv('manage') || ownPriv('revoke')">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: center">
                  <div v-if="ownPriv('manage')">
                    <el-button size="mini" type="success" v-if="scope.row.rgstrId " plain @click="toAddMember('编辑',scope.row)" :disabled="scope.row.state == '2'">督查</el-button>
                    <el-button size="mini" type="danger" v-if="scope.row.rgstrId" plain @click="deleteMember(scope.row)" :disabled="scope.row.state == '2'">删除</el-button>
                    <el-button size="mini" type="danger" v-if="scope.row.rgstrId" plain @click="submitHandler(scope.row)" :disabled="scope.row.state == '2'">提交</el-button>
                  </div>
                 <el-button size="mini" type="warning" style="margin-left: 10px;" v-if="scope.row.rgstrId && scope.row.state == '2'" plain @click="toCheck(scope.row)">查看</el-button>
                  <div v-if="ownPriv('revoke')" style="padding-left: 10px;">
                    <el-button size="mini" type="warning" v-if="scope.row.rgstrId && scope.row.state == '2'" plain @click="revoke(scope.row)">撤回</el-button>
                  </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background  :pager-count="5" :current-page="pageIndex"
                       :page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50, 100]"
                       layout="sizes, total, prev, pager, next" :total="total"
                       @current-change="pageIndexChange" @size-change="handleSizeChange"
        ></el-pagination>
      </el-main>
      <!-- 填报 -->
      <jhyshqskTab v-if="showShuiKuTianBao" :rowData="rowData" :currentObjectRgstrId="currentObjectRgstrId"
               :currentResCode="currentResCode" :currentObjectId="currentObjectId"
               :currentObjectName="currentResName"
               :pType="pType"
               :openType="openType"
               @cancelHandler="cancelHandler" @addShuiKuSuccess="addShuiKuSuccess"></jhyshqskTab>
    </el-container>
  </div>
</template>

<script>
    import request from '../../utils/gw_ajax_request.js'
    import {dateFormat} from '../../utils/gw_date.js'
    import {getList_jhyshqsk} from "../../api/duChaTianBao.js";
    import addvSearch from "@widget/addvSearch.vue"
    import provTreeList from "../../widgets/provTreeList.vue";
    import jhyshqskTab from "../duChaTianBao/jhyshqskTab.vue"
    import {curAdcode_short,curAdcode_long} from '@util/global_variable.js'

    export default {
        components: {
            provTreeList: provTreeList,
            jhyshqskTab:jhyshqskTab,
            addvSearch
        },
        props: [],

        data() {
            return {
                openType:false,
                tabType:"0",//0全部数据，1当前数据，2历史数据
                dateRange:[],
                lyjg:[],
                utTypeL:[
                    {id:'1',name:'企业'},
                    {id:'2',name:'机关'},
                    {id:'3',name:'学校'},
                    {id:'4',name:'2019整改'},
                    {id:'5',name:'政府机关'}
                ],
                utPptL:[
                    {id:'1',name:'节水型'},
                    {id:'2',name:'非节水型'}
                ],
                depName:"",
                wintCode:"",
                engScale:'',
                orgName:'',
                groupName:'',
                groupId:'',
                groups:[],
                // sttm:'',
                // ettm:'',
                adName:'',
                treeData:[],
                dxdcMainHeight: window.innerHeight - 304,
                testHeight: window.innerHeight - 111,
                skDataList: [],
                pageIndex:1,
                pageSize:20,
                total:0,
                tableHeight:0,
                currentResCode:'',
                currentResName:'',
                currentObjectId:'',
                currentObjectRgstrId:'',
                currentObjectInfoObject:null,
                showShuiKuTianBao:false,
                currentAdCode:'',
                currentNodeId:'',
                rsvrName:'',
                dcType:'',
                rowData:'',
                disabled:true,
                showShuiKuTianBaoPl:false,
                downIcon:'el-icon-download',
                expLoading:false,
                //
                repeatId: '',
                showDuchaDetails: false,
                zerenrenLabel: '"三个责任人"落实情况',
                pType: 120,
                fillTableData: [],   //根据不同省份赋值
                xskInfoDialog: false,
                currentDuchaTpe: false,
                currentRsCode: '',
                xskRgstrId:'',
                currentObjId:'',
                currentRsName:'',
                endTime: '',
                curTime: new Date().getTime(),
                flage: false,
                unitList:[{label:"企业",value:"1"},{label:"机关",value:"2"},{label:"学校",value:"3"},{label:"医院",value:"4"},{label:"宾馆",value:"5"},{label:"高校",value:"6"},{label:"其他",value:"7"}],
                industryList:[{label:"节水型",value:"1"},{label:"非节水型",value:"2"}]
            };
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            isAdmin:function(){
                return localStorage.getItem("isAdmin")? localStorage.getItem("isAdmin"): ''
            },
            currentRlcode(){
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
            isJiangXi(){
                return this.currentRlcode.indexOf('36') == '0' ? true :false
            },
            curAdcode_short(){
                return curAdcode_short
            },
            curAdcode_long(){
                return curAdcode_long
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
                let _self = this;
                window.onresize = function() {
                    _self.tableHeight = window.innerHeight - _self.$refs.table.$el.offsetTop - 50
                }
            })
            this.getSkDataList();
            this.getAllGroup();
        },
        activated(){
            this.getLeftTreeData();
            this.currentNodeId = "";
            this.rsvrName = "";
            this.dcType = "";
            this.getSkDataList();
        },
        watch: {
            currentNodeId(n,o){
                this.getSkDataList();
            },
            groupName(n,o){
                if(n==''){
                    this.groupId = '';
                }
            },
            endTime(n,o){
                this.flage = this.endTime ? (eval(this.endTime) < eval(this.curTime) ? true : false) : false
            }
        },

        methods: {
            industryFormat(row, column){
                var name = "";
                this.industryList.forEach((item,index) =>{
                    if(row[column.property] == item.value){
                        name = item.label;
                    }
                })
                return name;
            },
            unitFormat(row, column){
                var name = "";
                this.unitList.forEach((item,index) =>{
                    if(row[column.property] == item.value){
                        name = item.label;
                    }
                })
                return name;
            },
            tabChange(tabType){
                this.tabType = tabType;
                this.currentNodeId = "";
                this.getAllGroup();
                this.getLeftTreeData();
                this.getSkDataList();
            },
            //获取所有的组
            getAllGroup(){
                var _self = this;
                request.get('/dc/user/getGroupByPersid',{params:{'persid':this.persId,'ptype':this.pType,'tabType':this.tabType}}).then((res)=>{
                    if(res.success){

                        _self.groups = res.data;
                    }
                })
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.groups;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1500 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.nm.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
                };
            },
            handleSelect(item) {
                console.log(item);
                this.groupId = item.id;
            },
            getLeftTreeData(){
                var _self = this;
                _self.lyjg = [];
                request.get('/dc/organization/base/getAllNode',{params:{'userId':this.persId,'orgType':this.pType,'tabType':this.tabType}}).then((res)=>{
                    let data = res.data
                    data.forEach(ele => {
                        if(ele.pid == null || ele.pid == ''){
                            ele.pid = '116'
                        }
                        if(ele.id.length == 6){
                            _self.lyjg.push(ele);
                        }
                    });
                    data = _self.getTrees(data)
                    _self.treeData = data;
                    _self.endTime = data[0]['entm']
                })
            },
            //格式化树形数据
            getTrees(list) {
                //@wxcwater重写方法 适应多个树
                let highLevelLength = 99;//预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
                let _self =this;
                list.forEach((item,index)=>{
                    item['pidLength'] = item.pid&&item.pid!=''?item.pid.length:0;
                    if(highLevelLength>item.pidLength){
                        highLevelLength = item.pidLength;
                    }
                });
                console.log(highLevelLength);
                let heightLevelNode = [];
                list.forEach((item,index)=>{

                    if(highLevelLength>=item.pidLength){
                        heightLevelNode.push(item);
                    }
                });

                list.forEach((item,index)=>{
                    heightLevelNode.forEach((pItem)=>{
                        _self.addTreeNode(pItem,item);
                    });

                });
                console.log(heightLevelNode);
                return heightLevelNode;
            },

            addTreeNode:function(treeNode,leafNode){
                let _self = this;
                if(!treeNode.hasOwnProperty('children')){
                    treeNode['children'] = [];
                }
                if(leafNode.pid == treeNode.id){
                    treeNode.children.push(leafNode);
                    return;
                }
                treeNode.children.forEach((item) => {
                    _self.addTreeNode(item,leafNode);
                });
            },
            treeNodeClickHandler:function(data,node,tree){
                this.endTime = data['entm']
                this.currentNodeId = data.id;
            },
            provTreeSelectChangeHandler:function(params){
                this.currentAdCode = params.likeCode;
                this.getSkDataList();
            },
            formatDate(row,column){
                if(row.uptm){
                    return (dateFormat(row.uptm,'yyyy-MM-dd'));
                }
            },
            getSkDataList:function(){
                let paramStartDate = '';
                let paramEndDate = '';
                if(this.dateRange&&this.dateRange.length>1&&this.dateRange[0]!=''&&this.dateRange[1]!=''){
                    paramStartDate = this.dateRange[0];
                    paramEndDate = this.dateRange[1];
                }
                let paramsData = {
                    'presId': this.persId,
                    "pType": this.pType,
                    "pageSize": this.pageSize,
                    'pageNum': this.pageIndex,
                    'id': this.currentNodeId,
                    'nm': this.depName,
                    'state': this.dcType,
                    'adName': this.adName,
                    'sttm': paramStartDate,
                    'entm': paramEndDate,
                    'riverId': this.orgName,
                    'wintCode': this.wintCode,
                    'groupId': this.groupId,
                    'tabType': this.tabType
                }
                getList_jhyshqsk(paramsData).then(
                    (res) => {
                        console.log(res);
                        res.data.list.forEach((item)=>{
                            if(item.intm){
                                item.intm1 = dateFormat(item.intm,'yyyy-MM-dd');
                            }
                        })
                        this.skDataList = res.data.list;
                        this.total = res.data.total;
                        this.$nextTick(() => {
                            this.$refs.table.doLayout();
                        });
                    }
                );
            },
            onSubmit(){
                this.getSkDataList();
            },
            skCancelHandler() {
                this.xskInfoDialog = false
            },
            toCheck(rowData){

                var _self = this;
                this.rowData = rowData;
                _self.currentResCode =  this.rowData.code;
                _self.currentObjectId = this.rowData.objId;
                _self.currentObjectRgstrId = this.rowData.rgstrId;
                _self.currentResName = this.rowData.nm;
                _self.showShuiKuTianBao = true;
                _self.openType = false;
                this.$nextTick(() => {
                    if (this.$refs['xskTianBaoRef']) {
                        this.$refs['xskTianBaoRef'].showDialog();
                    }
                })

            },
            toAddMember(type,rowData){
                var _self = this;
                this.rowData = rowData;
                _self.currentResCode =  this.rowData.code;
                _self.currentObjectId = this.rowData.objId;
                _self.currentObjectRgstrId = this.rowData.rgstrId;
                _self.currentResName = this.rowData.nm;
                _self.showShuiKuTianBao = true;
                _self.openType = true;

            },
            cancelHandler(){
                this.showShuiKuTianBao = false;
            },
            addShuiKuSuccess(){
                this.getSkDataList();
            },
            deleteMember(obj){
                var _self = this;
                this.$confirm('此操作将督查对象从列表中删除，确认删除该对象吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get(`/supervision/plan/cleanObjDataByObjId?objType=${this.pType}&objId=${obj.objId}`).then((res)=>{
                        if(res.success){
                            _self.pageIndexChange();
                            _self.$message.success('删除成功')
                        }else{
                            _self.$message.error(res.message)
                        }
                    });
                }).catch(() => {

                });

            },
            revoke(rowData){
                var _self = this;
                this.$confirm('确定要撤销当前信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let formObj = {
                        "rgstrId":rowData.rgstrId,
                        "state":"1"
                    }
                    request.post('/bis/insp/jspwiu/', formObj).then((res) => {
                        if (res.success) {
                            _self.addShuiKuSuccess();
                            _self.$message.success("提交成功");
                        } else {
                            _self.cancelHandler();
                        }
                    });
                }).catch(() => {

                });
            },
            submitHandler(rowData){
                if(rowData.unitStat!="2" && rowData.wtruStat!="2"){
                    this.$message.warning("取水口监管情况和计划用水户节约用水情况填报未完成！");
                    return;
                }
                var _self = this;
                this.$confirm('请确认所有信息填报完毕？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let formObj = {
                        "rgstrId":rowData.rgstrId,
                        "state":"2"
                    }
                    request.post('/bis/insp/jspwiu/', formObj).then((res) => {
                        if (res.success) {
                            _self.addShuiKuSuccess();
                            _self.$message.success("提交成功");
                        } else {
                            _self.cancelHandler();
                        }
                    });
                }).catch(() => {

                });


            },
            pageIndexChange(val){
                console.log(val);
                this.pageIndex = val;
                this.getSkDataList();
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.getSkDataList();
            },

            showPlDialog(){
                this.showShuiKuTianBaoPl = true
            },
            closePlDialog(val){
                this.showShuiKuTianBaoPl = false
            },
            // 新需求  点击复查显示以前的督查信息
            toShowDuchaDetail(row){
                this.currentResCode =  row.code;
                this.currentObjectId = row.objId;
                this.currentObjectRgstrId = row.rgstrId;
                this.currentResName = row.nm;
                this.showDuchaDetails = true
            },
            closeInfoDialog(){
                this.showDuchaDetails = false
            }

        },

    };
</script>

<style>
  .skactive{
    background: #3f8eff !important;
    color:white !important;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .sknormal{
    background: white;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  #dxdcListMainsk{
    overflow-y: hidden;
  }

</style>