fj-dc-ui/.svn/pristine/81/81aa1c33e9ee0966314e5d02abbe8b9d3b62f73b.svn-base

<template>
    <el-container>
        <el-main class="plan_manage_wrapper">
            <p class="content_title">
                <el-button type="primary" v-if="isShwo" size="mini" icon="el-icon-back" @click="backRouter">返回</el-button>
                <span>督查类别</span>
                <el-select v-model="orgType" filterable placeholder="请选择">
                    <el-option
                    v-for="item in supervisionObjlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <span class="demonstration">年度</span>
                <el-date-picker
                  v-model="year"
                  type="year"
                  value-format="yyyy"
                  style="width:150px;"
                  placeholder="选择年">
                </el-date-picker>
                <el-button size="mini" :class="tabType==1 ? 'active' : 'normal'" @click="tabChange('1')">当前数据</el-button>
<!--                <el-button size="mini" :class="tabType==2 ? 'active' : 'normal'" @click="tabChange('2')">历史数据</el-button>-->
                <el-button size="mini" :class="tabType==0 ? 'active' : 'normal'" @click="tabChange('0')">全部数据</el-button>
                <span class="hrs"></span>
            </p>
            <el-row :gutter="10">
                <el-col :span="6">
                    <tree-group :orgType="orgType" :year="year" :tabType="tabType" @sendCurrentNodeinfo="sendCurrentNodeinfo"></tree-group>
                </el-col>
                <el-col :span="18">
                    <plan-content
                        :duChaType="duChaType"
                        :currentSelectTreeNodeId="currentNodeinfo.currentSelectTreeNodeId"
                        :currentSelectTreeNodeName="currentNodeinfo.currentSelectTreeNodeName">
                    </plan-content>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script>
import {getPersPlanType} from '@api/duChaPlan.js'
export default {
    data(){
        return{
            supervisionObjlist:[],    //督查对象列表
            orgType: '',
            year:"",
            currentNodeinfo: {},  //当前选择树节点的信息，从子组件接收过来传给另一个子组件
            tabType:"0",//0全部数据，1当前数据，2历史数据
        }
    },
    computed:{
        isShwo(){
           return this.$route.query.id?true:false;
        },
        persId(){
            return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
        },
        duChaType(){
            return this.orgType ? this.orgType.replace(/\b(0+)/gi,"") : ''
        }
    },
    components:{
        treeGroup: resolve=>{require(['./planManageProvinceNew/treeGroup.vue'],resolve)},
        planContent: resolve=>{require(['./planManageProvinceNew/planContent.vue'],resolve)}
    },
    mounted(){
        this.getSupervisionObjlist()
    },
    methods:{
        backRouter(){
          this.$router.push({path:"/planCheckSd"});
        },
        tabChange(tabType){
            this.tabType = tabType;
            this.currentNodeinfo =  {};
        },
        getSupervisionObjlist(){
            getPersPlanType(this.persId,this.$route.query.id).then(res=>{
                if(res.success && res.data.length){
                    this.supervisionObjlist = res.data
                    this.orgType = this.supervisionObjlist[0].id
                }else{
                    this.$message.warning('暂未分配督查类别')
                }
            }).catch(err=>{
                this.$message.warning('系统异常')
            })
        },
        sendCurrentNodeinfo(data){
            this.currentNodeinfo = data
        }
    },
}
</script>
<style lang="scss" scoped>
.plan_manage_wrapper{
    .content_title{
        span{
            padding-left: 10px;
        }
        .hrs{
            display: inline-block;
            width: calc(100% - 40px);
            margin-left:10px;
            height: 1px;
            vertical-align: middle;
            background-color: #ddd;
        }
        button{
          margin-left: 20px;
        }
    }
}
  .active{
    background: #3f8eff;
    color:white;
  }
  .normal{
    background: white;
  }
</style>