nastiNte-Ui/src/views/contractPlacing/index.vue

<template>
  <div id="container" style="margin-bottom: 100px;display: flex;justify-content: center;">
    <div style="width:80%;">
      <el-form :model="form" ref="form" :rules="rules" label-position="top">
      <!--      基本资料-->
      <div class="moduleStyle">
        <div class="titleBox">
          <span class="redBlock">&nbsp;</span>
          <span>基础资料</span>
        </div>
        <div class="basicData">
          <div class="mainModules">
            <el-form-item label="起运港口" prop="fLoadportid">
              <el-select
                v-model="form.fLoadportid"
                filterable
                remote
                @change="estimatedTime"
                style="width: 80%;"
                class="elSelect"
                placeholder="请输入模糊查找起运港口"
                :disabled="noEditing"
              >
                <el-scrollbar>
                  <el-option
                    v-for="(dict, index) in fMblnoOptions"
                    :key="dict.fId"
                    :label="dict.fName"
                    :value="dict.fId"
                  ></el-option>
                </el-scrollbar>
              </el-select>
            </el-form-item>
            <!--            </el-input>-->
          </div>
          <div class="mainModules">
<!--            <span>目的港口</span>-->
            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fDestportid"/>-->
            <el-form-item label="目的港口" prop="fDestportid">
              <el-select
                v-model="form.fDestportid"
                filterable
                remote
                @change="estimatedTime"
                style="width: 80%;"
                :disabled="noEditing"
                class="elSelect"
                placeholder="请输入模糊查找目的港口"
              >
                <el-scrollbar>
                  <el-option
                    v-for="(dict, index) in fMblnoOptions"
                    :key="dict.fId"
                    :label="dict.fName"
                    :value="dict.fId"
                  ></el-option>
                </el-scrollbar>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
<!--            <span>预计装货时间</span>-->
            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fBsdate"/>-->
            <el-form-item label="预计装货时间" prop="fBsdate">
              <el-date-picker
                v-model="form.fBsdate"
                style="width:80%;"
                :disabled="noEditing"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="运输条款" prop="fServiceitems">
              <el-select style="width:80%;"
                         placeholder="请选择"
                         :disabled="noEditing"
                         v-model="form.fServiceitems">
                <el-option
                  v-for="(dict, index) in transport"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
<!--            <span>付款方式</span>-->
            <el-form-item label="付款方式" prop="fPaymode">
              <el-select style="width:80%;" placeholder="请选择" :disabled="noEditing"
                         v-model="form.fPaymode">
                <el-option
                  v-for="(dict, index) in paymentMethod"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fBillingway"></el-input>-->
          </div>
          <div class="mainModules">
            <el-form-item label="受票方" prop="fInvoceobj">
              <el-select style="width:80%;" placeholder="请选择" :disabled="noEditing"
                         v-model="form.fInvoceobj">
                <el-option
                  v-for="(dict, index) in drawee"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fInvoceobj"/>-->
          </div>
          <div class="mainModules">
            <el-form-item label="航线" prop="fLaneid">
              <el-select style="width:80%;" placeholder="请选择" :disabled="noEditing"
                         v-model="form.fLaneid">
                <el-option
                  v-for="(dict, index) in rouTe"
                  :key="dict.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="箱内签收单" prop="fSign">
<!--              <el-input style="width:80%;" v-model="form.fSign"/>-->
              <el-select style="width:80%;" placeholder="请选择" :disabled="noEditing"
                         v-model="form.fSign">
                <el-option
                  v-for="(dict, index) in cEsign"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="订舱人扣货" prop="fDetentioncargo">
<!--              <el-input style="width:80%;" v-model="form.fDetentioncargo"/>-->
              <el-select style="width:80%;" placeholder="请选择" :disabled="noEditing"
                         v-model="form.fDetentioncargo">
                <el-option
                  v-for="(dict, index) in etentioncargo"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="width: 70%;">
            <el-form-item label="备注" prop="remarks" style="width: 80%;float: left;text-align: left">
              <el-input style="width:80%;float: left" placeholder="如有特殊需求，请再此说明" :disabled="noEditing" v-model="form.remarks"/>
              <el-button type="text" style="display: inline; color: red" :disabled="noEditing">附件上传<i
                class="el-icon-upload el-icon--right"></i></el-button>
            </el-form-item>
          </div>
          <!--          <div class="mainModules"></div>-->
        </div>
      </div>
      <!--      预计时间-->
      <div class="moduleStyle">
        <div class="titleBox">
          <span class="redBlock">&nbsp;</span>
          <span>预计时间</span>
          <el-button type="primary" size="mini" style="float: right;margin-right: 20px" @click="dialogVisible = true"
                     :disabled="!form.fLoadportid || !form.fDestportid || noEditing">查看船期
          </el-button>
        </div>
        <span style="color:red;display: block;margin:0 auto;margin-bottom: -20px;">{{estimaTe.pidName}}&nbsp;&nbsp;&nbsp;{{estimaTe.fNo}}</span>
        <!--        步骤条-->
        <div style="width: 100%;" v-if="!estimaTe">
          <div style="width: 80%;margin: 0 auto;padding-bottom: 10px">
            <img src="@/assets/noShipping.png" alt="" style="width: 100px;">
            <p style="color: #9EA3AA;">抱歉，没有符合条件的船期！</p>
          </div>
        </div>
        <div class="stepBarIcon" v-if="estimaTe">
          <div class="iconShip">
            <img src="@/assets/ship.png" style="height: 100%;" alt="">
            <img src="@/assets/ship.png" style="height: 100%;" alt="">
          </div>
          <div class="stepBarLine">
            <div v-for="item in 5"></div>
          </div>
          <!--          文本地点-->
          <div class="stepBarText">
            <div>
              <p>{{ estimaTe.portofloadidName }}</p>
              <div>
                <p>预计开航</p>
                <p>{{ estimaTe.fEtd }}</p>
              </div>
            </div>
            <div v-if="!estimaTe.portoftransshipmentName">
              <p>{{ estimaTe.portoftransshipmentName }}</p>
              <!-- <div>
                <p>预计抵港</p>
                <p>2022-03-24</p>
                <p>预计开航</p>
                <p>2022-03-24</p>
              </div> -->
            </div>
            <div>
              <p>{{ estimaTe.portofdischargeidName }}</p>
              <div>
                <p>预计抵港</p>
                <p>{{ estimaTe.fEta }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      收发货人信息-->
      <div class="feeBox" style="">
        <!--      发货信息-->
        <div class="titleBox_receive" style="margin-right: 4px;">
          <div>
            <span class="redBlock">&nbsp;</span>
            <span>发货信息</span>
          </div>
          <div class="receiveInfo">
            <el-form-item label="发货人全称" prop="fShippername">
              <el-input v-model="form.fShippername" :disabled="noEditing"/>
            </el-form-item>
            <el-form-item label="发货人联系人">
              <el-input v-model="form.fShipperattn" :disabled="noEditing"/>
            </el-form-item>
            <el-form-item label="发货人电话">
              <el-input v-model="form.fShippertel" :disabled="noEditing"/>
            </el-form-item>
          </div>
        </div>
        <!--      收货信息-->
        <div class="titleBox_receive" style="padding-right: 10px">
          <div>
            <span class="redBlock">&nbsp;</span>
            <span>收货信息</span>
          </div>
          <div class="receiveInfo">
            <el-form-item label="收货人全称" prop="fConsigneername">
              <el-input v-model="form.fConsigneername" :disabled="noEditing"/>
            </el-form-item>
            <el-form-item label="收货人联系人">
              <el-input v-model="form.fConsigneeattn" :disabled="noEditing"/>
            </el-form-item>
            <el-form-item label="收货人电话">
              <el-input v-model="form.fConsigneetel" :disabled="noEditing"/>
            </el-form-item>
          </div>
        </div>
      </div>
      <el-form :model="list" ref="list" :rules="rulEs" label-position="top">
      <!--      货物信息-->
      <!--      基本资料-->
      <div class="moduleStyle">
        <div class="titleBox">
          <span class="redBlock">&nbsp;</span>
          <span>货物信息</span>
        </div>
        <div style="display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px">
          <div class="mainModules">
            <el-form-item label="货物名称" prop="fGoodsid">
              <el-select
                v-model="list.fGoodsid"
                filterable
                remote
                @change="select"
                style="width: 80%;"
                class="elSelect"
                placeholder="请输入模糊查找货物名称"
                :disabled="noEditing"
              >
                <el-scrollbar>
                  <el-option
                    v-for="(dict, index) in goods"
                    :key="dict.fId"
                    :label="dict.fName"
                    :value="dict.fId"
                  ></el-option>
                </el-scrollbar>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="货类">
              <el-input style="width:80%;" v-model="typeGoods" :disabled="noEditing"/>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="包装类型" prop="fPackageid">
              <el-select style="width:80%;" placeholder="请选择"
                         v-model="list.fPackageid" :disabled="noEditing">
                <el-option
                  v-for="(dict, index) in packing"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="箱型" prop="fCntrid">
              <el-select style="width:80%;" placeholder="请选择"
                         v-model="list.fCntrid" @change="seleEt" :disabled="noEditing">
                <el-option
                  v-for="(dict, index) in container"
                  :key="dict.fId"
                  :label="dict.fNo"
                  :value="dict.fId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="箱量" prop="fCntrcount">
              <el-input style="width:80%;" :disabled="noEditing" v-model.number="list.fCntrcount" placeholder="请输入箱量" :maxlength="3" @input="calculation" oninput='this.value=this.value.replace(/[^\d.]/g,"")'/>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="单箱重量(吨)" prop="fCntrweight">
              <el-input style="width:80%;" :disabled="noEditing" v-model="list.fCntrweight" @input="cntrWeight"/>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="箱态" prop="fCntrstatus">
              <el-select style="width:80%;" placeholder="请选择"
                         v-model="list.fCntrstatus" :disabled="noEditing">
                <el-option
                  v-for="(dict, index) in fStatus"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="自备货柜" prop="fSoc">
              <el-select style="width:80%;" placeholder="请选择"
                         v-model="list.fSoc" :disabled="noEditing">
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules" v-if="whether === true">
            <el-form-item label="设置温度(℃)">
              <el-input style="width:80%;" :disabled="noEditing" v-model="list.fTemperature" @input="temperature" oninput='this.value=this.value.replace(/[^\-?\d.]/g,"")'/>
            </el-form-item>
          </div>
          <div class="mainModules" v-if="whether === true">
            <el-form-item label="风门开度(%)">
              <el-input style="width:80%;" :disabled="noEditing" v-model.number="list.fDraught" @input="throttleOpening"  oninput='this.value=this.value.replace(/[^\d.]/g,"")'/>
            </el-form-item>
          </div>
          <div class="mainModules" v-if="whether === true">
            <el-form-item label="湿度设置(%)">
              <el-input style="width:80%;" :disabled="noEditing" v-model="list.fHumidity" @input="throttleOpening"  oninput='this.value=this.value.replace(/[^\d.]/g,"")'/>
            </el-form-item>
          </div>
          <div class="mainModules" v-if="whether === true">
            <el-form-item label="预冷要求">
              <el-select style="width:80%;" v-model="list.fPrecooling" :disabled="noEditing" placeholder="请选择">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="危险化学品" prop="fIfdanger">
              <el-select style="width:80%;" placeholder="请选择"
                         v-model="list.fIfdanger" :disabled="noEditing">
                <el-option
                  v-for="(dict, index) in dangerous"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
              <el-button type="text" style="display: inline; color: red" :disabled="noEditing">
                <i class="el-icon-upload el-icon--right"></i>
              </el-button>
            </el-form-item>
          </div>
          <div style="width: 72%;height: 100px;text-align: left;">
            <el-form-item label="备注" prop="remarks">
              <el-input style="width:80%;" placeholder="如有特殊需求，请再此说明" v-model="list.remarks" :disabled="noEditing"/>
            </el-form-item>
          </div>
        </div>
      </div>
      </el-form>
      <!--      费用信息-->
      <div class="moduleStyle">
        <div class="titleBox">
          <span class="redBlock">&nbsp;</span>
          <span>费用信息</span>
        </div>
        <div class="basicData" style="display:flex;justify-content: flex-start">
          <div class="mainModules">
            <el-form-item label="是否办理保险" prop="fInsurance">
              <el-select style="width:80%;" placeholder="请选择"
                         v-model="form.fInsurance" :disabled="noEditing">
                <el-option
                  v-for="(dict, index) in insurance"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="mainModules">
            <el-form-item label="保险货值(万元)" prop="fInsuranceamt">
              <el-input style="width:80%;" v-model="form.fInsuranceamt" :disabled="list.fInsurance == '2' ||noEditing"/>
            </el-form-item>
          </div>
        </div>
      </div>
      </el-form>
      <!--    箱信息-->
      <div class="moduleStyle" v-if="boxInformation">
        <div class="titleBox">
          <span class="redBlock">&nbsp;</span>
          <span>箱信息</span>
          <el-button type="primary" size="mini" style="float: right;margin-right: 20px" @click="newlyAdded" :disabled="noEditing">新行
          </el-button>
        </div>
        <div class="basicData" style="display:flex;justify-content: flex-start">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="fCntrno"
              align="center"
              width="155"
              label="箱号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fCntrno" placeholder="请输入箱号" :disabled="noEditing"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fSealno"
              align="center"
              width="135"
              label="铅封号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fSealno" placeholder="请输入铅封号" :disabled="noEditing"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fCntrweight"
              align="center"
              width="80"
              label="单箱(吨)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fCntrweight" placeholder="请输入" :disabled="noEditing"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fGoodsid"
              align="center"
              width="110"
              label="货名">
              <template slot-scope="scope">
                <!--                <el-input v-model="scope.row.fGoodsid" placeholder="请输入货名"></el-input>-->
                <el-select
                  v-model="scope.row.fGoodsid"
                  :disabled="noEditing"
                  filterable
                  remote
                  @change="select"
                  class="elSelect"
                  placeholder="请输入"
                >
                  <el-scrollbar>
                    <el-option
                      v-for="(dict, index) in goods"
                      :key="dict.fId"
                      :label="dict.fName"
                      :value="dict.fId"
                    ></el-option>
                  </el-scrollbar>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="fPackageid"
              align="center"
              width="100"
              label="包装类型">
              <template slot-scope="scope">
                <!--                <el-input v-model="scope.row.fGoodsid" placeholder="请输入货名"></el-input>-->
                <el-select slot="prepend" placeholder="请选" v-model="scope.row.fPackageid" :disabled="noEditing">
                  <el-option
                    v-for="(dict, index) in packing"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="fCntrid"
              align="center"
              width="105"
              label="箱型">
              <template slot-scope="scope">
                <!--                <el-input v-model="scope.row.fGoodsid" placeholder="请输入货名"></el-input>-->
                <el-select slot="prepend" placeholder="请选择" v-model="scope.row.fCntrid" :disabled="noEditing">
                  <el-option
                    v-for="(dict, index) in container"
                    :key="dict.fId"
                    :label="dict.fNo"
                    :value="dict.fId"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  :disabled="noEditing"
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--    右基本资料-->
    <div class="costCalculation">
      <div class="costModuleStyle" style="">
        <div class="titleBox">
          <span class="redBlock">&nbsp;</span>
          <span>费用计算</span>
        </div>
        <div class="mainBox">
          <p>
            <span>箱型</span>
            <span v-if="boxType">{{boxType}}</span>
            <span v-else>---</span>
          </p>
          <p>
            <span>箱量</span>
            <span>￥{{cntrcount}}</span>
          </p>
        </div>
        <div class="mainBox" style="border-bottom: 1px solid #E8E8E8">
          <p>
            <span>海运服务费</span>
            <span>￥0</span>
          </p>
          <p>
            <span>代理进口杂费合计</span>
            <span>￥0</span>
          </p>
          <p>
            <span>代理出口杂费合计</span>
            <span>￥0</span>
          </p>
          <p>
            <span>THC代收</span>
            <span>￥0</span>
          </p>
          <p>
            <span>燃油附加费</span>
            <span>￥0</span>
          </p>
        </div>
        <div class="mainBox" style="border-bottom: none">
          <p>
            <span>保险费</span>
            <span>￥{{ form.fInsuranceamt }}</span>
          </p>
        </div>
      </div>
      <div class="confirmOrder" @click="confirmOrder" v-if="boxStatus">
        确认下单
      </div>
      <div class="confirmOrder" @click="submit" v-else v-show="!noEditing">
        提交箱信息
      </div>
    </div>
    <el-dialog
      title="请选择船期"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="80%"
      style="text-align: left"
      :before-close="handleClose">
      <el-table
        :data="estimated"
        style="width: 100%"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column
          prop="fEta"
          label="预计开航">
        </el-table-column>
        <el-table-column
          prop="fEtd"
          label="预计抵港">
        </el-table-column>
        <el-table-column
          prop="fCutoffdate"
          label="截港日期">
        </el-table-column>
        <el-table-column
          prop="pidName"
          label="船名航次">
          <template slot-scope="scope">
                  {{scope.row.pidName}}&nbsp;&nbsp;&nbsp;{{scope.row.fNo}}
                </template>
        </el-table-column>
        <el-table-column
          prop="twenty"
          label="20GP">
        </el-table-column>
        <el-table-column
          prop="fortyHc"
          label="40HC">
        </el-table-column>
        <el-table-column
          prop="fortyRh"
          label="40RH">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="booking(scope.row)">订舱</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import { request } from '../../request/request';

export default {
  name: 'contractPlacing',
  data() {
    return {
      boxType:'',
      cntrcount:0,
      noEditing:false,
      rules: {
        fLoadportid: [{ required: true, message: " ", trigger: "blur" }],
        fDestportid: [{ required: true, message: " ", trigger: "blur" }],
        fBsdate: [{ required: true, message: " ", trigger: "blur" }],
        fServiceitems: [{ required: true, message: " ", trigger: "blur" }],
        fPaymode: [{ required: true, message: " ", trigger: "blur" }],
        fInvoceobj: [{ required: true, message: " ", trigger: "blur" }],
        fLaneid: [{ required: true, message: " ", trigger: "blur" }],
        fSign: [{ required: true, message: " ", trigger: "blur" }],
        fDetentioncargo: [{ required: true, message: " ", trigger: "blur" }],
        fShippername: [{ required: true, message: " ", trigger: "blur" }],
        fShipperattn: [{ required: true, message: " ", trigger: "blur" }],
        fShippertel: [{ required: true, message: " ", trigger: "blur" }],
        fConsigneername: [{ required: true, message: " ", trigger: "blur" }],
        fConsigneeattn: [{ required: true, message: " ", trigger: "blur" }],
        fConsigneetel: [{ required: true, message: " ", trigger: "blur" }],
        fInsurance: [{ required: true, message: " ", trigger: "blur" }],
        fInsuranceamt: [{ required: true, message: " ", trigger: "blur" }],
      },
      rulEs:{
        fGoodsid: [{ required: true, message: " ", trigger: "blur" }],
        fPackageid: [{ required: true, message: " ", trigger: "blur" }],
        fCntrid: [{ required: true, message: " ", trigger: "blur" }],
        fCntrcount: [{ required: true, message: " ", trigger: "blur" }],
        fCntrweight: [{ required: true, message: " ", trigger: "blur" }],
        fCntrstatus: [{ required: true, message: " ", trigger: "blur" }],
        fSoc: [{ required: true, message: " ", trigger: "blur" }],
        fIfdanger: [{ required: true, message: " ", trigger: "blur" }],
      },
      fMblnoOptions: [],
      paymentMethod: [],
      estimated: [],
      goods: [],
      dialogVisible: false,
      transport: [],
      insurance: [],
      drawee: [],
      packing: [],
      rouTe: [],
      boxInformation: false,
      tableData: [],
      container: [],
      form: {
        fInsuranceamt:0,
        fInsurance:'1'
      },
      etentioncargo:[],
      estimaTe: '',
      list: {},
      typeGoods: '',
      whether: false,
      dangerous: [],
      boxStatus: true,
      fStatus:[],
      cEsign:[]
    };
  },
  created() {
    this.dictionary('f_paymode');
    this.dictionary('f_invoceobj');
    this.dictionary('f_insurance');
    this.dictionary('f_serviceitems');
    this.dictionary('f_packageid');
    this.dictionary('f_ifdanger');
    this.dictionary('f_updateEF');
    this.dictionary('f_sign');
    this.dictionary('f_detentioncargo');
    this.handleQuery();
    this.queryGoods();
    this.queryContainer();
    this.routeGood();
    if (this.$route.query.data) {
      this.detailsInquiry(this.$route.query.data);
      this.boxInformation = true;
      this.boxStatus = false;
    }else if (this.$route.query.res){
      let data = JSON.parse(this.$route.query.res)
      this.form.fLoadportid = data.fPortofloadid
      this.form.fDestportid = data.fDistinationid
      this.$set(this.form, "fBsdate", data.fEtd);
      this.estimatedTime()
    }
  },
  methods: {
    cntrWeight(res){
      if (res < 40 && res > 0){
        return
      }else if( res == '' || res == null){
        return;
      } else {
        this.list.fCntrweight = ''
        this.$message({
          showClose: true,
          message: '单箱重量应在0-40吨之间',
          type: 'error',
          offset:90
        });
      }
    },
    temperature(res){
      console.log(res);
      if (res < 20 && res > -30){
      }else if(res == '-'){
      }else {
        this.list.fTemperature = ''
        this.$message({
          showClose: true,
          message: '冷藏箱温度为-30℃至20℃之间的整数',
          type: 'error',
          offset:90
        });
      }
    },
    throttleOpening(res){
      if (res <= 100){
      }else {
        this.list.fDraught = ''
        this.$message({
          showClose: true,
          message: '不能大于100%或小于0%',
          type: 'error',
          offset:90
        });
      }
    },
    newlyAdded() {
      console.log(this.tableData);
      this.tableData.push({
        fCntrno: '',
        fSealno: '',
        fCntrweight: '',
        fGoodsid: '',
        fPackageid:'',
        fCntrid:''
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    detailsInquiry(fId) {
      request({
        url: '/khwarehouse/warehousebills/webVersionOrder',
        method: 'post',
        data: {
          fId: fId
        }
      })
        .then(res => {
          console.log(res.data.rows[0]);
          this.form = res.data.rows[0];
          if (this.form.fBillstatus >= 11){
            this.noEditing = true
          }
          this.form.fPaymode = this.form.fPaymode +''
          this.form.fSign = this.form.fSign +''
          this.form.fDetentioncargo = this.form.fDetentioncargo +''
          this.estimaTe = res.data.rows[0].tVoyageL;
          this.list = res.data.rows[0].tWarehousebillsCntrList[0];
          this.typeGoods = res.data.rows[0].tWarehousebillsCntrList[0].typeidName;
          if (res.data.rows[0].tWarehousebillsCntritemsList){
            this.tableData = res.data.rows[0].tWarehousebillsCntritemsList
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    routeGood() {
      request({
        url: '/shipping/address/selectAirLineName',
        method: 'get',
      })
        .then(res => {
          console.log(res);
          this.rouTe = res.data.rows;
        })
        .catch(err => {
          console.log(err);
        });
    },
    booking(res) {
      if (res) {
        this.estimaTe = res;
        this.form.fVoyid = this.estimaTe.fId;
        this.form.fVslid = this.estimaTe.fPid;
        this.dialogVisible = false
      }
    },
    submit() {
      let formData = new window.FormData();
      formData.append('tWarehousebills', JSON.stringify({ fId:this.form.fId }));
      formData.append('tWarehousebillsCntritems', JSON.stringify(this.tableData));
      request({
        url: '/khwarehouse/warehousebills/submitMakingMessage',
        method: 'post',
        data: formData
      }).then(res => {
          // console.log(res);
          if (res.data.code === 500){
            // console.log(res.data.msg);
            // this.$message.error(res.data.msg);
          }else {
            this.goods = res.data.data;
            this.$router.push({
              path: '/',
            });
          }
        }).catch(err => {
          // console.log(err);
        this.$message.error(err);
        });
    },
    queryGoods() {
      request({
        url: '/khwarehouse/warehousebills/getGoodName',
        method: 'post',
      })
        .then(res => {
          console.log(res);
          this.goods = res.data.data;
        })
        .catch(err => {
          this.$message.error('未知错误');
        });
    },
    calculation(){
      for (let item in this.container){
        if (this.container[item].fId == this.list.fCntrid){
          request({
            url: '/shipping/items/containerPrice/',
            method: 'post',
            data:{
              cntridName:this.container[item].fNo,
              fPortofloadid:this.form.fLoadportid,
              fDistinationid:this.form.fDestportid,
              fEtd:this.form.fBsdate
            }
          }).then(res => {
            console.log(res);
            let number = Number(res.data.data[0]) * Number(this.list.fCntrcount)
            if (number){
              this.cntrcount = number
            }else {
              this.cntrcount = 0
            }
          }).catch(err => {
            console.log(err);
          });
        }
      }
    },
    queryContainer() {
      request({
        url: '/shipping/cntr/selectRcntrName',
        method: 'get',
      }).then(res => {
          // console.log(res);
          this.container = res.data.rows;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleQuery() {
      request({
        url: '/shipping/address/selectPortName',
        method: 'get',
        params: {
          fName: this.form.fLoadportid
        }
      })
        .then(res => {
          // console.log(res);
          this.fMblnoOptions = res.data.rows;
          // console.log(this.fMblnoOptions);
        })
        .catch(err => {
          console.log(err);
        });
    },
    estimatedTime() {
      // console.log(this.form.fLoadportid, this.form.fDestportid);
      if (this.form.fLoadportid && this.form.fDestportid) {
        request({
          url: 'shipping/voyage/selectMessage',
          method: 'post',
          data: {
            fPortofloadid: this.form.fLoadportid,
            fDistinationid: this.form.fDestportid
          }
        }).then(res => {
            let data = res.data.rows;
            if (data.length !== 0) {
              this.estimated = data;
              this.estimaTe = data[0];
              this.form.fVoyid = this.estimaTe.fId;
              this.form.fVslid = this.estimaTe.fPid;
            }
        }).catch(err => {
            console.log(err);
        });
      }
    },
    dictionary(dictType) {
      request({
        url: '/system/dict/data/type/' + dictType,
        method: 'get',
      })
        .then(res => {
          // console.log(res);
          switch (dictType) {
            case 'f_paymode':
              this.paymentMethod = res.data.data;
              break;
            case 'f_invoceobj':
              this.drawee = res.data.data;
              break;
            case 'f_insurance':
              this.insurance = res.data.data;
              break;
            case 'f_serviceitems':
              this.transport = res.data.data;
              break;
            case 'f_packageid':
              this.packing = res.data.data;
              break;
            case 'f_ifdanger':
              this.dangerous = res.data.data;
              break;
            case 'f_updateEF':
              this.fStatus = res.data.data;
              break;
            case 'f_sign':
              this.cEsign = res.data.data;
              break;
            case 'f_detentioncargo':
              this.etentioncargo = res.data.data;
              break;
            default:
              break;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    confirmOrder() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(valid);
          this.$refs["list"].validate((valid) => {
            if (valid) {
              let formData = new window.FormData();
              formData.append('tWarehousebills', JSON.stringify(this.form));
              formData.append('tWarehousebillsCntr', JSON.stringify([this.list]));
              request({
                url: '/khwarehouse/warehousebills/submitPlantMessage',
                method: 'post',
                data: formData
              })
                .then(res => {
                  if (res.data.code === 200){
                    this.$message.success(res.data.msg);
                    this.$router.push({
                      path: '/',
                    });
                  }
                  console.log(res);
                })
                .catch(err => {
                  console.log(err);
                });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose() {
      this.dialogVisible = false
    },
    select(id) {
      for (let item in this.goods) {
        if (this.goods[item].fId === id) {
          this.typeGoods = this.goods[item].typeName;
        }
      }
    },
    seleEt(id) {
      console.log(id);
      // boxType
      console.log(this.container);
      for (let item in this.container) {
        if (this.container[item].fId === id) {
          this.boxType = this.container[item].fNo
          this.calculation()
          if (this.container[item].fType === 2){
            this.whether = true;
            return
          }else {
            this.whether = false;
            return
          }
        }
      }
    }
  }
};

</script>
<style scoped lang="scss">
.el-select{
  > > > .el-input__inner {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }
}

.el-input {
  /deep/ .el-input__inner {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }
}

.mainModules > > > .el-input__inner {
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}

.moduleStyle {
  background: #FFFFFF;
  box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.33);
  width: 75%;
  margin-bottom: 10px;
}

.titleBox {
  padding-left: 30px;
  width: 100%;
  text-align: left;
  padding: 10px;
  font-size: 20px
}

.feeBox {
  display: flex;
  justify-content: space-between;
  width: 75%;
  margin-bottom: 10px;
}

.titleBox_receive {
  padding-left: 30px;
  width: 50%;
  text-align: left;
  padding: 12px;
  font-size: 20px;
  background: #FFFFFF;
  box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
}

.redBlock {
  display: inline-block;
  background-color: red;
  width: 5px;
  margin-right: 10px
}

.basicData {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 10px 20px
}

.mainModules {
  width: 24%;
  height: 100px;
  text-align: left;
}

.mainModules > span {
  margin-left: 20px;
  color: #A3A7AD;
}

.stepBarIcon {
  margin: 10px;
  padding: 20px 0 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center
}

.iconShip {
  width: 35%;
  display: flex;
  justify-content: space-between
}

.iconShip {
  img {
    width: 20px
  }
}

.stepBarLine {
  width: 80%;
  display: flex;
  align-items: center;
}

.stepBarLine {
  div:nth-child(odd) {
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block
  }

  div:nth-child(even) {
    width: 50%;
    height: 2px;
    background-color: red;
    display: inline-block;
  }
}

.stepBarText {
  display: flex;
  justify-content: space-between;
  width: 90%;

  div {
    div {
      color: #848484;
      display: flex;
      flex-direction: column;
      align-items: center;

      p:nth-child(odd) {
        width: 70px;
        margin: 0
      }

      p:nth-child(even) {
        margin: 0
      }
    }
  }
}

.receiveInfo {
  margin: 30px auto;
}
.el-form-item>>>.el-form-item__label{
  padding: 0px;
}
.costCalculation {
  width: 25%;
  position: fixed;
  right: 4%;

  .costModuleStyle {
    background: #FFFFFF;
    box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
  }

  .titleBox {
    .redBlock {
      display: inline-block;
      background-color: red;
      width: 5px;
      margin-right: 10px
    }
  }

  .mainBox {
    padding: 10px;
    margin: 0 20px 0 20px;
    border-bottom: 1px dashed #E8E8E8;
    color: #71757A;

    p {
      display: flex;
      justify-content: space-between;

      span:nth-child(even) {
        color: #000;
      }
    }
  }
}

.confirmOrder {
  background: red;
  height: 70px;
  margin-top: 20px;
  text-align: center;
  line-height: 70px;
  color: white;
  font-size: 20px;
}

.confirmOrder:hover {
  cursor: pointer;
}
</style>
<style>
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
  border-color: #F56C6C;
}
</style>