delay.vue

<template>
  <div class="app-container">
    <el-card>
      <el-form :model="handlerParams" ref="queryForms" size="small" :inline="true"  label-width="180px" class="card">

        <el-row>
          <el-form-item :label="$t('客户名称')+':'">
              <span style="margin-left: 8px;">{{handlerParams.customerName}}</span>
          </el-form-item>
        </el-row>
        <el-row >
          <el-form-item :label="$t('原计划掉入公海池时间')+':'">
            <span style="margin-left: 8px;">{{handlerParams.orgEstimateEnterOpenSeaTime}}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('申请延期后掉入时间')+':'">
              <el-date-picker
                v-model="handlerParams.estimateEnterOpenSeaTime"
                type="date"
                :picker-options="pickerOptions"
                value-format="timestamp"
                :placeholder="$t('请输入申请延期后掉入时间')">
              </el-date-picker>
          </el-form-item>

        </el-row>
        <el-row :span="8">
          <el-form-item :label="$t('凭证')+':'" size="medium" :require="true">
            <upload v-model="handlerParams.voucher" :limit="1"></upload>
          </el-form-item>
        </el-row>
        <el-row :span="8">
          <el-form-item :label="$t('申请理由')+':'" size="medium">
            <el-input style="width: 500px;"  type="textarea" v-model="handlerParams.reason"  />
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!-- 只有不需要预付才需要审核 -->
    <template>
      <div class="page-title">{{$t('审批流程')}}</div>
      <work-flow xmlkey="quotation_customer_delay_public" v-model="ccIdArr" />
    </template>
    <div slot="footer" class="dialog-footer">
      <!-- bpmStatus
      异常流程状态，1处理中2通过3不通过4已取消
      待审核可能没有bpmStatus字段
      -->
      <template v-if="handlerParams.status == 1">
        <el-button type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+handlerParams.formId)">{{$t('审核中')}}</el-button>
        <el-button plain type="primary" @click="cancelAudit">{{$t('取消审核')}}</el-button>
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
      </template>
      <template v-else>
        <el-button  type="primary" @click="submitForm">{{$t('提交')}}</el-button>
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
      </template>
    </div>
  </div>
</template>

<script>
  import upload from '@/components/ImageUpload'
  import {getDictData, getDictDatas} from  '@/utils/dict'
  import {getCustomer,getDelayInfo,creatDelayApproval,cancelDelayApproval} from '@/api/ecw/customer'
  import WorkFlow from '@/components/WorkFlow'
  import {cancelProcessInstance} from '@/api/bpm/processInstance'
  export default {
    name: "Delay",
    components: {
      upload, WorkFlow
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        handlerParams:{
        },
        customerData:{},
        showWorkFlow: false, // 是否显示工作流
        dateRangeCreateTime:[],
        pickerOptions: {
        },
        ccIdArr:[]
      };
    },
  watch:{
    ccIdArr(){
      this.$set(this.handlerParams, 'ccIds', this.ccIdArr.join(','))
    }
  },
    created() {
      if(this.$route.query.id){
        this.getData(this.$route.query.id)
      }
    },
    methods: {
       getData(id){
         getCustomer(id).then(response => {
            this.customerData = response.data
            this.getDely(id)
         });
      },
      getDely(id){
        console.log(this.customerData)
        let that = this
        getDelayInfo({customerId:id}).then(res=>{
          if(res.data){
              that.handlerParams = res.data
              if(!that.handlerParams.orgEstimateEnterOpenSeaTime){
                that.handlerParams.orgEstimateEnterOpenSeaTime = that.getNowDate(that.customerData.enterOpenSeaTime)
              }
              if(that.handlerParams.estimateEnterOpenSeaTime){
                that.handlerParams.estimateEnterOpenSeaTime = that.getTime(that.handlerParams.estimateEnterOpenSeaTime)
              }else{
                that.$set(that.handlerParams,'estimateEnterOpenSeaTime',that.customerData.estimateEnterOpenSeaTime)
              }
              if(that.handlerParams.ccIds){
                var ids = that.handlerParams.ccIds.split(',')
                ids.map(v=>{
                  that.ccIdArr.push(parseInt(v))
                })

              }
              console.log(that.ccIdArr)
            }else{
              that.handlerParams = {
                  customerId:that.customerData.id,
                  customerName:that.customerData.name,
                  orgEstimateEnterOpenSeaTime: that.getNowDate(that.customerData.enterOpenSeaTime)
              }
            }
            that.pickerOptions = {
              disabledDate: (time) => {
                var date = new Date(that.handlerParams.orgEstimateEnterOpenSeaTime);
                  return (
                    time.getTime() < date.getTime()
                  );
                },
              }
        })
      },
      submitForm(){
          // if(!this.handlerParams.orderExceptionHandlerResult){
          //   this.$modal.msgError(this.$t('请选择处理结果'));
          //   return
          // }

            // if(!this.handlerParams.fileList||this.handlerParams.fileList.length==0){
            //   this.$modal.msgError(this.$t('请上传报关资料'));
            //   return
            // }
            this.$set(this.handlerParams,'createTime',this.formatDate())
            var params = Object.assign({},this.handlerParams)
            // var ccIds = Array.isArray(this.handlerParams.ccIds) ? this.handlerParams.ccIds.join(',') : this.handlerParams.ccIds
            // params.ccIds = ccIds
            params.voucher = Array.isArray(this.handlerParams.voucher) ? this.handlerParams.voucher.join(',') : this.handlerParams.voucher

            params.estimateEnterOpenSeaTime = this.getNowDate(this.handlerParams.estimateEnterOpenSeaTime)
          creatDelayApproval(params).then(res=>{
              this.$modal.msgSuccess(this.$t('提交成功'));
              this.$store.dispatch('tagsView/delCurrentView')
          })
      },
      getTime(dateTime){
        var date = new Date(dateTime);
        return date.getTime()
      },
      getNowDate(time) {
            if(time){
              var date = new Date(time);
            }else{
              var date = new Date();
            }

             var year = date.getFullYear() // 年
             var month = date.getMonth() + 1; // 月
             var day = date.getDate(); // 日
              // 给一位数的数据前面加 “0”
             if (month >= 1 && month <= 9) {
                  month = "0" + month;
             }
              if (day >= 0 && day <= 9) {
                  day = "0" + day;
              }
        return year + "-" + month + "-" + day

       },
       formatDate() {
         var date = new Date()
         var year = date.getFullYear()
         var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
         var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
         var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
         var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
         var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
         return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
       },
      // 取消审核
      cancelAudit(){
        this.$prompt("请输入取消原因", {
          inputPattern: /[\S]+/,
          inputErrorMessage: this.$t('不能为空')
        }).then(({value}) => {
          console.log(this.handlerParams.approvalId)
          return cancelDelayApproval({approveId:this.handlerParams.approvalId,reason:value})
        })
        .then(res => {
          this.$store.dispatch('tagsView/delCurrentView')
        })
      }
    }
  };
</script>

<style scoped>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card{
    margin-top: 20px;
  }
  .dialog-footer{
    padding: 40px;
    width: 60%;
    align-items: center;
    display: flex;
    /* justify-content: space-between; */
  }
</style>