fj-dc-ui/.svn/pristine/91/91862dc9104e321ea85ae6a09db9d820b11ebf79.svn-base

<template>
    <div>
    <el-select 
    v-model="value" 
    placeholder="请选择" 
    filterable
    autoComplete = "off"
    :filter-method="filterMethod"
    @change='chooseChange'
    >
    <el-option
      v-for="item in searchDataList"
      :key="item.code"
      :value="item.code"
      :label="item.villageName"
      >
      <span style="float: left;color:rgba(0,0,0,0.5);font-size:small" v-if="item.value == '无相应村'">*如无相应村</span>
      <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.value == '无相应村'">
         <el-button type="text" size='mini' plain @click="insertCun">添加行政村</el-button>
      </span>

      <span style="float: left">{{ item.villageName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.townName }}</span>
    </el-option>
  </el-select>
  
        <el-dialog
        title="添加行政村"
        :visible.sync="dialogVisible"
        width="30%"
        :modal="false"
        >
        <el-form :model="newCunForm" label-width="120px">
        <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">行政村基本信息</span><span class="hrs"></span></p>
         <el-form-item label="行政村名">
          <el-input v-model="newCunForm.adName"  style="width:70%;"></el-input>
         </el-form-item>
         <el-form-item label="所在乡镇">
            <inuptWithXiang v-model="newCunForm.adName" :initalValue="newCunForm.adFcode" autocomplete="off" :rootCode = "rootCode"  @provTreeSelectChange="provTreeSelectChangeHandler" style="width:70%;"></inuptWithXiang>
         </el-form-item>
         <el-form-item label="操作">
           <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitInsertCun">确 定</el-button>
        </el-form-item>
        
        </el-form>
        </el-dialog>
  </div>
</template>
<script>
import { getVillageList_ny ,submitInsertCun} from "../api/duChaTianBao.js";
import inuptWithXiang from './inuptWithXiang.vue'
    export default {
        props: ['rootCode','initalValue'],
        components:{
            'inuptWithXiang':inuptWithXiang
        },
        data() {
            return {
                dataList: [],
                value: '',
                dialogVisible:false,
                searchDataList:[],
                timeout:  null,
                xianlistData:[],
                newCunForm:{
                    "adAbbrName": "",
                    
                    "adFcode": "",
                    "adFullName": "",
                    
                    "adName": "",
                    
                },
            }
        },
        computed:{
           
        },
         mounted(){
           this.value = this.initalValue;
           console.log(this.value);
           this.querySearchAsync();
        },
        watch: {
            rootCode:function(){
                this.querySearchAsync();
                
            },
            initalValue:function(){
                this.value = this.initalValue;
                 console.log(this.value);
           this.querySearchAsync();
            }
        },
        methods:{
            provTreeSelectChangeHandler:function(params){
                console.log(params)
                this.newCunForm.adFcode = params.code;
            },
            submitInsertCun:function(){
                submitInsertCun(this.newCunForm.adName,this.newCunForm.adFcode).then(
                    (res) => {
                        console.log(res);
                        this.querySearchAsync();
                        this. newCunForm={
                            "adAbbrName": "",
                            
                            "adFcode": "",
                            "adFullName": "",
                        
                            "adName": "",
                            
                        };
                        this.dialogVisible = false;
                    }
                );
            },
            insertCun:function(){
                this.dialogVisible = true;
            },
            chooseChange:function(p){
               console.log(p);
                this.dataList.forEach((element) => {
               if(element.code == p){
                       console.log(element);
                       this.$emit("provTreeSelectChange", { 'code':element.code, 'name': element.villageName});
                   }
                });
           },
            filterMethod:function(text){
                console.log(text);
                this.value = text;
                let filterResult = [{
                         'value':'无相应村',
                         
                         'label':'添加'
                     }];
                this.dataList.forEach((element) =>{
                    if(element.villageName.indexOf(text)>=0 || element.townName.indexOf(text)>=0){
                        filterResult.push(element);
                    }
                });
                this.searchDataList =  filterResult;
            },
            querySearchAsync() {
               

                
                // cb(results);
                 getVillageList_ny(this.rootCode).then((res) =>{
                    console.log(res);
                    var children = [];
                     let lists = [];
                        
                        
                            
                            
                            res.data.list.forEach((element,index)=>{

                               
                               
                                element.list.forEach((eleChild) =>{
                                    children.push({
                                    'name':eleChild.villageName,
                                    'code':eleChild.villageCode,
                                    });
                                    lists.push({
                                        'value':eleChild.villageName,
                                        'villageName':eleChild.villageName,
                                        'townName':element.townName,
                                        'code':eleChild.villageCode,
                                        'label':eleChild.villageName+element.townName
                                    });
                                })
                               this.xianlistData.push({'label':element.townName,'code':element.townCode});
                                });
                           this.dataList = lists;
                           this.searchDataList = lists;
                           console.log(this.xianlistData);
                },(err) =>{});
            },
           
        },
       
    }
</script>
<style>
</style>