yf-admin-ui/src/views/iosBasicData/businessCenter/customerBooking/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left" @click="goBack()">返回列表 </el-button>
        <el-button v-if="form.id && pageIds.length" type="text" @click="lastPage">上一票</el-button>
        <el-button v-if="form.id && pageIds.length" type="text" @click="nextPage">下一票</el-button>
      </div>
      <div class="add-customer-btn">
        <el-button size="small" :disabled="!form.id" @click="$refs.print.openDialog()">预 览 </el-button>
        <el-button v-if="roleName.indexOf('admin') != -1" size="small" :disabled="!form.id" @click="$refs.report.openDialog()">报表设计 </el-button>
        <!--        <el-button class="el-button&#45;&#45;small-yh" style="margin-left: 6px;" type="danger" size="small"
          @click="allClick('预定订舱')">预定订舱
        </el-button>-->
        <!-- <el-button class="el-button--small-yh" style="margin-left: 6px;" type="primary" size="small" v-if="editButton"
          :disabled="showLock || !(roleName.indexOf('admin') != -1 || roleName.indexOf('允许修改他人业务') != -1 || saberUserInfo.user_id == form.createUser)"
          @click="inEdit">编 辑
        </el-button> -->
        <el-button class="el-button--small-yh" style="margin-left: 6px;" type="primary" size="small" @click="allClick('模板保存')"
          >模板保存
        </el-button>
        <el-button
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="success"
          size="small"
          :disabled="isSaveBtn || editDisabled"
          @click="allClick('导入模板')"
          >导入模板
        </el-button>
        <el-button
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="primary"
          size="small"
          :disabled="isSaveBtn || editDisabled"
          @click="submit"
          >保 存
        </el-button>
        <el-button v-if="form.id" class="el-button--small-yh" style="margin-left: 6px;" type="danger" size="small" @click="allClick('退舱')"
          >退 舱
        </el-button>
        <el-button
          v-if="form.id && form.issueStatus == 0"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="success"
          size="small"
          :disabled="form.issueStatus == 1 || form.issueStatus == 2"
          @click="allClick('提交订舱')"
          >提交订舱
        </el-button>
        <el-button
          v-if="form.issueStatus == 2"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="danger"
          size="small"
          @click="allClick('撤销订舱')"
          >撤销订舱
        </el-button>
        <el-button
          v-if="form.issueStatus == 1 || form.issueStatus == 2"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="danger"
          size="small"
          @click="allClick('提单修改')"
          >截单SI修改
        </el-button>
        <el-button
          v-if="form.issueStatus == 1 || form.issueStatus == 2"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="success"
          size="small"
          :disabled="flxDisabled"
          @click="allClick('提单确认')"
          >确认提交
        </el-button>
        <!-- <el-button v-if="form.id" class="el-button--small-yh" style="margin-left: 6px;" type="success" size="small"
          :disabled="form.status != 0 || form.issueStatus == 1" @click="application">提单确认
        </el-button> -->
        <!-- <el-button v-if="form.status == 1" class="el-button--small-yh" style="margin-left: 6px;" type="danger"
          size="small" @click="revokeApplication">撤销单据请核
        </el-button> -->
        <el-dropdown style="line-height: 0" v-if="importTemplate == 1">
          <el-button size="small" type="warning" style="margin-left: 8px" :disabled="isSaveBtn || editDisabled || showLock">
            导入模板<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in imporiData" :key="item.id" @click.native="importData2(item.id)">{{ item.name }} </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-dropdown style="line-height: 0">
          <el-button class="el-button--small-yh" style="margin-left: 6px;" type="warning" :disabled="!form.id"
            size="small">
            审 批<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="checkScheduleDialog = true, checkId = form.id">审核进度
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </div>
    <div style="margin-top: 50px">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <trade-card title="基础信息">
            <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm" :disabled="editDisabled">
              <el-row>
                <el-col span="12">
                  <el-row>
                    <el-col span="12">
                      <el-form-item label="船公司客服" prop="customerServiceName">
                        <dic-select
                          v-model="form.customerServiceName"
                          placeholder="船公司客服"
                          :key="form.branchId"
                          label="realName"
                          :url="'/blade-user/userListAll?roleAlias=客服&deptId=' + form.branchId"
                          :filterable="true"
                          @selectChange="dicChange('customerServiceName', $event)"
                          :disabled="editDisabled"
                        ></dic-select>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item label="B/L NO" prop="hblno">
                        <el-input style="width: 100%;" v-model="form.hblno" size="small" :disabled="true" clearable placeholder="HB/L NO"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-row>
                        <el-form-item label="发货人" prop="hshipperDetails">
                          <el-input
                            type="textarea"
                            style="width: 100%;"
                            v-model="form.detail.hshipperDetails"
                            size="small"
                            autocomplete="off"
                            :disabled="editDisabled"
                            :rows="7"
                            clearable
                            placeholder="请输入发货人提单描述"
                            @change="textareaBlur('hshipperDetails', $event)"
                          ></el-input>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="收货人" prop="hconsigneeDetails">
                          <el-input
                            type="textarea"
                            style="width: 100%;"
                            v-model="form.detail.hconsigneeDetails"
                            size="small"
                            autocomplete="off"
                            :disabled="editDisabled"
                            :rows="7"
                            clearable
                            placeholder="请输入收货人提单描述"
                            @change="textareaBlur('hconsigneeDetails', $event)"
                          ></el-input>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="通知人" prop="hnotifyDetails">
                          <el-input
                            type="textarea"
                            style="width: 100%;"
                            v-model="form.detail.hnotifyDetails"
                            size="small"
                            autocomplete="off"
                            :disabled="editDisabled"
                            :rows="7"
                            clearable
                            placeholder="请输入通知人提单描述"
                            @change="textareaBlur('hnotifyDetails', $event)"
                          ></el-input>
                        </el-form-item>
                      </el-row>
                    </el-col>
                    <el-col span="12">
                      <el-row>
                        <el-form-item
                          label="唛头"
                          prop="marks"
                          :rules="[
                            {
                              required: true,
                              message: ' ',
                              trigger: 'blur'
                            }
                          ]"
                        >
                          <el-input
                            type="textarea"
                            style="width: 100%;"
                            v-model="form.marks"
                            size="small"
                            autocomplete="off"
                            :disabled="editDisabled"
                            :rows="7"
                            clearable
                            placeholder="请输入唛头"
                            @change="textareaBlur2('marks', $event)"
                          ></el-input>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item
                          label="货物"
                          prop="commodityDescr"
                          :rules="[
                            {
                              required: true,
                              message: ' ',
                              trigger: 'blur'
                            }
                          ]"
                        >
                          <el-input
                            type="textarea"
                            style="width: 100%;"
                            v-model="form.commodityDescr"
                            size="small"
                            autocomplete="off"
                            :disabled="editDisabled"
                            :rows="15"
                            clearable
                            placeholder="请输入提单上货物描述"
                            @change="textareaBlur2('commodityDescr', $event)"
                          ></el-input>
                        </el-form-item>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col span="12">
                  <el-row>
                    <el-col span="12">
                      <el-form-item label="船名" prop="vesselCnName">
                        <el-input
                          style="width: 100%;"
                          v-model="form.vesselCnName"
                          size="small"
                          :disabled="true"
                          clearable
                          placeholder="船名"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item label="航次" prop="voyageNo">
                        <el-input style="width: 100%;" v-model="form.voyageNo" size="small" :disabled="true" clearable placeholder="航次"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item
                        label="起运港"
                        prop="polCnName"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <dic-select
                          ref="pol"
                          v-model="form.polCnName"
                          placeholder="起运港"
                          key="id"
                          label="cnName"
                          res="records"
                          url="/blade-los/bports/list?current=1&size=5"
                          :filterable="true"
                          :remote="true"
                          dataName="cnName"
                          @selectChange="dicChange('polCnName', $event)"
                          :disabled="editDisabled || !flxDisabled"
                          :slotRight="true"
                          rightLabel="code"
                        ></dic-select>
                        <el-input
                          style="width: 100%;"
                          v-model="form.polNamePrint"
                          size="small"
                          :disabled="editDisabled || !flxDisabled"
                          clearable
                          placeholder="装货港"
                          @change="textareaBlur2('polNamePrint', $event)"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item
                        label="卸货港"
                        prop="podCnName"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <dic-select
                          ref="pod"
                          v-model="form.podCnName"
                          placeholder="卸货港"
                          key="id"
                          label="cnName"
                          res="records"
                          url="/blade-los/bports/list?current=1&size=5"
                          :filterable="true"
                          :remote="true"
                          dataName="cnName"
                          @selectChange="dicChange('podCnName', $event)"
                          :disabled="editDisabled || !flxDisabled"
                          :slotRight="true"
                          rightLabel="code"
                        ></dic-select>
                        <el-input
                          style="width: 100%;"
                          v-model="form.podNamePrint"
                          size="small"
                          :disabled="editDisabled || !flxDisabled"
                          clearable
                          placeholder="卸货港"
                          @change="textareaBlur2('podNamePrint', $event)"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item label="交货地" prop="placeDeliveryName">
                        <dic-select
                          ref="placeDelivery"
                          v-model="form.placeDeliveryName"
                          placeholder="交货地"
                          key="id"
                          label="cnName"
                          res="records"
                          url="/blade-los/bports/list?current=1&size=5"
                          :filterable="true"
                          :remote="true"
                          dataName="cnName"
                          @selectChange="dicChange('placeDeliveryName', $event)"
                          :disabled="editDisabled || !flxDisabled"
                          :slotRight="true"
                          rightLabel="code"
                        ></dic-select>
                        <el-input
                          style="width: 100%;"
                          v-model="form.placeDeliveryNamePrint"
                          size="small"
                          :disabled="editDisabled || !flxDisabled"
                          clearable
                          placeholder="交货地"
                          @change="textareaBlur2('placeDeliveryNamePrint', $event)"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item
                        label="HS CODE"
                        prop="hscode"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          v-model="form.hscode"
                          size="small"
                          :disabled="editDisabled"
                          clearable
                          placeholder="HS CODE"
                        ></el-input>
                        <el-input
                          style="width: 100%;"
                          v-model="form.commodityCnName"
                          size="small"
                          :disabled="editDisabled"
                          clearable
                          placeholder="英文名称"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item
                        label="ETD"
                        prop="etd"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-date-picker
                          v-model="form.etd"
                          type="date"
                          placeholder="请选择 ETD"
                          :disabled="editDisabled"
                          size="small"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"
                          @selectChange="dicChange('ETD', $event)"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item label="订舱日期" prop="bookingDate">
                        <el-date-picker
                          v-model="form.bookingDate"
                          type="date"
                          placeholder="请选择 订舱日期"
                          :disabled="editDisabled"
                          size="small"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item
                        label="付款方式"
                        prop="mpaymode"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <dic-select
                          v-model="form.mpaymode"
                          placeholder="付款方式"
                          key="dictKey"
                          label="dictValue"
                          keyValue="dictKey"
                          url="/blade-system/dict-biz/dictionary?code=payment_method_los"
                          :filterable="true"
                          :disabled="editDisabled"
                        ></dic-select>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item
                        label="运输条款"
                        prop="serviceTerms"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <dic-select
                          v-model="form.serviceTerms"
                          placeholder="运输条款"
                          key="id"
                          label="cnName"
                          res="records"
                          url="/blade-los/bserviceterms/list?status=0&current=1&size=20"
                          :filterable="true"
                          :remote="true"
                          dataName="cnName"
                          :disabled="editDisabled"
                        ></dic-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item
                        label="总件数"
                        prop="quantity"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          v-model="form.quantity"
                          size="small"
                          autocomplete="off"
                          min="1"
                          :disabled="editDisabled"
                          clearable
                          placeholder="请输入 件数"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item
                        label="包装"
                        prop="packingUnit"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <dic-select
                          v-model="form.packingUnit"
                          placeholder="包装"
                          key="id"
                          label="cnName"
                          res="records"
                          url="/blade-los/bpackages/list?current=1&size=5&status=0&whetherDg=0"
                          :filterable="true"
                          :remote="true"
                          dataName="cnName"
                          @selectChange="dicChange('packingUnit', $event)"
                          :disabled="editDisabled"
                          :slotRight="true"
                          rightLabel="code"
                        ></dic-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item
                        label="总重量(KGS)"
                        prop="grossWeight"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          v-model="form.grossWeight"
                          size="small"
                          autocomplete="off"
                          :disabled="editDisabled"
                          clearable
                          placeholder="请输入 总重量"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item
                        label="总体积(CBM)"
                        prop="measurement"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          v-model="form.measurement"
                          size="small"
                          autocomplete="off"
                          :disabled="editDisabled"
                          clearable
                          placeholder="请输入 总体积(CBM)"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!--
                      <el-form-item label="所属公司" prop="branchName">
                        <dic-select v-model="form.branchName" placeholder="所属公司" key="id" label="deptName"
                          url="/blade-system/dept/top-list" :filterable="true" :remote="true" dataName="deptName"
                          @selectChange="dicChange('branchName', $event)" :default="true"
                          :disabled="editDisabled || roleName.includes('secondaryAdmin')"></dic-select>
                      </el-form-item>
                    </el-col>-->
                    <el-col span="24">
                      <el-row>
                        <el-col span="12">
                          <el-form-item
                            label="货类"
                            prop="cargoType"
                            :rules="[
                              {
                                required: true,
                                message: ' ',
                                trigger: 'blur'
                              }
                            ]"
                          >
                            <el-select v-model="form.cargoType" placeholder="请选择 货类" :disabled="editDisabled" size="small" style="width: 100%;">
                              <el-option v-for="item in cargoTypeData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col span="12">
                          <el-form-item label="签单方式" prop="issueType">
                            <dic-select
                              v-model="form.issueType"
                              placeholder="签单方式"
                              key="dictKey"
                              label="dictValue"
                              keyValue="dictKey"
                              url="/blade-system/dict-biz/dictionary?code=issue_type_F"
                              :filterable="true"
                              :disabled="detailData.seeDisabled"
                              :initData="true"
                            ></dic-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="8">
                      <el-form-item
                        label="联系人"
                        prop="contact"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          size="small"
                          v-model="form.contact"
                          :disabled="editDisabled"
                          placeholder="文件联络人"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="8">
                      <el-form-item
                        label="邮箱"
                        prop="fileEmail"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          size="small"
                          v-model="form.fileEmail"
                          :disabled="editDisabled"
                          placeholder="文件联络人邮箱"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="8">
                      <el-form-item
                        label="电话"
                        prop="fileTel"
                        :rules="[
                          {
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input
                          style="width: 100%;"
                          size="small"
                          v-model="form.fileTel"
                          :disabled="editDisabled"
                          placeholder="文件联络人电话"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">
                      <el-form-item label="订舱备注" prop="cyRemarks">
                        <el-input
                          type="textarea"
                          style="width: 100%;"
                          v-model="form.cyRemarks"
                          size="small"
                          autocomplete="off"
                          :disabled="editDisabled"
                          :rows="2"
                          clearable
                          placeholder="请输入备注"
                          @change="textareaBlur('cyRemarks', $event)"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col span="12">
                      <el-form-item label="SI备注" prop="siRemarks">
                        <el-input
                          type="textarea"
                          style="width: 100%;"
                          v-model="form.siRemarks"
                          size="small"
                          autocomplete="off"
                          :disabled="editDisabled"
                          :rows="2"
                          clearable
                          placeholder="请输入备注"
                          @change="textareaBlur('siRemarks', $event)"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </trade-card>
          <trade-card title="集装箱">
            <avue-crud
              :option="option"
              :data="form.preContainersList"
              id="out-table"
              ref="crud"
              :header-cell-class-name="headerClassName"
              :row-style="{ height: '20px', padding: '0px' }"
              :cell-style="{ height: '20px', padding: '0px' }"
              @selection-change="selectionChange"
              @select="selectHandle"
              @row-update="rowUpdate"
              @resetColumn="resetColumn('crud', 'option', 'optionBack', 512)"
              @saveColumn="saveColumn('crud', 'option', 'optionBack', 512)"
            >
              <template slot="menuLeft">
                <el-button type="info" plain size="small" :disabled="editDisabled || !form.id" @click="allClick('一键保存')">一键保存</el-button>
                <el-button type="info" plain size="small" :disabled="editDisabled" @click="allClick('一键编辑')">一键编辑</el-button>
                <el-button type="danger" plain size="small" :disabled="editDisabled || selectionList.length == 0" @click="allClick('批量删除')"
                  >批量删除</el-button
                >
                <el-button v-if="form.issueStatus > 0" type="success" plain size="small" @click="allClick('提交箱型')">修改预配箱</el-button>
              </template>
              <template slot="indexHeader" slot-scope="{ row, index }">
                <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="editDisabled || !form.id" circle @click="addRow()"> </el-button>
              </template>
              <template slot="index" slot-scope="{ row, index }">
                <span>{{ index + 1 }}</span>
              </template>
              <tempalte slot="cntrTypeCodeForm" slot-scope="{ row, index }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.cntrTypeCode"
                  placeholder="箱型"
                  key="id"
                  label="cnName"
                  res="records"
                  url="/blade-los/bcntrtypes/list?current=1&size=5"
                  :filterable="true"
                  :remote="true"
                  dataName="cnName"
                  @selectChange="rowDicChange('cntrTypeCode', $event, row)"
                  :slotRight="true"
                  rightLabel="code"
                ></dic-select>
                <span v-else>{{ row.corpCnName }}</span>
              </tempalte>
            </avue-crud>
          </trade-card>
          <trade-card title="配箱信息">
            <DistributionBox
              :assemblyForm="form"
              :detailData="detailData"
              :showLock="showLock"
              :pleasereviewType="editDisabled"
              @billsAddfun="billsAddfun"
              @billsDetailfun="getDetails(form.id, true)"
            >
            </DistributionBox>
          </trade-card>
          <trade-card title="操作记录">
            <avue-form :option="optionForm2" v-model="form" ref="form2"> </avue-form>
          </trade-card>
        </el-tab-pane>
        <el-tab-pane label="费用信息" v-if="false">
          <el-card
            v-show="roleName.indexOf('admin') != -1 || roleName.indexOf('应付修改') != -1 ? true : roleName.indexOf('应付查看') != -1"
            class="box-card"
            style="margin: 2px 0"
          >
            <avue-crud
              :option="feecOption"
              :data="form.feeCenterListC"
              id="out-table"
              ref="crud2"
              :header-cell-class-name="headerClassName"
              :row-style="{ height: '20px' }"
              :cell-style="{ padding: '0px' }"
              @selection-change="feecChange"
              @row-update="rowUpdate"
              @resetColumn="resetColumn('crud2', 'feecOption', 'feecOptionBack', 235.2)"
              @saveColumn="saveColumn('crud2', 'feecOption', 'feecOptionBack', 235.2)"
            >
              <template slot="menuLeft">
                <div style="display: inline-block;margin-right: 20px" class="disabledBox meetSize">
                  <i class="el-icon-coin"></i>
                  <span>应付费用</span>
                </div>
                <el-button type="info" plain size="small" :disabled="editDisabled || !form.id" @click="allClick('费用一键保存')">一键保存</el-button>
                <el-button type="info" plain size="small" :disabled="editDisabled || !form.id" @click="allClick('费用一键编辑')">一键编辑</el-button>
                <el-button type="danger" plain size="small" :disabled="selectionfeecList.length == 0" @click="allClick('费用批量删除')"
                  >批量删除</el-button
                >
                <!-- <el-button type="primary" plain size="small" :disabled="selectionfeecList.length == 0"
                  @click="allClick('费用申请')">请核费用</el-button> -->
                <!-- <el-button type="primary" plain size="small" @click="$refs.printC.openDialog()">打印账单</el-button> -->
              </template>
              <template slot="indexHeader" slot-scope="{ row, index }">
                <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="editDisabled || !form.id" circle @click="feecAddRow()">
                </el-button>
              </template>
              <template slot="index" slot-scope="{ row, index }">
                <span>{{ index + 1 }}</span>
              </template>
              <template slot="corpTypeForm" slot-scope="{ row, index }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.corpType"
                  key="id"
                  label="cnName"
                  res="records"
                  url="/blade-los/bcorpstypedefine/list?status=0&current=1&size=20"
                  :filterable="true"
                  :remote="true"
                  dataName="cnName"
                  @selectChange="rowDicChange('corpType', $event, row, index)"
                ></dic-select>
                <span v-else>{{ row.corpType }}</span>
              </template>
              <template slot="cntrNoForm" slot-scope="{ row, index }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.cntrNo"
                  key="id"
                  label="code"
                  :mockData="form.tradingBoxItemsList"
                  :filterable="true"
                ></dic-select>
                <span v-else>{{ row.cntrNo }}</span>
              </template>
              <template slot="corpCnNameForm" slot-scope="{ row, index }">
                <dic-select
                  v-if="row.$cellEdit"
                  :key="row.corpType"
                  v-model="row.corpCnName"
                  placeholder="付费对象"
                  label="shortName"
                  res="records"
                  :url="'/blade-los/bcorps/selectList?status=0&current=1&size=5&corpTypeName=' + row.corpType"
                  :filterable="true"
                  :remote="true"
                  dataName="shortName"
                  @selectChange="rowDicChange('corpCnName', $event, row)"
                  :slotRight="true"
                  rightLabel="code"
                ></dic-select>
                <span v-else>{{ row.corpCnName }}</span>
                <!-- <dic-select v-if="row.$cellEdit" v-model="row.corpCnName" key="id" placeholder="付费对象" label="cnName"
                  res="records" url="/blade-los/bcorps/selectList?corpTypeName=船公司&status=0&current=1&size=20"
                  :filterable="true" :remote="true" dataName="cnName"
                  @selectChange="rowDicChange('corpCnName', $event, row)"></dic-select>
                <span v-else>{{ row.corpCnName }}</span> -->
              </template>
              <template slot="feeCnNameForm" slot-scope="{ row }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.feeCnName"
                  key="id"
                  placeholder="费用名称"
                  label="cnName"
                  res="records"
                  url="/blade-los/bfees/list?status=0&current=1&size=20"
                  :filterable="true"
                  :remote="true"
                  dataName="cnName"
                  @selectChange="rowDicChange('feeCnName', $event, row)"
                ></dic-select>
                <span v-else>{{ row.feeCnName }}</span>
              </template>
              <template slot="curCodeForm" slot-scope="{ row }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.curCode"
                  placeholder="币别"
                  label="code"
                  :url="'/blade-los/bcurrency/obtainRate?deptId=' + deptId + '&date=' + form.purchaseDate + '&type=1'"
                  :filterable="true"
                  @selectChange="rowDicChange('curCodeC', $event, row)"
                ></dic-select>
                <span v-else>{{ row.curCode }}</span>
              </template>
              <template slot="exrateForm" slot-scope="{ row }">
                <el-input-number
                  v-if="row.$cellEdit"
                  v-model="row.exrate"
                  :controls="false"
                  placeholder="请输入 汇率"
                  size="small"
                  style="width: 100%;"
                ></el-input-number>
                <span v-else>{{ row.exrate }}</span>
              </template>
              <template slot="unitNoForm" slot-scope="{ row, index }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.unitNo"
                  label="cnName"
                  url="/blade-los/bunits/listAll?status=0"
                  :filterable="true"
                ></dic-select>
                <span v-else>{{ row.unitNo }}</span>
              </template>
              <template slot="priceForm" slot-scope="{ row }">
                <el-input-number
                  v-if="row.$cellEdit"
                  v-model="row.price"
                  :controls="false"
                  placeholder="请输入 成本价"
                  size="small"
                  style="width: 100%;"
                  :precision="2"
                  @change="countChange(row)"
                ></el-input-number>
                <span v-else>{{ row.price }}</span>
              </template>
              <template slot="quantityForm" slot-scope="{ row }">
                <el-input-number
                  v-if="row.$cellEdit"
                  v-model="row.quantity"
                  :controls="false"
                  placeholder="请输入 成本价"
                  size="small"
                  style="width: 100%;"
                  :precision="0"
                  @change="countChange(row)"
                ></el-input-number>
                <span v-else>{{ row.quantity }}</span>
              </template>
              <template slot="remarks" slot-scope="{ row }">
                <el-input v-if="row.$cellEdit" v-model="row.remarks" placeholder="请输入 备注" size="small" style="width: 100%;"></el-input>
                <span v-else>{{ row.remarks }}</span>
              </template>
              <template slot="menu" slot-scope="{ row, index }">
                <el-button size="small" icon="el-icon-delete" type="text" @click="polRowDel(row, index)">删 除</el-button>
              </template>
            </avue-crud>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="文件中心">
          <containerTitle title="上传附件"></containerTitle>
          <c-upload
            :data="form.filesList"
            :enumerationValue="76"
            deleteUrl="/api/blade-los/filescenter/remove"
            display
            :disabled="editButton"
          ></c-upload>
        </el-tab-pane>
      </el-tabs>
    </div>
    <business-reports :id="form.id" ref="print" businessValue="KHTS" :type="true"></business-reports>
    <reports :id="form.id" :assemblyForm="form" businessValue="KHTS" ref="report"></reports>
    <!--审核弹窗-->
    <el-dialog
      append-to-body
      title="审批进度"
      class="el-dialogDeep"
      :visible.sync="checkScheduleDialog"
      width="40%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      v-dialog-drag
    >
      <check-schedule :checkId="checkId" :batchNo="batchNo" @choceScheduleFun="choceScheduleFun"></check-schedule>
    </el-dialog>
    <freight-rate ref="freightRate" @importData="importData" />
    <import-temp ref="importTemp" @importData="importTemp"></import-temp>
    <!--导入模板-->
    <el-dialog title="导入模板" append-to-body :visible.sync="excelBox" width="555px" :close-on-click-modal="false" v-dialog-drag>
      <avue-form v-if="excelBox" :option="excelOption" v-model="excelForm" :upload-before="uploadBefore" :upload-after="onSuccess"> </avue-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  submit,
  getDetail,
  submitConfirm,
  submitCustomerBooking,
  revokeCustomerBooking,
  submitBookingCabin,
  sendMessageBooking,
  copyAgent,
  pleaseCheck,
  repealCancel,
  submitItemList,
  itemRemove,
  submitFeeList,
  itemFeeRemove,
  getBCorps,
  submitCommonTemplates,
  submitBoxType,
  refundCabin
} from "@/api/iosBasicData/businessCenter/bookingCabin.js";
import dicSelect from "@/components/dicSelect/main";
import checkSchedule from "@/components/checkH/checkSchedule.vue";
import businessReports from "@/components/boxManagement/businessReportsTS.vue";
import reports from "@/components/boxManagement/reportsTS.vue";
import freightRate from "./components/freightRate.vue";
import importTemp from "./components/importTemp.vue";
import DistributionBox from "./components/DistributionBox.vue";
import { billsAdd, deptGetDetailPol } from "@/api/iosBasicData/bills";
import { getDicinit } from "@/api/dicSelect/index";
import _ from "lodash";
import { Header } from "element-ui";
import { dateFormat } from "@/util/date";
import { isProcurement } from "@/api/basicData/configuration";
import { verifyEnglish, checkFullWidthSymbols } from "@/util/date";
export default {
  name: "detailsPage",
  data() {
    return {
      cargoTypeData: [
        {
          label: "普货",
          value: "dry"
        },
        {
          label: "危险品",
          value: "danger"
        },
        {
          label: "冻柜",
          value: "reefer"
        }
      ],
      excelForm: {},
      excelLoading: false,
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "api/blade-los/templateImport/importOne"
          }
        ]
      },
      excelBox: false,
      imporiData: [
        // { id: 0, name: '导入 ONE 模板' },
        // { id: 1, name: '导入 PIL 订舱模板' },
        // { id: 2, name: '导入截单格式' },
        // { id: 3, name: '导入海信提单' },
        { id: 4, name: "提单样本" }
      ],
      importTemplate: null,
      selectionTemplateList: [],
      selectionfeecList: [],
      feeType: null,
      treeOption: {
        nodeKey: "id",
        // lazy: true,
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "cnName",
          value: "value",
          children: "children"
        }
      },
      templateData: [],
      templateList: [],
      templateOption: {
        height: 500,
        menu: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        header: false,
        index: true,
        selection: true,
        column: [
          {
            label: "费用",
            prop: "feeCnName",
            overHidden: true
          },
          {
            label: "成本价",
            prop: "price",
            overHidden: true
          },
          {
            label: "币别",
            prop: "curCode",
            overHidden: true
          },
          {
            label: "汇率",
            prop: "curCode",
            overHidden: true
          }
        ]
      },
      templateDialog: false,
      selectionList: [],
      selectionPolList: [],
      selectionPodList: [],
      checkId: "", // 审核需要的id
      batchNo: "",
      checkScheduleDialog: false, // 审核弹窗
      isSaveBtn: false,
      editButton: false,
      editDisabled: false,
      form: {
        branchId: JSON.parse(localStorage.getItem("sysitemData")).deptId,
        branchName: JSON.parse(localStorage.getItem("sysitemData")).deptName,
        // customerServiceName: JSON.parse(localStorage.getItem('sysitemData')).name, // OP 默认登录人
        // customerServiceId: JSON.parse(localStorage.getItem('sysitemData')).id,
        businessType: "KHTS",
        billNoFormat: "KHTS",
        businessTypeCode: "KHTS",
        boxBelongsTo: "SOC",
        cargoType: "dry",
        issueType: "TER", // 签单方式 默认 正本提单
        bookingDate: dateFormat(new Date()),
        polId: null,
        polCode: null,
        polEnName: null,
        polCnName: null,
        polNamePrint: null,
        podId: null,
        podCode: null,
        podEnName: null,
        podCnName: null,
        podNamePrint: null,
        placeDeliveryId: null,
        placeDeliveryCode: null,
        placeDeliveryName: null,
        placeDeliveryNamePrint: null,
        serviceTerms: "CY-CY",
        mpaymode: "PP",
        srcType: "SALES",
        srcId: JSON.parse(localStorage.getItem("sysitemData")).id,
        srcEnName: JSON.parse(localStorage.getItem("sysitemData")).name,
        srcCnName: JSON.parse(localStorage.getItem("sysitemData")).name,
        polFreeBoxUseDays: 7,
        podFreeBoxUseDays: 14,
        loadType: "整箱", // 装箱方式默认整箱
        detail: {},
        preContainersList: [],
        feeCenterListC: [],
        filesList: []
      },
      polFeeList: [],
      podFeeList: [],
      oldForm: {},
      optionForm2: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "系统号",
            prop: "billNo",
            disabled: true
          },
          // {
          //   label: 'B/L NO',
          //   prop: "hblno",
          //   disabled: true,
          // },
          // {
          //   label: '船名',
          //   prop: "vesselCnName",
          //   disabled: true,
          // },
          // {
          //   label: '航次',
          //   prop: "voyageNo",
          //   disabled: true,
          // },
          {
            label: "截单日期",
            prop: "cyTrailerTime",
            disabled: true,
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            label: "截港日期",
            prop: "cyReturnTime",
            disabled: true,
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          // {
          //   label: '系统号',
          //   prop: "businessNo",
          //   disabled: true,
          // },
          {
            label: "制单人",
            prop: "createUserName",
            disabled: true
          },
          {
            label: "制单日期",
            prop: "createTime",
            disabled: true
          },
          {
            label: "修改人",
            prop: "updateUserName",
            disabled: true
          },
          {
            label: "修改日期",
            prop: "updateTime",
            disabled: true
          }
        ]
      },
      option: {},
      optionBack: {
        // height: 'auto',
        calcHeight: 30,
        menuWidth: 60,
        tip: false,
        border: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        selection: true,
        align: "center",
        menu: false,
        column: [
          {
            label: "index",
            prop: "index",
            width: "55",
            fixed: true,
            headerslot: true
          },
          {
            label: "箱型",
            prop: "cntrTypeCode",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请选择箱型",
                trigger: "blur"
              }
            ]
          },
          {
            label: "箱量",
            prop: "quantity",
            overHidden: true,
            cell: true,
            rules: [
              {
                required: true,
                message: "请选择箱型",
                trigger: "blur"
              }
            ]
          }
        ]
      },
      feecOption: {},
      feecOptionBack: {
        // height: 'auto',
        maxHeight: "250",
        calcHeight: 30,
        menuWidth: 60,
        tip: false,
        border: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        selection: true,
        align: "center",
        menu: false,
        summaryText: "合计",
        showSummary: true,
        sumColumnList: [
          {
            name: "amountCNY",
            type: "sum",
            decimals: 2
          },
          {
            name: "amountUSD",
            type: "sum",
            decimals: 2
          },
          {
            name: "appliedInvoiceAmount",
            type: "sum",
            decimals: 2
          },
          {
            name: "uninvoicedAmount",
            type: "sum",
            decimals: 2
          },
          {
            name: "stlTtlAmount",
            type: "sum",
            decimals: 2
          }
        ],
        column: [
          {
            label: "index",
            prop: "index",
            width: "55",
            fixed: true,
            headerslot: true
          },
          // {
          //   label: '账单状态',
          //   prop: 'accStatus',
          //   overHidden: true,
          //   width: 80,
          //   type: 'select',
          //   dicData: [{
          //     label: '未生成',
          //     value: 0,
          //   }, {
          //     label: '已生成',
          //     value: 1,
          //   }],
          // },
          // {
          //   label: '审核状态',
          //   prop: 'auditStatus',
          //   overHidden: true,
          //   width: 80,
          //   type: 'select',
          //   dicData: [{
          //     label: '录入',
          //     value: '0',
          //   }, {
          //     label: '提交审核',
          //     value: '1',
          //   }, {
          //     label: '审核中',
          //     value: '2',
          //   }, {
          //     label: '审核通过',
          //     value: '4',
          //   }],
          // },
          {
            label: "类别",
            prop: "corpType",
            width: 100,
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请选择类别",
                trigger: "blur"
              }
            ]
          },
          {
            label: "付费对象",
            prop: "corpCnName",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请选择付费对象",
                trigger: "blur"
              }
            ]
          },
          // {
          //   label: "箱号",
          //   prop: "cntrNo",
          //   width: "100",
          //   cell: true,
          //   slot: true,
          //   formslot: true,
          //   overHidden: true,
          // },
          {
            label: "费用名称",
            prop: "feeCnName",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请选择费用名称",
                trigger: "blur"
              }
            ]
          },
          {
            label: "计量单位",
            prop: "unitNo",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true
          },
          {
            label: "币别",
            prop: "curCode",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请选择币别",
                trigger: "blur"
              }
            ]
          },
          {
            label: "汇率",
            prop: "exrate",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true
          },

          {
            label: "单价",
            prop: "price",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请输入单价",
                trigger: "blur"
              }
            ]
          },
          {
            label: "数量",
            prop: "quantity",
            width: "100",
            overHidden: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: "请输入数量",
                trigger: "blur"
              }
            ]
          },
          {
            label: "本币",
            prop: "amountCNY",
            width: "100",
            overHidden: true
          },
          {
            label: "外币",
            prop: "amountUSD",
            width: "100",
            overHidden: true
          },
          {
            label: "申请发票金额",
            prop: "appliedInvoiceAmount",
            width: "120",
            overHidden: true
          },
          {
            label: "已开票金额",
            prop: "uninvoicedAmount",
            width: "120",
            overHidden: true
          },
          {
            label: "已结算金额",
            prop: "stlTtlAmount",
            width: "120",
            overHidden: true
          },
          {
            label: "制单人",
            prop: "createUserName",
            width: "100",
            overHidden: true
          },
          {
            label: "制单日期",
            prop: "createTime",
            width: "120",
            overHidden: true
          },
          {
            label: "修改人",
            prop: "updateUserName",
            width: "100",
            overHidden: true
          },
          {
            label: "修改日期",
            prop: "updateTime",
            width: "120",
            overHidden: true
          },
          {
            label: "备注",
            prop: "remarks",
            // cell: true,
            width: 150,
            overHidden: true
          }
        ]
      },
      roleName: [],
      saberUserInfo: null,
      deptId: JSON.parse(localStorage.getItem("sysitemData")).deptId,
      flxDisabled: true,
      verifySymbolStatus: 0
    };
  },
  components: {
    dicSelect,
    checkSchedule,
    businessReports,
    reports,
    freightRate,
    DistributionBox,
    importTemp
  },
  props: {
    detailData: Object,
    pageIds: {
      type: Array, // 指定 prop 的类型为 Array
      default: () => [] // 提供一个默认值，这里使用函数形式返回一个空数组
    }
  },
  async created() {
    this.saberUserInfo = JSON.parse(localStorage.getItem("saber-userInfo")).content;
    this.roleName = localStorage.getItem("roleName").split(",");
    this.option = await this.getColumnData(this.getColumnName(512), this.optionBack);
    this.feecOption = await this.getColumnData(this.getColumnName(235.2), this.feecOptionBack);
    this.saveLocalCurrency(JSON.parse(localStorage.getItem("sysitemData")).deptId);
    isProcurement({ param: "import.template" }).then(res => {
      this.importTemplate = res.data.data;
    });
    isProcurement({ param: "verify.symbol" }).then(res => {
      this.verifySymbolStatus = res.data.data;
    });
    if (this.detailData && this.detailData.id) {
      this.getDetails(this.detailData.id);
    }
    if (this.$route.query.billId) {
      this.getDetails(this.$route.query.billId);
    }
    if (this.detailData && this.detailData.copyId) {
      this.getCopydate(this.detailData.copyId);
    }
    if (this.detailData.type == "new") {
      if (this.roleName.includes("客户")) {
        let obj = {
          userId: JSON.parse(localStorage.getItem("sysitemData")).id
        };
        getBCorps(obj).then(res => {
          this.form.corpId = res.data.data.id;
          this.form.corpCode = res.data.data.code;
          this.form.corpEnName = res.data.data.enName;
          this.form.corpCnName = res.data.data.cnName;
          this.form.shortName = res.data.data.shortName;
        });
      }
      deptGetDetailPol(this.saberUserInfo.dept_pid.split(",")[0]).then(res => {
        // 装货港
        this.form.polCnName = res.data.data.polCnName;
        this.form.polEnName = res.data.data.polEnName;
        this.form.polId = res.data.data.polId;
        this.form.polCode = res.data.data.polCode;
        this.form.polNamePrint = res.data.data.polEnName;
      });
    }

    this.saveLocalCurrency(this.deptId);
  },
  methods: {
    importTemp(val) {
      delete val.hblno;
      delete val.version;
      delete val.billNo;
      delete val.issueStatus;
      delete val.confirmStatus;
      delete val.detail.id;
      delete val.detail.pid;
      if (this.form.issueStatus == 1 || this.form.issueStatus == 2) {
        delete val.preContainersList;
      }
      const obj = this.deepClone(this.form);
      this.form = {
        ...obj,
        ...val,
        detail: {
          ...obj.detail,
          ...val.detail
        }
      };
    },
    lastPage() {
      if (this.pageIds.length) {
        const index = this.pageIds.indexOf(this.form.id);
        if (index == 0) {
          return this.$message.error("没有上一票了");
        }
        const lastIndex = index - 1;
        // if (this.form.id) {
        //     this.unLock({
        //         moduleName: "SE",
        //         tableName: "SE_order",
        //         billId: this.form.id,
        //         billNo: this.form.mblno
        //     });
        // }
        this.getDetails(this.pageIds[lastIndex]);
      }
    },
    nextPage() {
      if (this.pageIds.length) {
        const index = this.pageIds.indexOf(this.form.id);
        if (this.pageIds[this.pageIds.length - 1] == this.form.id) {
          return this.$message.error("没有下一票了");
        }
        const nextIndex = index + 1;
        // if (this.form.id) {
        //     this.unLock({
        //         moduleName: "SE",
        //         tableName: "SE_order",
        //         billId: this.form.id,
        //         billNo: this.form.mblno
        //     });
        // }
        this.getDetails(this.pageIds[nextIndex]);
      }
    },
    // 提取箱专用的保存
    billsAddfun() {
      billsAdd(this.form).then(res => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.getDetails(this.form.id);
      });
    },
    //文档导入
    importData2(row) {
      if (row == 0) {
        this.excelOption.column[0].action = `/api/blade-los/templateImport/importOne?billId=${this.form.id}`;
      } else if (row == 1) {
        this.excelOption.column[0].action = `/api/blade-los/templateImport/importPilBooking?billId=${this.form.id}`;
      } else if (row == 2) {
        this.excelOption.column[0].action = `/api/blade-los/templateImport/importPilCutOffOrders?billId=${this.form.id}`;
      } else if (row == 3) {
        this.excelOption.column[0].action = `/api/blade-los/templateImport/importHisenseBill?billId=${this.form.id}`;
      } else if (row == 4) {
        this.excelOption.column[0].action = `/api/blade-los/templateImport/importBookingCabin`;
      }
      this.excelBox = true;
    },
    // 上传成功
    onSuccess(res, done, loading, column) {
      loading = true;
      if (Object.keys(res).length) {
        //   loading = false;
        this.$confirm("此操作将覆盖数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // this.form = res;
            Object.keys(res).forEach(key => {
              if (res[key]) {
                if (key != "detail") {
                  // this.form[key] = res[key]
                  this.$set(this.form, key, res[key]);
                }
                if (key == "detail") {
                  Object.keys(res.detail).forEach(key => {
                    if (res.detail[key]) {
                      // this.form.detail[key] = res.detail[key]
                      this.$set(this.form.detail, key, res.detail[key]);
                    }
                  });
                }
              }
            });
            this.excelBox = false;
            this.$message.success("导入成功！");
            loading = false;
            done();
          })
          .catch(() => {
            this.excelBox = false;
            loading = false;
            done();
          });
      } else {
        loading = false;
        done();
      }
    },
    countChange(row) {
      if (row.curCode == this.getLocalCurrency()) {
        row.amountCNY = _.round(_.multiply(row.price, row.quantity), 2);
        row.amountUSD = 0;
      } else {
        row.amountCNY = 0;
        row.amountUSD = _.round(_.multiply(row.price, row.quantity), 2);
      }
    },
    importData(row) {
      this.form.preContainersList.forEach(item => {
        if (item.cntrTypeCode == "20GP") {
          item.salesPrice = row.gp20;
          item.costPrice = row.gp20Cost;
        }
        if (item.cntrTypeCode == "40GP") {
          item.salesPrice = row.gp40;
          item.costPrice = row.gp40Cost;
        }
        if (item.cntrTypeCode == "40HC") {
          item.salesPrice = row.hc40;
          item.costPrice = row.hc40Cost;
        }
      });
      this.submit();
    },
    textareaBlur(name, row) {
      this.form.detail[name] = row.toUpperCase();
    },
    textareaBlur2(name, row) {
      this.form[name] = row.toUpperCase();
    },
    rowDicChange(name, row, el, index) {
      if (name == "cntrTypeCode") {
        if (row) {
          if (this.form.preContainersList.filter(item => item.cntrTypeCode == row.cnName).length > 1) {
            el.cntrTypeCodeId = null;
            el.cntrTypeCode = null;
            el.teu = null;
            return this.$message.error("箱型不能重复");
          }
          el.cntrTypeCodeId = row.id;
          el.teu = row.teu;
        } else {
          el.cntrTypeCodeId = null;
          el.cntrTypeCode = null;
          el.teu = null;
        }
      }
      if (name == "curCodeC") {
        if (row) {
          el.exrate = row.exratePayable;
          this.countChange(el);
        } else {
          el.exrate = null;
          el.amountCNY = 0;
          el.amountUSD = 0;
        }
      }
      if (name == "feeCnName") {
        if (row) {
          el.feeId = row.id;
          el.feeCode = row.code;
        } else {
          el.feeId = null;
          el.feeCode = null;
          el.feeCnName = null;
        }
      }
      if (name == "corpType") {
        el.corpId = null;
        el.corpCode = null;
        el.shortName = null;
        el.corpCnName = null;
        el.corpEnName = null;
      }
      if (name == "corpCnName") {
        if (row) {
          el.corpId = row.id;
          el.corpCode = row.code;
          el.shortName = row.shortName;
          el.corpEnName = row.enName;
        } else {
          el.corpId = null;
          el.corpCode = null;
          el.shortName = null;
          el.corpCnName = null;
          el.corpEnName = null;
        }
      }
    },
    async dicChange(name, row) {
      if (name == "packingUnit") {
        if (row) {
          this.form.packingUnitId = row.id;
        } else {
          this.form.branchId = null;
          this.form.packingUnit = null;
        }
      }
      if (name == "branchName") {
        if (row) {
          this.form.branchId = row.id;
        } else {
          this.form.branchId = null;
          this.form.branchName = null;
        }
      }
      if (name == "corpCnName") {
        if (row) {
          this.form.corpId = row.id;
          this.form.corpCode = row.code;
          this.form.corpEnName = row.enName;
          this.form.shortName = row.shortName;
        } else {
          this.form.corpId = null;
          this.form.corpCode = null;
          this.form.corpCnName = null;
          this.form.corpEnName = null;
          this.form.shortName = null;
        }
      }
      if (name == "operatorName") {
        if (row) {
          this.form.operatorName = row.realName;
          this.form.operatorId = row.id;
        } else {
          this.form.operatorName = null;
          this.form.operatorId = null;
        }
      }
      if (name == "customerServiceName") {
        if (row) {
          this.form.customerServiceId = row.id;
          this.form.srcId = row.id;
          this.form.srcEnName = row.name;
          this.form.srcCnName = row.name;
        } else {
          this.form.customerServiceName = null;
          this.form.customerServiceId = null;
          this.form.srcId = null;
          this.form.srcEnName = null;
          this.form.srcCnName = null;
        }
      }
      if (name == "polCnName") {
        if (row) {
          this.form.polId = row.id;
          this.form.polCode = row.code;
          this.form.polEnName = row.enName;
          // this.form.polNamePrint = row.enName;
          if (this.form.polNamePrint) {
            this.$confirm("是否覆盖内容?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.form.polNamePrint = row.enName;
                this.$refs.pol.$refs.mySelect.blur();
              })
              .catch(() => {
                this.$refs.pol.$refs.mySelect.blur();
              });
          } else {
            this.form.polNamePrint = row.enName;
          }
        } else {
          this.form.polId = null;
          this.form.polCode = null;
          this.form.polEnName = null;
          this.form.polCnName = null;
          this.form.polNamePrint = null;
        }
      }
      if (name == "podCnName") {
        if (row) {
          this.form.podId = row.id;
          this.form.podCode = row.code;
          this.form.podEnName = row.enName;
          // this.form.podNamePrint = row.enName;
          if (this.form.podNamePrint) {
            this.$confirm("是否覆盖内容?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.form.podNamePrint = row.enName;
                this.$refs.pod.$refs.mySelect.blur();
              })
              .catch(() => {
                this.$refs.pod.$refs.mySelect.blur();
              });
          } else {
            this.form.podNamePrint = row.enName;
          }
        } else {
          this.form.podId = null;
          this.form.podCode = null;
          this.form.podEnName = null;
          this.form.podCnName = null;
          this.form.podNamePrint = null;
        }
      }
      if (name == "placeDeliveryName") {
        if (row) {
          this.form.placeDeliveryId = row.id;
          this.form.placeDeliveryCode = row.code;
          this.form.podEnName = row.enName;
          // this.form.placeDeliveryNamePrint = row.enName;
          if (this.form.placeDeliveryNamePrint) {
            this.$confirm("是否覆盖内容?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.form.placeDeliveryNamePrint = row.enName;
                this.$refs.placeDelivery.$refs.mySelect.blur();
              })
              .catch(() => {
                this.$refs.placeDelivery.$refs.mySelect.blur();
              });
          } else {
            this.form.placeDeliveryNamePrint = row.enName;
          }
        } else {
          this.form.placeDeliveryId = null;
          this.form.placeDeliveryCode = null;
          // this.form.podEnName = null
          this.form.placeDeliveryName = null;
          this.form.placeDeliveryNamePrint = null;
        }
      }
      if (name == "srcType") {
        this.form.srcId = null;
        this.form.srcEnName = null;
        this.form.srcCnName = null;
      }
      if (name == "OWN") {
        if (row) {
          this.form.srcId = row.id;
          this.form.srcEnName = row.title;
          this.form.srcCnName = row.title;
        } else {
          this.form.srcId = null;
          this.form.srcEnName = null;
          this.form.srcCnName = null;
        }
      }
      if (name == "AGENT") {
        if (row) {
          this.form.srcId = row.id;
          this.form.srcEnName = row.cnName;
          this.form.srcCnName = row.cnName;
        } else {
          this.form.srcId = null;
          this.form.srcEnName = null;
          this.form.srcCnName = null;
        }
      }
      if (name == "SALES") {
        if (row) {
          this.form.srcId = row.id;
          this.form.srcEnName = row.name;
          this.form.srcCnName = row.name;
        } else {
          this.form.srcId = null;
          this.form.srcEnName = null;
          this.form.srcCnName = null;
        }
      }
      if (name == "ETD") {
        if (row) {
          await this.checkRate(null, row, null, 1, this.deptId);
          this.form.feeCenterListC.forEach(item => {
            item.exrate = this.getExchangeRate(item.curCode, "C", 1);
          });
        }
      }
    },
    rowEdit(row) {},
    addRow() {
      if (!this.form.id) {
        return this.$message.error("请保存数据");
      }
      this.form.preContainersList.push({
        pid: this.form.id,
        $cellEdit: true,
        oceanFreight: 0,
        salesPrice: 0
      });
    },
    async feecAddRow() {
      if (!this.form.id) {
        return this.$message.error("请保存数据");
      }
      await this.checkRate(null, this.form.purchaseDate, null, 1, this.deptId);
      this.form.feeCenterListC.push({
        pid: this.form.id,
        dc: "C",
        paymode: "C",
        sort: Number(this.form.feeCenterListC.length) + 1,
        businessType: this.form.businessType, // 业务类型
        billType: this.form.billType, // 单据类型
        billNo: this.form.billNo, // 单据编号
        billDate: this.form.etd,
        branchId: this.form.branchId,
        branchName: this.form.branchName,
        corpId: this.form.corpId,
        shortName: this.form.shortName,
        corpCnName: this.form.corpCnName,
        corpEnName: this.form.corpCnName,
        etd: this.form.etd, // 开船日期
        polId: this.form.polId, // 装货港 id
        polCode: this.form.polCode, // 装货港代码
        polCnName: this.form.polCnName, // 装货港中文名称
        polEnName: this.form.polEnName, // 装货港英文名称
        podId: this.form.podId, // 卸货港 id
        podCode: this.form.podCode, // 卸货港代码
        podCnName: this.form.podCnName, // 卸货港中文名称
        podEnName: this.form.podEnName, // 卸货港英文名称
        curCode: this.getLocalCurrency(),
        exrate: this.getExchangeRate(this.getLocalCurrency(), "C", 1),
        $cellEdit: true
      });
    },
    templateChange(list) {
      this.selectionTemplateList = list;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    feecChange(list) {
      let ids = [];
      list.forEach(e => {
        ids.push(e.id);
      });
      if (ids.length) {
        this.itemCIds = ids.join(",");
      } else {
        this.itemCIds = null;
      }
      this.selectionfeecList = list;
    },
    getDetails(id, type) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      getDetail({ id: id })
        .then(res => {
          res.data.data.feeCenterListC.forEach(row => {
            if (row.curCode == this.getLocalCurrency()) {
              row.amountCNY = row.amount;
              row.amountUSD = 0;
            }
            if (row.curCode != this.getLocalCurrency()) {
              row.amountUSD = row.amount;
              row.amountCNY = 0;
            }
          });
          this.form = res.data.data;
          if (!type) {
            if (res.data.data.issueStatus == 1 || res.data.data.issueStatus == 2 || res.data.data.confirmStatus == 1) {
              this.isSaveBtn = true;
              this.editDisabled = true;
              this.optionForm.disabled = true;
            } else {
              this.editDisabled = false;
              this.optionForm.disabled = false;
            }
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    getCopydate(id) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      copyAgent({ id: id })
        .then(res => {
          this.form = res.data.data;
        })
        .finally(() => {
          loading.close();
        });
    },
    inEdit() {
      this.editButton = false;
      if (this.form.status == "录入") {
        this.editDisabled = false;
        this.optionForm.disabled = false;
      }
    },
    allClick(name) {
      if (name == "提取价格") {
        let obj = {
          polId: this.form.polId,
          podId: this.form.podId,
          // actualShippingCompanyId: this.selectionList[0].carrierId,
          etd: this.form.etd
        };
        this.$refs.freightRate.openDialog(obj);
      }
      if (name == "预定订舱") {
        this.$confirm("是否发送消息?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          sendMessageBooking(this.form)
            .then(res => {
              this.$message.success("操作成功");
              this.getDetails(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
      }
      if (name == "生成订单") {
        if (!this.form.preContainersList.length) {
          return this.$message.error("集装箱明细不能为空");
        }
        if (this.form.status != 3) {
          for (let item of this.form.preContainersList) {
            if (!item.id) {
              return this.$message.error("请保存数据");
            }
            if (Number(item.oceanFreight) < Number(item.salesPrice)) {
              return this.$message.error("集装箱的海运费低于销售价,请点击运费申请");
            }
          }
        }
        this.$confirm("是否生成订单?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          for (let row of this.form.preContainersList) {
            if (!row.cntrTypeCode || !row.quantity) {
              this.$refs.crud.rowCell(row, row.$index);
              return this.$message.error("请完善明细信息");
            }
          }
          this.form.businessType = "KHTS";
          this.form.billNoFormat = "KHTS";
          this.form.businessTypeCode = "KHTS";
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          submitBookingCabin(this.form)
            .then(res => {
              this.$message.success("操作成功");
              this.getDetails(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
      }
      if (name == "一键保存") {
        if (!this.form.preContainersList.length) {
          return this.$message.error("请添加数据");
        }
        for (let row of this.form.preContainersList) {
          if (!row.cntrTypeCode || !row.quantity) {
            this.$refs.crud.rowCell(row, row.$index);
            return this.$message.error("请完善明细信息");
          }
        }
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(255,255,255,0.7)"
        });
        submitItemList(this.form.preContainersList)
          .then(res => {
            this.$message.success("保存成功");
            this.form.preContainersList = res.data.data;
          })
          .finally(() => {
            loading.close();
          });
      }
      if (name == "一键编辑") {
        for (let row of this.form.preContainersList) {
          this.$set(row, "$cellEdit", true);
        }
      }
      if (name == "批量删除") {
        let multiList = [];
        let arr = [];
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          multiList = this.selectionList;
          arr = this.form.preContainersList;
          // 获取有id 的数据
          const itemsWithId = multiList.filter(item => item.id != null);
          let arrIds = itemsWithId.map(item => item.id); // 获取id 数据
          // 把选中的删除掉
          multiList.forEach(item => {
            for (let index in arr) {
              if (JSON.stringify(item) == JSON.stringify(arr[index])) {
                arr.splice(Number(index), 1);
              }
            }
          });
          if (itemsWithId.length != 0) {
            const loading = this.$loading({
              lock: true,
              text: "加载中",
              spinner: "el-icon-loading",
              background: "rgba(255,255,255,0.7)"
            });
            itemRemove({ ids: arrIds.join(",") })
              .then(res => {
                this.$message.success("删除成功");
              })
              .finally(() => {
                loading.close();
              });
          }
        });
      }
      if (name == "提交箱型") {
        this.$confirm("是否提交箱型?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {
            id: this.form.id
          };
          submitBoxType(obj).then(res => {
            this.$message.success("操作成功");
            this.getDetails(this.form.id);
          });
        });
      }
      if (name == "费用一键保存") {
        if (!this.form.feeCenterListC.length) {
          return this.$message.error("请添加数据");
        }
        for (let row of this.form.feeCenterListC) {
          row.amount = row.curCode == this.getLocalCurrency() ? row.amountCNY : row.amountUSD;
          row.amountNet = row.curCode == this.getLocalCurrency() ? row.amountCNY : row.amountUSD;
          if (!row.corpType || !row.corpCnName || !row.feeCnName || !row.curCode || !row.price || !row.quantity) {
            this.$refs.crud2.rowCell(row, row.$index);
            return this.$message.error("请完善费用明细");
          }
        }
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(255,255,255,0.7)"
        });
        submitFeeList(this.form.feeCenterListC)
          .then(res => {
            this.$message.success("保存成功");
            this.getDetails(this.form.id);
          })
          .finally(() => {
            loading.close();
          });
      }
      if (name == "费用一键编辑") {
        for (let row of this.form.feeCenterListC) {
          this.$set(row, "$cellEdit", true);
        }
      }
      if (name == "费用批量删除") {
        // for (let row of this.selectionfeecList) {
        //   if (row.automaticGenerated == 1) {
        //     return this.$message.error("系统自动生成的费用不允许删除");
        //   }
        //   if (row.stlPid && row.accStatus != 0) {
        //     return this.$message.error("已生成账单，不允许删除");
        //   }
        //   if (row.stlPid && row.auditStatus != 0) {
        //     return this.$message.error("已申请费用，不允许删除");
        //   }
        // }
        let multiList = [];
        let arr = [];
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          multiList = this.selectionfeecList;
          arr = this.form.feeCenterListC;
          // 获取有id 的数据
          const itemsWithId = multiList.filter(item => item.id != null);
          let arrIds = itemsWithId.map(item => item.id); // 获取id 数据
          // 把选中的删除掉
          multiList.forEach(item => {
            for (let index in arr) {
              if (JSON.stringify(item) == JSON.stringify(arr[index])) {
                arr.splice(Number(index), 1);
              }
            }
          });
          if (itemsWithId.length != 0) {
            const loading = this.$loading({
              lock: true,
              text: "加载中",
              spinner: "el-icon-loading",
              background: "rgba(255,255,255,0.7)"
            });
            itemFeeRemove({ ids: arrIds.join(",") })
              .then(res => {
                this.$message.success("删除成功");
              })
              .finally(() => {
                loading.close();
              });
          }
        });
      }
      if (name == "提交订舱") {
        if (this.verifySymbolStatus == 1) {
          if (checkFullWidthSymbols(this.form.detail.hshipperDetails).hasFullWidth) {
            let msg = [];
            for (let item of checkFullWidthSymbols(this.form.detail.hshipperDetails).positions) {
              msg.push(`第${item.row}行的"${item.symbol}"`);
            }
            this.$message({
              dangerouslyUseHTMLString: true,
              message: `发货人:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
              type: "error"
            });
            return;
          }
          if (checkFullWidthSymbols(this.form.detail.hconsigneeDetails).hasFullWidth) {
            let msg = [];
            for (let item of checkFullWidthSymbols(this.form.detail.hconsigneeDetails).positions) {
              msg.push(`第${item.row}行的"${item.symbol}"`);
            }
            this.$message({
              dangerouslyUseHTMLString: true,
              message: `收货人:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
              type: "error"
            });
            return;
          }
          if (checkFullWidthSymbols(this.form.detail.hnotifyDetails).hasFullWidth) {
            let msg = [];
            for (let item of checkFullWidthSymbols(this.form.detail.hnotifyDetails).positions) {
              msg.push(`第${item.row}行的"${item.symbol}"`);
            }
            this.$message({
              dangerouslyUseHTMLString: true,
              message: `通知人:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
              type: "error"
            });
            return;
          }
          if (checkFullWidthSymbols(this.form.marks).hasFullWidth) {
            let msg = [];
            for (let item of checkFullWidthSymbols(this.form.marks).positions) {
              msg.push(`第${item.row}行的"${item.symbol}"`);
            }
            this.$message({
              dangerouslyUseHTMLString: true,
              message: `唛头:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
              type: "error"
            });
            return;
          }
          if (checkFullWidthSymbols(this.form.commodityDescr).hasFullWidth) {
            let msg = [];
            for (let item of checkFullWidthSymbols(this.form.commodityDescr).positions) {
              msg.push(`第${item.row}行的"${item.symbol}"`);
            }
            this.$message({
              dangerouslyUseHTMLString: true,
              message: `货描:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
              type: "error"
            });
            return;
          }
        }
        if (!this.form.preContainersList.length) {
          return this.$message.error("集装箱明细不能为空");
        }
        let htmlText = [];
        for (let item of this.form.preContainersList) {
          if (!item.id) {
            return this.$message.error("请保存数据");
          }
          if (!item.cntrTypeCode || !item.quantity) {
            this.$refs.crud.rowCell(item, item.$index);
            return this.$message.error("请完善明细信息");
          }
          htmlText.push(item.cntrTypeCode + "*" + item.quantity);
        }
        for (let item of this.form.containersList) {
          if (!item.id) {
            return this.$message.error("请保存数据");
          }
        }
        submit(this.form).then(res => {
          this.$confirm(`预定集装箱:${htmlText.join(",")}<br/>是否提交订舱?`, {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            dangerouslyUseHTMLString: true,
            type: "warning"
          }).then(() => {
            this.form.businessType = "KHTS";
            this.form.billNoFormat = "KHTS";
            this.form.businessTypeCode = "KHTS";
            const loading = this.$loading({
              lock: true,
              text: "加载中",
              spinner: "el-icon-loading",
              background: "rgba(255,255,255,0.7)"
            });
            submitCustomerBooking(this.form)
              .then(res => {
                this.$message.success("操作成功");
                this.getDetails(this.form.id);
              })
              .finally(() => {
                loading.close();
              });
          });
        });
      }
      if (name == "撤销订舱") {
        this.$confirm("是否撤销订舱?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          revokeCustomerBooking(this.form)
            .then(res => {
              this.$message.success("操作成功");
              this.getDetails(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
      }
      if (name == "提单修改") {
        this.flxDisabled = false;
        this.isSaveBtn = false;
        this.editDisabled = false;
        this.optionForm.disabled = false;
      }
      if (name == "提单确认") {
        if (this.form.containersList.length == 0) {
          return this.$message.error("配箱信息不能为空");
        }
        for (let item of this.form.containersList) {
          let textList = [];
          if (!item.cntrTypeCode) {
            textList.push("箱型");
          }
          if (!item.cntrNo) {
            textList.push("箱号");
          }
          if (!item.sealNo) {
            textList.push("封号");
          }
          if (!item.quantity || Number(item.quantity) == 0) {
            textList.push("件数");
          }
          if (!item.grossWeight || Number(item.grossWeight) == 0) {
            textList.push("毛重");
          }
          if (!item.measurement || Number(item.measurement) == 0) {
            textList.push("尺码/体积");
          }
          if (textList.length) {
            return this.$message.error(`请完善配箱信息的${textList.join(",")}!`);
          }
        }
        submit(this.form).then(res => {
          this.form = res.data.data;
          this.$confirm("是否提单确认?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: "加载中",
              spinner: "el-icon-loading",
              background: "rgba(255,255,255,0.7)"
            });
            submitConfirm(this.form)
              .then(res => {
                this.$message.success("操作成功");
                this.getDetails(this.form.id);
              })
              .finally(() => {
                loading.close();
              });
          });
        });
      }
      if (name == "模板保存") {
        this.$DialogForm.show({
          title: "订舱模板",
          width: "30%",
          // data: this.assemblyForm.hmmEdi,
          menuPosition: "right",
          option: {
            submitText: "确定",
            emptyText: "取消",
            column: [
              {
                label: "模板名称",
                span: 24,
                prop: "templatesName",
                rules: [
                  {
                    required: true,
                    message: "请输入模板名称",
                    trigger: "blur"
                  }
                ]
              }
            ]
          },
          beforeClose: done => {
            done();
          },
          callback: res => {
            res.done();
            console.log(res);
            this.form.businessType = "KHDC";
            this.form.billNoFormat = "DCMB";
            this.form.businessTypeCode = "KHDC";
            let obj = {
              ...this.form,
              templatesName: res.data.templatesName
            };
            const loading = this.$loading({
              lock: true,
              text: "加载中",
              spinner: "el-icon-loading",
              background: "rgba(255,255,255,0.7)"
            });
            submitCommonTemplates(obj)
              .then(res => {
                this.$message.success("操作成功");
              })
              .finally(() => {
                loading.close();
              });
            res.close();
          }
        });
      }
      if (name == "导入模板") {
        this.$refs.importTemp.openDialog();
      }
      if (name == "退舱") {
        this.$confirm("是否退舱?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          refundCabin(this.form)
            .then(res => {
              this.$message.success("操作成功");
              this.getDetails(this.form.id);
            })
            .finally(() => {
              loading.close();
            });
        });
      }
    },
    submit(type) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.form.detail.hshipperDetails) {
            return this.$message.error("请输入发货人提单描述");
          }
          if (!this.form.detail.hconsigneeDetails) {
            return this.$message.error("请输入收货人提单描述");
          }
          if (!this.form.detail.hnotifyDetails) {
            return this.$message.error("请输入通知人提单描述");
          }
          if (this.verifySymbolStatus == 1) {
            if (checkFullWidthSymbols(this.form.detail.hshipperDetails).hasFullWidth) {
              let msg = [];
              for (let item of checkFullWidthSymbols(this.form.detail.hshipperDetails).positions) {
                msg.push(`第${item.row}行的"${item.symbol}"`);
              }
              this.$message({
                dangerouslyUseHTMLString: true,
                message: `发货人:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
                type: "error"
              });
              return;
            }
            if (checkFullWidthSymbols(this.form.detail.hconsigneeDetails).hasFullWidth) {
              let msg = [];
              for (let item of checkFullWidthSymbols(this.form.detail.hconsigneeDetails).positions) {
                msg.push(`第${item.row}行的"${item.symbol}"`);
              }
              this.$message({
                dangerouslyUseHTMLString: true,
                message: `收货人:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
                type: "error"
              });
              return;
            }
            if (checkFullWidthSymbols(this.form.detail.hnotifyDetails).hasFullWidth) {
              let msg = [];
              for (let item of checkFullWidthSymbols(this.form.detail.hnotifyDetails).positions) {
                msg.push(`第${item.row}行的"${item.symbol}"`);
              }
              this.$message({
                dangerouslyUseHTMLString: true,
                message: `通知人:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
                type: "error"
              });
              return;
            }
            if (checkFullWidthSymbols(this.form.marks).hasFullWidth) {
              let msg = [];
              for (let item of checkFullWidthSymbols(this.form.marks).positions) {
                msg.push(`第${item.row}行的"${item.symbol}"`);
              }
              this.$message({
                dangerouslyUseHTMLString: true,
                message: `唛头:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
                type: "error"
              });
              return;
            }
            if (checkFullWidthSymbols(this.form.commodityDescr).hasFullWidth) {
              let msg = [];
              for (let item of checkFullWidthSymbols(this.form.commodityDescr).positions) {
                msg.push(`第${item.row}行的"${item.symbol}"`);
              }
              this.$message({
                dangerouslyUseHTMLString: true,
                message: `货描:<br>${msg.join(";<br>")}<br>存在全角或汉字符号、汉字,请确认`,
                type: "error"
              });
              return;
            }
          }

          for (let row of this.form.preContainersList) {
            if (!row.cntrTypeCode || !row.quantity) {
              this.$refs.crud.rowCell(row, row.$index);
              return this.$message.error("请完善明细信息");
            }
          }
          // for (let row of this.form.feeCenterListC) {
          //   row.amount = row.curCode == this.getLocalCurrency() ? row.amountCNY : row.amountUSD
          //   row.amountNet = row.curCode == this.getLocalCurrency() ? row.amountCNY : row.amountUSD
          //   if (!row.corpType || !row.corpCnName || !row.feeCnName || !row.curCode || !row.price || !row.quantity) {
          //     this.$refs.crud2.rowCell(row, row.$index)
          //     return this.$message.error("请完善费用明细");
          //   }
          // }
          this.form.billDate = this.form.etd;
          this.form.businessType = "KHTS";
          this.form.billNoFormat = "KHTS";
          this.form.businessTypeCode = "KHTS";
          // this.form.billNoFormat = 'COC'
          // this.form.businessTypeCode = 'COC'
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          submit(this.form)
            .then(res => {
              this.$message.success("保存成功");
              this.getDetails(res.data.data.id);
            })
            .finally(() => {
              loading.close();
            });
        } else {
          return false;
        }
      });
    },
    application() {
      if (!this.form.preContainersList.length) {
        return this.$message.error("集装箱明细不能为空");
      }
      this.$confirm("是否提单确认?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let obj = {};
        obj = {
          id: this.form.id,
          url: "/iosBasicData/businessCenter/customerBooking/index",
          pageStatus: "",
          pageLabel: "客户订舱 "
        };
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(255,255,255,0.7)"
        });
        pleaseCheck(obj)
          .then(res => {
            this.$message.success("请核成功");
            this.getDetails(res.data.data.id);
          })
          .finally(() => {
            loading.close();
          });
      });
    },
    revokeApplication() {
      this.$confirm("确定撤销请核?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let obj = {};
        obj = {
          id: this.form.id
        };
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(255,255,255,0.7)"
        });
        repealCancel(obj)
          .then(res => {
            this.$message.success("撤销请核成功");
            this.getDetails(res.data.data.id);
            this.editDisabled = false;
            this.optionForm.disabled = false;
          })
          .finally(() => {
            loading.close();
          });
      });
    },
    //请核关闭
    choceScheduleFun() {
      this.checkScheduleDialog = false;
    },
    //自定义列保存
    async saveColumn(ref, option, optionBack, code) {
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    // 更改表格颜色
    headerClassName(tab) {
      //颜色间隔
      let back = "";
      if (tab.columnIndex >= 0 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one";
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two";
        }
      }
      return back;
    },
    goBack(type) {
      if (this.form.issueStatus > 0 && this.form.whetherModify == 0) {
        for (let item of this.form.preContainersList) {
          const names = item.cntrTypeCode + "+" + item.quantity;
          if (names != item.whetherModifyJson) {
            return this.$message.error("请提交箱型");
          }
        }
      }
      this.$emit("goBack");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error {
  display: none !important;
}

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

::v-deep .el-table .cell {
  padding: 0 2px !important;

  .el-form-item {
    margin-bottom: 0px !important;
  }
}

::v-deep .avue-crud .el-table .el-form-item__label {
  left: -1px;
}

// ::v-deep#out-table .back-one {
//     background: #ecf5ff !important;
// }

// ::v-deep#out-table .back-two {
//     background: #ecf5ff !important;
// }

::v-deep #out-table .back-one {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}

::v-deep #out-table .back-two {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}

::v-deep .el-table--small td,
.el-table--small th {
  padding: 2px !important;
}

::v-deep .el-card__body {
  padding: 3px 10px;
}

::v-deep .box-card .el-card__body {
  padding: 4px !important;
}

::v-deep .el-form-item__content {
  line-height: 32px !important;
}

.disabledBox {
  display: flex;
  align-items: center;
}

.meetSize {
  font-size: 16px;
  color: #54bcbd;
}
</style>