Древовидная структура организационной структуры
目标: Используйте компонент element-UI для создания базовой схемы организационной структуры.
Понимать организационную структуру
организационная структура продукта прд
Организационная структура предприятия - это душа предприятия.Организационная структура часто имеет древовидную пирамидальную структуру.В этой главе мы изложим базовую структуру страницы.
Реализовать основное содержание организационной структуры
Сначала реализуйте структуру заголовка, используя расположение строк и столбцов элемента.
<!-- Реализовать базовую компоновку страницы -->
<el-card class="дерево-карта">
<!-- Используется расположение строк и столбцов -->
<el-row type="flex" justify="space-between" align="middle" style="height: 40px">
<столбец>
<span>Подкасты Jiangsu Chuanzhi Education Technology Co., Ltd.</span>
</эл-кол>
<эл-кол :span="4">
<el-row type="flex" justify="end">
<!-- два содержимого -->
<el-col>Ответственный</el-col>
<столбец>
<!-- элемент раскрывающегося меню -->
<выпадающий список>
<диапазон>
操作<i class="el-icon-arrow-down" />
</span>
<!-- выпадающее меню -->
<el-dropdown-menu slot="выпадающий">
<el-dropdown-item>Добавить подотдел</el-dropdown-item>
</el-выпадающее-меню>
</эль-выпадающий>
</эл-кол>
</el-row>
</эл-кол>
</el-row>
<!-- Ниже приведено содержимое элемента управления "дерево" -->
</эл-карта>
стиль
<стиль ограничен>
.дерево-карта {
отступ: 30px 140px;
размер шрифта: 14px;
}
</стиль>
Понимание компонентов дерева
Затем реализуйте древовидную структуру, используя древовидный компонент элемента , как показано на рисунке.
Свойства компонента дерева
| параметр | иллюстрировать | тип | необязательное значение | По умолчанию |
|---|---|---|---|---|
| по умолчанию-развернуть все | Раскрывать ли все узлы по умолчанию | логический | — | — |
| данные | Данные дисплея | множество | — | — |
| ключ узла | Каждый узел дерева используется как уникально идентифицируемый атрибут, и все дерево должно быть уникальным. | Нить | — | — |
| реквизит | Варианты конфигурации, подробности см. в таблице ниже. | объект | — | — |
свойство реквизита
| параметр | иллюстрировать | тип | необязательное значение | По умолчанию |
|---|---|---|---|---|
| этикетка | Задайте метку узла как значение атрибута объекта узла. | строка, функция (данные, узел) | — | — |
| дети | Задайте поддерево как значение атрибута объекта узла | нить | — | — |
| неполноценный | Указывает, отключено ли поле выбора узла в качестве значения свойства объекта узла. | логическое значение, функция (данные, узел) | — | — |
| isLeaf | Указывает, является ли узел конечным узлом, который вступает в силу только в том случае, если указан атрибут lazy. | логическое значение, функция (данные, узел) | — | — |
Данные являются ключом к формированию данных дерева, следующие данные могут строить данные дерева
[{
метка: «Уровень 1»,
дети: [{
метка: «Уровень 1-1»,
дети: [{
метка: «Уровень 3 1-1-1»
}]
}]
}, {
метка: 'уровень 2',
дети: [{
метка: "Уровень 2-1",
дети: [{
метка: «Уровень 3 2-1-1»
}]
}, {
этикетка: «Средняя 2-2»,
дети: [{
метка: «Уровень 3 2-2-1»
}]
}]
}, {
метка: 'уровень 3',
дети: [{
метка: «Уровень 2 3-1»,
дети: [{
метка: «Третий уровень 3-1-1»
}]
}, {
метка: «Уровень 2 3-2»,
дети: [{
метка: «Третий уровень 3-2-1»
}]
}]
}]
Внедрить древовидную статическую организационную структуру
Поэтому сначала реализуем организационную структуру статических данных
<!--Поместите атрибут Реквизит здесь не имеет ничего общего с реквизитом, который мы узнали раньше от отца к сыну-->
<el-tree :data="departs" :props="defaultProps" />
экспорт по умолчанию {
данные() {
возвращаться {
defaultProps: {
метка: 'имя'
},
уходит: [
{название: 'Офис президента', дочерние элементы: [{название: 'Совет директоров' }] },
{ название: 'Административный отдел' },
{ название: 'Отдел кадров' }
]
}
}
}
Далее добавляем отображаемый контент в каждый узел уровня, в это время нужно использовать слот дерева
<шаблон>
<div class="панель-контейнер">
<div class="app-контейнер">
<!-- Реализовать базовую компоновку страницы -->
<эл-карта>
<!--Содержимое заголовка опущено-->
<!--Поместите атрибут Реквизит здесь не имеет ничего общего с реквизитом, который мы узнали раньше от отца к сыну-->
<el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
<!-- Содержимое слота входящего контента будет повторяться столько раз, сколько узлов -->
<!-- Scope slot slot-scope="obj" получает данные, переданные объекту данных слота каждого узла -->
<el-row slot-scope="{data}" type="flex" justify="space-between" align="middle" style="width:100%;height:40px;">
<!-- левое содержимое -->
<столбец>
<диапазон>{
{ data.name }}</span>
</эл-кол>
<!-- Контент справа -->
<эл-кол :span="4">
<el-row type="flex" justify="end">
<столбец>{
{ data.manager }}</el-col>
<столбец>
<!-- Разместить раскрывающееся меню -->
<выпадающий список>
<!-- содержание -->
<span>操作 <i class="el-icon-arrow-down" /> </span>
<!-- именованный слот -->
<el-dropdown-menu slot="выпадающий">
<el-dropdown-item>Добавить подотдел</el-dropdown-item>
<el-dropdown-item>Редакционный отдел</el-dropdown-item>
<el-dropdown-item>Удалить отдел</el-dropdown-item>
</el-выпадающее-меню>
</эль-выпадающий>
</эл-кол>
</el-row>
</эл-кол>
</el-row>
</эл-дерево>
</эл-карта>
</div>
</div>
</шаблон>
<скрипт>
экспорт по умолчанию {
название: «Отделы»,
данные() {
возвращаться {
defaultProps: {
метка: 'имя'
},
уходит: [
{ имя: «Офис президента», менеджер: «Цао Цао», дети: [{ имя: «Совет директоров», менеджер: «Цао Пи» }] },
{имя: "Административный отдел", менеджер: "Лю Бэй"},
{имя: 'Отдел кадров', менеджер: 'Сун Цюань'}
]
}
}
}
</скрипт>
<стиль>
</стиль>
Наконец, формируется статический структурный эффект.
отправить код
本节任务: завершить отображение древовидной структуры
Отдельно извлеките содержимое операции дерева на компоненты
目标: отдельно извлекать содержимое операций дерева на компоненты
Инкапсулирует отдельные компоненты панели действий дерева
В первой главе мы обнаружили, что содержимое дерева верхнего уровня на самом деле согласуется с содержимым дочерних узлов.На данный момент эту часть можно извлечь в компонент для сохранения кода.
компонентыsrc/views/departments/components/tree-tools.vue
<шаблон>
<el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%">
<столбец>
<!-- Имя должно стать именем в соответствующем узле -->
<диапазон>{
{treeNode.name}</span>
</эл-кол>
<эл-кол :span="4">
<el-row type="flex" justify="end">
<!-- два содержимого -->
<столбец>{
{treeNode.manager}}</el-col>
<столбец>
<!-- элемент раскрывающегося меню -->
<выпадающий список>
<диапазон>
操作<i class="el-icon-arrow-down" />
</span>
<!-- выпадающее меню -->
<el-dropdown-menu slot="выпадающий">
<el-dropdown-item>Добавить подотдел</el-dropdown-item>
<el-dropdown-item>Редакционный отдел</el-dropdown-item>
<el-dropdown-item>Удалить отдел</el-dropdown-item>
</el-выпадающее-меню>
</эль-выпадающий>
</эл-кол>
</el-row>
</эл-кол>
</el-row>
</шаблон>
<скрипт>
// Компонент должен быть открыт для внешнего мира, и объект должен быть предоставлен извне.Менеджер имен должен быть включен в объект
экспорт по умолчанию {
// свойства могут использовать массивы для получения данных или объекты для получения
// реквизит: { атрибут реквизита: {параметры конфигурации} }
реквизит: {
// определяем атрибут реквизита
узел дерева: {
тип: Объект, // тип объекта
required: true // Когда требуется, чтобы другая сторона использовала ваш компонент, вы должны передать атрибут treeNode, если вы его не передадите, будет сообщено об ошибке
}
}
}
</скрипт>
Примените компоненты панели действий в организационной структуре
Далее src/views/departments/index.vueв упрощении кода
<шаблон>
<div class="панель-контейнер">
<div class="app-контейнер">
<!-- Реализовать базовую компоновку страницы -->
<el-card class="дерево-карта">
<!-- Используется расположение строк и столбцов -->
<!-- отсутствует узел дерева -->
<дерево-инструменты :tree-node="компания" />
<!--Поместите атрибут Реквизит здесь не имеет ничего общего с реквизитом, который мы узнали раньше от отца к сыну-->
<el-tree :data="departs" :props="defaultProps" default-expand-all>
<!-- Объясните, что содержимое в эл-дереве — это содержимое слота => содержимое заполнения ямы => сколько там узлов и сколько раз -->
<!-- scope-scope — это данные, которые компонент дерева передает в содержимое слота каждого узла -->
<!-- Порядок должен заключаться в том, чтобы выполнить назначение слота перед выполнением передачи реквизита -->
<tree-tools slot-scope="{ data }" :tree-node="data" />
</эл-дерево>
</эл-карта>
</div>
</div>
</шаблон>
В приведенном выше коде переменная компании должна быть определена в данных
компания: {название: 'Jiangsu Chuanzhi Podcast Education Technology Co., Ltd', менеджер: 'ответственное лицо'},
При этом, поскольку компонент используется в обоих положениях, компонент, размещенный на верхнем слое, не нужно 删除部门отображать 编辑部门и
Итак, добавьте новое свойство isRoot（是否根节点）для управления
реквизит: {
узел дерева: {
required: true, // устанавливаем текущие данные как требуется
тип: объект // тип объекта
},
isRoot: {
тип: логический,
по умолчанию: ложь
}
}
<tree-tools :tree-node="company" :is-root="true" />
В компоненте судят об отображении по isRoot
<!-- Изменить отдел и удалить отдел будут отображаться только на дочерних узлах --> <el-dropdown-item v-if="!isRoot">Редакционный отдел</el-dropdown-item> <el-dropdown-item v-if="!isRoot">Удалить отдел</el-dropdown-item>
Благодаря инкапсуляции код выглядит более компактным и лаконичным, в чем прелесть инкапсуляции.
отправить код
本节任务: Отдельное извлечение компонентов из содержимого дерева
Получить данные организационной структуры и выполнить обработку дерева
目标Получите данные о реальной организационной структуре, преобразуйте их в данные дерева и отобразите на странице.
Инкапсулируйте интерфейс API для получения данных организационной структуры
Теперь, когда базовая статическая структура сформирована, необходимо получить реальные данные.
Во-первых, инкапсулируйте запрос для получения организационной структуры src/api/departments.js
/** *
*
* Получить данные организационной структуры
* **/
функция экспорта getDepartments() {
запрос на возврат({
адрес: '/компания/отдел'
})
}
Вызов интерфейса в функции ловушки
импортировать TreeTools из './components/tree-tools'
импортировать {getDepartments} из '@/api/departments'
экспорт по умолчанию {
компоненты: {
TreeИнструменты
},
данные() {
возвращаться {
company: { }, // структура данных заголовка
уходит: [],
defaultProps: {
label: 'name' // Указывает отображать содержимое из этого свойства
}
}
},
созданный() {
this.getDepartments() // метод для вызова самого себя
},
методы: {
асинхронный getDepartments () {
константный результат = ожидание getDepartments()
this.company = {имя: result.companyName, менеджер: 'ответственный'}
this.departs = result.depts // нужно преобразовать его в древовидную структуру
console.log(результат)
}
}
}
Преобразование данных массива в древовидную структуру
Затем нам нужно преобразовать табличные данные в данные дерева, что требует рекурсивного алгоритма.
Инкапсулировать служебный метод,src/utils/index.js
/** *
*
* Преобразование данных списка в данные дерева => рекурсивный алгоритм => вызов самого себя => некоторые условия не могут быть одинаковыми, иначе будет бесконечный цикл
* В обходе дерева есть ключевой момент, чтобы сначала найти лидера
* ***/
функция экспорта tranListToTreeData (список, rootValue) {
вар обр = []
list.forEach (элемент => {
если (item.pid === rootValue) {
// После того, как вы его нашли, вам нужно узнать, есть ли дочерние узлы под элементом
const Children = tranListToTreeData (список, item.id)
если (дети.длина) {
// Если длина дочерних элементов больше 0, это означает, что дочерний узел найден
пункт.дети = дети
}
arr.push(item) // добавить содержимое в массив
}
})
обратный прилет
}
Вызовите метод преобразования, чтобы преобразовать древовидную структуру
this.company = { name: result.companyName, manager: 'responsible' } // определяем здесь пустую строку, потому что это корень, а pid данных всех дочерних узлов - ""
this.departs = tranListToTreeData(result.depts, '')
Таким образом, данные дерева доступны, и в следующей главе можно выполнять операции над отделами.
отправить код
本节任务Получить данные организационной структуры и выполнить обработку дерева
Удалить реализацию функции отдела
目标Реализовать функцию удаления функции операции
Инкапсулировать интерфейс удаления, зарегистрировать событие раскрывающегося меню
Во-первых, инкапсуляция удаляет функциональный модульsrc/api/departments.js
/** *
* В соответствии с id и отделом интерфейс оформлен по правилам restful Удалить удалить, добавить пост, изменить поставить, получить получить
* **/
функция экспорта delDepartments(id) {
запрос на возврат({
URL-адрес: `/company/department/${id}`,
метод: «удалить»
})
}
Затем в компоненте инструментов дерева прослушайте событие щелчка раскрывающегося меню.src/views/departments/index.vue
<el-dropdown @command="operateDepts"> <диапазон> 操作<i class="el-icon-arrow-down" /> </span> <!-- выпадающее меню --> <el-dropdown-menu slot="выпадающий"> <el-dropdown-item command="add">Добавить подотдел</el-dropdown-item> <!-- Изменить отдел и удалить отдел будут отображаться только на дочерних узлах --> <el-dropdown-item v-if="!isRoot" command="edit">Редакционный отдел</el-dropdown-item> <el-dropdown-item v-if="!isRoot" command="del">Удалить отдел</el-dropdown-item> </el-выпадающее-меню> </эль-выпадающий>
Команда слушателя событий раскрывающегося меню
// Метод, вызываемый операционным узлом
операционные отделы (тип) {
если (тип === 'добавить') {
// Добавляем операции подотдела
} иначе если (тип === 'изменить') {
// Редактировать операции отдела
} еще {
// операция удаления
}
}
Вызовите интерфейс удаления, чтобы уведомить родительский компонент об обновлении данных.
Перед удалением предложите пользователю удалить, а затем вызовите интерфейс удаления.
// Метод, вызываемый операционным узлом
операционные отделы (тип) {
если (тип === 'добавить') {
// Добавляем операции подотдела
} иначе если (тип === 'изменить') {
// Редактировать операции отдела
} еще {
// операция удаления
this.$confirm('Вы уверены, что хотите удалить этот отдел?').then(() => {
// Если вы нажмете OK, вы войдете тогда
return delDepartments(this.treeNode.id) // вернуть обещанный объект
}).тог(() => {
// Если удаление прошло успешно, то сюда войдет
})
}
}
В приведенном выше коде мы успешно удалили данные о сотрудниках, но как уведомить родительский компонент об их обновлении
На предыдущих уроках мы узнали, что можем использовать настраиваемые события this.$emitдля
// Если удаление прошло успешно, то сюда войдет
this.$emit('delDepts') // Запуск пользовательского события
this.$message.success('удалить отдел успешно')
Родительский компонент прослушивает событияsrc/views/department/index.vue
<tree-tools slot-scope="obj" :tree-node="obj.data" @delDepts="getDepartments" />
отправить код
本节任务: Удалить реализацию функции отдела
Добавлена функция отдела - строительные компоненты
目标: Создание компонентов для реализации новых функций отдела
Инкапсулируйте новый интерфейс и создайте структуру всплывающего слоя в новом компоненте.
Во-первых, инкапсулируйте модуль API только что добавленного отдела.src/api/departments.js
/**
* Добавлен интерфейс отдела
*
* ****/
функция экспорта addDepartments (данные) {
запрос на возврат({
адрес: '/компания/отдел',
метод: 'пост',
данные
})
}
Затем нам нужно создать компонент формы для добавления нового отдела.src/views/department/components/add-dept.vue
Схема взаимодействия выглядит следующим образом
<шаблон> <!-- Добавьте маркерный слой отдела --> <el-dialog title="Добавить новый отдел"> <!-- Компонент формы el-form label-width устанавливает ширину метки --> <!-- Анонимный слот --> <el-form label-width="120px"> <el-form-item label="Название отдела"> <el-input style="width:80%" placeholder="1-50 символов" /> </эл-форма-элемент> <el-form-item label="Код отдела"> <el-input style="width:80%" placeholder="1-50 символов" /> </эл-форма-элемент> <el-form-item label="Руководитель отдела"> <el-select style="width:80%" placeholder="Выберите" /> </эл-форма-элемент> <el-form-item label="Введение в отдел"> <el-input style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" /> </эл-форма-элемент> </эл-форма> <!-- el-dialog имеет слот slot для размещения нижней панели операций --> <el-row slot="footer" type="flex" justify="center"> <!-- столбец разделен на 24 --> <эл-кол :span="6"> <el-button type="primary" size="small">确定</el-button> <el-button size="small">取消</el-button> </эл-кол> </el-row> </эль-диалог> </шаблон>
Нажмите, чтобы добавить подотдел для отображения компонента всплывающего слоя.
Затем нам нужно использовать атрибуты для управления отображением или скрытием компонентов.
// Необходимо передать переменную props для управления отображением или скрытием
реквизит: {
показатьдиалог: {
тип: логический,
по умолчанию: ложь
}
}
<el-dialog title="Добавить новый отдел" :visible="showDialog">
departments/index.vueВведите этот компонент в
импортировать AddDept из './components/add-dept' // импортировать новые компоненты отдела
экспорт по умолчанию {
компоненты: { AddDept }
}
Определите переменные, управляющие отображением формыshowDialog
данные() {
возвращаться {
showDialog: false // показать форму
}
},
<!-- Разместите новый компонент всплывающего слоя -->
<добавить отдел :show-dialog="showDialog" />
При нажатии на добавление нового отдела всплывающий компонент
Обратите внимание, что компонент инструментов дерева щелкается для добавления, поэтому здесь нам все еще нужен дочерний компонент для вызова родительского компонента.
Подкомпоненты запускают новые события ·src/views/departments/tree-tools.vue
если (тип === 'добавить') {
// Добавляем операции подотдела
// Указываем родительскому компоненту отображать всплывающее окно
this.$emit('addDepts', this.treeNode) // почему отправляется treeNode, потому что для добавления подотдела нужны данные текущего отдела
}
Родительский компонент прослушивает события
2 добавлено
<tree-tools slot-scope="{data}" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" />
<tree-tools :tree-node="company" :is-root="true" @delDepts="getDepartments" @addDepts="addDepts" />
Откройте слой в методе и запишите, под каким узлом добавляется подотдел.
addDepts(узел) {
this.showDialog = true // показать всплывающее окно
// Так как узел является текущим отделом, этот отдел должен быть записан в это время,
this.node = узел
}
отправить код
本节任务: Добавить функцию отдела — создать компонент
Завершите проверку правила только что добавленного отдела
目标Завершите проверку правил и часть отправки данных новой функции отдела.
Выполните основные условия проверки только что добавленной формы.
Название отдела (имя): обязательно 1-50 символов / дублирование отделов запрещено в отделах одного уровня
Код отдела (код): обязательно 1-50 символов / код отдела не допускается повторять во всем модуле
Начальник отдела (менеджер): требуется
Введение отдела (introduce): требуется 1-300 символов
определить структуру данных
данные формы: {
name: '', // название отдела
код: '', // код отдела
менеджер: '', // менеджер отдела
ввести: '' // введение отдела
},
Выполните предварительные условия, необходимые для проверки формы.
-
модель конфигурации el-form и атрибуты правил
-
атрибут конфигурации el-form-item
-
Двусторонняя привязка формы v-model
Настройка основных правил проверки для новых форм
Согласно этим требованиям правила проверки
данные() {
возвращаться {
// определяем данные формы
данные формы: {
name: '', // название отдела
код: '', // код отдела
менеджер: '', // менеджер отдела
ввести: '' // введение отдела
},
// определяем правила проверки
правила: {
имя: [
{ required: true, message: 'Название отдела не может быть пустым', trigger: 'blur' },
{ мин: 1, макс: 50, сообщение: «Название отдела требует 1–50 символов», триггер: «размытие» }
],
код: [
{ обязательно: true, сообщение: "Код отдела не может быть пустым", триггер: "размытие" },
{ мин: 1, макс: 50, сообщение: "Код отдела требует 1-50 символов", триггер: "размытие" }
],
менеджер: [{ требуется: true, сообщение: «Начальник отдела не может быть пустым», триггер: «размытие» }],
представлять: [
{ обязательно: true, сообщение: «Введение в отдел не может быть пустым», триггер: «размытие» },
{ триггер: 'размытие', мин.: 1, макс.: 300, сообщение: "Введение в отдел требует 1-50 символов" }
]
}
}
}
Пользовательская проверка названия отдела и кода отдела
注意: Есть два правила для названия отдела и кода отдела, которые нам нужно 自定义校验函数validatorреализовать.
В первую очередь, при проверке имени и кода необходимо получить последнюю оргструктуру, именно поэтому здесь мы используем размытие в триггере, так как частота изменения слишком высока для доступа, нам нужно контролировать частоту доступ
// Сначала получаем последние данные организационной структуры
const {отделы} = ожидание getDepartments()
Названия отделов не могут быть
同级别дублированы.Обратите внимание, что нам нужно найти все данные на одном уровне для проверки, поэтому необходим еще один параметр pid
реквизит: {
// Используется для управления отображением или скрытием формы
показатьдиалог: {
тип: логический,
по умолчанию: ложь
},
// текущий рабочий узел
узел дерева: {
тип: Объект,
по умолчанию: ноль
}
},
<add-dept :show-dialog="showDialog" :tree-node="узел" />
В соответствии с текущим идентификатором отдела найдите данные, относящиеся ко всем подотделам, и оцените, повторяются ли они.
// Теперь определим функцию. Цель этой функции - узнать, есть ли повторяющиеся названия отделов под отделом на том же уровне
const checkNameRepeat = async (правило, значение, обратный вызов) => {
// Сначала получаем последние данные организационной структуры
const {отделы} = ожидание getDepartments()
// depts — все данные отдела
// Как найти все дочерние узлы технического отдела
const isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
isRepeat ? callback(new Error(`Уже есть отдел с ${value} под отделом на том же уровне`)) : callback()
}
Процесс проверки кода отдела такой же
// проверка на дублирование кода
const checkCodeRepeat = async (правило, значение, обратный вызов) => {
// Сначала получаем последние данные организационной структуры
const {отделы} = ожидание getDepartments()
const isRepeat = depts.some(item => item.code === value && value) // Добавление значения здесь не является пустым, потому что у нашего отдела может не быть кода
isRepeat ? callback(new Error(`В организационной структуре уже есть отдел, использующий кодировку ${value}`)) : callback()
}
определено в правиле
// определяем правила проверки
правила: {
имя: [
{ required: true, message: 'Название отдела не может быть пустым', trigger: 'blur' },
{ мин: 1, макс: 50, сообщение: «Название отдела требует 1-50 символов», триггер: «размытие»},
// Формальная проверка пользовательских функций
{триггер: 'размытие', валидатор: checkNameRepeat}
],
код: [
{ обязательно: true, сообщение: "Код отдела не может быть пустым", триггер: "размытие" },
{ мин: 1, макс: 50, сообщение: "Код отдела требует 1-50 символов", триггер: "размытие"},
{ триггер: 'размытие', валидатор: checkCodeRepeat}
],
менеджер: [{ требуется: true, сообщение: «Начальник отдела не может быть пустым», триггер: «размытие» }],
представлять: [
{ обязательно: true, сообщение: «Введение в отдел не может быть пустым», триггер: «размытие» },
{ триггер: 'размытие', мин.: 1, макс.: 300, сообщение: "Введение в отдел требует 1-50 символов" }
]
}
Обработать данные pid содержимого заголовка
需要注意: В самом корневом tree-toolsкомпоненте, поскольку в атрибуте узла дерева нет идентификатора, идентификатор не определен, но соответствующий корневой узел не может быть найден с помощью эквивалентной оценки неопределенности, поэтому при передаче значения мы устанавливаем атрибуту идентификатора значение“”
src/views/departments/index.vue
асинхронный getDepartments () {
константный результат = ожидание getDepartments()
this.departs = tranListToTreeData(result.depts, '')
this.company = { name: result.companyName, manager: 'ответственное лицо', id: '' }
},
отправить код
本节任务: завершите проверку правила только что добавленного отдела.
Добавлена функция отдела - данные начальника отдела
目标: Получить выпадающие данные начальника отдела в новой форме
В форме в предыдущем разделе начальник отдела - это выпадающие данные,
员工接口из которых получить эти данные
Во-первых, инкапсулируйте модуль, который получает простой список сотрудников.src/api/employees.js
импортировать запрос из '@/utils/request'
/**
* Получить простой список сотрудников
* **/
функция экспорта getEmployeeSimple() {
запрос на возврат({
URL-адрес: '/sys/пользователь/простой'
})
}
Затем вызовите этот интерфейс в add-dept.vueсобытии выбора фокуса focus, потому что мы хотим получить последние данные в реальном времени.
<el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple"> <!-- Необходимо выполнить цикл для создания параметров. Здесь выполните простой процесс, чтобы отобразить имя пользователя и сохранить его --> <el-option v-for="элемент в людях" :key="item.id" :label="item.username" :value="item.username" /> </эл-выбрать>
получить список сотрудников
импортировать {getEmployeeSimple} из '@/api/employees'
методы: {
// Получить данные простого списка сотрудников
асинхронный getEmployeeSimple() {
this.peoples = ожидание getEmployeeSimple()
}
}
данные:{
peoples: [] // Получаем данные полученного простого списка сотрудников
}
отправить код
本节任务: Новая функция отдела - данные начальника отдела
Что нового - Отправить - Отменить - Закрыть
目标: Полные функции, такие как отправка-отмена-закрытие новых модулей
Пройдите верификацию, вызовите новый интерфейс
При нажатии кнопки ОК на новой странице нам необходимо завершить общую проверку формы, и если проверка прошла успешно, отправить ее
Во-первых, при нажатии OK подтвердите форму
Определить атрибут ref для электронной формы
<el-form ref="deptForm" :model="formData" :rules="rules" label-width="120px">
// Запускается при нажатии OK
бтнОК() {
this.$refs.deptForm.validate(в порядке => {
если (в порядке) {
// Указывает, что его можно отправить
}
})
}
Затем, когда проверка будет пройдена, вызовите только что добавленный интерфейс
Поскольку добавляется подотдел, нам нужно установить pid вновь добавленного отдела на идентификатор текущего отдела, и вновь добавленный отдел станет своим собственным подотделом.
// Запускается при нажатии OK
бтнОК() {
this.$refs.deptForm.validate(async isOK => {
если (в порядке) {
// Указывает, что его можно отправить
await addDepartments({ ...this.formData, pid: this.treeNode.id }) // вызываем новый интерфейс для добавления идентификатора родительского отдела
}
})
}
Точно так же после успешного добавления вызов сообщает родительскому компоненту о повторном извлечении данных.
this.$emit('addDepts')
родительский компонент
<add-dept :show-dialog="showDialog" :tree-node="node" @addDepts="getDepartments" />
本节注意: Учащимся может быть интересно, мы tree-tools.vueи add-dept.vueдва компонента запускаем событие addDepts, нет ли конфликта?
Здесь все настраиваемые события, которые мы запускаем, относятся к самому компоненту, между ними нет никакой связи, они просто имеют одно и то же имя, пожалуйста, не путайте их.
Используйте модификатор синхронизации, чтобы закрыть новый всплывающий слой.
Здесь мы учимся новому трюку,
sync修饰符
Как правило, если вы хотите обновить родительский компонент showDialog, вам нужно сделать это
// Подсборка
this.$emit('changedialog', false) // инициировать событие
// родительский компонент
<ребенок @changedialog="метод" :showDialog="showDialog" />
// внутри JS
метод(значение) {
this.showDialog = значение
}
Однако vuejs предоставляет нам
sync修饰符сокращенный режим, который
// Обновление подкомпонента: исправлена запись (обновление: имя реквизита, значение)
this.$emit('update:showDialog', false) // инициировать событие
// модификатор синхронизации родительского компонента
<ребенок :showDialog.sync="showDialog" />
Пока он изменяется с синхронизацией, мониторинг и методы родительского компонента могут быть опущены, а значение может быть напрямую присвоено showDialog.