gdy_qywx_pc/src/views/workbench/grade/award_punish_BF.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}} {{point_name(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"
      :modal-append-to-body="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 :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_red point" v-show="detail_info.point >= 0 && detail_info.point"> +{{detail_info.point}} {{ $getTypsName(detail_info.pt_id) }}</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 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">
          <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.process != false">
          <p class="row_title">审批<span class="row_tips">多人审批时，以最后一人为准</span></p>
          <div class="examine_steps">
            <el-steps direction="vertical" :space="50">
              <el-step v-for="(item,index) in detail_info.process" :key="index">
                <template slot="icon">
                  <userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
                </template>
                <template slot="title">
                  <div style="color: #303133;font-size:14px;margin-top:-2px;"><WWOpenData type="userName" :openid="item.name"></WWOpenData> {{item.remark}}
                    <!-- <span v-show="item.point !== 0">{{item.point}}</span> -->
                   </div>
                </template>
                <template slot="description"><div style="color:rgb(130 130 130)">{{item.time}}</div></template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </div>
    </el-drawer>

    <el-drawer
      title="奖扣详情"
      :visible.sync="detailShow"
      :with-header="false"
      :modal-append-to-body="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" v-if="detail_info.employee_info">
            <userImage :id="detail_info.applyor_id" :img_url="detail_info.employee_info.img_url" :user_name="detail_info.employee_info.name"  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_red point" v-show="detail_info.point >= 0 && detail_info.point"> +{{detail_info.point}}  {{ $getTypsName(detail_info.pt_id) }}</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 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.rule_id && detail_info.process !== null && detail_info.process.length > 0">
          <p class="row_title">审批<span class="row_tips">多人审批时，以最后一人为准</span></p>

          <div class="examine_steps">
            <el-steps direction="vertical" :space="50">
              <el-step v-for="(item,index) in detail_info.process" :key="index">
                <template slot="icon">
                  <userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
                </template>
                <template slot="title">
                  <div style="color: #303133;font-size:14px;margin-top:-2px;"><WWOpenData type="userName" :openid="item.name"></WWOpenData> {{item.remark}}
                    <!-- <span v-show="item.point !== 0">{{item.point}}</span> -->
                  </div>
                </template>
                <template slot="description" style=""><div style="color:rgb(130 130 130)">{{item.time}}</div></template>
              </el-step>
            </el-steps>
          </div>
        </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 EmployeeSelector from '@/views/common/EmployeeSelector'
  import moment from 'moment'
  import noData from '@/components/noData'
  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:'',
        point_types: JSON.parse(localStorage.getItem('SET_POINT_TYPES')),
        showTitle: false,
        dialogVisible: false,
        dialogData:{
          members: [],
          items: [{
            rule_switch: false,
            rule_id: '',
            item_id: '',
            point: '0',
            remark: '',
            event_time: moment().format('YYYY-MM-DD'),
            approval: '',
            approval_not_select: [],
            approval_selected: {dept: [],employee:[]},
            plus: true,
            pt_id: '',
            reviewer_id: '',
            files: [],
          }],
        },
        itemData: {},
        rules:{
          manager:[{required: true, message: '请选择录入对象', trigger: 'blur'}],
        },
        manager: '',
        employee_not_select: [],
        manager_selected: {dept: [],employee:[]},
        show_employee_selector: false,

        show_approval_selector: false,
        itemIndex: 0,
        rule_list: [],
        rule_list_value: null,

        rule_item_list: {},
        rule_item_list_value: null,

        drawer: false,
        detail_loading: false,
        detail_info: {},
        detailShow: false,

        employee_name: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
        fileList:[]
      }
    },
    components: {
      EmployeeSelector,
      bonusPointsPopup,
      noData
    },
    mounted() {
      if(this.$route.query.type == 1){
        this.point_a()
      }else if(this.$route.query.type == 2){
        this.point_b()
      }
      this.getData()
      // this.getRuleData()
    },
    watch:{
      tabs(val){
        this.dataList = []
        this.formData.total = 0
        this.keyword = ''
        this.formData.page = 1
        this.formData.page_size = 10
        this.getData()
      },
      rule_list_value(val){
        if(val.length == 0){

        }else{
          // val[val.length-1]
        }
      },
      refreshData(val){
        this.getData()
      }
      // itemData:{
      //   handler(val, oldVal) {
      //     this.dialogData.items.forEach((element,index) => {
      //       if (this.itemIndex === val.num) {
      //         this.dialogData.items[val.num] = val
      //       }
      //     });
      //   },
      //   deep: true
      // }
    },
    methods: {
      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
        }
        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
        }
        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
          }else{
            self.$message.error(res.data.data.msg)
          }
        }).finally(() => {
          self.detail_loading = false
        })
      },

      cuttString(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
      },
      point_name(id){
        return this.point_types.find((item)=>{if (item.id == id) {return item}}).name
      },
      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
					}
				}).catch(e => {self.$message.error(e.data.msg)}).finally(() => {this.table_loading = false})
      },
      // getRuleData(){
      //   let self = this
      //   let data = {
      //     cycle_type: '1'
      //   }
      //   this.$http('get','/api/integral/rule/trees',data).then(res => {
			// 		if (res.data.code == 1) {
      //       const resultData = res.data.data
      //       self.rule_list = resultData.rule_tree
      //       self.rule_item_list = resultData.item_list
      //     }
      //     self.rule_list = self.getTreeData(self.rule_list)
			// 	}).catch(e => {self.$message.error(e)}).finally(() => {this.table_loading = false})
      // },
      // // 递归判断列表，把最后的child设为undefined
      // getTreeData(data) {
      //   for (var i = 0; i < data.length; i++) {
      //     if (data[i].child.length < 1) {
      //       // child若为空数组，则将child设为undefined
      //       data[i].child = undefined;
      //     } else {
      //       // child若不为空数组，则继续 递归调用 本方法
      //       this.getTreeData(data[i].child);
      //     }
      //   }
      //   return data;
      // },
    }
  }
</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>