fj-dc-ui/.svn/pristine/e0/e008b6450f992d16593d5b2b7adb48448671163a.svn-base

<template>
  <div class="nygs">
    <el-container style="height:520px;">
      <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0;overflow:hidden">
        <el-card class="box-card" style="height:255px;">
          <div slot="header" class="clearfix">
            <span>村</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addXzc" v-if="openType">添加行政村</el-button>
          </div>
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClickXzc"
                   node-key="id"
                   class="left_tree"
                   :expand-on-click-node="false">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                          <el-button
                            type="text"
                            size="mini"
                            v-if="data.children"
                            @click.stop="() => addN(data,node)">
                                添加自然村
                            </el-button>
                          <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => removeNode(data,node)">
                                删除
                            </el-button>
                        </span>
                     </span>
          </el-tree>
        </el-card>
        <el-card class="box-card mt20" style="height:255px;">
          <div slot="header" class="clearfix">
            <span>供水单位</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addGsdw" v-if="openType">添加</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.nm }}
                <span class="flr">
                  <el-button
                    type="text"
                    size="mini"
                    @click.stop="() => gsdwDelete(item)">
                                删除
                  </el-button>
                </span>
              </p>
            </li>
          </ul>
          <el-pagination
            small
            layout="prev, pager, next"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            @current-change="pageIndexChange"
            @size-change="handleSizeChange">
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>
    <el-dialog
      class="outerDialog custom_dialog"
      :title="anTitle"
      width="40%"
      :visible.sync="anVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body="true">
      <el-form :model="anForm" ref="anForm" label-width="200px">
        <el-form-item label="名称">
          <el-input type="text" v-model="anForm.nm" clearable placeholder="请输入村名" style="width:60%;"></el-input>
        </el-form-item>
        <el-form-item label="地点">
          <el-input type="text" v-model="anForm.loc" clearable placeholder="请输入地点" style="width:60%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button style="margin-top:5px;" @click="saveAn">确定</el-button>
            </span>
    </el-dialog>

    <el-dialog
      class="outerDialog custom_dialog"
      title="添加供水工程"
      width="40%"
      :visible.sync="gcVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body="true">
      <el-form :model="gcForm" ref="gcForm" label-width="200px">
        <el-form-item label="供水工程名称">
          <el-input type="text" v-model="gcForm.nm" clearable placeholder="请输入供水工程名称" style="width:60%;"></el-input>
        </el-form-item>
        <el-form-item label="供水工程规模">
          <el-select v-model="gcForm.designWaterSupply" clearable placeholder="请选择">
            <el-option label="万人工程" value="1"></el-option>
            <el-option label="千人工程" value="2"></el-option>
            <el-option label="千人以下集中供水工程" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地点">
          <el-input type="text" v-model="gcForm.loc" clearable placeholder="请输入地点" style="width:60%;"></el-input>
        </el-form-item>
        <el-form-item label="运行管理单位名称">
          <el-input type="text" v-model="gcForm.runDep" clearable placeholder="请输入运行管理单位名称" style="width:60%;"></el-input>
        </el-form-item>
        <el-form-item label="管理人员数量">
          <el-input type="text" v-model="gcForm.mngSize" clearable placeholder="请输入管理人员数量" style="width:60%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button style="margin-top:5px;" @click="saveGC">确定</el-button>
            </span>
    </el-dialog>
    <villT @closeDialogVill="closeDialogVill" v-if="isVisibleVillT" :currentVillDTitle="currentVillDTitle" :currentVillTitle="currentVillTitle" :currentVillId="currentVillId" :currentObjectId="currentObjectId" :currentObjectName="currentObjectName" :currentObjectRgstrId="currentObjectRgstrId" :rowData="rowData" :openType="openType"></villT>
    <gcTab @closeDialogGc="closeDialogGc" v-if="isVisibleGc" :currentGcTitle="currentGcTitle" :currentGcId="currentGcId" :currentObjectId="currentObjectId" :currentObjectName="currentObjectName" :currentObjectRgstrId="currentObjectRgstrId" :rowData="rowData" :openType="openType"></gcTab>
  </div>
</template>

<script>
  import inputWith from "@widget/inuptWith.vue"
  import request from "@util/gw_ajax_request.js"
  import villT from "./villT"
  import gcTab from "./gcTab"
  export default {
    components: {
      inputWith: inputWith,
      villT:villT,
      gcTab:gcTab
    },
    props: ['currentObjectId', 'currentObjectName', 'currentObjectRgstrId', 'rowData','openType'],

    data() {
      return {
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'nm'
        },
        anVisible:false,
        anTitle:"",
        villId:"",
        currentVillId:"",
        currentVillTitle:"",
        currentVillDTitle:"",
        currentGcId:"",
        currentGcTitle:"",
        currRow:{},
        anForm:{
            nm:"",
            loc:""
        },
        gsdwList:[],
        total:0,
        pageSize:5,
        pageNum:1,
        gcVisible:false,
        gcForm:{
          nm:"",
          designWaterSupply:"",
          loc:"",
          runDep:"",
          mngSize:""

        },
        isVisibleVillT:false,
        isVisibleGc:false,
      }
    },
    computed: {
      recPersId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
      }
    },
    created() {

    },
    mounted() {
      this.getLeftTreeData();
      this.getGsdwList();
    },
    watch: {

    },
    methods: {
      gsdwRow(row){
          this.currentGcId = row.id;
          this.currentGcTitle = row.nm;
          this.isVisibleGc = true;
      },
      closeDialogVill(){
          this.isVisibleVillT = false;
      },
      closeDialogGc(){
          this.isVisibleGc = false;
      },
      addGsdw(){
          this.gcVisible = true;
      },
      saveGC(){
          var _self = this;
          var obj = this.gcForm;
          obj.rgstrId = this.rowData.rgstrId;
          request.post("/bis/insp/villgd/wtsp",this.gcForm).then(res => {
              if (res.success) {
                  _self.gcForm = {};
                  _self.gcVisible = false;
                  _self.getGsdwList();
              }
          })
      },
      pageIndexChange(val){
          this.pageNum = val;
          this.getGsdwList();
      },
      handleSizeChange(val){
          this.pageSize = val;
          this.getGsdwList();
      },
      handleNodeClickXzc(node, data) {
        if(node.children){
            this.currentVillTitle = "行政村"
        }else{
            this.currentVillTitle = "自然村"
        }
        this.currentVillDTitle = node.nm;
        this.isVisibleVillT = true;
        this.currentVillId = node.id;

      },
      removeNode(row,node){
          var _self = this;
          var url = "";
          if(row.children){
             url = "/bis/insp/villgd/vill/delete/"+row.id;
          }else{
              url = "/bis/insp/villgd/nvill/delete/"+row.id;
          }
          request.post(url).then(res => {
              if (res.success) {
                  const parent = node.parent;
                  const children = parent.data.children || parent.data;
                  const index = children.findIndex(d => d.id === row.id);
                  children.splice(index, 1);
              }
          })
      },
      saveAn(){
        var _self = this;
        var obj = this.anForm;
        obj.rgstrId = this.rowData.rgstrId;
        var url = "";
        if(this.villId){
            url = "/bis/insp/villgd/nvill"
            obj.villId = this.villId;
        }else{
            url = "/bis/insp/villgd/vill"
        }
        request.post(url, obj).then(res => {
                if (res.success) {
                    _self.anVisible = false;
                    _self.anForm = {nm:"", loc:""};
                    if(this.villId){
                        const newChild = { id: res.data.id,nm:res.data.nm,loc:res.data.loc};
                        this.currRow.children.push(newChild);
                    }else{
                        const newChild = { id: res.data.id,nm:res.data.nm,loc:res.data.loc,children: []};
                        _self.treeData.push(newChild);
                    }
                }
        })
      },
      addXzc(){
        this.currRow = {};
        this.villId = "";
        this.anTitle = "添加行政村";
        this.anVisible = true;
      },
      addN(row,node){
          this.currRow = row;
          this.villId = row.id;
          this.anTitle = "添加自然村";
          this.anVisible = true;
      },
      //左侧树数据
      getLeftTreeData() {
        var _self = this;
        request.get(`/bis/insp/villgd/getVillTree/${this.rowData.rgstrId}`)
          .then(res => {
            if (res.success && res.data) {
                if(res.data instanceof Array){
                    _self.treeData =  res.data;
                }else{
                    _self.treeData =  [];
                }
            }
          })
      },
      getGsdwList(){
        var _self = this;
        var obj = {
            rgstrId: this.rowData.rgstrId,
            pageNum:this.pageNum,
            pageSize:this.pageSize
        }
        request.post(`/bis/insp/villgd/wtsp/listOfPage`,obj).then(res => {
            if (res.success) {
                _self.gsdwList = res.data.list;
                _self.total = res.data.total;
            }
        })
      },
      //供水单位删除
      gsdwDelete(row) {
        this.$confirm('确定要删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.post(`/bis/insp/villgd/wtsp/delete/${row.id}`)
            .then(res => {
              if (res.success) {
                this.$message.success("删除成功");
                this.getGsdwList();
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }

  }

</script>
<style scoped>
  .nygs >>> .el-card__body{
     padding: 5px;
  }
</style>
<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;
  }
  .left_tree .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  /*}*/

</style>