TransferCargo.vue

<template>
    <el-dialog :title="$t('调货')" visible :before-close="closeDialog" :close-on-click-modal="false" width="800px">
      <!--调货-->
      <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="150px" v-if="detail" >
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('收货人')">
              {{detail.consigneeName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('收货人电话')">
              {{detail.consigneeCountryCode}} {{detail.consigneePhone}}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('选择控货订单')">
              <el-select v-model="formData.orderIds" :placeholder="$t('请选择控货中的订单')" multiple>
                <el-option v-for="item in orders" :label="item.orderNo" :value="item.orderId" :key="item.orderId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table :data="selectedOrders" border>
          <el-table-column :label="$t('订单号')">
              {{detail.orderNo}}
          </el-table-column>
          <el-table-column :label="$t('目的地')">
            <template slot-scope="{row}">
              {{row.objectiveName}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('总控货数')">
            <template slot-scope="{row}">
              {{row.sumNum}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('放货箱数')">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.releaseNum" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('体积') + '(m³)'">
            <template slot-scope="{row}">
              {{row.sumVolume}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('重量') + '(kg)'">
            <template slot-scope="{row}">
              {{row.sumWeight}}
            </template>
          </el-table-column>
        </el-table>

        <el-form-item :label="$t('备注')" prop="remarks" class="mt-10">
          <el-input v-model="formData.remarks" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('控货手机号')" prop="field117" style="margin-top:20px">
          {{detail.consigneeCountryCode}} {{detail.phone}}
        </el-form-item>
        <el-form-item :label="$t('手机验证码')" prop="code">
          <el-input v-model="formData.code" :placeholder="$t('请输入手机验证码')" clearable class="w-150 mr-10"></el-input>
          <send-sms-code :order-id="detail.orderId" scene="5" />
        </el-form-item>
        <div class="page-title">{{$t('审批流程')}}</div>
        <work-flow v-model="ccIdArr" xmlkey="transfer_goods" />
        <el-form-item label="" style="margin-top:20px">
          <el-button type="success" @click="submit">{{$t('提交申请')}}</el-button>
          <el-button type="default" @click="closeDialog">{{$t('关闭')}}</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
</template>
<script>
import {createPick, getRleaseInfo, seasoningCondimentsSelect, updateApply} from '@/api/ecw/orderCargoControl'
import AreaCodeSelector from '@/components/AreaCodeSelector'
import SendSmsCode from '@/views/ecw/order/components/SendSmsCode'
import WorkFlow from '@/components/WorkFlow'
export default {
    props:{
        orderId: [String, Number],
        cargoControlPickId: Number
    },
    components: {AreaCodeSelector, SendSmsCode, WorkFlow},
    data(){
        return {
            show: false,
            detail: null,
            ccIdArr: [],
            formData:{
              applyType: 9, // 调货审核
              ccIds: ''
            },
            rules:{
              consigneeName: {required: true, message: this.$t('请填写收货人')},
              code: {required: true, message: this.$t('请填写验证码')}
            },
            orders: [],
            selectedOrders:[]
        }
    },
    watch:{
      'formData.orderIds'(val){
        this.selectedOrders = this.orders.filter(item => val.indexOf(item.orderId) > -1)
      },
      ccIdArr(val){
        this.formData.ccIds = val.join(',')
      }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
          getRleaseInfo(this.orderId).then(res => this.detail = res.data)
          seasoningCondimentsSelect({orderId: this.orderId}).then(res => {
            this.orders = res.data
          })
        },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        submit(){
          this.$refs.form.validate(valid => {
            if(!valid){
              return false
            }
            console.log('submit')
            updateApply(Object.assign({
              cargoControlPickId: this.cargoControlPickId,
              orderBackPageVOList: this.selectedOrders,
              orderId: this.orderId
            }, this.formData)).then(res => {
              this.$message.success(this.$t('操作成功'))
              this.show = false
              this.$emit('success')
            })
          })
          

        }
    }
}
</script>
<style lang="scss" scoped>
.title{
  font-size:16px;
  margin:20px 0;
  display:flex;
  align-items:center;
  &:before{
    content: '';
    width:5px;
    height: 15px;
    background:#666;
    margin-right:10px;
  }
}
</style>