gdy_app_8/src/components/AppealRewrite.vue

<template>
  <van-popup
    v-model="showAppealRewrite"
    position="bottom"
    duration="0.2"
    :style="{height: '100%', width:'100%','background-colorr': 'rgb(245, 245, 245)'}"
    @open="onOpen"
    @closed="onClosed"
  >
    <van-nav-bar
      title="申述重写"
      :left-arrow="true"
      @click-left="showAppealRewrite = false"
      @click-right="showActions = true"
      fixed
    >
      <template slot="right" v-if="canActions">
        <van-icon name="bars"/>
      </template>
    </van-nav-bar>

    <div :style="{marginTop:'1rem',height:'90%'}">
      <van-notice-bar
        left-icon="volume-o"
        text="手机端暂不支持添加积分事件,请在电脑端操作"
      />
      <van-form>
        <van-cell-group>
          <EmployeeSelectorCell
            title="递交审批"
            v-model="rewriteData.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="rewriteData.globalRemark" :text_max="100" placeholder="申诉原因"/>
          </van-cell>
        </van-cell-group>
        <div class="card-box">
          <div class="box-header">
            <span v-if="rewriteData.events.length > 0">共{{rewriteData.events.length}}条积分事件</span>
            <span v-else>暂无积分事件</span>
          </div>
          <van-divider/>
          <div class="box-content">
            <div v-for="(item,index) in rewriteData.events" :key="index" class="box-content-item">
              <div class="box-content-item-title">
                <van-tag type="primary" size="medium" closeable @close="deleteEvent(item)" >{{item.remark}}</van-tag>
              </div>
              <div class="box-content-item-content">
                <Mtextarea :text_max="100" placeholder="申诉原因" v-model="item.appeal_remark"/>
              </div>
            </div>
          </div>
        </div>
      </van-form>
    </div>


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

  </van-popup>
</template>

<script>
import EmployeeSelectorCell from "./EmployeeSelectorCell.vue";
import Mtextarea from "./Mtextarea2.vue";
export default {
  name: "AppealRewrite",
  components:{Mtextarea,EmployeeSelectorCell},
  props:{
    visible:{
      type: Boolean,
      default : false
    },
    id:{
      type: Number,
      default: 0
    },
  },
  data(){
    return {
      userInfo:this.$userInfo(),
      hasOpen:false,
      showAppealRewrite:false,
      showActions:false,
      hasSubmit: false,
      pts:this.$getTypes,
      appealInfo:null,
      rewriteData:{
        events:[],
        globalRemark:'',
        reviewer:[]
      },
      loading:false,
      actionRewrite:{name:'提交',action:'rewrite',loading:false,disabled:false},
      submitting:false,
    }
  },
  watch:{
    showAppealRewrite(v){
      this.$emit('update:visible',v)
    },
    visible(v){
      this.showAppealRewrite = v
    }
  },
  computed:{
    canActions(){
      return this.appealInfo && this.appealInfo.can_rewrite && this.rewriteData.reviewer.length === 1 && this.rewriteData.events.length >= 1 && !this.submitting
    }
  },
  methods:{
    onOpen(){
      this.hasOpen = true
      this.getAppealInfo()
    },
    onClosed(){
      this.hasOpen = false
      if (this.hasSubmit) this.$emit('hasSubmit')
    },
    initRewriteData(){
      if (!this.appealInfo) return
      this.rewriteData.events = this.appealInfo.events.map(event => {
        let pt = this.pts.find(item => item.id === event.pt_id)
        pt = pt ? pt.name : ''
        return {
          id:event.id,
          remark:`${event.point} ${pt} ${event.event_time} ${event.event_remark}`,
          appeal_remark:event.appeal_remark
        }
      })
      this.rewriteData.globalRemark = this.appealInfo.global_remark
      let node = this.appealInfo.process.find(item => item.step === 1)
      if (node){
        this.rewriteData.reviewer = []
        this.rewriteData.reviewer.push({id: node.reviewer_id,name: node.reviewer_name,img_url:node.reviewer_img_url})
      }

    },
    getAppealInfo(){
      if (!this.id) return
      let self = this
      self.loading = true
      self.$axiosUser('get','api/pro/integral/appeal/info',{appeal_id:this.id})
        .then((res) => {
          if (res.data.code === 1){
            self.appealInfo = res.data.data
            self.initRewriteData()
          }
        })
        .finally(() => {
          self.loading = false
        })
    },
    deleteEvent(event){
      let index = this.rewriteData.events.indexOf(event)
      if (index >= 0) this.rewriteData.events.splice(index,1)
    },
    actionSelect(action){
      if (action.action === 'rewrite') this.rewriteAppeal()

    },
    rewriteAppeal(){
      let self = this
      if (!self.canActions) return

      let params = {
        appeal_id:self.appealInfo.id,
        reviewer_id:self.rewriteData.reviewer[0].id,
        remark:self.rewriteData.globalRemark,
        events:self.rewriteData.events.map(item => {
          return {id:item.id,remark:item.appeal_remark}
        })
      }


      self.submitting = true
      self.$toast.loading({ message: '正在处理',overlay:true,duration:0})
      self.$axiosUser('post','api/pro/integral/appeal/rewrite',params)
        .then(res => {
          if (res.data.code === 1){
            self.hasSubmit = true
            self.submitting = false
            self.showAppealRewrite = false
          }
          self.$toast(res.data.msg)
          self.$toast.clear()
        })
        .finally(() => {})
    }
  }
}
</script>

<style scoped lang="less">
.card-box{
  margin: 0.2rem auto;
  border-radius: 0.3rem;
  border: 1px solid #ebeef5;
  background-color: #ffffff;
  overflow: hidden;
  color: #303133;
  text-align: center;
  min-height: 70%;
  width: 95%;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

  & .box-header{
    height: 0.5rem;
    line-height: 0.5rem;
  }

  & .box-content{
    margin-bottom: 1rem;

    & .box-content-item{
      width: 95%;
      margin: 0.3rem auto 0;

      & .box-content-item-title{
         padding: 0 0.3rem;
      }

      & .box-content-item-content{
        padding: 0 0.3rem;
        margin-top: 0.2rem;
        border: 0.02rem solid #ebeef5;
      }


    }
  }

}
</style>