yang

src/views/backstage/project/index.vue

@@ -182,12 +182,22 @@
 
     <!-- 关联统计点弹出框 -->
     <el-dialog :title="title" :visible.sync="statisticsPointOpen" width="500px" append-to-body>
+      <div class="">
+          <el-tree
+            ref="tree"
+            :data="statisticsPoints"
+            show-checkbox
+            node-key="value"
+            :props="defaultProps"
+            @check="handleTreeNodeClick"
+          ></el-tree>
+      </div>
       <div>
-        <el-form>
+        <!-- <el-form>
           <el-form-item label="关联统计点" prop="adminVillageLevelValue">
             <div class="block">
-              <!--            <span class="demonstration"></span>-->
               <el-cascader
+                ref="cascader"
                 style="width: 100%"
                 key="id"
                 placeholder="请选择统计点"
@@ -196,10 +206,11 @@
                 :props="{multiple: true, expandTrigger: 'hover',checkStrictly: true}"
                 filterable
                 clearable
+                @change="handleChange"
               ></el-cascader>
             </div>
           </el-form-item>
-        </el-form>
+        </el-form> -->
 
       </div>
       <div slot="footer" class="dialog-footer">
@@ -237,7 +248,7 @@
 
 <script>
 import { distributeRectificationTasks, getVillageList, getThemeListDetail, changeReleaseStatus, getThemeList, listProject, getProject, delProject, addProject, updateProject, exportProject } from "@/api/backstage/project";
-import { getStatisticalPointsList } from "@/api/backstage/point";
+import { getStatisticalPointsList, getAreaByParentId } from "@/api/backstage/point";
 
 export default {
   name: "Project",
@@ -296,7 +307,13 @@ export default {
         themeSelectValue: [
           { required: true, message: "主题不能为空，请选择主题", trigger: "blur" }
         ]
+      },
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
       }
+
     };
   },
   created() {
@@ -488,41 +505,80 @@ export default {
         this.themeListOpen = true;
       });
     },
-    //关联统计点
+    // 点击关联统计点-按钮
     relevantStatisticalPoints(row){
-
+      // let that = this
+      // let key = [94, 93, 95, 96, 98, 97, 33, 9, 2, 91, 90, 89, 88, 87, 85, 84, 83, 71, 38, 41, 45, 47, 46, 44, 51, 50, 40, 43, 53, 52, 42, 56, 54, 3, 4, 68, 82, 69, 37, 62, 72, 67, 5, 73, 63, 31, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 10, 7, 6]
+      // that.$refs.tree.setCheckedKeys(key)
+      // 根据id获取当前项目关联的统计点
       getProject(row.id).then(response => {
         this.form = response.data;
         if(this.form.areaSelectValue){
-          this.form.areaSelectValue = JSON.parse(this.form.areaSelectValue);
+          this.form.areaSelectValue = JSON.parse(this.form.areaSelectValue)
+          console.log('获取关联统计点============',this.form.areaSelectValue)
+          
+          //利用延时器，防止dom没加载完
+          setTimeout(()=>{
+            this.$refs.tree.setCheckedKeys(this.form.areaSelectValue)
+            console.log('延时器')
+          },500)
         }
-      });
+      })
 
       getStatisticalPointsList().then(res=>{
         this.statisticsPoints = res.data;
         this.title = '关联统计点';
         this.statisticsPointOpen = true;
+        console.log('关联统计点============',this.statisticsPoints)
       });
+      
     },
-    //关联统计点提交按钮
+    //关联统计点——提交按钮
     statisticsPointSubmit(row){
+        console.log('关联统计点——提交按钮===',row.areaSelectValue)
+        console.log('关联统计点——提交按钮===',JSON.stringify(row.areaSelectValue))
+        if(row.areaSelectValue != null && row.areaSelectValue.length>0){
+          row.areaSelectValue = JSON.stringify(row.areaSelectValue)
+        }else {
+          row.areaSelectValue = null
+        }
 
-      if(row.areaSelectValue != null && row.areaSelectValue.length>0){
-        row.areaSelectValue = JSON.stringify(row.areaSelectValue)
-      }else {
-        row.areaSelectValue = null
-      }
+        updateProject(row).then(response => {
+            this.msgSuccess("关联成功");
+            this.statisticsPointOpen = false;
+            this.getList(); //刷新
+        }).catch(()=>{
+            if(row.areaSelectValue){
+              row.areaSelectValue = JSON.parse(row.areaSelectValue);
+            }
+        });
+    },
 
-      updateProject(row).then(response => {
-        this.msgSuccess("关联成功");
-        this.statisticsPointOpen = false;
-        this.getList();
-      }).catch(()=>{
-        if(row.areaSelectValue){
-          row.areaSelectValue = JSON.parse(row.areaSelectValue);
-        }
-      });
+    // 选择关联统计点时
+    handleChange(e){
+        console.log('选中的vlaue值==',e)
+        console.log('tjd==============',this.form.areaSelectValue)
+        // console.log('全部的统计===',this.statisticsPoints)
+
+        // let nodesObj = this.$refs['cascader'].getCheckedNodes()
+        // console.log('当前选中的vlaue值==',nodesObj)
+
+        // let id = e[e.length-1]
+        // id = id[id.length-1]
+        // console.log('id==',id)
+        // getAreaByParentId(id).then(res => {
+        //     if(res.code==200){
+                
+        //     }
+        // })
+    },
+    handleTreeNodeClick(){
+        console.log('选中的vlaue值==',this.$refs.tree.getCheckedKeys())
+        this.form.areaSelectValue = this.$refs.tree.getCheckedKeys()
+        console.log('关联的统计点==',this.form.areaSelectValue)
+        
     },
+
     //派发整改任务按钮
     distributeRectificationTasks(row){
       getVillageList(row.id).then(res=>{
@@ -562,3 +618,7 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+  
+</style>