gdy_qywx_m/src/components/pk/pk_rules.vue

<template>
  <div style="height: 100%">
    <div class="pk_rules_scroller">
      <scroller>
        <div style="padding: 0 0.32rem">
          <van-panel class="rule_list" v-for="(item,index) in rules_list " :key="index" :title="item.name">
            <div class="rule_btn" v-if="hasPermission && pkStatus !== 'end'">
              <van-button color="#238dfa" type="primary" @click="edit_rule_btn(item)" size="mini">修改</van-button>
              <van-button type="danger" @click="del_rule(get_id,item)" size="mini">删除</van-button>
            </div>
          </van-panel>
        </div>
        <noData :list="rules_list"></noData>
      </scroller>
    </div>
    <div style="padding: 0 0.32rem;" v-if="hasPermission && pkStatus !== 'end'">
      <van-button type="info" block @click="add_rule_btn">新增规则</van-button>
    </div>
    <template v-else>
      <div style="padding: 0 0.32rem;" v-for="(item, index) in pk_info.manager_ids" :key="index">
        <van-button v-if="$store.getters.user_info.id == item && pkStatus !== 'end'" type="info" block
          @click="add_rule_btn">新增规则</van-button>
      </div>
    </template>


    <!-- 添加规则弹窗 -->
    <van-dialog class="pk_rule" v-model="show_Rule" :closeOnClickOverlay="false" :beforeClose="colseRules"
      show-cancel-button>
      <van-cell-group>
        <van-field v-model="popup_rules_input" rows="2" autosize label="规则" label-width="40" type="textarea"
          maxlength="50" placeholder="请填写规则+积分值，以便成员阅读" />
      </van-cell-group>
    </van-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import { Panel, Dialog } from 'vant'
Vue.use(Panel).use(Dialog)
export default {
  props: {
    get_id: {
      type: String,
      default: '',
    },
    get_page: {
      type: Number,
      default: 1
    },
    pkStatus: {
      type: String,
      default: '',
    },
    createInfo: {
      type: Object,
      default: {}
    }
  },
  // 数据
  data() {
    return {
      show: false,
      rules_list: null,
      show_Rule: false,
      popup_rules_input: '',
      popup_rules_id: '',
      rules_type: 'add',
      pk_info: {},

    }
  },
  name: "pk_rules",
  computed: {
    hasPermission() {
      const { createInfo } = this;
      const { is_creator, id } = this.$store.getters.user_info
      return is_creator == 1 || id == createInfo.creatorId || createInfo.manages.has(id.toString())
    }
  },
  // 方法
  methods: {

    // 规则弹出显示
    showPopup() {
      this.show = true;
    },
    // 查询规则列表
    get_rules_list(id, page) {
      let self = this
      self.showLoading()
      request('get','/api/integral/pk/rules',{ pk_id: id, page: page,page_size:1000 }).then((res) => {
        if (res.data.code == '1') {
          self.$toast.clear()
          self.rules_list = res.data.data.list.list
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    //删除规则
    del_rule(id, d) {
      let self = this
      Dialog.confirm({
        title: '提示',
        message: '确定删除此项?'
      }).then(() => {
        self.showLoading()
        request('delete','/api/integral/pk/rules',{ pk_id: id, rule_id: d.id }).then((res) => {
          if (res.data.code == 1) {
            self.$toast.clear()
            self.$toast(res.data.msg)
            self.get_rules_list(self.get_id, self.get_page)
          } else {
            self.$toast.clear()
            self.$toast(res.data.msg)
          }
        }).catch((e) => {
          self.$toast.clear()
        })
      }).catch(() => {
        // on cancel
      });
    },
    // 关闭 rule_popup
    colseRules(action, done) {
      let self = this
      if (action == 'confirm') {
        if (self.popup_rules_input) {
          if (self.rules_type == 'edit') {
            self.edit_rule()
          } else {
            self.add_rule(self.get_id)
          }
          done()
        } else {
          self.$notify({ type: 'danger', message: '规则不能为空' });
          done(false)
        }
      } else {
        done()
      }
    },
    // 编辑规则按钮
    edit_rule_btn(item) {
      this.show_Rule = true
      this.rules_type = 'edit'
      this.popup_rules_input = item.name
      this.popup_rules_id = item.id
    },
    // 新增规则按钮
    add_rule_btn() {
      this.show_Rule = true
      this.rules_type = 'add'
      this.popup_rules_input = ''
      this.popup_rules_id = ''
    },
    // 创建规则
    add_rule(pk_id) {
      let self = this
      self.showLoading()
      request('post','/api/integral/pk/rules/create',{ pk_id: pk_id, rule_name: self.popup_rules_input }).then((res) => {
        if (res.data.code == 1) {
          self.$toast.clear()
          self.get_rules_list(self.get_id, self.get_page)
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
        self.$toast(res.data.msg)
      })
    },
    // 编辑规则
    edit_rule() {
      let self = this
      self.showLoading()
      request('post','/api/integral/pk/rules',{ pk_id: self.get_id, rule_id: self.popup_rules_id, rule_name: self.popup_rules_input }).then((res) => {
        if (res.data.code == 1) {
          self.$toast.clear()
          self.get_rules_list(self.get_id, self.get_page)
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
        self.$toast(res.data.msg)
      })
    },
    // 加载
    showLoading() {
      this.$toast.loading({
        loadingType: "spinner",
        message: '正在处理'
      })
    },
    get_pk_info() {
      let self = this
      let data = {
        pk_id: self.$route.query.id
      }
      request('get','/api/integral/pk/info',data).then((res) => {
        if (res.data.code == 1) {
          self.pk_info = res.data.data || {}
        } else {
          self.$toast(res.data.msg)
        }
      })
    }
  },
  // 生命周期 --- 创建完成
  created() {
    // created 创建完毕状态
    this.get_rules_list(this.get_id, this.get_page)
    this.get_pk_info()
  },
};
</script>
<style scoped>
.read_pk_box .rule_alert {
  position: relative;
  width: calc(100vw - 0.64rem);
  margin: 0.2rem auto 0;
}
.read_pk_box /deep/ .van-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh !important;
  background: rgba(255, 255, 255, 0.7);
}
.pk_rules_scroller {
  position: relative;
  height: calc(100% - 1.1rem);
}
</style>