<template>
    <div>
          <el-form ref="form" :model="formData" :rules="rules" inline  label-position="top">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="关键信息" name="1">
                                    <el-form-item label="装车单号" prop="ldNo">
                                    <el-input v-model="formData.ldNo" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态" prop="status">
                                        <el-select  v-model="formData.status"  filterable  placeholder="请选择" disabled>
                                            <el-option label="创建" value="10"></el-option>
                                            <el-option label="部分装车" value="30"></el-option>
                                            <el-option label="完全装车" value="40"></el-option>
                                            <el-option label="部分交接" value="50"></el-option>
                                            <el-option label="完全交接" value="60"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="装车单类型" prop="ldType">
                                        <el-select  v-model="formData.ldType"  filterable  placeholder="请选择" :disabled="mode==='detail'">
                                            <el-option label="无限制" value="FREE"></el-option>
                                            <el-option label="按承运商" value="CARRIER"></el-option>
                                            <el-option label="按线路" value="LINE"></el-option>
                                            <el-option label="按收货人" value="CONSIGNEE"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="车牌号" prop="vehicleNo">
                                        <el-input v-model="formData.vehicleNo" :disabled="mode==='detail'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="出库单状态" prop="soStatus">
                                        <el-select  v-model="formData.soStatus"  filterable  placeholder="请选择" disabled>
                                            <el-option label="完全拣货" value="60"></el-option>
                                            <el-option label="完全发运" value="80"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="是否已预约月台" prop="isAppointDock">
                                      <el-checkbox  v-model="formData.isAppointDock" true-label="Y" false-label="N" :disabled="mode==='detail'"></el-checkbox>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                      </el-col>
                      <el-col :span="12">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="基本信息" name="2">
                                    <el-form-item label="预计装车时间从" prop="fmLdTime">
                                        <el-date-picker
                                            v-model="formData.fmLdTime"
                                            type="datetime"
                                            :disabled="mode==='detail'"
                                            placeholder="选择日期时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="预计装车时间到" prop="toLdTime">
                                        <el-date-picker
                                            v-model="formData.toLdTime"
                                            type="datetime"
                                            :disabled="mode==='detail'"
                                            placeholder="选择日期时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="驾驶员" prop="driver">
                                        <el-input v-model="formData.driver" :disabled="mode==='detail'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="车型" >
                                        <el-select  v-model="formData.vehicleType"  filterable  placeholder="请选择" :disabled="mode==='detail'">
                                          <el-option label="牵引车" value="TR"></el-option>
                                          <el-option label="大型车辆" value="VE"></el-option>
                                          <el-option label="小型车辆" value="HI"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="装车交接人" prop="deliverOp">
                                        <el-input v-model="formData.deliverOp" :disabled="mode==='detail'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="集装箱号" prop="loadCode">
                                        <el-input v-model="formData.loadCode" :disabled="mode==='detail'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="装车交接时间"
                                      prop="deliverTime">
                                        <el-date-picker
                                            v-model="formData.deliverTime"
                                            type="datetime"
                                            :disabled="mode==='detail'"
                                            placeholder="选择日期时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="铅封号" prop="sealCode">
                                        <el-input v-model="formData.sealCode" :disabled="mode==='detail'"></el-input>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                        </el-col>
                </el-row>
                <el-row :gutter="40" class="row-mrg-t">
                    <el-col :span="24">
                      <el-collapse  v-model="activeNames" >
                        <el-collapse-item title="承运商" name="3">
                          <el-form-item label="承运商名称" prop="carrierCode">
                              <PublicQuery
                              title="承运商"
                              single
                              :rowData.sync="carrierData"
                              cfgKey="OUB_TRANSPORT_SUPPLIER"
                              baseUrl="/oub_web/oubweb"
                              :disabled="mode==='detail'"
                              :valueField.sync="formData.carrierCode"
                              :textField.sync="formData.carrierCode"
                            ></PublicQuery>
                          </el-form-item>
                          <el-form-item label="承运商电话" prop="carrierTel">
                              <el-input v-model="formData.carrierTel" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="承运商地址" prop="carrierAddressName">
                              <el-input v-model="formData.carrierAddressName" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="联系人名称" prop="carrierContactName">
                              <el-input v-model="formData.carrierContactName" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="联系人电话" prop="carrierContactTel">
                              <el-input v-model="formData.carrierContactTel" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="联系人地址" prop="carrierContactAddressName">
                              <el-input v-model="formData.carrierContactAddressName" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="路线" prop="line">
                              <PublicQuery
                              title="路线"
                              :disabled="mode==='detail'"
                              single
                              :rowData.sync="lineData"
                              cfgKey="tesLine"
                              baseUrl="/oub_web/oubweb"
                              :valueField.sync="formData.line"
                              :textField.sync="formData.lineName"
                            ></PublicQuery>
                          </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                    </el-col>
                </el-row>
                <el-row class="row-mrg-t">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                        <el-collapse-item title="收货人" name="4">
                          <el-form-item
                          label="收货人编码"
                          prop="consigneeCode">
                            <PublicQuery
                            title="收货人编码"
                            :disabled="mode==='detail'"
                            single
                            :rowData.sync="consigneeData"
                            cfgKey="oubWmsConsigneeCode"
                            baseUrl="/oub_web/oubweb"
                            :valueField.sync="formData.consigneeCode"
                            :textField.sync="formData.consigneeCode"
                          ></PublicQuery>
                          </el-form-item>
                          <el-form-item
                          label="收货人名称"
                          prop="consigneeName">
                            <el-input v-model="formData.consigneeName" :disabled="mode==='detail'"></el-input>
                          </el-form-item>
                          <el-form-item
                          label="收货人电话"
                          prop="consigneeTel">
                            <el-input v-model="formData.consigneeTel" :disabled="mode==='detail'"></el-input>
                          </el-form-item>
                          <el-form-item
                          label="收货人地址"
                          prop="consigneeAddr">
                            <el-input v-model="formData.consigneeAddr" :disabled="mode==='detail'"></el-input>
                          </el-form-item>
                          <el-form-item
                          label="联系人名称"
                          prop="contactName">
                            <el-input v-model="formData.contactName" :disabled="mode==='detail'"></el-input>
                          </el-form-item>
                          <el-form-item
                          label="联系人电话"
                          prop="contactTel">
                            <el-input v-model="formData.contactTel" :disabled="mode==='detail'"></el-input>
                          </el-form-item>
                          <el-form-item
                          label="联系人地址"
                          prop="contactAddr">
                            <el-input v-model="formData.contactAddr" :disabled="mode==='detail'"></el-input>
                          </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </el-row>
                <el-row class="row-mrg-t" v-if="mode =='detail'">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="按订单装载" name="5">
                        <el-button v-auth="50200110327" type="primary" @click="doAddOrder" v-if="mode =='detail' && variateFourteen!== false">添加订单</el-button>
                        <el-button v-auth="50200110307" type="primary" @click="doLoadingConfirmation('confirm')" v-if="mode =='detail' && variateFifteen!== false">装载确认</el-button>
                        <el-button v-auth="50200110308" type="primary" @click="doDelete('delete')" v-if="mode =='detail' && variateSixteen!== false">删除</el-button>
                        <el-table
                          :data="orderLoading"
                          @selection-change="handleSelectionOrderChange">
                          <table-column
                            type="selection"
                            width="55">
                          </table-column>
                          <table-column
                            prop="rowNum"
                            label="序号">
                          </table-column>
                          <table-column
                            prop="soNo"
                            label="出库单号">
                          </table-column>
                          <table-column
                            prop="logisticNo"
                            label="物流单号">
                          </table-column>
                          <table-column
                            label="出库单类型">
                            <template slot-scope="scope">
                              {{ $utils.keyMatcher(scope.row.soType, $keys.stockOut.soType).name }}
                            </template>
                          </table-column>
                          <table-column
                          label="装车状态">
                            <template slot-scope="scope">
                              {{ $utils.keyMatcher(scope.row.ldStatus, $keys.stockOut.loadingList.status).name }}
                            </template>
                          </table-column>
                          <table-column
                            label="预计发货时间">
                            <template slot-scope="scope">
                              从: {{scope.row.fmEtd}}
                              <br/>
                              到: {{scope.row.toEtd}}
                            </template>
                          </table-column>
                          <table-column
                          label="操作" width="100" fixed="right">
                            <template slot-scope="scope">
                              <el-tooltip content="删除" placement="top">
                                <el-button
                                  size="mini"
                                  type="danger"
                                  icon="el-icon-delete"
                                  plain
                                  circle
                                  @click="doDelete(scope.row)"></el-button>
                              </el-tooltip>
                              <el-tooltip content="装载确认" placement="top">
                                <el-button
                                  size="mini"
                                  type="primary"
                                  icon="el-icon-edit"
                                  plain
                                  circle
                                  @click="doLoadingConfirmation(scope.row)"></el-button>
                              </el-tooltip>
                            </template>
                          </table-column>
                        </el-table>
                      </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </el-row>
                <el-row class="row-mrg-t" v-if="mode =='detail'">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="按扫描包裹装卸" name="6">
                        <el-button v-auth="50200110311" type="primary" @click="doScanParcel" v-if="mode =='detail' && variateEleven!== false">扫描包裹</el-button>
                        <el-button v-auth="50200110312" type="primary" @click="doScanConfirmation('confirm')" v-if="mode =='detail' && variateTwelve!== false">装载确认</el-button>
                        <el-button v-auth="50200110312" type="primary" @click="doScanDelete('delete')" v-if="mode =='detail' && variateThirteen!== false">删除</el-button>
                        <el-table
                          :data="getScanQuery"
                          @selection-change="handleSelectionScanChange">
                          <table-column
                            type="selection"
                            width="55">
                          </table-column>
                          <table-column
                            prop="rowNum"
                            label="序号">
                          </table-column>
                          <table-column
                            prop="toId"
                            label="箱号">
                          </table-column>
                          <table-column
                            prop="soNo"
                            label="出库单号">
                          </table-column>
                          <table-column
                            prop="logisticNo"
                            label="物流单号">
                          </table-column>
                          <table-column
                            prop="wsaQtyEa"
                            label="总数量">
                          </table-column>
                          <table-column
                            prop="wsaGrossWeight"
                            label="总重量">
                          </table-column>
                          <table-column
                            prop="wsaCubic"
                            label="总体积">
                          </table-column>
                          <table-column
                            prop="consigneeCode"
                            label="收货人编码">
                          </table-column>
                          <table-column
                            prop="consigneeName"
                            label="收货人名称">
                          </table-column>
                          <table-column
                            prop="consigneeTel"
                            label="收货人电话">
                          </table-column>
                          <table-column
                            prop="consigneeAddr"
                            label="收货人地址">
                          </table-column>
                          <table-column
                            prop="contactName"
                            label="联系人名称">
                          </table-column>
                          <table-column
                            prop="contactTel"
                            label="联系人电话">
                          </table-column>
                          <table-column
                            prop="contactAddr"
                            label="联系人地址">
                          </table-column>
                          <table-column
                          label="操作" width="100" fixed="right">
                            <template slot-scope="scope">
                              <el-tooltip content="删除" placement="top">
                                <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    plain
                                    circle
                                    @click="doScanDelete(scope.row)"></el-button>
                              </el-tooltip>
                              <el-tooltip content="装载确认" placement="top">
                                <el-button
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-edit"
                                    plain
                                    circle
                                    @click="doScanConfirmation(scope.row)"></el-button>
                              </el-tooltip>
                            </template>
                          </table-column>
                        </el-table>
                      </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </el-row>
                <el-row class="row-mrg-t" v-if="mode =='detail'">
                  <el-col :span="24">
                <el-collapse v-model="activeNames" >
                  <el-collapse-item title="待装车明细" name="7">
                    <el-button v-auth="50200110316" type="primary" @click="doAddPickingDetail" v-if="mode =='detail' && variateSex !== false">添加拣货明细</el-button>
                    <el-button v-auth="50200110317" type="primary" @click="doPickingConfirmation('confirm')" v-if="mode =='detail' && variateEight !== false">装载确认</el-button>
                    <el-button v-auth="50200110319" type="primary" @click="doPickingDelete('delete')" v-if="mode =='detail' && variateSev !== false">删除</el-button>
                    <el-button v-auth="50200110318" type="primary" @click="doGenerateLoadingDetails" v-if="mode =='detail' && variateNine !== false">生成装车单</el-button>
                    <el-table
                      :data="getForLoading"
                      @selection-change="handlePickingChange">
                      <table-column
                        type="selection"
                        width="55">
                      </table-column>
                      <table-column
                        prop="lineNo"
                        label="行号">
                      </table-column>
                      <table-column
                        prop="status"
                        label="装车状态">
                      </table-column>
                      <table-column
                        prop="soNo"
                        label="出库单号">
                      </table-column>
                      <table-column
                        prop="owner"
                        label="货主">
                      </table-column>
                      <table-column
                        prop="sku"
                        label="商品">
                      </table-column>
                      <table-column
                        prop="uomDesc"
                        label="单位">
                      </table-column>
                      <table-column
                        prop="qtyUom"
                        label="数量">
                      </table-column>
                      <table-column
                        prop="loadQty"
                        label="装载数量">
                      </table-column>
                      <table-column
                        prop="wsaGrossWeight"
                        label="重量">
                      </table-column>
                      <table-column
                        prop="wsaCubic"
                        label="体积">
                      </table-column>
                      <table-column
                        prop="allocId"
                        label="分配ID">
                      </table-column>
                      <table-column
                        prop="allocStatus"
                        label="分配明细状态">
                      </table-column>
                      <table-column
                        prop="toId"
                        label="目标跟踪号">
                      </table-column>
                      <table-column
                        prop="packOp"
                        label="打包人">
                      </table-column>
                       <table-column
                        label="操作" width="100" fixed="right">
                        <template slot-scope="scope">
                          <el-tooltip content="删除" placement="top">
                            <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                circle
                                @click="doPickingDelete(scope.row)"></el-button>
                          </el-tooltip>
                          <el-tooltip content="装载确认" placement="top">
                            <el-button
                              size="mini"
                              type="primary"
                              icon="el-icon-edit"
                              plain
                              circle
                              @click="doPickingConfirmation(scope.row)"></el-button>
                          </el-tooltip>
                        </template>
                      </table-column>
                    </el-table>
                  </el-collapse-item>
                </el-collapse>
              </el-col>
                </el-row>
                <el-row class="row-mrg-t" v-if="mode =='detail'">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="已装车明细" name="8">
                        <el-button v-auth="50200110320" type="primary" @click="doCancelar" v-if="mode =='detail' && variateTen !== false">取消装车</el-button>
                        <el-table
                          :data="getEntityStatus"
                          @selection-change="handleCancelarChange">
                          <table-column
                            type="selection"
                            width="55">
                          </table-column>
                          <table-column
                            prop="lineNo"
                            label="行号">
                          </table-column>
                          <table-column
                            prop="status"
                            label="装车状态">
                          </table-column>
                          <table-column
                            prop="soNo"
                            label="出库单号">
                          </table-column>
                          <table-column
                            prop="owner"
                            label="货主">
                          </table-column>
                          <table-column
                            prop="sku"
                            label="商品">
                          </table-column>
                          <table-column
                            prop="uomDesc"
                            label="单位">
                          </table-column>
                          <table-column
                            prop="qtyUom"
                            label="数量">
                          </table-column>
                          <table-column
                            prop="loadQty"
                            label="装载数量">
                          </table-column>
                          <table-column
                            prop="wsaGrossWeight"
                            label="重量">
                          </table-column>
                          <table-column
                            prop="wsaCubic"
                            label="体积">
                          </table-column>
                          <table-column
                            prop="allocId"
                            label="分配ID">
                          </table-column>
                          <table-column
                            prop="allocStatus"
                            label="分配明细状态">
                          </table-column>
                          <table-column
                            prop="toId"
                            label="目标跟踪号">
                          </table-column>
                        </el-table>
                      </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </el-row>
                <el-row class="row-mrg-t" v-if="mode==='detail'">
                  <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                      <el-collapse-item title="操作信息" name="9">
                        <div class="operation-info">
                          <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorName}})</span>
                          <span>创建时间：{{formData.createTime}}</span>
                          <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierName}})</span>
                          <span>修改时间：{{formData.modifyTime}}</span>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-col>
                </el-row>
            </el-form>
            <div class="row-mrg-t" v-if="mode!=='detail'">
              <el-button v-auth="50200110204" type="primary" @click="submitForm" >保存</el-button>
              <el-button v-auth="50200110205" type="primary" @click="$router.back()">保存并新增</el-button>
            </div>
            <div class="row-mrg-t" v-if="mode =='detail'" style="float: right">
              <el-button v-auth="50200110321" type="primary" @click="doDeliveryConfirmation" v-if="variateFiv !== false">发货确认</el-button>
              <el-button v-auth="50200110322" type="primary" @click="doLoading" v-if="variateOne !== false">装车交接</el-button>
              <el-dropdown class="mrg-l" @command="toMore" v-if="variateTwo !== false">
                <el-button type="primary">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-auth="50200110324" command="doCancelShipmentByLdNo" v-if="variateThree !== false">取消发货</el-dropdown-item>
                  <el-dropdown-item v-auth="50200110325" command="doCancelDeliveryByLdNo" v-if="variateFour !== false">取消交接</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <add-pick :idNo="idNo" :isAddPick="isAddPick" @dialogClose="dialogClose" @doUpdataPage="doUpdataPage"></add-pick>
            <orders-detail :idNo="idNo" :idOrderDetail="idOrderDetail" @handleClose="handleClose"></orders-detail>
    </div>
</template>
<script>
import { time } from 'apec-fe-utils'
import AddPick from './childrenForm/addPicking-form'
import OrdersDetail from './childrenForm/ordersDetail-form'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('framework')
export default {
  components: {
    AddPick,
    OrdersDetail
  },
  computed: {
    ...mapState(['sysParamConfig']),
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.formData = this.$route.params.data
    }
    if (this.mode === 'detail') {
      this.formData = this.$route.params[0]
      this.orderLoading = this.$route.params[1]
      this.getScanQuery = this.$route.params[2]
      this.getForLoading = this.$route.params[3]
      this.getEntityStatus = this.$route.params[4]
    }
  },
  data () {
    return {
      idOrderDetail: false,
      isAddPick: false,
      variateOne: false,
      variateTwo: false,
      variateThree: false,
      variateFour: false,
      variateFiv: false,
      variateSex: false,
      variateSev: false,
      variateEight: false,
      variateNine: false,
      variateTen: false,
      variateEleven: false,
      variateTwelve: false,
      variateThirteen: false,
      variateFourteen: false,
      variateFifteen: false,
      variateSixteen: false,
      orderLoading: [],
      getScanQuery: [],
      getForLoading: [],
      getEntityStatus: [],
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      carList: [],
      goodsList: [],
      carrierData: {},
      consigneeData: {},
      lineData: {},
      formData: {
        status: '00',
        soStatus: '60',
        isAppointDock: 'N'
      },
      rules: {
        ldType: [
          { required: true, message: '装车单类型必填', trigger: 'change' }
        ],
      },
      pickingChange: [],
      cancelarChange: [],
      orderChange: [],
      scanChange: [],
      idNo: ''
    }
  },
  props: {

  },
  mounted () {
    this.idNo = this.formData.ldNo
    this.doUnavailableButton()
  },
  methods: {
    getData (url, param) {
      return this.$https.post(url, param)
    },
    doUpData () {
      const detailUrl = this.$API.stockOut.loadingList.getDetailInfo
      const detailParam = { ldNo: this.formData.ldNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      const url = this.$API.stockOut.loadingList.getDetailList
      const param = { ldNo: this.formData.ldNo }
      const getEntityStatus = this.$API.stockOut.loadingList.getEntityStatus
      const getSanUrl = this.$API.stockOut.loadingList.getScanQuery
      const getForLoading = this.$API.stockOut.loadingList.getForLoading
      this.$https.all([this.getData(url, param), this.getData(detailUrl, detailParam), this.getData(getSanUrl, detailParam), this.getData(getForLoading, detailParam), this.getData(getEntityStatus, detailParam)]).then(res => {
        this.formData = res[0].data
        this.orderLoading = res[1].rows
        this.getScanQuery = res[2].rows
        this.getForLoading = res[3].rows
        this.getEntityStatus = res[4].rows
        this.doUnavailableButton()
      })
    },
    doUpdataPage () {
      this.doUpData()
    },
    // 控制不同按钮展示
    doUnavailableButton () {
      // header
      if (~~this.formData.status < ~~'40') { // 创建、部分装车
        this.variateOne = false
        this.variateTwo = false
        this.variateFiv = false
      } else if (this.formData.status === '40') {
        if (this.formData.soStatus === '60') { // 完全拣货
          this.variateOne = false
          this.variateTwo = false
          this.variateFiv = true
        } else { // 完全发运
          this.variateOne = true
          this.variateFiv = false
          if (this.sysParamConfig['LOAD_ALLOW_STATUS'] === 'SP') { // 如果系统控制参数为SP(完全发运)
            this.variateTwo = false
          } else {
            this.variateTwo = true
            this.variateThree = true
            this.variateFour = false
          }
        }
      } else if (this.formData.status === '60') { // 完全交接
        this.variateOne = false
        this.variateTwo = true
        this.variateThree = false
        this.variateFour = true
        this.variateFiv = false
      }
      // detail明细功能按钮控制
      if (~~this.formData.status < ~~'40') { // 创建、部分装车
        this.variateSex = true
        this.variateSev = true
        this.variateEight = true
        this.variateNine = true
        this.variateEleven = true
        this.variateTwelve = true
        this.variateThirteen = true
        this.variateFourteen = true
        this.variateFifteen = true
        this.variateSixteen = true
        if (this.formData.status === '10') { // 创建
          this.variateTen = false
        } else {
          this.variateTen = true
        }
      } else if (~~this.formData.status >= ~~'40') { // >=完全装车
        if (this.formData.status === '40' && ((this.formData.soStatus === '60') || (this.formData.soStatus === '80' && this.sysParamConfig['LOAD_ALLOW_STATUS'] === 'SP'))) { // 完全拣货或者完全发运且系统控制参数为SP
          this.variateSex = true
          this.variateTen = true
          this.variateEleven = true
          this.variateFourteen = true
        } else {
          this.variateSex = false
          this.variateTen = false
          this.variateEleven = false
          this.variateFourteen = false
        }
        this.variateSev = false
        this.variateEight = false
        this.variateNine = false
        this.variateTwelve = false
        this.variateThirteen = false
        this.variateFifteen = false
        this.variateSixteen = false
      }
    },
    doCancelShipmentByLdNo () {
      const getCancelShipment = this.$API.stockOut.loadingList.getCancelShipment
      const param = { ldNos: this.formData.ldNo }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    doCancelDeliveryByLdNo () {
      const getCancelShipment = this.$API.stockOut.loadingList.getCancel
      const param = { ldNos: this.formData.ldNo }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    toMore (command, vmNode) {
      const urlkey = command
      const text = vmNode.$el.innerText
      if (urlkey === 'doCancelShipmentByLdNo') {
        this.doCancelShipmentByLdNo()
      } else {
        this.doCancelDeliveryByLdNo()
      }
    },
    doLoading () {
      const getCancelShipment = this.$API.stockOut.loadingList.getDeliveryByLdNo
      const param = { ldNos: this.formData.ldNo }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    dialogClose () {
      this.isAddPick = false
    },
    doDeliveryConfirmation () {
      const getCancelShipment = this.$API.stockOut.loadingList.getShipmentByLdNo
      const param = { ldNos: this.formData.ldNo }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    handlePickingChange (val) {
      this.pickingChange = val
    },
    handleCancelarChange (val) {
      this.cancelarChange = val.map(item => {
        return item.lineNo
      })
    },
    handleSelectionScanChange (val) {
      this.scanChange = val.map(item => {
        return item.toId
      })
    },
    // 取消装车
    doCancelar () {
      if (!this.cancelarChange.length) {
        this.$message('请选着一条记录')
        return false
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getCancelLineNo
      const param = { ldNo: this.formData.ldNo, lineNos: this.cancelarChange.join(',') }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 生成装车单
    doGenerateLoadingDetails () {
      if (!this.pickingChange.length) {
        this.$message('请选着一条记录')
        return false
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getNewLd
      const param = { entityArray: JSON.stringify(this.pickingChange), wmLdEntity: JSON.stringify(this.formData) }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 待装车明细的删除
    doPickingDelete (data) {
      let lineNos = ''
      if (data === 'delete') {
        if (!this.pickingChange.length) {
          this.$message('请选着一条记录')
          return false
        }
        lineNos = this.pickingChange.map(item => {
          return item.lineNo
        })
        lineNos = lineNos.join(',')
      } else {
        lineNos = data.lineNo
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getRemoveLineNo
      const param = { ldNo: this.formData.ldNo, lineNos: lineNos }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 待装车明细中的装载确认
    doPickingConfirmation (data) {
      if (data === 'confirm') {
        if (!this.pickingChange.length) {
          this.$message('请选着一条记录')
          return false
        }
      } else {
        this.pickingChange = []
        this.pickingChange.push(data)
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getBatchLoading
      const param = { entityArray: JSON.stringify(this.pickingChange) }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 添加练货明细
    doAddPickingDetail () {
      this.isAddPick = true
    },
    // 删除
    doScanDelete (data) {
      if (data === 'delete') {
        if (!this.scanChange.length) {
          this.$message('请选着一条记录')
          return false
        }
        this.scanChange = this.scanChange.join(',')
      } else {
        this.scanChange = data.toId
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getRemoveByTraceId
      const param = { ldNo: this.formData.ldNo, traceIds: this.scanChange }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 装载确认
    doScanConfirmation (data) {
      if (data === 'confirm') {
        if (!this.scanChange.length) {
          this.$message('请选着一条记录')
          return false
        }
        this.scanChange = this.scanChange.join(',')
      } else {
        this.scanChange = data.toId
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getByTraceId
      const param = { ldNo: this.formData.ldNo, traceIds: this.scanChange }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 扫描包裹
    doScanParcel () {
      alert('待确认开发')
    },
    // 按订单装载选择
    handleSelectionOrderChange (val) {
      this.orderChange = val.map(item => {
        return item.soNo
      })
    },
    handleClose () {
      this.idOrderDetail = false
    },
    // 添加订单
    doAddOrder () {
      this.idOrderDetail = true
    },
    // 装载确认
    doLoadingConfirmation (data) {
      if (data === 'confirm') {
        if (!this.orderChange.length) {
          this.$message('请选着一条记录')
          return false
        }
        this.orderChange = this.orderChange.join(',')
      } else {
        if (!(~~'40' > ~~data.status && ~~'40' > ~~data.ldStatus)) {
          return this.$message('状态不符合，不能删除')
        }
        this.orderChange = data.soNo
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getLoadingBySoNo
      const param = { ldNo: this.formData.ldNo, soNos: this.orderChange }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: '操作成功', type: 'success' })
        this.doUpData()
      })
    },
    // 删除
    doDelete (data) {
      if (data === 'delete') {
        if (!this.orderChange.length) {
          this.$message('请选着一条记录')
          return false
        }
        this.orderChange = this.orderChange.join(',')
      } else {
        if (!(~~'40' > ~~data.status && ~~'40' > ~~data.ldStatus)) {
          return this.$message('状态不符合，不能删除')
        }
        this.orderChange = data.soNo
      }
      const getCancelShipment = this.$API.stockOut.loadingList.getRemoveSoNo
      const param = { ldNo: this.formData.ldNo, soNos: this.orderChange }
      this.$https.post(getCancelShipment, param).then(res => {
        this.$message({ message: res.messagesAsString })
        this.doUpData()
      })
    },
    // 提交表单
    submitForm () {
      this.$refs.form.validate((valid) => {
        const url = this.$API.stockOut.loadingList.addandeditList

        const param = {
          saveModel: JSON.stringify(this.formData || []),
        }
        if (valid) {
          this.$https.post(url, param).then(res => {
            if (res.success) {
              this.needRefresh = true
              this.$refs.form.resetFields()
              this.$router.back()
            }
          })
        }
      })
    },

  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },
  watch: {
    carrierData: {
      handler (item) {
        // this.formData.ownerName = item.ebcuNameCn
      },
      deep: true
    },
    consigneeData: {
      handler (item) {
        this.formData.consigneeName = item.ebcuNameCn
        this.formData.consigneeTel = item.ebcuTel
        this.formData.consigneeAddr = item.ebcuAddressDesc
        this.formData.contactName = item.ebccContactName
        this.formData.contactTel = item.ebccTel
        this.formData.contactAddr = item.eblcAddress
      },
      deep: true
    },
    lineData: {
      handler (item) {

      },
      deep: true
    }
  }
}
</script>
 <style lang="scss">
    .el-collapse{
        border: 1px solid #ebeef5;
        .el-collapse-item__header{
            padding-left: 10px;
            font-weight: bold;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ebeef5 !important;
        }
        .el-collapse-item__content{
            padding-top:25px;
            padding-left: 15px;
        }
    }
    .row-mrg-t {
        margin-top: 20px;
    }
</style>
