gdy_qywx_pc/src/views/workbench/grade/award_punish.vue

<template>
  <div class="box">
    <el-tabs v-model="tabs" type="card">
      <el-tab-pane label="奖扣成功" name="success"></el-tab-pane>
      <el-tab-pane label="待审批" name="waiting"></el-tab-pane>
      <el-tab-pane label="被驳回" name="refuse"></el-tab-pane>
    </el-tabs>
    <el-row style="margin-bottom: 15px;">
      <el-col :span="12">
        <el-button type="primary" @click="point_b">奖扣B分</el-button>
        <el-button type="primary" @click="point_a" plain>奖扣A分</el-button>
      </el-col>
      <el-col :span="6" :offset="6">
        <el-input v-model="keyword" placeholder="输入同事姓名/内容" @keyup.enter.native="getData">
          <el-button slot="append" @click="getData" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-table v-if="tabs == 'success'" :data="dataList" stripe fit v-loading="table_loading" @row-click="open_detail">
      <el-table-column label="姓名" prop="employee_id" align="left">
        <template slot-scope="scope">
          <div class="flex-box flex-contet-conter">
            <userImage :id="scope.row.employee_id" :user_name="scope.row.employee_name" width="50px" height="50px"></userImage>
            <span style="margin-left: 10px; line-height: 50px;">
              <WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" show-overflow-tooltip label="奖扣内容"></el-table-column>
      <el-table-column prop="point" label="积分" width="120">
        <template slot-scope="scope">
          <span :class="{ color_green: scope.row.point > 0, color_red: scope.row.point < 0 }">
            <span v-show="scope.row.point > 0">+</span>
            {{ scope.row.point }} {{ $getTypsName(scope.row.pt_id) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="奖扣时间" width="150">
        <template slot-scope="scope">
          {{ cuttString(scope.row.create_time) }}
        </template>
      </el-table-column>

      <template slot="empty">
        <noData></noData>
      </template>
    </el-table>

    <el-table v-if="tabs !== 'success'" :data="dataList" stripe fit v-loading="table_loading" @row-click="open_detail1">
      <el-table-column label="姓名" prop="employee_id" align="left">
        <template slot-scope="scope">
          <div class="flex-box flex-contet-conter">
            <userImage :id="scope.row.employee_id" :user_name="scope.row.employee_name" width="50px" height="50px"></userImage>
            <span style="margin-left: 10px; line-height: 50px;">
              <WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" show-overflow-tooltip label="奖扣内容">
        <template slot-scope="scope">
          {{ scope.row.remark.customize }}
        </template>
      </el-table-column>
      <el-table-column prop="event_time" label="奖扣时间" width="150"></el-table-column>

      <template slot="empty">
        <noData></noData>
      </template>
    </el-table>

    <center style="margin-top: 15px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.page"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :page-size="pageLimit"
        :total="formData.total"
      ></el-pagination>
    </center>

    <el-drawer title="奖扣详情" :visible.sync="drawer" ref="drawer" :with-header="false" :size="'600px'" direction="rtl">
      <div class="drawer_title">奖扣详情</div>
      <div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
        <el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
          <el-col :span="24">
            <!-- <userImage :img_url="detail_info.employee_info.img_url"  :user_name="detail_info.employee_info.name" class="fl" width="50px" height="50px" fontSize="15"></userImage> -->
            <userImage
              :id="detail_info.employee_id"
              :user_name="detail_info.employee_name"
              :img_url="detail_info.img_url"
              class="fl"
              width="50px"
              height="50px"
              fontSize="15"
            ></userImage>
            <span style="line-height:50px; margin-left:10px;margin-right:4px;">
              <WWOpenData type="userName" :openid="detail_info.employee_name"></WWOpenData>
            </span>
            <span class="color_green point" v-show="detail_info.point >= 0 && detail_info.point">+{{ detail_info.point }} {{$getTypsName(detail_info.pt_id)}}</span>
            <span class="color_red point" v-show="detail_info.point < 0 && detail_info.point">{{ detail_info.point }} {{$getTypsName(detail_info.pt_id)}}</span>
            <!-- <span v-show="detail_info.point">{{detailPt_id(detail_info.pt_id)}}</span> -->
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="4" style="margin-bottom:5px;">任务描述</el-col>
          <el-col :span="20" v-if="detail_info.remark">{{ detail_info.remark && (detail_info.remark.customize || detail_info.remark.rule) }}</el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="4" style="margin-bottom:5px;">规则分类</el-col>
          <el-col :span="20">{{ detail_info.rule_list }}</el-col>
        </el-row>

        <el-row :gutter="10" v-show="detail_info.rule_list">
          <el-col :span="4" style="margin-bottom:5px;">发生时间</el-col>
          <el-col :span="20">{{ detail_info.date }}</el-col>
        </el-row>

        <el-row :gutter="10" v-show="detail_info.source_type_mark">
          <el-col :span="4" style="margin-bottom:5px;">来源类型</el-col>
          <el-col :span="20">{{ detail_info.source_type_mark }}</el-col>
        </el-row>

        <el-row :gutter="10" v-show="!detail_info.rule_id">
          <el-col :span="4" style="margin-bottom:5px;">记录人</el-col>
          <el-col :span="20">{{ detail_info.employee_name }}</el-col>
        </el-row>

        <el-row :gutter="10" :v-if="detail_info.files">
          <el-col v-for="(item, index) in detail_info.files" :key="index" :span="4">{{ index == 0 ? '图片' : '' }}</el-col>
          <el-col :span="20">
            <el-image
              v-for="(item, index) in detail_info.files"
              :key="index"
              style="width: 100px; height: 100px;margin-right:8px"
              :src="item"
              :preview-src-list="detail_info.files"
            ></el-image>
          </el-col>
        </el-row>

        <div v-show="detail_info.rule_item_id">
          <p class="row_title">规则依据</p>
          <el-row :gutter="10">
            <el-col :span="4" style="margin-bottom:5px;">规则分类</el-col>
            <el-col :span="19">{{ detail_info.rule_list }}</el-col>
          </el-row>
          <el-row v-if="detail_info.remark && detail_info.remark.rule">
            <el-col :span="4" style="margin-bottom:5px;">积分规则</el-col>
            <el-col :span="19">{{ detail_info.remark.rule }}</el-col>
          </el-row>
          <el-row v-if="detail_info.rule_item">
            <el-col :span="4" style="margin-bottom:5px;">积分</el-col>
            <el-col :span="19" v-show="detail_info.rule_item.min_point == detail_info.rule_item.max_point">{{ detail_info.rule_item.min_point }} {{$getTypsName(detail_info.pt_id)}}</el-col>
            <el-col :span="19" v-show="detail_info.rule_item.min_point != detail_info.rule_item.max_point">
              {{ detail_info.rule_item.min_point }} ~ {{ detail_info.rule_item.max_point }} {{$getTypsName(detail_info.pt_id)}}
            </el-col>
          </el-row>
        </div>

        <div v-show="detail_info.rule_id && detail_info.process !== null && detail_info.process.length > 0">
        	<Steps :process="detail_info.process"></Steps>
        </div>
        <div class="btn_danger flex-box flex-center-center" v-if="detail_info.process.length==1&&(detail_info.event_type==3||detail_info.event_type==4)">
          <el-button type="danger" class="danger" @click="revocation" :loading="cx_loading">撤销</el-button>
        </div>
      </div>
    </el-drawer>

    <el-drawer title="奖扣详情" :visible.sync="detailShow" :with-header="false" :size="'600px'" direction="rtl">
      <div class="drawer_title">奖扣详情</div>
      <div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
        <el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
          <el-col :span="24">
            <userImage
              :user_name="detail_info.employee_info.name"
              :img_url="detail_info.employee_info.img_url"
              class="fl"
              width="50px"
              height="50px"
              fontSize="15"
            ></userImage>
            <span style="line-height:50px; margin-left:10px;margin-right:4px;"><WWOpenData type="userName" :openid="detail_info.employee_info.name"></WWOpenData></span>
            <span class="color_green point" v-show="detail_info.point >= 0 && detail_info.point">+{{ detail_info.point }} {{$getTypsName(detail_info.pt_id)}}</span>
            <span class="color_red point" v-show="detail_info.point < 0 && detail_info.point">{{ detail_info.point }} {{$getTypsName(detail_info.pt_id)}}</span>
            <!-- <span v-show="detail_info.point">{{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}</span> -->
          </el-col>
        </el-row>

        <el-row :gutter="10" v-show="detail_info.source_type_mark">
          <el-col :span="4" style="margin-bottom:5px;">来源类型</el-col>
          <el-col :span="20">{{ detail_info.source_type_mark }}</el-col>
        </el-row>

        <el-row :gutter="10" v-for="(item, index) in detail_info.detail" :key="index">
          <el-col :span="4" style="margin-bottom:5px;">{{ item.key }}</el-col>
          <el-col :span="20" v-if="item.key == '附件'">
            <el-image v-for="(val, indexs) in item.value" :key="indexs" style="width: 100px; height: 100px;margin-right:8px;" :src="val" :preview-src-list="item.value"></el-image>
          </el-col>
          <el-col :span="20" v-else-if="item.key == '收益人'">
            <WWOpenData type="userName" :openid="item.value"></WWOpenData>
			</el-col>
          <el-col :span="20" v-else-if="item.key == '奖扣目标'">
            <WWOpenData type="userName" :openid="item.value"></WWOpenData>
					</el-col>
          <el-col :span="20" v-else-if="item.key == '申请人'">
            <WWOpenData type="userName" :openid="item.value"></WWOpenData>
					</el-col>
          <el-col :span="20" v-else>{{ item.value }}</el-col>
        </el-row>

        <el-row :gutter="10" :v-if="detail_info.files">
          <el-col v-for="(item, index) in detail_info.files" :key="index" :span="4">{{ index == 0 ? '图片' : '' }}</el-col>
          <el-col :span="20">
            <el-image
              v-for="(item, index) in detail_info.files"
              :key="index"
              style="width: 100px; height: 100px;margin-right:8px;"
              :src="item"
              :preview-src-list="detail_info.files"
            ></el-image>
          </el-col>
        </el-row>

        <div v-show="detail_info.process !== null && detail_info.process.length > 0">
        	<Steps :process="detail_info.process"></Steps>
        </div>
       <!-- <div class="btn_danger flex-box flex-center-center" v-if="detail_info.applyor_id==$userInfo().id&&detail_info.status==0&&detail_info.source_type==3"> -->
       <div class="btn_danger flex-box flex-center-center" v-if="detail_info.applyor_id==$userInfo().id&&detail_info.can_refuse == '1'&&(detail_info.source_type==2||detail_info.source_type==3)">
          <el-button type="danger" class="danger" @click="revocation2" :loading="cx_loading">撤销</el-button>
        </div>
      </div>
    </el-drawer>

    <bonusPointsPopup :title="popuTitle" :visible.sync="popupVisible" :refresh.sync="refreshData" :integralType.sync="integralType"></bonusPointsPopup>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import moment from 'moment';
import noData from '@/components/noData';
import Steps from '@/components/Steps.vue';
import bonusPointsPopup from '@/views/common/bonusPointsPopup';

export default {
  data() {
    return {
      refreshData: '',
      popuTitle: '奖扣A分',
      popupVisible: false,
      integralType: 0,
      table_loading: true,
      formData: {
        page: 1,
        page_size: 10,
        total: 0
      },
      tabs: 'success',
      dataList: [],
      pageLimit: 10,
      keyword: '',
      rule_list: [],
      drawer: false,
      detail_loading: false,
      detail_info: {
        employee_info:{
          img_url:'',
          name:''
        },
        process:[]
      },
      detailShow: false,
      employee_name: this.$getEmployeeMap(),

      userId:'',
      cx_loading:false,
      selectId:'',//打开详情ID
    };
  },
  components: {
    bonusPointsPopup,
    noData,
    Steps
  },
  mounted() {
    if (this.$route.query.type == 1) {
      this.point_a();
    } else if (this.$route.query.type == 2) {
      this.point_b();
    }
    this.getData();
  },
  watch: {
    tabs(val) {
      this.dataList = [];
      this.formData.total = 0;
      this.keyword = '';
      this.formData.page = 1;
      this.formData.page_size = 10;
      this.getData();
    },
    refreshData(val) {
      this.getData();
    }
  },
  methods: {
    // 撤销待审批
    revocation2(){
    	var that=this;
    	this.$confirm('撤销此项数据将不可恢复，是否撤销?', '提示', {
    		  confirmButtonText: '确定',
    		  cancelButtonText: '取消',
    		  type: 'warning'
    		}).then(() => {
    			let data = {
    				review_id: that.selectId,
    			};
    			that.cx_loading = true;
    			that.$http('DELETE', '/api/integral/review', data).then(res => {
    				if (res.data.code == 1) {
    					that.getData()
    				} else {
    					that.$message.error(res.data.data.msg);
    				}
    			}).finally(() => {
    				that.detailShow = false;
    				that.cx_loading = false;
    			});
    		})
    },
    // 撤销奖扣
    revocation(){
    	var that=this;
    	this.$confirm('撤销此项数据将不可恢复，是否撤销?', '提示', {
    		  confirmButtonText: '确定',
    		  cancelButtonText: '取消',
    		  type: 'warning'
    		}).then(() => {
    			let data = {
    				target_id: that.selectId,
    				type:1
    			};
    			that.cx_loading = true;
    			that.$http('post', '/api/integral/review/prize/destroy', data).then(res => {
    				if (res.data.code == 1) {
    					that.getData()
    				} else {
    					that.$message.error(res.data.data.msg);
    				}
    			}).finally(() => {
    				that.cx_loading = false;
    				that.drawer = false;
    			});
    		})
    },
    getEmployeeName(id) {
      for (const key in this.employee_name) {
        if (this.employee_name[key].id == id) {
          return this.employee_name[key].name;
        }
      }
    },
    open_detail1(item) {
      let self = this;
      self.detailShow = true;
      let data = {
        review_id: item.id
      };
      this.selectId=item.id
      self.detail_loading = true;
      this.$http('get', '/api/integral/review', data)
        .then(res => {
          if (res.data.code == 1) {
            self.detail_info = res.data.data;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.detail_loading = false;
        });
    },
    open_detail(item) {
      let self = this;
      self.drawer = true;
      let data = {
        event_id: item.id
      };
      this.selectId=item.id
      self.detail_loading = true;
      this.$http('get', '/api/integral/statistics/integral/info', data)
        .then(res => {
          if (res.data.code == 1) {
            self.detail_info = res.data.data;
            self.detail_info.employee_info={}
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.detail_loading = false;
        });
    },

    cuttString(data) {
      if(data){
        return data.substring(0, 10);
      }
    },
    point_a() {
      this.integralType = 2;
      this.popuTitle = '奖扣A分';
      this.popupVisible = true;
    },
    point_b() {
      this.integralType = 3;
      this.popuTitle = '奖扣B分';
      this.popupVisible = true;
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageLimit = val;
      this.formData.page_size = this.pageLimit;
      this.getData();
    },
    getData() {
      let self = this;
      self.table_loading = true;

      let data = {};
      if (self.tabs == 'success') {
        data = {
          page: self.formData.page,
          page_size: self.formData.page_size,
          recorder_id: self.$store.getters.user_info.id,
          source_type: '1',
          keyword: self.keyword
        };
      } else if (self.tabs == 'waiting') {
        data = {
          page: self.formData.page,
          page_size: self.formData.page_size,
          keyword: self.keyword,
          pt_id: '0',
          type: 'waiting'
        };
      } else {
        data = {
          page: self.formData.page,
          page_size: self.formData.page_size,
          keyword: self.keyword,
          pt_id: '0',
          type: 'refuse'
        };
      }
      this.$http('get', self.tabs == 'success' ? '/api/integral/statistics/integral' : '/api/integral/review/entry/list', data)
        .then(res => {
          if (res.data.code == 1) {
            self.dataList = res.data.data.list;
            self.formData.total = res.data.data.total;
          }
        })
        .finally(() => {
          this.table_loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
}
.color_green {
  color: #4bd964;
}
.color_red {
  color: #f56c6c;
}
.detail_popup {
  padding: 20px;
  height: calc(100vh - 60px);
  overflow: auto;
  .row_title {
    position: relative;
    margin: 0 0 20px 0;
    padding-top: 12px;
    font-size: 16px;
    color: #303133;
    line-height: 22px;
  }
  .row_title:before {
    position: absolute;
    top: 0;
    content: ' ';
    width: 100%;
    border-top: 1px #f8f8f8 solid;
  }
  .el-row {
    margin-bottom: 10px;
    font-size: 14px;
    .el-col-4 {
      color: #606266;
    }
  }
}
.drawer_title {
  font-size: 18px;
  padding: 20px;
  border-bottom: 1px #efefef solid;
}
/deep/ .el-table tr:hover {
  cursor: pointer;
}
</style>