<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">添加订单 ｜ Add orders</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">Container No.</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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">BOL No.</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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">Container Type</div>
|
</div>
|
<el-select :disabled="type != 'add'" 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 != 'add'" 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 Name and Voyage</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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 != 'add'" 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 != 'add'" 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 != 'add'" text-color="#014099" fill="#014099" v-model="form.SOC">
|
<el-radio label="是">是 (Y)</el-radio>
|
<el-radio label="否">否 (N)</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 != 'add'" text-color="#014099" fill="#014099" v-model="form.DG">
|
<el-radio label="是">是 (Y)</el-radio>
|
<el-radio label="否">否 (N)</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">Overweight</div>
|
</div>
|
<el-radio-group :disabled="type != 'add'" text-color="#014099" fill="#014099"
|
v-model="form.overweight">
|
<el-radio label="是">是 (Y)</el-radio>
|
<el-radio label="否">否 (N)</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">Exam/inspection</div>
|
</div>
|
<el-radio-group :disabled="type != 'add'" text-color="#014099" fill="#014099"
|
v-model="form.customsInspection">
|
<el-radio label="是">是 (Y)</el-radio>
|
<el-radio label="否">否 (N)</el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
</div>
|
<div class="flex">
|
<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 != 'add'" 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>
|
<el-form-item label="" class="" prop="dropOrLive" label-width="0">
|
<div class="flex" style="align-items: center">
|
<div class="box8" style="width: 206px;">
|
<div class="flex">
|
<div class="box_text1">Hold：</div>
|
</div>
|
</div>
|
<el-radio-group v-model="form.hold" :disabled="type == 'detail'" text-color="#014099" fill="#014099" >
|
<el-radio label="等国内通知派送" style="width: 200px !important;">等国内通知派送 | Client Hold</el-radio>
|
<el-radio label="扣柜放行" style="width: 180px !important;">扣柜放行 | Client Release</el-radio>
|
<el-radio label="正常">正常 | Client Release</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>Please send detailed packing list for OT, FR or other special containers</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">Customer Ref. No.</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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">Commodity</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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 != 'add'" v-model="form.QTY" placeholder="请输入"
|
onkeypress="return event.charCode >= 48 && event.charCode <= 57">
|
</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">packages</div>
|
</div>
|
<el-select :disabled="type != 'add'" 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">Gr. Wt</div>
|
</div>
|
<el-input type="number" :disabled="type != 'add'" 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">≈Weight (LBs)</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">Volume</div>
|
</div>
|
<el-input type="number" :disabled="type != 'add'" 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 Information</span>
|
<div v-if="type == 'add'" 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">Consignee</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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">Company Name</div>
|
</div>
|
<el-input :disabled="type != 'add'" 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">Postal Code</div>
|
</div>
|
|
<el-input :disabled="type != 'add'" 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 != 'add'" 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 != 'add'" 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 != 'add'" 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 Contact Information</div>
|
</div>
|
<quill-editor :disabled="type != 'add'" 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">Remarks</div>
|
</div>
|
<quill-editor :disabled="type != 'add'" class="editor" v-model="form.remark" ref="myQuillEditor"
|
:options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
|
@change="onEditorChange($event)">
|
</quill-editor>
|
</div>
|
<div class="flex " style="padding-bottom: 27px;">
|
<div class="box10">
|
<div class="flex">
|
<div class="box_text1">保存信息：</div>
|
</div>
|
<div class="box_text3">Save</div>
|
</div>
|
<el-radio v-model="isSave" :disabled="type != 'add'" :label="true">是 (Y)</el-radio>
|
<el-radio v-model="isSave" :disabled="type != 'add'" :label="false">否 (N)</el-radio>
|
</div>
|
|
|
</el-card>
|
<el-card v-if="type == 'detail'" class="box-card mt-13">
|
<div slot="header" class="clearfix">
|
<span class="clearfix_text">货柜动态 ｜ Container Status</span>
|
</div>
|
<div class="box-cardes">
|
<div class="flex">
|
|
|
<el-form-item label="" class="label2" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<div class="box_text1">最晚免费日期：</div>
|
</div>
|
<div class="box_text2">Last Free Date</div>
|
</div>
|
<el-input v-model="form.LFD" readonly></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label3" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="box_text1">提柜日期：</div>
|
</div>
|
<div class="box_text2">Pickup Date</div>
|
</div>
|
<el-input v-model="form.pickUpDate" readonly></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label4" label-width="0">
|
<div class="flex">
|
<div class="box2">
|
<div class="flex">
|
<div class="box_text1">计划送柜日期：</div>
|
</div>
|
<div class="box_text2">Delivery Schedule</div>
|
</div>
|
<el-input v-model="form.deliverySchedule" readonly></el-input>
|
|
</div>
|
</el-form-item>
|
</div>
|
<div class="flex">
|
<el-form-item label="" class="label6" label-width="0px">
|
<div class="flex">
|
<div class="box9" style="width: 200px">
|
<div class="flex">
|
<div class="box_text1">实际送货日期：</div>
|
</div>
|
<div class="box_text2">Actual Delivery Date</div>
|
</div>
|
<el-input v-model="form.actualSchedule" readonly></el-input>
|
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label3" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="box_text1">报空日期：</div>
|
</div>
|
<div class="box_text2">Empty Report Date</div>
|
</div>
|
<el-input v-model="form.emptyReportDate" readonly></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label4" label-width="0">
|
<div class="flex">
|
<div class="box2">
|
<div class="flex">
|
<div class="box_text1">还空日期：</div>
|
</div>
|
<div class="box_text2">Empty Return Date</div>
|
</div>
|
<el-input v-model="form.emptyReturnDate" readonly></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label1" 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">Chassis No.</div>
|
</div>
|
<el-input v-model="form.frameNumber" readonly></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
</div>
|
</el-card>
|
<el-card class="box-card mt-13">
|
<div slot="header" class="clearfix">
|
<span class="clearfix_text">附件 ｜ Attachment</span>
|
</div>
|
<div class="box-carde">
|
<div class="flex">
|
<el-form-item label="Do：" class="w-316" prop="DOFileUrls" 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">+上传附件</div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="PU#：" class="w-316" prop="PUFileUrls" 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">+上传附件</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">+上传附件</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">+上传附件</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, saveInfo } 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: {},
|
isSave: false, //是否保存收件人信息
|
form: {
|
hold: "正常", //持有人
|
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说明
|
PUFileUrls: [],//PU附件
|
DOFileUrls: [],//DO附件
|
PODFileUrls: [],//POD附件
|
otherFileUrls: [],//其他附件
|
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
|
if (resp.data.DOFileUrls) {
|
resp.data.DOFileUrls.map(item => {
|
this.fileList1.push({ url: item.url, name: item.url.split('ownload/')[1] })
|
})
|
}
|
if (resp.data.PUFileUrls) {
|
resp.data.PUFileUrls.map(item => {
|
this.fileList2.push({ url: item.url, name: item.url.split('ownload/')[1] })
|
})
|
}
|
if (resp.data.PODFileUrls) {
|
resp.data.PODFileUrls.map(item => {
|
this.fileList3.push({ url: item.url, name: item.url.split('ownload/')[1] })
|
})
|
}
|
if (resp.data.otherFileUrls) {
|
resp.data.otherFileUrls.map(item => {
|
this.fileList4.push({ url: item.url, name: item.url.split('ownload/')[1] })
|
})
|
}
|
})
|
}
|
|
getaddress({
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra
|
}).then(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.post = e.postAddress
|
this.form.consigneeCompany = e.company
|
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 {
|
this.form.DOFileUrls = this.fileList1.map(item => { return { url: item.url } })
|
this.form.PUFileUrls = this.fileList2.map(item => { return { url: item.url } })
|
this.form.PODFileUrls = this.fileList3.map(item => { return { url: item.url } })
|
this.form.otherFileUrls = this.fileList4.map(item => { return { url: item.url } })
|
// 添加订单
|
if (this.type === 'add') {
|
if (this.isSave) {
|
saveInfo({
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra,
|
name: this.form.contact,
|
phone: this.form.tel,
|
email: this.form.email,
|
address: this.form.address,
|
remark: this.form.remark,
|
})
|
}
|
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说明
|
PUFileUrls: [],//PU附件
|
DOFileUrls: [],//DO附件
|
PODFileUrls: [],//POD附件
|
otherFileUrls: [],//其他附件
|
specialRequest: '',//特殊要求
|
remark: '',//备注
|
|
}
|
this.fileList1 = []
|
this.fileList2 = []
|
this.fileList3 = []
|
this.fileList4 = []
|
this.$router.go(-1)
|
|
}
|
|
})
|
} else {
|
if (this.isSave) {
|
saveInfo({
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra,
|
name: this.form.contact,
|
phone: this.form.tel,
|
email: this.form.email,
|
address: this.form.address,
|
remark: this.form.remark,
|
})
|
}
|
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说明
|
PUFileUrls: [],//PU附件
|
DOFileUrls: [],//DO附件
|
PODFileUrls: [],//POD附件
|
otherFileUrls: [],//其他附件
|
specialRequest: '',//特殊要求
|
remark: '',//备注
|
|
}
|
this.fileList1 = []
|
this.fileList2 = []
|
this.fileList3 = []
|
this.fileList4 = []
|
this.$router.go(-1)
|
|
}
|
|
})
|
}
|
|
}
|
|
} else {
|
this.$message.error('请填写必填内容');
|
|
return false;
|
}
|
});
|
},
|
handlePreview(e) {
|
window.open(e.url)
|
},
|
handleRemove1(e) {
|
this.fileList1 = this.fileList1.filter(item => item.uid !== e.uid);
|
},
|
handleRemove2(e) {
|
this.fileList2 = this.fileList2.filter(item => item.uid !== e.uid);
|
},
|
handleRemove3(e) {
|
this.fileList3 = this.fileList3.filter(item => item.uid !== e.uid);
|
},
|
handleRemove4(e) {
|
this.fileList4 = this.fileList4.filter(item => item.uid !== e.uid);
|
},
|
|
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 => {
|
if (resp.data.status === 0) {
|
console.log(resp.data, 'resp.data.data');
|
|
this[`fileList${value}`].push({ name: obj.originalName, url: '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: 'zj0FFk5wx4S05X',
|
formId: 'zj1OvwgwIam0Ge',
|
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: 'zj0FFk5wx4S05X',
|
formId: 'zj1OvwgwIam0Ge',
|
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: 'zj0FFk5wx4S05X',
|
formId: 'zj1OvwgwIam0Ge',
|
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: 'zj0FFk5wx4S05X',
|
formId: 'zj1OvwgwIam0Ge',
|
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: 400px;
|
}
|
|
::v-deep .el-icon-close-tip {
|
display: none !important;
|
}
|
|
.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: 120px;
|
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: 200px;
|
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: 150px;
|
display: flex;
|
flex-direction: column;
|
line-height: 23px !important;
|
align-items: flex-end;
|
font-weight: 500;
|
flex-shrink: 0;
|
}
|
|
.box10 {
|
width: 180px;
|
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>
|
