添加积分规则

project/sanjianxi/apps/AppScoreRules/AppScoreRules.vue

@@ -6,6 +6,7 @@
       </template>
       <template slot="content">
         <ai-search-bar bottomBorder>
+
           <template slot="left">
             <el-cascader size="small" v-model="search.eventType" placeholder="请选择事件/类型" clearable
                          :props="{...etOps,checkStrictly:true}" @change="handleTypeSearch" ref="eventTypeSearch"/>
@@ -16,14 +17,20 @@
                 :selectList="dict.getDict('integralRuleStatus')">
             </ai-select>
           </template>
+
           <template slot="right">
           </template>
+
         </ai-search-bar>
+
         <ai-search-bar style="margin-top: 16px;">
+
           <template #left>
             <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
           </template>
+
         </ai-search-bar>
+
         <ai-table
             :tableData="tableData"
             :col-configs="colConfigs"
@@ -53,55 +60,103 @@
             </template>
           </el-table-column>
         </ai-table>
+
       </template>
     </ai-list>
+
     <ai-empty v-else>暂无应用权限</ai-empty>
-    <ai-dialog :title="dialogTitle" :visible.sync="dialog" @onConfirm="onConfirm" @closed="form={ladderRule: []}" width="700px">
+
+    <ai-dialog :title="dialogTitle" :visible.sync="dialog" @onConfirm="onConfirm" @closed="form={ladderRule: []}" width="800px">
       <div class="form_div">
         <el-form ref="DialogForm" :model="form" :rules="formRules" size="small" label-suffix="：" label-width="100px">
-          <el-form-item label="事件/类型" prop="eventType">
+          <!-- <el-form-item label="事件/类型" prop="eventType">
             <el-cascader v-model="form.eventType" :props="etOps" clearable placeholder="请选择" @change="handleTypeForm"
                          :options="cacheOps"/>
+          </el-form-item> -->
+          <el-form-item label="事件名称" prop="eventType">
+            <el-input v-model="form.name" clearable placeholder="请输入事件名称" type="text" maxlength="30" show-word-limit/>
           </el-form-item>
-          <el-form-item label="规则" prop="ruleType" v-if="form.ruleType>-1" required>
+          <el-form-item label="简介说明" prop="eventType">
-            <el-row type="flex" justify="space-between">
+            <el-input v-model="form.name" clearable placeholder="请输入简介说明" type="text" maxlength="100" show-word-limit/>
-              <div v-text="dict.getLabel('integralRuleRuleType',form.ruleType)"/>
+          </el-form-item>
-              <el-button v-if="form.ruleType==1" type="text" icon="iconfont iconAdd"
+
-                         @click="form.ladderRule.push({viewCount:null,integral:null})">添加
+          <el-form-item label="规则" prop="ruleType" required>
-              </el-button>
+            <el-radio-group v-model="form.pass" @change="typeChange">
-            </el-row>
+              <el-radio label="0">常规</el-radio>
-            <el-table v-if="form.ruleType==1" :data="form.ladderRule" size="mini" border stripe>
+              <el-radio label="1">区间</el-radio>
-              <el-table-column label="查看人数(人)" align="center">
+              <el-radio label="2">阶梯</el-radio>
-                <template slot-scope="{row}">
+            </el-radio-group>
-                  <el-input class="tableInput" v-model.number="row.viewCount" clearable placeholder="请输入"/>
-                </template>
-              </el-table-column>
-              <el-table-column label="获得积分(分)" align="center">
-                <template slot-scope="{row}">
-                  <el-input class="tableInput" v-model="row.integral" clearable placeholder="请输入" type="number"
-                            @keyup.native="row.integral=checkIntegral(row.integral)"/>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center">
-                <template slot-scope="{row,$index}">
-                  <el-button type="text" @click="handleDelete($index)">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
           </el-form-item>
           <el-form-item label="周期范围" prop="scoringCycle">
             <ai-select v-model="form.scoringCycle" :selectList="dict.getDict('integralRuleScoringCycle')"/>
           </el-form-item>
-          <template v-if="form.ruleType==0">
+
-            <el-form-item label="奖励次数" prop="numberLimit">
+          <el-form-item label="奖励次数">
             <el-input placeholder="请输入,周期范围内,不填写表示不限制" v-model.number="form.numberLimit" clearable/>
           </el-form-item>
-            <el-form-item label="积分分值" prop="integral">
+
+          <el-form-item label="积分分值" prop="integral" v-if="form.pass == 0">
             <el-input placeholder="请输入" v-model="form.integral" clearable/>
           </el-form-item>
-          </template>
+
+          <el-form-item label="积分分值" prop="integral" v-if="form.pass == 1">
+            <div class="flex">
+              <div class="from">
+                <el-input
+                  ref="input_from"
+                  v-model="integralFrom"
+                  placeholder="最小值"
+                  @input="handleInputFrom"
+                ></el-input>
+              </div>
+              <div class="center">
+                <span>至</span>
+              </div>
+              <div class="to">
+                <el-input
+                  ref="input_to"
+                  v-model="integralTo"
+                  placeholder="最大值"
+                  @input="handleInputTo"
+                ></el-input>
+              </div>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="积分分值" prop="integral" v-if="form.pass == 2">
+            <el-button type="text" @click="innerVisible  = true" style="float: right;">添加</el-button>
+            <ai-table :tableData="integralData" :isShowPagination="false" :col-configs="integralConfigs" :dict="dict">
+                     <!--  @selection-change="v=>ids=v.filter(e=>e.sysUserId).map(e=>e.sysUserId)" -->
+              <el-table-column slot="options" align="center" label="操作" fixed="right" width="160px">
+                <el-row type="flex" justify="center" align="middle" slot-scope="{row}">
+                  <el-button v-if="$permissions('admin_sysuser_distribute')&&!!row.sysUserId"
+                            type="text" @click="appAllot(row)">删除
+                  </el-button>
+                </el-row>
+              </el-table-column>
+            </ai-table>
+          </el-form-item>
+
+          <el-dialog width="30%" title="添加积分分值" :visible.sync="innerVisible" append-to-body>
+            <el-form ref="DialogForm" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="100px">
+              <el-form-item label="加分项" prop="integral">
+                <el-input placeholder="请输入" v-model="form.integral" clearable/>
+              </el-form-item>
+              <el-form-item label="获得积分" prop="integral">
+                <el-input placeholder="请输入" v-model="form.integral" clearable/>
+              </el-form-item>
+            </el-form>
+
+            <div slot="footer" class="dialog-footer">
+              <el-button @click="innerVisible = false">取 消</el-button>
+              <el-button type="primary" @click="innerVisible = false">提交</el-button>
+            </div>
+          </el-dialog>
         </el-form>
       </div>
+
+      
+
     </ai-dialog>
   </section>
 </template>
@@ -152,6 +207,11 @@ export default {
         {prop: "status", label: "状态", align: "center", width: 96, dict: "integralRuleStatus"},
         {slot: "options", label: "操作", align: "center"},
       ],
+      integralConfigs: [
+        {prop: "event", label: "加分项", dict: "integralRuleEvent"},
+        {prop: "event", label: "获得积分", dict: "integralRuleEvent"},
+        {slot: "options", label: "操作", align: "center"},
+      ],
       tableData: [],
       dialog: false,
       form: {ladderRule: []},
@@ -161,7 +221,12 @@ export default {
         integral: [{required: true, pattern: /^\d*[.\d]\d?$/, message: "请输入积分分值,最多保留一位小数"}],
         numberLimit: [{pattern: /^\d*$/, message: "请输入正整数"}]
       },
-      cacheOps: []
+      cacheOps: [],
+      integralFrom: '',
+      integralTo: '',
+      integralData: [],
+      innerVisible: false,
+      forms: {},
     };
   },
   created() {
@@ -198,6 +263,19 @@ export default {
         })
       })
     },
+
+    typeChange() {
+      this.form.integral = ''
+    },
+
+    handleInputFrom(event) {
+      this.$emit('focusfrom', event)
+    },
+
+    handleInputTo(event) {
+      this.$emit('blurto', event)
+    },
+
     remove(id) {
       this.$confirm("删除后不可恢复，是否要删除该事项？", {
         type: 'error'
@@ -299,5 +377,38 @@ export default {
       }
     }
   }
+
+
+  ::v-deep .el-input--mini .el-input__inner {
+    border: 0px;
+    margin: 0;
+    padding: 0 15px;
+    background-color: transparent;
+  }
+  .input-number-range {
+    background-color: #fff;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
+
+  .flex {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    // justify-content: space-between;
+    align-items: center;
+
+    .center {
+      margin: 0 20px;
+      margin-top: 1px;
+    }
+  }
+  .is-disabled {
+    background-color: #eef0f6;
+    border-color: #e4e7ed;
+    color: #c0c4cc;
+    cursor: not-allowed;
+  }
+
 }
 </style>