Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanCont...

hejianhao

2025-01-09 f9438babacf7a9f8b7cd1ced3c4afc58838774c3

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanContainer

 src/view/Home.vue

@@ -107,7 +107,6 @@
import UserInfo from '@/component/userInfo.vue'
import Header from '@/component/Header.vue'
import NoticeComponent from '@/component/Notice.vue'
import AddedInformation from '@/component/AddedInformation.vue'
import { getList } from './home'
export default {
    name: "Home",
@@ -115,7 +114,6 @@
        UserInfo,
        Header,
        NoticeComponent,
        AddedInformation
    },
    data() {
        return {

 src/view/addOrder.vue

@@ -1,540 +1,536 @@
<template>
  <div>
    <Header style="position: sticky;top: 0;z-index: 1999;" />
    <div class="contanier">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <!-- card-one -->
        <el-card class="">
  <div class="contanier">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <!-- card-one -->
      <el-card class="">
        <div slot="header" class="clearfix">
          <span class="clearfix_text">添加订单</span>
          <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
        </div>
        <div class="box-cards">
          <div class="flex tab"  v-if="type=='detail'">
            <div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
              基础信息
            </div>
            <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">
              价格信息
            </div>
          </div>

          <div v-if="activeTab == 1">
            <div class="flex">
              <el-form-item label="" class="label1" prop="container" label-width="0">
                <div class="flex">
                  <div class="box">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">集装箱号：</div>
                    </div>
                    <div class="box_text2">Contain#</div>
                  </div>
                  <el-input v-model="form.container" placeholder="请输入"></el-input>
                </div>
              </el-form-item>

              <el-form-item label="" class="label2" prop="bol" label-width="0px">
                <div class="flex">
                  <div class="box1">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">提单号：</div>
                    </div>
                    <div class="box_text2">BOLI#</div>
                  </div>
                  <el-input v-model="form.bol" placeholder="请输入"></el-input>
                </div>
              </el-form-item>

              <el-form-item label="" class="label3" prop="cargoType" label-width="0px">
                <div class="flex">
                  <div class="box3">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">货柜类型：</div>
                    </div>
                    <div class="box_text2">Cargo Type</div>
                  </div>
                  <el-select v-model="form.cargoType" clearable placeholder="请选择" prop="type">
                    <el-option :label="item.label" :value="item.value" v-for="item in options"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="label1" prop="carrier" label-width="0px">
                <div class="flex">
                  <div class="box">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">船司：</div>
                    </div>
                    <div class="box_text2">Carrier</div>
                  </div>
                  <el-select v-model="form.carrier" clearable placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>

              <el-form-item label="" class="label2" prop="vesselAndVoyage" label-width="0px">
                <div class="flex">
                  <div class="box1">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">航名航次：</div>
                    </div>
                    <div class="box_text2">Vessel & Voyage</div>
                  </div>
                  <el-input v-model="form.vesselAndVoyage" placeholder="请输入"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="" class="label3" prop="pickupLocation" label-width="0px">
                <div class="flex">
                  <div class="box3">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">提柜地：</div>
                    </div>
                    <div class="box_text2">Pickup Location</div>
                  </div>
                  <el-select v-model="form.pickupLocation" clearable placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsPL"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="" class="label4" prop="ETA" label-width="0">
                <div class="flex">
                  <div class="box2">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">预计到达日期：</div>
                    </div>
                    <div class="box_text2">ETA</div>
                  </div>
                  <el-date-picker type="datetime" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
                    style="width: 100%">
                    <div></div>
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="label1" prop="SOC" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box4">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">SOC：</div>
                    </div>
                  </div>
                  <el-radio-group text-color="#014099" fill="#014099" v-model="form.SOC">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="label7" prop="DG" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box5">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">DG：</div>
                    </div>
                  </div>
                  <el-radio-group text-color="#014099" fill="#014099" v-model="form.DG">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="label8" prop="overweight" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box6">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">是否超重：</div>
                    </div>
                    <div class="box_text1 mr-14">Over Weight</div>
                  </div>
                  <el-radio-group text-color="#014099" fill="#014099" v-model="form.overweight">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="label4" prop="customsInspection" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box7">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">是否查验：</div>
                    </div>
                    <div class="box_text1">Customs Inspection</div>
                  </div>
                  <el-radio-group text-color="#014099" fill="#014099" v-model="form.customsInspection">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="" class="" prop="dropOrLive" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box8">
                    <div class="flex">
                      <div class="box_text1">DROP/LIVE：</div>
                    </div>
                  </div>
                  <el-radio-group text-color="#014099" fill="#014099" v-model="form.dropOrLive">
                    <el-radio label="Drop"></el-radio>
                    <el-radio label="Live"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </div>
          </div>
          <div v-else>
            <DetailInfoTop />
          </div>
        </div>

        <div class="bg" v-if="activeTab == 1">
          <span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
          <span>Pls supply detailed packing list for an OT or FR conainer</span>
        </div>
      </el-card>
      <div v-if="activeTab == 1">
        <!-- card-two -->
        <el-card class="box-card mt-13">
          <div slot="header" class="clearfix">
            <span class="clearfix_text">添加订单</span>
            <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
            <span class="clearfix_text">货柜信息 ｜ Container Det</span>
          </div>
          <div class="box-cards">
            <div class="flex tab">
              <div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
                基础信息
              </div>
              <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">
                价格信息
              </div>
          <div class="box-cardes">
            <div class="flex">
              <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
                <div class="flex">
                  <div class="box9">
                    <div class="flex">
                      <!-- <div class="red">*</div> -->
                      <div class="box_text1">客户单号：</div>
                    </div>
                    <div class="box_text2">Clinet Order#</div>
                  </div>
                  <el-input v-model="form.clientOrder" placeholder="请输入"></el-input>
                </div>
              </el-form-item>

              <el-form-item label="" class="label2" prop="product" label-width="0px">
                <div class="flex">
                  <div class="box1">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">品名：</div>
                    </div>
                    <div class="box_text2">Product</div>
                  </div>
                  <el-input v-model="form.product" placeholder="请输入"></el-input>
                </div>
              </el-form-item>

              <el-form-item label="" class="label3" prop="QTY" label-width="0px">
                <div class="flex">
                  <div class="box3">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">包装数量：</div>
                    </div>
                    <div class="box_text2">QTY</div>
                  </div>
                  <el-input v-model="form.QTY" placeholder="请输入"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
                <div class="flex">
                  <div class="box2">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">单位选择：</div>
                    </div>
                    <div class="box_text2">QTY Unit</div>
                  </div>
                  <el-select v-model="form.QTYUnit" clearable placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="label6" prop="weight" label-width="0px">
                <div class="flex">
                  <div class="box9">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">重量：</div>
                    </div>
                    <div class="box_text2">Weight</div>
                  </div>
                  <el-input v-model="form.weight" @input="onInput" placeholder="请输入">
                    <div style="line-height: 50px;" slot="prefix-icon">KG</div>
                  </el-input>
                </div>
              </el-form-item>

            <div v-if="activeTab == 1">
              <div class="flex">
                <el-form-item label="" class="label1" prop="container" label-width="0">
                  <div class="flex">
                    <div class="box">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">集装箱号：</div>
                      </div>
                      <div class="box_text2">Contain#</div>
              <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
                <div class="flex">
                  <div class="box1">
                    <div class="flex">
                      <!-- <div class="red">*</div> -->
                      <div class="box_text1">≈重量(磅)：</div>
                    </div>
                    <el-input v-model="form.container" placeholder="请输入"></el-input>
                    <div class="box_text2">≈Pound weight</div>
                  </div>
                </el-form-item>

                <el-form-item label="" class="label2" prop="bol" label-width="0px">
                  <div class="flex">
                    <div class="box1">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">提单号：</div>
                      </div>
                      <div class="box_text2">BOLI#</div>
                  <el-input disabled v-model="form.poundWeight" placeholder="请输入">
                    <div style="line-height: 50px;" slot="suffix">LBS</div>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="" class="label3" prop="volume" label-width="0px">
                <div class="flex">
                  <div class="box3">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">体积：</div>
                    </div>
                    <el-input v-model="form.bol" placeholder="请输入"></el-input>
                    <div class="box_text2">Voume</div>
                  </div>
                </el-form-item>

                <el-form-item label="" class="label3" prop="cargoType" label-width="0px">
                  <div class="flex">
                    <div class="box3">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">货柜类型：</div>
                      </div>
                      <div class="box_text2">Cargo Type</div>
                    </div>
                    <el-select v-model="form.cargoType" clearable placeholder="请选择" prop="type">
                      <el-option :label="item.label" :value="item.value" v-for="item in options"
                        :key="item.value"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </div>
              <div class="flex">
                <el-form-item label="" class="label1" prop="carrier" label-width="0px">
                  <div class="flex">
                    <div class="box">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">船司：</div>
                      </div>
                      <div class="box_text2">Carrier</div>
                    </div>
                    <el-select v-model="form.carrier" clearable placeholder="请选择">
                      <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                        :key="item.value"></el-option>
                    </el-select>
                  </div>
                </el-form-item>

                <el-form-item label="" class="label2" prop="vesselAndVoyage" label-width="0px">
                  <div class="flex">
                    <div class="box1">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">航名航次：</div>
                      </div>
                      <div class="box_text2">Vessel & Voyage</div>
                    </div>
                    <el-input v-model="form.vesselAndVoyage" placeholder="请输入"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="" class="label3" prop="pickupLocation" label-width="0px">
                  <div class="flex">
                    <div class="box3">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">提柜地：</div>
                      </div>
                      <div class="box_text2">Pickup Location</div>
                    </div>
                    <el-select v-model="form.pickupLocation" clearable placeholder="请选择">
                      <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                        :key="item.value"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="" class="label4" prop="ETA" label-width="0">
                  <div class="flex">
                    <div class="box2">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">预计到达日期：</div>
                      </div>
                      <div class="box_text2">ETA</div>
                    </div>
                    <el-date-picker type="date" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
                      style="width: 100%">
                      <div></div>
                    </el-date-picker>
                  </div>
                </el-form-item>
              </div>
              <div class="flex">
                <el-form-item label="" class="" prop="SOC" label-width="0">
                  <div class="flex" style="align-items: center">
                    <div class="box4">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">SOC：</div>
                      </div>
                    </div>
                    <el-radio-group text-color="#014099" fill="#014099" v-model="form.SOC">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
                <el-form-item label="" class="" prop="DG" label-width="0">
                  <div class="flex" style="align-items: center">
                    <div class="box5">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">DG：</div>
                      </div>
                    </div>
                    <el-radio-group text-color="#014099" fill="#014099" v-model="form.DG">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
                <el-form-item label="" class="" prop="overweight" label-width="0">
                  <div class="flex" style="align-items: center">
                    <div class="box6">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">是否超重：</div>
                      </div>
                      <div class="box_text1 mr-14">Over Weight</div>
                    </div>
                    <el-radio-group text-color="#014099" fill="#014099" v-model="form.overweight">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
                <el-form-item label="" class="" prop="customsInspection" label-width="0">
                  <div class="flex" style="align-items: center">
                    <div class="box7">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">是否查验：</div>
                      </div>
                      <div class="box_text1">Customs Inspection</div>
                    </div>
                    <el-radio-group text-color="#014099" fill="#014099" v-model="form.customsInspection">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="" class="" prop="dropOrLive" label-width="0">
                  <div class="flex" style="align-items: center">
                    <div class="box8">
                      <div class="flex">
                        <div class="box_text1">DROP/LIVE：</div>
                      </div>
                    </div>
                    <el-radio-group text-color="#014099" fill="#014099" v-model="form.dropOrLive">
                      <el-radio label="Drop"></el-radio>
                      <el-radio label="Live"></el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </div>
                  <el-input v-model="form.volume" placeholder="请输入">
                    <div style="line-height: 50px;" slot="suffix">CMB</div>
                  </el-input>
                </div>
              </el-form-item>
            </div>
            <div v-else>
              <DetailInfoTop />
            </div>
          </div>

          <div class="bg" v-if="activeTab == 1">
            <span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
            <span>Pls supply detailed packing list for an OT or FR conainer</span>
          </div>
        </el-card>
        <div v-if="activeTab == 1">
          <!-- card-two -->
          <el-card class="box-card mt-13">
            <div slot="header" class="clearfix">
              <span class="clearfix_text">货柜信息 ｜ Container Det</span>
        <!-- card-three -->
        <el-card class="box-card mt-13">
          <div slot="header" class="clearfix">
            <span class="clearfix_text">收件人信息 ｜ Consignee</span>
            <div class="clearfix_btn" @click="addShow">
              <img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
              <span>选择已添加信息</span>
            </div>
            <div class="box-cardes">
          </div>
          <div class="">
            <div class="box-cards">
              <div class="flex">
                <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
                <el-form-item label="" class="label1" prop="contact" label-width="0">
                  <div class="flex">
                    <div class="box9">
                    <div class="box">
                      <div class="flex">
                        <!-- <div class="red">*</div> -->
                        <div class="box_text1">客户单号：</div>
                        <div class="box_text1">收件人：</div>
                      </div>
                      <div class="box_text2">Clinet Order#</div>
                      <div class="box_text2">Contact</div>
                    </div>
                    <el-input v-model="form.clientOrder" placeholder="请输入"></el-input>
                    <el-input v-model="form.contact" placeholder="请输入"></el-input>
                  </div>
                </el-form-item>

                <el-form-item label="" class="label2" prop="product" label-width="0px">
                <el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
                  <div class="flex">
                    <div class="box1">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">品名：</div>
                        <div class="box_text1">收件人公司：</div>
                      </div>
                      <div class="box_text2">Product</div>
                      <div class="box_text2">Consignee-Company</div>
                    </div>
                    <el-input v-model="form.product" placeholder="请输入"></el-input>
                    <el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
                  </div>
                </el-form-item>

                <el-form-item label="" class="label3" prop="QTY" label-width="0px">
                <el-form-item label="" class="label3" prop="post" label-width="0px">
                  <div class="flex">
                    <div class="box3">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">包装数量：</div>
                        <div class="box_text1">目的地邮编：</div>
                      </div>
                      <div class="box_text2">QTY</div>
                      <div class="box_text2">Post</div>
                    </div>
                    <el-input v-model="form.QTY" placeholder="请输入"></el-input>

                    <el-input v-model="form.post" placeholder="请输入"></el-input>

                  </div>
                </el-form-item>
                <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
                <el-form-item label="" class="label4" prop="address" label-width="0">
                  <div class="flex">
                    <div class="box2">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">单位选择：</div>
                        <div class="box_text1">地址：</div>
                      </div>
                      <div class="box_text2">QTY Unit</div>
                      <div class="box_text2">Address</div>
                    </div>
                    <el-select v-model="form.QTYUnit" clearable placeholder="请选择">
                      <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
                        :key="item.value"></el-option>
                    </el-select>
                    <el-input v-model="form.address" placeholder="请输入"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div class="flex">
                <el-form-item label="" class="label1" prop="weight" label-width="0px">
                  <div class="flex">
                    <div class="box9">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">重量：</div>
                      </div>
                      <div class="box_text2">Weight</div>
                    </div>
                    <el-input v-model="form.weight" placeholder="请输入">
                      <div style="line-height: 50px;" slot="prefix-icon">KG</div>
                    </el-input>
                  </div>
                </el-form-item>
                <div class="tip_box label5">

                <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
                  <div class="flex">
                    <div class="box1">
                      <div class="flex">
                        <!-- <div class="red">*</div> -->
                        <div class="box_text1">≈重量(磅)：</div>
                      </div>
                      <div class="box_text2">≈Pound weight</div>
                    </div>
                    <el-input v-model="form.poundWeight" placeholder="请输入">
                      <div style="line-height: 50px;" slot="suffix">LBS</div>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item label="" class="label3" prop="volume" label-width="0px">
                  <div class="flex">
                    <div class="box3">
                      <div class="flex">
                        <div class="red">*</div>
                        <div class="box_text1">体积：</div>
                      </div>
                      <div class="box_text2">Voume</div>
                    </div>
                    <el-input v-model="form.volume" placeholder="请输入">
                      <div style="line-height: 50px;" slot="suffix">CMB</div>
                    </el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-card>
          <!-- card-three -->
          <el-card class="box-card mt-13">
            <div slot="header" class="clearfix">
              <span class="clearfix_text">收件人信息 ｜ Consignee</span>
              <div class="clearfix_btn">
                <img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
                <span>选择已添加信息</span>
              </div>
            </div>
            <div class="">
              <div class="box-cards">
                <div class="flex">
                  <el-form-item label="" class="label1" prop="contact" label-width="0">
                  <el-form-item label="" class="" prop="tel" label-width="0px">
                    <div class="flex">
                      <div class="box">
                        <div class="flex">
                          <!-- <div class="red">*</div> -->
                          <div class="box_text1">收件人：</div>
                          <div class="box_text1">联系电话：</div>
                        </div>
                        <div class="box_text2">Contact</div>
                        <div class="box_text2">Tel</div>
                      </div>
                      <el-input v-model="form.contact" placeholder="请输入"></el-input>
                      <el-input v-model="form.tel" placeholder="请输入"></el-input>

                    </div>
                  </el-form-item>

                  <el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
                  <div class="tip">
                    <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                    <span>联系电话和邮箱至少填写其中一项</span>
                  </div>
                </div>
                <div class="tip_box label5">
                  <el-form-item label="" class="" prop="email" label-width="0px">
                    <div class="flex">
                      <div class="box1">
                        <div class="flex">
                          <div class="red">*</div>
                          <div class="box_text1">收件人公司：</div>
                          <!-- <div class="red">*</div> -->
                          <div class="box_text1">邮箱：</div>
                        </div>
                        <div class="box_text2">Consignee-Company</div>
                        <div class="box_text2">Email</div>
                      </div>
                      <el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
                      <el-input v-model="form.email" placeholder="请输入"></el-input>
                    </div>
                  </el-form-item>

                  <el-form-item label="" class="label3" prop="post" label-width="0px">
                    <div class="flex">
                      <div class="box3">
                        <div class="flex">
                          <div class="red">*</div>
                          <div class="box_text1">目的地邮编：</div>
                        </div>
                        <div class="box_text2">Post</div>
                      </div>
                      <el-select v-model="form.post" clearable placeholder="请选择" prop="type">
                        <el-option :label="item.label" :value="item.value" v-for="item in options"
                          :key="item.value"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                  <el-form-item label="" class="label4" prop="address" label-width="0">
                    <div class="flex">
                      <div class="box2">
                        <div class="flex">
                          <div class="red">*</div>
                          <div class="box_text1">地址：</div>
                        </div>
                        <div class="box_text2">Address</div>
                      </div>
                      <el-input v-model="form.address" placeholder="请输入"></el-input>
                    </div>
                  </el-form-item>
                </div>
                <div class="flex">
                  <div class="tip_box label5">

                    <el-form-item label="" class="" prop="tel" label-width="0px">
                      <div class="flex">
                        <div class="box">
                          <div class="flex">
                            <!-- <div class="red">*</div> -->
                            <div class="box_text1">联系电话：</div>
                          </div>
                          <div class="box_text2">Tel</div>
                        </div>
                        <el-select v-model="form.tel" clearable placeholder="请选择">
                          <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                            :key="item.value"></el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                    <div class="tip">
                      <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                      <span>联系电话和邮箱至少填写其中一项</span>
                    </div>
                  </div>
                  <div class="tip_box label5">
                    <el-form-item label="" class="" prop="email" label-width="0px">
                      <div class="flex">
                        <div class="box1">
                          <div class="flex">
                            <!-- <div class="red">*</div> -->
                            <div class="box_text1">邮箱：</div>
                          </div>
                          <div class="box_text2">Email</div>
                        </div>
                        <el-input v-model="form.email" placeholder="请输入"></el-input>
                      </div>
                    </el-form-item>
                    <div class="tip">
                      <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                      <span>联系电话和邮箱至少填写其中一项</span>
                    </div>
                  <div class="tip">
                    <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                    <span>联系电话和邮箱至少填写其中一项</span>
                  </div>
                </div>

              </div>


              <div class="flex  mt-43" style="height: unset;padding-bottom: 43px;">
                <div class="box10">
                  <div class="flex">
                    <!-- <div class="red">*</div> -->
                    <div class="box_text1">其他联系方式：</div>
                  </div>
                  <div class="box_text3">Other Information</div>
                </div>
                <quill-editor class="editor" v-model="form.specialRequest" ref="myQuillEditor" :options="editorOption"
                  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
                </quill-editor>
              </div>


            </div>
            <div class="flex " style="padding-bottom: 27px;">


            <div class="flex  mt-43" style="height: unset;padding-bottom: 43px;">
              <div class="box10">
                <div class="flex">
                  <div class="box_text1">备注：</div>
                  <!-- <div class="red">*</div> -->
                  <div class="box_text1">其他联系方式：</div>
                </div>
                <div class="box_text3">Remark</div>
                <div class="box_text3">Other Information</div>
              </div>
              <quill-editor class="editor" v-model="form.remark" ref="myQuillEditor" :options="editorOption"
              <quill-editor class="editor" v-model="form.specialRequest" ref="myQuillEditor" :options="editorOption"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
              </quill-editor>
            </div>



          </el-card>

          <el-card class="box-card mt-13">
            <div slot="header" class="clearfix">
              <span class="clearfix_text">附件</span>
            </div>
            <div class="box-carde">
          </div>
          <div class="flex " style="padding-bottom: 27px;">
            <div class="box10">
              <div class="flex">
                <el-form-item label="Do：" class="mr-129" prop="DOFileUrl" label-width="88px">
                  <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                    :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                    <div class="upload_btn">+上传附件</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="PU#：" class="mr-129" prop="PUFileUrl" label-width="88px">
                  <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                    :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                    <div class="upload_btn">+上传附件</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
                  <el-input v-model="form.PUExplain" placeholder="请输入"></el-input>
                </el-form-item>
                <div class="box_text1">备注：</div>
              </div>
              <div class="flex">
                <el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
                  <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                    :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                    <div class="upload_btn">+上传附件</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
                  <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                    :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                    <div class="upload_btn">+上传附件</div>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="box_text3">Remark</div>
            </div>
          </el-card>
        </div>
        <!-- 详情的table -->
        <DetailInfo v-else />
            <quill-editor class="editor" v-model="form.remark" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </div>

        <div class="btn">
          <div class="btn_close">关闭</div>
          <div v-if="activeTab == 1" class="btn_comfirm" @click="submitForm('form')">确认</div>
        </div>
      </el-form>
    </div>


        </el-card>

        <el-card class="box-card mt-13">
          <div slot="header" class="clearfix">
            <span class="clearfix_text">附件</span>
          </div>
          <div class="box-carde">
            <div class="flex">
              <el-form-item label="Do：" class="w-316" prop="DOFileUrl" label-width="88px">

                <el-upload class="upload-demo" :on-preview="handlePreview" :http-request="handleUpload1" action="#"
                  :on-remove="handleRemove1" :on-exceed="handleExceed" :file-list="fileList1">
                  <div class="upload_btn" v-if="form.DOFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="PU#：" class="w-316" prop="PUFileUrl" label-width="88px">
                <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove2"
                  :http-request="handleUpload2" action="#" :on-exceed="handleExceed" :file-list="fileList2">
                  <div class="upload_btn" v-if="form.PUFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
                <el-input v-model="form.PUExplain" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="POD：" class=" w-316" prop="PODFileUrls" label-width="88px">
                <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove3"
                  :http-request="handleUpload3" action="#" :on-exceed="handleExceed" :file-list="fileList3">
                  <div class="upload_btn" v-if="form.PODFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="其他附件：" class="w-316" prop="otherFileUrls" label-width="88px">
                <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove4"
                  :http-request="handleUpload4" action="#" :on-exceed="handleExceed" :file-list="fileList4">
                  <div class="upload_btn" v-if="form.otherFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 详情的table -->
      <DetailInfo v-else />

      <div class="btn">
        <div class="btn_close" @click="$router.go(-1)">关闭</div>
        <div v-if="activeTab == 1" class="btn_comfirm" @click="submitForm('form')">确认</div>
      </div>
    </el-form>
    <AddedInformation v-if="show" :show="show" @close="show = false" @submit="submit"></AddedInformation>
  </div>
</template>

<script>
import { addOrder } from './addservier'
import { addOrder, getaddress } from './addservier'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import AddedInformation from '@/component/AddedInformation.vue'

import { quillEditor, Quill } from 'vue-quill-editor' //引入插件

import DetailInfoTop from '@/component/detailInfoTop'
import DetailInfo from '../component/detailInfo.vue'
import Header from '@/component/Header.vue'
import axios from 'axios'

export default {
  components: {
    quillEditor, DetailInfoTop, DetailInfo, Header
    AddedInformation,
    quillEditor, DetailInfoTop, DetailInfo,
  },
  data() {
    return {
      type:'add',
      activeTab: 1,
      show: false,
      form: {
        container: "", //集装箱号
        bol: "", //提单号
@@ -563,8 +559,8 @@
        PUExplain: '',//PU说明
        PUFileUrl: '',//PU附件
        DOFileUrl: '',//DO附件
        PODFileUrls: '',//POD附件
        otherFileUrls: '',//其他附件
        PODFileUrl: '',//POD附件
        otherFileUrl: '',//其他附件
        specialRequest: '',//特殊要求
        remark: '',//备注
      },
@@ -592,6 +588,7 @@

      // 导入参数
      upload: {
        data: {},
        // 是否显示弹出层
        open: false,
        // 弹出层标题
@@ -605,7 +602,10 @@
        // 上传的地址
        url: 'http://47.108.239.173:2020' + "/api/oss/new_temp_upload"
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      options: [
        {
          value: "20GP",
@@ -698,23 +698,24 @@
          label: "others",
        },
      ],
      optionsPL: [],
      rules: {
        container: [{ required: true, message: "请输入", trigger: "blur" }],
        bol: [{ required: true, message: "请输入", trigger: "blur" }],
        cargoType: [{ required: true, message: "请选择", trigger: "change" }],
        carrier: [{ required: true, message: "请选择", trigger: "change" }],
        cargoType: [{ required: true, message: "请选择", trigger: "blur" }],
        carrier: [{ required: true, message: "请选择", trigger: "blur" }],
        vesselAndVoyage: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        pickupLocation: [
          { required: true, message: "请选择", trigger: "change" },
          { required: true, message: "请选择", trigger: "blur" },
        ],
        ETA: [{ required: true, message: "请选择", trigger: "change" }],
        SOC: [{ required: true, message: "请选择", trigger: "change" }],
        DG: [{ required: true, message: "请选择", trigger: "change" }],
        overweight: [{ required: true, message: "请选择", trigger: "change" }],
        ETA: [{ required: true, message: "请选择", trigger: "blur" }],
        SOC: [{ required: true, message: "请选择", trigger: "blur" }],
        DG: [{ required: true, message: "请选择", trigger: "blur" }],
        overweight: [{ required: true, message: "请选择", trigger: "blur" }],
        customsInspection: [
          { required: true, message: "请选择", trigger: "change" },
          { required: true, message: "请选择", trigger: "blur" },
        ],
        product: [{ required: true, message: "请输入", trigger: "blur" }],
        QTY: [{ required: true, message: "请输入", trigger: "blur" }],
@@ -728,7 +729,41 @@
      },
    };
  },
  created() {
    getaddress({
      extra: JSON.parse(localStorage.getItem('userInfo')).extra
    }).then(resp => {
      console.log(resp, '----');
      if (resp.data.length > 0) {
        this.optionsPL = resp.data[0].ports.map(item => {
          item.value = item.port
          item.label = item.port
          return item
        })
      }


    })
  },
  methods: {
    addShow() {
      this.show = true
    },
    onInput(e) {
      this.form.poundWeight = Number(e * 2.2).toFixed(2)

    },
    submit(e) {
      console.log(e, 'e');
      this.form.contact = e.receiverName
      this.form.tel = e.receiverPhone
      this.form.email = e.receiverEmail

      this.form.address = e.receiverAddress
      this.form.remark = e.remark
      this.show =false

    },
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
@@ -746,38 +781,193 @@

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid, '----');


        if (valid) {
          alert("submit!");
          if (!this.form.tel && !this.form.email) {
            this.$message.error('联系电话和邮箱至少填写其中一项');

          } else {
            // 添加订单
            addOrder({
              ...this.form,
              extra: JSON.parse(localStorage.getItem('userInfo')).extra
            }).then(resp => {
              if (resp.data.status === 'SUCCESS') {
                this.$message.success('添加成功');
                this.form = {
                  container: "", //集装箱号
                  bol: "", //提单号
                  cargoType: "", //货柜类型
                  carrier: "", //船司
                  vesselAndVoyage: "", //航名航次
                  pickupLocation: "", //提柜地
                  ETA: "", //预计到达日期
                  SOC: "", //SOC
                  DG: "", //DG
                  overweight: "", //超重
                  customsInspection: "", //查验
                  dropOrLive: "", //DROP/LIVE
                  clientOrder: "", //客户订单号
                  product: "", //品名
                  QTY: "", //包装数量
                  weight: "", //重量
                  poundWeight: "", //≈重量(磅)
                  volume: "", //体积
                  contact: "", //收件人
                  consigneeCompany: "", //收件人公司
                  post: "", //目的地邮编
                  address: "", //地址
                  tel: "", //联系电话
                  email: "", //邮箱
                  PUExplain: '',//PU说明
                  PUFileUrl: '',//PU附件
                  DOFileUrl: '',//DO附件
                  PODFileUrl: '',//POD附件
                  otherFileUrl: '',//其他附件
                  specialRequest: '',//特殊要求
                  remark: '',//备注
                 
                }
                this.fileList1=[]
                this.fileList2=[]
                this.fileList3=[]
                this.fileList4=[]
                 
              }

            })
          }

        } else {
          console.log("error submit!!");
          this.$message.error('请填写必填内容');

          return false;
        }
      });
    },
    handleFileSuccesspicture(resp, file, fileList) {
      console.log(resp, file, fileList);


    },

    handlePreview(e) {
      console.log(e, 'e');

    },

    handleRemove(e) {
    handleRemove1(e) {
      console.log(e, 'e');


      this.form.DOFileUrl = '';
    },
    beforeRemove(e) {
    handleRemove2(e) {
      console.log(e, 'e');

      this.form.DOFileUrl = '';
    },
    handleRemove3(e) {
      console.log(e, 'e');
      this.form.DOFileUrl = '';
    },
    handleRemove4(e) {
      console.log(e, 'e');
      this.form.DOFileUrl = '';
    },

    handleExceed(e) {
      console.log(e, 'e');

    },
    uploadFile(e, obj, value) {
      axios.post('http://47.108.239.173:2020/api/oss/new_temp_upload', obj).then(res => {
        if (res.status == 200) {
          const fileName = new FormData();
          fileName.append('file', e.file);
          axios.post('http://47.108.239.173:2020/api/oss/upload_file', fileName, {
            headers: {
              'File-Name': res.data.data
            }
          }).then(resp => {
            console.log(resp, value, 'asdasdasdasdas');
            if (resp.data.status === 0) {
              if (value == 1) {
                this.form.DOFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else if (value == 2) {
                this.form.PUFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else if (value == 3) {
                this.form.PODFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else {
                this.form.otherFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              }
            }

          })
        }
      })
    },
    handleUpload1(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 1)

    },
    handleUpload2(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 2)

    },
    handleUpload3(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 3)

    },
    handleUpload4(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 4)

    },
  },
@@ -787,6 +977,10 @@
<style lang="less" scoped>
.tab {
  padding-bottom: 35px;
}

.w-316 {
  width: 316px;
}

.noactive {
@@ -859,12 +1053,22 @@
  }
}

::v-deep .el-upload-list__item:first-child {
  margin-top: 0 !important;
}

::v-deep .el-form-item__content {
  margin: 0 !important;
}

::v-deep .el-card {
  border-radius: 6px !important;
}

::v-deep .upload-demo {
  display: flex !important;
  align-items: center !important;

}

::v-deep .el-card__body {
@@ -885,27 +1089,29 @@
  align-items: center !important;
}

::v-deep .el-radio__label {
  font-size: 16px !important;
  color: rgba(59, 63, 86, 0.8) !important;

::v-deep .el-radio__inner::after {
  display: none;
}

::v-deep .el-radio__inner {
  width: 24px !important;
  height: 24px !important;
  box-sizing: border-box;
}

::v-deep .el-radio__input.is-checked {
  padding: 4px 4px 3px 4px;
  border: 1px solid #014099;
  border-radius: 50%;
  box-sizing: border-box;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border: 4px solid #fff !important;

  border-color: rgba(1, 64, 153, 1) !important;
  width: 12.5px !important;
  height: 12px !important;
  border: unset;
  background: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio__inner::after {
  // width: 16px !important;
  // height: 16px !important;
  // background-color: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio {
@@ -1061,6 +1267,22 @@
  }
}

.label6 {
  ::v-deep .el-form-item__error {
    left: 110px !important;
  }
}
.label7{
  ::v-deep .el-form-item__error {
    left: 205px !important;
  }
}
.label8{
  ::v-deep .el-form-item__error {
    left: 188px !important;
  }
}

.label2 {
  ::v-deep .el-form-item__error {
    left: 214px !important;

 src/view/addservier.js

@@ -4,3 +4,11 @@
export const addOrder = (data) => {
  return axios.post("/zj0FFk5wx4S05X-zksG9xBd0i00XB-1", data);
};
//查询提柜地
export const getaddress = (data) => {
    return axios.post("/zj0FFk5wx4S05X-zksJKOZX19c0XC-1", data);
  };
export const uploader = (data) => {
    return axios.post("http://47.108.239.173:2020/api/oss/new_temp_upload", data);
  };