党员积分导入按钮

packages/conv/creditScore/scoreRules/AppScoreRules.vue

@@ -1,27 +1,17 @@
 <template>
   <section class="AppScoreRules">
-    <ai-list v-if="$permissions('app_appvillagerintegralrule_detail')">
+    <ai-list v-if="permissions('app_appvillagerintegralrule_detail')">
       <template slot="title">
         <ai-title title="积分规则" isShowBottomBorder></ai-title>
       </template>
       <template slot="content">
         <ai-search-bar bottomBorder>
           <template slot="left">
-            <ai-select
-                v-model="search.classification"
-                @change="search.current = 1, getList()"
-                placeholder="请选择分类"
-                :selectList="dict.getDict('atWillReportType')">
-            </ai-select>
-            <ai-select
-                v-model="search.integralType"
-                @change="search.current = 1, getList()"
-                placeholder="请选择类型"
-                :selectList="dict.getDict('integralIntegralType')">
-            </ai-select>
+            <el-cascader size="small" v-model="search.eventType" placeholder="请选择事件/类型" clearable
+                         :props="{...etOps,checkStrictly:true}" @change="handleTypeSearch" ref="eventTypeSearch"/>
             <ai-select
                 v-model="search.ruleStatus"
-                @change="search.current = 1, getList()"
+                @change="page.current = 1, getList()"
                 placeholder="请选择状态"
                 :selectList="dict.getDict('integralRuleStatus')">
             </ai-select>
@@ -31,15 +21,15 @@
         </ai-search-bar>
         <ai-search-bar style="margin-top: 16px;">
           <template #left>
-            <el-button type="primary" icon="iconfont iconAdd" @click="addRule">添加</el-button>
+            <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
           </template>
         </ai-search-bar>
         <ai-table
             :tableData="tableData"
             :col-configs="colConfigs"
-            :total="total" :dict="dict"
-            :current.sync="search.current"
-            :size.sync="search.size"
+            :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 }">
@@ -53,92 +43,63 @@
           <el-table-column slot="options" label="操作" align="center" fixed="right" width="200">
             <template slot-scope="{ row }">
               <div class="table-options">
-                <el-button type="text" :disabled="!$permissions('app_appvillagerintegralrule_edit')" @click="changeStatus(row.id, 0)"
-                           v-if="row.ruleStatus == 1">停用
+                <el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_edit')" @click="changeStatus(row.id, 0)" v-if="row.ruleStatus == 1">
+                  停用
                 </el-button>
-                <el-button type="text" :disabled="!$permissions('app_appvillagerintegralrule_edit')" @click="changeStatus(row.id, 1)" v-else>启用</el-button>
-                <el-button type="text" :disabled="!$permissions('app_appvillagerintegralrule_edit')" @click="toEdit(row)">编辑</el-button>
-                <el-button type="text" :disabled="!$permissions('app_appvillagerintegralrule_del')" @click="remove(row.id)">删除</el-button>
+                <el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_edit')" @click="changeStatus(row.id, 1)" v-else>启用</el-button>
+                <el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_edit')" @click="toEdit(row)">编辑</el-button>
+                <el-button type="text" :disabled="!permissions('app_appvillagerintegralrule_del')" @click="remove(row.id)">删除</el-button>
               </div>
             </template>
           </el-table-column>
         </ai-table>
       </template>
     </ai-list>
-
-    <ai-dialog
-        :title="dialog.title"
-        :visible.sync="dialog.visible"
-        :customFooter="true"
-        :destroyOnClose="true"
-        @close="init('ruleForm')"
-        width="520px">
+    <ai-empty v-else>暂无应用权限</ai-empty>
+    <ai-dialog :title="dialogTitle" :visible.sync="dialog" @onConfirm="onConfirm" @closed="form={ladderRule: []}" width="700px">
       <div class="form_div">
-        <el-form
-            ref="ruleForm"
-            :model="dialogInfo"
-            :rules="formRules"
-            size="small"
-            label-suffix="："
-            label-width="100px">
-          <el-form-item label="类别" prop="classification">
-            <ai-select
-                size="small"
-                v-model="dialogInfo.classification"
-                placeholder="请选择..."
-                :selectList="dict.getDict('atWillReportType')">
-            </ai-select>
+        <el-form ref="DialogForm" :model="form" :rules="formRules" size="small" label-suffix="：" label-width="100px">
+          <el-form-item label="事件/类型" prop="eventType">
+            <el-cascader v-model="form.eventType" :props="etOps" clearable placeholder="请选择" @change="handleTypeForm"/>
           </el-form-item>
-          <el-form-item label="事项" prop="ruleName">
-            <el-input placeholder="请输入…" maxlength="30" show-word-limit v-model="dialogInfo.ruleName"></el-input>
+          <el-form-item label="规则" prop="ruleType" v-if="form.ruleType>-1">
+            <el-row type="flex" justify="space-between">
+              <div v-text="dict.getLabel('integralRuleRuleType',form.ruleType)"/>
+              <el-button v-if="form.ruleType==1" type="text" icon="iconfont iconAdd"
+                         @click="form.ladderRule.push({viewCount:null,integral:null})">添加
+              </el-button>
+            </el-row>
+            <el-table v-if="form.ruleType==1" :data="form.ladderRule" size="mini" border stripe>
+              <el-table-column label="查看人数(人)" align="center">
+                <template slot-scope="{row}">
+                  <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.number="row.integral" clearable placeholder="请输入"/>
+                </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="ruleDescription">
-            <el-input
-                type="textarea"
-                :rows="3"
-                maxlength="500"
-                show-word-limit
-                placeholder="请输入…"
-                v-model="dialogInfo.ruleDescription">
-            </el-input>
+          <el-form-item label="周期范围" prop="scoringCycle">
+            <ai-select v-model="form.scoringCycle" :selectList="dict.getDict('integralRuleScoringCycle')"/>
           </el-form-item>
-          <el-form-item label="类型" prop="integralType">
-            <el-radio-group v-model="dialogInfo.integralType">
-              <el-radio label="1">加分</el-radio>
-              <el-radio label="0">扣分</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <!-- <el-form-item label="分值" prop="integralValueType">
-            <el-radio-group v-model="dialogInfo.integralValueType" @change="numTypeChange">
-              <el-radio label="0">固定分值</el-radio>
-              <el-radio label="1">区间分值</el-radio>
-            </el-radio-group>
-          </el-form-item> -->
-          <!-- <el-form-item label="积分" required v-if="dialogInfo.integralValueType == '1'">
-            <el-col :span="7" style="width: 30%;">
-              <el-form-item prop="integralStart">
-                <el-input placeholder="请输入整数" v-model="dialogInfo.integralStart"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col class="line" :span="1" style="width: 4%;text-align:center;">-</el-col>
-            <el-col :span="7" style="width: 30%;">
-              <el-form-item prop="integralEnd">
-                <el-input placeholder="请输入整数" v-model="dialogInfo.integralEnd"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col class="line" :span="9" style="width: 36%;"></el-col>
-          </el-form-item> -->
-          <el-form-item label="积分" required v-if="dialogInfo.integralValueType == '0'">
-            <el-form-item prop="integral">
-              <el-input placeholder="请输入自然数" v-model="dialogInfo.integral"></el-input>
+          <template v-if="form.ruleType==0">
+            <el-form-item label="奖励次数" prop="numberLimit">
+              <el-input placeholder="请输入,周期范围内,不填写表示不限制" v-model="form.numberLimit" clearable/>
             </el-form-item>
-          </el-form-item>
+            <el-form-item label="积分分值">
+              <el-input placeholder="请输入自然数" v-model="form.integral" clearable/>
+            </el-form-item>
+          </template>
         </el-form>
       </div>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="dialog.visible=false" size="medium">取消</el-button>
-        <el-button @click="onConfirm('ruleForm')" type="primary" size="medium">确认</el-button>
-      </div>
     </ai-dialog>
   </section>
 </template>
@@ -150,8 +111,33 @@ export default {
   props: {
     instance: Function,
     dict: Object,
+    permissions: Function
+  },
+  computed: {
+    isEdit() {
+      return !!this.form.id
+    },
+    dialogTitle() {
+      return this.isEdit ? "编辑积分规则" : "添加积分规则"
+    },
+    etOps() {
+      return {
+        lazy: true,
+        value: "dictValue",
+        label: "dictName",
+        lazyLoad: (node, resolve) => {
+          if (node.level == 0) resolve(this.dict.getDict('integralRuleEvent'))
+          else if (node.level == 1) {
+            let dict = 'integralRuleEvent' + node.value
+            this.dict.load(dict).then(() => {
+              let nodes = this.dict.getDict(dict).map(e => ({...e, leaf: true}))
+              resolve(nodes)
+            })
+          }
+        }
+      }
+    },
   },
-
   data() {
     var integralPass = (rule, value, callback) => {
       if (value) {
@@ -164,116 +150,47 @@ export default {
         callback(new Error("请输入积分"));
       }
     };
-    var integralStartPass = (rule, value, callback) => {
-      if (value) {
-        if ((/(^[1-9]\d*$)/.test(value))) {
-          callback();
-        } else {
-          callback(new Error("请输入整数积分"));
-        }
-      } else {
-        callback(new Error("请输入积分"));
-      }
-    };
-    var integralEndPass = (rule, value, callback) => {
-      if (value) {
-        if ((/(^[1-9]\d*$)/.test(value))) {
-          if (Number(value) < Number(this.dialogInfo.integralStart)) {
-            callback(new Error("请输入大于前面数字的积分"));
-          } else {
-            callback()
-          }
-        } else {
-          callback(new Error("请输入整数积分"));
-        }
-      } else {
-        callback(new Error("请输入积分"));
-      }
-    };
     return {
-      search: {
-        current: 1,
-        size: 10,
-        classification: "",
-        integralType: "",
-        ruleStatus: "",
-      },
-      total: 10,
+      search: {status: "", eventType: null},
+      page: {current: 1, size: 10, total: 0},
       colConfigs: [
-        {prop: "classification", label: "类型", width: 168, dict: "atWillReportType"},
-        {prop: "ruleName", label: "事项", showOverflowTooltip: true, width: 260},
-        {prop: "ruleDescription", label: "规则说明", width: 390},
-        {prop: "integralType", label: "类型", width: 60, dict: "integralIntegralType"},
-        {slot: "integral", label: "分值", width: 70},
-        {prop: "doTime", label: "最后编辑时间", width: 160},
-        {prop: "doUserName", label: "操作人", width: 120},
-        {prop: "ruleStatus", label: "状态", align: "center", width: 96, dict: "integralRuleStatus", fixed: "right"},
+        {prop: "event", label: "事件", dict: "integralRuleEvent"},
+        {prop: "type", label: "类型", dict: "integralRuleEventType"},
+        {prop: "ruleType", label: "规则", dict: "integralRuleRuleType"},
+        {slot: "scoringCycle", label: "周期范围", dict: "integralRuleScoringCycle"},
+        {prop: "status", label: "状态", align: "center", width: 96, dict: "integralRuleStatus"},
         {slot: "options", label: "操作", align: "center"},
       ],
       tableData: [],
-
-      dialog: {
-        title: "",
-        visible: false,
-      },
-      dialogInfo: {
-        classification: "",
-        ruleName: "",
-        ruleDescription: "",
-        integralType: '1',
-        integralValueType: '0',
-        integral: "",
-        // integralStart: "",
-        // integralEnd: "",
-        doTime: '',
-        id: '',
-        doUserId: '',
-        doUserName: '',
-      },
+      dialog: false,
+      form: {ladderRule: []},
       formRules: {
-        classification: [{required: true, message: "请选择类型", trigger: "change"}],
-        ruleName: [{required: true, message: "请输入事项", trigger: "blur"}],
-        ruleDescription: [{required: true, message: "请输入规则说明", trigger: "blur"}],
-        integralType: [{required: true, message: "请选择类型", trigger: "change"}],
-        integralValueType: [{required: true, message: "请选择分值类型", trigger: "change"}],
+        eventType: [{required: true, message: "请选择事件/类型", trigger: "change"}],
         integral: [{required: true, validator: integralPass, trigger: "change"}],
-        integralStart: [{required: true, validator: integralStartPass, trigger: "change"}],
-        integralEnd: [{required: true, validator: integralEndPass, trigger: "change"}],
       },
     };
   },
-
   created() {
-    this.dict.load(["integralIntegralType", "integralRuleStatus", 'atWillReportType']).then(() => {
+    this.dict.load("integralRuleStatus", "integralRuleRuleType", 'integralRuleScoringCycle', 'integralRuleEvent', 'integralRuleEventType').then(() => {
       this.getList();
     });
   },
-
   methods: {
     getList() {
-      this.instance
-      .post(`/app/appvillagerintegralrule/list`, null, {
-        params: {
-          ...this.search,
-        },
-      })
-      .then((res) => {
-        if (res.code == 0) {
+      this.instance.post(`/app/appvillagerintegralrule/list`, null, {
+        params: {...this.search, ...this.page},
+      }).then(res => {
+        if (res?.data) {
           this.tableData = res.data.records;
-          this.total = res.data.total;
+          this.page.total = res.data.total;
         }
       });
     },
-
     toEdit(row) {
-      this.dialog.title = "编辑积分规则";
-      this.dialog.visible = true;
-      this.dialogInfo = {...row}
-      this.dialogInfo.integralStart = Math.abs(this.dialogInfo.integralStart)
-      this.dialogInfo.integralEnd = Math.abs(this.dialogInfo.integralEnd)
-      this.dialogInfo.integral = Math.abs(this.dialogInfo.integral)
+      this.dialog = true;
+      this.form = this.$copy(row)
+      this.form.ladderRule = JSON.parse(this.formRules.ladderRule)
     },
-
     remove(id) {
       this.$confirm("删除后不可恢复，是否要删除该事项？", {
         type: 'error'
@@ -288,7 +205,6 @@ export default {
         });
       });
     },
-
     changeStatus(id, status) {
       var text = status == 1 ? '启用' : '停用'
       this.$confirm(`确定${text}该条规则？`).then(() => {
@@ -302,36 +218,23 @@ export default {
         });
       });
     },
-
     onReset() {
-      this.search.current = 1
+      this.page.current = 1
       this.search.classification = ""
       this.search.integralType = ""
       this.search.ruleStatus = ""
       this.getList();
     },
-
-    onAdd() {
-      this.$emit("change", {
-        type: "add",
-      });
-    },
-
-    addRule() {
-      this.dialog.title = "添加积分规则";
-      this.dialog.visible = true;
-    },
-
-    onConfirm(formName) {
-      this.$refs[formName].validate((valid) => {
+    onConfirm() {
+      this.$refs.DialogForm.validate((valid) => {
         if (valid) {
-          this.instance
-          .post(`/app/appvillagerintegralrule/addOrUpdate`, this.dialogInfo)
-          .then((res) => {
+          let formData = this.$copy(this.form)
+          formData.ladderRule = JSON.stringify(formData.ladderRule)
+          this.instance.post(`/app/appvillagerintegralrule/addOrUpdate`, formData).then((res) => {
             if (res.code == 0) {
-              this.$message.success(`${this.dialogInfo.id ? '编辑成功' : '添加成功'}`)
+              this.$message.success(`${this.isEdit ? '编辑成功' : '添加成功'}`)
               this.onReset()
-              this.onCancel();
+              this.dialog = false;
             }
           });
         } else {
@@ -339,43 +242,50 @@ export default {
         }
       });
     },
-
-    onCancel() {
-      this.dialog.visible = false;
+    handleTypeSearch(v) {
+      this.search.event = v?.[0]
+      this.search.type = v?.[1]
+      this.page.current = 1
+      this.$refs.eventTypeSearch.dropDownVisible = false
+      this.getList()
     },
-
-    numTypeChange() {
-      // this.dialogInfo.integra = "";
-      // this.dialogInfo.integralStart = "";
-      // this.dialogInfo.integralEnd = "";
-    },
-
-    init() {
-      this.dialogInfo = {integralType: '1', integralValueType: '0'}
+    handleTypeForm(v) {
+      if (this.dialog) {
+        this.form.event = v?.[0]
+        this.form.type = v?.[1]
+        this.form.ruleType = !this.form.event ? null : this.form.event == 3 ? 1 : 0
+      }
     },
+    handleDelete(i) {
+      this.$confirm("是否要删除该规则?").then(() => {
+        this.form.ladderRule.splice(i, 1)
+      }).catch(() => 0)
+    }
   },
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .AppScoreRules {
   height: 100%;
   background: #f3f6f9;
 
-  .cur-p {
-    cursor: pointer;
-  }
-
   ::v-deep .ai-list__content--right {
     width: 100%;
   }
 
-  .status-0 {
-    color: #ff4466;
-  }
+  ::v-deep .ai-dialog {
+    .el-cascader {
+      width: 100%;
+    }
 
-  .status-1 {
-    color: #2ea222;
+    .tableInput {
+      & > input {
+        text-align: center;
+        border: none;
+        background: transparent;
+      }
+    }
   }
 }
 </style>