<template>
|
<div class="contanier">
|
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
<!-- card-one -->
|
<el-card class="">
|
<div slot="header" class="clearfix">
|
<span class="clearfix_text">添加订单</span>
|
<img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
|
</div>
|
<div class="box-cards">
|
<div class="flex tab">
|
<div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
|
基础信息
|
</div>
|
<div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56' : 'noactive ml-56'">
|
价格信息
|
</div>
|
</div>
|
<div class="flex">
|
|
<el-form-item label="" class="label1" prop="container" label-width="0">
|
<div class="flex">
|
<div class="box">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">集装箱号：</div>
|
</div>
|
<div class="box_text2">Contain#</div>
|
</div>
|
<el-input v-model="form.container" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label2" prop="bol" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">提单号：</div>
|
</div>
|
<div class="box_text2">BOLI#</div>
|
</div>
|
<el-input v-model="form.bol" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label3" prop="cargoType" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">货柜类型：</div>
|
</div>
|
<div class="box_text2">Cargo Type</div>
|
</div>
|
<el-select v-model="form.cargoType" clearable placeholder="请选择" prop="type">
|
<el-option :label="item.label" :value="item.value" v-for="item in options"
|
:key="item.value"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
</div>
|
<div class="flex">
|
<el-form-item label="" class="label1" prop="carrier" label-width="0px">
|
<div class="flex">
|
<div class="box">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">船司：</div>
|
</div>
|
<div class="box_text2">Carrier</div>
|
</div>
|
<el-select v-model="form.carrier" clearable placeholder="请选择">
|
<el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
|
:key="item.value"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label2" prop="vesselAndVoyage" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">航名航次：</div>
|
</div>
|
<div class="box_text2">Vessel & Voyage</div>
|
</div>
|
<el-input v-model="form.vesselAndVoyage" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label3" prop="pickupLocation" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">提柜地：</div>
|
</div>
|
<div class="box_text2">Pickup Location</div>
|
</div>
|
<el-select v-model="form.pickupLocation" clearable placeholder="请选择">
|
<el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
|
:key="item.value"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label4" prop="ETA" label-width="0">
|
<div class="flex">
|
<div class="box2">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">预计到达日期：</div>
|
</div>
|
<div class="box_text2">ETA</div>
|
</div>
|
<el-date-picker type="date" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
|
style="width: 100%">
|
<div></div>
|
</el-date-picker>
|
</div>
|
</el-form-item>
|
</div>
|
<div class="flex">
|
<el-form-item label="" class="" prop="SOC" label-width="0">
|
<div class="flex" style="align-items: center">
|
<div class="box4">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">SOC：</div>
|
</div>
|
</div>
|
<el-radio-group text-color="#014099" fill="#014099" v-model="form.SOC">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="" prop="DG" label-width="0">
|
<div class="flex" style="align-items: center">
|
<div class="box5">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">DG：</div>
|
</div>
|
</div>
|
<el-radio-group text-color="#014099" fill="#014099" v-model="form.DG">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="" prop="overweight" label-width="0">
|
<div class="flex" style="align-items: center">
|
<div class="box6">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">是否超重：</div>
|
</div>
|
<div class="box_text1 mr-14">Over Weight</div>
|
</div>
|
<el-radio-group text-color="#014099" fill="#014099" v-model="form.overweight">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="" prop="customsInspection" label-width="0">
|
<div class="flex" style="align-items: center">
|
<div class="box7">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">是否查验：</div>
|
</div>
|
<div class="box_text1">Customs Inspection</div>
|
</div>
|
<el-radio-group text-color="#014099" fill="#014099" v-model="form.customsInspection">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item label="" class="" prop="dropOrLive" label-width="0">
|
<div class="flex" style="align-items: center">
|
<div class="box8">
|
<div class="flex">
|
<div class="box_text1">DROP/LIVE：</div>
|
</div>
|
</div>
|
<el-radio-group text-color="#014099" fill="#014099" v-model="form.dropOrLive">
|
<el-radio label="Drop"></el-radio>
|
<el-radio label="Live"></el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="bg">
|
<span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
|
<span>Pls supply detailed packing list for an OT or FR conainer</span>
|
</div>
|
</el-card>
|
<!-- card-two -->
|
|
<el-card class="box-card mt-13">
|
<div slot="header" class="clearfix">
|
<span class="clearfix_text">货柜信息 ｜ Container Det</span>
|
</div>
|
<div class="box-cardes">
|
<div class="flex">
|
<el-form-item label="" class="label1" prop="clientOrder" label-width="0">
|
<div class="flex">
|
<div class="box9">
|
<div class="flex">
|
<!-- <div class="red">*</div> -->
|
<div class="box_text1">客户单号：</div>
|
</div>
|
<div class="box_text2">Clinet Order#</div>
|
</div>
|
<el-input v-model="form.clientOrder" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label2" prop="product" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">品名：</div>
|
</div>
|
<div class="box_text2">Product</div>
|
</div>
|
<el-input v-model="form.product" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label3" prop="QTY" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">包装数量：</div>
|
</div>
|
<div class="box_text2">QTY</div>
|
</div>
|
<el-input v-model="form.QTY" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
|
<div class="flex">
|
<div class="box2">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">单位选择：</div>
|
</div>
|
<div class="box_text2">QTY Unit</div>
|
</div>
|
<el-select v-model="form.QTYUnit" clearable placeholder="请选择">
|
<el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
|
:key="item.value"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
</div>
|
<div class="flex">
|
<el-form-item label="" class="label1" prop="weight" label-width="0px">
|
<div class="flex">
|
<div class="box9">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">重量：</div>
|
</div>
|
<div class="box_text2">Weight</div>
|
</div>
|
<el-input v-model="form.weight" placeholder="请输入">
|
<div style="line-height: 50px;" slot="prefix-icon">KG</div>
|
</el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<!-- <div class="red">*</div> -->
|
<div class="box_text1">≈重量(磅)：</div>
|
</div>
|
<div class="box_text2">≈Pound weight</div>
|
</div>
|
<el-input v-model="form.poundWeight" placeholder="请输入">
|
<div style="line-height: 50px;" slot="suffix">LBS</div>
|
</el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label3" prop="volume" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">体积：</div>
|
</div>
|
<div class="box_text2">Voume</div>
|
</div>
|
<el-input v-model="form.volume" placeholder="请输入">
|
<div style="line-height: 50px;" slot="suffix">CMB</div>
|
</el-input>
|
</div>
|
</el-form-item>
|
</div>
|
</div>
|
</el-card>
|
<!-- card-three -->
|
|
<el-card class="box-card mt-13">
|
<div slot="header" class="clearfix">
|
<span class="clearfix_text">收件人信息 ｜ Consignee</span>
|
<div class="clearfix_btn">
|
<img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
|
<span>选择已添加信息</span>
|
</div>
|
</div>
|
<div class="">
|
<div class="box-cards">
|
<div class="flex">
|
<el-form-item label="" class="label1" prop="contact" label-width="0">
|
<div class="flex">
|
<div class="box">
|
<div class="flex">
|
<!-- <div class="red">*</div> -->
|
<div class="box_text1">收件人：</div>
|
</div>
|
<div class="box_text2">Contact</div>
|
</div>
|
<el-input v-model="form.contact" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">收件人公司：</div>
|
</div>
|
<div class="box_text2">Consignee-Company</div>
|
</div>
|
<el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="" class="label3" prop="post" label-width="0px">
|
<div class="flex">
|
<div class="box3">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">目的地邮编：</div>
|
</div>
|
<div class="box_text2">Post</div>
|
</div>
|
<el-select v-model="form.post" clearable placeholder="请选择" prop="type">
|
<el-option :label="item.label" :value="item.value" v-for="item in options"
|
:key="item.value"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item label="" class="label4" prop="address" label-width="0">
|
<div class="flex">
|
<div class="box2">
|
<div class="flex">
|
<div class="red">*</div>
|
<div class="box_text1">地址：</div>
|
</div>
|
<div class="box_text2">Address</div>
|
</div>
|
<el-input v-model="form.address" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
<div class="flex">
|
<div class="tip_box label5">
|
|
<el-form-item label="" class="" prop="tel" label-width="0px">
|
<div class="flex">
|
<div class="box">
|
<div class="flex">
|
<!-- <div class="red">*</div> -->
|
<div class="box_text1">联系电话：</div>
|
</div>
|
<div class="box_text2">Tel</div>
|
</div>
|
<el-select v-model="form.tel" clearable placeholder="请选择">
|
<el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
|
:key="item.value"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<div class="tip">
|
<img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
|
<span>联系电话和邮箱至少填写其中一项</span>
|
</div>
|
</div>
|
<div class="tip_box label5">
|
<el-form-item label="" class="" prop="email" label-width="0px">
|
<div class="flex">
|
<div class="box1">
|
<div class="flex">
|
<!-- <div class="red">*</div> -->
|
<div class="box_text1">邮箱：</div>
|
</div>
|
<div class="box_text2">Email</div>
|
</div>
|
<el-input v-model="form.email" placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
<div class="tip">
|
<img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
|
<span>联系电话和邮箱至少填写其中一项</span>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
<div class="flex mt-43" style="height: unset;padding-bottom: 43px;">
|
<div class="box10">
|
<div class="flex">
|
<!-- <div class="red">*</div> -->
|
<div class="box_text1">其他联系方式：</div>
|
</div>
|
<div class="box_text3">Other Information</div>
|
</div>
|
<quill-editor class="editor" v-model="form.specialRequest" ref="myQuillEditor" :options="editorOption"
|
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
|
</quill-editor>
|
|
</div>
|
<div class="flex " style="padding-bottom: 27px;">
|
<div class="box10">
|
<div class="flex">
|
<div class="box_text1">备注：</div>
|
</div>
|
<div class="box_text3">Remark</div>
|
</div>
|
<quill-editor class="editor" v-model="form.remark" ref="myQuillEditor" :options="editorOption"
|
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
|
</quill-editor>
|
</div>
|
|
|
</div>
|
</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>
|
</div>
|
<div class="flex">
|
<el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
|
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
|
:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
|
:on-exceed="handleExceed" :file-list="fileList">
|
<div class="upload_btn">+上传附件</div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
|
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
|
:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
|
:on-exceed="handleExceed" :file-list="fileList">
|
<div class="upload_btn">+上传附件</div>
|
</el-upload>
|
</el-form-item>
|
</div>
|
</div>
|
</el-card>
|
<div class="btn">
|
<div class="btn_close">关闭</div>
|
<div class="btn_comfirm" @click="submitForm('form')">确认</div>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { addOrder } from './addservier'
|
import 'quill/dist/quill.core.css'
|
import 'quill/dist/quill.snow.css'
|
import 'quill/dist/quill.bubble.css'
|
|
import { quillEditor, Quill } from 'vue-quill-editor' //引入插件
|
|
|
|
export default {
|
components: {
|
quillEditor
|
},
|
data() {
|
return {
|
activeTab: 1,
|
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附件
|
PODFileUrls: '',//POD附件
|
otherFileUrls: '',//其他附件
|
specialRequest: '',//特殊要求
|
remark: '',//备注
|
},
|
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", "video"], //上传图片、上传视频
|
],
|
},
|
},
|
|
|
// 导入参数
|
upload: {
|
// 是否显示弹出层
|
open: false,
|
// 弹出层标题
|
title: "",
|
// 是否禁用上传
|
isUploading: false,
|
// 是否更新已经存在的数据
|
updateSupport: 0,
|
// 设置上传的请求头部
|
// headers: { Authorization: "Bearer " + getToken() },
|
// 上传的地址
|
url: 'http://47.108.239.173:2020' + "/api/oss/new_temp_upload"
|
},
|
fileList:[],
|
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",
|
},
|
],
|
rules: {
|
container: [{ required: true, message: "请输入", trigger: "blur" }],
|
bol: [{ required: true, message: "请输入", trigger: "blur" }],
|
cargoType: [{ required: true, message: "请选择", trigger: "change" }],
|
carrier: [{ required: true, message: "请选择", trigger: "change" }],
|
vesselAndVoyage: [
|
{ required: true, message: "请输入", trigger: "blur" },
|
],
|
pickupLocation: [
|
{ required: true, message: "请选择", trigger: "change" },
|
],
|
ETA: [{ required: true, message: "请选择", trigger: "change" }],
|
SOC: [{ required: true, message: "请选择", trigger: "change" }],
|
DG: [{ required: true, message: "请选择", trigger: "change" }],
|
overweight: [{ required: true, message: "请选择", trigger: "change" }],
|
customsInspection: [
|
{ required: true, message: "请选择", trigger: "change" },
|
],
|
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" }],
|
},
|
};
|
},
|
methods: {
|
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) => {
|
console.log(valid, '----');
|
|
if (valid) {
|
alert("submit!");
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
handleFileSuccesspicture(resp, file, fileList){
|
console.log(resp,file,fileList);
|
|
|
},
|
|
handlePreview(e){
|
console.log(e,'e');
|
|
},
|
|
handleRemove(e){
|
console.log(e,'e');
|
|
|
},
|
beforeRemove(e){
|
console.log(e,'e');
|
|
},
|
handleExceed(e){
|
console.log(e,'e');
|
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.tab{
|
padding-bottom: 35px;
|
}
|
.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;
|
}
|
}
|
|
::v-deep .el-form-item__content {
|
margin: 0 !important;
|
}
|
|
::v-deep .el-card {
|
border-radius: 6px !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__label {
|
font-size: 16px !important;
|
color: rgba(59, 63, 86, 0.8) !important;
|
}
|
|
::v-deep .el-radio__inner {
|
width: 24px !important;
|
height: 24px !important;
|
}
|
|
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
border: 4px solid #fff !important;
|
|
border-color: rgba(1, 64, 153, 1) !important;
|
background: rgba(1, 64, 153, 1) !important;
|
}
|
|
::v-deep .el-radio__inner::after {
|
// width: 16px !important;
|
// height: 16px !important;
|
// background-color: 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;
|
}
|
}
|
|
.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>
|
