网格树

packages/conv/creditScore/AppGridMemberScore/components/gridScoreRules.vue

@@ -97,16 +97,18 @@
           </el-form-item>
 
           <el-form-item label="生效网格" :prop="form.validRangeType == 1 ? 'validRangeData' : ''" :rules="[{ required: true, message: '请选择生效网格', trigger: 'change' }, ]" v-if="form.validRangeType == 1">
-            <el-button type="text" @click="(showGrid = true), beforeSelectTree()" >{{ girdInfoList.length ? "已选择" : "请选择" }}</el-button>
+            <el-button type="text" @click="(showGrid = true), beforeSelectTree()" >{{ girdInfoList.length ? "重新选择" : "请选择" }}</el-button>
+            <div v-if="girdInfoList.length">
+              <span v-for="(e,index) in girdNameList" :key="index" style="margin-right: 8px;">{{e}}</span>
+            </div>
           </el-form-item>
         </el-form>
       </div>
       <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px" append-to-body>
         <div class="grid">
           <el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" ref="tree" 
-            show-checkbox lazy :load="loadNode" :default-checked-keys="currCheckedKeys" @check="onCheckChange">
+            show-checkbox lazy :check-strictly="true" :load="loadNode" :default-checked-keys="currCheckedKeys" @check="onCheckChange">
           </el-tree>
-          <!-- :default-expand-all="true" :check-strictly="true" :check-strictly="true" -->
         </div>
         <div class="dialog-footer" slot="footer">
           <el-button size="medium" @click="showGrid = false">取消</el-button>
@@ -210,7 +212,7 @@ export default {
         scoringCycle: [
           { required: true, message: "请选择周期范围", trigger: "change" },
         ],
-        integral: [{required: true, validator: validcode,trigger: "blur"},],
+        integral: [{required: true, validator: validcode, trigger: "blur"},],
         validRangeType: [
           { required: true, message: "请选择有效范围", trigger: "change" },
         ],
@@ -236,7 +238,7 @@ export default {
       girdInfoList: [],
       currCheckedKeys: [],
       rulueType: "0",
-      // tree12: []
+      girdNameList: [],
     };
   },
   created() {
@@ -281,7 +283,10 @@ export default {
     },
     toEdit(row) {
       this.form = {...row}
-      this.girdInfoList = this.form?.validRangeData?.split(",");
+      if(this.form?.validRangeData) {
+        this.girdInfoList = JSON.parse(this.form.validRangeData)
+        this.girdNameList = this.girdInfoList.map(e=>e.girdName)
+      }
       this.$nextTick(() => {
         this.dialog = true;
       });
@@ -422,18 +427,23 @@ export default {
       if (!this.$refs.tree.getCheckedNodes().length) {
         return this.$message.error("请选择网格");
       }
-      // console.log(this.girdInfoList, this.$refs.tree.getCheckedNodes());
+
       this.girdInfoList = this.$refs.tree.getCheckedNodes().map((item) => {
         return { ...item, checkType: true };
       });
-      // this.$set(this.girdInfoList, this.currIndex, {
+
-      //   ...this.$refs.tree.getCheckedNodes(),
+      
-      //   checkType: true
+
-      // })
+      let validRangeData = this.$refs.tree.getCheckedNodes().map((e) => {
-      this.form.validRangeData = this.$refs.tree
+        return {
-        .getCheckedNodes()
+          id: e.id,
-        .map((e) => e.id)
+          girdName: e.girdName
-        .toString();
+          }
+        }
+      )
+      this.girdNameList = validRangeData.map(e=>e.girdName)
+      this.form.validRangeData = JSON.stringify(validRangeData)
+
       this.showGrid = false;
     },
 
@@ -449,7 +459,7 @@ export default {
             });
             
             this.$nextTick(() => {
-              this.currCheckedKeys = this.girdInfoList;
+              this.currCheckedKeys = this.girdInfoList.map(v=>v.id)
               this.$nextTick(() => {
                 this.$refs.tree?.setCheckedKeys(this.currCheckedKeys);
               });
@@ -487,10 +497,12 @@ export default {
     },
 
     onCheckChange(e) {
-      this.girdInfoList.forEach((v) => {
+      this.girdInfoList.forEach((item) => {
-        if(v == e.id) {
+        if(item.id == e.id) {
+          console.log(111);
           this.$refs.tree.setChecked(e.id, false);
         } else {
+          console.log(222);
           this.$refs.tree.setChecked(e.id, true);
         }
       })