gdy_qywx_m/src/components/integral/approval_detail.vue

<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header" :class="{ can_complete: detail_info.can_complete == 1, can_complete_isIos: can_complete_isIos }">
      <scroller style="height: 100vh;">
        <!-- 审批内容 -->
        <!-- detail_info.process.length > 0 &&  -->
        <van-cell-group>
          <van-cell :title="detail_info.employee_info.name" v-if="detail_info.process !== null && detail_info.status == 0">
            <template slot="icon">
              <userImage
                :user_name="detail_info.employee_info.name"
                :img_url="detail_info.employee_info.img_url"
                width="0.9rem"
                height="0.9rem"
                style="margin-right: .1rem"
              ></userImage>
            </template>
            <template slot="title">
              <Wxopendata type="userName" :openid="detail_info.employee_info.name"></Wxopendata>
            </template>
            <template slot="label">
              <span v-show="detail_info.review_status == 0" :class="{ color_orange: detail_info.review_status == 0 }">{{ detail_info.review_status_mark }}</span>
              <span v-show="detail_info.review_status == 1" :class="{ color_red: detail_info.review_status == 1 }">{{ detail_info.review_status_mark }}</span>
              <span v-show="detail_info.review_status == 2" :class="{ color_green: detail_info.review_status == 2 }">{{ detail_info.review_status_mark }}</span>
            </template>
          </van-cell>
        </van-cell-group>
        <!-- 当审批状态不为待审批时 -->
        <div class="flex-box-v flex-center-center event-info__header" v-if="detail_info.status != 0 && detail_info.process !== null" style="padding:0.32rem;background-color:#fff;">
          <userImage class="about-me__avatar" :user_name="detail_info.employee_info.name" :img_url="detail_info.employee_info.img_url" width="1.12rem" height="1.12rem"></userImage>
          <span class="event-employee__name"><Wxopendata type="userName" :openid="detail_info.employee_info.name"></Wxopendata></span>
          <template v-if="detail_info.status == 1">
            <span class="event-info__value color_green" v-if="detail_info.review_point >= 0">+{{ detail_info.review_point }} {{ types_list[detail_info.pt_id] }}</span>
            <span class="event-info__value color_red" v-else>{{ detail_info.review_point }}{{ types_list[detail_info.pt_id] }}</span>
          </template>
          <span class="event-info__status">{{ detail_info.review_status_mark }}</span>
        </div>
        <!-- END -->
        <div class="detail_box">
          <div v-for="(item, index) in detail_info.detail" :key="index" class="detail_line">
            <template v-if="item.value">
              <div class="flex-box" v-if="item.key == '奖扣目标' || item.key == '申请人' || item.key == '收益人'">
                <span v-if="item.type == 'text'" class="detail_label">{{ item.key }}</span>
                <span v-if="item.type == 'text'" class="detail_value"><Wxopendata type="userName" :openid="item.value"></Wxopendata></span>
              </div>
              <div class="flex-box" v-else>
                <span v-if="item.type == 'text'" class="detail_label">{{ item.key }}</span>
                <span v-if="item.type == 'text'" class="detail_value">{{ item.value }}</span>
              </div>
              <span v-if="item.type == 'image'" class="detail_label">{{ item.key }}</span>
              <span v-if="item.type == 'image'" class="detail_value">
                <img
                  :key="index"
                  v-for="(items, index) in item.value"
                  :src="items"
                  style="width: 50px;height: 50px; margin-right: 0.2rem; vertical-align: text-top"
                  @click="opremImage(item.value)"
                />
              </span>
            </template>
          </div>
        </div>
        <!-- 规则依据模块 -->
        <div class="event-rule__wrap">
          <div class="event-rule__header" style="margin-bottom:0.24rem;" v-show="detail_info.rule_id || detail_info.item_id">
            <span class="event-rule__title">规则依据</span>
            <span class="event-process__sub-title">此事件打分参考以下积分规则</span>
          </div>
          <div class="event-rule__item" v-if="detail_info.rule_id">
            <div class="detail_label">规则分类</div>
            <div class="detail_value">{{ detail_info.rule_name }}</div>
          </div>
          <div class="event-rule__item" v-if="detail_info.item_name && detail_info.item_id > 0">
            <div class="detail_label">积分规则</div>
            <div class="detail_value">{{ detail_info.item_name }}</div>
          </div>
          <div class="event-rule__item" v-if="detail_info.item_id > 0">
            <div class="detail_label">规则积分</div>
            <div class="detail_value">
              <span v-if="detail_info.item_range_type == 1">
                <span v-if="detail_info.item_prize_type == 1">+</span>
                {{ detail_info.item_min_point }}
              </span>
              <span v-if="detail_info.item_range_type == 2">
                <span v-if="detail_info.item_prize_type == 1">+</span>
                {{ detail_info.item_min_point }} ~ {{ detail_info.item_max_point }}
              </span>
              {{ types_list[detail_info.pt_id] }}
            </div>
          </div>
        </div>

        <!-- END -->
        <approvalProcess :data.sync="detail_info.process"></approvalProcess>
        <div style="height: 1.5rem;"></div>
      </scroller>
      <!-- 审批者 ||  -->
      <footer class="flex-box flex-v-ce footer" v-if="detail_info.can_refuse == '1'">
        <div class="flex-2">撤回后需重新审批</div>
        <van-button type="info" @click="revoke(1)" class="flex-1">撤回</van-button>
      </footer>
      <!-- 申请者 ||  -->
      <footer class="flex-box flex-v-ce footer" v-if="detail_info.applyor_id==$userInfo().id&&detail_info.can_refuse == '1'&&(detail_info.source_type==2||detail_info.source_type==3)">
        <div class="flex-2">撤销后数据将不可恢复</div>
        <van-button type="info" @click="revoke(2)" class="flex-1">撤销</van-button>
      </footer>

      <!-- 驳回弹窗 -->
      <van-popup v-model="show_refuse" position="right" :style="{ height: '100%', width: '100%', 'background-color': 'rgb(245, 245, 245)' }">
        <div :style="'padding-top:' + bar_height + 'px;background-color: #238dfa;'"></div>
        <van-nav-bar title="确认驳回" left-text="返回" @click-left="show_refuse = false" left-arrow></van-nav-bar>
        <van-cell-group><van-field v-model="refuse_msg" rows="5" autosize type="textarea" maxlength="50" placeholder="请输入审批意见" show-word-limit /></van-cell-group>
        <div style="padding:0.32rem;"><van-button block type="info" @click="confirm_refuse">确认驳回</van-button></div>
      </van-popup>
    </div>

    <van-row justify="center" type="flex" v-if="detail_info.can_complete == 1" class="btn-box">
      <van-col :span="detail_info.source_type != 4 ? 8 : 0">
        <div style="padding:0.16rem;">
          <van-button block type="info" plain :disabled="detail_info.source_type == '4'" v-if="detail_info.source_type != 4" @click="refuse">驳回</van-button>
        </div>
      </van-col>
      <!--  v-if="detail_info.status" -->
      <van-col :span="detail_info.source_type != 4 ? 16 : 24">
        <div style="padding:0.16rem; padding-left:0;">
          <van-button block type="info" v-if="detail_info.source_type == '1'" @click="$router.push({ name: 'integral_approval_integral', query: { review_id: detail_info.id } })">
            通过
          </van-button>
          <van-button block type="info" v-if="detail_info.source_type == '2'" @click="$router.push({ name: 'integral_approval_integral', query: { review_id: detail_info.id } })">
            通过
          </van-button>
          <van-button block type="info" v-if="detail_info.source_type == '3'" @click="$router.push({ name: 'integral_approval_integral', query: { review_id: detail_info.id } })">
            通过
          </van-button>
          <van-button
            block
            type="info"
            v-if="detail_info.source_type == '4'"
            @click="$router.push({ name: 'integral_approval_performance', query: { review_id: detail_info.id } })"
          >
            通过
          </van-button>
        </div>
      </van-col>
    </van-row>

    <van-image-preview v-model="show" :images="imageSrc"></van-image-preview>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import approvalProcess from '@/components/integral/approval_process'
import userImage from '@/components/common/user_image'
import { Dialog, Panel, Step, Steps, Overlay, ImagePreview } from 'vant'
Vue.use(Dialog)
  .use(Panel)
  .use(Step)
  .use(Steps)
  .use(Overlay)
  .use(ImagePreview)
export default {
  // 数据
  components: { approvalProcess, userImage },
  data () {
    return {
      imageSrc: [],
      show: false,
      title: '审批详情',
      detail_info: {
        employee_info: { name: '', img_url: '' },
        process: [{ name: '未知' }]
      },
      review_id: this.$route.query.review_id,
      action: '',
      show_refuse: false,
      refuse_msg: '',
      show_complete: false,
      complete_msg: '',
      show_approver: false,
      approver_selected: { employee: [], dept: [] },
      reviewer: {
        name: '',
        url: '',
        id: ''
      },
      bar_height: '',
      show_one: false,
      adopt_one: false,
      show_two: false,
      adopt_two: false,
      types_list: {},
      can_complete_isIos: false
    }
  },
  watch: {
    adopt_one (val) {
      if (val) {
        this.get_info()
      }
    }
  },
  // 方法
  methods: {
    get_point_types () {
      var types = this.$getTypes
      for (let i in types) {
        this.types_list[types[i].id] = types[i].name
      }
    },
    opremImage (item) {
      this.show = true
      this.imageSrc = item
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    // 请求数据
    get_info () {
      let self = this
      self.showLoading()
      let review_id = self.$route.query.review_id
      request('get', '/api/integral/review', { review_id: review_id }).then(res => {
        self.$toast.clear()
        if (res.data.code === 1) {
          self.detail_info = res.data.data
        } else {
          self.$toast(res.data.msg)
          self.$keep_alive_update('cancel_msg', { cancel_text: res.data.msg, id: localStorage.getItem('read_msg') })
          setTimeout(() => {
            self.$route_back()
          }, 2000)
        }
      })
    },
    sub (data) {
      let self = this
      self.showLoading()
      request('post', '/api/integral/review', data)
        .then(res => {
          if (res.data.code == 1) {
            if (self.action == 'complete') {
              self.show_complete = false
            } else if (self.action == 'refuse') {
              self.show_refuse = false
            }
            self.$toast.clear()
            self.$toast(res.data.msg)
            self.get_info()
          } else {
            self.show_refuse = false
            self.$toast.clear()
            self.$toast(res.data.msg)
          }
        })
        .catch(e => {
          self.$toast.clear()
        })
    },

    // 通过
    complete () {
      let self = this
      self.action = 'complete'
      self.show_complete = true
    },
    confirm_complete () {
      let self = this
      let data = {
        review_id: self.review_id,
        action: self.action,
        rule_id: self.detail_info.rule_id,
        item_id: self.detail_info.item_id,
        point: self.detail_info.point,
        reviewer_id: self.reviewer.id,
        remark: self.complete_msg,
        ticket_count: '0'
      }
      if (!data.reviewer_id) {
        // 判断
        self.$notify({ type: 'danger', message: '您没有权限审批此条申请，请指定下一个审批人' })
      } else {
        self.$keep_alive_update('update_approval_list', data)
        self.sub(data)
      }
    },
    // 驳回
    refuse () {
      let self = this
      self.show_refuse = true
    },

    confirm_refuse () {
      let self = this
      self.action = 'refuse'
      let data = {
        review_id: self.review_id,
        action: self.action,
        rule_id: self.detail_info.rule_id,
        remark: self.refuse_msg,
        ticket_count: '0'
      }
      if (!self.refuse_msg) {
        self.$notify({ type: 'danger', message: '审批意见不能为空' })
      } else {
        self.$keep_alive_update('update_approval_list', data)
        self.sub(data)
      }
    },

    // 选择审批人确认
    approver_confirm (data) {
      let self = this
      if (data.employee) {
        self.reviewer = data.employee[0]
        self.approver_selected = data
      }
      self.show_approver = false
    },
    // 关闭选择审批人
    approver_cancel () {
      this.show_approver = false
    },
    // 撤销申请
    revoke (type) {
      let str = type == 1 ? '撤回' : '撤销'
      let self = this
      Dialog.confirm({
        title: '提示',
        message: '您确定要' + str + '此项吗?'
      })
        .then(() => {
          self.showLoading()
          request('DELETE', '/api/integral/review', { review_id: self.review_id })
            .then(res => {
              if (res.data.code == 1) {
                self.$keep_alive_update('update_approval_list', { review_id: self.review_id })
                self.$toast.clear()
                setTimeout(() => {
                  this.$route_back()
                }, 200)
              } else {
                self.$toast.clear()
                self.$toast(res.data.msg)
              }
            })
            .catch(e => {
              self.$toast.clear()
            })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  // 生命周期 --- 创建完成
  created () {
    let self = this
    this.get_point_types()
    if (window.plus) {
      this.can_complete_isIos = window.plus.storage.getItem('iPhone')
      self.bar_height = window.plus.navigator.getStatusbarHeight()
    }
    self.get_info()
    if (this.$route.query.title) {
      this.title = this.$route.query.title
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_approval_detail: function (vm, data) {
      vm.get_info()
    },
    update_integral_approval_performance: function (vm, data) {
      vm.get_info()
    },
    withdraw_apply: function (vm, data) {
      vm.get_info()
    }
  }
}
</script>
<style scoped lang="less">
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 0.16rem 0.3rem;
  border-top: 1px solid #f1f1f1;
}
.footer .flex-2 {
  font-size: 0.28rem;
  color: #909399;
}
.event-info__status {
  font-size: 0.32rem;
  color: #303133;
  margin-top: 0.2rem;
}
& .event-info__header {
  padding: 0.32rem;
  background: #fff;
  position: relative;
  &:after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.32rem;
    bottom: 0;
    left: 0.32rem;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
& .event-info__value {
  font-size: 0.36rem;
  color: #f56c6c;
  text-align: right;
  font-weight: 600;
}
.event-employee__name {
  font-weight: 600;
  margin: 0.2rem 0;
}
.body_com {
  height: calc(100% - 0.92rem);
  position: relative;
}
.can_complete {
  height: calc(100% - 2.12rem);
  position: relative;
}
.can_complete_isIos {
  height: calc(100% - 2.52rem);
}
.detail_box {
  padding: 0.32rem;
  font-size: 0.32rem;
}
.detail_line {
  line-height: 1.75;
}
.detail_label {
  color: #969799;
  display: inline-block;
  width: 1.5rem;
  font-size: 0.32rem;
}
/deep/ .van-step--vertical:not(:last-child):after {
  border: none;
}
/deep/ .van-step--vertical .van-cell {
  padding: 0;
}
.steps_time {
  color: #999;
  font-size: 0.28rem;
}
.detail_value {
  color: #323233;
  font-size: 0.32rem;
  width: calc(100% - 1.5rem);
}
/deep/ .btn-box {
  background-color: #fff;
  padding-bottom: 0.4rem;
}
.detail_box {
  background-color: #fff;
  margin-bottom: 0.2rem;
}
& .event-process__wrap,
.event-rule__wrap {
  margin-top: 0.24rem;
  padding: 0 0.36rem;
  background: #fff;
  & .event-process__header,
  .event-rule__header {
    position: relative;
    // display: flex;
    padding: 0.24rem 0;
    color: #303133;
    flex-direction: column;
    &:after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    & .event-process__title,
    .event-rule__title {
      font-weight: 600;
    }

    & .event-process__sub-title {
      font-size: 0.28rem;
      color: #909399;
    }
  }
  & .event-process__icon {
    display: flex;
    width: 0.72rem;
    height: 0.72rem;
    font-size: 0.28rem;
    color: #fff;
    background: #26a2ff;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
  }
  & .event-process__item {
    position: relative;
    display: flex;
    height: 1.28rem;
    flex-direction: row;
    align-items: center;
  }

  & .process-item__content {
    display: flex;
    flex: 1;
    padding-left: 0.2rem;
    flex-direction: column;

    & .process-item__time {
      padding-top: 0.06rem;
      font-size: 0.24rem;
      color: #909399;
    }
  }

  & .process-item__point {
    display: flex;
    font-size: 0.36rem;
    font-weight: 500;
    align-items: center;
  }

  & .event-process__line {
    position: absolute;
    top: 1.04rem;
    left: 0.35rem;
    width: 0.02rem;
    height: 0.48rem;
    background-color: #ff0000;
    background: repeating-linear-gradient(0, #979797 0, #979797 11%, transparent 0, transparent 21%);
  }
}

.event-rule__item {
  display: flex;
  padding-bottom: 0.16rem;
  flex-direction: row;

  & .rule-item__label {
    display: flex;
    width: 1.45rem;
    color: #909399;
  }

  & .rule-item__value {
    display: flex;
    flex: 1;
    color: #303133;
    flex-wrap: wrap;
  }
}
.color_red{
  color: #F56C6C;
}
.color_green{
  color: #4BD964;
}
</style>