fj-dc-ui/.svn/pristine/a9/a9055a954cfe137fc6d276aeb6ddba45ea1f4622.svn-base

<template>
    <div>
        <el-select v-model="currentIrri" filterable allow-create default-first-option placeholder="请选择" @change="irriChange">
            <el-option
            v-for="item in irriAreaList"
            :key="item.id"
            :label="item.irrName"
            :value="item.id">
            </el-option>
        </el-select>
        <!-- <span @click="toAddCustomIrri()" style="color: #409eff; cursor: pointer;"><i class="el-icon-circle-plus"></i> 新增</span>
        <addIrriFormCom v-if="showIrriForm" :rootAdCode="rootAdCode" @addSuccess="addSuccess"></addIrriFormCom> -->
    </div>
</template>
<script>
/*****组件注释说明
 * name：灌区选择组件
 * func: 查询当前行政区划下的灌区列表，并可新增列表中没有的灌区
 * props：{
 *      rootAdCode: 行政区划代码，从父组件传进来
 *      irriId：已选择灌区的id，父组件传进来用于回显信息
 * }
 * author: wby 
 * date: 2020/5/11
 ****/ 
import request from '@util/gw_ajax_request.js'
import addIrriFormCom from './addIrriFormCom'
export default {
    props: ['rootAdCode','irriId'],
    data(){
        return{
            currentIrri: null,
            irriAreaList:[],
            showIrriForm: false
        }
    },
    components:{
        addIrriFormCom
    },
    mounted(){
        this.getIrriAreaList()
    },
    methods:{
        // 获取灌区列表
        getIrriAreaList(){
            let data = {
                adCode: this.rootAdCode
            }
            request.post('/att/irr/base/list',data).then(res=>{
                if(res.success){
                    this.irriAreaList = res.data
                    // 先获取列表，再延时回显当前灌区信息
                    setTimeout(()=>{
                        this.currentIrri = this.irriId
                    },200)
                }
            })
        },
        // 所选灌区改变时触发
        irriChange(id){
            let item 
            this.irriAreaList.forEach(ele=>{
                if(ele.id == id){
                    item = ele
                }
            })
            if(!item) item = {id: id, irrName: id}
            this.$emit('irriChange',item)
        },
        // 添加自定义灌区
        toAddCustomIrri(){
            this.showIrriForm = true
        },
        // 添加成功时触发该方法，更新灌区列表
        addSuccess(){
            this.getIrriAreaList()
            this.showIrriForm = false
        }
    },
    watch:{
        irriId(){
            this.currentIrri = this.irriId
            console.log(this.currentIrri)
        }
    }
}
</script>
<style lang="scss">
    
</style>