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

pyt

2025-01-08 a90d086401975794362090267d214d30c9852ed3

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

 package-lock.json

Diff too large

 src/assets/addOrder/img1@2x.png

 src/assets/addOrder/img2@2x.png

 src/assets/addOrder/img2x.png

 src/assets/addOrder/img3@2x.png

 src/assets/addOrder/img4@2x.png

 src/assets/addOrder/img5@2x.png

 src/component/AddedInformation.vue

New file
@@ -0,0 +1,93 @@
<template>
    <div>
        <el-dialog :visible.sync="show" :show-close="false" width="1541px" @close="$emit('close')"
            :modal-append-to-body="false">
            <div class="txt-center pt--31">
                <div class="fs--18 mb--34 font-bold">请选择</div>
                <div class="mx--31">
                    <el-table :data="tableData" style="width: 100%" border
                        header-cell-style="background:#F6F6F7;font-size:16px;color: #3B3F56;">
                        <el-table-column label="选择" align="center">
                            <template slot-scope="{ row }">
                                
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="手机号" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="邮箱" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="备注" align="center">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="btns">
                    <el-button @click="$emit('close')">关闭</el-button>
                    <el-button @click="submit" type="primary">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            tableData: [{}]
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        submit() {
            this.$emit('submit', {})
        }
    },
};
</script>
<style scoped lang="less">
.btns {
    display: flex;
    justify-content: center;
    margin-top: 39px;
    padding-bottom: 31px;

    .el-button {
        width: 190px;
        height: 50px;
        font-size: 20px;

    }

    .el-button--primary {
        background-color: #014099;
        border-color: #014099;
    }
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}
</style>

 src/component/Header.vue

@@ -1,24 +1,27 @@
<template>
    <div class="header_content">
        <div class="color1 fs--24 font-bold">{{ userInfo.companyName }}</div>
        <div class="flex a-center j-between">
            <div @click="userInfoShow = true" class="flex a-center mr--55 shrink0 pointer">
                <div class="mr--24 fs--20 font-bold shrink0 color2">{{ userInfo.userName }}</div>
                <img @click="$emit('edit')" src="../assets/img/bianji@2x.png" class="w--23 h--23" />
    <div>
        <div class="header_content">
            <div class="color1 fs--24 font-bold">{{ userInfo.companyName }}</div>
            <div class="flex a-center j-between">
                <div @click="userInfoShow = true" class="flex a-center mr--55 shrink0 pointer">
                    <div class="mr--24 fs--20 font-bold shrink0 color2">{{ userInfo.userName }}</div>
                    <img @click="$emit('edit')" src="../assets/img/bianji@2x.png" class="w--23 h--23" />
                </div>
                <img @click="logOutShow = true" src="../assets/img/tuichu@2x.png" class="w--40 h--40 shrink0 pointer" />
            </div>
            <img @click="logOutShow = true" src="../assets/img/tuichu@2x.png" class="w--40 h--40 shrink0 pointer" />
        </div>
        <el-dialog v-if="logOutShow" :visible.sync="logOutShow" :show-close="false" width="518px"
            top="51px"></el-dialog>
        <UserInfoComponent :show="userInfoShow" @close="userInfoShow = false" />
        <LogOutComponent v-if="logOutShow" :show="logOutShow" @close="logOutShow = false" />
        <UserInfoComponent v-if="userInfoShow" :show="userInfoShow" @close="userInfoShow = false" />
    </div>
</template>

<script>
import UserInfoComponent from '@/component/userInfo.vue'
import LogOutComponent from '@/component/LogOut.vue'
export default {
    components: {
        UserInfoComponent
        UserInfoComponent,
        LogOutComponent
    },
    props: {},
    data() {
@@ -52,18 +55,5 @@

.color2 {
    color: #EDEDF3;
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}
</style>

 src/component/LogOut.vue

New file
@@ -0,0 +1,77 @@
<template>
    <div>
        <el-dialog :visible.sync="show" :show-close="false" width="518px" @close="$emit('close')"
            :modal-append-to-body="false">
            <div class="txt-center pt--32">
                <div class="fs--21 font-bold">退出登录</div>
                <div class="fs--16 mt--77 color">确认退出当前登录帐号吗？</div>
                <div class="btns">
                    <el-button @click="$emit('close')">关闭</el-button>
                    <el-button @click="submit" type="primary">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        submit() {
            localStorage.clear();
            window.location.replace('/');
        }
    },
};
</script>
<style scoped lang="less">
.color {
    color: rgba(59, 63, 86, .83);
}

.btns {
    display: flex;
    justify-content: center;
    margin-top: 108px;
    padding-bottom: 29px;

    .el-button {
        width: 190px;
        height: 50px;
        font-size: 20px;

    }

    .el-button--primary {
        background-color: #014099;
        border-color: #014099;
    }
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}
</style>

 src/component/Notice.vue

New file
@@ -0,0 +1,63 @@
<template>
    <el-dialog :visible.sync="show" :show-close="false" width="1018px" @close="$emit('close')"
        :modal-append-to-body="false">
        <div class="txt-center pt--30 pb--25">
            <div class="fs--18 mb--70 font-bold color1">下单须知</div>
            <div v-html="content"></div>
            <div class="btns pointer" @click="$emit('close')">确认</div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: ''
        }
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {},
};
</script>
<style scoped lang="less">
.color1 {
    color: rgba(59, 63, 86, 1);
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}

.btns {
    margin: 25px auto 0;
    width: 311px;
    line-height: 50px;
    background: #014099;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
}
</style>

 src/router/index.js

@@ -38,7 +38,17 @@
        meta: {
          title: "登录",
        },
        component: () => import("../view/Login.vue"),
        component: () => import("../view/Login"),
      },
      {
        path: "/addOrder",
        meta: {
          title: "添加订单",
          oneself: true,
          hide: true,
          privilege: 'addOrder'
        },
        component: () => import("../view/addOrder"),
      },
    ]
  }

 src/utils/request.js

@@ -21,6 +21,9 @@
    if (env === 'production') {
      url = url.replace(/.$/, '0');
      config.url = url;
    } else {
      url = url.replace(/.$/, '1');
      config.url = url;
    }

    const nowTime = Date.now()
@@ -66,7 +69,7 @@
          type: 'warning',
          duration: 2000
        })
        window.location.replace('/login');
        window.location.replace('/');
        return Promise.reject(res.data)
      }
      Message({

 src/view/Home.vue

@@ -1,14 +1,15 @@
<template>
    <div>
        <Header />
        <UserInfo :show="showUserInfo" @close="showUserInfo = false" />
        <Header style="position: sticky;top: 0;z-index: 1999;" @edit="showUserInfo = true" />
        <NoticeComponent v-if="noticeShow" :show="noticeShow" @close="noticeShow = false" />
        <AddedInformation v-if="true" :show="true" />
        <div class="search-box">
            <div class="title-card">
                <div class="title-left">
                    订单列表
                </div>
                <div class="title-right">
                    <span class="order-agress">下单须知</span>
                    <span @click="noticeShow = true" class="order-agress">下单须知</span>
                    <div class="line"></div>
                    <span class="add-ord">添加订单</span>
                </div>
@@ -95,13 +96,18 @@

<script>
import Header from '@/component/Header.vue'
import NoticeComponent from '@/component/Notice.vue'
import AddedInformation from '@/component/AddedInformation.vue'
export default {
    name: "Home",
    components: {
        Header
        Header,
        NoticeComponent, 
        AddedInformation
    },
    data() {
        return {
            noticeShow: false,
            showUserInfo: false,
            searchForm: {


 src/view/addOrder.vue

New file
@@ -0,0 +1,1021 @@
<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">
            
            <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" placeholder="选择日期" v-model="form.ETA" style="width: 100%"></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="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">QTY Unit</div>
                </div>
                <el-select v-model="form.carrier" 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="请输入"></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="请输入"></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="请输入"></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">

                <el-form-item label="" class="label5" 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">
                <el-form-item label="" class="label5" 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>
      </el-card>
      <el-card class="box-card mt-13">
        <div slot="header" class="clearfix">
          <span class="clearfix_text">附件</span>
        </div>
        <div class="box-carde">
          <div class="flex">
            <el-form-item label="Do：" class="mr-129" prop="DOFileUrl" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="PU#：" class="mr-129" prop="PUFileUrl" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
              <el-input v-model="form.PUExplain" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
          </div>
        </div>
      </el-card>
      <div class="btn">
        <div class="btn_close">关闭</div>
        <div class="btn_comfirm" @click="submitForm('form')">确认</div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      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: '',//其他附件
      },
      // 导入参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/common/upload"
      },
      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: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box-cards {
  padding: 23px 0 0 24px;
}

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

.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;
  }
}

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

.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;
}

.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;
}

.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>