vue3+ts+elementPlus右键添加删除目录

<el-col :span="4" :xs="24">

       <div class="head-container" v-if="false">

                 <el-input

                  v-model="proName"

                  placeholder="请输入部门名称"

                  clearable

                   prefix-icon="Search"

               style="margin-bottom: 20px"

       />

        </div>

     <div class="head-container">

                    <div class="column-title">

                        <span>产品目录管理</span>

                        <div class="underline"></div>

                    </div>

                    <div

                        class="custom-tree-node"

                        v-show="rightshow"

                        :style="{ left: menu_left + 'px', top: menu_top + 'px' }"

                    >

                        <ul class="right-menu">

                            <li @click.stop="clickRight(4)" v-show="addprovisible">

                                <span>添加产品</span>

                            </li>

                            <li @click.stop="clickRight(0)" v-show="addprovisible">

                                <span>添加同级栏目</span>

                            </li>

                            <li @click.stop="clickRight(1)" v-show="addprovisible">

                                <span>添加子栏目</span>

                            </li>

                            <li @click.stop="clickRight(2)">

                                <span>修改栏目</span>

                            </li>

                            <li @click.stop="clickRight(3)">

                                <span>删除栏目</span>

                            </li>

                        </ul>

                    </div>

                    <div class="treebox">

                            <!-- :render-content="renderContent" -->

                        <el-tree

                            highlight-current

                            node-key="id"

                            ref="treeRef"

                            :data="menudata"

                            :props="treeProps"

                            :filter-node-method="filterNode"

                            :expand-on-click-node="true"

                            @node-contextmenu="treeRight"

                            :current-node-key="currentNode"

                            @node-click="handleNodeClick"

                        >

                        </el-tree>

                    </div>           

             </div>

            </el-col>

<script setup name="cpglnew">

const treeProps = reactive({

    //解决后台返回的数据和el-树需要的[key]不一致问题

    children: 'children',

    label: 'name'

    // currentNodeKey: null

})

/** 通过条件过滤节点  */

const filterNode = (value, data) => {

    if (!value) return true

    return data.name.indexOf(value) !== -1

}

/** 监视树节点变化的时候回显 */

watch(currentNode, (val) => {

    console.log('currentNode', currentNode)

    if (proxy.$refs['treeRef'] !== undefined) {

        currentNode.value = val

        proxy.$refs['treeRef'].setCurrentKey(val)

        // queryParams.value.catalogId = menudata.value[0].children[0].id;

        // getProInfo()

    } else {

        return false

    }

})

//右键点击树

function treeRight(event, object, Node, element) {

    console.log('object', object)

    if(object.type!=="DIR"){

        addprovisible.value= false

    }

    else if(object.type!=="PRODUCT"){

        addprovisible.value=true

    }

    // treeform.value=object

    console.log('treeform.value', treeform.value)

    treeform.value.parentId = object.parentId

    treeform.value.id = object.id

    treeform.value.name = object.name

    treeform.value.sortNum = object.sortNum

    treeform.value.state = object.state

    catalogIds.value = object.id

    // currentNode.value=object

    // currentNode.value=Node

    rightshow.value = true

   

    // 将菜单显示在鼠标点击旁边定位

    //    menu_left.value=event.clientX;

    //    menu_top.value =event.clientY-180;

    const div = proxy.$refs.myDiv

    const rect = div.getBoundingClientRect()

    const x = event.clientX - rect.left // 相对于元素的x坐标

    const y = event.clientY - rect.top // 相对于元素的y坐标

    menu_left.value = x

    menu_top.value = y - 30

    document.addEventListener('click', foo)

}

/** 节点单击事件 */

function handleNodeClick(data, node, el) {

    //    foo()

    console.log('datahandleNodeClick', data)

    // console.log('node', node)

    queryParams.value.productId = data.id

    clickparentid.value = data.parentId

    const parent = proxy.$refs.treeRef.getNode(data).parent

    if (parent) {

        //   console.log("父节点数据:", parent.data);

        parenttype.value = parent.data.name

    }

    if (data.parentId === '1777902940868640769') {

        provisible.value = true

        procenvisible.value = false

        codemirrorvisible.value = false

        getProInfo()

        // getList()

    } else {

        provisible.value = true

        procenvisible.value = false

        codemirrorvisible.value = true

        getProInfo()

    }

    //    console.log('clickparentid',clickparentid.value)

    console.log('queryParams', queryParams.value.productId)

    // handleQuery();

    // getList();

}

// 获取父节点名称

function getparentsNode(node) {

    if (!node.parent) {

        return

    }

    this.breadList.unshift(node.data.name)

    getparentsNode(node.parent) //调用递归

}

//取消鼠标监听事件 菜单栏

function foo() {

    rightshow.value = false

    document.removeEventListener('click', foo)

}

//右键点击树

function clickRight(type) {

    treetype.value = type

    rightshow.value = false

    console.log('type1', treetype.value)

    if (type == 0) {

        dialogvisible.value = true

        treeform.value.id = ''

        treeform.value.name = ''

        treeform.value.sortNum = ''

        treeform.value.state = '0'

        treetitle.value = '添加同级菜单'

    } else if (type == 1) {

        dialogvisible.value = true

        treeform.value.parentId = catalogIds.value

        treeform.value.id = ''

        treeform.value.name = ''

        treeform.value.sortNum = ''

        treeform.value.state = '0'

        treetitle.value = '添加子栏目'

    } else if (type == 2) {

        treetitle.value = '修改栏目'

        dialogvisible.value = true

    } else if (type == 3) {

        proxy.$modal

            .confirm('是否确认删除')

            .then(function () {

                return delTree(catalogIds.value)

            })

            .then(() => {

                getProTree()

                proxy.$modal.msgSuccess('删除成功')

            })

            .catch(() => {})

    } else if (type == 4) {

        resetinfo()

    }

}

</script >