
- <div>
- <el-col :span="24">
- <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">
- <div
- 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-radio-group>
- div>
- <el-button type="primary" size="small" @click="oneClickEnables"
- >一键启用
- >
- div>
- <el-tree
- style="margin-top: 20px; width: 55vw"
- :data="organizationTreeData"
- node-key="id"
- default-expand-all
- :expand-on-click-node="false"
- v-if="
- organizationTreeData.length !== 0 && organizationTreeData !== ''
- "
- draggable
- @node-click="getOrganizationList"
- @drag-start="handleDragStart"
- @allow-drop="allowDrop"
- @drag-end="handleDragEnd"
- @node-drop="handleNodeDrop"
- @allow-drag="allowDrag"
- >
- <span class="custom-tree-node" slot-scope="{ node, data }">
- <span>{{ node.label }}span>
- <div
- v-if="data.type !== 1"
- style="
- display: flex;
- justify-content: center;
- align-items: center;
- "
- >
- <el-button
- type="text"
- icon="el-icon-plus"
- class="edit"
- @click="showOrganizationDialog"
- >
- el-button>
- <el-tooltip
- class="item"
- effect="dark"
- content="修改组织"
- placement="top"
- >
- <el-button
- type="text"
- @click="() => showEditOrganizationDialog(data)"
- icon="el-icon-edit"
- class="edit"
- style="margin-right: 2vw"
- >
- el-button>
- el-tooltip>
- <el-switch
- slot="reference"
- style="display: block"
- v-model="node.data.organizeStatus"
- active-color="#13ce66"
- inactive-color="#cccccc"
- :active-value="0"
- :inactive-value="1"
- active-text="启用"
- inactive-text="禁用"
- @change="statusChange(node)"
- >
- el-switch>
- div>
- span>
- el-tree>
- <div
- v-if="
- organizationTreeData.length == 0 || organizationTreeData == ''
- "
- >
- <el-empty description="暂无组织" />
- <el-button
- type="primary"
- size="small"
- @click="showDialog"
- v-if="add"
- >添加组织
- >
- div>
- div>
- el-card>
- el-col>
-
- <el-dialog
- width="580px"
- :visible.sync="addOrganizationDialogVisible"
- :close-on-click-modal="false"
- @close="closeOrganizationTreeDialog"
- >
- <div class="addOrganizationDialog">
- <span>新增组织span>
- div>
- <el-divider class="dialog_divider">el-divider>
- <el-form
- :model="organizationForm"
- ref="addFileBackupTaskForm"
- label-width="100px"
- style="height: auto"
- >
- <el-form-item label="组织代码:" style="margin-left: -19px">
- <el-input
- v-model="organizationForm.id"
- size="mini"
- style="width: 200px; margin-left: -170px"
- >el-input>
- el-form-item>
- <el-form-item label="上级组织:" style="margin-left: -19px">
- <el-input
- v-model="organizationForm.lead"
- size="mini"
- style="width: 200px; margin-left: -170px"
- >el-input>
- el-form-item>
- <el-form-item
- label="组织名称:"
- prop="fileIp"
- style="margin-left: -19px"
- >
- <el-input
- v-model="organizationForm.organizationName"
- placeholder="请输入组织名称"
- size="mini"
- style="width: 200px; margin-left: -170px"
- >el-input>
- el-form-item>
-
- <el-form-item
- label="组织类型:"
- prop="fileType"
- style="margin-left: -19px"
- >
- <el-select
- style="width: 200px; margin-left: -170px"
- v-model="value1"
- @change="select"
- >
- <el-option
- v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- el-option>
- el-select>
- el-form-item>
- el-form>
- <el-divider>el-divider>
- <div class="dialogClose">
- <el-button @click="closeOrganizationTreeDialog">取消el-button>
- <el-button type="primary" @click="addOrganization">确定el-button>
- div>
- el-dialog>
- <el-dialog
- width="580px"
- :visible.sync="visible"
- :close-on-click-modal="false"
- @close="closeOrganizationTreeDialog"
- >
- <div class="addOrganizationDialog">
- <span>新增组织span>
- div>
- <el-divider class="dialog_divider">el-divider>
- <el-form
- :model="organizationForm"
- ref="addFileBackupTaskForm"
- label-width="100px"
- style="height: auto"
- >
- <el-form-item
- label="组织名称:"
- prop="fileIp"
- style="margin-left: -19px"
- >
- <el-input
- v-model="organizationForm.organizationName"
- placeholder="请输入组织名称"
- size="mini"
- style="width: 200px; margin-left: -170px"
- >el-input>
- el-form-item>
-
- <el-form-item
- label="组织类型:"
- prop="fileType"
- style="margin-left: -19px"
- >
- <el-select
- style="width: 200px; margin-left: -170px"
- v-model="value1"
- @change="select"
- >
- <el-option
- v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- el-option>
- el-select>
- el-form-item>
- el-form>
- <el-divider>el-divider>
- <div class="dialogClose">
- <el-button @click="closeOrganizationTreeDialog">取消el-button>
- <el-button type="primary" @click="addOrganization1">确定el-button>
- div>
- el-dialog>
-
- <el-dialog
- width="580px"
- :visible.sync="editOrganizationDialogVisible"
- :close-on-click-modal="false"
- @close="closeEditOrganizationDialog"
- >
- <div class="addOrganizationDialog">
- <span>修改组织span>
- div>
- <el-divider class="dialog_divider">el-divider>
- <el-form
- :model="organizationForm"
- ref="addFileBackupTaskForm"
- label-width="100px"
- style="height: auto"
- >
- <el-form-item label="组织名称" prop="fileIp" style="margin-left: -19px">
- <el-input
- v-model="organizationForm.organizationName"
- placeholder="请输入组织名称"
- size="mini"
- style="width: 200px; margin-left: -170px"
- >el-input>
- el-form-item>
- <el-form-item
- label="组织类型"
- prop="fileType"
- style="margin-left: -19px"
- >
- <el-select
- v-model="value"
- style="width: 200px; margin-left: -170px"
- :placeholder="placeholder"
- @change="change"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- el-option>
- el-select>
- el-form-item>
- el-form>
- <el-divider>el-divider>
- <div class="dialogClose">
- <el-button @click="closeEditOrganizationDialog">取消el-button>
- <el-button type="primary" @click="editOrganization">确定el-button>
- div>
- el-dialog>
- div>
- template>
-
- <script>
- import {
- getOrganizeList,
- restartOrganize,
- forbiddenOrganize,
- editOrganize,
- addOrganize,
- changeOrganize,
- oneClickEnable,
- } from '@/api/index'
- let id = 1000
-
- export default {
- name: 'OrganizeMaintain',
- data() {
- return {
- value: '',
- see: true,
- placeholder: '请选择',
- add: true,
- options: [
- { value: 0, label: '集团' },
- { value: 1, label: '子集团' },
- { value: 2, label: '公司' },
- { value: 3, label: '部门' },
- { value: 4, label: '生态单位' },
- ],
- options1: [
- { value: 0, label: '集团' },
- { value: 1, label: '子集团' },
- { value: 2, label: '公司' },
- { value: 3, label: '部门' },
- { value: 4, label: '生态单位' },
- ],
- organizationTreeData: [],
- sectionList: [
- {
- id: 1,
- name: '部门1',
- },
- {
- id: 2,
- name: '部门2',
- },
- {
- id: 3,
- name: '部门3',
- },
- {
- id: 4,
- name: '生态单位',
- },
- ],
- userList: [
- {
- id: 1,
- username: 'zzn',
- },
- ],
- sectionUserList: [
- {
- id: 1,
- name: '用户1',
- },
- {
- id: 2,
- name: '用户2',
- },
- {
- id: 3,
- name: '用户3',
- },
- ],
- addOrganizationDialogVisible: false,
- organizationForm: {
- organizationName: '',
- id: '',
- lead: '',
- },
- addTopOrganizationDialogVisible: false,
- // 节点的data
- organizationDialogData: '',
- editOrganizationDialogVisible: false,
- listTitle: '',
- data: [],
- type: 'text',
- node: '',
- organizeType: '',
- value1: '',
- addOrganizeType: '',
- draggedNode: null,
- visible: false,
- filterType: 'all',
- }
- },
- mounted() {
- this.getOrganizationList()
-
- getOrganizeList({ viewType: 2 })
- },
- methods: {
- async radioChange(value) {
- if (value == 'on') {
- this.add = false
- const res = await getOrganizeList({ viewType: 0 })
- this.organizationTreeData = [res.data.data[0]]
- } else if (value == 'off') {
- this.add = false
- const res = await getOrganizeList({ viewType: 1 })
- this.organizationTreeData = []
- this.organizationTreeData = [].concat(...res.data.data)
- console.log(this.organizationTreeData)
- } else {
- const res = await getOrganizeList({ viewType: 2 })
- this.organizationTreeData = [res.data.data[0]]
- }
- },
- getOrganizationList(data, node) {
- this.data = data
- this.node = node
- // this.listTitle = data.label
- // }
- },
-
- showOrganizationDialog() {
- setTimeout(() => {
- this.organizationForm.id = this.node.data.id
- this.organizationForm.lead = this.node.data.label
- })
-
- // this.organizationForm.id = this.node.parent.data.id
- // this.organizationForm.lead = this.node.parent.data.label
-
- this.addOrganizationDialogVisible = true
- },
- closeOrganizationTreeDialog() {
- this.addOrganizationDialogVisible = false
- this.visible = false
- this.organizationForm.organizationName = ''
- this.organizationForm.id = ''
- this.organizationForm.lead = ''
- this.value = ''
- this.value1 = ''
- },
-
- showEditOrganizationDialog() {
- this.editOrganizationDialogVisible = true
- setTimeout(() => {
- this.organizationForm.organizationName = this.data.label
- if (this.data.organizeType == 0) {
- this.placeholder = '集团'
- } else if (this.data.organizeType == 1) {
- this.placeholder = '子集团'
- } else if (this.data.organizeType == 2) {
- this.placeholder = '公司'
- } else if (this.data.organizeType == 3) {
- this.placeholder = '部门'
- } else if (this.data.organizeType == 4) {
- this.placeholder = '生态单位'
- }
- }, 0)
- },
- showDialog() {
- this.visible = true
- },
- 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 == '集团') {
- organizeType = 0
- } else if (organizeType == '子集团') {
- organizeType = 1
- } else if (organizeType == '公司') {
- organizeType = 2
- } else if (organizeType == '部门') {
- organizeType = 3
- } else if (organizeType == '生态单位') {
- organizeType = 4
- }
- addOrganize({
- organizeName,
- parentOrganize,
- organizeType,
- }).then((res) => {
- if (res.data.status == 200) {
- this.$message({
- message: res.data.message,
- type: 'success',
- })
- } else {
- this.$message({
- message: res.data.message,
- type: 'error',
- })
- }
- const newChild = {
- id: id++,
- label: this.organizationForm.organizationName,
- children: [],
- }
-
- this.data.children.push(newChild)
- getOrganizeList({ viewType: 2 }).then(
- (res) => (this.organizationTreeData = [res.data.data[0]])
- )
-
- this.organizationForm.organizationName = ''
- this.value1 = ''
- this.value = ''
- this.organizationForm.id = ''
- this.organizationForm.lead = ''
- this.organizeType = ''
- this.addOrganizationDialogVisible = false
- })
- },
- async addOrganization1() {
- const organizeName = this.organizationForm.organizationName
- const parentOrganize = this.organizationForm.id
- let organizeType = this.addOrganizeType
- if (organizeType == '集团') {
- organizeType = 0
- } else if (organizeType == '子集团') {
- organizeType = 1
- } else if (organizeType == '公司') {
- organizeType = 2
- } else if (organizeType == '部门') {
- organizeType = 3
- } else if (organizeType == '生态单位') {
- organizeType = 4
- }
- const res = await addOrganize({
- organizeName,
- parentOrganize,
- organizeType,
- })
- const newChild = {
- id: id++,
- label: this.organizationForm.organizationName,
- children: [],
- }
- this.data = []
- this.data.push(newChild)
- const res1 = await getOrganizeList({ viewType: 2 })
- this.organizationTreeData = [res1.data.data[0]]
- this.visible = false
- // this.organizationForm.organizationName = ''
- // this.value = ''
- // this.organizationForm.id = ''
- // this.organizationForm.lead = ''
- },
- // 组织修改
- async editOrganization() {
- this.editOrganizationDialogVisible = false
- const id = this.data.id
- 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) {
- this.$message({
- message: res.data.message,
- type: 'success',
- })
- } else {
- this.$message({
- message: res.data.message,
- type: 'error',
- })
- }
- })
- const res1 = await getOrganizeList({ viewType: 2 })
- this.organizationTreeData = [res1.data.data[0]]
- },
- // 组织停用启用
- async statusChange(node) {
- setTimeout(() => {
- 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) {
- this.$message({
- message: res.data.message,
- type: 'success',
- })
- } else {
- this.$message({
- message: res.data.message,
- type: 'error',
- })
- }
- getOrganizeList({ viewType: 2 }).then((res) => {
- console.log(res.data.data[0])
- this.organizationTreeData = [res.data.data[0]]
- })
- })
- } else {
- forbiddenOrganize({ organizeId, organizeName }).then((res) => {
- if (res.data.status == 200) {
- this.$message({
- message: res.data.message,
- type: 'success',
- })
- } else {
- this.$message({
- message: res.data.message,
- type: 'error',
- })
- }
- getOrganizeList({ viewType: 2 }).then((res) => {
- this.organizationTreeData = [res.data.data[0]]
- })
- })
- }
- }, 0)
- },
- getSwitchValue(node) {
- // Convert numeric value to boolean
- return node.data.organizeStatus
- },
- oneClickEnables() {
- oneClickEnable().then((res) => {
- if (res.data.status == 200) {
- this.$message({
- message: res.data.message,
- type: 'success',
- })
- getOrganizeList({ viewType: 2 }).then((res) => {
- console.log(res.data.data[0])
- this.organizationTreeData = [res.data.data[0]]
- })
- } else {
- this.$message({
- message: res.data.message,
- type: 'error',
- })
- }
- })
- },
- // 获取修改组织类型
- change() {
- const selectedLabel = this.options.find(
- (item) => item.value === this.value
- )?.value
-
- this.organizeType = selectedLabel
- },
- // 获取新增组织类型
- select() {
- const selectedLabel = this.options1.find(
- (item) => item.value === this.value1
- )?.label
-
- this.addOrganizeType = selectedLabel
- },
- // 拖拽节点事件
- handleDragStart(draggingNode) {
- // 在拖拽开始时检查节点位置
- // 如果拖拽的节点是顶层节点并且已经有一个顶层节点存在,禁止拖拽
- if (draggingNode.level === 1 && this.hasTopLevelNode()) {
- this.draggable = false
- } else {
- this.draggable = true
- }
- },
-
- // 检查是否已经有一个顶层节点
- hasTopLevelNode() {
- return this.organizationTreeData.some((node) => node.level === 1)
- },
- handleDragEnd() {
- this.draggable = true
- },
-
- // 允许拖拽的条件
- allowDrop(draggingNode, dropNode, type) {
- // 如果拖拽的节点是顶层节点,不允许放置
-
- if (draggingNode.level === 1) {
- return false
- }
-
- // 如果拖拽的节点不是顶层节点但目标节点是顶层节点的同级,不允许放置
- if (draggingNode.level > 1 && dropNode.level === 1) {
- return false
- }
-
- // 其他情况允许放置
- return true
- },
- allowDrag(draggingNode, dropNode, type) {
- // 如果拖拽的节点是顶层节点,不允许放置
- // if (draggingNode.level === 1) {
- // return false
- // }
- // 如果拖拽的节点不是顶层节点但目标节点是顶层节点的同级,不允许放置
- // if (draggingNode.level > 1 && dropNode.level === 1) {
- // return false
- // }
- // 其他情况允许放置
- // return true
- },
- handleNodeDrop(draggingNode, dropNode, type) {
- // 在这里可以获取拖拽后节点的父节点
- const parentNode = dropNode.parent
-
- const currentOrganize = draggingNode.data.id
- const targetOrganize = dropNode.data.id
- changeOrganize({ currentOrganize, targetOrganize })
- },
- },
- watch: {
- // 监听拖拽后节点的变化
- draggedNode(newNode) {
- if (newNode) {
- // 这里可以访问拖拽后节点的父节点
- const parentNode = newNode.parent
- }
- },
- },
- computed: {
- filteredOrganizationTreeData() {
- // Filter out nodes with organizeStatus !== 0 (禁用)
- return this.organizationTreeData.filter((node) => {
- return node.data.organizeStatus === 0
- })
- },
- },
- async created() {
- const res = await getOrganizeList({ viewType: 2 })
- this.organizationTreeData = [res.data.data[0]]
- console.log([res.data.data[0]])
- },
- }
- script>
-
- <style scoped lang="scss">
- .edit {
- width: 5vw;
- }
- .custom-tree-node {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: space-between;
- /*font-size: 15px;*/
- padding-right: 8px;
- }
-
- .selectFile {
- line-height: 19px;
- }
-
- .tree-card {
- overflow-y: auto; /* 开启滚动显示溢出内容 */
- width: 90%;
- height: 80vh;
- margin-left: 4vw;
- overflow-x: auto;
- }
-
- /*滚动条样式*/
- ::-webkit-scrollbar {
- width: 6px;
- }
-
- ::-webkit-scrollbar-thumb {
- background-color: #40b8ff;
- border-radius: 3px;
- }
-
- .el-tree-node__label {
- font-size: 50px;
- }
-
- .list-card {
- overflow-y: auto; /* 开启滚动显示溢出内容 */
- width: 98%;
- height: 80vh;
- }
-
- /* 查询*/
- .select-organization {
- margin-top: -33px;
- display: flex;
- justify-content: right;
- line-height: 30px;
- }
-
- .findButton,
- .reset {
- margin-top: 58px;
- height: 40px;
- width: 8%;
- }
-
- .selectEvent {
- margin-right: 30px;
- margin-top: 58px;
- }
-
- .list-span {
- font-family: 微软雅黑;
- font-size: 20px;
- height: 100px;
- font-weight: bold;
- color: #525252;
- display: flex;
- line-height: 100px;
- }
-
- ::v-deep .el-collapse-item__header {
- font-size: 17px;
- font-weight: bold;
- }
-
- .addOrganizationDialog {
- font-size: 20px;
- text-align: left;
- margin-top: -105px;
- }
-
- .dialog_divider {
- margin-top: -50px;
- }
-
- .dialogClose {
- text-align: right;
- margin-top: -75px;
- margin-bottom: -80px;
- }
-
- .span_title {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- color: #222222;
- font-size: 17px;
- font-weight: bold;
- }
-
- /*解决table展开时高度异常问题*/
- ::v-deep .el-table__header {
- width: 100% !important;
- }
-
- ::v-deep .el-table__body {
- width: 100% !important;
- }
- style>
-
相关阅读:
美容院拓客活动方案多套
《JAVA设计模式系列》访问者模式
基于CEEMDAN-MSE-RF的轴承故障诊断python
计算机网络基础知识1
springboot 整合使用redis发布订阅功能
[云原生] K8s之pod控制器详解
CSS进阶
正则表达式
【分享】Windows系统自动更新怎么永久停止?嘘!一般人我不告诉他,快进来看!
<stl系列>,vector深度剖析,掌握stl容器从这篇文章开始
-
原文地址:https://blog.csdn.net/Zwq8023520/article/details/134502974