|
@@ -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,
|