kpi_vue_pc/src/views/basicCont/targetLayout.vue

<template>
<!-- 指标外层布局矿建 -->
    <el-container>
        <!-- 行政组织级 -->
        <el-aside width="220px">
            <el-scrollbar > 
                <el-tree
                    :data="GovthreeList2"
                    :props="defaultProps1"
                    @node-click="handleNodeClick"
                ></el-tree>
            </el-scrollbar>
        </el-aside>
        <el-aside v-show="postList.length > 0"
          width="200px"
        >
            <el-tree
                :data="postList"
                :props="defaultProps1"
                @node-click="NodePostClick"
            ></el-tree>
        </el-aside>
        <el-main>
            <el-scrollbar > 
                <div v-if="postShow">
                    <gwProject :gwFromList="gwFromList" :gwId="gwId"></gwProject>
                  </div>
                  <div v-if="departShow">
                    <department :bmId="bmId"></department>
                  </div>
            </el-scrollbar>
        </el-main>
    </el-container>

</template>
<script>
import { govthree, positionlist } from "@/api/personnel/post";
import { dutyclasslist } from "@/api/duty/dimension";

import gwProject from "@/views/basicInfo/gwProject.vue";
import department from "@/views/basicCont/departTarget.vue";
import {
  posttargetlist,
  addtarget,
  gettargetinfo,
  eiteassessinfo,
  eitetarget,
  deltarget,
  editposttarget,
  editstate,
  addposttarget,
} from "@/api/duty/project";
import { getgroupdepartmap, getgroupuser } from "@/api/duty/group";
export default {
    components: {
        // project,
        department,
        gwProject
    },
    name: "Dashboard",
    data() {
        return {
            GovthreeList2: [],      //行政组织
            defaultProps1: {
                children: "child",
                label: "name",
            },
            postList: [],           //岗位
            departShow:true, //部门是否显示
            postShow:false, //岗位是否显示
            bmId:1, //部门ID参数传递
            gwId:1, //岗位参数传递
            gwFromList:{        //岗位参数传递
                gwId:1,
                bmId:1
            },
        }
    },
    created() {
        // 页面渲染时获取初始数据
        this.getGovthree2();
    },
    methods: {
        //   获取行政组织二级树
        async getGovthree2() {
            const res = await govthree();
            // this.GovthreeList2 = res.data[0].child;
            this.GovthreeList2 = res.data
            console.log("this.GovthreeList2===>",res.data);
        },
        // 点击行政组织树
        handleNodeClick(val) {
            // this.searchInfo.organization=val.id
            // this.searchInfo.organization=this.searchInfo.organization.toString()
            this.getPost(val.id);
            console.log('bumen----------->layout')
            this.bmId=val.id
            this.gwFromList.bmId=val.id
            this.postShow=false
            this.departShow=true
            // console.log(val);
        },
        // 获取岗位
        async getPost(val) {
            const from = {
                organization: val.toString(),
                page: 1,
                pagesize: 10,
            };
            const res = await positionlist(from);
            this.postList = res.data.list;
        },
        // 点击岗位列表
        NodePostClick(val) {
            this.gwId=val.id
            this.gwFromList.gwId=val.id
            this.postShow=true
            this.departShow=false
            // console.log('岗位')
            console.log(this.gwFromList);
        },
    }
}

</script>
<style>
    .el-aside {
        text-align: center;
        height: calc(103% - 2px);
        overflow: hidden;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid rgb(220, 223, 230);
        margin: 2px 0 0 0;
        padding-bottom: 10px;
    }
    .el-main{
        height: 105%;
    }
    .el-container {
        height:calc(100% - 50px);
        overflow: hidden;
    }
    .el-scrollbar {
        height: 100%;
    }
    .el-scrollbar__wrap {
        overflow: hidden;
        overflow-y: auto;
        overflow: scroll;
    }
</style>