进度填报提交逻辑优化

src/api/progress/plan/types.ts

@@ -30,6 +30,7 @@ export interface ProgressCategoryVO {
   children: ProgressCategoryVO[];
   threeChildren: any[];
   hasChildren:any;
+  detailChildren:any;
 }
 
 export interface ProgressCategoryForm extends BaseEntity {

src/views/progress/plan/component/createDailyRate.vue

@@ -61,8 +61,8 @@
             <el-table-column label="完成数量" prop="finishedNumber" min-width="100px" />
             <el-table-column label="延期量" min-width="100px">
               <template #default="{ row: scopeRow }">
-                <el-tag :type="filterW(scopeRow) ? 'danger' : 'success'">
-                  {{ filterW(scopeRow) }}
+                <el-tag :type="scopeRow.delayNumber.toString() ? 'success' : 'danger'">
+                  {{ scopeRow.delayNumber || 0 }}
                 </el-tag>
               </template>
             </el-table-column>
@@ -488,18 +488,18 @@ const handleRemove = (row?: any) => {
 };
 
 // 延期计算
-const filterW = (row: any): number => {
-  const { finishedNumber, planNumber, endAt } = row;
-  if (!endAt) return 0;
+// const filterW = (row: any): number => {
+//   const { finishedNumber, planNumber, endAt } = row;
+//   if (!endAt) return 0;
 
-  const endTime = new Date(endAt).getTime();
-  const now = new Date().getTime();
+//   const endTime = new Date(endAt).getTime();
+//   const now = new Date().getTime();
 
-  if (endTime <= now && planNumber > finishedNumber) {
-    return planNumber - finishedNumber;
-  }
-  return 0;
-};
+//   if (endTime <= now && planNumber > finishedNumber) {
+//     return planNumber - finishedNumber;
+//   }
+//   return 0;
+// };
 
 // 暴露给模板的属性和方法
 defineExpose({

src/views/progress/progressPaper/index.vue

@@ -24,10 +24,9 @@
       :load="loadNode"
       node-key="id"
       lazy
-      @node-collapse="closeNode"
-      @node-expand="openNode"
       :render-content="renderContent"
       check-strictly
+      :expand-on-click-node="false"
     />
   </div>
   <div class="submit">
@@ -82,7 +81,8 @@ const treeProps = {
   children: 'children',
   label: 'name',
   isLeaf: 'leaf',
-  hasChildren: 'hasChildren' // 重要
+  hasChildren: 'hasChildren', // 重要
+  disabled: 'disabled'
 };
 
 //切换项目
@@ -99,36 +99,76 @@ const handleSelect = (projectId: string) => {
 /** 进度类别树选中事件 */
 const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
   const node: Node | undefined = treeRef.value?.getNode(data.id);
+
+  if (node.level === 2) {
+    //二级节点 展开显示图层 收起删除
+    const children = node.childNodes.map((child) => child.data);
+    children.forEach((child) => {
+      child.disabled = !checked;
+    });
+    // 让 el-tree 刷新显示
+    treeRef.value.updateKeyChildren(data.id, children);
+    if (checked) {
+      addPointToMap(data.threeChildren); // 添加点到地图
+      clearLevel3Checked(node.level); // 清除三级节点的选中状态
+      treeRef.value.setChecked(data.id, true, false);
+    } else {
+      data.threeChildren.forEach((child: any) => {
+        const feature = featureMap[child.id];
+        if (feature && sharedSource.hasFeature(feature)) {
+          sharedSource.removeFeature(feature);
+        }
+      });
+    }
+    return;
+  }
   if (!checked) return (submitForm.value.id = ''); // 只处理第三级节点的选中事件
 
   const parent = node.parent;
   if (!parent) return;
   //消除所有节点的选中状态
-  treeRef.value.setCheckedKeys([], false);
+  clearLevel3Checked(node.level); // 清除三级节点的选中状态
   // 设置当前点击项为选中
   treeRef.value.setChecked(data.id, true, false);
   submitForm.value.id = data.id; // 设置提交表单的id
 };
 
-/** 关闭节点事件 */
-const closeNode = (node: any) => {
-  // 清除子节点
-  if (node.pid) {
-    node.threeChildren.forEach((child: any) => {
-      const feature = featureMap[child.id];
-      if (feature && sharedSource.hasFeature(feature)) {
-        sharedSource.removeFeature(feature);
+//清除某一级节点所有选中状态
+const clearLevel3Checked = (level) => {
+  const rootNodes = treeRef.value.store.root.childNodes;
+
+  const clearChecked = (nodes: any[]) => {
+    nodes.forEach((node) => {
+      if (node.level === level) {
+        treeRef.value.setChecked(node.key, false, false);
+      } else if (node.childNodes?.length) {
+        clearChecked(node.childNodes);
       }
     });
-  }
+  };
+
+  clearChecked(rootNodes);
 };
 
-/** 打开节点事件 */
-const openNode = (node: any) => {
-  // 清除子节点
-  if (!node.pid) return;
-  addPointToMap(node.threeChildren); // 添加点到地图
-};
+/** 关闭节点事件 */
+// const closeNode = (node: any) => {
+//   // 清除子节点
+//   if (node.pid) {
+//     // node.threeChildren.forEach((child: any) => {
+//     //   const feature = featureMap[child.id];
+//     //   if (feature && sharedSource.hasFeature(feature)) {
+//     //     sharedSource.removeFeature(feature);
+//     //   }
+//     // });
+//   }
+// };
+
+// /** 打开节点事件 */
+// const openNode = (node: any) => {
+//   // 清除子节点
+//   if (!node.pid) return;
+//   // addPointToMap(node.threeChildren); // 添加点到地图
+// };
 
 //懒加载子节点
 const loadNode = async (node: any, resolve: (data: any[]) => void) => {
@@ -153,13 +193,15 @@ const loadNode = async (node: any, resolve: (data: any[]) => void) => {
     return {
       ...detail,
       name: detail.date, // 设置为叶子节点
-      leaf: true // 标记为叶子节点
+      leaf: true, // 标记为叶子节点
+      disabled: true
     };
   });
   progressCategoryList.value.forEach((item, i) => {
     let indexNum = item.children.findIndex((item) => item.id === secondLevelNodeId);
     if (indexNum !== -1) {
       item.children[indexNum].threeChildren = res.data.facilityList; // 将子节点添加到当前节点的threeChildren属性中
+      // item.children[indexNum].detailChildren = children; // 将子节点添加到当前节点的threeChildren属性中
     }
   });
 
@@ -193,7 +235,7 @@ const submit = () => {
 //重置树形结构选中以及图层高亮
 const resetTreeAndMap = () => {
   // 重置树形结构选中状态
-  treeRef.value?.setCheckedKeys([]);
+  clearLevel3Checked(3);
   //取消加载状态
   loading.value = false;
   // 清除地图上的所有高亮
@@ -216,13 +258,25 @@ const handleChange = (value: number) => {
 };
 
 //限定部分节点能选择
-const renderContent = (context, { node }) => {
+const renderContent = (context, { node, data }) => {
   if (node.level === 3) {
     return h('span', { class: 'custom-tree-node' }, [
       h(ElCheckbox, {
         modelValue: node.checked,
         'onUpdate:modelValue': (val) => node.setChecked(val),
-        style: 'margin-right: 8px;margin-left: -20px;'
+        style: 'margin-right: 8px;',
+        disabled: data.disabled
+      }),
+      h('span', node.label)
+    ]);
+  }
+  if (node.level === 2) {
+    return h('span', { class: 'custom-tree-node' }, [
+      h(ElCheckbox, {
+        modelValue: node.checked,
+        'onUpdate:modelValue': (val) => node.setChecked(val),
+        style: 'margin-right: 8px;',
+        disabled: !data.threeChildren || data.threeChildren.length == 0
       }),
       h('span', node.label)
     ]);