修改bug

pyt

2025-02-12 9883cf18e99e8ba21f700cbe632adfe091f260ce

修改bug

 src/App.vue

@@ -1,40 +1,40 @@
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import './utils/app.css'
import './utils/basics.less'
export default {
  name: "app",
  components: {
  },
  data() {
    return {
    };
  },
  created() { },
  mounted() {
  },
  methods: {},
  beforeUpdate() {
  }
};
</script>

<style lang='less'>
::-webkit-scrollbar {
  display: none;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(245, 245, 245);
}
</style>
<template>

  <div id="app">

    <router-view />

  </div>

</template>



<script>

import './utils/app.css'

import './utils/basics.less'

export default {

  name: "app",

  components: {

  },

  data() {

    return {

    };

  },

  created() { },

  mounted() {

  },

  methods: {},

  beforeUpdate() {

  }

};

</script>



<style lang='less'>

// ::-webkit-scrollbar {

//   display: none;

// }



html,

body,

#app {

  height: 100%;

  margin: 0;

  padding: 0;

  background-color: rgb(245, 245, 245);

}

</style>


 src/view/Home.vue

@@ -63,30 +63,35 @@
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="orderId" label="订单编号" align="center">
                <el-table-column width="200" prop="orderId" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="container" label="集装箱号" align="center">
                <el-table-column width="200" prop="container" label="集装箱号" align="center">
                </el-table-column>
                <el-table-column prop="bol" label="提单号" align="center">
                <el-table-column width="200" prop="bol" label="提单号" align="center">
                </el-table-column>
                <el-table-column prop="mail" label="收件人邮箱" align="center">
                <el-table-column width="200" prop="mail" label="收件人邮箱" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人地址" align="center">
                <el-table-column width="250" prop="address" label="收件人地址" align="center">
                </el-table-column>
                <el-table-column prop="estimatedArrival" label="预计到达时间" align="center">
                <el-table-column width="200" prop="estimatedArrival" label="预计到达时间" align="center">
                </el-table-column>
                <el-table-column prop="deliverySchedule" label="预计送柜日期" align="center">
                <el-table-column width="200" prop="deliverySchedule" label="预计送柜日期" align="center">
                </el-table-column>
                <el-table-column prop="realSchedule" label="实际送货日期" align="center">
                <el-table-column width="200" prop="realSchedule" label="实际送货日期" align="center">
                </el-table-column>
                <el-table-column prop="DO" label="DO文件是否上传" align="center">
                <el-table-column width="150" prop="DO" label="DO文件是否上传" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.DO ? '是' : '否' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="订单状态" align="center">
                <el-table-column width="150" prop="status" label="订单状态" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == '收货⼈已确认' || scope.row.status == '待卡⻋确认' || scope.row.status == '待收货⼈确认'">预约中</div>
                        <div v-else-if="scope.row.status == '卡⻋和收货⼈均确认'">预约完成</div>
                        <div v-else>{{ scope.row.status }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="option" label="操作" align="center">
                <el-table-column width="150" prop="option" label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" class="table-btn"
                            @click="handleClick(scope.row, 'detail')">查看详情</el-button><span class="line-set">|</span>

 src/view/addOrder.vue

@@ -1,1607 +1,1837 @@
<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" @click="$router.go(-1)" alt="" />
        </div>
        <div class="box-cards">
          <div class="flex tab" v-if="type == 'detail'">
            <div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
              基础信息
            </div>
            <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">
              价格信息
            </div>
          </div>

          <div v-if="activeTab == 1">
            <div class="flex">
              <el-form-item label="" class="label1" prop="container" label-width="0">
                <div class="flex">
                  <div class="box">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">集装箱号：</div>
                    </div>
                    <div class="box_text2">Contain#</div>
                  </div>
                  <el-input :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" v-model="form.pickupLocation" clearable placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsPL"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="" class="label4" prop="ETA" label-width="0">
                <div class="flex">
                  <div class="box2">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">预计到达日期：</div>
                    </div>
                    <div class="box_text2">ETA</div>
                  </div>
                  <el-date-picker :disabled="type == 'detail'" type="datetime" suffix-icon="el-icon-date"
                    placeholder="选择日期" v-model="form.ETA" style="width: 100%">
                    <div></div>
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="label1" prop="SOC" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box4">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">SOC：</div>
                    </div>
                  </div>
                  <el-radio-group :disabled="type == 'detail'" text-color="#014099" fill="#014099" v-model="form.SOC">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="label7" prop="DG" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box5">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">DG：</div>
                    </div>
                  </div>
                  <el-radio-group :disabled="type == 'detail'" text-color="#014099" fill="#014099" v-model="form.DG">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="label8" prop="overweight" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box6">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">是否超重：</div>
                    </div>
                    <div class="box_text1 mr-14">Over Weight</div>
                  </div>
                  <el-radio-group :disabled="type == 'detail'" text-color="#014099" fill="#014099"
                    v-model="form.overweight">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="label4" prop="customsInspection" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box7">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">是否查验：</div>
                    </div>
                    <div class="box_text1">Customs Inspection</div>
                  </div>
                  <el-radio-group :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :info="detailInfo" />
          </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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" v-model="form.QTYUnit" clearable placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="label6" prop="weight" label-width="0px">
                <div class="flex">
                  <div class="box9">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">重量：</div>
                    </div>
                    <div class="box_text2">Weight</div>
                  </div>
                  <el-input type="number" :disabled="type == 'detail'" v-model="form.weight" @input="onInput"
                    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 disabled v-model="form.poundWeight" placeholder="请输入">
                    <div style="line-height: 50px;" slot="suffix">LBS</div>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="" class="label3" prop="volume" label-width="0px">
                <div class="flex">
                  <div class="box3">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">体积：</div>
                    </div>
                    <div class="box_text2">Voume</div>
                  </div>
                  <el-input type="number" :disabled="type == 'detail'" 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" @click="addShow">
              <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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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-input :disabled="type == 'detail'" v-model="form.post" placeholder="请输入"></el-input>

                  </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 :disabled="type == 'detail'" 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-input type="number" :disabled="type == 'detail'" v-model="form.tel"
                        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 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" class="editor" v-model="form.remark" ref="myQuillEditor"
              :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </div>



        </el-card>

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

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

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

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

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

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

export default {
  components: {
    AddedInformation,
    quillEditor, DetailInfoTop, DetailInfo,
  },
  data() {
    return {
      type: 'add',
      activeTab: 1,
      show: false,
      detailInfo: {},
      form: {
        container: "", //集装箱号
        bol: "", //提单号
        cargoType: "", //货柜类型
        carrier: "", //船司
        vesselAndVoyage: "", //航名航次
        pickupLocation: "", //提柜地
        ETA: "", //预计到达日期
        SOC: "", //SOC
        DG: "", //DG
        overweight: "", //超重
        customsInspection: "", //查验
        dropOrLive: "", //DROP/LIVE
        clientOrder: "", //客户订单号
        product: "", //品名
        QTY: "", //包装数量
        weight: "", //重量
        poundWeight: "", //≈重量(磅)
        volume: "", //体积
        contact: "", //收件人
        consigneeCompany: "", //收件人公司
        post: "", //目的地邮编
        address: "", //地址
        tel: "", //联系电话
        QTYUnit: '',//单位
        email: "", //邮箱
        PUExplain: '',//PU说明
        PUFileUrl: '',//PU附件
        DOFileUrl: '',//DO附件
        PODFileUrl: '',//POD附件
        otherFileUrl: '',//其他附件
        specialRequest: '',//特殊要求
        remark: '',//备注
      },
      orderId: '',
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            ["image"], //上传图片、上传视频
          ],
        },
      },



      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      options: [
        {
          value: "20GP",
          label: "20GP",
        },
        {
          value: "40GP",
          label: "40GP",
        },
        {
          value: "40HQ",
          label: "40HQ",
        },
        {
          value: "45HQ",
          label: "45HQ",
        },
        {
          value: "40FR",
          label: "40FR",
        },
        {
          value: "40OT",
          label: "40OT",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      optionsSc: [
        {
          value: "COSCO",
          label: "COSCO",
        },
        {
          value: "OOCL",
          label: "OOCL",
        },
        {
          value: "ONE",
          label: "ONE",
        },
        {
          value: "CMA",
          label: "CMA",
        },
        {
          value: "CGM",
          label: "CGM",
        },
      ],
      optionsCpa: [
        {
          value: "COSCO",
          label: "COSCO",
        },
        {
          value: "OOCL",
          label: "OOCL",
        },
        {
          value: "ONE",
          label: "ONE",
        },
        {
          value: "CMA",
          label: "CMA",
        },
        {
          value: "CGM",
          label: "CGM",
        },
      ],
      optionsUs: [
        {
          value: "carton",
          label: "carton",
        },
        {
          value: "pailet",
          label: "pailet",
        },
        {
          value: "case",
          label: "case",
        },
        {
          value: "others",
          label: "others",
        },
      ],
      optionsPL: [],
      rules: {
        email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
        container: [{ required: true, message: "请输入", trigger: "blur" }],
        bol: [{ required: true, message: "请输入", trigger: "blur" }],
        cargoType: [{ required: true, message: "请选择", trigger: "blur" }],
        carrier: [{ required: true, message: "请选择", trigger: "blur" }],
        vesselAndVoyage: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        pickupLocation: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        ETA: [{ required: true, message: "请选择", trigger: "blur" }],
        SOC: [{ required: true, message: "请选择", trigger: "blur" }],
        DG: [{ required: true, message: "请选择", trigger: "blur" }],
        overweight: [{ required: true, message: "请选择", trigger: "blur" }],
        customsInspection: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        product: [{ required: true, message: "请输入", trigger: "blur" }],
        QTY: [{ required: true, message: "请输入", trigger: "blur" }],
        weight: [{ required: true, message: "请输入", trigger: "blur" }],
        volume: [{ required: true, message: "请输入", trigger: "blur" }],
        consigneeCompany: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        post: [{ required: true, message: "请输入", trigger: "blur" }],
        address: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  created() {

    this.orderId = this.$route.query.orderId
    this.type = this.$route.query.type ? this.$route.query.type : 'add'
    if (this.orderId) {
      getDetail({
        orderId: this.orderId
      }).then(resp => {
        this.form = resp.data
        this.detailInfo = resp.data
        this.form.DOFileUrl = resp.data.DOFileUrl ? resp.data.DOFileUrl : ''
        this.form.PUFileUrl = resp.data.PUFileUrl ? resp.data.PUFileUrl : ''
        this.form.PODFileUrl = resp.data.PODFileUrl ? resp.data.PODFileUrl : ''
        this.form.otherFileUrl = resp.data.otherFileUrl ? resp.data.otherFileUrl : ''
        if (resp.data.DOFileUrl) {
          this.fileList1.push({ url: resp.data.DOFileUrl, name: resp.data.DOFileUrl.split('ownload/')[1] })

        }
        if (resp.data.PUFileUrl) {
          this.fileList2.push({ url: resp.data.PUFileUrl, name: resp.data.PUFileUrl.split('ownload/')[1] })

        }
        if (resp.data.PODFileUrl) {
          this.fileList3.push({ url: resp.data.PODFileUrl, name: resp.data.PODFileUrl.split('ownload/')[1] })

        }
        if (resp.data.otherFileUrl) {
          this.fileList4.push({ url: resp.data.otherFileUrl, name: resp.data.otherFileUrl.split('ownload/')[1] })

        }


      })
    }

    getaddress({
      extra: JSON.parse(localStorage.getItem('userInfo')).extra
    }).then(resp => {
      console.log(resp, '----');
      if (resp.data.length > 0) {
        this.optionsPL = resp.data[0].ports.map(item => {
          item.value = item.port
          item.label = item.port
          return item
        })
      }


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

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

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

    },
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },


    submitForm(formName) {
      this.$refs[formName].validate((valid) => {


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

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

                  }
                  this.fileList1 = []
                  this.fileList2 = []
                  this.fileList3 = []
                  this.fileList4 = []
                  this.$router.go(-1)

                }

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

                  }
                  this.fileList1 = []
                  this.fileList2 = []
                  this.fileList3 = []
                  this.fileList4 = []
                  this.$router.go(-1)

                }

              })
            }

          }

        } else {
          this.$message.error('请填写必填内容');

          return false;
        }
      });
    },

    handlePreview(e) {
      console.log(e, 'e');
    },
    handleRemove1(e) {
      console.log(e, 'e');
      this.form.DOFileUrl = '';
      this.fileList1 = []
    },
    handleRemove2(e) {
      console.log(e, 'e');
      this.form.PUFileUrl = '';
      this.fileList2 = []
    },
    handleRemove3(e) {
      console.log(e, 'e');
      this.form.PODFileUrl = '';
      this.fileList3 = []
    },
    handleRemove4(e) {
      console.log(e, 'e');
      this.form.otherFileUrl = '';
      this.fileList4 = []
    },

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

    },
    async toArrayBuffer(file) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);

        fileReader.onload = (e) => {
          resolve(e.target.result);
        };

        fileReader.onerror = (e) => {
          reject(e);
        };
      });
    },
    async upFileAsArrayBuffer(url, file, options) {
      const arrayBuffer = await this.toArrayBuffer(file);

      return axios({
        url,
        method: options.method || 'POST',
        withCredentials: Boolean(options.withCredentials),
        data: arrayBuffer,
        headers: {
          'Content-Type': 'application/octet-stream',
          'file-name': encodeURIComponent(options.fileName || file.name),
        },
        onUploadProgress: ({ total, loaded }) => {
          const onProgress = options.onProgress;
          if (typeof onProgress === 'function') {
            onProgress({
              percent: Math.ceil((loaded / total) * 100),
            });
          }
        },
      });
    },
    uploadFile(e, obj, value) {
      axios.post('http://47.108.239.173:2020/api/oss/new_temp_upload', obj).then(res => {
        if (res.status == 200) {
          this.upFileAsArrayBuffer('http://47.108.239.173:2020/api/oss/upload_file', e.file, { methods: 'POST', fileName: res.data.data }).then(resp => {
            console.log(resp, 'asdasdsad');
            if (resp.data.status === 0) {
              if (value == 1) {
                this.form.DOFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
                console.log(this.fileList1, 'this.fileList1');

              } else if (value == 2) {
                this.form.PUFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
                console.log(this.form.PUFileUrl, 'this.form.PUFileUrl');

              } else if (value == 3) {
                this.form.PODFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else {
                this.form.otherFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              }
              this.$forceUpdate()
            }
          })
        }
      })
    },
    handleUpload1(e) {

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

    },
    handleUpload2(e) {

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

    },
    handleUpload3(e) {

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

    },
    handleUpload4(e) {

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

    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-upload-list__item-name {
  max-width: 150px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab {
  padding-bottom: 35px;
}

.w-316 {
  width: 316px;
}

.noactive {
  font-weight: 500;
  font-size: 18px;
  color: #4C5065;
  line-height: 27px;
  text-align: left;
  font-style: normal;
}

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

.active {
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  color: #3B3F56;
  line-height: 27px;
  text-align: left;
  font-style: normal;
}

.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  margin: auto;
  width: 21px;
  height: 5px;
  background: #014099;
  border-radius: 6px;
  transition: all 0.2s;
  /* 可选的过渡效果 */
}

.active:hover::after {
  width: 0;
  /* 鼠标悬停时下划线消失的效果 */

}

.box-cards {
  padding: 23px 0 0px 24px;
}

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

.editor {
  flex: 1;
  margin-right: 23px;

  ::v-deep .ql-container {
    height: 200px;
  }
}

.box-carde {
  padding: 27px 0 41px 24px;

  ::v-deep .el-form-item__label {
    text-align: left !important;
    width: 88px !important;
    flex-shrink: 0;
  }
}

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

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

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

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

}

::v-deep .el-card__body {
  padding: 0 !important;
}

::v-deep .el-card__header {
  padding: 35px 23px 23px 23px !important;
}

::v-deep .el-input__inner {
  width: 230px !important;
  height: 50px !important;
}

::v-deep .el-form-item {
  display: flex !important;
  align-items: center !important;
}


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

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

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

::v-deep .el-radio__input.is-checked .el-radio__inner {
  width: 12.5px !important;
  height: 12px !important;
  border: unset;
  background: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio {
  width: 65px !important;
  margin-right: 42px !important;
}

.upload_btn {
  width: 107px;
  height: 43px;
  background: #014099;
  border-radius: 1px;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}



.mr-14 {
  margin-right: 14px;
}

.mr-129 {
  margin-right: 129px;
}

.bg {
  height: 75px;
  background: rgba(1, 64, 153, 0.11);
  border-radius: 1px;
  display: flex;
  flex-direction: column;
  padding: 17px 0 17px 24px;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 16px;
  color: #3b3f56;
  line-height: 24px;
  text-align: left;
  font-style: normal;
}

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

.mt-13 {
  margin-top: 13px;
}

.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clearfix_text {
  font-weight: bold;
  font-size: 20px;
  color: #3b3f56;
  line-height: 30px;
  text-align: left;
  font-style: normal;
}

.clearfix_btn {
  display: flex;
  align-items: center;
  background: #014099;
  border-radius: 4px;
  padding: 15px 7px 15px 16px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  line-height: 24px;
  text-align: left;
  font-style: normal;
}

.clearfix_btn_img {
  width: 20px;
  height: 20px;
  margin-right: 9px;
}

.clearfix_img {
  width: 24px;
  height: 24px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 27px;

  .btn_close {
    width: 190px;
    height: 50px;
    background: #ffffff;
    border-radius: 4px;
    border: 2px solid #d2d2d2;
    font-weight: 500;
    font-size: 20px;
    color: #000000;
    line-height: 30px;
    text-align: right;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn_comfirm {
    width: 190px;
    height: 50px;
    background: #014099;
    border-radius: 4px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 30px;
    text-align: right;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
  }
}

.box {
  width: 90px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
}

.label1 {
  ::v-deep .el-form-item__error {
    left: 90px !important;
  }
}

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

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

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

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

.label3 {
  ::v-deep .el-form-item__error {
    left: 213px !important;
  }
}

.label4 {
  ::v-deep .el-form-item__error {
    left: 247px !important;
  }
}

.label5 {
  ::v-deep .el-form-item {
    margin-bottom: 11px !important;
  }
}

.mt-43 {
  margin-top: 43px;
}

.box1 {
  width: 215px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
}

.box2 {
  width: 247px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
}

.box3 {
  width: 213px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
}

.box4 {
  width: 100px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-start;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 14px;
}

.box5 {
  width: 206px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 44px;
}

.box6 {
  width: 188px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 14px;
}

.box7 {
  width: 247px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 14px;
}

.box8 {
  width: 100px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 14px;
}

.box9 {
  width: 110px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
}

.box10 {
  width: 120px;
  display: flex;
  flex-direction: column;
  line-height: 23px !important;
  align-items: flex-end;
  font-weight: 500;
  flex-shrink: 0;
}

.box_text1 {
  font-weight: 500;
  font-size: 16px;
  color: rgba(59, 63, 86, 0.8);
  line-height: 24px;
}

.box_text2 {
  font-weight: 500;
  font-size: 14px;
  color: rgba(59, 63, 86, 0.8);
  line-height: 24px;
  margin-right: 14px;
}

.box_text3 {
  font-weight: 500;
  font-size: 12px;
  color: rgba(59, 63, 86, 0.8);
  line-height: 24px;
  margin-right: 14px;
}

.red {
  color: red;
}

.tip_box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tip {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  color: #FE3333;
  line-height: 18px;
  text-align: left;
  padding-right: 29px;

  .tip-img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}
</style>
<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" @click="$router.go(-1)" alt="" />

        </div>

        <div class="box-cards">

          <div class="flex tab" v-if="type == 'detail'">

            <div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">

              基础信息

            </div>

            <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">

              价格信息

            </div>

          </div>



          <div v-if="activeTab == 1">

            <div class="flex">

              <el-form-item label="" class="label1" prop="container" label-width="0">

                <div class="flex">

                  <div class="box">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">集装箱号：</div>

                    </div>

                    <div class="box_text2">Contain#</div>

                  </div>

                  <el-input :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" v-model="form.pickupLocation" clearable placeholder="请选择">

                    <el-option :label="item.label" :value="item.value" v-for="item in optionsPL"

                      :key="item.value"></el-option>

                  </el-select>

                </div>

              </el-form-item>

              <el-form-item label="" class="label4" prop="ETA" label-width="0">

                <div class="flex">

                  <div class="box2">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">预计到达日期：</div>

                    </div>

                    <div class="box_text2">ETA</div>

                  </div>

                  <el-date-picker :disabled="type == 'detail'" type="datetime" suffix-icon="el-icon-date"

                    placeholder="选择日期" v-model="form.ETA" style="width: 100%">

                    <div></div>

                  </el-date-picker>

                </div>

              </el-form-item>

            </div>

            <div class="flex">

              <el-form-item label="" class="label1" prop="SOC" label-width="0">

                <div class="flex" style="align-items: center">

                  <div class="box4">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">SOC：</div>

                    </div>

                  </div>

                  <el-radio-group :disabled="type == 'detail'" text-color="#014099" fill="#014099" v-model="form.SOC">

                    <el-radio label="是"></el-radio>

                    <el-radio label="否"></el-radio>

                  </el-radio-group>

                </div>

              </el-form-item>

              <el-form-item label="" class="label7" prop="DG" label-width="0">

                <div class="flex" style="align-items: center">

                  <div class="box5">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">DG：</div>

                    </div>

                  </div>

                  <el-radio-group :disabled="type == 'detail'" text-color="#014099" fill="#014099" v-model="form.DG">

                    <el-radio label="是"></el-radio>

                    <el-radio label="否"></el-radio>

                  </el-radio-group>

                </div>

              </el-form-item>

              <el-form-item label="" class="label8" prop="overweight" label-width="0">

                <div class="flex" style="align-items: center">

                  <div class="box6">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">是否超重：</div>

                    </div>

                    <div class="box_text1 mr-14">Over Weight</div>

                  </div>

                  <el-radio-group :disabled="type == 'detail'" text-color="#014099" fill="#014099"

                    v-model="form.overweight">

                    <el-radio label="是"></el-radio>

                    <el-radio label="否"></el-radio>

                  </el-radio-group>

                </div>

              </el-form-item>

              <el-form-item label="" class="label4" prop="customsInspection" label-width="0">

                <div class="flex" style="align-items: center">

                  <div class="box7">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">是否查验：</div>

                    </div>

                    <div class="box_text1">Customs Inspection</div>

                  </div>

                  <el-radio-group :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :info="detailInfo" />

          </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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" v-model="form.QTYUnit" clearable placeholder="请选择">

                    <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"

                      :key="item.value"></el-option>

                  </el-select>

                </div>

              </el-form-item>

            </div>

            <div class="flex">

              <el-form-item label="" class="label6" prop="weight" label-width="0px">

                <div class="flex">

                  <div class="box9">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">重量：</div>

                    </div>

                    <div class="box_text2">Weight</div>

                  </div>

                  <el-input type="number" :disabled="type == 'detail'" v-model="form.weight" @input="onInput"

                    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 disabled v-model="form.poundWeight" placeholder="请输入">

                    <div style="line-height: 50px;" slot="suffix">LBS</div>

                  </el-input>

                </div>

              </el-form-item>

              <el-form-item label="" class="label3" prop="volume" label-width="0px">

                <div class="flex">

                  <div class="box3">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">体积：</div>

                    </div>

                    <div class="box_text2">Voume</div>

                  </div>

                  <el-input type="number" :disabled="type == 'detail'" 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" @click="addShow">

              <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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" 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-input :disabled="type == 'detail'" v-model="form.post" placeholder="请输入"></el-input>



                  </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 :disabled="type == 'detail'" 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-input type="number" :disabled="type == 'detail'" v-model="form.tel"

                        placeholder="请输入"></el-input>



                    </div>

                  </el-form-item>

                  <div class="tip">

                    <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />

                    <span>联系电话和邮箱至少填写其中一项</span>

                    <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 :disabled="type == 'detail'" v-model="form.email" placeholder="请输入"></el-input>

                    </div>

                  </el-form-item>

                  <div class="tip flex">

                    <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />

                    <div>联系电话和邮箱至少填写其中一项

                      <div>多个邮箱请填写到“其他联系⽅式”</div>

                    </div>

                  </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 :disabled="type == 'detail'" 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 :disabled="type == 'detail'" class="editor" v-model="form.remark" ref="myQuillEditor"

              :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

              @change="onEditorChange($event)">

            </quill-editor>

          </div>







        </el-card>

        <el-card class="box-card mt-13">

          <div slot="header" class="clearfix">

            <span class="clearfix_text">货柜动态</span>

          </div>

          <div class="box-cardes">

            <div class="flex">

              <el-form-item label="" class="label1" prop="clientOrder" label-width="0">

                <div class="flex">

                  <div class="box9" style="width: 200px">

                    <div class="flex">

                      <!-- <div class="red">*</div> -->

                      <div class="box_text1">车架号：</div>

                    </div>

                    <div class="box_text2">Frame number</div>

                  </div>

                  <el-input :disabled="type == 'detail'" 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">LFD</div>

                  </div>

                  <el-input :disabled="type == 'detail'" 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">Pickup Date</div>

                  </div>

                  <el-input :disabled="type == 'detail'" 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">Delivery Schedule</div>

                  </div>

                  <el-select :disabled="type == 'detail'" v-model="form.QTYUnit" clearable placeholder="请选择">

                    <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"

                      :key="item.value"></el-option>

                  </el-select>

                </div>

              </el-form-item>

            </div>

            <div class="flex">

              <el-form-item label="" class="label6" prop="weight" label-width="0px">

                <div class="flex">

                  <div class="box9" style="width: 200px">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">实际送货日期：</div>

                    </div>

                    <div class="box_text2"></div>

                  </div>

                  <el-input type="number" :disabled="type == 'detail'" v-model="form.weight" @input="onInput"

                    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">Delivery Date</div>

                  </div>

                  <el-input disabled v-model="form.poundWeight" placeholder="请输入">

                    <div style="line-height: 50px;" slot="suffix">LBS</div>

                  </el-input>

                </div>

              </el-form-item>

              <el-form-item label="" class="label3" prop="volume" label-width="0px">

                <div class="flex">

                  <div class="box3">

                    <div class="flex">

                      <div class="red">*</div>

                      <div class="box_text1">报空日期：</div>

                    </div>

                    <div class="box_text2">Empty Report Date</div>

                  </div>

                  <el-input type="number" :disabled="type == 'detail'" v-model="form.volume" placeholder="请输入">

                    <div style="line-height: 50px;" slot="suffix">CMB</div>

                  </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">Empty Return Date</div>

                  </div>

                  <el-select :disabled="type == 'detail'" 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>

        </el-card>

        <el-card class="box-card mt-13">

          <div slot="header" class="clearfix">

            <span class="clearfix_text">附件</span>

          </div>

          <div class="box-carde">

            <div class="flex">

              <el-form-item label="Do：" class="w-316" prop="DOFileUrl" label-width="88px">



                <el-upload :disabled="type == 'detail'" class="upload-demo" :on-preview="handlePreview"

                  :http-request="handleUpload1" action="#" :on-remove="handleRemove1" :on-exceed="handleExceed"

                  :file-list="fileList1">

                  <div class="upload_btn" v-if="form.DOFileUrl == ''">+上传附件</div>

                </el-upload>

              </el-form-item>

              <el-form-item label="PU#：" class="w-316" prop="PUFileUrl" label-width="88px">

                <el-upload :disabled="type == 'detail'" class="upload-demo" :on-preview="handlePreview"

                  :on-remove="handleRemove2" :http-request="handleUpload2" action="#" :on-exceed="handleExceed"

                  :file-list="fileList2">

                  <div class="upload_btn" v-if="form.PUFileUrl == ''">+上传附件</div>

                </el-upload>

              </el-form-item>

              <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">

                <el-input :disabled="type == 'detail'" v-model="form.PUExplain" placeholder="请输入"></el-input>

              </el-form-item>

            </div>

            <div class="flex">

              <el-form-item label="POD：" class=" w-316" prop="PODFileUrls" label-width="88px">

                <el-upload :disabled="type == 'detail'" class="upload-demo" :on-preview="handlePreview"

                  :on-remove="handleRemove3" :http-request="handleUpload3" action="#" :on-exceed="handleExceed"

                  :file-list="fileList3">

                  <div class="upload_btn" v-if="form.PODFileUrl == ''">+上传附件</div>

                </el-upload>

              </el-form-item>

              <el-form-item label="其他附件：" class="w-316" prop="otherFileUrls" label-width="88px">

                <el-upload :disabled="type == 'detail'" class="upload-demo" :on-preview="handlePreview"

                  :on-remove="handleRemove4" :http-request="handleUpload4" action="#" :on-exceed="handleExceed"

                  :file-list="fileList4">

                  <div class="upload_btn" v-if="form.otherFileUrl == ''">+上传附件</div>

                </el-upload>

              </el-form-item>

            </div>

          </div>

        </el-card>

      </div>

      <!-- 详情的table -->

      <DetailInfo v-else :info="detailInfo" />



      <div class="btn">

        <div class="btn_close" @click="$router.go(-1)">关闭</div>

        <div v-if="type != 'detail'" class="btn_comfirm" @click="submitForm('form')">确认</div>

      </div>

    </el-form>

    <AddedInformation v-if="show" :show="show" @close="show = false" @submit="submit"></AddedInformation>

  </div>

</template>



<script>

import { addOrder, getaddress, edit, getDetail } from './addservier'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

import AddedInformation from '@/component/AddedInformation.vue'



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



import DetailInfoTop from '@/component/detailInfoTop'

import DetailInfo from '../component/detailInfo.vue'

import axios from 'axios'



export default {

  components: {

    AddedInformation,

    quillEditor, DetailInfoTop, DetailInfo,

  },

  data() {

    return {

      type: 'add',

      activeTab: 1,

      show: false,

      detailInfo: {},

      form: {

        container: "", //集装箱号

        bol: "", //提单号

        cargoType: "", //货柜类型

        carrier: "", //船司

        vesselAndVoyage: "", //航名航次

        pickupLocation: "", //提柜地

        ETA: "", //预计到达日期

        SOC: "", //SOC

        DG: "", //DG

        overweight: "", //超重

        customsInspection: "", //查验

        dropOrLive: "", //DROP/LIVE

        clientOrder: "", //客户订单号

        product: "", //品名

        QTY: "", //包装数量

        weight: "", //重量

        poundWeight: "", //≈重量(磅)

        volume: "", //体积

        contact: "", //收件人

        consigneeCompany: "", //收件人公司

        post: "", //目的地邮编

        address: "", //地址

        tel: "", //联系电话

        QTYUnit: '',//单位

        email: "", //邮箱

        PUExplain: '',//PU说明

        PUFileUrl: '',//PU附件

        DOFileUrl: '',//DO附件

        PODFileUrl: '',//POD附件

        otherFileUrl: '',//其他附件

        specialRequest: '',//特殊要求

        remark: '',//备注

      },

      orderId: '',

      editorOption: {

        modules: {

          toolbar: [

            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线

            ["blockquote", "code-block"], //引用，代码块

            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小

            [{ list: "ordered" }, { list: "bullet" }], //列表

            [{ script: "sub" }, { script: "super" }], // 上下标

            [{ indent: "-1" }, { indent: "+1" }], // 缩进

            [{ direction: "rtl" }], // 文本方向

            [{ size: ["small", false, "large", "huge"] }], // 字体大小

            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色

            [{ font: [] }], //字体

            [{ align: [] }], //对齐方式

            ["clean"], //清除字体样式

            ["image"], //上传图片、上传视频

          ],

        },

      },







      fileList1: [],

      fileList2: [],

      fileList3: [],

      fileList4: [],

      options: [

        {

          value: "20GP",

          label: "20GP",

        },

        {

          value: "40GP",

          label: "40GP",

        },

        {

          value: "40HQ",

          label: "40HQ",

        },

        {

          value: "45HQ",

          label: "45HQ",

        },

        {

          value: "40FR",

          label: "40FR",

        },

        {

          value: "40OT",

          label: "40OT",

        },

        {

          value: "其他",

          label: "其他",

        },

      ],

      optionsSc: [

      {

          value: "COSCO",

          label: "COSCO",

        },

        {

          value: "OOCL",

          label: "OOCL",

        },

        {

          value: "ONE",

          label: "ONE",

        },

        {

          value: "CMA CGM",

          label: "CMA CGM",

        },

        {

          value: "EVERGREEN",

          label: "EVERGREEN",

        },

        {

          value: "ZIM",

          label: "ZIM",

        },

        {

          value: "YANG MING",

          label: "YANG MING",

        },

        {

          value: "WANHAI LINE",

          label: "WANHAI LINE",

        },

        {

          value: "MAERSK",

          label: "MAERSK",

        },

        {

          value: "MSC",

          label: "MSC",

        },

        {

          value: "HMM",

          label: "HMM",

        },

        {

          value: "HPL",

          label: "HPL",

        },

        {

          value: "HDW",

          label: "HDW",

        },

        {

          value: "T.S.LINE",

          label: "T.S.LINE",

        },

        {

          value: "SEA LEAD",

          label: "SEA LEAD",

        },

        {

          value: "SM LINE",

          label: "SM LINE",

        },

        {

          value: "OTHERS",

          label: "OTHERS",

        }

        
      ],

      //COSCO、OOCL、ONE、CMA CGM、EVERGREEN(EMC)、ZIM、YANG MING(YML)、WANHAI LINE(WHL)、MAERSK(MSK)、MSC、HMM、HPL、HDW、T.S.LINE、SEA LEAD、SM LINE、OTHERS

      optionsCpa: [

        {

          value: "COSCO",

          label: "COSCO",

        },

        {

          value: "OOCL",

          label: "OOCL",

        },

        {

          value: "ONE",

          label: "ONE",

        },

        {

          value: "CMA CGM",

          label: "CMA CGM",

        },

        {

          value: "EVERGREEN",

          label: "EVERGREEN",

        },

        {

          value: "ZIM",

          label: "ZIM",

        },

        {

          value: "YANG MING",

          label: "YANG MING",

        },

        {

          value: "WANHAI LINE",

          label: "WANHAI LINE",

        },

        {

          value: "MAERSK",

          label: "MAERSK",

        },

        {

          value: "MSC",

          label: "MSC",

        },

        {

          value: "HMM",

          label: "HMM",

        },

        {

          value: "HPL",

          label: "HPL",

        },

        {

          value: "HDW",

          label: "HDW",

        },

        {

          value: "T.S.LINE",

          label: "T.S.LINE",

        },

        {

          value: "SEA LEAD",

          label: "SEA LEAD",

        },

        {

          value: "SM LINE",

          label: "SM LINE",

        },

        {

          value: "OTHERS",

          label: "OTHERS",

        }

      ],

      optionsUs: [

        {

          value: "carton",

          label: "carton",

        },

        {

          value: "pailet",

          label: "pailet",

        },

        {

          value: "case",

          label: "case",

        },

        {

          value: "others",

          label: "others",

        },

      ],

      optionsPL: [],

      rules: {

        // email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],

        container: [{ required: true, message: "请输入", trigger: "blur" }],

        bol: [{ required: true, message: "请输入", trigger: "blur" }],

        cargoType: [{ required: true, message: "请选择", trigger: "blur" }],

        carrier: [{ required: true, message: "请选择", trigger: "blur" }],

        vesselAndVoyage: [

          { required: true, message: "请输入", trigger: "blur" },

        ],

        pickupLocation: [

          { required: true, message: "请选择", trigger: "blur" },

        ],

        ETA: [{ required: true, message: "请选择", trigger: "blur" }],

        SOC: [{ required: true, message: "请选择", trigger: "blur" }],

        DG: [{ required: true, message: "请选择", trigger: "blur" }],

        overweight: [{ required: true, message: "请选择", trigger: "blur" }],

        customsInspection: [

          { required: true, message: "请选择", trigger: "blur" },

        ],

        product: [{ required: true, message: "请输入", trigger: "blur" }],

        QTY: [{ required: true, message: "请输入", trigger: "blur" }],

        weight: [{ required: true, message: "请输入", trigger: "blur" }],

        volume: [{ required: true, message: "请输入", trigger: "blur" }],

        consigneeCompany: [

          { required: true, message: "请输入", trigger: "blur" },

        ],

        post: [{ required: true, message: "请输入", trigger: "blur" }],

        address: [{ required: true, message: "请输入", trigger: "blur" }],

      },

    };

  },

  created() {



    this.orderId = this.$route.query.orderId

    this.type = this.$route.query.type ? this.$route.query.type : 'add'

    if (this.orderId) {

      getDetail({

        orderId: this.orderId

      }).then(resp => {

        this.form = resp.data

        this.detailInfo = resp.data

        this.form.DOFileUrl = resp.data.DOFileUrl ? resp.data.DOFileUrl : ''

        this.form.PUFileUrl = resp.data.PUFileUrl ? resp.data.PUFileUrl : ''

        this.form.PODFileUrl = resp.data.PODFileUrl ? resp.data.PODFileUrl : ''

        this.form.otherFileUrl = resp.data.otherFileUrl ? resp.data.otherFileUrl : ''

        if (resp.data.DOFileUrl) {

          this.fileList1.push({ url: resp.data.DOFileUrl, name: resp.data.DOFileUrl.split('ownload/')[1] })



        }

        if (resp.data.PUFileUrl) {

          this.fileList2.push({ url: resp.data.PUFileUrl, name: resp.data.PUFileUrl.split('ownload/')[1] })



        }

        if (resp.data.PODFileUrl) {

          this.fileList3.push({ url: resp.data.PODFileUrl, name: resp.data.PODFileUrl.split('ownload/')[1] })



        }

        if (resp.data.otherFileUrl) {

          this.fileList4.push({ url: resp.data.otherFileUrl, name: resp.data.otherFileUrl.split('ownload/')[1] })



        }





      })

    }



    getaddress({

      extra: JSON.parse(localStorage.getItem('userInfo')).extra

    }).then(resp => {

      console.log(resp, '----');

      if (resp.data.length > 0) {

        this.optionsPL = resp.data[0].ports

          .map(item => {

            item.value = item.port

            item.label = item.port

            return item

          })

          .sort((a, b) => {

            if (a.value < b.value) return -1

            if (a.value > b.value) return 1

            return 0

          })

      }





    })

  },

  methods: {

    addShow() {

      this.show = true

    },

    onInput(e) {

      this.form.poundWeight = Number(e * 2.2).toFixed(2)



    },

    submit(e) {

      console.log(e, 'e');

      this.form.contact = e.receiverName

      this.form.tel = e.receiverPhone

      this.form.email = e.receiverEmail



      this.form.address = e.receiverAddress

      this.form.remark = e.remark

      this.show = false



    },

    onEditorBlur(quill) {

      console.log("editor blur!", quill);

    },

    onEditorFocus(quill) {

      console.log("editor focus!", quill);

    },

    onEditorReady(quill) {

      console.log("editor ready!", quill);

    },

    onEditorChange({ quill, html, text }) {

      console.log("editor change!", quill, html, text);

      this.content = html;

    },





    submitForm(formName) {

      this.$refs[formName].validate((valid) => {





        if (valid) {

          if (!this.form.tel && !this.form.email) {

            this.$message.error('联系电话和邮箱至少填写其中一项');



          } else {

            // 添加订单

            if (this.type === 'add') {

              addOrder({

                ...this.form,

                extra: JSON.parse(localStorage.getItem('userInfo')).extra

              }).then(resp => {

                if (resp.data.status === 'SUCCESS') {

                  this.$message.success('添加成功');

                  this.form = {

                    container: "", //集装箱号

                    bol: "", //提单号

                    cargoType: "", //货柜类型

                    carrier: "", //船司

                    vesselAndVoyage: "", //航名航次

                    pickupLocation: "", //提柜地

                    ETA: "", //预计到达日期

                    SOC: "", //SOC

                    DG: "", //DG

                    overweight: "", //超重

                    customsInspection: "", //查验

                    dropOrLive: "", //DROP/LIVE

                    clientOrder: "", //客户订单号

                    product: "", //品名

                    QTY: "", //包装数量

                    weight: "", //重量

                    poundWeight: "", //≈重量(磅)

                    volume: "", //体积

                    contact: "", //收件人

                    consigneeCompany: "", //收件人公司

                    post: "", //目的地邮编

                    address: "", //地址

                    tel: "", //联系电话

                    email: "", //邮箱

                    PUExplain: '',//PU说明

                    PUFileUrl: '',//PU附件

                    DOFileUrl: '',//DO附件

                    PODFileUrl: '',//POD附件

                    otherFileUrl: '',//其他附件

                    specialRequest: '',//特殊要求

                    remark: '',//备注



                  }

                  this.fileList1 = []

                  this.fileList2 = []

                  this.fileList3 = []

                  this.fileList4 = []

                  this.$router.go(-1)



                }



              })

            } else {

              edit({

                ...this.form,

                extra: JSON.parse(localStorage.getItem('userInfo')).extra,

                orderId: this.orderId

              }).then(resp => {

                if (resp.data.status === 'SUCCESS') {

                  this.$message.success('编辑成功');

                  this.form = {

                    container: "", //集装箱号

                    bol: "", //提单号

                    cargoType: "", //货柜类型

                    carrier: "", //船司

                    vesselAndVoyage: "", //航名航次

                    pickupLocation: "", //提柜地

                    ETA: "", //预计到达日期

                    SOC: "", //SOC

                    DG: "", //DG

                    overweight: "", //超重

                    customsInspection: "", //查验

                    dropOrLive: "", //DROP/LIVE

                    clientOrder: "", //客户订单号

                    product: "", //品名

                    QTY: "", //包装数量

                    weight: "", //重量

                    poundWeight: "", //≈重量(磅)

                    volume: "", //体积

                    contact: "", //收件人

                    consigneeCompany: "", //收件人公司

                    post: "", //目的地邮编

                    address: "", //地址

                    tel: "", //联系电话

                    email: "", //邮箱

                    PUExplain: '',//PU说明

                    PUFileUrl: '',//PU附件

                    DOFileUrl: '',//DO附件

                    PODFileUrl: '',//POD附件

                    otherFileUrl: '',//其他附件

                    specialRequest: '',//特殊要求

                    remark: '',//备注



                  }

                  this.fileList1 = []

                  this.fileList2 = []

                  this.fileList3 = []

                  this.fileList4 = []

                  this.$router.go(-1)



                }



              })

            }



          }



        } else {

          this.$message.error('请填写必填内容');



          return false;

        }

      });

    },



    handlePreview(e) {

      console.log(e, 'e');

    },

    handleRemove1(e) {

      console.log(e, 'e');

      this.form.DOFileUrl = '';

      this.fileList1 = []

    },

    handleRemove2(e) {

      console.log(e, 'e');

      this.form.PUFileUrl = '';

      this.fileList2 = []

    },

    handleRemove3(e) {

      console.log(e, 'e');

      this.form.PODFileUrl = '';

      this.fileList3 = []

    },

    handleRemove4(e) {

      console.log(e, 'e');

      this.form.otherFileUrl = '';

      this.fileList4 = []

    },



    handleExceed(e) {

      console.log(e, 'e');



    },

    async toArrayBuffer(file) {

      return new Promise((resolve, reject) => {

        const fileReader = new FileReader();

        fileReader.readAsArrayBuffer(file);



        fileReader.onload = (e) => {

          resolve(e.target.result);

        };



        fileReader.onerror = (e) => {

          reject(e);

        };

      });

    },

    async upFileAsArrayBuffer(url, file, options) {

      const arrayBuffer = await this.toArrayBuffer(file);



      return axios({

        url,

        method: options.method || 'POST',

        withCredentials: Boolean(options.withCredentials),

        data: arrayBuffer,

        headers: {

          'Content-Type': 'application/octet-stream',

          'file-name': encodeURIComponent(options.fileName || file.name),

        },

        onUploadProgress: ({ total, loaded }) => {

          const onProgress = options.onProgress;

          if (typeof onProgress === 'function') {

            onProgress({

              percent: Math.ceil((loaded / total) * 100),

            });

          }

        },

      });

    },

    uploadFile(e, obj, value) {

      axios.post('http://47.108.239.173:2020/api/oss/new_temp_upload', obj).then(res => {

        if (res.status == 200) {

          this.upFileAsArrayBuffer('http://47.108.239.173:2020/api/oss/upload_file', e.file, { methods: 'POST', fileName: res.data.data }).then(resp => {

            console.log(resp, 'asdasdsad');

            if (resp.data.status === 0) {

              if (value == 1) {

                this.form.DOFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data

                console.log(this.fileList1, 'this.fileList1');



              } else if (value == 2) {

                this.form.PUFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data

                console.log(this.form.PUFileUrl, 'this.form.PUFileUrl');



              } else if (value == 3) {

                this.form.PODFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data

              } else {

                this.form.otherFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data

              }

              this.$forceUpdate()

            }

          })

        }

      })

    },

    handleUpload1(e) {



      let obj = {

        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,

        fileSize: e.file.size,

        fileSuffix: e.file.type.split('/')[1],

        originalName: e.file.name,

        fileSource: {

          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,

          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,

          isDevelop: true,

        },

        uploadPath: 'file',

        uploadTargetType: 'FORM_ROW',

      }

      this.uploadFile(e, obj, 1)



    },

    handleUpload2(e) {



      let obj = {

        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,

        fileSize: e.file.size,

        fileSuffix: e.file.type.split('/')[1],

        originalName: e.file.name,

        fileSource: {

          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,

          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,

          isDevelop: true,

        },

        uploadPath: 'file',

        uploadTargetType: 'FORM_ROW',

      }

      this.uploadFile(e, obj, 2)



    },

    handleUpload3(e) {



      let obj = {

        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,

        fileSize: e.file.size,

        fileSuffix: e.file.type.split('/')[1],

        originalName: e.file.name,

        fileSource: {

          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,

          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,

          isDevelop: true,

        },

        uploadPath: 'file',

        uploadTargetType: 'FORM_ROW',

      }

      this.uploadFile(e, obj, 3)



    },

    handleUpload4(e) {



      let obj = {

        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,

        fileSize: e.file.size,

        fileSuffix: e.file.type.split('/')[1],

        originalName: e.file.name,

        fileSource: {

          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,

          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,

          isDevelop: true,

        },

        uploadPath: 'file',

        uploadTargetType: 'FORM_ROW',

      }

      this.uploadFile(e, obj, 4)



    },

  },

};

</script>



<style lang="less" scoped>

::v-deep .el-upload-list__item-name {

  max-width: 150px !important;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.tab {

  padding-bottom: 35px;

}



.w-316 {

  width: 316px;

}



.noactive {

  font-weight: 500;

  font-size: 18px;

  color: #4C5065;

  line-height: 27px;

  text-align: left;

  font-style: normal;

}



.ml-56 {

  margin-left: 56px;

}



.active {

  position: relative;

  text-decoration: none;

  font-weight: bold;

  font-size: 18px;

  color: #3B3F56;

  line-height: 27px;

  text-align: left;

  font-style: normal;

}



.active::after {

  content: '';

  position: absolute;

  bottom: -11px;

  left: 0;

  right: 0;

  margin: auto;

  width: 21px;

  height: 5px;

  background: #014099;

  border-radius: 6px;

  transition: all 0.2s;

  /* 可选的过渡效果 */

}



.active:hover::after {

  width: 0;

  /* 鼠标悬停时下划线消失的效果 */



}



.box-cards {

  padding: 23px 0 0px 24px;

}



.box-cardes {

  padding: 23px 0 38px 0;

}



.editor {

  flex: 1;

  margin-right: 23px;



  ::v-deep .ql-container {

    height: 200px;

  }

}



.box-carde {

  padding: 27px 0 41px 24px;



  ::v-deep .el-form-item__label {

    text-align: left !important;

    width: 88px !important;

    flex-shrink: 0;

  }

}



::v-deep .el-upload-list__item:first-child {

  margin-top: 0 !important;

}



::v-deep .el-form-item__content {

  margin: 0 !important;

}



::v-deep .el-card {

  border-radius: 6px !important;

}



::v-deep .upload-demo {

  display: flex !important;

  align-items: center !important;



}



::v-deep .el-card__body {

  padding: 0 !important;

}



::v-deep .el-card__header {

  padding: 35px 23px 23px 23px !important;

}



::v-deep .el-input__inner {

  width: 230px !important;

  height: 50px !important;

}



::v-deep .el-form-item {

  display: flex !important;

  align-items: center !important;

}





::v-deep .el-radio__inner::after {

  display: none;

}



::v-deep .el-radio__inner {

  width: 24px !important;

  height: 24px !important;

  box-sizing: border-box;

}



::v-deep .el-radio__input.is-checked {

  padding: 4px 4px 3px 4px;

  border: 1px solid #014099;

  border-radius: 50%;

  box-sizing: border-box;

}



::v-deep .el-radio__input.is-checked .el-radio__inner {

  width: 12.5px !important;

  height: 12px !important;

  border: unset;

  background: rgba(1, 64, 153, 1) !important;

}



::v-deep .el-radio {

  width: 65px !important;

  margin-right: 42px !important;

}



.upload_btn {

  width: 107px;

  height: 43px;

  background: #014099;

  border-radius: 1px;

  font-weight: 500;

  font-size: 16px;

  color: #FFFFFF;

  line-height: 24px;

  text-align: left;

  font-style: normal;

  display: flex;

  align-items: center;

  justify-content: center;

}







.mr-14 {

  margin-right: 14px;

}



.mr-129 {

  margin-right: 129px;

}



.bg {

  height: 75px;

  background: rgba(1, 64, 153, 0.11);

  border-radius: 1px;

  display: flex;

  flex-direction: column;

  padding: 17px 0 17px 24px;

  margin-bottom: 16px;

  font-weight: 500;

  font-size: 16px;

  color: #3b3f56;

  line-height: 24px;

  text-align: left;

  font-style: normal;

}



.contanier {

  background: #ededf3;

  padding: 13px 35px 23px 35px;

}



.mt-13 {

  margin-top: 13px;

}



.clearfix {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.clearfix_text {

  font-weight: bold;

  font-size: 20px;

  color: #3b3f56;

  line-height: 30px;

  text-align: left;

  font-style: normal;

}



.clearfix_btn {

  display: flex;

  align-items: center;

  background: #014099;

  border-radius: 4px;

  padding: 15px 7px 15px 16px;

  font-weight: 500;

  font-size: 16px;

  color: #ffffff;

  line-height: 24px;

  text-align: left;

  font-style: normal;

}



.clearfix_btn_img {

  width: 20px;

  height: 20px;

  margin-right: 9px;

}



.clearfix_img {

  width: 24px;

  height: 24px;

}



.btn {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 27px;



  .btn_close {

    width: 190px;

    height: 50px;

    background: #ffffff;

    border-radius: 4px;

    border: 2px solid #d2d2d2;

    font-weight: 500;

    font-size: 20px;

    color: #000000;

    line-height: 30px;

    text-align: right;

    font-style: normal;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  .btn_comfirm {

    width: 190px;

    height: 50px;

    background: #014099;

    border-radius: 4px;

    font-weight: 500;

    font-size: 20px;

    color: #ffffff;

    line-height: 30px;

    text-align: right;

    font-style: normal;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 20px;

  }

}



.box {

  width: 90px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

}



.label1 {

  ::v-deep .el-form-item__error {

    left: 90px !important;

  }

}



.label6 {

  ::v-deep .el-form-item__error {

    left: 110px !important;

  }

}



.label7 {

  ::v-deep .el-form-item__error {

    left: 205px !important;

  }

}



.label8 {

  ::v-deep .el-form-item__error {

    left: 188px !important;

  }

}



.label2 {

  ::v-deep .el-form-item__error {

    left: 214px !important;

  }

}



.label3 {

  ::v-deep .el-form-item__error {

    left: 213px !important;

  }

}



.label4 {

  ::v-deep .el-form-item__error {

    left: 247px !important;

  }

}



.label5 {

  ::v-deep .el-form-item {

    margin-bottom: 11px !important;

  }

}



.mt-43 {

  margin-top: 43px;

}



.box1 {

  width: 215px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

}



.box2 {

  width: 247px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

}



.box3 {

  width: 213px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

}



.box4 {

  width: 100px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-start;

  font-weight: 500;

  flex-shrink: 0;

  margin-right: 14px;

}



.box5 {

  width: 206px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

  margin-right: 44px;

}



.box6 {

  width: 188px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

  margin-right: 14px;

}



.box7 {

  width: 247px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

  margin-right: 14px;

}



.box8 {

  width: 100px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

  margin-right: 14px;

}



.box9 {

  width: 110px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

}



.box10 {

  width: 120px;

  display: flex;

  flex-direction: column;

  line-height: 23px !important;

  align-items: flex-end;

  font-weight: 500;

  flex-shrink: 0;

}



.box_text1 {

  font-weight: 500;

  font-size: 16px;

  color: rgba(59, 63, 86, 0.8);

  line-height: 24px;

}



.box_text2 {

  font-weight: 500;

  font-size: 14px;

  color: rgba(59, 63, 86, 0.8);

  line-height: 24px;

  margin-right: 14px;

}



.box_text3 {

  font-weight: 500;

  font-size: 12px;

  color: rgba(59, 63, 86, 0.8);

  line-height: 24px;

  margin-right: 14px;

}



.red {

  color: red;

}



.tip_box {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}



.tip {

  display: flex;

  align-items: center;

  font-weight: 400;

  font-size: 12px;

  color: #FE3333;

  line-height: 18px;

  text-align: left;

  padding-right: 29px;



  .tip-img {

    width: 16px;

    height: 16px;

    margin-right: 4px;

  }

}

</style>