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

pyt

2025-01-09 cb9a7c276a2b3d26a42dfe78c82166831a8a401e

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

 src/component/AddedInformation.vue

@@ -44,7 +44,8 @@
            default: false
        },
        row: {

            type: Object,
            default: null
        }
    },
    data() {
@@ -58,6 +59,8 @@
    created() {
        getMsg({ extra: localStorage.getItem('extra') }).then(res => {
            this.tableData = res.data
            // 回显选中行
            // this.setCurrent(this.row)
        })
    },
    mounted() { },

 src/component/Header.vue

@@ -1,7 +1,7 @@
<template>
    <div>
        <div class="header_content">
            <div class="color1 fs--24 font-bold">{{ userInfo.companyName }}</div>
            <div @click="$router.push('/home')" class="color1 fs--24 font-bold pointer">{{ userInfo.companyName }}</div>
            <div class="flex a-center j-between">
                <div @click="userInfoShow = true" class="flex a-center mr--55 shrink0 pointer">
                    <div class="mr--24 fs--20 font-bold shrink0 color2">{{ $store.state.userName }}</div>

 src/component/detailInfo.vue

@@ -1,5 +1,5 @@
<template>
    <div class="contanier">
    <div class="contanier11">
        <!-- card-two -->
        <el-card class="box-card mt-13">
            <div slot="header" class="clearfix">
@@ -46,9 +46,6 @@
            </div>

        </el-card>
        <div class="btn">
            <div class="btn_close">关闭</div>
        </div>
    </div>
</template>

@@ -301,7 +298,7 @@
    font-style: normal;
}

.contanier {
.contanier11 {
    background: #ededf3;
    // padding: 13px 35px 23px 35px;
}

 src/component/detailInfoTop.vue

@@ -1,7 +1,7 @@
<template>
    <div class="contanier">
    <div class="contanier1">
        <el-form ref="form" :model="form" label-width="80px">
            <div class="box-cardes bgWhite">
            <div class="box-cardes1 bgWhite">
                <div class="flex">
                    <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
                        <div class="flex a-center">
@@ -184,8 +184,8 @@
    padding: 23px 0 0px 24px;
}

.box-cardes {
    padding: 23px 0 38px 0;
.box-cardes1 {
    // padding: 23px 0 38px 0;
}

.editor {
@@ -367,7 +367,7 @@
    font-style: normal;
}

.contanier {
.contanier1 {
    background: #ededf3;
    // padding: 13px 35px 23px 35px;
}

 src/router/index.js

@@ -38,7 +38,7 @@
        meta: {
          title: "登录",
        },
        component: () => import("../view/Login.vue"),
        component: () => import("../view/login.vue"),
      },
      {
        path: "/addOrder",
@@ -60,11 +60,13 @@
  routes,
});

// 前置路由拦截器
// 路由拦截
router.beforeEach((to, from, next) => {
  // 没有登录并且要去的页面不是登录页面，强制跳转到登录
  if (!localStorage.getItem('extra') && to.path !== '/login') {
  const extra = localStorage.getItem('extra');
  if (!extra && to.path !== '/login') {
    next('/login');
  } else if (extra && to.path === '/login') {
    next('/home');
  } else {
    if (to.path === '/login') {
      localStorage.clear();

 src/view/Login.vue

@@ -39,8 +39,16 @@
    created() {
        this.codeStr = generateVerificationCode()
    },
    mounted() { },
    mounted() {
        document.addEventListener("keydown", this.handleKeyDown);
    },
    methods: {
        // 监听当前页面是否按下了回车
        handleKeyDown(event) {
            if (event.key === "Enter") {
                this.loginFun();
            }
        },
        loginFun() {
            if (!this.account) {
                this.$message({

 src/view/addOrder.vue

@@ -1,504 +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>
    <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">添加订单</span>
            <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
          </div>
          <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 class="bg">
          <span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
          <span>Pls supply detailed packing list for an OT or FR conainer</span>
        </div>
      </el-card>
      <!-- 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>
                    <div class="box_text2">Contact</div>
                  </div>
                  <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>
              <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 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">
              <div class="tip_box label5">

                <el-form-item label="" class="" prop="tel" label-width="0px">
            <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 class="red">*</div>
                        <div class="box_text1">集装箱号：</div>
                      </div>
                      <div class="box_text2">Tel</div>
                      <div class="box_text2">Contain#</div>
                    </div>
                    <el-select v-model="form.tel" clearable placeholder="请选择">
                    <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>
                <div class="tip">
                  <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                  <span>联系电话和邮箱至少填写其中一项</span>
                </div>

                <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="tip_box label5">
                <el-form-item label="" class="" prop="email" label-width="0px">
              <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 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 class="box_text1">≈重量(磅)：</div>
                      </div>
                      <div class="box_text2">Email</div>
                      <div class="box_text2">≈Pound weight</div>
                    </div>
                    <el-input v-model="form.email" placeholder="请输入"></el-input>
                    <el-input v-model="form.poundWeight" placeholder="请输入">
                      <div style="line-height: 50px;" slot="suffix">LBS</div>
                    </el-input>
                  </div>
                </el-form-item>
                <div class="tip">
                  <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                  <span>联系电话和邮箱至少填写其中一项</span>
                <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>
                        <div class="box_text2">Contact</div>
                      </div>
                      <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>
                  <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>
                </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="box10">
                <div class="flex">
                  <div class="box_text1">备注：</div>
                </div>
                <div class="box_text3">Remark</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>

          </div>


          <div class="flex  mt-43" style="height: unset;padding-bottom: 43px;">
            <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="red">*</div> -->
                <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">Other Information</div>
            </div>
            <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>

          </div>
          <div class="flex " style="padding-bottom: 27px;">
            <div class="box10">
              <div class="flex">
                <div class="box_text1">备注：</div>
                <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>
            <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </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-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 class="btn">
        <div class="btn_close">关闭</div>
        <div class="btn_comfirm" @click="submitForm('form')">确认</div>
      </div>
    </el-form>
      </el-form>
    </div>
  </div>
</template>

@@ -510,11 +524,13 @@

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


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

export default {
  components: {
    quillEditor
    quillEditor, DetailInfoTop, DetailInfo, Header
  },
  data() {
    return {
@@ -587,8 +603,9 @@
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/common/upload"
        url: 'http://47.108.239.173:2020' + "/api/oss/new_temp_upload"
      },
      fileList: [],
      options: [
        {
          value: "20GP",
@@ -739,14 +756,39 @@
        }
      });
    },
    handleFileSuccesspicture(resp, file, fileList) {
      console.log(resp, file, fileList);


    },

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

    },

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


    },
    beforeRemove(e) {
      console.log(e, 'e');

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

    },
  },
};
</script>

<style lang="less" scoped>
.tab{
.tab {
  padding-bottom: 35px;
}

.noactive {
  font-weight: 500;
  font-size: 18px;
@@ -755,7 +797,8 @@
  text-align: left;
  font-style: normal;
}
.ml-56{

.ml-56 {
  margin-left: 56px;
}