网格选择调整完毕

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

@@ -1,4 +1,3 @@
-
 <template>
   <section class="gridScoreRules">
     <!--  v-if="permissions('app_appvillagerintegralrule_detail')" -->
@@ -7,12 +6,14 @@
         <ai-search-bar>
           <template #left>
             <el-button type="primary" icon="iconfont iconAdd" @click="dialog = true">&nbsp;添加</el-button>
-            <el-cascader size="small" v-model="systemRuleIdList" :options="rulesOps" placeholder="请选择事件/类型" clearable :props="rulesProps" @change="handleTypeSearch" ref="eventTypeSearch"/>
+            <el-cascader size="small" v-model="systemRuleIdList" :options="rulesOps" placeholder="请选择事件/类型" clearable :props="rulesProps"
+                         @change="handleTypeSearch" ref="eventTypeSearch"/>
             <ai-select v-model="search.status" @change="(page.current = 1), getList()" placeholder="请选择状态" :selectList="$dict.getDict('integralRuleStatus')">
             </ai-select>
           </template>
         </ai-search-bar>
-        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="page.total" :dict="dict" :current.sync="page.current" :size.sync="page.size" @getList="getList()">
+        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="page.total" :dict="dict" :current.sync="page.current" :size.sync="page.size"
+                  @getList="getList()">
           <el-table-column slot="integral" label="分值" align="center">
             <template slot-scope="{ row }">
               <span v-if="row.integralValueType == 1">
@@ -35,13 +36,12 @@
       </template>
     </ai-list>
     <!-- <ai-empty v-else>暂无应用权限</ai-empty> -->
-    <ai-dialog :title="dialogTitle" :visible.sync="dialog" @onConfirm="onConfirm" @closed="closed" width="900px">
+    <ai-dialog :title="dialogTitle" :visible.sync="dialog" @onConfirm="onConfirm" @closed="closed" width="900px" @open="beforeSelectTree">
       <div class="form_div">
         <el-form ref="DialogForm" :model="form" :rules="formRules" size="small" label-suffix="：" label-width="150px">
           <el-form-item label="事件类型" prop="systemRuleId">
             <el-cascader v-model="form.systemRuleId" ref="cascaderArr" :props="etOps" clearable placeholder="请选择" @change="handleTypeForm" :options="rulesOps"/>
           </el-form-item>
-
           <el-form-item label="自定义事件" v-if="form.systemRuleId == '自定义'" prop="ruleName" :required="form.systemRuleId == '自定义'">
             <el-input placeholder="请输入,周期范围内,不填写表示不限制" v-model="form.ruleName" clearable maxlength="10" show-word-limit/>
           </el-form-item>
@@ -96,26 +96,28 @@
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item label="生效网格" :prop="form.validRangeType == 1 ? 'validRangeData' : ''" :rules="[{ required: true, message: '请选择生效网格', trigger: 'change' }, ]" v-if="form.validRangeType == 1">
+          <el-form-item label="生效网格" :prop="form.validRangeType == 1 ? 'validRangeData' : ''"
-            <el-button type="text" @click="(showGrid = true), beforeSelectTree()" >{{ girdInfoList.length ? "重新选择" : "请选择" }}</el-button>
+                        :rules="[{ required: true, message: '请选择生效网格', trigger: 'change' }, ]" v-if="form.validRangeType == 1">
+            <ai-dialog-btn dialogTitle="选择网格" append-to-body @onConfirm="getCheckedTree" :customFooter="false">
+              <el-button slot="btn" type="text">{{ girdInfoList.length ? "重新选择" : "请选择" }}</el-button>
+              <div class="grid">
+                <el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" :expand-on-click-node="false">
+                  <template slot-scope="{data}">
+                    <el-row class="fill" type="flex" @click.native.stop="data.checked=!data.checked">
+                      <div class="fill" v-text="data.girdName"/>
+                      <div class="iconfont iconSuccess color-primary mar-r8" v-if="data.checked"/>
+                    </el-row>
+                  </template>
+                </el-tree>
+              </div>
+            </ai-dialog-btn>
+
             <div v-if="girdInfoList.length">
-              <span v-for="(e,index) in girdNameList" :key="index" style="margin-right: 8px;">{{e}}</span>
+              <span v-for="(e,index) in girdNameList" :key="index" class="mar-r8" v-text="e"/>
             </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 :check-strictly="true" :load="loadNode" :default-expanded-keys="currCheckedKeys"
-             :default-checked-keys="currCheckedKeys" @check="onCheckChange">
-          </el-tree>
-        </div>
-        <div class="dialog-footer" slot="footer">
-          <el-button size="medium" @click="showGrid = false">取消</el-button>
-          <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
-        </div>
-      </ai-dialog>
     </ai-dialog>
   </section>
 </template>
@@ -226,7 +228,6 @@ export default {
         checkStrictly: true,
       },
       radio: 0,
-      showGrid: false,
       treeObj: {
         treeList: [],
         defaultProps: {
@@ -235,10 +236,8 @@ export default {
           children: 'children',
           isLeaf: 'leaf'
         },
-        checkedKeys: [],
       },
       girdInfoList: [],
-      currCheckedKeys: [],
       rulueType: "0",
       girdNameList: [],
     };
@@ -248,7 +247,6 @@ export default {
         "integralRuleEvent", "integralRuleEventType").then(() => {
       this.getList();
       this.getRulesList();
-        this.beforeSelectTree();
       // this.getList12()
     });
   },
@@ -284,7 +282,6 @@ export default {
       }
     },
     toEdit(row) {
-      console.log(row);
       this.form = {...row}
       if (this.form?.validRangeData) {
         this.girdInfoList = JSON.parse(this.form.validRangeData)
@@ -406,27 +403,6 @@ export default {
       });
       return result;
     },
-
-    girdToTree(data) {
-      let result = [];
-      if (!Array.isArray(data)) {
-        return result;
-      }
-      let map = {};
-      data.forEach((item) => {
-        map[item.id] = item;
-      });
-      data.forEach((item) => {
-        let parent = map[item.parentGirdId];
-        if (parent) {
-          (parent.children || (parent.children = [])).push(item);
-        } else {
-          result.push(item);
-        }
-      });
-      return result;
-    },
-
     getCheckedTree() {
       if (!this.$refs.tree.getCheckedNodes().length) {
         return this.$message.error("请选择网格");
@@ -437,7 +413,6 @@ export default {
       });
 
 
-
       let validRangeData = this.$refs.tree.getCheckedNodes().map((e) => {
             return {
               id: e.id,
@@ -448,58 +423,15 @@ export default {
       this.girdNameList = validRangeData.map(e => e.girdName)
       this.form.validRangeData = JSON.stringify(validRangeData)
 
-      this.showGrid = false;
     },
-
     beforeSelectTree() {
-      this.treeObj.checkedKeys = [];
       this.instance.post(`/app/appgirdinfo/listAll3`, null, null).then((res) => {
-          if (res?.code == 0) {
+        if (res?.data) {
-            let tree = this.girdToTree(res.data);
+          res.data = res.data.map(e => ({...e, checked: !!this.girdInfoList.find(s => s.id == e.id)}))
-            this.treeObj.treeList = this.addKey(tree)
+          this.treeObj.treeList = this.$arr2tree(res.data, {parent: 'parentGirdId'})
-
-            this.girdInfoList.map((e) => {
-              this.treeObj.checkedKeys.push(e.id);
-            });
-            
-            this.$nextTick(() => {
-              this.currCheckedKeys = this.girdInfoList.map(v=>v.id)
-              this.$nextTick(() => {
-                this.$refs.tree?.setCheckedKeys(this.currCheckedKeys);
-              });
-            });
         }
       });
     },
-
-    // 最后一级追加属性
-    addKey(arr) {
-      for (let index = 0; index < arr.length; index++) {
-        const item = arr[index]
-        if (!item.children || !item.children.length) {
-          item.leaf = true
-        } else {
-          this.addKey(item.children)
-        }
-      }
-      return arr
-    },
-
-    // el-tree懒加载
-    loadNode(node, resolve) {
-      if (node.level === 0) {
-        return resolve(this.treeObj.treeList);
-      }
-      if (node.level >= 1 || node.data.children && node.data.children.length) {
-        return resolve(node.data.children)
-      } else {
-        return resolve({
-          name: 'girdName',
-          isLeaf: true
-        })
-      }
-    },
-
     onCheckChange(e) {
       this.girdInfoList?.forEach((item) => {
         if (item.id == e.id) {