gdy_app_8/src/components/AppealInfo.vue

<template>
  <van-popup
    v-model="showAppealInfo"
    :position="position"
    duration="0.2"
    :style="{ height: height, width: width, 'background-color': 'rgb(245, 245, 245)' }"
    @open="onOpen"
    @closed="onClosed"
  >
    <div style="height: 100%;width: 100%">
      <van-nav-bar
        title="申诉信息"
        :left-arrow="true"
        @click-left="showAppealInfo = false"
        @click-right="showActions = true"
        fixed
      >
        <template slot="right" v-if="canActions">
          <van-icon name="bars"/>
        </template>
      </van-nav-bar>
      <div class="container" v-if="appealInfo" >
        <div class="card-box">
          <van-row type="flex" justify="center" gutter="10" align="center">
            <van-col span="6" style="text-align: right">
              <userImage
                :img_url="appealInfo.employee_img_url"
                :user_name="appealInfo.employee_name"
              />
            </van-col>
            <van-col span="10" style="text-align: left" class="font-flex-word">
              <span style="line-height: 0.8rem;">{{appealInfo.employee_name}}</span>
            </van-col>
            <van-col span="8">
              <van-tag :type="appealStatusType(appealInfo.status)" size="medium" >{{appealStatusMap[appealInfo.status] || '--'}}</van-tag>
            </van-col>
          </van-row>
          <van-divider/>
          <div class="card-content">
            <p><van-tag type="primary" size="medium">{{appealInfo.create_time}}</van-tag>&nbsp;发起复议申请</p>
            <p>共<van-tag type="primary" size="medium">{{appealInfo.events.length}}</van-tag>&nbsp;条积分事件</p>
            <p v-if="appealInfo.global_remark">申请原因&nbsp;:&nbsp;<van-tag type="primary" size="medium">{{appealInfo.global_remark}}</van-tag></p>
            <template v-if="appealInfo.complete_time">
              <p><van-tag type="primary" size="medium">{{appealInfo.complete_time}}</van-tag>&nbsp;审批结束</p>
            </template>
          </div>
        </div>
        <van-collapse v-model="activeNames" accordion>
          <van-collapse-item name="process">
            <template slot="title">
              <span class="content-font">审批流程</span>
            </template>
            <van-steps direction="vertical" :active="appealInfo.process.length - 1" >
              <van-step v-for="(item,index) in appealInfo.process" :key="index" >
                <div class="card-box">
                  <div class="card-content" style="text-align: left;line-height: 0.25rem;">
                    <p>阶段{{item.step}}&nbsp;<van-tag :type="processStatusType(item.status)" size="medium">{{processStatusMap[item.status] || '--'}}</van-tag></p>
                    <p>发起人&nbsp;:&nbsp;{{item.publisher_name}}</p>
                    <p>发起时间&nbsp;:&nbsp;{{item.create_time}}</p>
                    <p>审批人&nbsp;:&nbsp;{{item.reviewer_name}}</p>
                    <p v-if="item.remark" class="font-flex-word">审批意见&nbsp;:&nbsp;{{item.remark}}</p>
                    <p v-if="item.complete_time">完结时间&nbsp;:&nbsp;{{item.complete_time}}</p>
                  </div>
                </div>
              </van-step>
            </van-steps>
          </van-collapse-item>
          <van-collapse-item name="events">
            <template slot="title">
              <span class="content-font">{{appealInfo.events.length + '条积分'}}</span>
            </template>
            <div class="card-box" v-for="(item,index) in appealInfo.events" :key="index">
              <div class="card-content1">
                <p>积分&nbsp;:&nbsp;{{item.point + ' ' + ptName(item.pt_id)}} <van-tag :type="pointStatusType(item.status)" >{{pointStatusMap[item.status] || '--'}}</van-tag> </p>
                <p style="line-height: 0.5rem">积分备注&nbsp;:&nbsp;{{item.event_remark}}</p>
                <p>时间&nbsp;:&nbsp;{{item.event_time}}</p>
                <p v-if="item.appeal_remark" >复议原因&nbsp;:&nbsp;{{item.appeal_remark}}</p>
                <p v-if="item.delete_time" >已删除&nbsp;:&nbsp;{{item.delete_time}}</p>
              </div>
            </div>
          </van-collapse-item>
          <van-collapse-item name="logs">
            <template slot="title">
              <span class="content-font">{{appealInfo.logs.length + '条操作日志'}}</span>
            </template>
            <p v-for="(item,index) in appealInfo.logs" :key="index" class="content-font font-flex-word">
              <van-tag type="primary" size="medium" v-if="item.create_time" >{{item.create_time}}</van-tag>
              {{item.msg}}
            </p>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>

    <van-action-sheet
      v-model="showActions"
      :actions="appealActions"
      @select="actionSelect"
      close-on-click-action
    />

<!--  拒绝审批  -->
    <van-dialog
      v-model="showReviewRefuse"
      title="拒绝审批"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <van-form @submit="refuseReview">
        <van-cell-group>
          <van-cell><Mtextarea v-model="formData.remark" placeholder="原因说明（选填）"></Mtextarea></van-cell>
        </van-cell-group>
        <van-row type="flex" justify="center" gutter="10" style="margin: 0.1rem;">
          <van-col span="12">
            <van-button round block type="warning" native-type="button" @click="closeRefuseReview">
              取消
            </van-button>
          </van-col>
          <van-col span="12">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </van-col>
        </van-row>
      </van-form>
    </van-dialog>

<!--  驳回重做  -->
    <van-dialog
      v-model="showReviewRejectRewrite"
      title="驳回重做"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <van-form @submit="rejectRewrite">
        <van-cell-group>
          <van-cell><Mtextarea v-model="formData.remark" placeholder="原因说明（选填）"></Mtextarea></van-cell>
        </van-cell-group>

        <van-row type="flex" justify="center" gutter="10" style="margin: 0.1rem;">
          <van-col span="12">
            <van-button round block type="warning" native-type="button" @click="closeRejectRewrite">
              取消
            </van-button>
          </van-col>
          <van-col span="12">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </van-col>
        </van-row>
      </van-form>
    </van-dialog>


<!--  递交审批  -->
    <van-dialog
      v-model="showReviewSubmit"
      title="递交审批"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <van-form @submit="reviewSubmit">
        <van-cell-group>
          <EmployeeSelectorCell
            title="递交审批"
            v-model="formData.reviewer"
            :multi="false"
            icon-type="records"
            :employee_list="userInfo.employee_detail.superior_list"
            :is_employee_list="true"
          />
        </van-cell-group>

        <van-cell-group>
          <van-cell><Mtextarea v-model="formData.remark" placeholder="原因说明（选填）"></Mtextarea></van-cell>
        </van-cell-group>

        <van-row type="flex" justify="center" gutter="10" style="margin: 0.1rem;">
          <van-col span="12">
            <van-button round block type="warning" native-type="button" @click="closeReviewSubmit">
              取消
            </van-button>
          </van-col>
          <van-col span="12">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </van-col>
        </van-row>
      </van-form>
    </van-dialog>

<!--  审批通过  -->
    <van-dialog
      v-model="showReviewApproval"
      title="通过"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <van-form @submit="reviewApproval">
        <van-cell-group>
          <van-cell><Mtextarea v-model="formData.remark" placeholder="原因说明（选填）"></Mtextarea></van-cell>
        </van-cell-group>
        <van-row type="flex" justify="center" gutter="10" style="margin: 0.1rem;">
          <van-col span="12">
            <van-button round block type="warning" native-type="button" @click="closeReviewApproval">
              取消
            </van-button>
          </van-col>
          <van-col span="12">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </van-col>
        </van-row>
      </van-form>
    </van-dialog>

<!--  重新填写  -->
<!--    <van-dialog-->
<!--      v-model="showRewrite"-->
<!--      title="复议记录"-->
<!--      :show-cancel-button="false"-->
<!--      :show-confirm-button="false"-->
<!--    >-->

<!--    </van-dialog>-->
    <AppealRewrite
      v-if="appealInfo"
      :visible.sync="showRewrite"
      :id="appealInfo.id"
      @hasSubmit="handleRewriteSubmit"
    />


  </van-popup>
</template>

<script>
import Vue from "vue";
import {NavBar,Steps,Step,Collapse,CollapseItem,Dialog} from "vant";
import EmployeeSelectorCell from "./EmployeeSelectorCell.vue";
import Mtextarea from "./Mtextarea2.vue";
import AppealRewrite from "./AppealRewrite.vue";
Vue.use(NavBar)
  .use(Steps)
  .use(Step)
  .use(Collapse)
  .use(CollapseItem)
  .use(Dialog)

export default {
  name: 'appealInfo',
  components: {AppealRewrite, Mtextarea, EmployeeSelectorCell},
  props: {
    visible:{
      type: Boolean,
      default : false
    },
    position:{
      type: String,
      default: 'bottom'
    },
    id:{
      type: Number,
      default: 0
    },
    height:{
      type: String,
      default: '100%'
    },
    width:{
      type: String,
      default: '100%'
    }
  },
  data(){
    return {
      userInfo: this.$userInfo(),
      showAppealInfo:this.visible,
      hasOpen:false,
      hasSubmit:false,
      loading:false,
      appealInfo:null,
      appealStatusMap:{
        0:'全部',
        1:'审批中',
        2:'审批通过',
        3:'驳回重做',
        4:'撤回重填',
        5:'拒绝'
      },
      pointStatusMap:{
        1:'正常',
        2:'已删除',
        3:'已通过申述并删除'
      },
      processStatusMap:{
        1:'待处理',
        2:'审批通过',
        3:'递交审批',
        4:'拒绝',
        5:'驳回重做',
        6:'撤回上个节点重填',
        7:'复议撤回',
      },
      pts:this.$getTypes,
      formData:{
        remark:'',
        reviewer:[]
      },
      rewriteData:{
        events:[],
        globalRemark:'',
        reviewerId:'',
        reviewerName:'',
        employeeSelected: { dept: [], employee: [] },
      },
      showReviewRefuse:false,
      showReviewRejectRewrite:false,
      showReviewApproval:false,
      showReviewerSelector:false,
      showReviewSubmit:false,
      submitting:false,
      showEventSelector:false,
      showRewrite:false,
      activeNames:'process',
      showActions:false,
      actions:{
        delete:{name:'删除复议',action:'delete',loading:false,disabled:false},
        refuse:{name:'拒绝',action:'refuse',loading:false,disabled:false},
        rejectRewrite:{name:'驳回重做',action:'rejectRewrite',loading:false,disabled:false},
        cancel:{name:'撤回审批',action:'cancel',loading:false,disabled:false},
        cancelAppeal:{name:'撤回复议',action:'cancelAppeal',loading:false,disabled:false},
        rewrite:{name:'重新填写',action:'rewrite',loading:false,disabled:false},
        submit:{name:'递交审批',action:'submit',loading:false,disabled:false},
        approval:{name:'通过',action:'approval',loading:false,disabled:false},
      }
    }
  },
  watch:{
    showAppealInfo(v){
      this.$emit('update:visible', v)
    },
    visible(v){
      this.showAppealInfo = v
    }
  },
  computed:{
    appealActions(){
      let actions = []
      if (!this.appealInfo) return actions
      if (this.appealInfo.can_delete) actions.push(this.actions.delete)
      if (this.appealInfo.can_refuse) actions.push(this.actions.refuse)
      if (this.appealInfo.can_reject_rewrite) actions.push(this.actions.rejectRewrite)
      if (this.appealInfo.can_cancel) actions.push(this.actions.cancel)
      if (this.appealInfo.can_cancel_appeal) actions.push(this.actions.cancelAppeal)
      if (this.appealInfo.can_rewrite) actions.push(this.actions.rewrite)
      if (this.appealInfo.can_submit) actions.push(this.actions.submit)
      if (this.appealInfo.can_approval) actions.push(this.actions.approval)
      return actions
    },
    canActions(){
      return this.appealActions.length > 0
    }
  },
  methods:{
    initData(){
      this.formData.remark = ''
      this.formData.reviewer = []
      this.hasSubmit = false
      this.appealInfo = null
      this.showReviewRefuse = false
      this.showReviewRejectRewrite = false
      this.showReviewApproval = false
      this.showReviewerSelector = false
      this.showReviewSubmit = false
      this.showRewrite = false
      this.showEventSelector = false
      this.submitting = false
    },
    onOpen(){
      this.hasOpen = true
      this.initData()
      this.getAppealInfo()
    },
    onClosed(){
      this.hasOpen = false
      this.activeNames = 'process'
      if (this.hasSubmit) this.$emit('hasSubmit')
      this.$emit('closeInfo')
    },
    getAppealInfo(){
      if (!this.$props.id) return
      let self = this
      self.loading = true
      self.$axiosUser('get','api/pro/integral/appeal/info',{appeal_id:this.$props.id})
        .then(res => {
          if (res.data.code === 1) self.appealInfo = res.data.data
        })
        .finally(() => {
          self.loading = false
        })
    },
    appealStatusType(status){
      const map = {
        1:'primary',
        2:'success',
        3:'warning',
        4:'warning',
        5:'danger'
      }
      return map[status] || 'info'
    },
    processStatusType(status){
      const map = {
        1:'primary',
        2:'success',
        3:'success',
        4:'danger',
        5:'warning',
        6:'warning',
        7:'primary',
      }
      return map[status] || 'info'
    },
    ptName(ptId){
      let item = this.pts.find(item => item.id === ptId)
      return item ? item.name : ''
    },
    pointStatusType(status){
      switch (status){
        case 2:
        case 3:
          return 'warning'
        default:
          return "success"
      }
    },
    actionSelect(item){
      switch (item.action){
        case 'delete':
          Dialog.confirm({
            title:'删除复议',
            message:'删除复议后将不可恢复,确认提交吗',
            showCancelButton:true,
            confirmButtonText:'提交',
            cancelButtonText:'取消',
          })
            .then(() => {
              this.removeAppeal()
            })
            .catch(() => {})
          break;
        case 'refuse':
          this.showReviewRefuse = true
          break;
        case 'rejectRewrite':
          this.showReviewRejectRewrite = true
          break;
        case 'cancel':
          Dialog.confirm({
            title:'撤回审批',
            message:'审批撤回后可以重新编辑内容重新提交',
            showCancelButton:true,
            confirmButtonText:'提交',
            cancelButtonText:'取消',
          })
            .then(() => {
              this.reviewCancel()
            })
            .catch(() => {})
          break;
        case 'cancelAppeal':
          Dialog.confirm({
            title:'撤回复议',
            message:'复议撤回后可以重新编辑内容重新提交',
            showCancelButton:true,
            confirmButtonText:'提交',
            cancelButtonText:'取消',
          })
            .then(() => {
              this.appealCancel()
            })
            .catch(() => {})
          break;
        case 'rewrite':
          this.showRewrite = true
          break;
        case 'submit':
          this.showReviewSubmit = true
          break;
        case 'approval':
          this.showReviewApproval = true
          break;
      }
    },
    removeAppeal(){
      if (!this.appealInfo) return
      let self = this
      self.submitting = true
      let params = {
        appeal_id:self.appealInfo.id
      }
      self.$axiosUser('post','api/pro/integral/appeal/remove',params)
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.showAppealInfo = false
          }else {
            self.$toast(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    refuseReview(){
      if (!this.appealInfo) return
      let self = this
      self.submitting = true
      let params = {
        appeal_id:self.appealInfo.id,
        remark:self.formData.remark
      }
      self.$axiosUser('post','api/pro/integral/appeal/review/refuse',params)
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.getAppealInfo()
            self.showReviewRefuse = false
          }else {
            self.$toast(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    closeRefuseReview(){
      this.showReviewRefuse = false
    },
    rejectRewrite(){
      if (!this.appealInfo) return
      let self = this
      self.submitting = true
      let params = {
        appeal_id:self.appealInfo.id,
        remark:self.formData.remark
      }
      self.$axiosUser('post','api/pro/integral/appeal/review/reject',params)
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.getAppealInfo()
            self.showReviewRejectRewrite = false
          }else {
            self.$toast(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    closeRejectRewrite(){
      this.showReviewRejectRewrite = false
    },
    reviewSubmit(){
      if (!this.appealInfo) return
      let self = this
      self.submitting = true
      let params = {
        appeal_id:self.appealInfo.id,
        reviewer_id:self.formData.reviewer[0].id,
        remark:self.formData.remark
      }
      self.$axiosUser('post','api/pro/integral/appeal/review/submit',params)
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.getAppealInfo()
            self.showReviewSubmit = false
          }else {
            self.$message.error(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    closeReviewSubmit(){
      this.showReviewSubmit = false
    },
    reviewApproval(){
      if (!this.appealInfo) return
      let self = this
      self.submitting = true
      let params = {
        appeal_id:self.appealInfo.id,
        remark:self.formData.remark
      }
      self.$axiosUser('post','api/pro/integral/appeal/review/approval',params)
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.getAppealInfo()
            self.showReviewApproval = false
          }else {
            self.$toast(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    closeReviewApproval(){
      this.showReviewApproval = false
    },
    reviewCancel(){
      if (!this.appealInfo) return
      this.submitting = true
      let self = this
      self.$axiosUser('post','api/pro/integral/appeal/review/cancel',{appeal_id:self.appealInfo.id})
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.getAppealInfo()
          }else {
            self.$toast(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    appealCancel(){
      if (!this.appealInfo) return
      this.submitting = true
      let self = this
      self.$axiosUser('post','api/pro/integral/appeal/cancel',{appeal_id:self.appealInfo.id})
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.getAppealInfo()
          }else {
            self.$toast(res.data.msg)
          }
        })
        .finally(() => {
          self.submitting = false
        })
    },
    handleRewriteSubmit(){
      this.hasSubmit = true
      this.getAppealInfo()
    }
  },
}
</script>


<style scoped lang="less">
.container {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;

  & .card-box{
    margin: 0.2rem;
    padding: 0.1rem;
    border-radius: 0.3rem;
    border: 1px solid #ebeef5;
    background-color: #ffffff;
    overflow: hidden;
    color: #303133;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    & .card-content{
      font-size: 0.25rem;
      line-height: 0.5rem;
      color: #909399;
      text-align: left;
      margin-left: 0.3rem;
    }

    & .card-content1{
      font-size: 0.25rem;
      line-height: 0.25rem;
      color: #909399;
      text-align: left;

    }

  }

  .content-font{
    font-size: 0.25rem;
    line-height: 0.25rem;
    color: #909399;
    text-align: left;
  }

}

</style>