积分规则需求变更的开发

project/fengdu/app/AppIntegratingRules/components/List.vue

@@ -64,15 +64,32 @@
               <el-input placeholder="请输入" v-model="form.integral" clearable/>
             </el-form-item>
 
-            <el-form-item label="有效地区" prop="areaId" required>
+            <el-form-item label="有效地区" prop="girdName" required>
-              <ai-area-select
+              <!-- <ai-area-select
                 clearable
                 @fullname="v => form.areaName = v"
                 :disabled-level="$store.state.user.info.areaList.length"
                 always-show
                 :instance="instance"
                 v-model="form.areaId">
-              </ai-area-select>
+              </ai-area-select> -->
+              <ai-picker
+                :instance="instance"
+                dialogTitle="选择网格"
+                :ops="{label: 'girdName', id: 'girdCode'}"
+                pageTitle="网格"
+                :action="'/app/appgirdinfo/girdList?idType=1'"
+                v-model="girdList"
+                @pick="onPick">
+                <div class="AppAnnounceDetail-select">
+                  <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.girdName"></el-input>
+                  <div class="select-left" v-if="girdList.length">
+                    <span v-for="(item, index) in girdList" :key="index">{{ item.girdName }}</span>
+                  </div>
+                  <i v-if="!girdList.length">请选择</i>
+                  <div class="select-right">{{ girdList.length ? '重新选择' : '选择' }}</div>
+                </div>
+              </ai-picker>
             </el-form-item>
           </el-form>
         </div>
@@ -112,6 +129,7 @@
           systemRuleId: "",
           ruleName: ""
         },
+        girdList: [],
         systemRuleIdList: [],
         page: {current: 1, size: 10, total: 0},
         colConfigs: [
@@ -144,7 +162,7 @@
             prop: "validRangeData",
             label: "有效地区",
             align: "center",
-            format: v => JSON.parse(v).areaName
+            format: v => JSON.parse(v).girdName
           },
           {
             prop: "status",
@@ -163,10 +181,9 @@
           scoringCycle: "",
           numberLimit: "",
           integral: "",
-          validRangeType: "2",
+          validRangeType: "1",
           validRangeData: "",
-          areaName: '',
+          girdName: ''
-          areaId: ''
         },
         formRules: {
           systemRuleId: [
@@ -179,8 +196,8 @@
             {required: true, message: "请选择周期范围", trigger: "change"},
           ],
           integral: [{required: true, validator: validcode, trigger: "blur"},],
-          areaId: [
+          girdName: [
-            {required: true, message: "请选择地区", trigger: "change"},
+            {required: true, message: "请选择网格", trigger: "change"},
           ],
         },
         rulesOps: [],
@@ -216,6 +233,16 @@
       });
     },
     methods: {
+      onPick (e) {
+        if (e.length) {
+          this.form.girdName = e[0].girdName
+        } else {
+          this.form.girdName = ''
+        }
+
+        this.girdList = e
+      },
+
       getList() {
         this.instance
         .post(`/app/appintegralrule/listByAppletFD`, null, {
@@ -233,7 +260,6 @@
       },
 
       change (e) {
-        console.log(this.dict.getDict('appIntegralApplyEventType'))
       },
       closed () {
         this.form.ruleType = '0'
@@ -242,16 +268,16 @@
         this.form.scoringCycle = ''
         this.form.numberLimit = ''
         this.form.integral = ''
-        this.form.validRangeType = '2'
+        this.form.validRangeType = '1'
         this.form.validRangeData = ''
-        this.form.areaName = this.$store.state.user.info.areaName
+        this.form.girdName = ''
-        this.form.areaId = this.$store.state.user.info.areaId
+        this.girdList = []
       },
       toEdit(row) {
         this.form = {...row}
         if (this.form?.validRangeData) {
-          this.form.areaName = JSON.parse(this.form.validRangeData).areaName
+          this.form.girdName = JSON.parse(this.form.validRangeData).girdName
-          this.form.areaId = JSON.parse(this.form.validRangeData).areaId
+          this.girdList = JSON.parse(this.form.validRangeData)
         }
         this.$nextTick(() => {
           this.dialog = true;
@@ -295,8 +321,9 @@
               ...formData,
               appCodeType: '2',
               validRangeData: JSON.stringify({
-                areaName: this.form.areaName,
+                girdId: this.girdList[0].girdId,
-                areaId: this.form.areaId
+                girdName: this.girdList[0].girdName,
+                girdCode: this.girdList[0].girdCode
               })
             })
             .then((res) => {
@@ -412,6 +439,87 @@
     //   display: flex;
     // }
 
+    .AppAnnounceDetail-select {
+      display: flex;
+      align-items: center;
+      min-height: 32px;
+      line-height: 1;
+      background: #F5F5F5;
+      border-radius: 4px;
+      border: 1px solid #D0D4DC;
+      cursor: pointer;
+      overflow: hidden;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        border-color: #26f;
+      }
+
+      & > i {
+        flex: 1;
+        height: 100%;
+        line-height: 32px;
+        padding: 0 12px;
+        color: #888888;
+        font-size: 14px;
+        font-style: normal;
+        border-right: 1px solid #D0D4DC;
+        background: #fff;
+      }
+
+      .AppAnnounceDetail-select__input {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        opacity: 0;
+        height: 100%;
+      }
+
+      .select-right {
+        height: 100%;
+        padding: 0 12px;
+        color: #222222;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all ease 0.3s;
+
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+
+      .select-left {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1;
+        padding: 5px 0 0px 12px;
+        border-right: 1px solid #D0D4DC;
+        border-radius: 4px 0 0 4px;
+        background: #fff;
+
+        em {
+          height: 22px;
+          line-height: 22px;
+          margin: 0 4px 5px 0;
+          color: #222222;
+          font-size: 12px;
+          font-style: normal;
+        }
+
+        span {
+          height: 22px;
+          line-height: 22px;
+          margin: 0 4px 5px 0;
+          padding: 0 8px;
+          font-size: 12px;
+          color: #222222;
+          background: #F3F4F7;
+          border-radius: 2px;
+          border: 1px solid #D0D4DC;
+        }
+      }
+    }
     :deep( .ai-dialog ){
       .el-cascader {
         width: 100%;

ui/packages/common/AiPicker.vue

@@ -1,6 +1,15 @@
 <template>
   <section class="AiPicker">
-    <ai-dialog-btn v-bind="$attrs" @onConfirm="handleSave" :customFooter="false" @close="selected=[]" @open="selected=$copy(picked)">
+    <ai-dialog-btn
+      custom-class=""
+      v-bind="$attrs"
+      append-to-body
+      @onConfirm="handleSave"
+      :customFooter="false"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      @close="selected=[]"
+      @open="selected=$copy(picked)">
       <template #btn v-if="$scopedSlots.default">
         <slot :selected="picked"/>
       </template>
@@ -148,7 +157,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AiPicker {
   .color-primary {
     color: $primaryColor;
   }
@@ -167,7 +175,7 @@ export default {
     display: flex;
     height: 480px;
 
-    :deep( .el-tree ){
+    .el-tree {
       background: transparent;
 
       .el-tree-node__content {
@@ -279,5 +287,4 @@ export default {
   :deep(.overHide) {
     overflow: hidden;
   }
-}
 </style>