目标管理接口联调

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

@@ -95,14 +95,16 @@
           v-for="(option, index) in goalOptions"
           :key="'goal-option-' + index"
           class="goal-btn"
-          :class="{ dragging: isDragging && currentDragItem === option.text }"
+          :class="{
+            dragging: isDragging && currentDragItem === option.content,
+          }"
           draggable="true"
-          @dragstart="onDragStart($event, option.text)"
-          @touchstart="onTouchStart($event, option.text, option)"
+          @dragstart="onDragStart($event, option.content)"
+          @touchstart="onTouchStart($event, option.content, option)"
           @touchmove="onTouchMove($event)"
           @touchend="onTouchEnd($event, option)"
         >
-          {{ option.text }}
+          {{ option.content }}
         </div>
       </div>
 
@@ -211,6 +213,30 @@
           </span>
         </template>
       </el-dialog>
+      <el-dialog
+        v-model="centerDialogVisible4"
+        title=""
+        width="30%"
+        align-center
+        style="padding: 40px; top: 300px; border-radius: 20px"
+        class="custom-dialog"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+      >
+        <span>答案错误</span>
+        <template #footer>
+          <span class="dialog-footer" style="">
+            <el-button
+              style="margin-right: 0px !important"
+              class="button1"
+              @click="handleKnowExit"
+            >
+              我知道了
+            </el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -219,17 +245,24 @@
 import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
 import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 import { onMounted, watch, nextTick } from "vue";
-
+import { getAimManagementMaterial } from "@/api/xjc-integratedmachine/plan/aim.js";
 const router = useRouter();
-
 const headinfo = ref({});
 const draggedItem = ref(null);
 const centerDialogVisible = ref(false);
 const centerDialogVisible1 = ref(false);
-const centerDialogVisible2 = ref(true);
+const centerDialogVisible2 = ref(false);
 const centerDialogVisible3 = ref(false);
+const centerDialogVisible4 = ref(false);
 // 移动端拖拽相关状态
 const isDragging = ref(false);
+const handleKnowExit = () => {
+  centerDialogVisible.value = false;
+  centerDialogVisible1.value = false;
+  centerDialogVisible2.value = false;
+  centerDialogVisible3.value = false;
+  centerDialogVisible4.value = false;
+};
 const currentDragItem = ref(null);
 const dragStartPos = ref({ x: 0, y: 0 });
 const currentDropTarget = ref(null);
@@ -268,8 +301,19 @@ function setHeadinfo() {
     backUrlUse: true,
   };
 }
+const totalData = ref([]);
 onMounted(() => {
   setHeadinfo();
+  getAimManagementMaterial({ pageNum: 100 })
+    .then((res) => {
+      console.log(res, 22222);
+      totalData.value = res;
+      goalOptions.value = totalData.value.children;
+    })
+    .catch((err) => {
+      console.log("error", err);
+      //loading.value = false; // 即使出错也要停止加载状态
+    });
 });
 
 function jumpTo(path) {
@@ -286,38 +330,7 @@ const shortTermGoals = ref(["", "", "", ""]);
 const smallGoals = ref(["", "", "", "", "", "", "", ""]);
 
 // 目标选项数据
-const goalOptions = ref([
-  {
-    id: 1,
-    text: "考上国内双一流A类高校",
-    category: "education",
-  },
-  {
-    id: 2,
-    text: "健康生活模式",
-    category: "health",
-  },
-  {
-    id: 3,
-    text: "留学",
-    category: "education",
-  },
-  {
-    id: 4,
-    text: "创业成功",
-    category: "career",
-  },
-  {
-    id: 5,
-    text: "学会一门新技能",
-    category: "personal",
-  },
-  {
-    id: 6,
-    text: "财务自由",
-    category: "financial",
-  },
-]);
+const goalOptions = ref([]);
 
 // 桌面端拖拽
 const onDragStart = (event, goalText) => {
@@ -378,7 +391,7 @@ const onTouchMove = (event) => {
 };
 
 const onTouchEnd = (event, obj) => {
-  console.log(obj, 22);
+  console.log(obj.isRight, event, 22);
   if (!isDragging.value) return;
 
   event.preventDefault();
@@ -394,7 +407,7 @@ const onTouchEnd = (event, obj) => {
 
   // 如果有有效的放置目标，执行放置逻辑
   if (currentDropTarget.value && currentDragItem.value) {
-    handleDrop(currentDropTarget.value, currentDragItem.value);
+    handleDrop(currentDropTarget.value, currentDragItem.value, obj);
   }
 
   // 重置状态
@@ -402,9 +415,35 @@ const onTouchEnd = (event, obj) => {
   currentDragItem.value = null;
   currentDropTarget.value = null;
 };
-
-const handleDrop = (target, goalText) => {
-  console.log(target, goalText, "mobile drop");
+// 兼容数组 / 单对象 / ref / reactive 的查找
+function findNodeById(tree, id) {
+  // 取出真实根值（兼容 Vue 的 ref/reactive）
+  const root =
+    tree && typeof tree === "object" && "value" in tree ? tree.value : tree;
+  if (!root) return null;
+
+  // 统一成待遍历栈
+  const stack = Array.isArray(root) ? root.slice() : [root];
+  const targetId = String(id);
+
+  while (stack.length) {
+    const node = stack.pop();
+    if (node && String(node.id) === targetId) return node;
+
+    const children = node && Array.isArray(node.children) ? node.children : [];
+    // 压入子节点
+    for (let i = 0; i < children.length; i++) {
+      stack.push(children[i]);
+    }
+  }
+  return null;
+}
+function checkArray(arr) {
+  console.log(arr, 133);
+  // 判断是否有空项（只包含空字符串或全是空格的也算空）
+  return !arr.some((item) => item.trim() === "");
+}
+function steam(target, goalText) {
   switch (target) {
     case "longTerm":
       longTermGoal.value = goalText;
@@ -452,9 +491,43 @@ const handleDrop = (target, goalText) => {
   console.log("中期目标:", midTermGoals.value);
   console.log("短期目标:", shortTermGoals.value);
   console.log("小目标:", smallGoals.value);
+}
+const handleDrop = (target, goalText, obj) => {
+  console.log(target, goalText, obj, "mobile drop");
+  if (!obj.isRight) {
+    centerDialogVisible4.value = true;
+    return;
+  }
+  if (obj.deep == 1) {
+    if (target != "longTerm") {
+      centerDialogVisible2.value = true;
+      return;
+    }
+    let newArr = findNodeById(totalData.value, obj.id);
+    console.log(newArr, 88);
+    goalOptions.value = newArr.children;
+    steam(target, goalText);
+  }
+  if (obj.deep == 2) {
+    //判断是否拖进中期目标
+    if (!(target == "midTerm1" || target == "midTerm2")) {
+      centerDialogVisible2.value = true;
+      return;
+    }
+    console.log(!checkArray(midTermGoals.value), midTermGoals, 777);
+    steam(target, goalText);
+    //判断中期目标是否都已拖拽完毕
+    if (!checkArray(midTermGoals.value)) {
+    } else {
+      let newArr = findNodeById(totalData.value, obj.id);
+      console.log(newArr, 88);
+      goalOptions.value = newArr.children;
+    }
+  }
 };
 
 const onDrop = (target, event) => {
+  console.log(target, event, 999);
   const goalText = event.dataTransfer.getData("text/plain");
   handleDrop(target, goalText);
 }; // 我知道了按钮处理