<el-card class="tree-card">
<div class="sketch_content selectFile">
<span class="span_title">组织列表 span>
<div style="display: flex; justify-content: flex-end; width: 55vw">
style="display: flex; align-items: center; margin-right: 1.5vw"
<el-radio-group v-model="filterType" @change="radioChange">
<el-radio :label="'all'">显示全部el-radio>
<el-radio :label="'on'">只显示开启el-radio>
<el-radio :label="'off'">只显示关闭el-radio>
<el-button type="primary" size="small" @click="oneClickEnables"
>一键启用
style="margin-top: 20px; width: 55vw"
:data="organizationTreeData"
:expand-on-click-node="false"
organizationTreeData.length !== 0 && organizationTreeData !== ''
@node-click="getOrganizationList"
@drag-start="handleDragStart"
@drag-end="handleDragEnd"
@node-drop="handleNodeDrop"
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}span>
@click="showOrganizationDialog"
@click="() => showEditOrganizationDialog(data)"
style="margin-right: 2vw"
v-model="node.data.organizeStatus"
@change="statusChange(node)"
organizationTreeData.length == 0 || organizationTreeData == ''
<el-empty description="暂无组织" />
>添加组织
:visible.sync="addOrganizationDialogVisible"
:close-on-click-modal="false"
@close="closeOrganizationTreeDialog"
<div class="addOrganizationDialog">
<el-divider class="dialog_divider">el-divider>
:model="organizationForm"
ref="addFileBackupTaskForm"
<el-form-item label="组织代码：" style="margin-left: -19px">
v-model="organizationForm.id"
style="width: 200px; margin-left: -170px"
<el-form-item label="上级组织：" style="margin-left: -19px">
v-model="organizationForm.lead"
style="width: 200px; margin-left: -170px"
style="margin-left: -19px"
v-model="organizationForm.organizationName"
style="width: 200px; margin-left: -170px"
style="margin-left: -19px"
style="width: 200px; margin-left: -170px"
<div class="dialogClose">
<el-button @click="closeOrganizationTreeDialog">取消el-button>
<el-button type="primary" @click="addOrganization">确定el-button>
:close-on-click-modal="false"
@close="closeOrganizationTreeDialog"
<div class="addOrganizationDialog">
<el-divider class="dialog_divider">el-divider>
:model="organizationForm"
ref="addFileBackupTaskForm"
style="margin-left: -19px"
v-model="organizationForm.organizationName"
style="width: 200px; margin-left: -170px"
style="margin-left: -19px"
style="width: 200px; margin-left: -170px"
<div class="dialogClose">
<el-button @click="closeOrganizationTreeDialog">取消el-button>
<el-button type="primary" @click="addOrganization1">确定el-button>
:visible.sync="editOrganizationDialogVisible"
:close-on-click-modal="false"
@close="closeEditOrganizationDialog"
<div class="addOrganizationDialog">
<el-divider class="dialog_divider">el-divider>
:model="organizationForm"
ref="addFileBackupTaskForm"
<el-form-item label="组织名称" prop="fileIp" style="margin-left: -19px">
v-model="organizationForm.organizationName"
style="width: 200px; margin-left: -170px"
style="margin-left: -19px"
style="width: 200px; margin-left: -170px"
:placeholder="placeholder"
<div class="dialogClose">
<el-button @click="closeEditOrganizationDialog">取消el-button>
<el-button type="primary" @click="editOrganization">确定el-button>
name: 'OrganizeMaintain',
{ value: 0, label: '集团' },
{ value: 1, label: '子集团' },
{ value: 2, label: '公司' },
{ value: 3, label: '部门' },
{ value: 4, label: '生态单位' },
{ value: 0, label: '集团' },
{ value: 1, label: '子集团' },
{ value: 2, label: '公司' },
{ value: 3, label: '部门' },
{ value: 4, label: '生态单位' },
organizationTreeData: [],
addOrganizationDialogVisible: false,
addTopOrganizationDialogVisible: false,
organizationDialogData: '',
editOrganizationDialogVisible: false,
this.getOrganizationList()
getOrganizeList({ viewType: 2 })
async radioChange(value) {
const res = await getOrganizeList({ viewType: 0 })
this.organizationTreeData = [res.data.data[0]]
} else if (value == 'off') {
const res = await getOrganizeList({ viewType: 1 })
this.organizationTreeData = []
this.organizationTreeData = [].concat(...res.data.data)
console.log(this.organizationTreeData)
const res = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res.data.data[0]]
getOrganizationList(data, node) {
showOrganizationDialog() {
this.organizationForm.id = this.node.data.id
this.organizationForm.lead = this.node.data.label
this.addOrganizationDialogVisible = true
closeOrganizationTreeDialog() {
this.addOrganizationDialogVisible = false
this.organizationForm.organizationName = ''
this.organizationForm.id = ''
this.organizationForm.lead = ''
showEditOrganizationDialog() {
this.editOrganizationDialogVisible = true
this.organizationForm.organizationName = this.data.label
if (this.data.organizeType == 0) {
} else if (this.data.organizeType == 1) {
} else if (this.data.organizeType == 2) {
} else if (this.data.organizeType == 3) {
} else if (this.data.organizeType == 4) {
this.placeholder = '生态单位'
closeEditOrganizationDialog() {
this.editOrganizationDialogVisible = false
this.organizationForm.organizationName = ''
async addOrganization() {
const organizeName = this.organizationForm.organizationName
const parentOrganize = this.organizationForm.id
let organizeType = this.addOrganizeType
if (organizeType == '集团') {
} else if (organizeType == '子集团') {
} else if (organizeType == '公司') {
} else if (organizeType == '部门') {
} else if (organizeType == '生态单位') {
if (res.data.status == 200) {
message: res.data.message,
message: res.data.message,
label: this.organizationForm.organizationName,
this.data.children.push(newChild)
getOrganizeList({ viewType: 2 }).then(
(res) => (this.organizationTreeData = [res.data.data[0]])
this.organizationForm.organizationName = ''
this.organizationForm.id = ''
this.organizationForm.lead = ''
this.addOrganizationDialogVisible = false
async addOrganization1() {
const organizeName = this.organizationForm.organizationName
const parentOrganize = this.organizationForm.id
let organizeType = this.addOrganizeType
if (organizeType == '集团') {
} else if (organizeType == '子集团') {
} else if (organizeType == '公司') {
} else if (organizeType == '部门') {
} else if (organizeType == '生态单位') {
const res = await addOrganize({
label: this.organizationForm.organizationName,
const res1 = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res1.data.data[0]]
async editOrganization() {
this.editOrganizationDialogVisible = false
const organizeName = this.organizationForm.organizationName
const organizeType = this.organizeType
this.data.label = this.organizationForm.organizationName
editOrganize({ id, organizeName, organizeType }).then((res) => {
if (res.data.status === 200) {
message: res.data.message,
message: res.data.message,
const res1 = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res1.data.data[0]]
async statusChange(node) {
const organizeId = this.node.data.id
const organizeName = this.node.data.organizeName
console.log(node.data.organizeStatus)
if (this.node.data.organizeStatus == 0) {
restartOrganize({ organizeId, organizeName }).then((res) => {
if (res.data.status == 200) {
message: res.data.message,
message: res.data.message,
getOrganizeList({ viewType: 2 }).then((res) => {
console.log(res.data.data[0])
this.organizationTreeData = [res.data.data[0]]
forbiddenOrganize({ organizeId, organizeName }).then((res) => {
if (res.data.status == 200) {
message: res.data.message,
message: res.data.message,
getOrganizeList({ viewType: 2 }).then((res) => {
this.organizationTreeData = [res.data.data[0]]
return node.data.organizeStatus
oneClickEnable().then((res) => {
if (res.data.status == 200) {
message: res.data.message,
getOrganizeList({ viewType: 2 }).then((res) => {
console.log(res.data.data[0])
this.organizationTreeData = [res.data.data[0]]
message: res.data.message,
const selectedLabel = this.options.find(
(item) => item.value === this.value
this.organizeType = selectedLabel
const selectedLabel = this.options1.find(
(item) => item.value === this.value1
this.addOrganizeType = selectedLabel
handleDragStart(draggingNode) {
if (draggingNode.level === 1 && this.hasTopLevelNode()) {
return this.organizationTreeData.some((node) => node.level === 1)
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.level === 1) {
if (draggingNode.level > 1 && dropNode.level === 1) {
allowDrag(draggingNode, dropNode, type) {
handleNodeDrop(draggingNode, dropNode, type) {
const parentNode = dropNode.parent
const currentOrganize = draggingNode.data.id
const targetOrganize = dropNode.data.id
changeOrganize({ currentOrganize, targetOrganize })
const parentNode = newNode.parent
filteredOrganizationTreeData() {
return this.organizationTreeData.filter((node) => {
return node.data.organizeStatus === 0
const res = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res.data.data[0]]
console.log([res.data.data[0]])
<style scoped lang="scss">
justify-content: space-between;
::-webkit-scrollbar-thumb {
background-color: #40b8ff;
::v-deep .el-collapse-item__header {
justify-content: space-between;
::v-deep .el-table__header {
::v-deep .el-table__body {
-
相关阅读:
美容院拓客活动方案多套
《JAVA设计模式系列》访问者模式
基于CEEMDAN-MSE-RF的轴承故障诊断python
计算机网络基础知识1
springboot 整合使用redis发布订阅功能
[云原生] K8s之pod控制器详解
CSS进阶
正则表达式
【分享】Windows系统自动更新怎么永久停止？嘘！一般人我不告诉他，快进来看！
＜stl系列＞，vector深度剖析，掌握stl容器从这篇文章开始
-
原文地址：https://blog.csdn.net/Zwq8023520/article/details/134502974
