Release.vue

<template>
    <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false" width="1000px">
      <el-form v-if="agreement"  ref="form" :model="formData" :rules="rules" size="small" label-width="100px" >
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('订单号')">
              {{detail.orderNo}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('总箱数')">
              {{detail.sumNum}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('体积')">
              {{detail.sumVolume}}m³
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('重量')">
              {{detail.sumWeight}}kg
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('总控货箱数')">
              {{detail.sumNum}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('剩余放货箱数')">
              {{detail.sumNum - detail.releaseNum	}}
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">{{$t('请填写放货信息')}}</div>
        <div class="flex">
          <el-form-item :label="$t('收货人')" prop="consigneeName">
            <el-input v-model="formData.consigneeName" :placeholder="$t('请输入收货人')" clearable class="w-150" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('收货人电话')" prop="consigneePhone">
            <!-- <el-input v-model="formData.field109" :placeholder="$t('区号')" clearable class="w-150"></el-input> -->
            <area-code-selector v-model="formData.consigneeCountryCode" class="w-150" />
            <el-input v-model="formData.consigneePhone" :placeholder="$t('请输入收货人电话')" clearable class="w-150 ml-10"></el-input>
          </el-form-item>
          <el-form-item :label="$t('收货人邮箱')" prop="consigneeEmail">
            <el-input v-model="formData.consigneeEmail" :placeholder="$t('请输入收货人邮箱')" clearable class="w-150" ></el-input>
          </el-form-item>
        </div>
        <el-table :data="[formData]" border class="release-table">
          <el-table-column :label="$t('控货箱数')">
              {{detail.sumNum - detail.releaseNum	}}
          </el-table-column>
          <el-table-column :label="$t('放货箱数')">
            <template slot-scope="{row}">
              <el-form-item prop="pickNum" label-width="0" class="mb-0">
                <el-input type="number" v-model.number="row.pickNum" placeholder="" clearable></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('体积') + '(m³)'">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickVolume" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('重量') + '(kg)'">
            <template slot-scope="{row}">
              <el-input type="number" v-model.number="row.pickWeight" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')">
            <template slot-scope="{row}">
              <el-input v-model="row.remarks" placeholder="" clearable></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item :label="$t('控货手机号')" prop="field117" style="margin-top:20px">
          <el-input :value="'+' + detail.dialCode + detail.phone" readonly :placeholder="$t('请输入控货手机号')" >
          </el-input>
        </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>
          <!-- <el-button type="success">{{ $t('获取验证码') }}</el-button> -->
          <send-sms-code :order-id="detail.orderId" scene="5" />
        </el-form-item>
        <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>

      <div v-else>
          <!-- <release-agreement /> -->
          <need-know ref="needKnow" keyname="control" />
          <div style="margin-top:30px">
              <el-button type="primary" @click="agreement=true">{{$t('我同意')}}</el-button>
              <!-- <el-button type="primary" @click="$refs.needKnow.download()">{{ $t('保存协议') }}</el-button> -->
              <el-button @click="closeDialog">{{$t('关闭')}}</el-button>
          </div>
      </div>
    </el-dialog>
</template>
<script>
import {getOrder} from '@/api/ecw/order'
import {createPick, getReleaseInfo} from '@/api/ecw/orderCargoControl'
import AreaCodeSelector from '@/components/AreaCodeSelector'
import SendSmsCode from '@/views/ecw/order/components/SendSmsCode'
import NeedKnow from '@/components/NeedKnow'
import Decimal from 'decimal.js'
export default {
    props:{
        orderId: [String, Number]
    },
    components: {AreaCodeSelector, SendSmsCode, NeedKnow},
    data(){
        return {
            show: false,
            detail: null,
            formData:{
              "pickNum": 0,
              "pickQuantity": 0,
              "pickVolume": 0,
              "pickWeight": 0,
              "remarks": "",
            },
            agreement: false, // 是否同意协议
        }
    },
    watch:{
      'formData.pickNum'(pickNum){
        this.$set(this.formData, 'pickVolume', Decimal(this.detail.sumVolume).mul(pickNum).div(this.detail.sumNum).toFixed(2))
        this.$set(this.formData, 'pickWeight', Decimal(this.detail.sumWeight).mul(pickNum).div(this.detail.sumNum).toFixed(2))
      }
    },
    computed:{
        rules(){
          return {
            consigneeName: {required: true, message: this.$t('请填写收货人')},
            code: {required: true, message: this.$t('请填写验证码')},
            pickNum: {
              type: 'number',
              max: this.detail.sumNum - this.detail.releaseNum,
              message: this.$t("不能超过剩余箱数"),
              trigger: 'change'
            }
          }
        },
        title(){
            let t = this.$t('放货')
            if(this.detail){
                t += '-' + this.detail.orderNo
            }
            return t
        }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
            getReleaseInfo(this.orderId).then(res => {
              this.detail = res.data
              this.$set(this.formData, 'consigneeName', res.data.consigneeName)
              this.$set(this.formData, 'consigneeCountryCode', '+' + res.data.consigneeCountryCode)
              this.$set(this.formData, 'consigneePhone', res.data.consigneePhone)
              this.$set(this.formData, 'consigneeEmail', res.data.consigneeEmail)
            })
        },
        closeDialog(){
          this.show = false
          this.$emit('close')
        },
        submit(){
          this.$refs.form.validate(valid => {
            if(!valid){
              return false
            }
            createPick(Object.assign({orderId: this.orderId}, this.formData)).then(res => {
              this.$message.success(res.msg || 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;
  }
}
::v-deep .release-table .el-form-item__error{
    position: static;
}
</style>