epmet-oper-gov/src/views/modules/communityParty/heart/heartAudit.vue

<template>
  <div class="dialog-h-content scroll-h">
    <div class="div_table">
      <el-button size="small"
                 class="diy-button--add"
                 @click="handleReject">审核拒绝</el-button>
      <el-button size="small"
                 class="diy-button--add"
                 @click="handleAudit('passed')">审核通过</el-button>

      <el-table class="table"
                :data="tableData"
                border
                @selection-change="selectionChange"
                :height="tableHeight"
                v-loading="tableLoading"
                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
                style="width: 100%">
        <el-table-column type="selection"
                         :selectable="checkSelect"
                         width="55">
        </el-table-column>
        <el-table-column label="序号"
                         header-align="center"
                         align="center"
                         type="index"
                         width="50">
        </el-table-column>

        <el-table-column prop="realName"
                         header-align="center"
                         align="center"
                         label="姓名"
                         :show-overflow-tooltip="true"
                         width="150">

        </el-table-column>
        <el-table-column prop="mobile"
                         header-align="center"
                         align="center"
                         label="手机"
                         min-width="120">

        </el-table-column>

        <el-table-column prop="idNum"
                         header-align="center"
                         align="center"
                         label="身份证"
                         min-width="180">

        </el-table-column>
        <el-table-column prop="nickName"
                         header-align="center"
                         align="center"
                         label="昵称"
                         :show-overflow-tooltip="true"
                         width="120">

        </el-table-column>
        <el-table-column prop="signUpActNum"
                         header-align="center"
                         align="center"
                         label="报名活动个数"
                         width="120">

        </el-table-column>
        <el-table-column prop="signInActNum"
                         header-align="center"
                         align="center"
                         label="实际参加活动个数"
                         width="140">

        </el-table-column>
        <el-table-column prop="obtainPointsActNum"
                         header-align="center"
                         align="center"
                         label="获得积分活动个数"
                         width="140">

        </el-table-column>
        <el-table-column prop="signUpTime"
                         header-align="center"
                         align="center"
                         label="报名时间"
                         width="180">

        </el-table-column>
        <el-table-column prop="statusShow"
                         header-align="center"
                         align="center"
                         label="状态"
                         width="120">

        </el-table-column>

      </el-table>

    </div>

    <!-- 拒绝理由 -->

    <el-dialog :visible.sync="cancleShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :append-to-body="true"
               :title="'拒绝理由'"
               width="550px"
               top="5vh"
               class="dialog-h"
               @closed="cancleDiaClose">
      <div style="padding:30px">

        <el-input class="item_width_5"
                  type="textarea"
                  maxlength="100"
                  show-word-limit
                  :rows="4"
                  placeholder="请输入拒绝理由"
                  v-model="cancelReason"></el-input>
        <div style="display:flex;  justify-content: center;margin-top:20px">
          <el-button style="margin-left:30px"
                     size="small"
                     class="diy-button--search"
                     @click="cancleDiaClose">取消</el-button>
          <el-button style="margin-left:10px"
                     size="small"
                     class="diy-button--reset"
                     @click="handleAudit('refused')">确定</el-button>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

let loading // 加载动画
export default {
  data () {
    return {
      tableLoading: false,
      actId: '',
      tableData: [],
      actUserRelationIdList: [],

      auditList: [],

      cancelReason: '',
      cancleShow: false,//拒绝审核

    }
  },
  components: {},
  mounted () {

  },

  methods: {

    async initTable (actId) {
      this.actId = actId
      await this.loadTable()

    },

    checkSelect (row, index) {
      //待审核：auditing；已通过：passed；已拒绝：refused；已取消：canceled
      let isChecked = false;
      if (row.status === 'auditing') { // 判断里面是否存在某个参数
        isChecked = true
      } else {
        isChecked = false
      }
      return isChecked
    },

    selectionChange (selection) {
      this.actUserRelationIdList = []
      this.actUserRelationIdList = selection

    },

    //加载form
    async loadTable () {
      this.tableLoading = true
      const url = '/heart/work/actuser/userlist'
      // const url = 'http://yapi.elinkservice.cn/mock/245/heart/work/actuser/userlist'
      let params = {
        actId: this.actId
      }

      const { data, code, msg } = await requestPost(url, params)
      this.tableLoading = false
      if (code === 0) {

        if (data.list && data.list.length > 0) {
          data.list.forEach(item => {
            //待审核：auditing；已通过：passed；已拒绝：refused；已取消：canceled
            if (item.status === 'auditing') {
              item.statusShow = '待审核'
            } else if (item.status === 'passed') {
              item.statusShow = '已通过'
            } else if (item.status === 'refused') {
              item.statusShow = '已拒绝'
            } else if (item.status === 'canceled') {
              item.statusShow = '已取消'
            } else {
              item.statusShow = ''
            }

          });

          this.tableData = [...data.list]
        } else {
          this.tableData = []
        }

      } else {
        this.$message.error(msg)
      }
    },

    handleReject () {
      if (this.actUserRelationIdList.length === 0) {
        this.$message({
          type: "info",
          message: "请选择人员"
        });
        return false
      }
      this.cancleShow = true

    },

    async handleAudit (type) {
      if (this.actUserRelationIdList.length === 0) {
        this.$message({
          type: "info",
          message: "请选择人员"
        });
        return false
      }
      if (type === 'refused' && !this.cancelReason) {
        this.$message({
          type: "info",
          message: "请填写拒绝理由"
        });
        return false
      }

      this.auditList = []
      this.actUserRelationIdList.forEach(item => {
        let obj = {
          type: type,
          actUserRelationId: item.actUserRelationId,
          rejectReason: this.cancelReason
        }

        this.auditList.push(obj)
      });
      const url = "/heart/work/actuser/audit-user"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/work/actuser/audit-user"

      let params = [...this.auditList]

      console.log(params)

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.cancelReason = ''
        this.cancleShow = false
        this.loadTable()
      } else {
        this.$message.error(msg)
      }
    },

    cancleDiaClose () {
      this.cancelReason = ''
      this.cancleShow = false//审核拒绝
    },

    handleCancle () {
      this.$emit('dialogCancle')

    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    tableHeight () {

      return (this.clientHeight - 360)

    },

    ...mapGetters(['clientHeight'])

  },
  props: {

  }
}
</script>


<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";
.item_width_1 {
  width: 250px;
}
.item_width_2 {
  width: 100px;
}
.div_table {
  margin-top: 10px;

  .table {
    margin-top: 10px;
  }
}
.div_btn {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>