yf-admin-ui/src/views/boxManagement/buyContainer/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>
      </div>
      <div class="add-customer-btn">
        <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" v-else style="margin-left: 6px;" type="primary" size="small"
          :disabled="isSaveBtn" @click="submit">保 存
        </el-button>
        <!-- <el-button v-if="form.status == '审核提交'" class="el-button--small-yh" style="margin-left: 6px;" type="danger"
          size="small" @click="revokeApplication">撤销单据请核
        </el-button> -->
        <!-- <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="基础信息">
            <avue-form :option="optionForm" v-model="form" ref="form">
              <tempalte slot="purchaseCompanyName">
                <dic-select v-model="form.purchaseCompanyName" placeholder="出售方" label="shortName" res="records"
                  url="/blade-los/bcorps/selectList?status=0&current=1&size=5&corpTypeName=箱东" :filterable="true"
                  :remote="true" dataName="shortName" @selectChange="dicChange('purchaseCompanyName', $event)"
                  :disabled="editDisabled || form.tradingBoxItemsList.length" :slotRight="true"
                  rightLabel="code"></dic-select>
              </tempalte>
              <tempalte slot="addressCname">
                <dic-select v-model="form.addressCname" placeholder="港口" label="cnName" res="records"
                  url="/blade-los/bports/list?status=0&current=1&size=5" :filterable="true" :remote="true"
                  dataName="cnName" @selectChange="dicChange('addressCname', $event)"
                  :disabled="editDisabled || form.tradingBoxItemsList.length" :slotRight="true"
                  rightLabel="code"></dic-select>
              </tempalte>
              <tempalte slot="stationCname">
                <dic-select v-model="form.stationCname" placeholder="场站" :key="updateFormKey" label="cnName"
                  res="records"
                  :url="'/blade-los/bcorps/selectList?current=1&size=5&corpTypeName=场站&status=0&ids=' + (form.cyText ? form.cyText : '')"
                  :filterable="true" :remote="true" dataName="cnName" @selectChange="dicChange('stationCname', $event)"
                  :disabled="editDisabled || !form.addressId || form.tradingBoxItemsList.length" :slotRight="true"
                  rightLabel="code"></dic-select>
              </tempalte>
            </avue-form>
          </trade-card>
          <trade-card title="箱明细">
            <avue-crud :option="option" :data="form.tradingBoxItemsList" 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', 235.1)"
              @saveColumn="saveColumn('crud', 'option', 'optionBack', 235.1)">
              <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 || form.tradingBoxItemsList.length == 0"
                  @click="allClick('一键编辑')">一键编辑</el-button>
                <el-button type="danger" plain size="small" :disabled="editDisabled || selectionList.length == 0"
                  @click="allClick('批量删除')">批量删除</el-button>
                <el-button type="success" size="small" @click="allClick('导入')"
                  :disabled="!form.id || form.whetherEnable == '是'">导入</el-button>
                <el-button type="info" size="small" @click="allClick('启用')"
                  :disabled="selectionList.length == 0">启用</el-button>
                <!-- <el-button type="primary" size="small" @click="allClick('卖箱')">卖箱</el-button> -->
                <el-button size="small" style="margin-right: 8px" :disabled="!form.id || true"
                  @click="$refs.print.openDialog()">打印报表
                </el-button>
                <span style="margin: 0 20px;color:#67C23A;">
                  金额合计(CNY):{{ CNYSUM }}
                </span>
                <span style="margin: 0 20px;color:#F56C6C;">
                  金额合计(USD):{{ USDSUM }}
                </span>

              </template>
              <template slot="indexHeader" slot-scope="{row,index}">
                <el-button type="primary" size="mini" icon="el-icon-plus"
                  :disabled="editDisabled || form.whetherEnable == '是'" circle @click="addRow()">
                </el-button>
              </template>
              <template slot="index" slot-scope="{row,index}">
                <span>{{ index + 1 }}</span>
              </template>
              <template slot="boxTypeForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.boxType" key="id" label="cnName" res="records"
                  url="/blade-los/bcntrtypes/list?status=0&current=1&size=20" :filterable="true" :remote="true"
                  dataName="cnName" @selectChange="rowDicChange('boxType', $event, row)"></dic-select>
                <span v-else>{{ row.boxType }}</span>
              </template>
              <template slot="currencyForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.currency" placeholder="币别" label="code"
                  :url="'/blade-los/bcurrency/getExrate?date=' + form.purchaseDate + '&dc=C'" :filterable="true"
                  @selectChange="rowDicChange('currency', $event, row)"></dic-select>
                <span v-else>{{ row.currency }}</span>
              </template>
              <tempalte slot="originalBoxEastNameForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.originalBoxEastName" placeholder="箱东" key="id"
                  label="shortName" res="records"
                  url="/blade-los/bcorps/selectList?status=0&current=1&size=5&corpTypeName=箱东" :filterable="true"
                  :remote="true" dataName="shortName" @selectChange="rowDicChange('originalBoxEastName', $event, row)"
                  :slotRight="true" rightLabel="code">
                </dic-select>
                <span v-else>{{ row.originalBoxEastName }}</span>
              </tempalte>
              <tempalte slot="stationCnameForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.stationCname" placeholder="场站" key="id" label="cnName"
                  res="records" url="/blade-los/bcorps/selectList?status=0&current=1&size=5&corpTypeName=场站&status=0"
                  :filterable="true" :remote="true" dataName="cnName"
                  @selectChange="rowDicChange('stationCname', $event, row)" :slotRight="true"
                  rightLabel="code"></dic-select>
                <span v-else>{{ row.stationCname }}</span>
              </tempalte>
              <tempalte slot="restrictedPortsNameForm" slot-scope="{ row }">
                <dic-select v-show="row.$cellEdit" v-model="row.restrictedPortsName" placeholder="港口" key="id"
                  label="cnName" url="/blade-los/bports/listAll?status=0" :filterable="true" :multiple="true"
                  :collapseTags="true" @selectChange="rowDicChange('restrictedPortsName', $event, row)"
                  dataType="string" :slotRight="true" rightLabel="code"></dic-select>
                <span v-show="!row.$cellEdit">{{ row.restrictedPortsName }}</span>
              </tempalte>
              <tempalte slot="restrictingShippingCompaniesNameForm" slot-scope="{ row }">
                <dic-select v-show="row.$cellEdit" v-model="row.restrictingShippingCompaniesName" placeholder="船公司"
                  key="id" label="cnName" url="/blade-los/bcorps/listAll?corpTypeName=船公司&status=0" :filterable="true"
                  :multiple="true" :collapseTags="true"
                  @selectChange="rowDicChange('restrictingShippingCompaniesName', $event, row)" dataType="string"
                  :slotRight="true" rightLabel="code"></dic-select>
                <span v-show="!row.$cellEdit">{{ row.restrictingShippingCompaniesName }}</span>
              </tempalte>
            </avue-crud>
          </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="费用信息">
          <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.feeCenterList" 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"
                  @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 || selectionfeecList.length == 0"
                  @click="allClick('费用批量删除')">批量删除</el-button>
                <el-button type="primary" plain size="small" :disabled="editDisabled || 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" circle
                  @click="feecAddRow()">
                </el-button>
              </template>
              <template slot="index" slot-scope="{row,index}">
                <span>{{ index + 1 }}</span>
              </template>
              <template slot="billTypeForm" slot-scope="{row,index}">
                <dic-select v-if="row.$cellEdit && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  v-model="row.billType" 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('billType', $event, row, index)"></dic-select>
                <span v-else>{{ row.billType }}</span>
              </template>
              <template slot="cntrNoForm" slot-scope="{row,index}">
                <dic-select v-if="row.$cellEdit && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  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 && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  :key="updateSearchKey" v-model="row.corpCnName" placeholder="付费对象" label="shortName" res="records"
                  :url="'/blade-los/bcorps/selectList?status=0&current=1&size=5&corpTypeName=' + row.billType"
                  :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 && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  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)"
                  disabledLabel="押金,租箱费"></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/getExrate?date=' + form.purchaseDate + '&dc=C'" :filterable="true"
                  @selectChange="rowDicChange('curCode', $event, row)"></dic-select>
                <span v-else>{{ row.curCode }}</span>
              </template>
              <template slot="exrateForm" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  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 && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  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 && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  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 && !(row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ')"
                  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="menu" slot-scope="{ row, index }">
                <el-button size="small" icon="el-icon-delete" type="text" :disabled="editDisabled"
                  @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.tradingBoxFilesList" :enumerationValue="76"
            deleteUrl="/api/blade-los/tradingBoxFiles/remove" display :disabled="editButton"></c-upload>
        </el-tab-pane>
      </el-tabs>
    </div>
    <business-reports :id="form.id" :itemIds="itemIds" ref="print" businessValue="MYDL" :type="true"></business-reports>
    <business-reports :id="form.id" :itemIds="itemCIds" ref="printC" businessValue="MYDL" classifyCode="费用"
      groupCode="应付" :selecList="selectionfeecList"></business-reports>
    <reports :id="form.id" :assemblyForm="form" businessValue="MYDL" 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>
    <!-- 启用 -->
    <el-dialog append-to-body title="放箱号" :visible.sync="activationDialog" width="30%" :before-close="activationClose"
      v-dialog-drag>
      <span>
        <avue-form ref="form2" v-model="activationForm" :option="activationOption">
          <tempalte slot="polCname">
            <dic-select v-model="activationForm.polCname" placeholder="港口" key="id" label="cnName" res="records"
              url="/blade-los/bports/list?status=0" :filterable="true" :remote="true" dataName="cnName"
              @selectChange="dicChange('polCname', $event)"></dic-select>
          </tempalte>
          <tempalte slot="polStationCname">
            <dic-select v-model="activationForm.polStationCname" placeholder="场站" :key="updateStationKey" label="cnName"
              res="records" :slotRight="true" rightLabel="code"
              :url="'/blade-los/bcorps/selectList?current=1&size=5&corpTypeName=场站&status=0&ids=' + (form.cyTextOne ? form.cyTextOne : '')"
              :filterable="true" :remote="true" dataName="cnName" @selectChange="dicChange('polStationCname', $event)"
              :disabled="editDisabled || !activationForm.polCname"></dic-select>
          </tempalte>
          <tempalte slot="podCname">
            <dic-select v-model="activationForm.podCname" placeholder="港口" key="id" label="cnName" res="records"
              url="/blade-los/bports/list?status=0" :filterable="true" :remote="true" dataName="cnName"
              @selectChange="dicChange('podCname', $event)" :disabled="editDisabled"></dic-select>
          </tempalte>
        </avue-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="activationDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click.stop="activationSubmit" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="导入数据" append-to-body :visible.sync="excelBox" width="555px" :close-on-click-modal="false"
      v-dialog-drag>
      <avue-form :option="excelOption" v-model="excelForm" :table-loading="excelLoading" :upload-before="uploadBefore"
        :upload-after="onSuccess">
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleGet">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
      <p style="text-align: center;color: #DC0505">
        温馨提示 第一次导入时请先下载模板
      </p>
    </el-dialog>
  </div>
</template>

<script>
import {
  detail,
  submit,
  pleaseCheck,
  repealCancel,
  tradingBoxItem,
  tradingBoxFees,
  submitItemList,
  submitFeeList,
  enable,
  copyAgent,
  pleaseVerifyCost
} from "@/api/boxManagement/buyContainer/index.js";
import dicSelect from "@/components/dicSelect/main";
import checkSchedule from "@/components/checkH/checkSchedule.vue";
import businessReports from "@/components/tradeAgency/businessReports.vue";
import reports from "@/components/tradeAgency/reports.vue";
import { bcurrencyGetExrate } from "@/api/iosBasicData/rateManagement";
import { getToken } from "@/util/auth";
import _ from "lodash";
import { Header } from "element-ui";
import { fromPairs } from "lodash";
export default {
  name: "detailsPage",
  data() {
    return {
      CNYSUM: 0,
      USDSUM: 0,
      excelBox: false,
      excelForm: {},
      excelLoading: false,
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24
          },
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/blade-los/tradingBoxItem/importBoxItem"
          }
        ]
      },
      activationForm: {},
      activationOption: {
        menuBtn: false,
        span: 6,
        disabled: false,
        column: [
          {
            label: '放箱号',
            prop: 'containerNumber',
            span: 24,
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
          },
          {
            label: '起运港',
            prop: 'polCname',
            span: 24,
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
          },
          {
            label: '起运港场站',
            prop: 'polStationCname',
            span: 24,
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
          },
          {
            label: '目的港',
            prop: 'podCname',
            span: 24,
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
          },
          {
            label: '启用日期',
            prop: 'activationDate',
            span: 24,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            rules: [{
              required: true,
              message: "",
              trigger: "blur"
            }]
          },
        ]
      },
      activationDialog: false,
      itemCIds: null,
      feeType: null,
      selectionList: [],
      selectionfeecList: [],
      checkId: '', // 审核需要的id
      batchNo: '',
      checkScheduleDialog: false, // 审核弹窗
      editButton: false,
      editDisabled: false,
      form: {
        type: "BUY",
        agreement: '到协议场站',
        boxCondition: '新',
        log: '否',
        tradingBoxItemsList: [],
        feeCenterList: [],
        tradingBoxFilesList: [],
      },
      oldForm: {},
      optionForm: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: '出售方',
            prop: 'purchaseCompanyName',
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
            disabled: false
          },
          {
            label: '合同号',
            prop: 'contractNo',
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
            disabled: false
          },
          {
            label: '购买日期',
            prop: 'purchaseDate',
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }],
            disabled: false
          },
          {
            label: '箱型箱量',
            prop: 'boxTypeQuantityOne',
            disabled: false
          },
          {
            label: '箱型箱量2',
            prop: 'boxTypeQuantityTwo',
            disabled: false
          },
          {
            label: '提/送箱',
            prop: 'agreement',
            disabled: false,
            type: 'select',
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=agreement",
            props: {
              label: "dictValue",
              value: "dictValue"
            },
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }]
          },
          {
            label: '港口',
            prop: 'addressCname',
            disabled: false,
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }]
          },
          {
            label: '场站',
            prop: 'stationCname',
            disabled: false,
          },
          {
            label: '箱况',
            prop: 'boxCondition',
            disabled: false,
            type: 'select',
            dicData: [{
              label: '新',
              value: '新',
            }, {
              label: '旧',
              value: '旧',
            }],
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }]
          },
          {
            label: 'LOGO',
            prop: 'log',
            disabled: false,
            type: 'select',
            dicData: [{
              label: '是',
              value: '是',
            }, {
              label: '否',
              value: '否',
            }]
          },
          {
            label: '备注',
            prop: 'remarks',
            type: 'textarea',
            minRows: 2,
            span: 6
          }]
      },
      optionForm2: {
        menuBtn: false,
        span: 5,
        disabled: true,
        labelWidth: 100,
        column: [
          {
            label: '系统号',
            prop: 'sysNo',
            disabled: true
          },
          {
            label: '制单人',
            prop: "createUserName",
            disabled: true,
            span: 4,
          },
          {
            label: '制单日期',
            prop: "createTime",
            disabled: true,
          },
          {
            label: '修改人',
            prop: "updateUserName",
            disabled: true,
            span: 4,
          },
          {
            label: '修改日期',
            prop: "updateTime",
            disabled: true,
          }
        ]
      },
      option: {},
      optionBack: {
        // height: 'auto',
        calcHeight: 30,
        menuWidth: 60,
        searchMenuSpan: 18,
        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",
            headerslot: true,
          },
          {
            label: "是否启用",
            prop: "whetherEnable",
            overHidden: true,
          },
          {
            label: '放箱号',
            prop: 'containerNumber',
            overHidden: true,
            width: 100,
          },
          {
            label: '箱号',
            prop: 'code',
            width: 140,
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入箱号",
              trigger: "blur"
            }]
          },
          {
            label: '箱型',
            prop: 'boxType',
            width: 100,
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择箱型",
              trigger: "blur"
            }]
          },
          {
            label: '箱属',
            prop: 'boxBelongsTo',
            overHidden: true,
            // cell: true,
            // width: 100,
            // type: 'select',
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=boxBelongsTo",
            // props: {
            //   label: "dictValue",
            //   value: "dictValue"
            // },
            // rules: [{
            //   required: true,
            //   message: "请选择箱属",
            //   trigger: "blur"
            // }]
          },
          {
            label: '放箱号类型',
            prop: 'boxCategory',
            overHidden: true,
            cell: true,
            width: 100,
            type: 'select',
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=boxCategory",
            props: {
              label: "dictValue",
              value: "dictValue"
            },
            rules: [{
              required: true,
              message: "请选择放箱号类型",
              trigger: "blur"
            }]
          },
          {
            label: '箱况',
            prop: 'boxCondition',
            overHidden: true,
            cell: true,
            width: 100,
            type: 'select',
            dicData: [{
              label: '新',
              value: '新',
            }, {
              label: '旧',
              value: '旧',
            }],
            rules: [{
              required: true,
              message: "请选择箱况",
              trigger: "blur"
            }]
          },
          {
            label: '箱状态',
            prop: 'status',
            width: 100,
            overHidden: true,
          },
          {
            label: '箱好坏',
            prop: 'boxStatus',
            width: 100,
            overHidden: true,
          },
          {
            label: '箱动态',
            prop: 'boxDynamics',
            width: 100,
            overHidden: true,
          },
          {
            label: '金额',
            prop: 'amount',
            cell: true,
            type: 'number',
            controls: false,
            overHidden: true,
            width: 100,
            rules: [{
              required: true,
              message: "请输入金额",
              trigger: "blur"
            }]
          },
          {
            label: '币别',
            prop: 'currency',
            width: 100,
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择币别",
              trigger: "blur"
            }]
          },
          {
            label: '汇率',
            prop: 'exrate',
            cell: true,
            type: 'number',
            controls: false,
            overHidden: true,
            width: 100,
            rules: [{
              required: true,
              message: "请输入汇率",
              trigger: "blur"
            }]
          },
          {
            label: '箱东',
            prop: 'boxEastName',
            overHidden: true,
            width: 100,
          },
          {
            label: '原箱东',
            prop: 'originalBoxEastName',
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            width: 100,
          },
          {
            label: '场站',
            prop: 'stationCname',
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            width: 100,
          },
          {
            label: '限制港口',
            prop: 'restrictedPortsName',
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            width: 200,
          },
          {
            label: '限制船公司',
            prop: 'restrictingShippingCompaniesName',
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            width: 200,
          },
          {
            label: '启用日期',
            prop: 'activationDate',
            // cell: true,
            overHidden: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "制单人",
            prop: "createUserName",
            overHidden: true,
          },
          {
            label: "制单日期",
            prop: "createTime",
            type: "date",
            overHidden: true,
            width: 120,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            label: "修改人",
            prop: "updateUserName",
            overHidden: true,
          },
          {
            label: "修改日期",
            prop: "updateTime",
            type: "date",
            overHidden: true,
            width: 120,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            label: '备注',
            prop: 'remarks',
            cell: true,
            width: 150,
            overHidden: true,
          }]
      },
      feecOption: {},
      feecOptionBack: {
        // 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,
        summaryText: "合计",
        showSummary: true,
        sumColumnList: [
          {
            name: 'amount',
            type: 'sum',
            decimals: 2
          },
          {
            name: 'amountLoc',
            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",
            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: "billType",
            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: "amount",
            width: "100",
            overHidden: true,
          },
          {
            label: "外币金额",
            prop: "amountLoc",
            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,
            overHidden: true
          }
        ]
      },
      roleName: [],
      updateSearchKey: new Date().getTime(),
      updateFormKey: new Date().getTime(),
      updateStationKey: new Date().getTime(),
    }
  },
  components: {
    dicSelect,
    checkSchedule,
    businessReports,
    reports
  },
  props: {
    detailData: Object
  },
  async created() {
    this.roleName = localStorage.getItem('roleName').split(',')
    this.option = await this.getColumnData(this.getColumnName(235.1), this.optionBack);
    this.feecOption = await this.getColumnData(this.getColumnName(235.2), this.feecOptionBack);
    if (this.detailData.id) {
      // this.editButton = true
      // this.editDisabled = true
      // this.optionForm.disabled = true
      this.getDetail(this.detailData.id)
    }
    if (this.detailData.copyId) {
      this.getCopydate(this.detailData.copyId)
    }
  },
  methods: {
    countChange(row) {
      if (row.curCode == 'CNY') {
        row.amount = _.round(_.multiply(row.price, row.quantity), 2)
        row.amountLoc = 0
      } else {
        row.amount = 0
        row.amountLoc = _.round(_.multiply(row.price, row.quantity), 2)
      }
    },
    activationSubmit() {
      this.$refs["form2"].validate((valid, done) => {
        done();
        if (valid) {
          let obj = {
            id: this.form.id,
            ...this.activationForm,
            tradingBoxItemsList: this.selectionList
          }
          const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.7)'
          });
          enable(obj).then(res => {
            this.$message.success("操作成功！");
            this.getDetail(this.form.id)
            this.activationDialog = false
          }).finally(() => {
            loading.close();
          })
        } else {
          return false;
        }
      });


    },
    uploadBefore(file, done, loading) {
      done();
      loading = true;
    },
    // 上传成功
    onSuccess(res, done, loading, column) {
      if (res.length > 0) {
        this.$message.success("上传成功！");
      }
      this.excelBox = false;
      // this.$message.success("导入成功！");
      this.getDetail(this.form.id)
      loading = false;
      done();
    },
    // 下载模板
    handleGet() {
      window.open(
        `/api/blade-los/tradingBoxItem/boxItemTemplate?${this.website.tokenHeader
        }=${getToken()}`
      );
    },
    dicChange(name, row) {
      if (name == 'purchaseCompanyName') {
        if (row) {
          this.form.purchaseCompanyId = row.id
        } else {
          this.form.purchaseCompanyId = null
          this.form.purchaseCompanyName = null
        }
      }
      if (name == 'addressCname') {
        if (row) {
          this.form.addressId = row.id
          this.form.addressCode = row.code
          this.form.addressEname = row.enName
          this.form.cyText = row.addressId
          this.form.stationId = null
          this.form.stationCode = null
          this.form.stationCname = null
          this.form.stationEname = null
          this.updateFormKey = new Date().getTime()
        } else {
          this.form.addressId = null
          this.form.addressCode = null
          this.form.addressEname = null
          this.form.addressCname = null
          this.form.cyText = null
          this.form.stationId = null
          this.form.stationCode = null
          this.form.stationCname = null
          this.form.stationEname = null
        }
      }
      if (name == 'stationCname') {
        if (row) {
          this.form.stationId = row.id
          this.form.stationCode = row.code
          this.form.stationEname = row.enName
        } else {
          this.form.stationId = null
          this.form.stationCode = null
          this.form.stationCname = null
          this.form.stationEname = null
        }
      }
      // if (name == 'podCname') {
      //   if (row) {
      //     this.form.podId = row.id
      //     this.form.podCode = row.code
      //     this.form.podEname = row.enName
      //   } else {
      //     this.form.podId = null
      //     this.form.podCode = null
      //     this.form.podEname = null
      //     this.form.podCname = null
      //   }
      // }
      if (name == 'polCname') {
        if (row) {
          this.activationForm.polId = row.id
          this.activationForm.polCode = row.code
          this.activationForm.polEname = row.enName
          this.form.cyTextOne = row.addressId
          this.activationForm.polStationId = null
          this.activationForm.polStationCode = null
          this.activationForm.polStationCname = null
          this.activationForm.polStationEname = null
          this.updateStationKey = new Date().getTime()
        } else {
          this.activationForm.polId = null
          this.activationForm.polCode = null
          this.activationForm.polEname = null
          this.activationForm.polCname = null
          this.form.cyTextOne = null
          this.activationForm.polStationId = null
          this.activationForm.polStationCode = null
          this.activationForm.polStationCname = null
          this.activationForm.polStationEname = null
        }
      }
      if (name == 'polStationCname') {
        if (row) {
          this.activationForm.polStationId = row.id
          this.activationForm.polStationCode = row.code
          this.activationForm.polStationEname = row.enName
        } else {
          this.activationForm.polStationId = null
          this.activationForm.polStationCode = null
          this.activationForm.polStationCname = null
          this.activationForm.polStationEname = null
        }
      }
      if (name == 'podCname') {
        if (row) {
          this.activationForm.podId = row.id
          this.activationForm.podCode = row.code
          this.activationForm.podEname = row.enName
        } else {
          this.activationForm.podId = null
          this.activationForm.podCode = null
          this.activationForm.podEname = null
          this.activationForm.podCname = null
        }
      }
    },
    rowDicChange(name, row, el, index) {
      if (name == 'currency') {
        if (row) {
          bcurrencyGetExrate({ date: this.form.purchaseDate, dc: 'C' }).then(res => {
            res.data.data.forEach(e => {
              if (el.currency == e.code) {
                this.$set(el, 'exrate', e.exrate)
              }
            })
          })
        } else {
          el.exrate = null
        }
      }
      if (name == 'curCode') {
        if (row) {
          bcurrencyGetExrate({ date: this.form.purchaseDate, dc: 'C' }).then(res => {
            res.data.data.forEach(e => {
              if (el.curCode == e.code) {
                this.$set(el, 'exrate', e.exrate)
                this.countChange(el)
              }
            })
          })
        } else {
          el.exrate = null
        }
      }
      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 == 'boxType') {
        if (row) {
          el.boxTypeId = row.id
        } else {
          el.boxTypeId = null
          el.boxType = null
        }

      }
      if (name == 'stationCname') {
        if (row) {
          el.stationId = row.id
          el.stationCode = row.code
          el.stationEname = row.enName
        } else {
          el.stationId = null
          el.stationCode = null
          el.stationCname = null
          el.stationEname = null
        }
      }
      if (name == 'billType') {
        el.corpId = null
        el.shortName = null
        el.corpCnName = null
        el.corpEnName = null
        this.updateSearchKey = new Date().getTime()
      }
      if (name == 'corpCnName') {
        if (row) {
          el.corpId = row.id
          el.shortName = row.shortName
          el.corpEnName = row.enName
        } else {
          el.corpId = null
          el.shortName = null
          el.corpCnName = null
          el.corpEnName = null
        }
      }
      if (name == 'restrictedPortsName') {
        if (row) {
          el.restrictedPortsIds = row.ids
          el.restrictedPortsName = row.names
        } else {
          el.restrictedPortsIds = null
          el.restrictedPortsName = null
        }
      }
      if (name == 'restrictingShippingCompaniesName') {
        if (row) {
          el.restrictingShippingCompaniesIds = row.ids
          el.restrictingShippingCompaniesName = row.names
        } else {
          el.restrictingShippingCompaniesIds = null
          el.restrictingShippingCompaniesName = null
        }
      }
      if (name == 'originalBoxEastName') {
        if (row) {
          el.originalBoxEastId = row.id
        } else {
          el.originalBoxEastId = null
          el.originalBoxEastName = null
        }
      }
    },
    rowEdit(row) {
    },
    addRow() {
      if (!this.form.id) {
        return this.$message.error("请保存数据");
      }
      this.$refs.crud.dicInit();
      bcurrencyGetExrate({ date: this.form.purchaseDate, dc: 'C' }).then(res => {
        res.data.data.forEach(e => {
          if (e.code == 'USD') {
            this.form.tradingBoxItemsList.push({
              pid: this.form.id,
              boxBelongsTo: 'SOC',
              boxCategory: '自有箱',
              boxStatus: '好',
              boxCondition: this.form.boxCondition,
              stationId: this.form.stationId,
              stationCode: this.form.stationCode,
              stationCname: this.form.stationCname,
              stationEname: this.form.stationEname,
              currency: 'USD',
              exrate: e.exrate,
              status: '空箱入场',
              $cellEdit: true
            })
          }
        })
      })


    },
    feecAddRow() {
      if (!this.form.id) {
        return this.$message.error("请保存数据");
      }
      this.form.feeCenterList.push({
        pid: this.form.id,
        feesType: 1,
        dc: 'C',
        billType: '箱东',
        corpId: this.form.purchaseCompanyId,
        shortName: this.form.purchaseCompanyName,
        corpCnName: this.form.purchaseCompanyName,
        curCode: 'CNY',
        exrate: 1,
        $cellEdit: true
      })
    },
    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;
    },
    getDetail(id) {
      console.log(1111111111111, id)
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      });
      detail({ id: id }).then(res => {
        this.form = res.data.data
        this.updateFormKey = new Date().getTime()
      }).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
        this.updateFormKey = new Date().getTime()
      }).finally(() => {
        loading.close()
      })
    },
    inEdit() {
      this.editButton = false
      if (this.form.status == '录入') {
        this.editDisabled = false
        this.optionForm.disabled = false
      }
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          tradingBoxItem({ ids: row.id }).then(res => {
            this.form.tradingBoxItemsList.splice(index, 1);
            this.$message.success("成功删除");
          })
        } else {
          this.form.tradingBoxItemsList.splice(index, 1);
        }
      });
    },
    polRowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          tradingBoxFees({ ids: row.id }).then(res => {
            this.form.feeCenterList.splice(index, 1);
            this.$message.success("成功删除");
          })
        } else {
          this.form.feeCenterList.splice(index, 1);
        }

      });
    },
    podRowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          tradingBoxFees({ ids: row.id }).then(res => {
            this.podFeeList.splice(index, 1);
            this.$message.success("成功删除");
          })
        } else {
          this.podFeeList.splice(index, 1);
        }

      });
    },
    allClick(name) {
      if (name == '一键保存') {
        if (!this.form.tradingBoxItemsList.length) {
          return this.$message.error("请添加数据");
        }
        for (let row of this.form.tradingBoxItemsList) {
          if (!row.code || !row.boxType || !row.boxCategory || !row.boxStatus || !row.boxCondition || !row.amount || !row.currency || !row.exrate || !row.status) {
            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.tradingBoxItemsList).then(res => {
          this.$message.success("保存成功");
          this.form.tradingBoxItemsList = res.data.data
        }).finally(() => {
          loading.close();
        })
      }
      if (name == '一键编辑') {
        for (let row of this.form.tradingBoxItemsList) {
          if (row.whetherEnable != '是') {
            this.$set(row, "$cellEdit", true);
          }
        }
        this.$refs.crud.dicInit();
      }
      if (name == '批量删除') {
        for (let item of this.selectionList) {
          if (item.whetherEnable == '是') {
            return this.$message.error("启用状态不能删除!");
          }
        }
        let multiList = []
        let arr = []
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          multiList = this.selectionList
          arr = this.form.tradingBoxItemsList
          // 获取有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)'
            });
            tradingBoxItem({ ids: arrIds.join(',') }).then(res => {
              this.$message.success("删除成功");
            }).finally(() => {
              loading.close();
            })
          }
        })
      }
      if (name == '导入') {
        this.excelOption.column.forEach(item => {
          if (item.prop == 'excelFile') {
            item.action = "/api/blade-los/tradingBoxItem/importBoxItem?id=" + this.form.id
          }
        })
        this.excelBox = true
      }
      if (name == '启用') {
        for (let item of this.selectionList) {
          if (item.whetherEnable == '是') {
            return this.$message.error("请勿重复启用");
          }
        }
        this.form.cyTextOne = this.form.cyText
        this.activationForm = {
          containerNumber: null,
          polId: this.form.addressId,
          polCode: this.form.addressCode,
          polEname: this.form.addressEname,
          polCname: this.form.addressCname,
          polStationId: this.form.stationId,
          polStationCode: this.form.stationCode,
          polStationCname: this.form.stationCname,
          polStationEname: this.form.stationEname,
          podId: null,
          podCode: null,
          podEname: null,
          podCname: null,
          activationDate: null,
        }
        this.activationDialog = true
      }

      if (name == '费用一键保存') {
        if (!this.form.feeCenterList.length) {
          return this.$message.error("请添加数据");
        }
        for (let row of this.form.feeCenterList) {
          if (!row.billType || !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.feeCenterList).then(res => {
          this.$message.success("保存成功");
          this.form.feeCenterList = res.data.data
        }).finally(() => {
          loading.close();
        })
      }
      if (name == '费用一键编辑') {
        for (let row of this.form.feeCenterList) {
          if (!row.stlPid && (row.accStatus == 0||row.auditStatus== 0)) {
            this.$set(row, "$cellEdit", true);
          }
        }
      }
      if (name == '费用批量删除') {
        for (let row of this.selectionfeecList) {
          if (row.feeCode == 'BOX-YJ' || row.feeCode == 'BOX-ZJ') {
            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.feeCenterList
          // 获取有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)'
            });
            tradingBoxFees({ ids: arrIds.join(',') }).then(res => {
              this.$message.success("删除成功");
            }).finally(() => {
              loading.close();
            })
          }
        })
      }
      if (name == '费用申请') {
        for (let row of this.selectionfeecList) {
          if (row.stlPid && row.accStatus != 0) {
            return this.$message.error("已生成账单，不允许重复申请");
          }
          if (row.stlPid && row.auditStatus != 0) {
            return this.$message.error("已申请费用，不允许重复申请");
          }
        }
        this.$confirm("确定申请费用?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {}
          obj = {
            srcId: this.form.id,
            srcType: this.form.type,
            feeCenterList: this.selectionfeecList,
            url: '/boxManagement/buyContainer/index',
            pageStatus: '',
            pageLabel: '买箱',
          }
          const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.7)'
          });
          pleaseVerifyCost(obj).then(res => {
            this.$message.success("操作成功");
            this.getDetail(this.form.id)
          }).finally(() => {
            loading.close();
          })
        });
      }
    },
    submit(type) {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          for (let row of this.form.tradingBoxItemsList) {
            if (!row.code || !row.boxType || !row.boxCategory || !row.boxStatus || !row.boxCondition || !row.amount || !row.currency || !row.exrate || !row.status) {
              this.$refs.crud.rowCell(row, row.$index)
              return this.$message.error("请完善箱明细信息");
            }
          }
          for (let row of this.form.feeCenterList) {
            if (!row.billType || !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)'
          });
          submit(this.form).then(res => {
            this.$message.success("保存成功");
            this.getDetail(res.data.data.id)
          }).finally(() => {
            loading.close();
          })

        } else {
          return false;
        }
      });
    },
    application() {
      this.$confirm("确定请核数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let obj = {}
        obj = {
          id: this.form.id,
          url: '/iosBasicData/costcenter/coc/index',
          pageStatus: '',
          pageLabel: '航线成本(COC)',
        }
        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.getDetail(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.getDetail(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) {
      this.$emit("goBack");
    },
  },
  watch: {
    // 监听业务类型 如果不是分单 可以编辑分单号
    'form.tradingBoxItemsList': {
      // 执行方法
      handler(oldValue, newValue) {
        if (this.form.tradingBoxItemsList.length > 0) {
          this.optionForm.column.forEach(item => {
            if (item.prop == 'contractNo' || item.prop == 'purchaseDate' || item.prop == 'boxTypeQuantityOne' || item.prop == 'boxTypeQuantityTwo' || item.prop == 'agreement' || item.prop == 'boxCondition' || item.prop == 'log') {
              item.disabled = true
            }
          })

        } else {
          this.optionForm.column.forEach(item => {
            if (item.prop == 'contractNo' || item.prop == 'purchaseDate' || item.prop == 'boxTypeQuantityOne' || item.prop == 'boxTypeQuantityTwo' || item.prop == 'agreement' || item.prop == 'boxCondition' || item.prop == 'log') {
              item.disabled = false
            }
          })
        }
        this.CNYSUM = 0
        this.USDSUM = 0
        this.form.tradingBoxItemsList.forEach(item => {
          if (item.currency == 'CNY') {
            this.CNYSUM = _.round(_.add(this.CNYSUM ? Number(this.CNYSUM) : 0, item.amount ? Number(item.amount) : 0), 2)
          }
          if (item.currency == 'USD') {
            this.USDSUM = _.round(_.add(this.USDSUM ? Number(this.USDSUM) : 0, item.amount ? Number(item.amount) : 0), 2)
          }
        })
      },
      deep: true, // 深度监听
      immediate: true  // 第一次改变就执行
    },
  }
}
</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;
}

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

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