CargoControlDetail.vue

<!--拆单审核中的申请信息部分-->
<template>
    <div v-if="order">
        <el-descriptions :column="3">
            <el-descriptions-item :label="$t('订单号')">{{order.orderNo}}</el-descriptions-item>
            <el-descriptions-item :label="$t('运输方式')">
                <dict-tag :type="DICT_TYPE.TRANSPORT_TYPE" :value="order.transportId" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('出货方式')">
                {{channelName}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('订单状态')">
                <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="order.status" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('唛头')">{{order.marks}}</el-descriptions-item>
            <el-descriptions-item :label="$t('始发仓')">{{$l(order.logisticsInfoDto, 'startTitle')}}</el-descriptions-item>
            <el-descriptions-item :label="$t('目的仓')">{{$l(order.logisticsInfoDto, 'destTitle')}}</el-descriptions-item>

            <!-- 放货修改 -->
            <el-descriptions-item :label="$t('放货件数')" v-if="applyType == 7">
                【{{detail.pickNum}}】{{$t('改')}} {{detail.currentPickNum}}
            </el-descriptions-item>

            <!-- 反复核 -->
            <el-descriptions-item :label="$t('申请原因')" v-if="applyType == 8">
                <dict-tag :type="DICT_TYPE.ECW_PICK_RECURRENT_NUCLEAR_TYPE" :value="detail.recurrentNuclearType" />
            </el-descriptions-item>

            <!-- 调货 -->
            <el-descriptions-item :label="$t('申请原因')" v-if="applyType == 9">
                {{$l(detail, 'reason')}}
            </el-descriptions-item>

            <!-- 取消放货 -->
            <el-descriptions-item :label="$t('申请原因')" v-if="applyType == 10" :span="2">
                <dict-tag :type="DICT_TYPE.ECW_CANCEL_PICK_TYPE" :value="detail.cancelPickType" />
            </el-descriptions-item>
            <el-descriptions-item v-if="voucherList.length" :label="$t('凭证')" :span="3">
              <div v-for="(item, index) in voucherList" :key="index" style="padding:5px">
                <video v-if="isVideo(item)" :src="item" @click="playVideo(item)" style="width: 100px; height: 100px;"></video>
                <el-image v-else :src="item"  style="width: 100px; height: 100px;" :preview-src-list="voucherImages"></el-image>
              </div>
            </el-descriptions-item>
        </el-descriptions>

      <el-dialog :visible="!!videoUrl" :before-close="closeVideoPlayer">
        <video v-if="!!videoUrl" :src="videoUrl" style="width: 500px; height: 500px" controls></video>
      </el-dialog>
    </div>
</template>
<script>
import {getPickUpdateApproveInfo} from '@/api/ecw/orderCargoControl'
import {getOrder} from '@/api/ecw/order'
import {getChannelListByIds} from '@/api/ecw/channel'
import {parseTime} from '@/utils/ruoyi'
import Template from "@/views/cms/template/index.vue";
export default {
  components: {Template},
    filters: {parseTime},
    props:{
        id: [String, Number],
        applyType: Number, // 申请类型   7 放货修改申请 8 放货反复核申 9 调货审核
    },
    data(){
        return {
            detail: null,
            order: null,
            channels: [],
            channelName: '/',
          videoUrl: null
        }
    },
    watch:{
        id(){
            this.getData()
        }
    },
    computed:{
        jsonParse(){
            return d => {
                return JSON.parse(d)
            }
        },
        getChannelName(){
            return id => {
                let channel = this.channels.find(item => item.channelId == id)
                return channel ? channel.nameZh : '/'
            }
        },
        // 凭证
        voucherList(){
          if(!this.detail || !this.detail.voucher) return []
          return this.detail.voucher.split(',')
        },
      // 图片类型的凭证
      voucherImages(){
          return this.voucherList.filter(item => {
            return !this.isVideo(item)
          })
      },
      // 判断是否是视频链接
      isVideo(){
          return (url) => {
            return ['mp4'].indexOf(url.split('.').pop().toLowerCase()) > -1
          }
      }
    },
    created(){
        if(this.id){
            this.getData()
        }
    },
    methods:{
        getData(){
            getPickUpdateApproveInfo({approveId: this.id}).then(res => {
                this.detail = res.data
                return getOrder(this.detail.orderId)
            }).then(res => {
                this.order = res.data
                this.getChannel()
            })
        },
         getChannel(){
            if(!this.order || !this.order.channelId) return
            getChannel(this.order.channelId).then(res => {
                this.channelName = this.$l(res.data, 'name')
            })
        },
      // 播放视频
      playVideo(url){
          console.log('play video', url)
          this.videoUrl = url
      },
      // 关闭视频播放器
      closeVideoPlayer(){
          this.videoUrl = null
      }
    }
}
</script>
<style scoped lang="scss">
.title{
    padding: 10px 0;
    span{
        font-size: 14px;
        font-weight: bold;
    }
}
</style>