添加订单页面增加头部

hejianhao

2025-01-09 cbd4102029b0c93cc2b9d777586a5ddd79b5e911

添加订单页面增加头部

 src/view/addOrder.vue

@@ -1,515 +1,518 @@
<template>
  <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">
            <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 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>
          </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>
    <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 slot="header" class="clearfix">
            <span class="clearfix_text">货柜信息 ｜ Container Det</span>
            <span class="clearfix_text">添加订单</span>
            <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
          </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 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>
            <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>

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

                <el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
                <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 class="box_text1">提单号：</div>
                      </div>
                      <div class="box_text2">Consignee-Company</div>
                      <div class="box_text2">BOLI#</div>
                    </div>
                    <el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
                    <el-input v-model="form.bol" placeholder="请输入"></el-input>
                  </div>
                </el-form-item>

                <el-form-item label="" class="label3" prop="post" label-width="0px">
                <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 class="box_text1">货柜类型：</div>
                      </div>
                      <div class="box_text2">Post</div>
                      <div class="box_text2">Cargo Type</div>
                    </div>
                    <el-select v-model="form.post" clearable placeholder="请选择" prop="type">
                    <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>
                <el-form-item label="" class="label4" prop="address" label-width="0">
              </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 class="box_text1">预计到达日期：</div>
                      </div>
                      <div class="box_text2">Address</div>
                      <div class="box_text2">ETA</div>
                    </div>
                    <el-input v-model="form.address" placeholder="请输入"></el-input>
                    <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">
                <div class="tip_box label5">
                <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>
            </div>
            <div v-else>
              <DetailInfoTop />
            </div>
          </div>

                  <el-form-item label="" class="" prop="tel" label-width="0px">
          <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>
            </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="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>

                <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">
                    <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">Tel</div>
                        <div class="box_text2">Contact</div>
                      </div>
                      <el-select v-model="form.tel" clearable placeholder="请选择">
                        <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                      <el-input v-model="form.contact" placeholder="请输入"></el-input>
                    </div>
                  </el-form-item>

                  <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>
                        <div class="box_text2">Consignee-Company</div>
                      </div>
                      <el-input v-model="form.consigneeCompany" 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>
                  <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">
                  <el-form-item label="" class="label4" prop="address" label-width="0">
                    <div class="flex">
                      <div class="box1">
                      <div class="box2">
                        <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">Email</div>
                        <div class="box_text2">Address</div>
                      </div>
                      <el-input v-model="form.email" placeholder="请输入"></el-input>
                      <el-input v-model="form.address" 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="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>
                </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  mt-43" style="height: unset;padding-bottom: 43px;">
            <div class="flex " style="padding-bottom: 27px;">
              <div class="box10">
                <div class="flex">
                  <!-- <div class="red">*</div> -->
                  <div class="box_text1">其他联系方式：</div>
                  <div class="box_text1">备注：</div>
                </div>
                <div class="box_text3">Other Information</div>
                <div class="box_text3">Remark</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>
              <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>
          <div class="flex " style="padding-bottom: 27px;">
            <div class="box10">


          </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">
                <div class="box_text1">备注：</div>
                <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>
              <div class="box_text3">Remark</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>
            <quill-editor class="editor" v-model="form.remark" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </div>
       
          </el-card>
        </div>
        <!-- 详情的table -->
        <DetailInfo v-else />


        </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="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>
            <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>
        </el-card>
      </div>
      <!-- 详情的table -->
      <DetailInfo v-else />

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

@@ -523,10 +526,11 @@

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

export default {
  components: {
    quillEditor, DetailInfoTop, DetailInfo
    quillEditor, DetailInfoTop, DetailInfo, Header
  },
  data() {
    return {