积分管理-积分规则设置

6 years ago · 1306cba1a4
2 changed files with 709 additions and 0 deletions
--- a/src/views/modules/points/pointsrule-add-or-update.vue
+++ b/src/views/modules/points/pointsrule-add-or-update.vue
@ -0,0 +1,333 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '130px'"
+    >
+      <el-form-item label="规则描述" prop="ruleDesc">
+        <el-input v-model="dataForm.ruleDesc" placeholder="规则描述"></el-input>
+      </el-form-item>
+      <el-form-item label="规则编码" prop="ruleCode">
+        <el-input v-model="dataForm.ruleCode" placeholder="规则编码" :disabled="dataForm.id"></el-input>
+      </el-form-item>
+      <el-form-item label="积分行为" prop="behaviorCode">
+        <el-select v-model="dataForm.behaviorCode" @change="changeBehaviorCode"
+            placeholder="积分行为" :disabled="dataForm.id">
+            <el-option
+              v-for="item in behaviorTypeList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="积分行为描述" prop="behaviorDesc">
+        <el-input :disabled="false"
+          v-model="dataForm.behaviorDesc"
+          placeholder="积分行为描述"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="积分值" prop="points">
+        <el-input-number v-model="dataForm.points" :min="0" ></el-input-number>
+      </el-form-item>
+      <el-form-item label="规则操作类型" prop="operationType">
+        <el-select v-model="dataForm.operationType" placeholder="规则操作类型">
+            <el-option
+              v-for="item in operationTypeList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="可用标记" prop="available" v-if="dataForm.id">
+        <el-select v-model="dataForm.available" placeholder="可用标记">
+            <el-option
+              v-for="item in availableList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有上限限制" prop="upperLimitFlag">
+        <el-select v-model="dataForm.upperLimitFlag" placeholder="是否有上限限制" @change="changeUpperLimitFlag">
+            <el-option
+              v-for="item in upperLimitFlagList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="限制时限" prop="limitTimeType" v-if="dataForm.upperLimitFlag ==='1'">
+        <el-select v-model="dataForm.limitTimeType" placeholder="限制时限">
+            <el-option
+              v-for="item in limitTimeTypeList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="积分上限值" prop="upperLimitVal" v-if="dataForm.upperLimitFlag ==='1'">
+        <el-input-number v-model="dataForm.upperLimitVal" :min="0" ></el-input-number>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t("confirm")
+      }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        ruleCode: '',
+        ruleDesc: '',
+        points: '',
+        operationType: '',
+        available: '',
+        behaviorCode: '',
+        behaviorDesc: '',
+        upperLimitFlag: '',
+        limitTimeType: '',
+        upperLimitVal: '',
+        delFlag: '',
+        revision: '',
+        createdBy: '',
+        createdTime: '',
+        updatedBy: '',
+        updatedTime: ''
+      },
+      operationTypeList: [],
+      availableList: [],
+      limitTimeTypeList: [],
+      upperLimitFlagList: [],
+      behaviorTypeList: []
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        ruleCode: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        ruleDesc: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        points: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        operationType: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        available: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        behaviorCode: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        behaviorDesc: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        upperLimitFlag: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        limitTimeType: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        upperLimitVal: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+      this.getAvailableList()
+      this.getLimitTimeTypeList()
+      this.getUpperLimitFlagList()
+      this.getOperationTypeList()
+      this.getBehaviorTypeList()
+    },
+    // 获取信息
+    getInfo () {
+      this.$http
+        .get(`/points/pointsrule/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data
+          }
+        })
+        .catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs['dataForm'].validate(valid => {
+          if (!valid) {
+            return false
+          }
+          this.$http[!this.dataForm.id ? 'post' : 'put'](
+            '/points/pointsrule/',
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+            .catch(() => {})
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 获取下拉框值
+    getOperationTypeList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_operation_type`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.operationTypeList = res.data
+        })
+        .catch(() => {})
+    },
+    getAvailableList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_available`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.availableList = res.data
+        })
+        .catch(() => {})
+    },
+    getLimitTimeTypeList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_limit_time_type`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.limitTimeTypeList = res.data
+        })
+        .catch(() => {})
+    },
+    getUpperLimitFlagList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_limit_flag`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.upperLimitFlagList = res.data
+        })
+        .catch(() => {})
+    },
+    getBehaviorTypeList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_behavior`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.behaviorTypeList = res.data
+        })
+        .catch(() => {})
+    },
+    changeUpperLimitFlag () {
+      this.dataForm.limitTimeType = ''
+      this.dataForm.upperLimitVal = ''
+    },
+    changeBehaviorCode () {
+      if (this.dataForm.behaviorCode) {
+        let dict = this.behaviorTypeList.filter(item => item.dictValue === this.dataForm.behaviorCode)[0]
+        if (dict) {
+          this.dataForm.behaviorDesc = dict.remark
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/views/modules/points/pointsrule.vue
+++ b/src/views/modules/points/pointsrule.vue
@ -0,0 +1,376 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-points__pointsrule}">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+      <el-form-item label="规则编码">
+          <el-input v-model="dataForm.ruleCode"  clearable></el-input>
+        </el-form-item>
+        <el-form-item label="规则描述">
+          <el-input v-model="dataForm.ruleDesc"  clearable></el-input>
+        </el-form-item>
+        <el-form-item label="规则操作类型">
+        <el-select v-model="dataForm.operationType" placeholder="全部" clearable>
+            <el-option
+              v-for="item in operationTypeList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="可用标记">
+        <el-select v-model="dataForm.available" placeholder="全部" clearable>
+            <el-option
+              v-for="item in availableList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有上限限制">
+        <el-select v-model="dataForm.upperLimitFlag" placeholder="全部" clearable>
+            <el-option
+              v-for="item in upperLimitFlagList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+      <div class="block">
+        <el-form-item label="积分行为类别">
+        <el-select v-model="dataForm.behaviorCode" placeholder="全部" clearable>
+            <el-option
+              v-for="item in behaviorTypeList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+        <el-form-item label="积分行为描述">
+          <el-input v-model="dataForm.behaviorDesc" clearable></el-input>
+        </el-form-item>
+          <span class="demonstration">创建时间</span>&nbsp;&nbsp;
+          <el-date-picker @change='setRegistTime' v-model="time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>&nbsp;
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('points:pointsrule:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+            >{{ $t("add") }}</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('points:pointsrule:delete')"
+            type="danger"
+            @click="deleteHandle()"
+            >{{ $t("deleteBatch") }}</el-button
+          >
+        </el-form-item>
+        </div>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column type="index" width="50" label="序号"></el-table-column>
+        <el-table-column
+          prop="id"
+          label="主键"
+          header-align="center"
+          align="center"
+          v-if="false"
+        ></el-table-column>
+        <el-table-column
+          prop="ruleDesc"
+          label="规则描述"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="ruleCode"
+          label="规则编码"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="points"
+          label="积分值"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="operationType"
+          label="规则操作类型"
+          header-align="center"
+          align="center"
+          :formatter="showOperationTypeFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="behaviorCode"
+          label="积分行为"
+          header-align="center"
+          align="center"
+          :formatter="showBehaviorCodeFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="behaviorDesc"
+          label="积分行为描述"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="upperLimitFlag"
+          label="是否有上限限制"
+          header-align="center"
+          align="center"
+          :formatter="showUpperLimitFlagFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="limitTimeType"
+          label="限制时限"
+          header-align="center"
+          align="center"
+          :formatter="showLimitTimeTypeFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="upperLimitVal"
+          label="积分上限值"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="available"
+          label="是否可用"
+          header-align="center"
+          align="center"
+          :formatter="showAvailableFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="createdTime"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="updatedTime"
+          label="更新时间"
+          header-align="center"
+          align="center"
+          v-if="false"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="$hasPermission('points:pointsrule:update')"
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+              >{{ $t("update") }}</el-button
+            >
+            <el-button
+              v-if="$hasPermission('points:pointsrule:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+              >{{ $t("delete") }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      >
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './pointsrule-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/points/pointsrule/page',
+        getDataListIsPage: true,
+        deleteURL: '/points/pointsrule',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        ruleCode: '',
+        ruleDesc: '',
+        operationType: '',
+        available: '',
+        upperLimitFlag: '',
+        behaviorCode: '',
+        behaviorDesc: '',
+        startTime: '',
+        endTime: ''
+      },
+      time: '',
+      operationTypeList: [],
+      availableList: [],
+      limitTimeTypeList: [],
+      upperLimitFlagList: [],
+      behaviorTypeList: []
+    }
+  },
+  created () {
+    this.getAvailableList()
+    this.getLimitTimeTypeList()
+    this.getUpperLimitFlagList()
+    this.getOperationTypeList()
+    this.getBehaviorTypeList()
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    setRegistTime () {
+      this.dataForm.startTime = this.time[0]
+      this.dataForm.endTime = this.time[1]
+    },
+    // 获取下拉框值
+    getOperationTypeList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_operation_type`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.operationTypeList = res.data
+        })
+        .catch(() => {})
+    },
+    showOperationTypeFormatter: function (row, column) {
+      if (row.operationType) {
+        let dict = this.operationTypeList.filter(item => item.dictValue === row.operationType)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    },
+    getAvailableList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_available`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.availableList = res.data
+        })
+        .catch(() => {})
+    },
+    showAvailableFormatter: function (row, column) {
+      if (row.available) {
+        let dict = this.availableList.filter(item => item.dictValue === row.available)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    },
+    getLimitTimeTypeList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_limit_time_type`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.limitTimeTypeList = res.data
+        })
+        .catch(() => {})
+    },
+    showLimitTimeTypeFormatter: function (row, column) {
+      if (row.limitTimeType) {
+        let dict = this.limitTimeTypeList.filter(item => item.dictValue === row.limitTimeType)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    },
+    getUpperLimitFlagList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_limit_flag`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.upperLimitFlagList = res.data
+        })
+        .catch(() => {})
+    },
+    showUpperLimitFlagFormatter: function (row, column) {
+      if (row.upperLimitFlag) {
+        let dict = this.upperLimitFlagList.filter(item => item.dictValue === row.upperLimitFlag)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    },
+    getBehaviorTypeList () {
+      this.$http
+        .get(`/sys/dict/listSimple/pointsrule_behavior`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.behaviorTypeList = res.data
+        })
+        .catch(() => {})
+    },
+    showBehaviorCodeFormatter: function (row, column) {
+      if (row.behaviorCode) {
+        let dict = this.behaviorTypeList.filter(item => item.dictValue === row.behaviorCode)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    }
+  }
+}
+</script>