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="160">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" @click="changeStatus(row.id, row.status)" v-if="row.status == 1">停用</el-button>
                <el-button type="text" @click="changeStatus(row.id, row.status)" v-else>启用</el-button>
                <el-button type="text" @click="set(row)" v-if="row.type == 11 || row.type == 12 || row.type == 13 ">配置</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="配置成员" :visible.sync="dialog" :destroyOnClose="true" customFooter width="720px">
      <ai-wrapper label-width="120px" v-if="!isSetEdit">
        <ai-info-item label="成员" isLine>
          <span v-for="(item, index) in chooseUserList" :key="index">
            <span>{{item.name}}</span>
            <span v-if="index < chooseUserList.length-1">,</span>
          </span>
        </ai-info-item>
      </ai-wrapper>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-else>
        <el-form-item label="选择人员">
          <ai-user-selecter v-model="chooseUserList" :instance="instance" :isMultiple="true" :props="{label: 'name', id: 'sysUserId'}"></ai-user-selecter>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="isSetEdit=true"  v-if="!isSetEdit">编辑</el-button>
        <el-button type="primary" @click="setConfirm" v-else>保存</el-button>
      </template>
    </ai-dialog>
    <!-- <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", width: 220},
        {prop: "category", label: "事件", dict: "srCategory", align: "center", width: 200},
        {prop: "remark", label: "规则"},
        {prop: "cycle", label: "周期范围", dict: "srCycle", align: "center", width: 100},
        {prop: "status", label: "状态", align: "center", width: 100, dict: "srStatus",
          render: (h, {row}) => {
            return h('span', {style: {color: this.dict.getColor('srStatus', row.status)}}, this.dict.getLabel('srStatus', row.status))
          }
        },
        {slot: "options", label: "操作", align: "center", width: 100},
      ],
      tableData: [],
      dialog: false,
      setInfo: {},
      isSetEdit: false,
      chooseUserList: [],
      personList: []
    };
  },
  created() {
    this.$dict.load('srStatus', 'srCategory', 'srType', 'srCycle').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();
          }
        });
      });
    },
    set(row) {
      this.chooseUserList = []
      this.isSetEdit = false
      this.instance.post(`/app/appscorerule/queryDetailById?id=${row.id}`).then((res) => {
        if (res?.data) {
          if(res.data.massSendingConfigs && res.data.massSendingConfigs.length) {
            res.data.massSendingConfigs.map((item) => {
              item.id = item.wxUserId
            })
            this.chooseUserList = res.data.massSendingConfigs
          }
        }
      });
      this.dialog = true
      this.setInfo = {...row}
    },

    setConfirm() {
      if(!this.chooseUserList.length) {
        return this.$message.error("请选择成员!")
      }
      this.chooseUserList.map((item) => {
        item.wxUserId = item.id
      })
      var params = {
        id: this.setInfo.id,
        massSendingConfigs: this.chooseUserList,
      }
      this.instance.post(`/app/appscorerule/editMassSendingConfig`, params).then((res) => {
        if (res.code == 0) {
          this.dialog = false
          this.$message.success(`配置成功！`);
          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>