<template>
|
<a-card
|
:loading="cardLoading"
|
:bordered="false"
|
title="集团架构"
|
style="height: 100%;"
|
>
|
<a-spin :spinning="loading">
|
<a-alert
|
type="info"
|
:showIcon="true"
|
style="margin-right: 54px;"
|
>
|
<div slot="message">
|
当前：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
|
<a
|
v-if="this.currSelected.title"
|
style="margin-left: 10px"
|
@click="onClearSelected"
|
>取消</a>
|
</div>
|
</a-alert>
|
<div class="drawer-bootom-button">
|
<a-dropdown
|
:trigger="['click']"
|
placement="bottomCenter"
|
>
|
<a-menu slot="overlay">
|
<a-menu-item
|
key="1"
|
@click="expandAll"
|
>展开所有</a-menu-item>
|
<a-menu-item
|
key="2"
|
@click="closeAll"
|
>合并所有</a-menu-item>
|
<a-menu-item
|
key="3"
|
@click="refreshTree"
|
>刷新</a-menu-item>
|
<a-menu-item
|
type="primary"
|
key="4"
|
@click="showDragRegulation"
|
:style="getEnterpriseOptionStyle('2')"
|
>结点拖拽规则</a-menu-item>
|
</a-menu>
|
<a-button>
|
<a-icon type="bars" />
|
</a-button>
|
</a-dropdown>
|
</div>
|
<a-tree
|
selectable
|
showLine
|
:showIcon="true"
|
:checkStrictly="checkStrictly"
|
:expandedKeys.sync="expandedKeys"
|
:selectedKeys="selectedKeys"
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData="treeDataSource"
|
:autoExpandParent="autoExpandParent"
|
@select="onSelect"
|
@expand="onExpand"
|
rowKey="id"
|
:draggable="draggable"
|
@drop="onDrop"
|
style="padding:20px"
|
>
|
<svg
|
t="1675645955769"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="1603"
|
slot="total"
|
>
|
<path
|
d="M916.57 891.61H107.43a21.26 21.26 0 1 1 0-42.52h809.14a21.26 21.26 0 1 1 0 42.52z"
|
fill="#666666"
|
p-id="1604">
|
</path>
|
<path
|
d="M202.34 886.57a21.26 21.26 0 0 1-21.26-21.26V280.93a71.35 71.35 0 0 1 51.15-68.43l261.33-77.15a71.35 71.35 0 0 1 91.56 68.43V859a21.26 21.26 0 1 1-42.52 0V203.77a28.83 28.83 0 0 0-37-27.65l-261.33 77.15a29 29 0 0 0-20.67 27.65v584.39a21.26 21.26 0 0 1-21.26 21.26z" fill="#666666" p-id="1605"></path><path d="M831.08 891.61a21.26 21.26 0 0 1-21.26-21.26V491.47a28.7 28.7 0 0 0-18.11-26.77L556 370.26a21.26 21.26 0 1 1 15.81-39.47l235.76 94.44a71 71 0 0 1 44.82 66.24v378.88a21.26 21.26 0 0 1-21.31 21.26zM474.09 453.27H270a21.26 21.26 0 1 1 0-42.52h204.09a21.26 21.26 0 1 1 0 42.52zM474.09 551H270a21.26 21.26 0 1 1 0-42.52h204.09a21.26 21.26 0 1 1 0 42.52zM474.09 659.9H270a21.26 21.26 0 1 1 0-42.52h204.09a21.26 21.26 0 1 1 0 42.52z" fill="#666666" p-id="1606"></path><path d="M755.86 597.29H617.31a21.26 21.26 0 1 1 0-42.52h138.55a21.26 21.26 0 1 1 0 42.52zM755.86 697.47H617.31a21.26 21.26 0 1 1 0-42.52h138.55a21.26 21.26 0 1 1 0 42.52z"
|
fill="#666666"
|
p-id="1607">
|
</path>
|
</svg>
|
</a-tree>
|
</a-spin>
|
<a-drawer
|
title="结点拖拽规则"
|
placement="right"
|
:closable="true"
|
:visible="dragRugulationVisable"
|
:after-visible-change="afterVisibleChange"
|
@close="closeDragRegulation"
|
:width="500"
|
>
|
<a-descriptions title="限制" :column="1">
|
<a-descriptions-item>
|
1. 只可在编辑状态下才能拖拽树结点，改变树结构。
|
</a-descriptions-item>
|
<a-descriptions-item>
|
2. 不可改变根结点(集团架构)的位置。
|
</a-descriptions-item>
|
<a-descriptions-item>
|
3. 具有继承关系的结点（如父子结点，子孙结点）调换位置只可以互换其数据。
|
</a-descriptions-item>
|
</a-descriptions>
|
<a-descriptions title="两个结点" :column="1">
|
<a-descriptions-item>
|
1.被拖拽结点
|
</a-descriptions-item>
|
<a-descriptions-item >
|
2.目标结点
|
</a-descriptions-item>
|
</a-descriptions>
|
<a-descriptions title="三个目标位置" :column="1">
|
<a-descriptions-item>
|
1.目标结点上方蓝线：表示将被拖拽节点调整为目标结点的兄弟节点，并使其排列到目标结点的上方。
|
</a-descriptions-item>
|
<a-descriptions-item>
|
2.目标结点下方蓝线：表示将被拖拽节点调整为目标结点的兄弟节点，并使其排列到目标结点的下方。
|
</a-descriptions-item>
|
<a-descriptions-item>
|
2.目标结点：表示将被拖拽节点调整为目标结点的最新子节点。
|
</a-descriptions-item>
|
</a-descriptions>
|
</a-drawer>
|
</a-card>
|
</template>
|
<script>
|
import { getAction } from '@/api/manage'
|
import Tooltip from 'ant-design-vue/es/tooltip'
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
import { deleteAction, postAction } from '../../../../api/manage'
|
import { lastIndexOf } from 'lodash'
|
export default {
|
name: 'EnterpriseTree',
|
components: {
|
Tooltip,
|
JEllipsis,
|
},
|
props: {
|
version:{
|
type:Number,
|
required:false
|
},
|
versionStatus:{
|
type:String,
|
default:'',
|
required:false
|
}
|
},
|
data() {
|
return {
|
parentId:'',
|
cardLoading: false,
|
loading: false,
|
draggable: true,
|
treeDataSource: [],
|
selectedKeys: [],
|
currSelected: {},
|
expandedKeys: [],
|
url: {
|
loadTree: '/base/enterprise/enterpriseTree',
|
dropAndChangeNode: '/base/enterprise/dropAndChangeNode',
|
checkPositionInfo: '/base/enterprise/checkPositionInfo'
|
},
|
searchValue: '',
|
dataList: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
allTreeKeys: [],
|
hiding: false,
|
addUsable: true,
|
dragRugulationVisable:false
|
}
|
},
|
methods: {
|
afterVisibleChange(val) {
|
console.log('visible', val);
|
},
|
showDragRegulation(){
|
this.dragRugulationVisable=true;
|
},
|
closeDragRegulation(){
|
this.dragRugulationVisable=false;
|
},
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
},
|
onClearSelected() {
|
this.hiding = true;
|
this.currSelected = {};
|
this.selectedKeys = [];
|
},
|
onSelect(selectedKeys, e) {
|
let record = e.node.dataRef;
|
this.currSelected = Object.assign({}, record);
|
this.selectedKeys = selectedKeys
|
this.parentId = selectedKeys[0];
|
if(e.node.dataRef.key=='0'&&e.node.dataRef.children.length>='1'){
|
this.addUsable = false;
|
}
|
else{
|
this.addUsable = true;
|
}
|
},
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
queryTreeData(version) {
|
this.loading = true
|
this.cardLoading = true
|
getAction(this.url.loadTree,{version:version}).then((res) => {
|
if (res.success) {
|
this.dataList = [];
|
this.allTreeKeys = [];
|
this.generateList(res.result);
|
this.expandAll();
|
this.selectedKeys=[res.result[0].key];
|
this.currSelected = res.result[0];
|
this.parentId = res.result[0].key
|
} else {
|
this.$message.warn(res.message)
|
}
|
}).finally(res=>{
|
this.loading = false;
|
this.cardLoading = false;
|
});
|
},
|
getParentKey(key, tree) {
|
let parentKey
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i]
|
if (node.children) {
|
if (node.children.some(item => item.key === key)) {
|
parentKey = node.key
|
} else if (
|
this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
},
|
|
generateList(data) {
|
const list = data;
|
for (let i = 0; i < list.length; i++) {
|
const key = list[i].key
|
list[i].type = 'total';
|
list[i].scopedSlots = {
|
switcherIcon:"total"
|
};
|
this.allTreeKeys.push(key);
|
if (list[i].children) {
|
this.generateList(list[i].children)
|
}
|
}
|
this.treeDataSource=list
|
},
|
expandAll() {
|
this.expandedKeys = this.allTreeKeys
|
},
|
closeAll() {
|
this.expandedKeys = ['-1']
|
},
|
refreshTree() {
|
this.queryTreeData(this.version)
|
},
|
reloadUi(){
|
this.loading = true
|
this.cardLoading = true
|
getAction(this.url.loadTree,{version:this.version}).then((res) => {
|
if (res.success) {
|
this.dataList = [];
|
this.allTreeKeys = [];
|
this.treeDataSource = res.result
|
this.generateList(res.result);
|
this.expandAll();
|
} else {
|
this.$message.warn(res.message)
|
}
|
}).finally(res=>{
|
this.loading = false;
|
this.cardLoading = false;
|
});
|
},
|
getEnterpriseOptionStyle(data){
|
if(data=='0'||data=='1'){
|
return {
|
color:"darkOrange !important",
|
}
|
}else if(data=='2'){
|
return {
|
color:"green !important",
|
}
|
}else if(data=='3'){
|
return {
|
color:"red !important",
|
}
|
}else{
|
return {
|
color:"skyblue !important",
|
}
|
}
|
},
|
//拖拽结点
|
onDrop(info){
|
console.log(info);
|
const {dragNode,dropPosition,dropToGap,node} = info
|
console.log (dragNode.dataRef.key+"===="+node.dataRef.key+"===="+dropPosition)
|
let dropedKey = dragNode.dataRef.key;
|
let changeKey = node.dataRef.key;
|
let dropedTitle = dragNode.dataRef.title;
|
let changeTitle = node.dataRef.title;
|
let dropedParentId = dragNode.dataRef.parentId;
|
let changeParentId = node.dataRef.parentId;
|
var newPosPre = node.pos.substr(0,node.pos.lastIndexOf("-"));
|
var newPos =node.pos.split('-');
|
var realPose = Number(newPos[newPos.length-1]);
|
let posStatus = dropPosition-realPose;
|
var oldPosePre = dragNode.pos.substr(0,dragNode.pos.lastIndexOf("-"));
|
var oldPos = dragNode.pos.split('-');
|
var orgPos = Number(oldPos[oldPos.length-1]);
|
console.log(realPose+"=="+orgPos)
|
var params={
|
dropedKey:dropedKey,
|
changeKey:changeKey,
|
dropedParentId:dropedParentId,
|
changeParentId:changeParentId,
|
dropedTitle:dropedTitle,
|
changeTitle:changeTitle,
|
dropPosition:dropPosition,
|
status:''
|
}
|
if(this.versionStatus!='1'&&this.versionStatus!='0'){
|
this.$message.error("只能在编辑或新增状态下才可以调节树的结构哦！");
|
}else if(dropedKey=='0'||changeKey=='0'){
|
this.$message.error("不可变动根节点哦！");
|
}else if(changeParentId=='0'&&(posStatus==1||posStatus==-1)){
|
this.$message.error("该层级公司数量到达上限,不可插入");
|
}else if(!dropToGap){
|
postAction(this.url.checkPositionInfo,params).then(res=>{
|
if(res.success){
|
var that = this;
|
this.$confirm({
|
title:"确认调整",
|
content:res.result?"("+dropedTitle+")和"+"("+changeTitle+")只能交换其数据,确认交换吗?":"确认将("+dropedTitle+")设置为("+changeTitle+")的最新子节点吗",
|
onOk: function () {
|
that.cardLoading=true;
|
if(res.result){
|
params.status='3';
|
}else{
|
params.status='4';
|
}
|
that.changePosition(params);
|
}
|
});
|
}
|
})
|
}
|
// else if((posStatus==1||posStatus==-1)&&dropedKey==changeParentId){
|
// this.$message.warning("不可以将父公司拖至子公司列");
|
// }
|
else if((posStatus==1&&oldPosePre==newPosPre&&realPose+1==orgPos)){
|
this.$message.warning("调整前后无区别,请重新调整");
|
}
|
else if(posStatus==1){
|
var that = this;
|
this.$confirm({
|
title: "确认调整",
|
content:"确认将("+dropedTitle+")调整到("+changeTitle+")后面吗",
|
onOk: function () {
|
that.cardLoading=true;
|
params.status='2';
|
that.changePosition(params);
|
}
|
});
|
|
}else if(posStatus==-1&&oldPosePre==newPosPre&&realPose==orgPos+1){
|
this.$message.warning("调整前后无区别,请重新调整");
|
}else if(posStatus==-1){
|
var that = this;
|
this.$confirm({
|
title: "确认调整",
|
content:"确认将("+dropedTitle+")调整到("+changeTitle+")前面面吗",
|
onOk: function () {
|
that.cardLoading=true;
|
params.status='5';
|
that.changePosition(params);
|
}
|
});
|
}
|
|
},
|
changePosition(params){
|
postAction(this.url.dropAndChangeNode,params).then(res=>{
|
if(res.success){
|
this.parentId='';
|
this.queryTreeData(this.version);
|
this.$message.success("树结构调整成功，已经刷新树结构");
|
}
|
else{
|
this.$message.error("树结构调整出现异常");
|
}
|
}).finally(res=>{
|
this.cardLoading=false;
|
});
|
},
|
},
|
created() {
|
},
|
//监听
|
watch: {
|
parentId:{
|
handler(val) {
|
this.$emit('getParentEnterprise',val);
|
}
|
},
|
version:{
|
handler(val) {
|
this.onClearSelected();
|
this.queryTreeData(val);
|
}
|
},
|
currSelected:{
|
immediate:true,
|
deep:true,
|
handler(val) {
|
console.log(val)
|
if(val.key=='0'&&val.children.length>=0){
|
this.$emit("getAddStatus",false);
|
}else{
|
this.$emit("getAddStatus",true);
|
}
|
}
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.replaceSearch {
|
color: #00090f;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
/* .ant-select-disabled {
|
color: rgba(241, 16, 16, 0.25);
|
}
|
.ant-select-disabled .ant-select-selection {
|
background: #a76b6b;
|
} */
|
/*隐藏树的默认icon*/
|
/* .ant-tree-switcher-noop {
|
display: none !important;
|
} */
|
/*隐藏树的默认竖线*/
|
/* .ant-tree.ant-tree-show-line li:not(:last-child):before {
|
border-left: 2px;
|
} */
|
|
.ant-card-body .table-operator {
|
margin: 15px;
|
}
|
|
.anty-form-btn {
|
width: 100%;
|
text-align: center;
|
}
|
|
.anty-form-btn button {
|
margin: 0 5px;
|
}
|
|
.anty-node-layout .ant-layout-header {
|
padding-right: 0;
|
}
|
|
.header {
|
padding: 0 8px;
|
}
|
|
.header button {
|
margin: 0 3px;
|
}
|
|
.ant-modal-cust-warp {
|
height: 100%;
|
}
|
|
.ant-modal-cust-warp .ant-modal-body {
|
height: calc(100% - 110px) !important;
|
overflow-y: auto;
|
}
|
|
.ant-modal-cust-warp .ant-modal-content {
|
height: 90% !important;
|
overflow-y: hidden;
|
}
|
|
#app .desktop {
|
height: auto !important;
|
}
|
|
/** Button按钮间距 */
|
.ant-btn {
|
margin-left: 3px;
|
}
|
.ant-alert {
|
padding: 5px 15px 5px 37px;
|
}
|
.drawer-bootom-button {
|
position: absolute;
|
top: 1px;
|
/* padding: 10px 16px; */
|
text-align: left;
|
right: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
