updateReleaseLimit.vue

<template>
  <el-dialog :visible="show" @close="handleClose" :title="$t('收货人限制修改申请')" width="1000px">
    <el-form label-position="left" label-width="150px" :model="form" :disabled="applyStatus === 1">
      <el-row :gutter="20">
        <!-- 订单号 -->
        <el-col :span="8">
          <el-form-item :label="$t('订单号')">
            <span>{{ order.orderNo }}</span>
          </el-form-item>
        </el-col>
        <!-- 总箱数 -->
        <el-col :span="8">
          <el-form-item :label="$t('总箱数')">
            <span>{{ order.sumNum }}</span>
          </el-form-item>
        </el-col>
        <!-- 体积 -->
        <el-col :span="8">
          <el-form-item :label="$t('体积')">
            <span>{{ order.sumVolume }}m³</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 重量 -->
        <el-col :span="8">
          <el-form-item :label="$t('重量')">
            <span>{{ order.sumWeight }}Kg</span>
          </el-form-item>
        </el-col>
        <!-- 总控箱数 -->
        <el-col :span="8">
          <el-form-item :label="$t('总控货箱数')">
            <span>{{ order.sumNum }}</span>
          </el-form-item>
        </el-col>
        <!-- 剩余放货箱数 -->
        <el-col :span="8">
          <el-form-item :label="$t('剩余放货箱数')">
            <span>{{order.sumNum - order.releaseNum	}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 邮库/到仓时间 -->
        <el-col :span="8">
          <el-form-item :label="$t('卸柜/到仓时间')">
            <span>{{ order.unloadTime }}</span>
          </el-form-item>
        </el-col>
        <!-- 订单限制修改收货人 -->
        <el-col :span="8">
          <el-form-item :label="$t('订单限制修改收货人')">
            <span>{{ order.isLimitUpdateConsignee ? $t('是') : $t('否') }}</span>
          </el-form-item>
        </el-col>
        <!-- 订单锁定收货人天数 -->
        <el-col :span="8" v-if="order.isLimitUpdateConsignee">
          <el-form-item :label="$t('订单锁定收货人天数')">
            <span>{{ order.lockConsigneeDay }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="order.isLimitUpdateConsignee">
        <!-- 放货锁定收货人到期时间 -->
        <el-col :span="12">
          <el-form-item :label="$t('放货锁定收货人到期时间')" label-width="180px">
            <span>{{ order.lockConsigneeTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider>{{$t('修改信息')}}</el-divider>

      <el-row :gutter="20">
        <!-- 订单限制修改收货人 -->
        <el-col :span="8">
          <el-form-item :label="$t('订单限制修改收货人')">
            <el-radio-group v-model="form.newIsLimitUpdateConsignee">
              <el-radio :label="true">{{$t('是')}}</el-radio>
              <el-radio :label="false">{{$t('否')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- 订单锁定收货人天数 -->
        <el-col :span="8">
          <el-form-item :label="$t('订单锁定收货人天数')" required>
            <el-input-number :min="0" v-model="form.newLockConsigneeDay" :disabled="!form.newIsLimitUpdateConsignee"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 放货锁定收货人到期时间 -->
        <el-col :span="12">
          <el-form-item :label="$t('放货锁定收货人到期时间')" label-width="180px">
            <span>{{ newLockConsigneeTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 修改原因 -->
        <el-col :span="24">
          <el-form-item :label="$t('修改原因')">
            <el-input type="textarea" v-model="form.reasonZh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 附件 -->
        <el-col :span="24">
          <el-form-item :label="$t('附件')">
            <file-upload v-model="form.annex" :fileType="fileType"></file-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <work-flow xmlkey="order_consignee_limit_change" v-model="form.ccIds"></work-flow>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{$t('取消')}}</el-button>
      <el-button v-if="applyStatus === 1" type="primary" @click="handleGoBpm">{{$t('审批中')}}</el-button>
      <el-button v-else type="primary" @click="handleSubmit">{{$t('确定')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import WorkFlow from '@/components/WorkFlow/index.vue'
import FileUpload from '@/components/FileUpload/index.vue'
import { applyCargoControlApproval, getLimitUpdateInfo } from '@/api/ecw/orderCargoControl'
import dayjs from 'dayjs'
import { getApproval } from '@/api/ecw/order'
export default {
  components:{
    FileUpload,
    WorkFlow
  },
  props:{
    order: Object
  },
  data() {
    return {
      // 是否显示弹窗
      show: true,
      fileType: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf", 'jpg', 'jpeg', 'png', 'mp4', 'mov', 'avi', 'mp3'],
      applyStatus: 0, // 审批状态: 1 处理中 2 通过 3 不通过 4 已取消
      bpmId: null, // 审批流程ID
      form: {
        // 申请类型：此处应该是 61 放货限制修改申请 62 海外仓修改申请
        applyType: 61,
        // 新的是否限制修改收货人
        newIsLimitUpdateConsignee: false,
        // 新的放货锁定收货人天数
        newLockConsigneeDay: '',
        // 修改原因
        reasonZh: '',
        // 附件
        annex: '',
        ccIds: []
      },
      // 审批信息
      approvalDetail: null
    }
  },
  computed:{
    // 当订单已卸柜/到仓，则时间为卸柜/到仓时间 + 锁定收货人天数，否则为空
    newLockConsigneeTime(){
      if(!this.order.unloadTime || !this.form.newIsLimitUpdateConsignee || !this.form.newLockConsigneeDay){
        return '-'
      }
      return dayjs(this.order.unloadTime).add(this.form.newLockConsigneeDay, "day").format('YYYY-MM-DD HH:mm:ss')
    }
  },
  watch:{
    // 不限制则天数清空
    'form.newIsLimitUpdateConsignee'(val){
      if(!val){
        this.form.newLockConsigneeDay = ''
      }
    }
  },
  mounted() {
    this.form.newIsLimitUpdateConsignee = !!this.order.isLimitUpdateConsignee
    if(this.form.newIsLimitUpdateConsignee){
      this.form.newLockConsigneeDay = this.order.lockConsigneeDay
    }
    // 根据订单获取审批详情
    this.getApply()
  },
  methods:{
    getApply(){
      // 先重置
      this.applyStatus = 0
      getLimitUpdateInfo(this.order.orderId).then(res => {
        const data = res.data
        console.log({data})
        if(data.applyType === this.form.applyType){
          this.form.newIsLimitUpdateConsignee = data.newIsLimitUpdateConsignee
          this.form.newLockConsigneeDay = data.newLockConsigneeDay
          this.form.reasonZh = data.reasonZh
          this.form.annex = data.annex
          this.form.ccIds = data.ccIds?.split(",").filter(item => !!item).map(item => Number(item)) || []

          this.applyStatus = data.applyStatus
          this.bpmId = data.formId
          /* // 如果是申请中，则需要查询审批数据
          if(this.applyStatus === 1){
            this.getApproval()
          } */
        }
      })
    },
    /* getApproval(){
      getApproval(this.id).then(res => {
        this.approvalDetail = res.data
      })
    }, */
    handleGoBpm(){
      console.log("跳转审批页面，待完善")
      this.handleClose()
      this.$router.push({
        path: "/bpm/process-instance/detail",
        query: {
          id: this.bpmId
        }
      })
    },
    handleClose(){
      this.show = false
      this.$emit("close")
    },
    handleSubmit(){
      const data = {
        ...this.form,
        ccIds: this.form.ccIds.join(','),
        orderId: this.order.orderId
      }
      applyCargoControlApproval(data).then(res => {
        this.$message.success(this.$t('操作成功'))
        this.$emit('success')
      })
    }
  }
}
</script>