ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue

<!--
@ 作者: 秦东
@ 时间: 2024-04-22 08:56:40
@ 备注: 
-->
<script lang="ts" setup>
import type {
  AllowDropType,
  NodeDropType,
} from "element-plus/es/components/tree/src/tree.type";
import { appMenuTreeInfo, appSetInfo } from "@/api/date/type";
import {
  gainAllAppMenu,
  editAppMenuCont,
  appMenuShowOrHide,
  delAppMenu,
  editAppMenusIcon,
} from "@/api/DesignForm/requestapi";

import SvgIcon from "@/components/SvgIcon/index.vue";
import { threeShiyanData } from "@/api/date/type";
import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue";
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue";
import EditAppMenuNamePage from "@/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue";
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue";

const props = defineProps({
  appCont: {
    type: Object,
    default() {
      return {};
    },
  },
  formKey: {
    type: String,
    default: "",
  },
  menusTree: {
    type: Object,
    default() {
      return {};
    },
  },
  drawerWith: {
    type: Number,
    default: 0,
  },
  groupKey: {
    type: String,
    default: "",
  },
  appPageKey: {
    type: String,
    default: "",
  },
});
const svgIsShow = ref(false);
const emits = defineEmits(["update:menusTree", "update:appPageKey", "openAppPageForm"]);
const appOenMenu = ref<appMenuTreeInfo>({});
/**
@ 作者: 秦东
@ 时间: 2024-04-24 13:17:30
@ 功能: 菜单列表  
*/
const appMenuTree = computed({
  get() {
    return props.menusTree;
  },
  set(val: any) {
    emits("update:menusTree", val);
  },
});

const appPageKey = computed({
  get() {
    return props.appPageKey;
  },
  set(val: any) {
    emits("update:appPageKey", val);
  },
});
/**
@ 作者: 秦东
@ 时间: 2024-04-22 10:06:20
@ 功能: 树移动完毕后执行的操作
*/
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  // console.log('树移动完毕后执行的操作====1========>',draggingNode)
  // console.log('树移动完毕后执行的操作=====2=======>',dropNode)
  // console.log('树移动完毕后执行的操作=====3=======>',dropType)
  // console.log('树移动完毕后执行的操作=====4=======>',ev)
  // return false;
  let sendCont = {
    id: props.appCont.uuid,
    menuTree: appMenuTree.value,
  };
  editAppMenuCont(sendCont).then((data) => {
    // console.log('树移动完毕后执行的操作============>',data)
  });
};

const treeList = ref<any[]>([]);
/**
@ 作者: 秦东
@ 时间: 2024-04-22 15:53:35
@ 功能: 加载SVG图标
*/
const allIconNames: string[] = [];
const loadIcons = () => {
  const icons = import.meta.glob("../../../../assets/icons/*.svg");
  for (const icon in icons) {
    const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
    allIconNames.push(iconName);
  }
  // console.log("icons",icons)
  // console.log("allIconNames",allIconNames)
};
onMounted(() => {
  treeList.value = threeShiyanData;
  loadIcons();
});
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:52:03
@ 功能: 设置表单图标
*/
const svgName = ref("");
const svgId = ref("");
const setAppMenusSvg = (val: any) => {
  // console.log("选择----setAppMenusSvg--->",val)
  svgName.value = val.svg;
  svgId.value = val.id;
  treeList.value = val;
  svgIsShow.value = true;
};
watch(
  () => svgName.value,
  (val: string) => {
    // console.log("监听----svgName--->",val)
    // console.log("监听----threeShiyanData--->",threeShiyanData)
    diguiData(appMenuTree.value);
  }
);

/**
@ 作者: 秦东
@ 时间: 2024-04-23 09:44:14
@ 功能: 递归判断是哪个节点换了图标
*/
const diguiData = (val: any) => {
  // console.log('跳出循环:', val);
  if (Array.isArray(val)) {
    try {
      val.forEach((item: any) => {
        // console.log('跳出循环--1-->:',item.id);
        // console.log('跳出循环---->:',svgId.value);
        if (item.id == svgId.value) {
          item.svg = svgName.value;
          let sendInfo = {
            id: item.id.toString(),
            label: svgName.value,
          };
          editAppMenusIcon(sendInfo).then(({ data }) => {});
          throw item;
        }
        if (item.children && Array.isArray(item.children)) {
          diguiData(item.children);
        }
      });
    } catch (e) {
      // console.log('跳出循环:', threeShiyanData);
    }
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-04-24 13:12:18
@ 功能: 新建子分组
*/
const menuGroupShow = ref(false);
const menuParentKey = ref("");
const addNewSunMenuGroup = (val: any) => {
  console.log("新建子分组:", val);
  menuParentKey.value = val.id.toString();
  console.log("新建子分组-->:", menuParentKey.value);
  menuGroupShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-24 13:22:47
@ 功能: 更新
*/
const gainSunAppContent = () => {
  // console.log('更新:');
  gainAllAppMenu({ id: props.appCont.uuid }).then((data) => {
    // console.log('更新:',data);
    appMenuTree.value = data.data;
    // openAppPage(appOenMenu)
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-04-25 13:23:46
@ 功能: 修改名称
*/
const editAppMenuNameShow = ref(false);
const editMenuName = (val: appMenuTreeInfo) => {
  // console.log('修改名称:',val);
  appOenMenu.value = val;
  editAppMenuNameShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-07 09:00:47
@ 功能: 显示和隐藏菜单
*/
const showOrHide = (val: appMenuTreeInfo, types: number) => {
  // console.log('显示和隐藏菜单:',val,types);
  let sendInfo = {
    types: types,
    menuInfo: val,
  };

  appMenuShowOrHide(sendInfo).then((data) => {
    // console.log('显示和隐藏菜单:',data);
    gainSunAppContent();
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-05-07 10:03:30
@ 功能: 删除app自定义菜单
*/
const editAppMenu = (val: appMenuTreeInfo) => {
  // console.log('editAppMenu:',val);
  ElMessageBox.confirm("您确定要删除此项？一经删除！将不可恢复！请慎重操作", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let sendInfo = {
      id: val.id.toString(),
      status: 3,
    };
    delAppMenu(sendInfo).then((data) => {
      // console.log('删除app自定义菜单:',data);
      gainSunAppContent();
      ElMessage({
        type: "success",
        message: data.msg,
      });
    });
  });
};
const saveAppFormIsShow = ref(false);
/**
@ 作者: 秦东
@ 时间: 2024-05-07 11:21:39
@ 功能: 新增表单页面
*/
const creetMenuId = ref("");
const isNew = ref(false);
const createNewPage = (val?: string) => {
  creetMenuId.value = val.toString();
  saveAppFormIsShow.value = true;
  isNew.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-17 14:22:12
@ 功能: 判断能否拖入此节点
*/
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  // console.log("draggingNode--->",draggingNode)
  // console.log("dropNode--->",dropNode)
  // console.log("type--->",type)
  // if (dropNode.data.type === 2) {
  // 	return false
  // } else {
  // 	return true
  // }
  if (draggingNode.data.type === 2 && dropNode.data.type === 2 && type == "inner") {
    return false;
  } else {
    return true;
  }
  // return true
};
/**
@ 作者: 秦东
@ 时间: 2024-05-17 16:45:40
@ 功能: 打开app表单
*/
const openAppPage = (val: any) => {
  // console.log("打开app表单------>",val)
  if (val.isLock == 1) {
    ElMessage({
      showClose: true,
      message: "该页面为系统内置页面！请到应用层面访问查看!",
      type: "warning",
    });
  } else {
    if (val.type !== 1) {
      // console.log("打开app表单--1---->",val)
      emits("openAppPageForm", val);
    }
  }
};
</script>
<template>
  <el-tree
    :data="appMenuTree"
    draggable
    default-expand-all
    node-key="id"
    :allow-drop="allowDrop"
    :expand-on-click-node="true"
    @node-drag-start="startDrop"
    @node-drop="handleDrop"
  >
    <template #default="{ node, data }">
      <div class="appMenuTitle">
        <el-space wrap>
          <el-image
            v-if="data.icon != ''"
            style="width: 15px; height: 15px"
            :src="data.icon"
            :fit="fit"
          />
          <svg-icon
            v-else
            prefix="icon"
            :icon-class="data.svg"
            @click="setAppMenusSvg(data)"
          />
          <!-- <el-tooltip :content="node.label" placement="top" effect="dark">
					<el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{node.label}}</el-text>
				</el-tooltip> -->
          <el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{
            node.label
          }}</el-text>
        </el-space>
        <el-dropdown>
          <svg-icon class="svgBox" prefix="icon" icon-class="set" />
          <template #dropdown>
            <el-dropdown-item @click="editMenuName(data)">修改名称</el-dropdown-item>
            <!-- <el-dropdown-item @click="">复制</el-dropdown-item> -->
            <!-- <el-dropdown-item @click="moveMenus(data)">移动到</el-dropdown-item> -->
            <el-dropdown-item
              v-if="data.type == 1"
              divided
              @click="addNewSunMenuGroup(data)"
              >新建子分组</el-dropdown-item
            >
            <!-- <el-dropdown-item @click="">新建普通表单</el-dropdown-item>
					<el-dropdown-item @click="">新建流程表单</el-dropdown-item> -->
            <el-dropdown-item v-if="data.type == 1" @click="createNewPage(data.id)"
              >新建页面</el-dropdown-item
            >
            <el-dropdown-item @click="showOrHide(data, 1)" divided
              ><el-text v-if="data.pcIsShow == 1">隐藏PC端</el-text
              ><el-text v-else>取消-隐藏PC端</el-text></el-dropdown-item
            >
            <el-dropdown-item @click="showOrHide(data, 2)"
              ><el-text v-if="data.wapIsShow == 1">隐藏移动端</el-text
              ><el-text v-else>取消-隐藏移动端</el-text></el-dropdown-item
            >
            <el-dropdown-item @click="editAppMenu(data)" divided>
              <el-text class="mx-1" type="danger">删除</el-text>
            </el-dropdown-item>
          </template>
        </el-dropdown>
      </div>
    </template>
  </el-tree>
  <AppMenuSvgPage
    v-model:is-show="svgIsShow"
    v-model:svg-name="svgName"
    :svg-id="svgId"
    :icon-list="allIconNames"
  />
  <AppMenuGroup
    v-model:is-show="menuGroupShow"
    :parent-key="menuParentKey"
    :app-cont="props.appCont"
    @updateMenu="gainSunAppContent"
  />
  <EditAppMenuNamePage
    v-model:is-show="editAppMenuNameShow"
    :menu-cont="appOenMenu"
    @updateMenu="gainSunAppContent"
  />
  <CreateAppFormPage
    v-if="saveAppFormIsShow"
    v-model:is-show="saveAppFormIsShow"
    :is-new="isNew"
    v-model:app-page-key="appPageKey"
    :drawer-with="props.drawerWith"
    :form-Key="props.formKey"
    :app-cont="props.appCont"
    :group-key="props.groupKey"
    :menu-id="creetMenuId"
    @gainSunAppContent="gainSunAppContent"
  />
</template>
<style lang="scss" scoped>
.appMenuTitle {
  width: 100%;
  padding-right: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .svgBox {
    display: none;
  }
}
.appMenuTitle:hover .svgBox {
  display: block;
}
</style>