fj-dc-ui/.svn/pristine/52/525ece0e0cbe5c5fa030d20f53b46ae5c98b79e7.svn-base

<template>
  <div class="nygs">
    <el-container style="height:520px;">
      <el-aside width="300px" style="border:1px solid #d5d5ff">
        <p class="aside_title">
          <el-button type="text" @click="addVillage">添加行政村</el-button>
        </p>
        <el-tree :data="treeData" :props="defaultPropsXzc" @node-click="handleNodeClickXzc"
                 node-key="id"
                 default-expand-all
                 :expand-on-click-node="false">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span class="mr10">
                            <i class="el-icon-delete" @click.stop="removeNode(node, data)"></i>
                        </span>
                     </span>
        </el-tree>
      </el-aside>
      <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用水户</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addYsh">添加</el-button>
          </div>
          <ul class="ul_height">
            <li v-for="(item,index) in yshList" :key="index" class="text item lh40">
              <p @click="yshRow(item)">
                {{ item.userNm }}
                <span class="flr"><i class="el-icon-delete" @click.stop="yshDelete(item)"></i></span>
              </p>
            </li>
          </ul>
        </el-card>
        <el-card class="box-card mt20">
          <div slot="header" class="clearfix">
            <span>供水单位</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addGsdw">添加</el-button>
          </div>
          <ul class="ul_height">
            <li v-for="(item,index) in gsdwList" :key="index" class="text item lh40">
              <p @click="gsdwRow(item)">
                {{ item.projectNm }}
                <span class="flr"><i class="el-icon-delete" @click.stop="gsdwDelete(item)"></i></span>
              </p>
            </li>
          </ul>

        </el-card>
      </el-main>
    </el-container>
    <!--添加行政村-->
    <el-dialog
      class="outerDialog custom_dialog"
      title="添加行政村"
      width="40%"
      :visible.sync="villageVisible"
      :modal-append-to-body="true"
      :append-to-body="true">
      <el-container style="height:520px;">
        <el-aside width="300px" style="border:1px solid #d5d5ff">
          <p class="aside_title village_title">{{rowData.nm}}</p>
          <el-tree :data="villageTreeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
          <el-table
            ref="multipleTable"
            :data="villageTableData"
            tooltip-effect="dark"
            max-height="510"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="adName"
              label="行政村名称"
              min-width="120"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="isPoveryt"
              label="是否贫困村"
              min-width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.isPoveryt == '1' ? "是" : "否"}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <span slot="footer">
                <el-button style="margin-top:5px;" @click="villageSave">确定</el-button>
            </span>
    </el-dialog>
    <!--用水户-->
    <el-dialog
      class="outerDialog custom_dialog"
      title="添加用水户"
      width="40%"
      :visible.sync="wateruserVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body="true">
      <el-form :model="wateruserForm" ref="wateruserForm" label-width="200px">
        <el-form-item label="户主姓名" required>
          <el-input type="text" v-model="wateruserForm.userNm" clearable placeholder="请输入户主姓名"
                    style="width:60%;"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input type="text" v-model="wateruserForm.telphone" clearable placeholder="请输入联系方式"
                    style="width:60%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button style="margin-top:5px;" @click="waterUserSave">确定</el-button>
            </span>
    </el-dialog>
    <waterUser v-if="waterUserTianBaoVisible" :yshRowData="yshRowData" :rowData="rowData" @closeDialog="closeDialog"
               @addShuiKuSuccess="addShuiKuSuccess" :currentObjectId="currentObjectId" :oriFatherName="oriFatherName"
               :villageNm="villageNm"></waterUser>

    <countryPro v-if="countryProTianBaoVisible" :gsgcRowData="gsgcRowData" :rowData="rowData"
                @closeDialog="closeGsGcDialog"
                @addShuiKuSuccess="addShuiKuSuccess" :currentObjectId="currentObjectId" :oriFatherName="oriFatherName"
                :villageNm="villageNm"></countryPro>
    <!--添加供水工程-->
    <editDcdxInfo v-if="gsgcVisible" ref="editDcdxInfoRef" objType="25" :rowData="rowData"
                  :villageAdCode="villageAdCode"
                  @addSuccess="DuiXiangAddSuccessHandler"
                  @closeDuChaDuiXiangDialog="closeDuChaDuiXiangDialog"></editDcdxInfo>
  </div>
</template>

<script>
  import inputWith from "@widget/inuptWith.vue"
  import request from "@util/gw_ajax_request.js"
  import waterUser from "./waterUser"
  import countryPro from "./countryPro"

  export default {
    components: {
      inputWith: inputWith,
      // problemDialog
      waterUser: waterUser,//用水户填报
      editDcdxInfo: resolve => {
        require(['./editDcdxInfo.vue'], resolve)
      },//添加供水工程
      countryPro
    },
    props: ['currentObjectId', 'currentObjectName', 'currentObjectRgstrId', 'rowData'],

    data() {
      var checkTel = (rule, value, callback) => {
        if (value == '') {
          callback();
        }
        if (isNaN(value)) {
          callback(new Error('请输入合理电话'));
        }
        var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //座机
        var isMob = /^[1][3,4,5,7,8][0-9]{9}$/; // 座机格式
        if (!isMob.test(value) && !isPhone.test(value)) {
          callback(new Error('请输入合理电话'));
        } else {
          callback();
        }
      };
      return {
        yshList: [],
        gsdwList: [],
        wateruserVisible: false,
        villageVisible: false,
        waterUserTianBaoVisible: false,
        countryProTianBaoVisible: false,
        gsgcVisible: false,
        waterUserDialog: false,
        villageTableData: [],
        multipleSelection: [],
        wateruserForm: {
          userNm: "",
          telphone: "",
        },
        treeData: [],
        villageTreeData: [],
        defaultProps: {
          // children: 'children',
          label: 'adName'
        },
        defaultPropsXzc: {
          children: 'dcuserRelVilles',
          label: 'townName'
        },
        adCodes: "",
        townName: "",
        villageNm: "",
        adCode: "",
        yshRowData: null,
        gsgcRowData: null,
        rules: {
          telphone: [{
            validator: checkTel,
            trigger: 'change',
          }],
        },
        oriFatherName: "",
        villageAdCode: ""
      }
    },
    computed: {
      recPersId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
      }
    },
    created() {

    },
    mounted() {
      this.getLeftTreeData();
    },
    watch: {
      // currentObjectRgstrId(n, o) {
      //     this.getRgstridObj();
      // },
    },
    methods: {
      //添加行政村
      addVillage() {
        this.villageVisible = true;
        this.getVillageTreeList();
      },
      getVillageTreeList() {
        request.get(`/bis/new/vill/rgstr/findCheckTree/${this.rowData.code}/${this.rowData.regstrId}`)
          .then(res => {
            if (res.success && res.data) {
              this.$nextTick(() => {
                if (res.data.length) {
                  this.villageTreeData = res.data;
                  let length = this.villageTreeData - 1
                  this.villageTableData = res.data[length].attCountryDtoList;
                  this.townName = res.data[length].adName;
                }

              })
            }
          })
      },
      //villageSave添加行政村确定
      villageSave() {
        if (!this.multipleSelection.length) {
          this.$message.warning("请至少选择一个行政村");
          return;
        }
        let obj = [{
          "codes": this.adCodes,
          "regstrId": this.rowData.regstrId,
          "townName": this.townName
        }]
        request.post(`/bis/new/dcuser/rel/vill/addbatch`, obj)
          .then(res => {
            if (res.success) {
              this.$message.success("添加行政村成功");
              this.getLeftTreeData();
              this.getYsGsdwList(this.adCode, this.rowData.regstrId);
              this.villageVisible = false;
            } else {
              this.$message.warning(res.message);
            }
          })

      },
      handleSelectionChange(val) {
        this.adCodes = "";
        this.multipleSelection = val;
        this.multipleSelection.map(i => {
          return this.adCodes += i.adCode + ";";
        })

        this.adCodes = this.adCodes.substr(0, this.adCodes.length - 1);
      },
      //左侧树数据
      getLeftTreeData() {
        request.get(`/bis/new/vill/rgstr/findTree/${this.rowData.code}/${this.rowData.regstrId}`)
          .then(res => {
            if (res.success && res.data) {
              this.treeData = res.data;
              this.treeData.forEach(i => {
                if (i["dcuserRelVilles"]) {
                  i["dcuserRelVilles"].forEach(j => {
                    j.townName = j.villageNm;
                  })
                }
              })
              this.adCode = this.treeData[0].dcuserRelVilles[0].adCode ? this.treeData[0].dcuserRelVilles[0].adCode : "";
              this.villageAdCode = this.treeData[0].dcuserRelVilles[0].adCode ? this.treeData[0].dcuserRelVilles[0].adCode : "";
              this.villageNm = this.treeData[0].dcuserRelVilles[0].villageNm ? this.treeData[0].dcuserRelVilles[0].villageNm : "";
              this.oriFatherName = this.treeData[0].townName ? this.treeData[0].townName : "";
              console.log(this.villageNm, this.oriFatherName);
              this.getYsGsdwList(this.adCode, this.rowData.regstrId);
            }
          })
      },
      //获取用水户、供水单位列表
      getYsGsdwList(code, regstrId) {
        request.get(`/bis/new/vill/rgstr/findNode/${code}/${regstrId}`)
          .then(res => {
            if (res.success) {
              this.$nextTick(() => {
                this.gsdwList = res.data.countryPro;
                this.yshList = res.data.waterUsers;
              })

            }
          })
      },
      //用水户添加
      addYsh() {
        if (this.adCode) {
          for (var obj in this.wateruserForm) {
            this.wateruserForm[obj] = '';
          }
          this.wateruserVisible = true;
        } else {
          this.$message.warning("请选择左侧行政村");
        }
      },
      //添加用水户保存
      waterUserSave() {
        if (!this.wateruserForm.userNm) {
          this.$message.warning("请填写用水户户主姓名");
          return;
        }
        let obj = {
          villageNm: this.villageNm,
          adCode: this.adCode,
          userNm: this.wateruserForm.userNm,
          telphone: this.wateruserForm.telphone,
          regstrId: this.rowData.regstrId,

        }
        request.post(`bis/new/wateruser/info`, obj)
          .then(res => {
            if (res.success) {
              this.$message.success("添加用水户成功");
              this.wateruserVisible = false;
              this.getYsGsdwList(this.adCode, this.rowData.regstrId);
            }
          })
      },
      //用水户row
      yshRow(row) {
        this.yshRowData = row;
        this.waterUserTianBaoVisible = true;
      },
      //用水户删除
      yshDelete(row) {
        this.$confirm('确定要删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.get(`/bis/new/wateruser/info/del/${row.id}`)
            .then(res => {
              if (res.success) {
                this.$message.success("删除成功");
                this.getYsGsdwList(this.adCode, this.rowData.regstrId);
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //供水单位添加
      addGsdw() {
        if (this.adCode) {
          this.gsgcVisible = true;
        } else {
          this.$message.warning("请选择左侧行政村");
        }

      },
      //供水单位row
      gsdwRow(row) {
        this.gsgcRowData = row;
        this.countryProTianBaoVisible = true;
      },
      //供水单位删除
      gsdwDelete(row) {
        this.$confirm('确定要删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.get(`/bis/new/country/fee/del/${row.id}`)
            .then(res => {
              if (res.success) {
                this.$message.success("删除成功");
                this.getYsGsdwList(this.adCode, this.rowData.regstrId);
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleNodeClick(data) {
        this.$nextTick(() => {
          this.townName = data.adName;
          this.villageTableData = data.attCountryDtoList;
        })

      },
      handleNodeClickXzc(node, data) {
        console.log(node, data, '12131')
        this.$nextTick(() => {
          console.log(node, data);
          if (node.adCode && node.villageNm) {
            this.oriFatherName = data.parent.data.townName;
            this.adCode = node.adCode;
            this.villageNm = node.villageNm;
            this.getYsGsdwList(node.adCode, node.regstrId);
            this.villageAdCode = node.adCode;
          }

        })

      },
      closeDialog() {
        this.waterUserTianBaoVisible = false;
      },
      closeGsGcDialog(val) {
        this.countryProTianBaoVisible = false;
        if (val === "success") {
          this.getYsGsdwList(this.adCode, this.rowData.regstrId);
        }
      },
      addShuiKuSuccess() {
        this.waterUserTianBaoVisible = false;
      },
      //    删除左侧树行政村
      removeNode(node, data) {
        if (data.id) {
          this.$confirm('确定清空督查数据并将该村从督查任务中删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            request.get(`/bis/new/dcuser/rel/vill/del/${data.id}`)
              .then(res => {
                if (res.success) {
                  this.$message.success("删除成功");
                  this.getLeftTreeData();
                } else {
                  this.$message.warning(res.message);
                }
              })
              .catch(err => {
                console.log(err);
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      DuiXiangAddSuccessHandler: function () {
        this.gsgcVisible = false;
        this.getYsGsdwList(this.adCode, this.rowData.regstrId);
      },
      closeDuChaDuiXiangDialog() {
        this.gsgcVisible = false;
      }

    }

  }

</script>

<style lang="scss">
  /*.nygs{*/
  .aside_title {
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
    text-align: end;
    border-bottom: 1px solid rgb(235, 238, 245);
    background-color: #d5d5ff;
  }

  .village_title {
    text-align: center;
  }

  .ul_height {
    height: 160px;
    overflow: auto;
  }

  .box-card {
    /*height: 200px;*/
    overflow: auto;
  }

  /*.mt20{*/
  /*margin-top: 20px;*/
  /*}*/
  .lh40 {
    list-style: none;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    padding: 0 10px;
    border-bottom: 1px solid rgb(235, 238, 245);
  }

  .flr {
    float: right;
    margin-right: 20px;
  }

  .nygs span.custom-tree-node {
    width: 100%;
  }

  .mr10 {
    margin-right: 20px;
    float: right;
  }

  .nygs .el-tree-node__content {
    height: 40px;
    line-height: 40px;
  }

  .nygs .el-tree > div > div:first-child .mr10 {
    display: none;
  }

  .nygs .el-tree-node.is-current > .el-tree-node__content {
    background-color: gainsboro !important;
  }

  /*}*/

</style>