From ee0692b46a9e98018b55a65b00fb11b847a0d35e Mon Sep 17 00:00:00 2001
From: gongjinbao <gongjinbao@163.com>
Date: 星期四, 09 一月 2025 10:07:59 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanContainer
---
src/view/addOrder.vue | 849 ++++++++++++++++++++++++++++---------------------------
1 files changed, 432 insertions(+), 417 deletions(-)
diff --git a/src/view/addOrder.vue b/src/view/addOrder.vue
index 20a2023..5812897 100644
--- a/src/view/addOrder.vue
+++ b/src/view/addOrder.vue
@@ -12,428 +12,435 @@
<div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
基础信息
</div>
- <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">
+ <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">
价格信息
</div>
</div>
- <div class="flex">
- <el-form-item label="" class="label1" prop="container" label-width="0">
- <div class="flex">
- <div class="box">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">集装箱号：</div>
- </div>
- <div class="box_text2">Contain#</div>
- </div>
- <el-input v-model="form.container" placeholder="请输入"></el-input>
- </div>
- </el-form-item>
-
- <el-form-item label="" class="label2" prop="bol" label-width="0px">
- <div class="flex">
- <div class="box1">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">提单号：</div>
- </div>
- <div class="box_text2">BOLI#</div>
- </div>
- <el-input v-model="form.bol" placeholder="请输入"></el-input>
- </div>
- </el-form-item>
-
- <el-form-item label="" class="label3" prop="cargoType" label-width="0px">
- <div class="flex">
- <div class="box3">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">货柜类型：</div>
- </div>
- <div class="box_text2">Cargo Type</div>
- </div>
- <el-select v-model="form.cargoType" clearable placeholder="请选择" prop="type">
- <el-option :label="item.label" :value="item.value" v-for="item in options"
- :key="item.value"></el-option>
- </el-select>
- </div>
- </el-form-item>
- </div>
- <div class="flex">
- <el-form-item label="" class="label1" prop="carrier" label-width="0px">
- <div class="flex">
- <div class="box">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">船司：</div>
- </div>
- <div class="box_text2">Carrier</div>
- </div>
- <el-select v-model="form.carrier" clearable placeholder="请选择">
- <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
- :key="item.value"></el-option>
- </el-select>
- </div>
- </el-form-item>
-
- <el-form-item label="" class="label2" prop="vesselAndVoyage" label-width="0px">
- <div class="flex">
- <div class="box1">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">航名航次：</div>
- </div>
- <div class="box_text2">Vessel & Voyage</div>
- </div>
- <el-input v-model="form.vesselAndVoyage" placeholder="请输入"></el-input>
- </div>
- </el-form-item>
- <el-form-item label="" class="label3" prop="pickupLocation" label-width="0px">
- <div class="flex">
- <div class="box3">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">提柜地：</div>
- </div>
- <div class="box_text2">Pickup Location</div>
- </div>
- <el-select v-model="form.pickupLocation" clearable placeholder="请选择">
- <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
- :key="item.value"></el-option>
- </el-select>
- </div>
- </el-form-item>
- <el-form-item label="" class="label4" prop="ETA" label-width="0">
- <div class="flex">
- <div class="box2">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">预计到达日期：</div>
- </div>
- <div class="box_text2">ETA</div>
- </div>
- <el-date-picker type="date" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
- style="width: 100%">
- <div></div>
- </el-date-picker>
- </div>
- </el-form-item>
- </div>
- <div class="flex">
- <el-form-item label="" class="" prop="SOC" label-width="0">
- <div class="flex" style="align-items: center">
- <div class="box4">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">SOC：</div>
- </div>
- </div>
- <el-radio-group text-color="#014099" fill="#014099" v-model="form.SOC">
- <el-radio label="是"></el-radio>
- <el-radio label="否"></el-radio>
- </el-radio-group>
- </div>
- </el-form-item>
- <el-form-item label="" class="" prop="DG" label-width="0">
- <div class="flex" style="align-items: center">
- <div class="box5">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">DG：</div>
- </div>
- </div>
- <el-radio-group text-color="#014099" fill="#014099" v-model="form.DG">
- <el-radio label="是"></el-radio>
- <el-radio label="否"></el-radio>
- </el-radio-group>
- </div>
- </el-form-item>
- <el-form-item label="" class="" prop="overweight" label-width="0">
- <div class="flex" style="align-items: center">
- <div class="box6">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">是否超重：</div>
- </div>
- <div class="box_text1 mr-14">Over Weight</div>
- </div>
- <el-radio-group text-color="#014099" fill="#014099" v-model="form.overweight">
- <el-radio label="是"></el-radio>
- <el-radio label="否"></el-radio>
- </el-radio-group>
- </div>
- </el-form-item>
- <el-form-item label="" class="" prop="customsInspection" label-width="0">
- <div class="flex" style="align-items: center">
- <div class="box7">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">是否查验：</div>
- </div>
- <div class="box_text1">Customs Inspection</div>
- </div>
- <el-radio-group text-color="#014099" fill="#014099" v-model="form.customsInspection">
- <el-radio label="是"></el-radio>
- <el-radio label="否"></el-radio>
- </el-radio-group>
- </div>
- </el-form-item>
- </div>
- <div>
- <el-form-item label="" class="" prop="dropOrLive" label-width="0">
- <div class="flex" style="align-items: center">
- <div class="box8">
- <div class="flex">
- <div class="box_text1">DROP/LIVE：</div>
- </div>
- </div>
- <el-radio-group text-color="#014099" fill="#014099" v-model="form.dropOrLive">
- <el-radio label="Drop"></el-radio>
- <el-radio label="Live"></el-radio>
- </el-radio-group>
- </div>
- </el-form-item>
- </div>
- </div>
- <div class="bg">
- <span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
- <span>Pls supply detailed packing list for an OT or FR conainer</span>
- </div>
- </el-card>
- <!-- card-two -->
-
- <el-card class="box-card mt-13">
- <div slot="header" class="clearfix">
- <span class="clearfix_text">货柜信息 ｜ Container Det</span>
- </div>
- <div class="box-cardes">
- <div class="flex">
- <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
- <div class="flex">
- <div class="box9">
- <div class="flex">
- <!-- <div class="red">*</div> -->
- <div class="box_text1">客户单号：</div>
- </div>
- <div class="box_text2">Clinet Order#</div>
- </div>
- <el-input v-model="form.clientOrder" placeholder="请输入"></el-input>
- </div>
- </el-form-item>
-
- <el-form-item label="" class="label2" prop="product" label-width="0px">
- <div class="flex">
- <div class="box1">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">品名：</div>
- </div>
- <div class="box_text2">Product</div>
- </div>
- <el-input v-model="form.product" placeholder="请输入"></el-input>
- </div>
- </el-form-item>
-
- <el-form-item label="" class="label3" prop="QTY" label-width="0px">
- <div class="flex">
- <div class="box3">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">包装数量：</div>
- </div>
- <div class="box_text2">QTY</div>
- </div>
- <el-input v-model="form.QTY" placeholder="请输入"></el-input>
- </div>
- </el-form-item>
- <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
- <div class="flex">
- <div class="box2">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">单位选择：</div>
- </div>
- <div class="box_text2">QTY Unit</div>
- </div>
- <el-select v-model="form.QTYUnit" clearable placeholder="请选择">
- <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
- :key="item.value"></el-option>
- </el-select>
- </div>
- </el-form-item>
- </div>
- <div class="flex">
- <el-form-item label="" class="label1" prop="weight" label-width="0px">
- <div class="flex">
- <div class="box9">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">重量：</div>
- </div>
- <div class="box_text2">Weight</div>
- </div>
- <el-input v-model="form.weight" placeholder="请输入">
- <div style="line-height: 50px;" slot="prefix-icon">KG</div>
- </el-input>
- </div>
- </el-form-item>
-
- <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
- <div class="flex">
- <div class="box1">
- <div class="flex">
- <!-- <div class="red">*</div> -->
- <div class="box_text1">≈重量(磅)：</div>
- </div>
- <div class="box_text2">≈Pound weight</div>
- </div>
- <el-input v-model="form.poundWeight" placeholder="请输入">
- <div style="line-height: 50px;" slot="suffix">LBS</div>
- </el-input>
- </div>
- </el-form-item>
- <el-form-item label="" class="label3" prop="volume" label-width="0px">
- <div class="flex">
- <div class="box3">
- <div class="flex">
- <div class="red">*</div>
- <div class="box_text1">体积：</div>
- </div>
- <div class="box_text2">Voume</div>
- </div>
- <el-input v-model="form.volume" placeholder="请输入">
- <div style="line-height: 50px;" slot="suffix">CMB</div>
- </el-input>
- </div>
- </el-form-item>
- </div>
- </div>
- </el-card>
- <!-- card-three -->
-
- <el-card class="box-card mt-13">
- <div slot="header" class="clearfix">
- <span class="clearfix_text">收件人信息 ｜ Consignee</span>
- <div class="clearfix_btn">
- <img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
- <span>选择已添加信息</span>
- </div>
- </div>
- <div class="">
- <div class="box-cards">
+ <div v-if="activeTab == 1">
<div class="flex">
- <el-form-item label="" class="label1" prop="contact" label-width="0">
+ <el-form-item label="" class="label1" prop="container" label-width="0">
<div class="flex">
<div class="box">
<div class="flex">
- <!-- <div class="red">*</div> -->
- <div class="box_text1">收件人：</div>
+ <div class="red">*</div>
+ <div class="box_text1">集装箱号：</div>
</div>
- <div class="box_text2">Contact</div>
+ <div class="box_text2">Contain#</div>
</div>
- <el-input v-model="form.contact" placeholder="请输入"></el-input>
+ <el-input v-model="form.container" placeholder="请输入"></el-input>
</div>
</el-form-item>
- <el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
+ <el-form-item label="" class="label2" prop="bol" label-width="0px">
<div class="flex">
<div class="box1">
<div class="flex">
<div class="red">*</div>
- <div class="box_text1">收件人公司：</div>
+ <div class="box_text1">提单号：</div>
</div>
- <div class="box_text2">Consignee-Company</div>
+ <div class="box_text2">BOLI#</div>
</div>
- <el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
+ <el-input v-model="form.bol" placeholder="请输入"></el-input>
</div>
</el-form-item>
- <el-form-item label="" class="label3" prop="post" label-width="0px">
+ <el-form-item label="" class="label3" prop="cargoType" label-width="0px">
<div class="flex">
<div class="box3">
<div class="flex">
<div class="red">*</div>
- <div class="box_text1">目的地邮编：</div>
+ <div class="box_text1">货柜类型：</div>
</div>
- <div class="box_text2">Post</div>
+ <div class="box_text2">Cargo Type</div>
</div>
- <el-select v-model="form.post" clearable placeholder="请选择" prop="type">
+ <el-select v-model="form.cargoType" clearable placeholder="请选择" prop="type">
<el-option :label="item.label" :value="item.value" v-for="item in options"
:key="item.value"></el-option>
</el-select>
</div>
</el-form-item>
- <el-form-item label="" class="label4" prop="address" label-width="0">
+ </div>
+ <div class="flex">
+ <el-form-item label="" class="label1" prop="carrier" label-width="0px">
+ <div class="flex">
+ <div class="box">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">船司：</div>
+ </div>
+ <div class="box_text2">Carrier</div>
+ </div>
+ <el-select v-model="form.carrier" clearable placeholder="请选择">
+ <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
+ :key="item.value"></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="" class="label2" prop="vesselAndVoyage" label-width="0px">
+ <div class="flex">
+ <div class="box1">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">航名航次：</div>
+ </div>
+ <div class="box_text2">Vessel & Voyage</div>
+ </div>
+ <el-input v-model="form.vesselAndVoyage" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="label3" prop="pickupLocation" label-width="0px">
+ <div class="flex">
+ <div class="box3">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">提柜地：</div>
+ </div>
+ <div class="box_text2">Pickup Location</div>
+ </div>
+ <el-select v-model="form.pickupLocation" clearable placeholder="请选择">
+ <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
+ :key="item.value"></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="label4" prop="ETA" label-width="0">
<div class="flex">
<div class="box2">
<div class="flex">
<div class="red">*</div>
- <div class="box_text1">地址：</div>
+ <div class="box_text1">预计到达日期：</div>
</div>
- <div class="box_text2">Address</div>
+ <div class="box_text2">ETA</div>
</div>
- <el-input v-model="form.address" placeholder="请输入"></el-input>
+ <el-date-picker type="date" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
+ style="width: 100%">
+ <div></div>
+ </el-date-picker>
</div>
</el-form-item>
</div>
<div class="flex">
- <div class="tip_box label5">
+ <el-form-item label="" class="" prop="SOC" label-width="0">
+ <div class="flex" style="align-items: center">
+ <div class="box4">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">SOC：</div>
+ </div>
+ </div>
+ <el-radio-group text-color="#014099" fill="#014099" v-model="form.SOC">
+ <el-radio label="是"></el-radio>
+ <el-radio label="否"></el-radio>
+ </el-radio-group>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="" prop="DG" label-width="0">
+ <div class="flex" style="align-items: center">
+ <div class="box5">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">DG：</div>
+ </div>
+ </div>
+ <el-radio-group text-color="#014099" fill="#014099" v-model="form.DG">
+ <el-radio label="是"></el-radio>
+ <el-radio label="否"></el-radio>
+ </el-radio-group>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="" prop="overweight" label-width="0">
+ <div class="flex" style="align-items: center">
+ <div class="box6">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">是否超重：</div>
+ </div>
+ <div class="box_text1 mr-14">Over Weight</div>
+ </div>
+ <el-radio-group text-color="#014099" fill="#014099" v-model="form.overweight">
+ <el-radio label="是"></el-radio>
+ <el-radio label="否"></el-radio>
+ </el-radio-group>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="" prop="customsInspection" label-width="0">
+ <div class="flex" style="align-items: center">
+ <div class="box7">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">是否查验：</div>
+ </div>
+ <div class="box_text1">Customs Inspection</div>
+ </div>
+ <el-radio-group text-color="#014099" fill="#014099" v-model="form.customsInspection">
+ <el-radio label="是"></el-radio>
+ <el-radio label="否"></el-radio>
+ </el-radio-group>
+ </div>
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item label="" class="" prop="dropOrLive" label-width="0">
+ <div class="flex" style="align-items: center">
+ <div class="box8">
+ <div class="flex">
+ <div class="box_text1">DROP/LIVE：</div>
+ </div>
+ </div>
+ <el-radio-group text-color="#014099" fill="#014099" v-model="form.dropOrLive">
+ <el-radio label="Drop"></el-radio>
+ <el-radio label="Live"></el-radio>
+ </el-radio-group>
+ </div>
+ </el-form-item>
+ </div>
+ </div>
+ <div v-else>
+ <DetailInfoTop />
+ </div>
+ </div>
- <el-form-item label="" class="" prop="tel" label-width="0px">
+ <div class="bg" v-if="activeTab == 1">
+ <span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
+ <span>Pls supply detailed packing list for an OT or FR conainer</span>
+ </div>
+ </el-card>
+ <div v-if="activeTab == 1">
+ <!-- card-two -->
+ <el-card class="box-card mt-13">
+ <div slot="header" class="clearfix">
+ <span class="clearfix_text">货柜信息 ｜ Container Det</span>
+ </div>
+ <div class="box-cardes">
+ <div class="flex">
+ <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
+ <div class="flex">
+ <div class="box9">
+ <div class="flex">
+ <!-- <div class="red">*</div> -->
+ <div class="box_text1">客户单号：</div>
+ </div>
+ <div class="box_text2">Clinet Order#</div>
+ </div>
+ <el-input v-model="form.clientOrder" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="" class="label2" prop="product" label-width="0px">
+ <div class="flex">
+ <div class="box1">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">品名：</div>
+ </div>
+ <div class="box_text2">Product</div>
+ </div>
+ <el-input v-model="form.product" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="" class="label3" prop="QTY" label-width="0px">
+ <div class="flex">
+ <div class="box3">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">包装数量：</div>
+ </div>
+ <div class="box_text2">QTY</div>
+ </div>
+ <el-input v-model="form.QTY" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
+ <div class="flex">
+ <div class="box2">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">单位选择：</div>
+ </div>
+ <div class="box_text2">QTY Unit</div>
+ </div>
+ <el-select v-model="form.QTYUnit" clearable placeholder="请选择">
+ <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
+ :key="item.value"></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+ </div>
+ <div class="flex">
+ <el-form-item label="" class="label1" prop="weight" label-width="0px">
+ <div class="flex">
+ <div class="box9">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">重量：</div>
+ </div>
+ <div class="box_text2">Weight</div>
+ </div>
+ <el-input v-model="form.weight" placeholder="请输入">
+ <div style="line-height: 50px;" slot="prefix-icon">KG</div>
+ </el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
+ <div class="flex">
+ <div class="box1">
+ <div class="flex">
+ <!-- <div class="red">*</div> -->
+ <div class="box_text1">≈重量(磅)：</div>
+ </div>
+ <div class="box_text2">≈Pound weight</div>
+ </div>
+ <el-input v-model="form.poundWeight" placeholder="请输入">
+ <div style="line-height: 50px;" slot="suffix">LBS</div>
+ </el-input>
+ </div>
+ </el-form-item>
+ <el-form-item label="" class="label3" prop="volume" label-width="0px">
+ <div class="flex">
+ <div class="box3">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">体积：</div>
+ </div>
+ <div class="box_text2">Voume</div>
+ </div>
+ <el-input v-model="form.volume" placeholder="请输入">
+ <div style="line-height: 50px;" slot="suffix">CMB</div>
+ </el-input>
+ </div>
+ </el-form-item>
+ </div>
+ </div>
+ </el-card>
+ <!-- card-three -->
+ <el-card class="box-card mt-13">
+ <div slot="header" class="clearfix">
+ <span class="clearfix_text">收件人信息 ｜ Consignee</span>
+ <div class="clearfix_btn">
+ <img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
+ <span>选择已添加信息</span>
+ </div>
+ </div>
+ <div class="">
+ <div class="box-cards">
+ <div class="flex">
+ <el-form-item label="" class="label1" prop="contact" label-width="0">
<div class="flex">
<div class="box">
<div class="flex">
<!-- <div class="red">*</div> -->
- <div class="box_text1">联系电话：</div>
+ <div class="box_text1">收件人：</div>
</div>
- <div class="box_text2">Tel</div>
+ <div class="box_text2">Contact</div>
</div>
- <el-select v-model="form.tel" clearable placeholder="请选择">
- <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
+ <el-input v-model="form.contact" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
+ <div class="flex">
+ <div class="box1">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">收件人公司：</div>
+ </div>
+ <div class="box_text2">Consignee-Company</div>
+ </div>
+ <el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="" class="label3" prop="post" label-width="0px">
+ <div class="flex">
+ <div class="box3">
+ <div class="flex">
+ <div class="red">*</div>
+ <div class="box_text1">目的地邮编：</div>
+ </div>
+ <div class="box_text2">Post</div>
+ </div>
+ <el-select v-model="form.post" clearable placeholder="请选择" prop="type">
+ <el-option :label="item.label" :value="item.value" v-for="item in options"
:key="item.value"></el-option>
</el-select>
</div>
</el-form-item>
- <div class="tip">
- <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
- <span>联系电话和邮箱至少填写其中一项</span>
- </div>
- </div>
- <div class="tip_box label5">
- <el-form-item label="" class="" prop="email" label-width="0px">
+ <el-form-item label="" class="label4" prop="address" label-width="0">
<div class="flex">
- <div class="box1">
+ <div class="box2">
<div class="flex">
- <!-- <div class="red">*</div> -->
- <div class="box_text1">邮箱：</div>
+ <div class="red">*</div>
+ <div class="box_text1">地址：</div>
</div>
- <div class="box_text2">Email</div>
+ <div class="box_text2">Address</div>
</div>
- <el-input v-model="form.email" placeholder="请输入"></el-input>
+ <el-input v-model="form.address" placeholder="请输入"></el-input>
</div>
</el-form-item>
- <div class="tip">
- <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
- <span>联系电话和邮箱至少填写其中一项</span>
+ </div>
+ <div class="flex">
+ <div class="tip_box label5">
+
+ <el-form-item label="" class="" prop="tel" label-width="0px">
+ <div class="flex">
+ <div class="box">
+ <div class="flex">
+ <!-- <div class="red">*</div> -->
+ <div class="box_text1">联系电话：</div>
+ </div>
+ <div class="box_text2">Tel</div>
+ </div>
+ <el-select v-model="form.tel" clearable placeholder="请选择">
+ <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
+ :key="item.value"></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+ <div class="tip">
+ <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
+ <span>联系电话和邮箱至少填写其中一项</span>
+ </div>
+ </div>
+ <div class="tip_box label5">
+ <el-form-item label="" class="" prop="email" label-width="0px">
+ <div class="flex">
+ <div class="box1">
+ <div class="flex">
+ <!-- <div class="red">*</div> -->
+ <div class="box_text1">邮箱：</div>
+ </div>
+ <div class="box_text2">Email</div>
+ </div>
+ <el-input v-model="form.email" placeholder="请输入"></el-input>
+ </div>
+ </el-form-item>
+ <div class="tip">
+ <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
+ <span>联系电话和邮箱至少填写其中一项</span>
+ </div>
</div>
</div>
+
</div>
- </div>
-
- <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 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>
- <div class="box_text3">Other Information</div>
- </div>
- <quill-editor class="editor" v-model="form.specialRequest" ref="myQuillEditor" :options="editorOption"
+ <quill-editor class="editor" v-model="form.specialRequest" ref="myQuillEditor" :options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
+ </div>
+
</div>
<div class="flex " style="padding-bottom: 27px;">
@@ -447,55 +454,60 @@
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
</div>
+
- </div>
- </el-card>
- <el-card class="box-card mt-13">
- <div slot="header" class="clearfix">
- <span class="clearfix_text">附件</span>
- </div>
- <div class="box-carde">
- <div class="flex">
- <el-form-item label="Do：" class="mr-129" prop="DOFileUrl" label-width="88px">
- <el-upload class="upload-demo" :action="upload.url"
- :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleFileSuccesspicture" :before-remove="beforeRemove" multiple :limit="3"
- :on-exceed="handleExceed" :file-list="fileList">
- <div class="upload_btn">+上传附件</div>
- </el-upload>
- </el-form-item>
- <el-form-item label="PU#：" class="mr-129" prop="PUFileUrl" label-width="88px">
- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
- :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
- :on-exceed="handleExceed" :file-list="fileList">
- <div class="upload_btn">+上传附件</div>
- </el-upload>
- </el-form-item>
- <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
- <el-input v-model="form.PUExplain" placeholder="请输入"></el-input>
- </el-form-item>
+ </el-card>
+
+ <el-card class="box-card mt-13">
+ <div slot="header" class="clearfix">
+ <span class="clearfix_text">附件</span>
</div>
- <div class="flex">
- <el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
- :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
- :on-exceed="handleExceed" :file-list="fileList">
- <div class="upload_btn">+上传附件</div>
- </el-upload>
- </el-form-item>
- <el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
- :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
- :on-exceed="handleExceed" :file-list="fileList">
- <div class="upload_btn">+上传附件</div>
- </el-upload>
- </el-form-item>
+ <div class="box-carde">
+ <div class="flex">
+ <el-form-item label="Do：" class="mr-129" prop="DOFileUrl" label-width="88px">
+ <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
+ :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
+ :limit="3" :on-exceed="handleExceed" :file-list="fileList">
+ <div class="upload_btn">+上传附件</div>
+ </el-upload>
+ </el-form-item>
+ <el-form-item label="PU#：" class="mr-129" prop="PUFileUrl" label-width="88px">
+ <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
+ :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
+ :limit="3" :on-exceed="handleExceed" :file-list="fileList">
+ <div class="upload_btn">+上传附件</div>
+ </el-upload>
+ </el-form-item>
+ <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
+ <el-input v-model="form.PUExplain" placeholder="请输入"></el-input>
+ </el-form-item>
+ </div>
+ <div class="flex">
+ <el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
+ <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
+ :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
+ :limit="3" :on-exceed="handleExceed" :file-list="fileList">
+ <div class="upload_btn">+上传附件</div>
+ </el-upload>
+ </el-form-item>
+ <el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
+ <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
+ :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
+ :limit="3" :on-exceed="handleExceed" :file-list="fileList">
+ <div class="upload_btn">+上传附件</div>
+ </el-upload>
+ </el-form-item>
+ </div>
</div>
- </div>
- </el-card>
+ </el-card>
+ </div>
+ <!-- 详情的table -->
+ <DetailInfo v-else />
+
<div class="btn">
<div class="btn_close">关闭</div>
- <div class="btn_comfirm" @click="submitForm('form')">确认</div>
+ <div v-if="activeTab == 1" class="btn_comfirm" @click="submitForm('form')">确认</div>
</div>
</el-form>
</div>
@@ -509,11 +521,12 @@
import { quillEditor, Quill } from 'vue-quill-editor' //引入插件
-
+import DetailInfoTop from '@/component/detailInfoTop'
+import DetailInfo from '../component/detailInfo.vue'
export default {
components: {
- quillEditor
+ quillEditor, DetailInfoTop, DetailInfo
},
data() {
return {
@@ -588,7 +601,7 @@
// 上传的地址
url: 'http://47.108.239.173:2020' + "/api/oss/new_temp_upload"
},
- fileList:[],
+ fileList: [],
options: [
{
value: "20GP",
@@ -739,38 +752,39 @@
}
});
},
- handleFileSuccesspicture(resp, file, fileList){
- console.log(resp,file,fileList);
-
+ handleFileSuccesspicture(resp, file, fileList) {
+ console.log(resp, file, fileList);
+
},
- handlePreview(e){
- console.log(e,'e');
+ handlePreview(e) {
+ console.log(e, 'e');
},
- handleRemove(e){
- console.log(e,'e');
-
-
- },
- beforeRemove(e){
- console.log(e,'e');
+ handleRemove(e) {
+ console.log(e, 'e');
+
},
- handleExceed(e){
- console.log(e,'e');
-
+ beforeRemove(e) {
+ console.log(e, 'e');
+
+ },
+ handleExceed(e) {
+ console.log(e, 'e');
+
},
},
};
</script>
<style lang="less" scoped>
-.tab{
+.tab {
padding-bottom: 35px;
}
+
.noactive {
font-weight: 500;
font-size: 18px;
@@ -779,7 +793,8 @@
text-align: left;
font-style: normal;
}
-.ml-56{
+
+.ml-56 {
margin-left: 56px;
}
--
Gitblit v1.7.1