tree 樹形載入及增刪改_ZenDei技術網路在線

//非同步1<template> <div class="addequipment org"> <div class="top"> <div class="topfirst">菜單管理</div> <div class="addequi" @click='addNew'>添加</div> </div>... ...

//非同步1
<template>

    <div class="addequipment org">
        <div class="top">
            <div class="topfirst">菜單管理</div>
            <div class="addequi" @click='addNew'>添加</div>
        </div>
        
        <div class="center ">
            <!-- 菜單tree -->
            <div class="inputlist">
                <el-tree 
                    class="org-tree"
                    :data="menuList" 
                    :props="defaultProps" 
                    node-key="id" 
                    :expand-on-click-node="false" 
                    :load="loadChildNode" 
                    lazy
                >
                    <span class="custom-tree-button" slot-scope="{ node, data }">
                        <span @click='itemHandle(data)'>{{ node.label }}</span>
                        <span>
                            <el-button type="text" size="medium" icon="el-icon-edit-outline" @click="() => edit(data)">
                            </el-button>
                            <el-button type="text" size="medium" icon="el-icon-circle-plus-outline" @click="() => addNew(data)">
                            </el-button>
                            <el-button type="text" size="medium" icon="el-icon-delete" @click="() => deleteMenu(data)">
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
            <!-- 許可權操作表格 -->
            <handlePermission
                ref='handlePermission'
                :isShowPermissionTable='isShowPermissionTable'
                :menuId='menuId'
                v-show='isShowPermissionTable'
            >
            </handlePermission>
        </div>

        <!-- 新增修改菜單彈窗 -->
        <addNewMenu
            ref='addNewMenu'
            @getMenuTree='getData'
        >
        </addNewMenu>
        
    </div>
</template>

<script>

import addNewMenu from './component/addNewMenu'
import handlePermission from './component/handlePermission'
import {
    getMenuList,
    deleteMenu,
    listByPid,
} 
from "@/api/menu.js";

export default {
    name: "menuMang",
    computed: {},
    data() {
        return {
            formLabelWidth: "120px",
            dialogFormVisible: false,
            dialogTitle: "添加",
            menuId: "",
            sPid: "",
            form: {
                id: "",
                name: "",
                type: 1,
                url: "",
                path: "",
                icon: "",
                enabled: true,
                parentId: "",
                sortNum: ""
            },
            menuList:[],
            defaultProps: {
                children: "children",
                label: "name"
            },
            menuId: '',
            isShowPermissionTable: false
        };
    },
    components: {
        addNewMenu,
        handlePermission
    },
    
    mounted() {
        this.getData();
    },
    methods: {
        //點擊父節點載入子級數據
        loadChildNode(node,resolve) {
            if(node.loading){
                this.itemHandle(node.data,resolve)
            }
        },
        // 點擊節點
        itemHandle(data,resolve) {
            //動態載入子菜單
            console.log('data',data)
            this.menuId = ''
            if(resolve){
                listByPid({ pid: data.id }).then(res => {
                    let { body, message } = res;
                    if (message == "SUCCESS") {
                        resolve(body)
                    }
                })
            }
            // 如果節點type為0則載入許可權操作表格
            if (data.type == 0) {
                this.menuId = data.id
                this.isShowPermissionTable = true
                this.$refs.handlePermission.getPermissionList(data.id)
            } else {
                this.isShowPermissionTable = false
            }
        },

        //符合條件顯示許可權table
        showPermissionTable() {
            this.isShowPermissionTable = true
            this.$refs.handlePermission.showTable(this.menuId)
        },

        // 載入菜單數據
        getData() {
            this.dialogFormVisible = false;
            getMenuList().then(res => {
                let {
                    body,
                    message
                } = res;
                if (res.code == 200) {
                    this.menuList = res.body
                }
            });
        },
        //打開新增修改彈窗
        addNew(data) {
            let parentId = data.parentId
            let menuId = data.id
            this.$refs.addNewMenu.showDialog(1, menuId, parentId)
        },
        //打開編輯彈窗
        edit(data) {
            let parentId = data.parentId
            let menuId = data.id
            this.$refs.addNewMenu.showDialog(2, menuId, parentId)
        },
        //刪除菜單
        deleteMenu(data) {
            this.$confirm('確定要刪除嗎')
                .then(_ => {
                    deleteMenu({id: data.id}).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message: '刪除成功',
                                type: 'success'
                            });
                            this.getData()
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                })
                .catch(_ => {
                    this.$message({
                        message: '確認取消',
                        type: 'info'
                    });
                });
        },
    }
};
</script>

<style lang="less" scoped>
    .addequipment {
        position: absolute;
        top: 120px;
        left: 0;

        width: 100%;
        box-sizing: border-box;
        padding: 1% 1% 0 5%;
        color: #FFFFFF;
        .top {
            width: 100%;
            height: 50px;
            background: rgba(2,31,42,.4);
            display: flex;
            align-items: center;
            font-size: 20px;
            margin-bottom: 20px;
            .topfirst {
                color: #01C1DA;
                padding: 0 40px 0 20px;
            }
            .addequi {
                background: #1490FF;
                width: 130px;
                height: 30px;
                font-size: 16px;
                text-align: center;
                line-height: 28px;
                border-radius: 4px;
                cursor: pointer;
            }
        }
        .center {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            background:rgba(2,21,62,.4);
            overflow: hidden;
            .inputlist {
                width: 100%;
                font-size: 16px;
                color: #FFFFFF;
                float: left;
                box-sizing: border-box;
                padding: 30px 10px 0 10px;
                margin-bottom: .2rem;
                .org-tree {
                    width: 100%;
                    background: rgba(0, 0, 0, 0);
                    color: #FFFFFF;
                }
            }
            .tablelist {
                width: 75%;
                margin-top: 30px;
                float: left;
                .styleed {
                    display: inline-block;
                    padding: 1px 2px;
                    color: #12B1D2;
                    cursor: pointer;
                }   
                .span1 {
                    display: inline-block ;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
                .span2 {
                    display: inline-block ;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
                .span3 {
                    display: inline-block;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
            }
        }
    }
</style>

//非同步2
<template>
    <div class="addequipment org">
        <div class="top">
            <div class="topfirst">組織管理</div><div class="addequi" @click="addUser">添加關聯用戶</div>
        </div>
        <div class="center ">
            <div class="inputlist">
                <el-tree
                        class="org-tree"
                        node-key="id"
                        check-strictly
                        :load="loadNode"
                        :props="defaultProps"
                        lazy
                        ref="treeForm"
                        @node-click="handleNodeClick"
                        :expand-on-click-node="false"
                >

                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                            <el-button
                                    type="text"
                                    size="medium"
                                    icon="el-icon-edit-outline"
                                    @click="() => editor(node,data)">
                            </el-button>
                            <el-button
                                    type="text"
                                    size="medium"
                                    icon="el-icon-circle-plus-outline"
                                    @click="() => append(node, data)">
                            </el-button>
                             <el-button
                                     type="text"
                                     size="medium"
                                     icon="el-icon-delete"
                                     @click="() => remove(node, data)">
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>

            <div class="tablelist">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
                    <el-table-column
                            align="center"
                            label="用戶賬號"
                            prop='username'
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="用戶姓名"
                            prop='name'
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作"  align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span class="styleed" @click="deviceDel(scope.row)">刪除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="elPaination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[10, 20, 40, 80]"
                            :page-size="10"
                            style="float: right"
                            layout="total, sizes, prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <bindVs @updateing="updateing" ref="bindVs"></bindVs>
        <assignedOrder @updateing="updateingorg" ref="assignedOrder"></assignedOrder>

    </div>
</template>

<script>

    import {orgListByPid,orglistUserShipPage,orgdelUserShip,orgaddUserShip,orgAdd,orgupdate,orgdel} from "@/api/systemMenu/org.js"
    import {formatDate} from "@/utils/index.js";
    import assignedOrder from "./component/assigned.vue";
    import bindVs from "./component/bindVs.vue";
    export default {
        name: "addequipment",
        components: {
            bindVs,
            assignedOrder
        },
        computed: {

        },
        data() {
            return {
                menuList:[],
                ruleForm:{
                    planName:'',
                    name:'',
                    type:null,
                    code:null,
                    addressName:'',
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                data : [],
                statData:{},
                options:[],
                option1:[],
                tableData: [],
                multipleSelection: [],
                currentPage4: 1