dvcp_v2_webapp/project/qianxinan/AppIntegralRule/AppIntegralRule.vue

<template>
  <section class="AppIntegralRule">
    <ai-list>
      <template slot="content">
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.category" @change="(page.current = 1), getList()" placeholder="请选择事件" :selectList="$dict.getDict('srCategory')">
            </ai-select>
            <ai-select v-model="search.type" @change="(page.current = 1), getList()" placeholder="请选择类型" :selectList="$dict.getDict('srType')">
            </ai-select>
            <ai-select v-model="search.status" @change="(page.current = 1), getList()" placeholder="请选择状态" :selectList="$dict.getDict('srStatus')">
            </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()">
          <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 }}
              </span> -->
              <span>{{ row.integral > 0 ? "+" : "" }}{{ row.integral }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作" align="center" fixed="right" width="200">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" @click="changeStatus(row.id)" v-if="row.status == 1">停用</el-button>
                <el-button type="text" @click="changeStatus(row.id)" v-else>启用</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <!-- <ai-empty v-else>暂无应用权限</ai-empty> -->
  </section>
</template>

<script>
export default {
  name: "AppIntegralRule",
  label: "积分规则(黔西南)",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    var validcode = (rule, value, callback) => {
      if (value) {
        if (value != 0) {
          if (!/^([+-]?([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/.test(value)) {
            callback(new Error('请输入积分分值，可输入正数、负数、最多保留两位小数'))
          } else {
            callback();
          }
        } else {
          callback(new Error('请输入有效的积分分值'));
        }
      } else {
        callback(new Error('请输入积分分值'));
      }
    }
    return {
      search: {
        status: '',
        category: '',
        type: '',
      },
      page: {current: 1, size: 10, total: 0},
      colConfigs: [
        {
          prop: "type",
          label: "类型",
          dict: "srType",
        },
        {prop: "category", label: "事件", dict: "srCategory"},
        {prop: "score", label: "规则"},
        {
          prop: "cycle",
          label: "周期范围",
          dict: "srCycle",
        },
        // {slot: "integral", label: "积分分值", align: "center"},
        // {
        //   prop: "validRangeType",
        //   label: "有效范围",
        //   formart: (v) => (v == 0 ? "全局" : "指定网格"),
        // },
        {
          prop: "status",
          label: "状态",
          align: "center",
          width: 96,
          dict: "srStatus",
        },
        {slot: "options", label: "操作", align: "center"},
      ],
      tableData: [],
    };
  },
  created() {
    this.$dict.load('srStatus', 'srCategory', 'srType').then(() => {
      this.getList();
    });
  },
  methods: {
    getList() {
      this.instance
      .post(`/app/appscorerule/list`, null, {
        params: {
          ...this.search,
          ...this.page,
        },
      })
      .then((res) => {
        if (res?.data) {
          this.tableData = res.data.records;
          this.page.total = res.data.total;
        }
      });
    },
    changeStatus(id, status) {
      let text = status == 1 ? "启用" : "停用";
      this.$confirm(`确定${text}该条规则？`).then(() => {
        this.instance.post(`/app/appscorerule/enable?id=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success(`${text}成功！`);
            this.getList();
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.AppIntegralRule {
  height: 100%;
  background: #f3f6f9;

  :deep( .ai-list__content--right ){
    width: 100%;
  }

  // :deep( .searchRightZone ){
  //   display: flex;
  // }

  :deep( .ai-dialog ){
    .el-cascader {
      width: 100%;
    }

    .tableInput {
      & > input {
        text-align: center;
        border: none;
        background: transparent;
      }
    }
  }
}
</style>