fj-dc-ui/.svn/pristine/1e/1ee3642ce65328bdd8f90b071415be2cb4ade77b.svn-base

<template>
  <div style="height:100%;width:100%;">
    <el-container style="height:100%;width:100%;">
      <!-- <el-aside width="200px" style="border:1px solid #d5d5ff">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">
          <i class="el-icon-share"></i>督查分工
        </p>
        <provTreeList
          rootCode
          :style="{'max-height':dxdcAsideHeight+'px','height':dxdcAsideHeight+'px'}"
          @provTreeSelectChange="provTreeSelectChangeHandler"
        ></provTreeList>
      </el-aside> -->
      <el-aside width="320px" style="border-right:2px solid #d5d5ff;float:left"
                :style="{'max-height':testHeight+'px','height':testHeight+'px'}">
        <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>
      </el-aside>
      <el-main id="dxdcListMainsk" style="padding:5px 20px;">
        <el-row :gutter="10" style="margin:5px -5px 15px -5px;">
          <el-col :span="24">
            <el-tag size="small" style="width: 175px;text-align: center;">
              <i class="el-icon-info"></i>
              <span style="margin-left: 5px">暗访小水库总计：</span>
              <span style="font-weight: 700;margin-left: 5px">{{this.total}}</span>
            </el-tag>
          </el-col>

        </el-row>
        <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="行政区名称">
                <el-input v-model="adName" placeholder="行政区名称"></el-input>
              </el-form-item>
              <el-form-item label="水库名称">
                <el-input v-model="rsvrName" placeholder="水库名称"></el-input>
              </el-form-item>
              <el-form-item label="工程规模">
                <el-select v-model="engScale" clearable placeholder="工程规模">
                  <el-option v-for="item in engScales" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="检查单位">
                <el-select v-model="orgName" clearable placeholder="检查单位">
                  <el-option v-for="item in lyjg" :key="item.id" :label="item.pnm" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在组">
                <el-autocomplete v-model="groupName" clearable value-key='nm' :fetch-suggestions="querySearchAsync"
                                 placeholder="请选择所在组"
                                 @select="handleSelect" :clear="handleClear" @change="handleChange"></el-autocomplete>
              </el-form-item>
              <el-form-item label="督查时间">
                <div style="display: flex;">
                  <el-date-picker v-model="sttm" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择日期"></el-date-picker>
                  <p style="padding-left: 10px;padding-right: 10px;">至</p>
                  <el-date-picker v-model="ettm" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择日期"></el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>

            </el-form>
          </el-col>
        </el-row>
        <el-table
          border
          :data="skDataList"
          style="width: 100%"
          :height="tableHeight"
        >
          <el-table-column prop="province" label="省"  v-if="isXj" show-overflow-tooltip min-width="100"
                           align="center"></el-table-column>
          <el-table-column prop="city" :label="ownAdName" show-overflow-tooltip min-width="100" align="center"></el-table-column>
          <el-table-column prop="county" label="县" v-if="isXj" show-overflow-tooltip min-width="100"
                           align="center"></el-table-column>
          <el-table-column prop="nm" label="水库名称" min-width="130" align="center"></el-table-column>
          <el-table-column prop="riverName" label="检查单位" show-overflow-tooltip min-width="120"
                           align="center"></el-table-column>
          <el-table-column prop="groupName" label="所在组" show-overflow-tooltip min-width="150"
                           align="center"></el-table-column>
          <el-table-column prop="intm1" label="督查时间" show-overflow-tooltip min-width="150"
                           align="center"></el-table-column>
          <el-table-column prop="state" label="督查状态" align="center" min-width="120">
            <template slot-scope="scope">
              <span
                style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.state == 0"
              >未督查</span>
              <span
                style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.state == 1"
              >督查中</span>
              <span
                style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.state == 2"
              >已督查</span>
            </template>
          </el-table-column>
          <el-table-column prop="engScal" label="工程规模" :formatter="formatEngScal" min-width="130"
                           align="center"></el-table-column>
          <el-table-column prop="hystSite" min-width="200" show-overflow-tooltip label="水库所在位置"
                           align="center"></el-table-column>
          <el-table-column prop="rsAdmName" min-width="180" show-overflow-tooltip label="管理单位"
                           align="center"></el-table-column>
          <el-table-column prop="totCap" label="总库容(万m³)" min-width="130" align="center"></el-table-column>
          <!-- <el-table-column prop="baseStat" label="基本信息状态" align="center" min-width="130">
            <template slot-scope="scope">
              <p style="cursor:pointer;color:#67C23A" v-if="scope.row.baseStat == 1">已填报</p>
              <p style="cursor:pointer;color:#F56C6C;" v-if="scope.row.baseStat == 0">未填报</p>
            </template>
          </el-table-column>
          <el-table-column prop="presStat" label="责任人状态" align="center" min-width="130">
            <template slot-scope="scope">
              <p style="cursor:pointer;color:#67C23A" v-if="scope.row.presStat == 1">已填报</p>
              <p style="cursor:pointer;color:#F56C6C;" v-if="scope.row.presStat == 0">未填报</p>
            </template>
          </el-table-column>
          <el-table-column prop="resRunStat" label="安全管理运行状态" align="center" min-width="130">
            <template slot-scope="scope">
              <p style="cursor:pointer;color:#67C23A" v-if="scope.row.resRunStat == 1">已填报</p>
              <p style="cursor:pointer;color:#F56C6C;" v-if="scope.row.resRunStat == 0">未填报</p>
            </template>
          </el-table-column>
          <el-table-column prop="viewStat" label="走访用户状态" align="center" min-width="130">
            <template slot-scope="scope">
              <p style="cursor:pointer;color:#67C23A" v-if="scope.row.viewStat == 1">已填报</p>
              <p style="cursor:pointer;color:#F56C6C;" v-if="scope.row.viewStat == 0">未填报</p>
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="操作"
            min-width="150"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                plain
                :disabled="scope.row.rgstrId == ''"
                @click="toAddMember('详情',scope.row)"
              >详情
              </el-button>
              <el-button type="primary" plain @click="showQus(scope.row)">问题</el-button>
              <!-- <el-button type="success" v-if="scope.row.rgstrId" plain @click="toAddMember('详情',scope.row)">详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;"
          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>
      <!-- </el-container> -->
      <shuiKuTianBaoShow
        v-if="showShuiKuTianBao"
        :currentObjectRgstrId="currentObjectRgstrId"
        :currentResCode="currentResCode"
        :currentObjectId="currentObjectId"
        :currentObjectName="currentResName"
        @cancelHandler="cancelHandler"
        @addShuiKuSuccess="addShuiKuSuccess"
      ></shuiKuTianBaoShow>
      <rsrvQueDialogShow
        v-if="rsrvQueDialogShowItem"
        :currentObjectRgstrId="currentObjectRgstrId"
        :currentObjectId="currentObjectId"
        :currentObjectName="currentResName"
        :objType="1"
        @cancelHandler="cancelHandler"
        @addShuiKuSuccess="addShuiKuSuccess"
      ></rsrvQueDialogShow>
    </el-container>
    <!-- 添加/编辑人员弹窗 -->
  </div>
</template>

<script>
  import request from '../../utils/gw_ajax_request.js'
  import {getSKList_xsk, getrgstrIdObject, getLyjglist} from "../../api/duChaTianBao.js";
  import provTreeList from "../../widgets/provTreeList.vue";
  import shuiKuTianBaoShow from "../duChaTianBao/shuiKuTianbaoShow.vue";
  import {dateFormat} from '../../utils/gw_date.js'

  export default {
    components: {
      provTreeList: provTreeList,
      shuiKuTianBaoShow: shuiKuTianBaoShow,
      rsrvQueDialogShow: resolve => {
        require(["./rsrvQueDialogShow.vue"], resolve);
      }
    },
    props: [],

    data() {
      return {
        lyjg: [],
        engScales: [
          {id: '4', name: '小（1）型'},
          {id: '5', name: '小（2）型'},
        ],
        engScale: '',
        orgName: '',
        groupName: '',
        groupId: '',
        groups: [],
        sttm: '',
        ettm: '',
        rsvrName: '',
        adName: '',
        dcType: '',
        skDataList: [],
        treeData: [],
        testHeight: window.innerHeight - 111,
        dxdcMainHeight: window.innerHeight - 274,
        dxdcAsideHeight: window.innerHeight - 120,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        tableHeight: window.innerHeight - 330,
        currentResCode: "",
        currentObjectId: "",
        currentResName: "",
        currentObjectRgstrId: "",
        currentObjectInfoObject: null,
        showShuiKuTianBao: false,
        rsrvQueDialogShowItem: false,
        objId: "",
        adCode: '',
        currentNodeId: '',
      };
    },
    computed: {
      persId() {
        return localStorage.getItem("userid")
          ? localStorage.getItem("userid")
          : "1098101939614724096";
      }
    },
    mounted() {
      // this.getLeftTreeData();
      this.getSkDataList();
      this.getAllGroup();
      let h = document.getElementById("dxdcListMainsk").offsetHeight;
      // this.tableHeight = h - 100;
      // console.log("tableHeight" + this.tableHeight);
    },

    watch: {
      currentNodeId(n, o) {
        this.getSkDataList();
      },
      groupName(n, o) {
        if (n == '') {
          this.groupId = '';
        }
      }
    },
    activated() {
      this.getLeftTreeData();
      this.currentNodeId = "";
      this.rsvrName = "";
      this.dcType = "";
      this.getSkDataList();
    },
    methods: {
      //获取所有的组
      getAllGroup() {
        var _self = this;
        request.get('/dc/user/getGroupByPersid', {params: {'persid': this.persId, 'ptype': '1'}}).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) {
        this.groupId = item.id;
      },
      handleChange(item) {
        console.log(item);
      },
      handleClear(item) {
        console.log(item);
      },
      getLeftTreeData() {
        var _self = this;
        _self.lyjg = [];
        request.get('/dc/organization/base/getAllNode', {
          params: {
            'userId': this.persId,
            'orgType': '001'
          }
        }).then((res) => {
          let data = res.data
          data.forEach(ele => {
            if (ele.pid == null || ele.pid == '') {
              ele.pid = '001'
            }
            if (ele.id.length == 6) {
              _self.lyjg.push(ele);
            }
          });
          data = _self.getTrees(data)
          _self.treeData = data;
          console.log(data);

          // _self.duChaType = _self.treeData[0].id.substring(2,3);
        })
      },
      //格式化树形数据
      // getTrees(list, pId) {
      //     let items = {};
      //     // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
      //     for(let i = 0; i < list.length; i++) {
      //         let key = list[i].parentId ? list[i].parentId : list[i].pid;
      //         if(items[key]) {
      //             items[key].push(list[i]);
      //         } else {
      //             items[key] = [];
      //             items[key].push(list[i]);
      //         }
      //     }
      //     return this.formatTree(items, pId);
      // },
      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);
        });
      },
      /**利用递归格式化每个节点**/
      formatTree(items, pId) {
        let result = [];
        if (!items[pId]) {
          return result;
        }
        for (let t of items[pId]) {
          t.children = this.formatTree(items, t.id)
          result.push(t);
        }
        return result;
      },
      treeNodeClickHandler: function (data, node, tree) {
        this.currentNodeId = data.id;
      },
      provTreeSelectChangeHandler: function (params) {
        this.adCode = params.likeCode;
        this.getSkDataList();
      },
      formatEngScal(row, column) {
        let engScal = row.engScal;
        let _engScal = "其他";
        switch (engScal) {
          case "1":
            _engScal = "大（1）型";
            break;
          case "2":
            _engScal = "大（2）型";
            break;
          case "3":
            _engScal = "中型";
            break;
          case "4":
            _engScal = "小（1）型";
            break;
          case "5":
            _engScal = "小（2）型";
            break;
          case "9":
            _engScal = "其他";
            break;
        }
        return _engScal;
      },
      getSkDataList: function () {
        let _self = this;
        let data = {
          persId: _self.persId,
          pageSize: _self.pageSize,
          pageIndex: _self.pageIndex,
          currentNodeId: _self.currentNodeId,
          rsvrName: _self.rsvrName,
          dcType: _self.dcType,
          adName: _self.adName,
          sttm: _self.sttm,
          ettm: _self.ettm,
          orgName: _self.orgName,
          engScale: _self.engScale,
          groupId: _self.groupId
        };
        getSKList_xsk(data).then(res => {
          console.log(res);
          res.data.list.forEach((item) => {
            item.intm1 = dateFormat(item.intm, 'yyyy-MM-dd');
          })
          this.skDataList = res.data.list;
          this.total = res.data.total;
        });
      },
      onSubmit() {
        this.getSkDataList();
      },
      toAddMember(type, rowData) {
        var _self = this;
        console.log(rowData);
        getrgstrIdObject(rowData.code, rowData.objId, _self.pageIndex).then(
          res => {
            console.log(res);
            _self.currentResCode = res.data.rsCode;
            _self.currentObjectId = res.data.objId;
            _self.currentObjectRgstrId = res.data.rgstrId;
            _self.currentResName = res.data.rsvrNm;
            _self.showShuiKuTianBao = true;
            // 获取完成
          },
          err => {
          }
        );
      },
      showQus(rowId) {
        var _self = this;
        _self.currentObjectId = rowId.objId;
        _self.currentResName = rowId.nm;
        _self.currentObjectRgstrId = rowId.rgstrId;
        _self.rsrvQueDialogShowItem = true;
      },
      cancelHandler() {
        this.showShuiKuTianBao = false;
        this.rsrvQueDialogShowItem = false;
      },
      addShuiKuSuccess() {
        this.showShuiKuTianBao = false;
      },
      deleteMember(obj) {
      },
      pageIndexChange(val) {
        console.log(val);
        this.pageIndex = val;
        this.getSkDataList();
      }
      , handleSizeChange(val) {
        this.pageSize = val;
        this.getSkDataList();
      },
    }
  };
</script>

<style>
  #dcdxHeader {
    padding: 15px 20px;
  }

  #dxdcFooter {
    text-align: center;
  }

  #dxdcAside {
    border: 1px solid #d5d5ff;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>