tree 樹形載入及增刪改

来源:https://www.cnblogs.com/Byme/archive/2019/10/31/11772532.html
-Advertisement-
Play Games

//非同步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
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [技術翻譯]您應該知道的13個有用的JavaScript數組技巧
    本次預計翻譯三篇文章如下： "01.[譯]9個可以讓你在2020年成為前端專家的項目" "02.[譯]預載入響應式圖像，從Chrome 73開始實現" "03.[譯]您應該知道的13個有用的JavaScript數組技巧" 我為什麼要創建這個git倉庫？通過翻譯國外的web相關的技術文章來學習和跟進w ...
  • Vue-cli項目部署到Nginx
    項目環境： 0. Nginx使用 以windows版為例，下載niginx壓縮包並解壓到任意目錄，雙擊 ，在瀏覽器中訪問 ，如果出現 頁面則說明成功。 nginx常用命令如下： 1. 部署項目到Nginx根目錄 對於vue cli創建的項目，修改 文件（位於項目根目錄下，沒有的話自行創建）： 在vu ...
  • angularjs總結
    AngularJS是一款由Google公司開發維護的前端MVC框架，其剋服了HTML在構建應用上的諸多不足，從而降低了開發成本提升了開發效率。 特點 AngularJS與我們之前學習的jQuery是有一定的區別的，jQuery更準確來說只一個類庫（類庫指的是一系列函數的集合）以DOM做為驅動（核心） ...
  • CSS文本屬性
    CSS文本屬性 1. CSS Text（文本）屬性定義文本的外觀，比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等 2. 文本顏色 color屬性定義文本的顏色 ~~~html div{ color:red; } ~~~ | 表示 | 屬性值 | | | | | 預定義顏色值 | red、gr ...
  • CSS字體屬性
    CSS字體屬性 1. CSS Fonts（字體）屬性擁有定義字體系列、大小、粗細和文字樣式（如斜體） 2. 字體系列 ~~~html div{ font family:"Microsoft Yahei"; } ~~~ 【註意】 各種字體之間必須使用英文狀態下逗號隔開 一般情況下，如果有空格隔開的多個 ...
  • 關於基本類型和引用類型的個人理解
    1.基礎類型 A. 基礎類型有5種，Number，String，Boolean，Null，Undefined B. 基礎類型沒有堆的概念，堆只針對引用類型。 所有基礎類型都是以key-value形式存放在棧中，其中，基礎類型的值不可變，除非是重新賦值， 比如： 2.引用類型 引用類型，如Array， ...
  • element-ui開始日期結束日期限制
    鏈接如下： https://blog.csdn.net/qq_33769914/article/details/83856268 https://www.cnblogs.com/YuKiee/p/9651240.html ...
  • Webpack 入門教程
    Webpack 是一個前端資源載入/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。 基於 Webpack3.0 測試通過。 從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。 接下來我 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類