目标管理拖拽限制逻辑+返回上一页面配置

src/views/xjc-integratedmachine/plan/aim/aim_management_index.vue

@@ -29,8 +29,22 @@ const router = useRouter();
 
 const headinfo = ref({});
 
-onMounted(() => {});
-
+onMounted(() => {
+  setHeadinfo();
+});
+// 用于控制页面离开的变量
+let pendingRouteCallback = null;
+function setHeadinfo() {
+  headinfo.value = {
+    title: "",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/plan",
+    backUrlUse: true,
+  };
+}
 function jumpTo(path) {
   router.push({
     path: path,

src/views/xjc-integratedmachine/plan/aim/aim_management_interaction.vue

@@ -289,7 +289,8 @@ function drop(event) {
     item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
   }
 }
-
+// 用于控制页面离开的变量
+let pendingRouteCallback = null;
 function setHeadinfo() {
   headinfo.value = {
     title: "目标管理",
@@ -301,6 +302,21 @@ function setHeadinfo() {
     backUrlUse: true,
   };
 }
+// 继续体验按钮处理
+const handleContinue = () => {
+  centerDialogVisible.value = false;
+  if (pendingRouteCallback) {
+    pendingRouteCallback(false); // 阻止离开
+    pendingRouteCallback = null;
+  }
+}; // 确定退出按钮处理
+const handleConfirmExit = () => {
+  centerDialogVisible.value = false;
+  if (pendingRouteCallback) {
+    pendingRouteCallback(true); // 允许离开
+    pendingRouteCallback = null;
+  }
+};
 const totalData = ref([]);
 onMounted(() => {
   setHeadinfo();
@@ -315,7 +331,24 @@ onMounted(() => {
       //loading.value = false; // 即使出错也要停止加载状态
     });
 });
+onBeforeRouteLeave((to, from, next) => {
+  // 保存next回调函数
+  pendingRouteCallback = next;
 
+  if (goalOptions.value.length == 15) {
+    // 任务完成，显示完成对话框
+    //centerDialogVisible3.value = true;
+  } else {
+    // 任务未完成，显示确认对话框
+    centerDialogVisible.value = true;
+  }
+
+  // 不直接调用next()，等待用户在对话框中选择
+});
+
+onBeforeUnmount(() => {
+  console.log("组件即将卸载，可以清理定时器/事件监听等");
+});
 function jumpTo(path) {
   router.push({
     path: path,
@@ -332,6 +365,16 @@ const smallGoals = ref(["", "", "", "", "", "", "", ""]);
 // 目标选项数据
 const goalOptions = ref([]);
 
+watch(
+  smallGoals,
+  (newVal) => {
+    // 判断数组所有项是否都不是空字符串
+    if (newVal.every((item) => item.trim() !== "")) {
+      centerDialogVisible3.value = true; // 满足条件时显示对话框
+    }
+  },
+  { deep: true } // 监听数组内部元素变化
+);
 // 桌面端拖拽
 const onDragStart = (event, goalText) => {
   event.dataTransfer.setData("text/plain", goalText);
@@ -583,6 +626,7 @@ const handleDrop = (target, goalText, obj) => {
       goalOptions.value = newArr.children;
     }
   }
+  console.log(smallGoals, 7776);
 };
 
 const onDrop = (target, event) => {

src/views/xjc-integratedmachine/plan/time/time_management_4d_index.vue

@@ -33,8 +33,22 @@ const router = useRouter();
 
 const headinfo = ref({});
 
-onMounted(() => {});
-
+onMounted(() => {
+  setHeadinfo();
+});
+// 用于控制页面离开的变量
+let pendingRouteCallback = null;
+function setHeadinfo() {
+  headinfo.value = {
+    title: "",
+    user: {
+      avatar: "",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/plan/time/time_management_menu",
+    backUrlUse: true,
+  };
+}
 function jumpTo(path) {
   router.push({
     path: path,

src/views/xjc-integratedmachine/plan/time/time_management_assessment_index.vue

@@ -33,8 +33,22 @@ const router = useRouter();
 
 const headinfo = ref({});
 
-onMounted(() => {});
-
+onMounted(() => {
+  setHeadinfo();
+});
+// 用于控制页面离开的变量
+let pendingRouteCallback = null;
+function setHeadinfo() {
+  headinfo.value = {
+    title: "",
+    user: {
+      avatar: "",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/plan/time/time_management_menu",
+    backUrlUse: true,
+  };
+}
 function jumpTo(path) {
   router.push({
     path: path,

src/views/xjc-integratedmachine/plan/time/time_management_menu.vue

@@ -30,8 +30,20 @@ const router = useRouter();
 
 const headinfo = ref({});
 
-onMounted(() => {});
-
+onMounted(() => {
+  setHeadinfo();
+});
+function setHeadinfo() {
+  headinfo.value = {
+    title: "时间管理评测",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/plan",
+    backUrlUse: true,
+  };
+}
 function jumpTo(path) {
   router.push({
     path: path,