|
@@ -1,11 +1,16 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="organization-container">
|
|
<div class="organization-container">
|
|
|
<div class="left">
|
|
<div class="left">
|
|
|
- <TreeParts :treeData="org_tree_data" @nodeClick="onNodeClick" @addBtnClick="onAddBtnClick"
|
|
|
|
|
- @deleteBtnClick="onDeleteBtnClick" @drop="onNodeDrop" />
|
|
|
|
|
|
|
+ <TreeParts
|
|
|
|
|
+ :treeData="org_tree_data"
|
|
|
|
|
+ @nodeClick="onNodeClick"
|
|
|
|
|
+ @addBtnClick="onAddBtnClick"
|
|
|
|
|
+ @deleteBtnClick="onDeleteBtnClick"
|
|
|
|
|
+ @drop="onNodeDrop"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
<div class="right">
|
|
<div class="right">
|
|
|
- <a-card title="详情" style="height: 100%;">
|
|
|
|
|
|
|
+ <a-card title="详情" style="height: 100%">
|
|
|
<OrgForm :org_form="org_form" @save="orgFromSave" @reset="orgFromReset">
|
|
<OrgForm :org_form="org_form" @save="orgFromSave" @reset="orgFromReset">
|
|
|
<template #actions>
|
|
<template #actions>
|
|
|
<a-button @click="orgFromSave">保存</a-button>
|
|
<a-button @click="orgFromSave">保存</a-button>
|
|
@@ -28,9 +33,7 @@ import TreeParts from '../TreeParts.vue';
|
|
|
import OrgForm from './OrgForm.vue';
|
|
import OrgForm from './OrgForm.vue';
|
|
|
import Modal from '../Modal.vue';
|
|
import Modal from '../Modal.vue';
|
|
|
|
|
|
|
|
-import {
|
|
|
|
|
- QueryDeptDetail, UpdateDept, UpdateDeptParent, CreateDept, DeleteDept
|
|
|
|
|
-} from '../../../apis/permission/org';
|
|
|
|
|
|
|
+import { QueryDeptDetail, UpdateDept, UpdateDeptParent, CreateDept, DeleteDept } from '../../../apis/permission/org';
|
|
|
|
|
|
|
|
import { QueryDeptTree } from '../../../apis/permission/common';
|
|
import { QueryDeptTree } from '../../../apis/permission/common';
|
|
|
|
|
|
|
@@ -48,16 +51,20 @@ const org_form = reactive({
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const getDeptTree = async () => {
|
|
const getDeptTree = async () => {
|
|
|
- const { code, data: { rows } } = await QueryDeptTree();
|
|
|
|
|
|
|
+ const {
|
|
|
|
|
+ code,
|
|
|
|
|
+ data: { rows }
|
|
|
|
|
+ } = await QueryDeptTree();
|
|
|
if (code == 200) {
|
|
if (code == 200) {
|
|
|
org_tree_data.value = rows;
|
|
org_tree_data.value = rows;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
// 树节点操作相关
|
|
// 树节点操作相关
|
|
|
const onNodeClick = async (id) => {
|
|
const onNodeClick = async (id) => {
|
|
|
- const { data: { data } } = await QueryDeptDetail(id);
|
|
|
|
|
|
|
+ const {
|
|
|
|
|
+ data: { data }
|
|
|
|
|
+ } = await QueryDeptDetail(id);
|
|
|
org_form.deptId = id;
|
|
org_form.deptId = id;
|
|
|
org_form.parentName = data.parentName;
|
|
org_form.parentName = data.parentName;
|
|
|
org_form.status = data.status;
|
|
org_form.status = data.status;
|
|
@@ -65,12 +72,11 @@ const onNodeClick = async (id) => {
|
|
|
org_form.leader = data.leader;
|
|
org_form.leader = data.leader;
|
|
|
org_form.orderNum = data.orderNum;
|
|
org_form.orderNum = data.orderNum;
|
|
|
org_form.address = data.address;
|
|
org_form.address = data.address;
|
|
|
-
|
|
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
const onAddBtnClick = (nodeData) => {
|
|
const onAddBtnClick = (nodeData) => {
|
|
|
org_form.deptId = '';
|
|
org_form.deptId = '';
|
|
|
org_form.parentName = nodeData.deptName;
|
|
org_form.parentName = nodeData.deptName;
|
|
|
- org_form.parentId = nodeData.deptId
|
|
|
|
|
|
|
+ org_form.parentId = nodeData.deptId;
|
|
|
org_form.status = 0;
|
|
org_form.status = 0;
|
|
|
org_form.deptName = '';
|
|
org_form.deptName = '';
|
|
|
org_form.leader = '';
|
|
org_form.leader = '';
|
|
@@ -79,24 +85,24 @@ const onAddBtnClick = (nodeData) => {
|
|
|
|
|
|
|
|
org_visible.value = true;
|
|
org_visible.value = true;
|
|
|
is_edit_mode.value = false;
|
|
is_edit_mode.value = false;
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const onDeleteBtnClick = async ({ deptId }) => {
|
|
const onDeleteBtnClick = async ({ deptId }) => {
|
|
|
const { code } = await DeleteDept(deptId);
|
|
const { code } = await DeleteDept(deptId);
|
|
|
if (code === 200) {
|
|
if (code === 200) {
|
|
|
Message.success({
|
|
Message.success({
|
|
|
title: '删除',
|
|
title: '删除',
|
|
|
- content: '删除成功',
|
|
|
|
|
|
|
+ content: '删除成功'
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
getDeptTree();
|
|
getDeptTree();
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const orgFromSave = async () => {
|
|
const orgFromSave = async () => {
|
|
|
const data = {
|
|
const data = {
|
|
|
...org_form,
|
|
...org_form,
|
|
|
- deptId: (is_edit_mode.value && org_form.deptId) ? org_form.deptId[0] : null
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ deptId: is_edit_mode.value && org_form.deptId ? org_form.deptId[0] : null
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
const apiCall = is_edit_mode.value ? UpdateDept : CreateDept;
|
|
const apiCall = is_edit_mode.value ? UpdateDept : CreateDept;
|
|
|
const { code } = await apiCall(data);
|
|
const { code } = await apiCall(data);
|
|
@@ -105,13 +111,13 @@ const orgFromSave = async () => {
|
|
|
const action = is_edit_mode.value ? '编辑' : '新增';
|
|
const action = is_edit_mode.value ? '编辑' : '新增';
|
|
|
Message.success({
|
|
Message.success({
|
|
|
title: `${action}账号`,
|
|
title: `${action}账号`,
|
|
|
- content: `${action}成功`,
|
|
|
|
|
|
|
+ content: `${action}成功`
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- getDeptTree()
|
|
|
|
|
- org_visible = false;
|
|
|
|
|
|
|
+ getDeptTree();
|
|
|
|
|
+ org_visible.value = false;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const orgFromReset = () => {
|
|
const orgFromReset = () => {
|
|
|
org_form.deptId = null;
|
|
org_form.deptId = null;
|
|
@@ -121,19 +127,19 @@ const orgFromReset = () => {
|
|
|
org_form.leader = '';
|
|
org_form.leader = '';
|
|
|
org_form.orderNum = '';
|
|
org_form.orderNum = '';
|
|
|
org_form.address = '';
|
|
org_form.address = '';
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const orgFromCancel = () => {
|
|
const orgFromCancel = () => {
|
|
|
is_edit_mode.value = true;
|
|
is_edit_mode.value = true;
|
|
|
org_visible.value = false;
|
|
org_visible.value = false;
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const onNodeDrop = async ({ dropNode, dragNode, dropPosition }) => {
|
|
const onNodeDrop = async ({ dropNode, dragNode, dropPosition }) => {
|
|
|
const data = org_tree_data.value;
|
|
const data = org_tree_data.value;
|
|
|
UpdateDeptParent({
|
|
UpdateDeptParent({
|
|
|
orderNum: '0',
|
|
orderNum: '0',
|
|
|
parentId: dropNode.deptId,
|
|
parentId: dropNode.deptId,
|
|
|
- deptId: dragNode.deptId,
|
|
|
|
|
|
|
+ deptId: dragNode.deptId
|
|
|
});
|
|
});
|
|
|
const loop = (data, key, callback) => {
|
|
const loop = (data, key, callback) => {
|
|
|
data.some((item, index, arr) => {
|
|
data.some((item, index, arr) => {
|
|
@@ -162,10 +168,10 @@ const onNodeDrop = async ({ dropNode, dragNode, dropPosition }) => {
|
|
|
arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
|
|
arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
getDeptTree();
|
|
getDeptTree();
|
|
|
-})
|
|
|
|
|
|
|
+});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="css" scoped>
|
|
<style lang="css" scoped>
|