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

<template>
    <el-dialog
    title="关联督查组"
    top="20vh"
    append-to-body
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="mini">
        <el-form-item label="业务">
            <el-select v-model="searchForm.type" placeholder="督查业务" clearable>
                <el-option :label="item.name" :value="item.id" v-for="item in DCTypeOption" :key="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="批次" v-if="searchForm.type">
            <el-select v-model="searchForm.batch" placeholder="批次" clearable>
                <el-option :label="item.pnm" :value="item.id" v-for="item in batchList" :key="item.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <el-input
    placeholder="输入关键字进行过滤"
    v-model="filterText">
    </el-input>
    <el-tree
        v-loading="loading"
        class="filter-tree"
        style="height:40vh;overflow:auto"
        :highlight-current="true" 
        :data="treeData" 
        node-key="id"
        :filter-node-method="filterNode"
        ref="tree"
        :expand-on-click-node="false"
        @node-click="handleNodeClick">
        <div class="custom-tree-node" slot-scope="{ node, data }">
            <span style="float:left;">{{data.nm}} </span>
            <i style="margin-left: 30px;" class="el-icon-success group_select" v-if="groupId == data.id"></i>
        </div>
    </el-tree>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirm">确 定</el-button>
    </span>
</el-dialog>
</template>
<script>
    import {getTreeDataApi,connectToPlanApi} from '@api/zhxxAPI.js'
    import {getTrees} from '@util/gw_formatTree.js'
    import {getPersPlanType} from '@api/duChaPlan.js'
    import {getBatchByType} from '@api/zhxxApi.js'
    export default {
        props: ['roadbookId'],
        data(){
            return{
                dialogVisible: true,
                treeData: [],
                defaultProps: {
                    children: 'children',
                    nm: 'label'
                },
                groupId: '',
                groupNm: '',
                filterText: '',
                loading: false,
                searchForm:{
                    type: '',
                    batch: ''
                },   //督查组过滤条件
                DCTypeOption: null,
                batchList: []
            }
        },
        computed:{
            persId(){
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : "";
            }
        },
        mounted(){
            this.getTreeData()
            this.getUserPlanType()
            this.getbatchList()
        },
        methods:{
            // 获取督查组数据
            getTreeData(){
                let data = {
                    persid: this.persId,
                    ptype: this.searchForm.type,
                    pid: this.searchForm.batch
                }
                this.loading = true
                getTreeDataApi(data).then(res=>{
                    this.loading = false
                    if(res.success){
                        this.treeData = getTrees(res.data)
                    }else{
                        this.$message.warning(res.message)
                    }
                }).catch(err=>{

                })
            },
            comfirm(){
                if(!this.groupId){
                    this.$message.info('请选择要关联的督查组')
                    return
                }
                this.$confirm('确认关联到当前督查组吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: this.roadbookId,
                        planId: this.groupId,
                        planNm: this.groupNm
                    }
                    connectToPlanApi(data).then((res)=>{
                        if(res.success){
                            this.$message.success('关联成功')
                            this.$emit('closeGroupsDialog')
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }).catch(() => {

                });
            },
            handleClose(){
                this.$emit('closeGroupsDialog')
            },
            handleNodeClick(data) {
                console.log(data);
                this.groupId = data.id
                this.groupNm = data.nm
            },
            filterNode(value, data) {
                if (!value) return true;
                if(data.nm == null) data.nm = ''
                return data.nm.indexOf(value) !== -1;
            },
            // 督查业务类型列表获取
            getUserPlanType(){
                let _self = this;
                getPersPlanType(this.persId).then(res =>{
                    this.DCTypeOption = res.data;
                });
            },
            //获取批次数据
            getBatchList(){
                getBatchByType(this.persId,this.searchForm.type).then(res => {
                    this.batchList = res.data;
                });
            },
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
            'searchForm.type':{
                deep: true,
                handler(val){
                    if(!val) this.searchForm.batch = ''
                    this.getTreeData()
                    if(val)this.getBatchList()
                }
            },
            'searchForm.batch':{
                deep: true,
                handler(val){
                    if(val) this.getTreeData()
                }
            }
        },
    }
</script>
<style lang="scss">
    .el-icon-success.group_select{
        color: #67C23A;
    }
</style>