vue-hihub-departments

Установка

npm i vue-hihub-departments

В frontentd/src/main.js нужного проекта вставить

import 'vue-hihub-departments';

В компоненте в который будет добавляться компонент орг структуры добавить:

import 'vue-hihub-departments/dist/vue-hihub-departments.css'

А также:

<template>
  <Departments/>
</template>

Из папки пакета последновательно вставить в src/frontend/locales соответствующие ланги в объекте org

"org":{
    "name_dep":"Отделы",
    "add_dep": "Добавить отдел",
    "back": "Вернуться к выбору отдела",
    "create_dep": "Создать отдел",
    "created_success": "Отдел создан",
    "current_head": "Текущий глава отдела",
    "delete_dep": "Удалить отдел",
    "deleted_success": "Отдел удалён",
    "description_invite": "Пригласите пользователей в вашу команду",
    "description_structure": "Управление отделами и пользователями",
    "description_workers": "Привязка пользователей к структуре предприятия и удаление пользователей",
    "edit": "Редактирование",
    "edit_dep": "Редактировать отдел",
    "edited_success": "Отдел отредактирован",
    "enter": "Введите название отдела",
    "head": "Выберите главу отдела",
    "hide_add_form": "Скрыть форму добавления отдела",
    "hide_edit_form": "Скрыть форму редактирования отдела",
    "hide_invite_form": "Cкрыть форму приглашения пользователей",
    "invite": "Пригласить пользователей",
    "name": "Название",
    "save": "Сохранить",
    "no_select": "Не выбирать руководителя",
    "parent": "Выберите родительский департамент",
    "select_head": "Выбрать руководителя",
    "title": "Орг.структура",
    "workers": "Управление пользователями",
    "parent":"Родительский отдел",
    "create_child":"Создать дочерний отдел",
    "set_head":"Добавить руководителя",
    "delete_head":"Удалить руководителя",
    "head_role":"Руководитель отдела",
    "back_view":"Обратно к просмотру",
    "departments_show": "Организационная структура предприятия"
  }

Из папки пакета корректно вставить orgstructure.js в src/store, затем подключить данный модуль к стораджу(store.js) следующим образом

import Vue from 'vue'
import Vuex from 'vuex'
import Api from './Api'
import i18n from './i18n'
import router from './router'
import orgstructure from './store/orgstructure.js'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        orgstructure:orgstructure,
    },
    state: {
        user: [],

    },
    getters: {
        getUser: state => {
            return state.user
        },
    },
    actions: {
        loadUser(context) {
            Api.getUser()
                .then(response => {
                    context.commit('LOAD_USER', response.data)
                    return response.data
                })
                .then(user => {
                    if (!user.team_id) {
                        router.push({ path: '/' })
                    }
                })
        },
        updateUser(context, data) {
            context.commit('LOAD_USER', data)
        },
    },
    mutations: {
        LOAD_USER(state, payload) {
            state.user = payload
        },
        
    }
})

В Api.js необходим следующий запрос:

Api.getUser = () => axios.get('/api/user')