网格选择调整完毕

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

@@ -1,4 +1,3 @@
-
 <template>
   <section class="gridScoreRules">
     <!--  v-if="permissions('app_appvillagerintegralrule_detail')" -->
@@ -7,16 +6,18 @@
         <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">
-                {{row.integralStart > 0? "+" + row.integralStart : row.integralStart}}~{{row.integralEnd > 0 ? "+" + row.integralEnd : row.integralEnd}}
+                {{ row.integralStart > 0 ? "+" + row.integralStart : row.integralStart }}~{{ row.integralEnd > 0 ? "+" + row.integralEnd : row.integralEnd }}
               </span>
               <span v-else>{{ row.integral > 0 ? "+" : "" }}{{ row.integral }}</span>
             </template>
@@ -35,15 +36,14 @@
       </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 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-input placeholder="请输入,周期范围内,不填写表示不限制" v-model="form.ruleName" clearable maxlength="10" show-word-limit/>
           </el-form-item>
 
           <el-form-item label="规则">
@@ -86,7 +86,7 @@
           </el-form-item>
 
           <el-form-item label="积分分值" prop="integral">
-            <el-input placeholder="请输入" v-model="form.integral" clearable />
+            <el-input placeholder="请输入" v-model="form.integral" clearable/>
           </el-form-item>
 
           <el-form-item label="有效范围" prop="validRangeType" required>
@@ -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-button type="text" @click="(showGrid = true), beforeSelectTree()" >{{ girdInfoList.length ? "重新选择" : "请选择" }}</el-button>
+          <el-form-item label="生效网格" :prop="form.validRangeType == 1 ? 'validRangeData' : ''"
+                        :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>
@@ -131,11 +133,11 @@ export default {
   },
   data() {
     var validcode = (rule, value, callback) => {
-      if(value) {
+      if (value) {
         if (value != 0) {
-          if(!/^([+-]?([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/.test(value)) {
+          if (!/^([+-]?([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/.test(value)) {
             callback(new Error('请输入积分分值，可输入正数、负数、最多保留两位小数'))
-          }else{
+          } else {
             callback();
           }
         } else {
@@ -152,32 +154,32 @@ export default {
         ruleName: ""
       },
       systemRuleIdList: [],
-      page: { current: 1, size: 10, total: 0 },
+      page: {current: 1, size: 10, total: 0},
       colConfigs: [
         {
           prop: "parentRuleName",
           label: "类型",
           dict: "integralRuleEventType",
         },
-        { prop: "ruleName", label: "事件", dict: "integralRuleEvent" },
-        { prop: "ruleType", label: "规则", dict: "integralRuleRuleType" },
+        {prop: "ruleName", label: "事件", dict: "integralRuleEvent"},
+        {prop: "ruleType", label: "规则", dict: "integralRuleRuleType"},
         {
           prop: "scoringCycle",
           label: "周期范围",
           dict: "integralRuleScoringCycle",
-          render: (h, { row }) => {
+          render: (h, {row}) => {
             return h(
-              "span",
-              {},
-              row.numberLimit.length
-                ? $dict.getLabel("integralRuleScoringCycle", row.scoringCycle)
-                : $dict.getLabel("integralRuleScoringCycle", row.scoringCycle) +
+                "span",
+                {},
+                row.numberLimit.length
+                    ? $dict.getLabel("integralRuleScoringCycle", row.scoringCycle)
+                    : $dict.getLabel("integralRuleScoringCycle", row.scoringCycle) +
                     row.numberLimit +
                     "次"
             );
           },
         },
-        { slot: "integral", label: "积分分值", align: "center" },
+        {slot: "integral", label: "积分分值", align: "center"},
         {
           prop: "validRangeType",
           label: "有效范围",
@@ -190,7 +192,7 @@ export default {
           width: 96,
           dict: "integralRuleStatus",
         },
-        { slot: "options", label: "操作", align: "center" },
+        {slot: "options", label: "操作", align: "center"},
       ],
       tableData: [],
       dialog: false,
@@ -206,17 +208,17 @@ export default {
       },
       formRules: {
         systemRuleId: [
-          { required: true, message: "请选择事件/类型", trigger: "change" },
+          {required: true, message: "请选择事件/类型", trigger: "change"},
         ],
         ruleName: [
-          { required: true, message: "请输入自定义事件", trigger: "change" },
+          {required: true, message: "请输入自定义事件", trigger: "change"},
         ],
         scoringCycle: [
-          { required: true, message: "请选择周期范围", trigger: "change" },
+          {required: true, message: "请选择周期范围", trigger: "change"},
         ],
         integral: [{required: true, validator: validcode, trigger: "blur"},],
         validRangeType: [
-          { required: true, message: "请选择有效范围", trigger: "change" },
+          {required: true, message: "请选择有效范围", trigger: "change"},
         ],
       },
       rulesOps: [],
@@ -226,7 +228,6 @@ export default {
         checkStrictly: true,
       },
       radio: 0,
-      showGrid: false,
       treeObj: {
         treeList: [],
         defaultProps: {
@@ -235,38 +236,35 @@ export default {
           children: 'children',
           isLeaf: 'leaf'
         },
-        checkedKeys: [],
       },
       girdInfoList: [],
-      currCheckedKeys: [],
       rulueType: "0",
       girdNameList: [],
     };
   },
   created() {
-    this.$dict.load("integralRuleStatus","integralRuleRuleType","integralRuleScoringCycle",
-    "integralRuleEvent","integralRuleEventType").then(() => {
-        this.getList();
-        this.getRulesList();
-        this.beforeSelectTree();
-        // this.getList12()
-      });
+    this.$dict.load("integralRuleStatus", "integralRuleRuleType", "integralRuleScoringCycle",
+        "integralRuleEvent", "integralRuleEventType").then(() => {
+      this.getList();
+      this.getRulesList();
+      // this.getList12()
+    });
   },
   methods: {
     getList() {
       this.instance
-        .post(`/app/appintegralrule/list`, null, {
-          params: {
-            ...this.search,
-            ...this.page,
-          },
-        })
-        .then((res) => {
-          if (res?.data) {
-            this.tableData = res.data.records;
-            this.page.total = res.data.total;
-          }
-        });
+      .post(`/app/appintegralrule/list`, null, {
+        params: {
+          ...this.search,
+          ...this.page,
+        },
+      })
+      .then((res) => {
+        if (res?.data) {
+          this.tableData = res.data.records;
+          this.page.total = res.data.total;
+        }
+      });
     },
     closed() {
       this.form = {
@@ -279,16 +277,15 @@ export default {
         validRangeType: "0",
         validRangeData: "",
       };
-      if(!this.isEdit) {
-         this.girdInfoList = []
+      if (!this.isEdit) {
+        this.girdInfoList = []
       }
     },
     toEdit(row) {
-      console.log(row);
       this.form = {...row}
-      if(this.form?.validRangeData) {
+      if (this.form?.validRangeData) {
         this.girdInfoList = JSON.parse(this.form.validRangeData)
-        this.girdNameList = this.girdInfoList.map(e=>e.girdName)
+        this.girdNameList = this.girdInfoList.map(e => e.girdName)
       }
       this.$nextTick(() => {
         this.dialog = true;
@@ -299,26 +296,26 @@ export default {
         type: "error",
       }).then(() => {
         this.instance
-          .post(`/app/appintegralrule/delete?ids=${id}`)
-          .then((res) => {
-            if (res.code == 0) {
-              this.$message.success("删除成功！");
-              this.getList();
-            }
-          });
+        .post(`/app/appintegralrule/delete?ids=${id}`)
+        .then((res) => {
+          if (res.code == 0) {
+            this.$message.success("删除成功！");
+            this.getList();
+          }
+        });
       });
     },
     changeStatus(id, status) {
       let text = status == 1 ? "启用" : "停用";
       this.$confirm(`确定${text}该条规则？`).then(() => {
         this.instance
-          .post(`/app/appintegralrule/enableStatus?id=${id}`)
-          .then((res) => {
-            if (res.code == 0) {
-              this.$message.success(`${text}成功！`);
-              this.getList();
-            }
-          });
+        .post(`/app/appintegralrule/enableStatus?id=${id}`)
+        .then((res) => {
+          if (res.code == 0) {
+            this.$message.success(`${text}成功！`);
+            this.getList();
+          }
+        });
       });
     },
     onReset() {
@@ -335,16 +332,16 @@ export default {
           // formData.ladderRule = JSON.stringify(formData.ladderRule)
           formData.integral = formData.integral || 0;
           this.instance
-            .post(`/app/appintegralrule/addOrUpdate`, formData)
-            .then((res) => {
-              if (res.code == 0) {
-                this.$message.success(
+          .post(`/app/appintegralrule/addOrUpdate`, formData)
+          .then((res) => {
+            if (res.code == 0) {
+              this.$message.success(
                   `${this.isEdit ? "编辑成功" : "添加成功"}`
-                );
-                this.onReset();
-                this.dialog = false;
-              }
-            });
+              );
+              this.onReset();
+              this.dialog = false;
+            }
+          });
         } else {
           return false;
         }
@@ -365,26 +362,26 @@ export default {
     },
     handleDelete(i) {
       this.$confirm("是否要删除该规则?")
-        .then(() => {
-          this.form.ladderRule.splice(i, 1);
-        })
-        .catch(() => 0);
+      .then(() => {
+        this.form.ladderRule.splice(i, 1);
+      })
+      .catch(() => 0);
     },
     checkIntegral(v) {
       return /\.\d{2,}$/.test(v) ? Math.abs(v).toFixed(1) : Math.abs(v);
     },
     getRulesList() {
       this.instance
-        .post(`/app/appintegralsystemrule/list?current=1&sizes=3000`)
-        .then((res) => {
-          if (res?.data) {
-            this.rulesOps = this.toTree(res.data.records);
-            this.rulesOps.push({
-              ruleName: "自定义",
-              id: "自定义",
-            });
-          }
-        });
+      .post(`/app/appintegralsystemrule/list?current=1&sizes=3000`)
+      .then((res) => {
+        if (res?.data) {
+          this.rulesOps = this.toTree(res.data.records);
+          this.rulesOps.push({
+            ruleName: "自定义",
+            id: "自定义",
+          });
+        }
+      });
     },
     // 转树形结构
     toTree(data) {
@@ -406,103 +403,38 @@ 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("请选择网格");
       }
 
       this.girdInfoList = this.$refs.tree.getCheckedNodes().map((item) => {
-        return { ...item, checkType: true };
+        return {...item, checkType: true};
       });
 
-      
 
       let validRangeData = this.$refs.tree.getCheckedNodes().map((e) => {
-        return {
-          id: e.id,
-          girdName: e.girdName
+            return {
+              id: e.id,
+              girdName: e.girdName
+            }
           }
-        }
       )
-      this.girdNameList = validRangeData.map(e=>e.girdName)
+      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) {
-            let tree = this.girdToTree(res.data);
-            this.treeObj.treeList = this.addKey(tree)
-
-            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)
+        if (res?.data) {
+          res.data = res.data.map(e => ({...e, checked: !!this.girdInfoList.find(s => s.id == e.id)}))
+          this.treeObj.treeList = this.$arr2tree(res.data, {parent: 'parentGirdId'})
         }
-      }
-      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) {
+        if (item.id == e.id) {
           this.$refs.tree.setChecked(e.id, false);
         } else {
           this.$refs.tree.setChecked(e.id, true);
@@ -554,4 +486,4 @@ export default {
     }
   }
 }
-</style>
+</style>