fj-dc-ui/.svn/pristine/cc/cc619bccb9ac3c2f070fedf1cbfdb23cb3af1492.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.townName"
      >
      <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: 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="操作">
           <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";
    export default {
        props: ['rootCode','initalValue'],
        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:{
            submitInsertCun:function(){
                submitInsertCun(this.newCunForm.adName,this.rootCode).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.townName});
                   }
                 });
           },
            filterMethod:function(text){
                console.log(text);
                this.value = text;
                let filterResult = [{
                         'value':'无相应乡镇',
                         
                         'label':'添加'
                     }];
                this.dataList.forEach((element) =>{
                    if(element.townName.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)=>{

                               
                               
                                
                               lists.push({'value':element.townCode,
                                       
                                        'townName':element.townName,
                                       
                                        
                                        'label':element.townName,'code':element.townCode});
                                });
                           this.dataList = lists;
                           this.searchDataList = lists;
                           console.log(this.xianlistData);
                },(err) =>{});
            },
           
        },
       
    }
</script>
<style>
</style>