<template>
    <ap-container>
        <ap-main margin="1111" style="padding: 0;">
            <el-tabs v-model="activeName" class="ap-tabs" type="card">
                <el-tab-pane label="岗位" name="SysJob" class="ap-tab">
                    <template v-if="activeName=='SysJob'">
                        <sys-job></sys-job>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="基准岗位" name="SysJobStandard" class="ap-tab">
                    <template v-if="activeName=='SysJobStandard'">
                        <sys-job-standard></sys-job-standard>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="基准岗位分组" name="SysJobStandardGroup" class="ap-tab">
                    <template v-if="activeName=='SysJobStandardGroup'">
                        <sys-job-standard-group></sys-job-standard-group>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="人员岗位关系" name="SysPersonJob" class="ap-tab">
                    <template v-if="activeName=='SysPersonJob'">
                        <sys-person-job></sys-person-job>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </ap-main>
    </ap-container>
</template>

<script>
import SysJob from './SysJob'
import SysJobStandard from './SysJobStandard'
import SysJobStandardGroup from './SysJobStandardGroup'
import SysPersonJob from './SysPersonJob'

export default {
    name: "SysJobHome",
    components: {
        SysJob, SysJobStandard, SysJobStandardGroup, SysPersonJob
    },
    data() {
        return {
            activeName: 'SysJob',
        }
    }
}
</script>

<style scoped>
.ap-tabs {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.ap-tab {
    height: 100%;
}

.ap-tabs /deep/ .el-tabs__content {
    flex: 1;
    overflow: scroll;
    background-color: white;
    padding: 0;
}

</style>
