soc_app/src/views/menu/visitCheck/detail.vue

<template>
  <div class="intro-add">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card">
        <van-panel title="来访信息" >
          <template #header>
            <van-cell title="审批情况">
              <template #extra>
                  <span :style="{color:getState(approveStatus)}">
                    {{getDictLabel(approveStatus,'out_in_approve_status') }}
                  </span>
              </template>
            </van-cell>
          </template>
          <div class="panel-box">
            <van-cell title="来访类型" :value="getDictLabel(visitInfo.type,'out_in_type')"></van-cell>
            <van-cell title="来访事由" :value="visitInfo.reasons"></van-cell>
            <van-cell title="介绍信编号" v-if="visitInfo.letterNo"  :value="visitInfo.letterNo"></van-cell>
            <van-cell title="开具日期" v-if="visitInfo.startTimeStr"  :value="visitInfo.startTimeStr"></van-cell>
            <van-cell title="有效天数" v-if="visitInfo.effectiveDays"  :value="`${visitInfo.effectiveDays}天`"></van-cell>
            <van-cell title="介绍信附件"  v-if="visitInfo.letterFile && visitInfo.letterFile.length > 0">
              <template #right-icon>
                <div class="file-box">
                  <p class="van-ellipsis" v-for="(v, i) in visitInfo.letterFile"
                     :key="v.url"
                     @click="previewFile(v)">{{v.name}}</p>
                </div>
              </template>
            </van-cell>
            <van-cell v-if="visitInfo.description" title="备注信息" :value="visitInfo.description"></van-cell>
          </div>
        </van-panel>
      </div>

      <!--  人员列表  -->
      <div class="card" v-for="(v,i) in userInfos" :key="i">
        <div class="goods-card">
          <div class="card-img-box" v-if="v.imgFile && v.imgFile.length > 0" @click="preView(v.imgFile)">
            <img :src="imgUrl(v.imgFile[0])" alt="">
          </div>
          <div class="card-cell-box">
            <van-cell title="来访单位" :value="v.companyName"></van-cell>
            <van-cell title="来访人员" :value="v.userName"></van-cell>
            <van-cell title="证件类型" :value="getDictLabel(v.idType,'letter_id_type')"></van-cell>
            <van-cell title="证件号码" :value="v.idCard"></van-cell>
          </div>
        </div>
      </div>
      <div v-show="showInput" class="input-box">
        <van-field
          v-model="formData.description"
          rows="1"
          autosize
          :maxlength="200"
          label="审批说明"
          type="textarea"
          placeholder="请输入"/>
      </div>
      <div v-if="approveRemark" class="input-box">
        <van-cell title="审批说明" :value="approveRemark"></van-cell>
      </div>
      <div v-if="approveStatus == 0 && visitInfo.status == 1" class="flex-box">
        <van-button type="info" style="width: 48%" plain @click="refuse">不同意</van-button>
        <van-button type="info" style="width: 48%" @click="accredit">同意</van-button>
      </div>
    </div>
  </div>
</template>

<script>

import DateCell from "@/components/dateCell/index.vue";
import Uploader from "@/components/upload/gxuploader.vue";
import {formatDate} from "@/filters/filter";
import {mapGetters} from "vuex";
import {imgUrl} from "@/utils";
import { ImagePreview } from 'vant'
import {visitDetails,visitCheck} from './api'
export default {
  components: {Uploader, DateCell},
  data(){
    return {
      go:{
        type:'replace', //参数：go push replace
        path:'/visitCheck',
      },
      visitId:null,
      approveStatus:null,
      approveRemark:null,
      activeNames:['1'],
      visitInfo: {},
      userInfos:[],
      formData:{},
      showInput:false,
      dicts:['out_in_approve_status','out_in_type','letter_id_type']
    }
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary'])
  },
  mounted(){
    this.visitId = this.$route.query.id;
    this.getInfo();
  },
  methods:{
    imgUrl,formatDate,
    // 拒绝
    refuse(){
      if(this.showInput){
        let data = {
          approveStatus:2,
          approveRemark:this.formData.description,
          id:this.visitInfo.approveLog.id
        }
        visitCheck(data).then(res=>{
          this.$toast('操作成功');
          this.toPagesFcn();
        }).catch(error=>{
          if( error === '任务已完成'){
            this.toPagesFcn();
          }
        })
      }
      this.showInput = true;
    },
    //页面跳转逻辑
    toPagesFcn(){
      this.getRouter();
      if(this.fromPages.name === "works"){
        this.$router.go(-1)
      }else {
        this.$router.replace({
          name:'visitCheck',
          path:'/visitCheck',
          params:{event:'refresh'}
        });
      }
    },
    // 同意
    accredit(){
      let data = {
        approveStatus:1,
        id:this.visitInfo.approveLog.id
      }
      visitCheck(data).then(res=>{
        this.$toast('操作成功');
        this.toPagesFcn();
      }).catch(error=>{
        if( error === '任务已完成'){
          this.toPagesFcn();
        }
      })
    },
    getState(state){
      switch (state){
        case 0:
          return '#008cd6';
        case 1:
          return '#009240';
        case 2:
          return '#bc9f71';
        case 3:
          return '#D7000F';
      }
    },
    getInfo(){
      visitDetails(this.visitId).then(res=>{
        this.visitInfo = res.data;
        this.approveStatus = this.visitInfo.approveLog.approveStatus;
        this.approveRemark = this.visitInfo.approveLog.approveRemark;
        if(res.data.letterFile){
          let imgArr = res.data.letterFile.map(v=>{
            return JSON.parse(v)
          })
          this.visitInfo.letterFile = imgArr;
        }
        if(res.data.userInfos){
          let users = res.data.userInfos.map(v=>{
            if(v.imgFile){
              v.imgFile = v.imgFile.split(',');
            }
            return v
          });
          console.log(users,'users')
          this.userInfos = users;
        }
      })
    },
    previewFile(file){
      this.openFilePreview(file);
    },
    preView(val) {
      if(Array.isArray(val)){
        let arr = val.map(v=>{
          return imgUrl(v);
        })
        ImagePreview(arr);
      }else {
        ImagePreview([imgUrl(val)]);
      }
    },
  }
}
</script>
<style lang="scss">
.intro-add{
  .van-card{
    padding: 20px;
  }
  .card-cell-box{
    width: 70%;
    .van-cell{
      padding: 4px;
      &::after{
        left:10px;
        right:10px;
      }
    }
    .van-cell__title{
      flex:.25;
    }
    .van-cell__value{
      flex:.75;
    }
  }
}
</style>
<style scoped lang="scss">
.intro-add{
  height: 100%;
  overflow: hidden;
}
.page-container{
  height: calc(100vh - 94px);
  overflow: auto;
  padding: 20px;

}
.flex-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  >span{
    margin: 0 20px;
  }
}
.card{
  margin-bottom: 20px;
  box-shadow: 0 10px 10px #eaeaea;
}
.card:last-child{
  margin-bottom: 0;
}
.panel-box{
  -padding:0 20px;
}
.panel-box-item{
  height: 36px;
  line-height: 36px;
}
.item-label{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}
.item-value{
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.upload-box{
  padding: 20px 30px;
  display: flex;
  >span{
    display: inline-block;
    height: 160px;
    width: 200px;
    line-height: 160px;
    font-size: 28px;
    color:#999;
    >i{
      font-style: normal;
      color: #ee0a24;
    }
  }
}
.goods-card{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  .card-img-box{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    >img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
}
.big-btn-box{
  padding-bottom: 20px;
}
.file-box{
  width: 70%;
  display: flex;
  justify-content: flex-end;
  color:#008cd6;
}
.nfc-img {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 0 10px;
  position: relative;
  > img {
    width: 100%;
    height: 100%;
    border: none;
  }
  > span {
    position: absolute;
    padding: 0 10px;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #eaeaea;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
    height: 30px;
  }

}
.input-box{
  margin-bottom: 20px;
}
</style>