Jelajahi Sumber

通用树节点,没有传入菜单数组时,使用默认菜单功能

gangyj 2 tahun lalu
induk
melakukan
184b944b39
1 mengubah file dengan 137 tambahan dan 0 penghapusan
  1. 137 0
      src/components/tree/hc-tree.vue

+ 137 - 0
src/components/tree/hc-tree.vue

@@ -15,6 +15,13 @@
                                     <HcIcon name="apps" ui="text-2xl"/>
                                 </div>
                             </div>
+                            
+                            <!--没有传入菜单使用默认的-->
+                            <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length < 1">
+                                <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu2($event,data,node)">
+                                    <HcIcon name="apps" ui="text-2xl"/>
+                                </div>
+                            </div>
                         </div>
                         <!--树组件,操作菜单-->
                         <!-- <div class="menu-icon" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
@@ -38,6 +45,18 @@
             <span class="menu-item-name">{{item.label}}</span>
         </template>
     </HcContextMenu>
+
+    <!--没有传入菜单使用默认的-->
+    <HcContextMenu ref="contextMenuRef2" :datas="ElTreeMenu" @item-click="ElTreeMenuClick" v-if="menusData.length < 1" @closed="handleMenuClosed">
+        <template #sort="{item}">
+            <HcIcon :name="item.icon" :line="false" class="menu-item-icon"/>
+            <span class="menu-item-name">{{item.label}}</span>
+        </template>
+    </HcContextMenu>
+
+    <EditNodeDialog :projectId="projectId" :node="nodeItemInfo" :show="editDialogShow" :type="editDialogType" @hide="dialogHide"></EditNodeDialog>
+
+    <SortNodeDialog :node="nodeItemInfo" :show="sortDialogShow" @hide="sortDialogHide"></SortNodeDialog>
 </template>
 
 <script setup>
@@ -45,6 +64,11 @@ import {ref,nextTick,watch} from "vue";
 import { getArchiveTreeLazyTree,initTree } from '~api/other';
 import {isItem,getArrValue,getObjValue,isValueNull} from "vue-utils-plus"
 
+import {remove,syncProjectTree} from "~api/other";
+import EditNodeDialog from "~src/components/dialog/EditNodeDialog.vue"
+import SortNodeDialog from "~src/components/dialog/SortNodeDialog.vue"
+import {delMessage} from "~uti/tools";
+
 //参数
 const props = defineProps({
     ui: {
@@ -266,6 +290,119 @@ const removeElTreeNode = (key) => {
     ElTreeRef.value.remove(node)
 }
 
+
+//鼠标右键事件2
+const contextMenuRef2 = ref(null)
+const ElTreeLabelContextMenu2 = (e,data,node) => {
+    const rows = ElTreeMenu.value || [];
+    if (node.level !== 1 && rows.length > 0) {
+        e.preventDefault();
+        treeRefNode.value = node;
+        treeRefData.value = data;
+        node.showTreeMenu = true
+        //展开菜单
+        contextMenuRef2.value?.showMenu(e)
+    }
+}
+
+//设置树菜单数据
+const ElTreeMenu = ref([
+    {icon: 'add-circle', label: '新增', key: "add"},
+    {icon: 'draft', label: '编辑', key: "edit"},
+    {icon: 'delete-bin', label: '删除', key: "del"},
+    {icon: 'refresh', label: '同步', key: "sync"},
+    {icon: 'sort-asc', label: '排序', key: "sort"}
+])
+
+//树菜单被点击
+const nodeItemInfo = ref();
+const ElTreeMenuClick = async ({key}) => {
+    const node = treeRefNode.value;
+    const data = treeRefData.value;
+    nodeItemInfo.value = node
+    // nodeDataInfo.value = data
+    setTreeMenuDataClick({key,node,data})
+}
+//处理菜单被点击数据
+const setTreeMenuDataClick = ({key,node,data}) => {
+    //console.log(node)
+    switch (key) {
+        case 'add':
+            addNode(node);
+            break;
+        case 'edit':
+            editNodeModal(node);
+            break;
+        case 'del':
+            delNodeMoadl(node);
+            break;
+        case 'sync':
+            syncNodeMoadl(node);
+            break;
+        case 'sort':
+            sortNodeMoadl(node);
+            break;
+    }
+}
+
+//新增编辑弹窗
+const editDialogShow = ref(false);
+const editDialogType = ref('add');
+const addNode = ()=>{
+    editDialogType.value = 'add';
+    editDialogShow.value = true;
+}
+const editNodeModal = ()=>{
+    editDialogType.value = 'edit';
+    editDialogShow.value = true;
+}
+const dialogHide = ()=>{
+    editDialogShow.value = false;
+}
+
+//排序弹窗
+const sortDialogShow = ref(false);
+const sortNodeMoadl = ()=>{
+    sortDialogShow.value = true;
+}
+const sortDialogHide = ()=>{
+    sortDialogShow.value = false;
+}
+
+
+//删除节点
+const delNodeMoadl = (node)=>{
+    delMessage(async() => {
+        const {code } = await remove({
+            id:node.data.id
+        })
+        if (code == 200) {
+            window.$message?.success('删除成功')
+            ElTreeRef.value.remove(node)
+        }
+    })
+}
+
+//同步节点
+const syncNodeMoadl = (node)=>{
+    window?.$messageBox?.alert('是否同步该节点?', '提示', {
+        showCancelButton: true,
+        confirmButtonText: '确认同步',
+        cancelButtonText: '取消',
+        callback: async(action) => {
+            if (action === 'confirm') {
+                const {code } = await syncProjectTree({
+                    id:node.data.id
+                })
+                if (code == 200) {
+                    window.$message?.success('同步成功')
+                    window?.location?.reload()  //刷新页面
+                }
+            }
+        }
+    })
+}
+
 // 暴露出去
 defineExpose({
     removeElTreeNode,