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) && form.hblno" 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) && form.hblno" 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 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"
                          :slotRight="true" rightLabel="code"></dic-select>
                        <el-input style="width: 100%;" v-model="form.polNamePrint" size="small" :disabled="editDisabled"
                          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 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"
                          :slotRight="true" rightLabel="code"></dic-select>
                        <el-input style="width: 100%;" v-model="form.podNamePrint" size="small" :disabled="editDisabled"
                          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 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" :slotRight="true" rightLabel="code"></dic-select>
                        <el-input style="width: 100%;" v-model="form.placeDeliveryNamePrint" size="small"
                          :disabled="editDisabled" 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-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-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";
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,
    }
  },
  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
    })
    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 ? res.data.data.polCnName.split(",")[0] : null
        this.form.polEnName = res.data.data.polEnName ? res.data.data.polEnName.split(",")[0] : null
        this.form.polId = res.data.data.polId ? res.data.data.polId.split(",")[0] : null
        this.form.polCode = res.data.data.polCode ? res.data.data.polCode.split(",")[0] : null
        this.form.polNamePrint = res.data.data.polEnName ? res.data.data.polEnName.split(",")[0] : null
      })
    }

    this.saveLocalCurrency(this.deptId)
  },
  methods: {
    importTemp(val) {
      console.log(val)
      this.form = val
    },
    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 == '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
        } 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
        } 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
        } 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.form.preContainersList.length) {
          return this.$message.error("集装箱明细不能为空");
        }
        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("请完善明细信息");
          }
        }
        for (let item of this.form.containersList) {
          if (!item.id) {
            return this.$message.error("请保存数据");
          }
        }
        this.$confirm("是否提交订舱?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          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.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(',')}!`);
          }
        }
        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.$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("请输入通知人提单描述");
            }
            for (let row of this.form.preContainersList) {
              if (!row.cntrTypeCode || !row.quantity) {
                this.$refs.crud.rowCell(row, row.$index)
                return this.$message.error("请完善明细信息");
              }
            }
            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()
              }
            })
          } else {
            return false;
          }
        });
      }
      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("请输入通知人提单描述");
          }
          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.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>