<template>
|
<div class="container">
|
<authheader :items="menuTips"></authheader>
|
|
<a-row :gutter="20">
|
<a-col :span="8">
|
<a-card :title="$t('menu.organization.title')" :bordered="false" :style="{ width: '100%',height: '900px', 'overflow-y': 'auto' }">
|
<a-tree
|
class="tree-demo"
|
draggable
|
blockNode
|
:data="treeData"
|
:show-line="showLine"
|
:fieldNames="{
|
key:'deptId',
|
title:'deptName',
|
children:'children',
|
}"
|
@drop="onDrop"
|
@select="showDetail"
|
>
|
<template #extra="nodeData">
|
<IconPlus
|
style="position: absolute; right: 60px; font-size: 12px; top: 10px; color: #3370ff;"
|
@click="() => onIconClick(nodeData)"
|
/>
|
<IconDelete style="position: absolute; right: 40px; font-size: 12px; top: 10px; color: #3370ff;"
|
@click="() => onIconClickDelete(nodeData)" />
|
</template>
|
</a-tree>
|
|
</a-card>
|
</a-col>
|
<a-col :span="16">
|
<a-card :title="$t('menu.organization.detail')" :bordered="false" :style="{ width: '100%' }">
|
<a-form :model="deptform" layout="horizontal">
|
<a-form-item field="parentName" label="上级机构">
|
<a-input v-model="deptform.parentId" />
|
</a-form-item>
|
<a-form-item field="status" label="机构状态">
|
<a-switch checked-value="0" unchecked-value="1" v-model="deptform.status"></a-switch>
|
</a-form-item>
|
<a-form-item field="deptName" label="机构名称">
|
<a-input v-model="deptform.deptName" />
|
</a-form-item>
|
<a-form-item field="leader" label="联系人">
|
<a-input v-model="deptform.leader" />
|
</a-form-item>
|
<a-form-item field="phone" label="联系电话">
|
<a-input v-model="deptform.phone" />
|
</a-form-item>
|
<a-form-item field="address" label="机构地址" style="align: start">
|
<a-input v-model="deptform.address" />
|
</a-form-item>
|
<a-form-item>
|
<a-space>
|
<a-button @click="editdept">保存</a-button>
|
<a-button @click="reset(deptform.deptId)">重置</a-button>
|
</a-space>
|
</a-form-item>
|
</a-form>
|
</a-card>
|
</a-col>
|
</a-row>
|
<a-modal width="50%" v-model:visible="visible" title="新增" @cancel="handleCancel" @ok="addDept">
|
<a-form :model="deptform" layout="horizontal">
|
<a-form-item field="parentName" label="上级机构">
|
<a-input v-model="deptform.parentName" />
|
</a-form-item>
|
<a-form-item field="status" label="机构状态">
|
<a-switch checked-value="0" unchecked-value="1" v-model="deptform.status"></a-switch>
|
</a-form-item>
|
<a-form-item field="deptName" label="机构名称">
|
<a-input v-model="deptform.deptName" />
|
</a-form-item>
|
<a-form-item field="leader" label="联系人">
|
<a-input v-model="deptform.leader" />
|
</a-form-item>
|
<a-form-item field="phone" label="联系电话">
|
<a-input v-model="deptform.phone" />
|
</a-form-item>
|
<a-form-item field="address" label="机构地址" style="align: start">
|
<a-input v-model="deptform.address" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from "vue";
|
import { IconPlus } from "@arco-design/web-vue/es/icon";
|
import {
|
Organization,
|
OrganizationAdd,
|
OrganizationById,
|
OrganizationDelete,
|
OrganizationList,
|
OrganizationUpdate
|
} from "@/api/authority";
|
import Authheader from "@/views/authority/components/authheader.vue";
|
import { Modal } from "@arco-design/web-vue";
|
|
let visible = ref(false);
|
let treeData = ref([]);
|
let showLine = ref(true);
|
let menuTips = ref(["权限管理", "机构"]);
|
let deptform = ref<Organization>({
|
deptName: "",
|
email: "",
|
leader: "",
|
orderNum: "0",
|
parentId: "",
|
parentName: "",
|
phone: "",
|
status: "",
|
address: "",
|
deptId: ""
|
});
|
|
const onIconClick = (nodeData) => {
|
deptform.value.parentName = nodeData.deptName;
|
deptform.value.parentId = nodeData.deptId;
|
visible.value = true;
|
};
|
|
const addDept = async () => {
|
await OrganizationAdd({
|
...deptform.value
|
} as unknown as Organization).then((res) => {
|
OrganizationData("");
|
});
|
};
|
|
const onIconClickDelete = (nodeData) => {
|
OrganizationDelete(nodeData.deptId).then(() => {
|
OrganizationData("");
|
});
|
};
|
|
const showDetail = (id) => {
|
OrganizationById(id).then((res) => {
|
deptform.value = {...res.data};
|
});
|
};
|
const editdept=()=>{
|
OrganizationUpdate({
|
...deptform.value
|
} as unknown as Organization).then((res) => {
|
OrganizationData("");
|
Modal.success({
|
title: "保存成功",
|
content: "保存成功"
|
});
|
});
|
}
|
const reset=(id)=>{
|
OrganizationById(id).then((res) => {
|
deptform.value = {...res.data};
|
});
|
}
|
|
const onDrop = ({ dragNode, dropNode, dropPosition }) => {
|
const data = treeData.value;
|
OrganizationUpdate({
|
orderNum: "0", parentId: dropNode.deptId, deptId: dragNode.deptId
|
});
|
const loop = (data, key, callback) => {
|
data.some((item, index, arr) => {
|
if (item.deptId === key) {
|
callback(item, index, arr);
|
return true;
|
}
|
if (item.children) {
|
return loop(item.children, key, callback);
|
}
|
return false;
|
});
|
};
|
|
loop(data, dragNode.deptId, (_, index, arr) => {
|
arr.splice(index, 1);
|
});
|
|
if (dropPosition === 0) {
|
loop(data, dropNode.deptId, (item) => {
|
item.children = item.children || [];
|
item.children.push(dragNode);
|
});
|
} else {
|
loop(data, dropNode.deptId, (_, index, arr) => {
|
arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
|
});
|
}
|
};
|
|
const handleCancel = (type) => {
|
if (type == 1) {
|
visible.value = false;
|
}
|
};
|
|
const OrganizationData = async (key) => {
|
await OrganizationList(key).then((res) => {
|
treeData.value = [...res.rows];
|
});
|
};
|
|
OrganizationData("");
|
</script>
|
|
|
<style scoped>
|
.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),
|
.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover {
|
animation: blinkBg 0.4s 2;
|
}
|
|
@keyframes blinkBg {
|
0% {
|
background-color: transparent;
|
}
|
|
100% {
|
background-color: var(--color-primary-light-1);
|
}
|
}
|
</style>
|
