fj-dc-ui/.svn/pristine/00/00cc69904bd95fd91d5b3c109a7df351e85a3cc3.svn-base

<template>
    <div>
        <el-cascader v-if="showCascader" :props="placeProps" v-model="adCode" @change="divisionChange"></el-cascader> 
        <span style="margin-left: 10px; cursor: pointer; color: #5cb6ff" @click="addCustomDivision"><i class="el-icon-circle-plus"></i> 新增</span>
        <add-new-division v-if="showAddDivisionDialog" :rootCode="rootCode" @addSuccess="addSuccess" @handleClose="handleClose"></add-new-division>
    </div>
</template>
<script>
/*****组件注释说明
 * name：行政区划选择组件（县/乡镇/村）
 * func: 查询县级及以下的行政区划，并可新增数据库里没有的行政区划
 * props：{
 *      rootCode: 根节点行政区划代码，从父组件传进来
 *      currentObjectName：当前督查对象（县）的名称，用于行政区划名称拼接
 * }
 * author: wby 
 * date: 2020/5/11
 ****/ 
import {getAdXBaseData} from '@api/duChaAPI.js'
import addNewDivision from './addNewDivision.vue'
export default {
    props: ['rootCode','currentObjectName'],
    data(){
        let _this = this
        return{
            adCode: null,
            placeProps: {
                lazy: true,
                lazyLoad (node, resolve) {
                    const { level } = node;
                    if(level == 0){
                        setTimeout(() => {
                            const nodes = Array.from({ length: level + 1 })
                                .map(item => ({
                                    value: _this.rootCode,
                                    label: _this.currentObjectName,
                                    leaf: level > 2
                                }));
                            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                            resolve(nodes);
                        }, 500);
                    }else if(level == 1){
                        _this.cascaderTown(node, resolve)
                    }else if(level == 2){
                        _this.cascaderVillage(node, resolve)
                    }
                }
            },
            townsList: [],
            villagesList: [],
            showAddDivisionDialog: false,
            showCascader: true
        }
    },
    components:{
        addNewDivision
    },
    methods:{
        // 获取乡镇数据列表
        cascaderTown(node, resolve){
            let adCode = this.rootCode
            let townsList = []
            getAdXBaseData(adCode).then(
                (res) => {
                    if (res.success && res.data) {
                        this.townsList = res.data
                        this.townsList.forEach(item=>{
                            townsList.push({value: item.adCode,label: item.adName, leaf: false})
                        })
                    } else {
                        townsList = [];
                    }
                    console.log(townsList)
                    resolve(townsList)
                },
                (err) => {
                }
            );
        },
        // 获取村数据列表
        cascaderVillage(node, resolve){
            let villagesList = []
            getAdXBaseData(node.value).then(
                (res) => {
                    if (res.success && res.data) {
                        this.villagesList = res.data
                        this.villagesList.forEach(item=>{
                            villagesList.push({value: item.adCode,label: item.adName, leaf: true})
                        })
                    } else {
                        villagesList = [];
                    }
                    resolve(villagesList)
                },
                (err) => {
                }
            );
        },
        // 所选行政区划节点改变时触发，并将行政区划信息（adCode、adName）输出给父组件
        divisionChange(val){
            if(val.length){
                let division
                if(val.length == 1){
                    division = {
                        adCode: this.rootCode,
                        adName: this.currentObjectName
                    }
                }else if(val.length == 2){
                    let townName
                    this.townsList.forEach(ele=>{
                        if(ele.adCode == val[1]){
                            townName = ele.adName
                        }
                    })
                    division = {
                        adCode: val[1],
                        adName: `${this.currentObjectName}${townName}`
                    }
                }else if(val.length == 3){
                    let townName,villageName
                    this.townsList.forEach(ele=>{
                        if(ele.adCode == val[1]){
                            townName = ele.adName
                        }
                    })
                    this.villagesList.forEach(ele=>{
                        if(ele.adCode == val[2]){
                            villageName = ele.adName
                        }
                    })
                    division = {
                        adCode: val[1],
                        adName: `${this.currentObjectName}${townName}${villageName}`
                    }
                }
                this.$emit('currentDivision',division)
            }
        },
        // 添加自定义（数据库中没有的）行政区划信息
        addCustomDivision(){
            this.showAddDivisionDialog = true
        },
        // 添加成功后触发addSuccess方法  由于级联面板采用了懒加载的方法，所以在添加成功后利用v-if来强制行政区划列表的更新
        addSuccess(){
            this.showAddDivisionDialog = false
            this.showCascader = false
            setTimeout(()=>{
                this.showCascader = true
            },500)
        },
        handleClose(){
            this.showAddDivisionDialog = false
        }
    }
}
</script>
<style lang="scss">
    
</style>