lemonBeans_ui/src/views/kaihe/domesticTrade/orderInformation/index.vue

<template>
  <div class="app-container">
    <el-button
      icon="el-icon-arrow-left"
      type="danger"
      v-if="cancelButton === true"
      @click="cancel"
      style="margin-bottom: 5px"
    >返回列表
    </el-button>

    <el-collapse v-model="activeNames" @change="">
      <el-collapse-item title="基础资料" name="1">
        <el-form ref="form" :model="form" label-width="130px" size="mini" class="selectForm" :rules="rules">
          <el-row>
            <el-col :span="6">
              <el-form-item label="订舱单位" prop="corpName">
                <el-input
                  v-model="form.corpName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="提单号" prop="fMblno">
                <el-input
                  v-model="form.fMblno"
                  :disabled="changeNum"
                  size="small"
                  style="width: 100%"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="起运港口" prop="loadportidName">
                <el-input
                  v-model="form.loadportidName"
                  size="small"
                  style="width: 100%"
                  :disabled="doNot"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目的港口" prop="destportidName">
                <el-input
                  v-model="form.destportidName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计装货时间" prop="fBsdate">
                <el-date-picker
                  v-model="form.fBsdate"
                  type="date"
                  size="small"
                  style="width: 100%"
                  :disabled="doNot"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运输条款" prop="serviceitemsName">
                <el-input
                  v-model="form.serviceitemsName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款方式" prop="paymodeName">
                <el-input
                  v-model="form.paymodeName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="售票方" prop="invoceobjName">
                <el-input
                  v-model="form.invoceobjName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="箱内签收单" prop="signName">
                <el-input
                  v-model="form.signName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订舱人扣货" prop="detentioncargoName">
                <el-input
                  v-model="form.detentioncargoName"
                  :disabled="doNot"
                  style="width: 100%"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船名" prop="vslidName">
                <el-input
                  v-model="form.vslidName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="航次" prop="voyidName">
                <el-input
                  v-model="form.voyidName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="14">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  v-model="form.remarks"
                  :disabled="doNot"
                  size="small"
                  style="width: 75%"
                >
                </el-input>
                <el-button type="primary" size="small" @click="check(1)">查看</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="预计时间" name="2">
        <el-form v-model="estimatedTime" label-width="130px" size="mini">
          <el-row>
            <el-col :span="6">
              <el-form-item label="起运港口" prop="portofloadidName">
                <el-input
                  v-model="estimatedTime.portofloadidName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="中转港口" prop="portoftransshipmentName">
                <el-input
                  v-model="estimatedTime.portoftransshipmentName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <!--            <el-col :span="6">-->
            <!--              <el-form-item label="预计中转抵港日期" prop="fMblno">-->
            <!--                <el-input-->
            <!--                  v-model="form.fMblno"-->
            <!--                  :disabled="doNot"-->
            <!--                  size="small"-->
            <!--                  style="width: 100%"-->
            <!--                  placeholder="手工输入"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="6">-->
            <!--              <el-form-item label="预计中转开航日期" prop="fMblno">-->
            <!--                <el-input-->
            <!--                  v-model="form.fMblno"-->
            <!--                  :disabled="doNot"-->
            <!--                  size="small"-->
            <!--                  style="width: 100%"-->
            <!--                  placeholder="手工输入"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="6">
              <el-form-item label="目的港口" prop="portofdischargeidName">
                <el-input
                  v-model="estimatedTime.portofdischargeidName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计开航日期" prop="fEtd">
                <el-input
                  v-model="estimatedTime.fEtd"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计抵港日期" prop="fEta">
                <el-input
                  v-model="estimatedTime.fEta"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="收发货人信息" name="3">
        <el-form v-model="form" label-width="130px" size="mini">
          <el-row>
            <el-col :span="6">
              <el-form-item label="发货人全称" prop="fShippername">
                <el-input
                  v-model="form.fShippername"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发货人联系人" prop="fShipperattn">
                <el-input
                  v-model="form.fShipperattn"
                  :disabled="doNot"
                  style="width: 100%"
                  size="small"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发货人电话" prop="fShippertel">
                <el-input
                  v-model="form.fShippertel"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="收货人全称" prop="fConsigneername">
                <el-input
                  v-model="form.fConsigneername"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收货人联系人" prop="fConsigneeattn">
                <el-input
                  v-model="form.fConsigneeattn"
                  :disabled="doNot"
                  style="width: 100%"
                  size="small"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收货人电话" prop="fConsigneetel">
                <el-input
                  v-model="form.fConsigneetel"
                  :disabled="doNot"
                  style="width: 100%"
                  size="small"
                  placeholder="手工输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="费用信息" name="5" class="minHeight">
        <el-form v-model="form" label-width="130px" size="mini">
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否办理保险" prop="insuranceName">
                <el-input
                  v-model="form.insuranceName"
                  :disabled="doNot"
                  size="small"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险货值（万元）" prop="fInsuranceamt">
                <el-input
                  v-model="form.fInsuranceamt"
                  :disabled="doNot"
                  style="width: 100%"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="货物信息" name="4">
        <el-table :data="goodsList" style="width: 100%;" align="center">
          <el-table-column label="行号" type="index" min-width="100px"/>
          <el-table-column label="货物名称" prop="goodsName" min-width="100px"/>
          <el-table-column label="货类" prop="typeidName" min-width="100px"/>
          <el-table-column label="包装类型" prop="packageName" min-width="100px"/>
          <el-table-column label="箱型" prop="cntrName" min-width="100px"/>
          <el-table-column label="箱量" prop="fCntrcount" min-width="100px"/>
          <el-table-column label="单箱重量（吨）" prop="fCntrweight" min-width="120px"/>
          <el-table-column label="箱态" prop="fCntrstatus" min-width="100px"/>
          <el-table-column label="自备货柜" prop="fSoc" min-width="100px"/>
          <el-table-column label="设置温度（℃）" prop="fTemperature" min-width="120px"/>
          <el-table-column label="风门开度（%）" prop="fDraught" min-width="120px"/>
          <el-table-column label="湿度设置（%）" prop="fHumidity" min-width="120px"/>
          <el-table-column label="预冷要求" prop="fPrecooling" min-width="100px"/>
          <el-table-column label="是否化学品" prop="ifdangerName" min-width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.ifdangerName }}</span>
              <el-button type="primary" size="small" @click="check(2)" style="margin-left: 5px;">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" min-width="100px"/>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="箱信息" name="6" class="minHeight">
        <div
          class="dialogTableTitle flex a-center jlr"
          style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 10px 0;
              font-size: 16px;
              font-weight: bolder;
            "
        >
          <div>
            <el-button
              size="small"
              type="primary"
              :disabled="modify"
              @click.prevent="addList()"
            >新行
            </el-button>
            <!-- <el-button :disabled="browseStatus" @click.prevent="deleteRow(warehouseDrList)"
            >删除
          </el-button> -->
            <el-button
              type="primary"
              size="small"
              :disabled="modify"
              @click="approval(1)"
            >保 存
            </el-button
            >
          </div>
        </div>
        <el-table :data="dataList" style="width: 100%;">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="箱号" align="center" prop="fCntrno">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fCntrno" :disabled="scope.row.fManual == 0 || modify"/>
            </template>
          </el-table-column>
          <el-table-column label="铅封号" align="center" prop="fSealno">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fSealno" :disabled="scope.row.fManual == 0 || modify"/>
            </template>
          </el-table-column>
          <el-table-column prop="fCntrweight" label="单箱重量（吨）" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fCntrweight" :disabled="scope.row.fManual == 0 || modify"
                        @input="cntrWeight"
              />
            </template>
          </el-table-column>
          <el-table-column prop="fGoodsid" label="货名" align="center">
            <template slot-scope="scope">
              <el-select clearable v-model="scope.row.fGoodsid" :disabled="scope.row.fManual == 0 || modify">
                <el-option
                  v-for="item in goodsOptions"
                  :key="item.fId"
                  :label="item.fName"
                  :value="item.fId"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fPackageid" label="包装类型" align="center">
            <template slot-scope="scope">
              <el-select clearable v-model="scope.row.fPackageid" :disabled="scope.row.fManual == 0 || modify">
                <el-option
                  v-for="dict in packgeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fCntrid" label="箱型" align="center">
            <template slot-scope="scope">
              <el-select clearable v-model="scope.row.fCntrid" :disabled="scope.row.fManual == 0 || modify">
                <el-option
                  v-for="item in cntrOptions"
                  :key="item.fId"
                  :label="item.fNo"
                  :value="item.fId"
                />
              </el-select>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="fManual" label="来源" align="center">-->

          <!--            <template slot-scope="scope">-->
          <!--              <el-select clearable v-model="scope.row.fManual" :disabled="modify">-->
          <!--                <el-option />-->
          <!--              </el-select>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" :disabled="scope.row.fManual == 0 || modify"
                         @click="deleteRow(scope.$index, dataList)"
              >移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="7">
        <template slot="title">
          <i class="el-icon-circle-plus"></i>应收费用
        </template>
        <div
          class="dialogTableTitle flex a-center jlr"
          style="
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin: 10px 0;">
          <div>
            <el-button
              size="small"
              type="primary"
              :disabled="modify"
              @click.prevent="addCollection()"
            >新行
            </el-button>
            <!-- <el-button :disabled="browseStatus" @click.prevent="deleteRow(warehouseDrList)"
            >删除
          </el-button> -->
            <el-button
              type="primary"
              size="small"
              :disabled="modify"
              @click="approval(1)"
            >保 存
            </el-button
            >
            <!-- <el-button @click.prevent="addAgreement()" type="warning">仓储费协议</el-button> -->
            <el-button
              size="small"
              @click.prevent="handleSelect(3)"
              :disabled="modify"
              type="danger"
            >导入协议
            </el-button
            >
          </div>
        </div>
        <el-table
          :data="warehouseDrList"
          ref="table"
          tooltip-effect="dark"
          border
          stripe
          show-summary
          @selection-change=""
          :summary-method="warehouseDrSummaries"
        >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column
            prop="fBusinessType"
            header-align="center"
            align="center"
            width="180px"
            label="业务类型"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fBusinessType"
                filterable
                remote
                :disabled="modify || scope.row.fSrcTypeId != 0"
                placeholder="请选择业务类型"
              >
                <el-option
                  v-for="dict in businessTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fCorpid"
            header-align="center"
            align="center"
            width="180px"
            label="客户名称"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fCorpid"
                filterable
                remote
                :disabled="modify || scope.row.fSrcTypeId != 0"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in nameOptions"
                  :key="item.fId"
                  :label="item.fName"
                  :value="item.fId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fFeeid"
            header-align="center"
            align="center"
            width="180px"
            label="费用名称"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fFeeid"
                filterable
                remote
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="请选择费用名称"
              >
                <el-option
                  v-for="(dict, index) in fDNameOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fFeeUnitid"
            header-align="center"
            align="center"
            width="180px"
            label="计价单位"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fFeeUnitid"
                placeholder="请选择计价单位"
                @change="changeFeeUnit(scope.row)"
                clearable
                :disabled="modify || scope.row.fSrcTypeId !== 0"
              >
                <el-option
                  v-for="(dict, index) in jFeetunitOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fQty"
            header-align="center"
            align="center"
            width="130px"
            label="数量"
          >
            <template slot-scope="scope">
              <el-input
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fQty"
                placeholder="数量"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                @change="changeContractAmt(scope.row)"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fUnitprice"
            header-align="center"
            align="center"
            width="130px"
            label="单价"
          >
            <template slot-scope="scope">
              <el-input
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fUnitprice"
                placeholder="单价"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                @change="changeContractAmt(scope.row)"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fAmount"
            header-align="center"
            align="center"
            width="130px"
            label="金额"
          >
            <template slot-scope="scope">
              <el-input
                disabled
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fAmount"
                placeholder="金额"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fStltypeid"
            header-align="center"
            align="center"
            width="130px"
            label="结算方式"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fStltypeid"
                placeholder="请选择结算表票结、月结"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
              >
                <el-option
                  v-for="(dict, index) in fStltypeOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fCurrency"
            header-align="center"
            align="center"
            width="130px"
            label="币别"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fCurrency"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="币别"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fExrate"
            header-align="center"
            align="center"
            width="130px"
            label="汇率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fExrate"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="汇率"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fTaxrate"
            header-align="center"
            align="center"
            width="130px"
            label="税率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fTaxrate"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="税率"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fSrcTypeId"
            header-align="center"
            align="center"
            width="130px"
            label="来源"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.fSrcTypeId === 0">录入</span>
              <span v-if="scope.row.fSrcTypeId !== 0">协议</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="remarks"
            header-align="center"
            align="center"
            width="150px"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.Remarks"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="备注"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="操作"
            width="200px"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="
                          deleteRow(scope.$index, warehouseDrList)
                        "
                size="small"
                :disabled="modify"
              >移除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="8">
        <template slot="title">
          <i class="el-icon-remove"></i>应付费用
        </template>
        <div
          class="dialogTableTitle flex a-center jlr"
          style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 10px 0;
                  "
        >
          <div>
            <el-button
              type="primary"
              :disabled="modify"
              @click.prevent="addpayment()"
              size="small"
            >新行
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="approval(1)"
              :disabled="modify"
            >保 存
            </el-button
            >
            <el-button
              type="danger"
              size="small"
              @click.prevent="handleSelect(1)"
              :disabled="modify"
            >导入协议
            </el-button
            >
          </div>
        </div>
        <el-table
          :data="warehouseCrList"
          ref="table"
          tooltip-effect="dark"
          border
          stripe
          show-summary
          @selection-change=""
          :summary-method="warehouseCrSummaries"
        >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column
            prop="fCorpid"
            header-align="center"
            align="center"
            width="180px"
            label="业务类型"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fBusinessType"
                filterable
                remote
                :disabled="modify || scope.row.fSrcTypeId != 0"
                placeholder="请选择业务类型"
              >
                <el-option
                  v-for="dict in businessTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fCorpid"
            header-align="center"
            align="center"
            width="180px"
            label="客户名称"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fCorpid"
                filterable
                remote
                :disabled="modify || scope.row.fSrcTypeId != 0"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in nameOptions"
                  :key="item.fId"
                  :label="item.fName"
                  :value="item.fId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fFeeid"
            header-align="center"
            align="center"
            width="180px"
            label="费用名称"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fFeeid"
                filterable
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                remote
                placeholder="请选择费用名称"
              >
                <el-option
                  v-for="(dict, index) in fCNameOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fFeeUnitid"
            header-align="center"
            align="center"
            width="180px"
            label="计价单位"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fFeeUnitid"
                filterable
                remote
                @change="changeFeeUnit(scope.row)"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="请选择计价单位"
              >
                <el-option
                  v-for="(dict, index) in jFeetunitOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fQty"
            header-align="center"
            align="center"
            width="150px"
            label="数量"
          >
            <template slot-scope="scope">
              <el-input
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fQty"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                @change="changeContractAmt(scope.row)"
                placeholder="数量"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fUnitprice"
            header-align="center"
            align="center"
            width="150px"
            label="单价"
          >
            <template slot-scope="scope">
              <el-input
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fUnitprice"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                @change="changeContractAmt(scope.row)"
                placeholder="单价"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fAmount"
            header-align="center"
            align="center"
            width="150px"
            label="金额"
          >
            <template slot-scope="scope">
              <el-input
                disabled
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fAmount"
                placeholder="金额"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fStltypeid"
            header-align="center"
            align="center"
            width="130px"
            label="结算方式"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fStltypeid"
                placeholder="请选择结算表票结、月结"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
              >
                <el-option
                  v-for="(dict, index) in fStltypeOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="fCurrency"
            header-align="center"
            align="center"
            width="150px"
            label="币别"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fCurrency"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="币别"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fExrate"
            header-align="center"
            align="center"
            width="150px"
            label="汇率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fExrate"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="汇率"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fTaxrate"
            header-align="center"
            align="center"
            width="150px"
            label="税率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fTaxrate"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="税率"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fSrcTypeId"
            header-align="center"
            align="center"
            width="130px"
            label="来源"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.fSrcTypeId === 0">录入</span>
              <span v-if="scope.row.fSrcTypeId !== 0">协议</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remarks"
            header-align="center"
            align="center"
            width="150px"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remarks"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="备注"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200px"
            label="操作"
          >
            <template slot-scope="scope">
              <!--               <el-button size="small">审核费用</el-button> -->
              <el-button
                @click.native.prevent="
                    deleteRow(scope.$index, warehouseCrList)
                  "
                size="small"
                :disabled="modify"
              >移除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="9" class="minHeight" title="箱信息">
        <template slot="title">
          <i class="el-icon-circle-plus"></i>利润合计：
<!--          {{this.amountDr != null && this.amountCr != null ? this.amountDr - this.amountCr : ''}}-->
          {{this.amountDr != null && this.amountCr != null ? this.amountDr - this.amountCr :
          (!this.amountDr && this.amountCr ? 0 - this.amountCr :
            (!this.amountDr && !this.amountCr ? '' : this.amountDr))}}
        </template>
      </el-collapse-item>
    </el-collapse>


    <div style="margin:60px;float: right">
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <approval-comments v-if="addOrUpdateVisib" ref="ApprovalComments" @refreshDataList="returnData"
      ></approval-comments>
      <el-button type="info" :disabled="jumpDonot" v-if="this.form.fBillstatus == 11" @click="modify = false">修 改
      </el-button>
      <el-button type="success" :disabled="modify" v-if="this.form.fBillstatus == 11" @click="approval(1)">保 存
      </el-button>
      <el-button type="primary" :disabled="modify" v-if="this.form.fBillstatus == 11 && this.form.moneyStatus < 4"
                 @click="feeSubmission"
      >费用请核
      </el-button>
      <el-button type="success" v-if="approVal" @click="addOrUpdateHand(form)">审 批</el-button>
      <el-button type="danger" :disabled="disappear" v-if="form.moneyStatus === 4 && current == before"
                 @click="revokeTwo"
      >撤销请核
      </el-button>
      <el-button type="primary"
                 v-if="form.fBillstatus != 11 ||form.moneyStatus == null || form.moneyStatus != null && form.moneyStatus >= 4"
                 @click="addOrUpdateHandle(form)"
      >查看审批
      </el-button>
      <el-button icon="el-icon-arrow-left" type="danger" v-if="cancelButton === true" @click="cancel">返回列表</el-button>
      <el-button icon="el-icon-arrow-left" type="danger" v-if="cancelButton === false" @click="cancelTwo"
      >返回首页
      </el-button
      >
    </div>
    <!--    附件查看-->
    <el-dialog
      title="查看附件"
      :visible.sync="dialogVisible"
      width="60%"
      v-dialogDrag
    >
      <el-table
        :data="relevantAttachments"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        style="width: 100%"
        height="150"
      >
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fName"
          header-align="center"
          align="center"
          width="250px"
          label="附件名称"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fName"
              placeholder="附件名称"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="250px"
          label="上传时间"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.createTime"
              disabled
              placeholder="上传时间"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="createBy"
          header-align="center"
          align="center"
          width="150px"
          label="上传人"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.createBy"
              disabled
              placeholder="上传人"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fUrl"
          header-align="center"
          align="center"
          width="150px"
          label="操作"
        >
          <template slot-scope="scope">
            <!--          <el-upload-->
            <!--            class="upload-demo"-->
            <!--            :action="uploadImgUrl"-->
            <!--            :on-success="(res,file)=>{handleSucces(scope,res,file)}"-->
            <!--            :headers="headers"-->
            <!--            style="width:25%;float: left"-->
            <!--            :show-file-list="false"-->
            <!--            :limit="1"-->
            <!--          >-->
            <!--            <el-button size="small" type="primary" style="margin-left:20px">点击上传</el-button>-->
            <!--          </el-upload>-->
            <el-button size="small" type="primary" @click="checkFile(scope)">查看</el-button>
            <!--          <el-button size="small" type="primary" @click="deleteFile(scope)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  listCorps,
  addmodify,
  getCntr,
  postApproval,
  listFees,
  getGoodName,
  getFName,
  getfee,
  getName
} from '@/api/kaihe/domesticTrade/orderInformation'
import Global from '@/layout/components/global'
import { getToken } from '@/utils/auth'
import Cookies from 'js-cookie'
import draggable from 'vuedraggable'
import Vue from 'vue'
import AddOrUpdate from '@/views/viewApproval'
import ApprovalComments from '@/views/startApproval'
import { revoke, revokeTwo } from '@/api/warehouseBusiness/warehouseInStock'
import { queryUserVal } from '@/api/system/user'

Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    const enlarge = el.querySelector('.enlarge')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    if (enlarge) {
      enlarge.onclick = (e) => {
        dragDom.style.top = '0px'
        dragDom.style.left = '0px'
      }
    }
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素

        if ((t + styT) >= 0) {
          dragDom.style.top = `${t + styT}px`
        }
        dragDom.style.left = `${l + styL}px`
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

export default {
  name: 'orderInformation',
  components: {
    AddOrUpdate,
    ApprovalComments
  },
  data() {
    return {
      rules: {
        fMblno: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      changeNum: true,
      cancelButton: true,
      jumpDonot: false,
      disappear: false,
      businessTypeOptions: [],
      id: null,
      current: '',
      before: '',
      approVal: false,
      //客户名称下拉模糊
      nameOptions: [],
      //字典表包装类型
      packgeOptions: [],
      //货名下拉
      goodsOptions: [],
      //箱型下拉
      cntrOptions: [],
      fTaxrate: '',
      //结算方式
      fStltypeOptions: [],
      //计价单位
      jFeetunitOptions: [],
      //收付款费用名称字典表
      fDNameOptions: [],
      fCNameOptions: [],
      warehouseCrList: [],
      estimatedTime: {},
      addOrUpdateVisible: false,
      addOrUpdateVisib: false,
      warehouseDrList: [],
      goodsList: [],
      dataList: [],
      visible: false,
      dataForm: {},
      modify: true,
      doNot: true,
      activeNames: ['1', '2', '3', '4', '5', '6'],
      form: {},
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      relevantAttachments: [],
      headers: { Authorization: 'Bearer ' + getToken() },
      //集装箱尺码字典表
      CntrsizeOptions: [],
      //模糊查询箱类型
      typeOptions: [],
      //附件上传弹窗
      dialogVisible: false,
      //调箱动作字典表
      boxActionOptions: [],
      //集装箱主字典表
      ownerOptions: [],
      //模糊下拉查询地点
      addressOptions: [],
      //空重字典表
      updateEFOptions: [],
      //状态字典表
      cntrstatusOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户详情表格数据
      corpsList: [],
      // 查询参数
      select: '',
      querDate: [],
      file: [],
      row: [],
      res: [],
      formList:{},
      amountDr:null,
      amountCr:null
    }
  },
  //页面跳转后传递参数
  activated() {
    this.modify = true
    let formDate
    if (this.$route.query.list) {
      formDate = {
        fId: JSON.parse(this.$route.query.list).billId
      }
      this.formList = formDate
      this.approVal = true
      this.cancelButton = false
    } else if (this.$route.query.data) {
      formDate = {
        fId: JSON.parse(this.$route.query.data).fId,
        num: JSON.parse(this.$route.query.data).num
      }
      this.id = formDate.fId
      this.formList = {
        fId: formDate.fId
      }
      this.approVal = false
    }
    if (formDate) {
      addmodify(formDate).then(response => {
        this.form = response.rows[0]
        if (this.form.fMblno == null) {
          this.changeNum = false
        } else {
          this.changeNum = true
        }
        let data = {
          actId: 460,
          id: this.form.fId
        }
        getName(data).then(response => {
          if (response.data.length != 0) {
            this.before = response.data[0].userName
          }
        })
        queryUserVal().then((response) => {
          this.current = response.user.userName
          if (formDate.num) {
            if (this.form.moneyStatus >= 4) {
              this.jumpDonot = true
            }
            if (this.current == this.before) {
              this.disappear = false
            }
          } else {
            this.jumpDonot = true
            this.disappear = true
          }
        })

        this.goodsList = response.rows[0].tWarehousebillsCntrList
        this.estimatedTime = response.rows[0].tVoyageL
        this.dataList = response.rows[0].tWarehousebillsCntritemsList
        this.loading = false
        if (response.rows[0].tWarehousebillsfeesDr) {
          this.warehouseDrList = response.rows[0].tWarehousebillsfeesDr
          for (let item in this.warehouseDrList) {
            this.$set(this.warehouseDrList[item], 'fFeeUnitid', JSON.stringify(this.warehouseDrList[item].fFeeunitid))
            // this.$set(this.warehouseDrList[item], 'fCorpid', JSON.stringify(this.warehouseDrList[item].fCorpid))
          }
        }
        if (response.rows[0].warehousebillsfeesCr) {
          this.warehouseCrList = response.rows[0].warehousebillsfeesCr
          for (let item in this.warehouseCrList) {
            this.$set(this.warehouseCrList[item], 'fFeeUnitid', JSON.stringify(this.warehouseCrList[item].fFeeunitid))
          }
        }
      })
    }
  },
  created() {
    this.getDicts('data_unitfees').then((response) => {
      if (response.data) {
        this.jFeetunitOptions = response.data
      }
    })
    this.getDicts('data_stltype_type').then((response) => {
      if (response.data) {
        this.fStltypeOptions = response.data
      }
    })
    this.getDicts('tax_rate').then((response) => {
      if (response.data) {
        this.fTaxrate = response.data[0].dictValue
      }
    })
    this.getDicts('f_packageid').then((response) => {
      if (response.data) {
        this.packgeOptions = response.data
      }
    })
    this.getDicts('data_billType').then((response) => {
      if (response.data) {
        this.businessTypeOptions = response.data
      }
    })
    this.cntrtypeRemoteMethod()
    this.goodRemoteMethod()
    this.nameRemoteMethod()
    this.fWRemoteMethod()
    let queryParams = { pageNum: 1, fDc: 'C' }
    listFees(queryParams).then((response) => {
      this.fCNameOptions = response.rows
    })
    let query = { pageNum: 1, fDc: 'D' }
    listFees(query).then((response) => {
      this.fDNameOptions = response.rows
    })
  },
  methods: {
    homePage() {
      this.open = false
      let view = {
        fullPath: '/finance/contrast',
        hash: '',
        matched: Array(2),
        meta: Object,
        name: 'Contrast',
        params: Object,
        path: '/finance/contrast',
        query: Object,
        title: '对账'
      }
      this.$router.push({ path: '/index' })
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
      Global.$emit('removeCache', 'closeSelectedTag', view)
    },
    cancel() {
      if (this.form.moneyStatus === 4 ||
        this.form.fBillstatus === 4 ||
        this.form.fBillstatus === 9 ||
        this.modify == true) {
        this.$router.push({ path: '/domesticTrade/myOrder' })
      } else {
        this.$confirm('返回列表，是否保存?', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.approval()
          })
          .catch(() => {
            this.$router.push({ path: '/domesticTrade/myOrder' })
            this.modify = true
          })
      }
    },
    //撤销审批
    revokeTwo() {
      let data = {
        actId: 460,
        billId: this.form.fId,
        id: this.form.fId
      }
      revokeTwo(data).then((data) => {
        if (data.code === 200) {
          this.msgSuccess('撤销成功')
          this.jumpDonot = false
          if (this.formList) {
            addmodify(this.formList).then(response => {
              this.form = response.rows[0]
              let data = {
                actId: 460,
                id: this.form.fId
              }
              getName(data).then(response => {
                if (response.data.length != 0) {
                  this.before = response.data[0].userName
                }
              })
              queryUserVal().then((response) => {
                this.current = response.user.userName
              })
              this.goodsList = response.rows[0].tWarehousebillsCntrList
              this.estimatedTime = response.rows[0].tVoyageL
              this.dataList = response.rows[0].tWarehousebillsCntritemsList
              this.loading = false
              if (response.rows[0].tWarehousebillsfeesDr) {
                this.warehouseDrList = response.rows[0].tWarehousebillsfeesDr
                for (let item in this.warehouseDrList) {
                  this.$set(this.warehouseDrList[item], 'fFeeUnitid', JSON.stringify(this.warehouseDrList[item].fFeeunitid))
                }
              }
              if (response.rows[0].warehousebillsfeesCr) {
                this.warehouseCrList = response.rows[0].warehousebillsfeesCr
                for (let item in this.warehouseCrList) {
                  this.$set(this.warehouseCrList[item], 'fFeeUnitid', JSON.stringify(this.warehouseCrList[item].fFeeunitid))
                }
              }
              // if(this.current == this.before)
              //   this.disappear = false;
            })
          }
          this.reset()
        }
      })
    },
    //费用提交审核
    feeSubmission() {
      if (!this.warehouseDrList && !this.warehouseCrList) {
        this.$message.error('请维护费用')
        return false
      }
      if (this.warehouseDrList) {
        for (let li in this.warehouseDrList) {
          if (!this.warehouseDrList[li].fBusinessType) {
            this.$message.error('应收费用第' + (Number(li) + 1) + '行业务类型为空，请维护业务类型')
            return false
          } else if (!this.warehouseDrList[li].fCorpid) {
            this.$message.error('应收费用第' + (Number(li) + 1) + '行客户名称为空，请维护客户名称')
            return false
          } else if (!this.warehouseDrList[li].fFeeid) {
            this.$message.error('应收费用第' + (Number(li) + 1) + '行费用名称为空，请维护费用名称')
            return false
          } else if (!this.warehouseDrList[li].fQty) {
            this.$message.error('应收费用第' + (Number(li) + 1) + '行数量为空，请维护数量')
            return false
          } else if (!this.warehouseDrList[li].fUnitprice) {
            this.$message.error('应收费用第' + (Number(li) + 1) + '行单价为空，请维护单价')
            return false
          }
        }
      }
      if (this.warehouseCrList) {
        for (let li in this.warehouseCrList) {
          if (!this.warehouseCrList[li].fBusinessType) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行业务类型为空，请维护业务类型')
            return false
          } else if (!this.warehouseDrList[li].fCorpid) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行客户名称为空，请维护客户名称')
            return false
          } else if (!this.warehouseDrList[li].fFeeid) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行费用名称为空，请维护费用名称')
            return false
          } else if (!this.warehouseDrList[li].fQty) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行数量为空，请维护数量')
            return false
          } else if (!this.warehouseDrList[li].fUnitprice) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行单价为空，请维护单价')
            return false
          }
        }
      }

      let form = {
        fId: this.form.fId,
        fMblno: this.form.fMblno
      }
      let formData = new window.FormData()
      for (let li in this.warehouseDrList) {
        this.warehouseDrList[li].fMblno = this.form.fMblno
        for (let item in this.nameOptions) {
          if (this.warehouseDrList[li].fCorpid == this.nameOptions[item].fName) {
            this.warehouseDrList[li].fCorpid = this.nameOptions[item].fId
          }
        }
      }
      for (let li in this.warehouseCrList) {
        this.warehouseCrList[li].fMblno = this.form.fMblno
      }
      formData.append('tWarehousebills', JSON.stringify(form))
      formData.append('tWarehousebillsCntritems', JSON.stringify(this.dataList))
      formData.append('tWarehousebillsfeesDr', JSON.stringify(this.warehouseDrList))
      formData.append('tWarehousebillsfeesCr', JSON.stringify(this.warehouseCrList))
      getfee(formData).then(response => {
        this.$message.success('操作成功')
        this.form.moneyStatus = 4
        this.jumpDonot = true
        this.modify = true
        let data = {
          actId: 460,
          id: this.form.fId
        }
        getName(data).then(response => {
          if (response.data.length != 0) {
            this.before = response.data[0].userName
            if (this.current == this.before) {
              this.disappear = false
            }
          }
        })
      })
    },
    //箱信息操作限制
    cntrWeight(res) {
      if (res < 40 && res > 0) {
        return
      } else if (res == '' || res == null) {
      } else {
        this.$message({
          showClose: true,
          message: '单箱重量应在0-40吨之间',
          type: 'error',
          offset: 90
        })
      }
    },
    //获取客户名称下拉
    nameRemoteMethod() {
      let queryParams = { pageNum: 1 }
      getFName(queryParams).then(response => {
        this.nameOptions = response.data
      })
    },
    //货名下拉
    goodRemoteMethod() {
      let queryParams = { pageNum: 1 }
      getGoodName(queryParams).then(response => {
        this.goodsOptions = response.data

      })
    },
    //箱型下拉获取
    cntrtypeRemoteMethod() {
      let queryParams = { pageNum: 1 }
      getCntr(queryParams).then(response => {
        this.cntrOptions = response.rows
      })
    },
    //计价单位
    // corpsRemoteMethod(name) {
    //   if (name == null || name === "") {
    //     return false;
    //   }
    //   let queryParams = { pageNum: 1, fName: name, type: 1 };
    //   listCorps(queryParams).then((response) => {
    //     this.fMblnoOptions = response.rows;
    //     this.KHblnoOptions = response.rows;
    //   });
    // },

    //应付信息新行
    addpayment() {
      this.warehouseCrList.push({
        fBusinessType: null,
        fCorpid: null,
        fFeeid: null,
        fFeeUnitid: '7',
        fQty: null,
        fUnitprice: null,
        fAmount: null,
        fStltypeid: null,
        fCurrency: 'RMB',
        fExrate: '1',
        fTaxrate: this.fTaxrate,
        fSrcTypeId: 0,
        remarks: null
      })
    },
    // 数量计算
    changeContractAmt(row) {
      let fQty = 0
      let fUnitprice = 0
      if (row.fUnitprice) {
        fUnitprice = row.fUnitprice
      }
      if (row.fQty) {
        fQty = row.fQty
      }
      this.$set(row, 'fAmount', parseFloat(Number(fUnitprice) * Number(fQty)).toFixed(2))
    },

    // 变更计价单位
    changeFeeUnit(row) {
      if (!row.fFeeUnitid) {
        return false
      }
      // if (row.fFeeUnitid === "2") {
      //   this.$set(row, "fQty", (this.fGrossweight / 1000).toFixed(2));
      // } else if (row.fFeeUnitid === "1") {
      //   this.$set(row, "fQty", this.fQty);
      // } else if (row.fFeeUnitid === "3") {
      //   this.$set(row, "fQty", (this.fNetweight / 1000).toFixed(2));
      // } else if (row.fFeeUnitid === "7") {
      //   this.$set(row, "fQty", this.fCntqty);
      // } else {
      //   this.$set(row, "fQty", 0);
      // }
      if (row.fUnitprice) {
        this.$set(
          row,
          'fAmount',
          parseFloat(Number(row.fUnitprice) * Number(row.fQty)).toFixed(2)
        )
      }
    },

    // 选择费用信息时获取计价单位
    // changeFeeId(row) {
    //   for (let li in this.fWbuOptions) {
    //     if (row.fFeeid === this.fWbuOptions[li].fId) {
    //       this.$set(row, "fFeeUnitid", this.fWbuOptions[li].fFeeunitid + "");
    //       this.changeFeeUnit(row);
    //       break;
    //     }
    //   }
    // },
    // 远程模糊查询费用名称
    fWRemoteMethod(name) {
      if (name == null || name === '') {
        return false
      }
      let queryParams = { pageNum: 1, fDc: 'C', fName: name }
      listFees(queryParams).then((response) => {
        this.fCNameOptions = response.rows
      })
      let query = { pageNum: 1, fDc: 'D', fName: name }
      listFees(query).then((response) => {
        this.fDNameOptions = response.rows
      })
    },

    // 收款合计
    warehouseDrSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (column.label == '单价' || column.label == '数量' || column.label == '金额') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      });
      this.amountDr = sums[8]
      return sums
    },
    //付款合计
    warehouseCrSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (column.label == '单价' || column.label == '数量' || column.label == '金额') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      });
      this.amountCr = sums[8]
      return sums
    },
    addOrUpdateHand(form) {
      // if(form.fMblno == null){
      //   this.addOrUpdateVisib = false;
      //   this.$message.error("提单号为空，请维护提单号")
      //   return false
      // }else{
      //   this.addOrUpdateVisib = true;
      // }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.addOrUpdateVisib = true
          this.$nextTick(() => {
            let actId = ''
            if (this.form.fBillstatus < 6) {
              actId = '410'
              this.$refs.ApprovalComments.init(form.fId,actId,this.form.fMblno)
            } else if (this.form.moneyStatus != null && this.form.moneyStatus < 6) {
              actId = '460'
              this.$refs.ApprovalComments.init(form.fId, actId)
            } else {
              actId = '420'
              this.$refs.ApprovalComments.init(form.fId, actId)
            }
          })
        } else {
          this.$message.error('提单号为空，请维护提单号')
        }
      })
    },
    //首页审批跳转关闭返回首页
    cancelTwo() {
      this.open = false
      let view = {
        fullPath: '/domesticTrade/orderInformation?data=%7B%22fId%22%3A687%7D',
        hash: '',
        matched: Array(2),
        meta: Object,
        name: 'OrderInformation',
        params: Object,
        path: '/domesticTrade/orderInformation',
        query: Object,
        title: '订单信息'
      }
      this.$router.push({ path: '/index' })
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
      Global.$emit('removeCache', 'closeSelectedTag', view)
    },

    // 查看审批流
    getDataList() {
      this.addOrUpdateVisible = false
    },
    returnData() {
      this.addOrUpdateVisib = false
      this.open = false
      this.cancelTwo()
    },

    addOrUpdateHandle() {
      this.addOrUpdateVisible = true
      let id = '448'
      let actId = ''
      if (this.form.fBillstatus < 6) {
        actId = '410'
      } else if (this.form.moneyStatus != null && this.form.moneyStatus < 6) {
        actId = '460'
      } else {
        actId = '420'
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.form.fId, actId)
      })
    },
    handleSelect() {
    },
    //应收新行
    addCollection() {
      this.warehouseDrList.push({
        fBusinessType: null,
        fCorpid: this.form.corpName,
        fFeeid: null,
        fFeeUnitid: '7',
        fQty: null,
        fUnitprice: null,
        fAmount: null,
        fStltypeid: null,
        fCurrency: 'RMB',
        fExrate: '1',
        fTaxrate: this.fTaxrate,
        fSrcTypeId: 0,
        remarks: null
      })
    },
    //提交审批
    approval(res) {
      if (!this.form.fMblno) {
        this.$message.error('请维护提单号')
        return false
      }
      if (this.dataList.length === 0) {
        this.$message.error('请维护箱信息')
        return false
      }
      if (res != 1 && this.form.fMblno || res != 1 && this.dataList.length != 0) {
        this.$router.push({ path: '/domesticTrade/myOrder' })
        this.modify = true
      }
      let form = {
        fId: this.form.fId,
        fMblno: this.form.fMblno
      }
      let formData = new window.FormData()
      for (let li in this.warehouseDrList) {
        this.warehouseDrList[li].fMblno = this.form.fMblno
        for (let item in this.nameOptions) {
          if (this.warehouseDrList[li].fCorpid == this.nameOptions[item].fName) {
            this.warehouseDrList[li].fCorpid = this.nameOptions[item].fId
          }
        }
      }
      for (let item in this.warehouseCrList) {
        this.warehouseCrList[item].fMblno = this.form.fMblno
      }
      formData.append('tWarehousebills', JSON.stringify(form))
      // formData.append("tWarehousebills",JSON.stringify(this.form))
      formData.append('tWarehousebillsCntritems', JSON.stringify(this.dataList))
      formData.append('tWarehousebillsfeesDr', JSON.stringify(this.warehouseDrList))
      formData.append('tWarehousebillsfeesCr', JSON.stringify(this.warehouseCrList))
      postApproval(formData).then(response => {
        this.msgSuccess('操作成功')
        if (response.data.tWarehouseBills) {
          this.form = response.data.tWarehouseBills
        }
        if (response.data.tWarehousebillsCntritemsList) {
          this.dataList = response.data.tWarehousebillsCntritemsList
        }
        if (response.data.warehousebillsfeesCrList) {
          this.warehouseCrList = response.data.warehousebillsfeesCrList
          for (let item in this.warehouseCrList) {
            this.$set(this.warehouseCrList[item], 'fFeeUnitid', JSON.stringify(this.warehouseCrList[item].fFeeunitid))
          }
        }
        if (response.data.warehousebillsfeesDrList) {
          this.warehouseDrList = response.data.warehousebillsfeesDrList
          for (let item in this.warehouseDrList) {
            this.$set(this.warehouseDrList[item], 'fFeeUnitid', JSON.stringify(this.warehouseDrList[item].fFeeunitid))
          }
        }
      })
    },
    //新行
    addList() {
      this.dataList.push({
        fManual: '1',
        fCntrno: null,
        fSealno: null,
        fCntrweight: null,
        fGoodsid: null,
        fPackageid: null,
        fCntrid: null
      })
    },
    //查看附件
    check(status) {
      this.dialogVisible = true
      if (status === 1) {
      } else {
      }
    },
    saveFile() {
      this.row.accessoryList = this.file
      this.dialogVisible = false
      this.relevantAttachments = []
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    //多选框选中
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.fId)
      this.select = selection
    }
  }
}
</script>
<style lang="scss" scoped>
.tabSetting {
  display: flex;
  justify-content: flex-end;
}

.listStyle {
  display: flex;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}

.listStyle:last-child {
  border-bottom: 1px solid #dcdfe6;
}

.progress {
  display: flex;
  align-items: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 100%;
}

.el-form {
  padding-top: 20px;
  //border-top:1px dashed #ccc;
}

.selectForm > > > .el-form-item__label {
  font-size: 12px !important;
}
.app-container /deep/ .el-collapse-item__content{
  padding-bottom:0
}
</style>
<style lang="scss">
.el-collapse-item__header {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 5px;
  background-color: #f8f8f9;
}

.el-form-item__label {
  font-size: 12px;
}
</style>