Warehouse_management_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="modify"
                  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="fDestportid">
                <el-select
                    v-model="form.fLoadportid"
                    filterable
                    remote
                    style="width: 100%;"
                    :disabled="modify"
                    class="elSelect"
                    placeholder="请输入模糊查找目的港口"
                >
                  <el-scrollbar>
                    <el-option
                        v-for="(dict, index) in fMblnoOptions"
                        :key="dict.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                    ></el-option>
                  </el-scrollbar>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目的港口" prop="destportid">
                <el-select
                    v-model="form.fDestportid"
                    filterable
                    remote
                    style="width: 100%;"
                    :disabled="modify"
                    class="elSelect"
                    placeholder="请输入模糊查找目的港口"
                >
                  <el-scrollbar>
                    <el-option
                        v-for="(dict, index) in fMblnoOptions"
                        :key="dict.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                    ></el-option>
                  </el-scrollbar>
                </el-select>
              </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="modify"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运输条款" prop="fServiceitems">
                <el-select
                  v-model="form.fServiceitems"
                  :disabled="modify"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(dict, index) in transport"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款方式" prop="fPaymode">
                <el-select
                  v-model="form.fPaymode"
                  :disabled="modify"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(dict, index) in paymentMethod"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="售票方" prop="fInvoceobj">
                <el-select
                  v-model="form.fInvoceobj"
                  :disabled="modify"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(dict, index) in drawee"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="箱内签收单" prop="fSign">
                <el-select
                  v-model="form.fSign"
                  :disabled="modify"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(dict, index) in cEsign"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订舱人扣货" prop="fDetentioncargo">
                <el-select
                  v-model="form.fDetentioncargo"
                  :disabled="modify"
                  style="width: 100%"
                  size="small"
                >
                  <el-option
                  v-for="(dict, index) in etentioncargo"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船名" prop="vslid">
                <el-select
                    v-model="form.fVslid"
                    filterable
                    remote
                    style="width: 100%;"
                    :disabled="modify"
                    class="elSelect"
                    placeholder="请输入模糊查找目的船名"
                >
                  <el-scrollbar>
                    <el-option
                        v-for="(dict, index) in vslidList"
                        :key="dict.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                    ></el-option>
                  </el-scrollbar>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="航次" prop="voyidName">
                <el-select
                    v-model="form.fVoyid"
                    filterable
                    remote
                    style="width: 100%;"
                    :disabled="modify"
                    class="elSelect"
                    placeholder="请输入模糊查找目的船名"
                >
                  <el-scrollbar>
                    <el-option
                        v-for="(dict, index) in voyidList"
                        :key="dict.fId"
                        :label="dict.fNo"
                        :value="dict.fId"
                    ></el-option>
                  </el-scrollbar>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="14">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  v-model="form.remark"
                  :disabled="modify"
                  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="modify"-->
            <!--                  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="modify"-->
            <!--                  size="small"-->
            <!--                  style="width: 100%"-->
            <!--                  placeholder="手工输入"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="6">
              <el-form-item label="目的港口" prop="distinationidName">
                <el-input
                  v-model="estimatedTime.distinationidName"
                  :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="modify"
                  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="modify"
                  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="modify"
                  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="modify"
                  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="modify"
                  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="modify"
                  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="fInsurance">
                <el-select
                  v-model="form.fInsurance"
                  :disabled="modify"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(dict, index) in insurance"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险货值（万元）" prop="fInsuranceamt">
                <el-input
                  v-model="form.fInsuranceamt"
                  :disabled="modify"
                  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="fGoodsid" min-width="100px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.fGoodsid" @change="selectChange(scope)" :disabled="modify">
                <el-option
                v-for="(item,index) in goods"
                :key="index"
                :label="item.fName"
                :value="item.fId"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="货类" prop="typeidName" min-width="100px">
                        <template slot-scope="scope">
              <el-input v-model="scope.row.typeidName" :disabled="modify"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="包装类型" prop="fPackageid" min-width="100px">
                        <template slot-scope="scope">
              <el-select v-model="scope.row.fPackageid" :disabled="modify">
                <el-option
                v-for="item in packgeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="箱型" prop="fCntrid"  min-width="100px">
                        <template slot-scope="scope">
              <el-select v-model="scope.row.fCntrid" @change="seleEt(scope)" :disabled="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 label="箱量" prop="fCntrcount" min-width="100px">
                        <template slot-scope="scope">
              <el-input v-model="scope.row.fCntrcount" :disabled="modify" :maxlength="3" oninput='this.value=this.value.replace(/[^\d.]/g,"")'></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单箱重量（吨）" prop="fCntrweight" min-width="120px">
                        <template slot-scope="scope">
              <el-input v-model="scope.row.fCntrweight" :disabled="modify" @input="cntrWeight"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="箱态" prop="fCntrstatus" min-width="100px">
                        <template slot-scope="scope">
              <el-select v-model="scope.row.fCntrstatus" :disabled="modify">
                <el-option
                v-for="item in fStatus"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="自备货柜" prop="fSoc" min-width="100px">
                        <template slot-scope="scope">
              <el-select v-model="scope.row.fSoc" :disabled="modify">
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <div v-if="whether === true">
            <el-table-column label="设置温度（℃）" prop="fTemperature" min-width="120px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fTemperature" :disabled="modify" @input="temperature" oninput='this.value=this.value.replace(/[^\-?\d.]/g,"")'></el-input>
              </template>
            </el-table-column>
            <el-table-column label="风门开度（%）" prop="fDraught" min-width="120px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fDraught" :disabled="modify" @input="throttleOpening" oninput='this.value=this.value.replace(/[^\d.]/g,"")'></el-input>
              </template>
            </el-table-column>
            <el-table-column label="湿度设置（%）" prop="fHumidity" min-width="120px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fHumidity" :disabled="modify" @input="throttleOpening" oninput='this.value=this.value.replace(/[^\d.]/g,"")'></el-input>
              </template>
            </el-table-column>
            <el-table-column label="预冷要求" prop="fPrecooling" min-width="100px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.fPrecooling" :disabled="modify">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </div>
          <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
            >
            <el-button
              type="danger"
              size="small"
              :disabled="selection.length === 0"
              @click="deleteAll"
              v-if="form.fCargoPlanning == 1"
            >批量删除</el-button>
            <el-button
              type="warning"
              size="small"
              @click="dialogPrint"
              :disabled="dataList.length === 0"
            >打印运单</el-button>
            <el-upload
              class="upload-demo"
              :action="baseURL"
              :headers="headers"
              :on-progress="uploading"
              :show-file-list=false
              :data="{
                fId:goodsList[0].fId
              }"
              :on-success="importTemplate"
              accept=".xls,.xlsx"
              :disabled="modify"
              multiple
              style="float: right;margin-right: 20px">
              <el-button size="small" style="margin-left: 5px" type="warning" :disabled="modify">导入</el-button>
            </el-upload>
          </div>
        </div>
        <el-table :data="dataList" style="width: 100%;" @selection-change="Selectinventory">
          <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="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="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="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="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="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="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="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 === 1">协议</span>
              <span v-if="scope.row.fSrcTypeId === 2">订舱</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            width="150px"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                :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 === 1">协议</span>
              <span v-if="scope.row.fSrcTypeId === 2">订舱</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            width="150px"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                :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 && 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="form.fBillstatus <= 11 && form.fBillstatus >= 6" @click="modify = false">修 改
      </el-button>
      <el-button type="success" :disabled="modify" v-if="form.fBillstatus <= 11 || form.fBillstatus >= 6" @click="approval(1)">保 存
      </el-button>
      <el-button type="primary" :disabled="modify" v-if="form.fBillstatus == 11 && this.form.moneyStatus < 4"
                 @click="feeSubmission"
      >费用请核
      </el-button>
      <el-button type="success" v-if="approVal" @click="addOrUpdateHand(form,'f_billstatus')">审 批</el-button>
      <el-button type="primary"
                 v-if="(form.fUpdeteStatus === 4 || form.fUpdeteStatus === 5 || form.fUpdeteStatus === 6 || form.fUpdeteStatus === 2) && (form.fSubmitUpdate == 2 || form.fSubmitUpdate == 4) && (form.fDeleteStatus === 2 || form.fDeleteStatus === 4) && approvalTwo"
                 @click="modifyApproval()"
      >审批
      </el-button>
      <el-button v-if="!form.fMblno && form.fBillstatus < 5" type="danger" @click="rejectDeletion">
        驳回并删除
      </el-button>
      <el-button type="danger" :disabled="disappear" v-if="form.moneyStatus === 4 && current == before"
                 @click="revokeTwo('f_billstatus')"
      >撤销请核
      </el-button>
      <el-button type="primary"
                 v-if="(form.fUpdeteStatus !== 4 && form.fUpdeteStatus !== 5 && form.fUpdeteStatus !== 6) && (form.fBillstatus !== 11 ||form.moneyStatus == 1 || (form.moneyStatus != null && form.moneyStatus >= 4))"
                 @click="addOrUpdateHandle('f_billstatus')"
      >查看审批
      </el-button>
      <el-button type="primary"
                 v-if="(form.fUpdeteStatus === 4 || form.fUpdeteStatus === 5 || form.fUpdeteStatus === 6 || form.fUpdeteStatus === 2) && (form.fSubmitUpdate == 2 || form.fSubmitUpdate == 4) && (form.fDeleteStatus === 2 || form.fDeleteStatus === 4) && dataElist"
                 @click="revisionApproval()"
      >查看审批
      </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>
<!--    打印运单-->
    <el-dialog
      :visible.sync="dialogPrinting"
      width="30%"
      append-to-body
      fullscreen
      :show-close="false"
      :close-on-press-escape="false"
      :before-close="dialogVisible = false"
    >
      <div ref="print" style="width: 99%;margin:1px auto auto;">
        <div style="width: 100%;">
          <div
            style="width: 50%;height: 160px;float: left;justify-content:center;align-items:center;display:-webkit-flex">
            <div>
              <h1>青岛凯和志诚物流有限公司</h1>
              <h3 style="text-align: center">水路集装箱货物运单</h3>
            </div>
          </div>
          <div
            style="width: 50%;height: 160px;float: left;justify-content:center;align-items:center;display:-webkit-flex">
            <div style="width: 500px;border: 1px solid #cccccc;padding: 10px">
              <h4 style="margin: 0">1、本运单一是四联，第一联退回发货人或托运人，做为目的港收货人提货凭证。</h4>
              <h4 style="margin: 0">2、运单一经题取货物后即失去提货效力。</h4>
              <h4 style="margin: 0">3、运单非有价证券，不得流通或转让给非本运单指定的第三方。</h4>
              <h4 style="margin: 0">4、托运人必须投保货物运输综合险，否则由此产生的损失由托运人自负。</h4>
              <h4 style="margin: 0">5、船东过失承运人不承担责任，由过失方承担。</h4>
            </div>
          </div>
        </div>
        <div style="display:flex;justify-content: space-between;width: 61.3%;margin-left: 10px">
          <p>离港日:{{ estimatedTime.fEtd }}</p>
          <p>运单号:{{ form.fMblno }}</p>
          <p>运输条款:{{ form.fServiceitems | fServiceitemsNameFormat(transport) }}</p>
          <p>业务号:{{ form.fBillno }}</p>
        </div>
        <table border="1" style="border-collapse: collapse;width: 100%;text-align: center">
          <tr class="listTd">
            <td style="width: 9%;">船名</td>
            <td style="width: 9%;">{{ form.fVslid | fVslidFormat(vslidList) }}</td>
            <td style="width: 9%;">航次</td>
            <td style="width: 11%;" colspan="2">{{ form.fVoyid | voyidNameFormat(voyidList) }}</td>
            <td style="width: 9%;">装货港</td>
            <td style="width: 9%;">{{ form.fLoadportid | portFormat(fMblnoOptions) }}</td>
            <td style="width: 9%;">卸货港</td>
            <td style="width: 11%;" colspan="2">{{ form.fDestportid | portFormat(fMblnoOptions) }}</td>
            <td style="width: 12%;" rowspan="4" colspan="2">卸货人日期(章)</td>
            <td style="width: 12%;" rowspan="4" colspan="2">收货人(章)</td>
          </tr>
          <tr class="listTd">
            <td>第一接驳船</td>
            <td></td>
            <td>航次</td>
            <td colspan="2"></td>
            <td>第一换装港</td>
            <td colspan="4"></td>
          </tr>
          <tr class="listTd">
            <td>第二接驳船</td>
            <td></td>
            <td>航次</td>
            <td colspan="2"></td>
            <td>第二换装港</td>
            <td colspan="4"></td>
          </tr>
          <tr class="listTd">
            <td rowspan="3">托运人</td>
            <td>全称</td>
            <td rowspan="3" colspan="2">
              {{ form.fShippername }}{{
                form.fShipperattn ? ',' + form.fShipperattn : ''
              }}{{ form.fShippertel ? ',' + form.fShippertel : '' }}
            </td>
            <td rowspan="3">收货人</td>
            <td>全称</td>
            <td colspan="4" rowspan="3">
              {{ form.fConsigneername }}{{
                form.fConsigneeattn ? ',' + form.fConsigneeattn : ''
              }}{{ form.fConsigneetel ? ',' + form.fConsigneetel : '' }}
            </td>
          </tr>
          <tr class="listTd">
            <td>地址:电话</td>
            <td>地址:电话</td>
            <td rowspan="3" colspan="2">托运人(签盖)</td>
            <td rowspan="3" colspan="2">承运人(签盖)</td>
          </tr>
          <tr class="listTd">
            <td>银行:帐号</td>
            <td>银行:帐号</td>
          </tr>
          <tr class="listTd">
            <td rowspan="2" colspan="2">箱号</td>
            <td rowspan="2" colspan="2">封号</td>
            <td rowspan="2">批号</td>
            <td rowspan="2">货名</td>
            <td rowspan="2">件数</td>
            <td rowspan="2">价值</td>
            <td rowspan="2">托运人确定重量(吨)</td>
            <td rowspan="2">计算重量(吨)</td>
          </tr>
          <tr>
            <td :rowspan="dataList.length+2" align="center" colspan="4">
              <img src="../../../../assets/images/chapter.png" alt="无图片" style="width: 50%;">
            </td>
          </tr>
          <!--        此处为遍历列表-->
          <tr class="listTd" v-for="(item,index) in dataList" :key="index">
            <td colspan="2">{{ item.fCntrno }}</td>
            <td colspan="2">{{ item.fSealno }}</td>
            <td></td>
            <td>{{ item.fGoodsid | goodsFormat(goodsOptions) }}</td>
            <td>{{ item.fCntrid | cntrFormat(cntrOptions) }}</td>
            <td></td>
            <td></td>
            <td>{{ item.fCntrweight }}</td>
          </tr>
          <tr class="listTd">
            <td rowspan="5">托运人/发货人须知</td>
            <td colspan="4" rowspan="5" style="text-align: left;padding: 10px;">
              1、粗线内各栏由发货人填写，如有更改时，须在更改处盖章；订舱委托书下条款及运单均为本运输合同组成部分，发货人已充分阅读并同意该部分条款。<br>2、按规定正确、清楚填写;并逐张盖上账号、公章，货名、件数、重量不得省略。由于申报不实给承运人、港口经营人造成损失的，托运人应当负赔偿责任；<br>3、托运人负责封箱，承运人对上述箱内货物的描述不知。<br>4、如超载引起事故，由装箱人负责；<br>5、为确保货物安全，货物装箱前请先验箱，无异议视为集装箱箱况完好；<br>6、严禁将危险货物、腐蚀箱体的货物及国家禁运货物装入箱内。<br>7、与本运单有关的任何争议，各方当事人一致同意选择由青岛海事法院管辖
            </td>
            <td rowspan="4">箱量合计：</td>
            <td rowspan="4"></td>
            <td rowspan="4">备注：</td>
            <td rowspan="4" colspan="2"></td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>
          <tr class="listTd">
            <td style="height: 40px;">收费项目</td>
            <td>收费明细</td>
            <td></td>
            <td>收费金额</td>
            <td colspan="2"></td>
            <td colspan="2">预付/到付</td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPrinting = false">取 消</el-button>
        <el-button type="primary" @click="Printing">打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCorps,
  addmodify,
  getCntr,
  postApproval,
  listFees,
  getGoodName,
  getFName,
  getfee,
  getName,
  portInquiry,
  nameOfVessel,
  voyageNumber,
  reject,
  deleteAll,
  shippingList
} 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'
import request from '@/utils/request'

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 {
      selection: [],
      insurance:[],
      etentioncargo:[],
      vslidList:[],
      voyidList:[],
      cEsign:[],
      transport:[],
      paymentMethod:[],
      drawee:[],
      whether:false,
      fStatus:[],
      goods:[],
      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,
      dataElist:false,
      addOrUpdateVisib: false,
      warehouseDrList: [],
      goodsList: [],
      dataList: [],
      visible: false,
      dataForm: {},
      modify: true,
      doNot: true,
      activeNames: ['1', '2', '3', '4', '5', '6'],
      form: {},
      fMblnoOptions:[],
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      relevantAttachments: [],
      headers: { Authorization: 'Bearer ' + getToken() },
      baseURL: process.env.VUE_APP_BASE_API + '/khwarehouse/warehousebills/importCreate',
      //集装箱尺码字典表
      CntrsizeOptions: [],
      //模糊查询箱类型
      typeOptions: [],
      //附件上传弹窗
      dialogVisible: false,
      //调箱动作字典表
      boxActionOptions: [],
      //集装箱主字典表
      ownerOptions: [],
      //模糊下拉查询地点
      addressOptions: [],
      //空重字典表
      updateEFOptions: [],
      //状态字典表
      cntrstatusOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户详情表格数据
      corpsList: [],
      // 查询参数
      select: '',
      querDate: [],
      file: [],
      row: [],
      res: [],
      formList:{},
      approvalTwo:false,
      amountDr:null,
      amountCr:null,
      actId: null,
      // 打印弹窗
      dialogPrinting: false,
      boxSorting: {
        pageNum: 1,
        pageSize: 30,
        total: null,
      },
      // 上传loading
      uploadLoading: false,
    }
  },
  //页面跳转后传递参数
  activated() {
    console.log(this.$route.query)
    if (this.$route.query.testing)this.dataElist = true
    this.modify = true
    let formDate
    if (this.$route.query.list) {
      formDate = {
        fId: JSON.parse(this.$route.query.list).billId
      }
      this.actId = JSON.parse(this.$route.query.list).actId
      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
    }else if (this.$route.query.testing){
      console.log(this.$route.query.testing)
      formDate = {
        fId:JSON.parse(this.$route.query.testing).billId
      }
      this.formList = formDate
      this.approvalTwo = true
      this.cancelButton = false
    }
    if (formDate) {
      addmodify(formDate).then(response => {
        console.log(response)
        if(response.code == 200){
          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.$set(this.form,'fPaymode',JSON.stringify(this.form.fPaymode))
          this.$set(this.form,'fSign',JSON.stringify(this.form.fSign))
          this.$set(this.form,'fDetentioncargo',JSON.stringify(this.form.fDetentioncargo))
          this.goodsList = response.rows[0].tWarehousebillsCntrList
          this.estimatedTime = response.rows[0].tVoyageL
          if (response.rows[0].tWarehousebillsCntritemsList !== null) {
            this.dataList = response.rows[0].tWarehousebillsCntritemsList
          }else this.dataList = []
          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() {
    nameOfVessel().then(res =>{
      this.vslidList = res.rows
    })
    voyageNumber().then(res =>{
      this.voyidList = res.rows
    })
    portInquiry().then(res =>{
      this.fMblnoOptions = res.rows;
    })
    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.getDicts('f_updateEF').then((response) => {
      if (response.data) {
        this.fStatus = response.data
      }
    })
    this.getDicts('f_serviceitems').then((response) => {
      if (response.data) {
        this.transport = response.data
      }
    })
    this.getDicts('f_paymode').then((response) => {
      if (response.data) {
        this.paymentMethod = response.data
      }
    })
    this.getDicts('f_invoceobj').then((response) => {
      if (response.data) {
        this.drawee = response.data
      }
    })
    this.getDicts('f_sign').then((response) => {
      if (response.data) {
        this.cEsign = response.data
      }
    })
    this.getDicts('f_detentioncargo').then((response) => {
      if (response.data) {
        this.etentioncargo = response.data
      }
    })
    this.getDicts('f_insurance').then((response) => {
      if (response.data) {
        this.insurance = response.data
      }
    })
    this.cntrtypeRemoteMethod()
    this.goodRemoteMethod()
    this.nameRemoteMethod()
    this.fWRemoteMethod()
    this.queryGoods()
    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
    })
  },
  filters: {
    fServiceitemsNameFormat(row, transport) {
      let name;
      transport.map(e => {
        if (row == e.dictValue) {
          name = e.dictLabel;
        }
      })
      return name;
    },
    fVslidFormat(row, vslidList) {
      let name;
      vslidList.map(e => {
        if (row == e.fId) {
          name = e.fName;
        }
      })
      return name;
    },
    voyidNameFormat(row, voyidList) {
      let name;
      voyidList.map(e => {
        if (row == e.fId) {
          name = e.fNo;
        }
      })
      return name;
    },
    portFormat(row, fMblnoOptions) {
      let name;
      fMblnoOptions.map(e => {
        if (row == e.fId) {
          name = e.fName;
        }
      })
      return name;
    },
    goodsFormat(row, goodsOptions) {
      let name;
      goodsOptions.map(e => {
        if (row == e.fId) {
          name = e.fName;
        }
      })
      return name;
    },
    cntrFormat(row, cntrOptions) {
      let name;
      cntrOptions.map(e => {
        if (row == e.fId) {
          name = e.fNo;
        }
      })
      return name;
    },
  },
  methods: {
    rejectDeletion(){
      this.$confirm('驳回并删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reject(this.form.fId).then(res =>{
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.cancelTwo()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    seleEt(scope) {
      console.log(scope)
      for (let item in this.cntrOptions) {
        if (this.cntrOptions[item].fId === scope.row.fCntrid) {
          if (this.cntrOptions[item].fType === 2) {
            this.whether = true;
            return;
          } else {
            this.whether = false;
            return;
          }
        }
      }
    },
    throttleOpening(res) {
      if (res <= 100) {
      } else {
        this.list.fDraught = '';
        this.$message({
          showClose: true,
          message: '不能大于100%或小于0%',
          type: 'error',
          offset: 90
        });
      }
    },
    temperature(res) {
      if (res < 20 && res > -30) {
      } else if (res == '-') {
      } else {
        this.list.fTemperature = '';
        this.$message({
          showClose: true,
          message: '冷藏箱温度为-30℃至20℃之间的整数',
          type: 'error',
          offset: 90
        });
      }
    },
    selectChange(scope) {
      for (let item in this.goods) {
        if (this.goods[item].fId === scope.row.fGoodsid) {
          scope.row.typeidName = this.goods[item].typeName;
        }
      }
    },
    queryGoods() {
      getGoodName().then(res=>{
        if(res.code == 200){
          this.goods = res.data
        }
      })
    },
    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(status) {
      let data = {
        actId: 460,
        billId: this.form.fId,
        id: this.form.fId,
        fidStatus: status,
      }
      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
              if (response.rows[0].tWarehousebillsCntritemsList !== null) {
                this.dataList = response.rows[0].tWarehousebillsCntritemsList
              }else this.dataList = []
              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) {
        // console.log(this.warehouseCrList[1].fCorpid);
        for (let li in this.warehouseCrList) {
          if (!this.warehouseCrList[li].fBusinessType) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行业务类型为空，请维护业务类型')
            return false
          } else if (!this.warehouseCrList[li].fCorpid) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行客户名称为空，请维护客户名称')
            return false
          } else if (!this.warehouseCrList[li].fFeeid) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行费用名称为空，请维护费用名称')
            return false
          } else if (!this.warehouseCrList[li].fQty) {
            this.$message.error('应付费用第' + (Number(li) + 1) + '行数量为空，请维护数量')
            return false
          } else if (!this.warehouseCrList[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,
        remark: 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,status) {
      // 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,status,actId,this.form.fMblno)
            // } else if(this.form.fBillstatus > 6 && this.form.fBillstatus <= 11 && this.form.moneyStatus < 4){
            //   actId = '420'
            //   this.$refs.ApprovalComments.init(form.fId, status,actId)
            // }else if (this.form.fBillstatus == 11 && this.form.moneyStatus >= 4 && this.form.moneyStatus < 6) {
            //   actId = '460'
            //   this.$refs.ApprovalComments.init(form.fId,status,actId)
            // }
            if (this.actId == '410') {
              this.$refs.ApprovalComments.init(form.fId,status,this.actId,this.form.fMblno)
            } else if (this.actId == '474') {
              this.$refs.ApprovalComments.init(form.fId,'f_dismount_status',this.actId)
            } else {
              this.$refs.ApprovalComments.init(form.fId,status,this.actId)
            }

          })
        } else {
          this.$message.error('提单号为空，请维护提单号')
        }
      })
    },
    modifyApproval(){
      this.addOrUpdateVisib = true
      let list = JSON.parse(this.$route.query.testing)
      this.$nextTick(() => {
        let actId = ''
        console.log(list)
        this.addOrUpdateVisible = true
        if(list.refno4 == 'XGDD'){
          actId = 471
        }else if (list.refno4 == 'XGTJ'){
          actId = 472
        }else if(list.refno4 == 'DDSC'){
          actId = 473
        }
        this.$refs.ApprovalComments.init(this.form.fId,status,actId,this.form.fMblno)
      })
    },
    //首页审批跳转关闭返回首页
    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()
    },
    revisionApproval(){
      let list = JSON.parse(this.$route.query.testing)
      let actId = ''
      this.addOrUpdateVisible = true
      if(list.refno4 == 'XGDD'){
        actId = 471
      }else if (list.refno4 == 'XGTJ'){
        actId = 472
      }else if(list.refno4 == 'DDSC'){
        actId = 473
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.form.fId,actId,list.fidStatus)
      })
    },
    addOrUpdateHandle(status) {
      this.addOrUpdateVisible = true
      let id = '448'
      let actId = ''
      if (!this.actId){
        if (this.form.fBillstatus < 6) {
          actId = '410'
        } else if (this.form.moneyStatus != null && this.form.moneyStatus < 6) {
          actId = '460'
        } else {
          actId = '420'
        }
      }else {
        actId = this.actId
      }
      if (this.actId == '474') status = 'f_dismount_status'
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.form.fId, actId ,status)
      })
    },
    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,
        remark: 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(this.form))
      formData.append("tWarehousebillsCntr",JSON.stringify(this.goodsList))
      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
          this.$set(this.form,'fPaymode',JSON.stringify(this.form.fPaymode))
          this.$set(this.form,'fSign',JSON.stringify(this.form.fSign))
          this.$set(this.form,'fDetentioncargo',JSON.stringify(this.form.fDetentioncargo))
        }
      if(response.data.tWarehousebillsCntrList){
        this.goodsList = response.data.tWarehousebillsCntrList
      }
        if (response.data.tWarehousebillsCntritemsList !== null) {
          this.dataList = response.data.tWarehousebillsCntritemsList
        }else this.dataList = []
        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
    },
    dialogPrint() {
      // for (let item in this.transport) {
      //   if (this.transport[item].dictValue == this.form.fServiceitems) {
      //     this.$set(this.form, 'fServiceitemsName', this.transport[item].dictLabel);
      //   }
      // }
      // this.fMblnoOptions.forEach(item => {
      //   if (item.fId == this.form.fLoadportid) {
      //     this.$set(this.form, 'fLoadportidName', item.fName);
      //   }
      //   if (item.fId == this.form.fDestportid) {
      //     this.$set(this.form, 'fDestportidName', item.fName);
      //   }
      // });
      // this.tableData.forEach(term => {
      //   this.goods.forEach(item => {
      //     if (item.fId == term.fGoodsid) {
      //       term.fGoodsid = item.fName;
      //     }
      //   });
      //   this.container.forEach(item => {
      //     if (item.fId == term.fCntrid) {
      //       term.fCntrid = item.fNo;
      //     }
      //   });
      // });
      this.dialogPrinting = true;
    },
    //确认打印
    Printing() {
      this.$printE(this.$refs.print);
    },
    Selectinventory(selection) {
      this.selection = selection;
    },
    deleteAll() {
      for (let item in this.selection) {
        if (!this.selection[item].fId) return this.$message.error('存在未保存的数据,请先保存再批量删除!');
      }
      let list = [];
      this.selection.forEach(item => list.push(item.fId));
      list = JSON.stringify(list)
        .replace(/\[|]/g, '');
      this.$confirm('此操作将永久删除已选' + this.selection.length + '条箱信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAll(list).then(res => {
            shippingList({fPid: this.form.fId}).then(res => {
              this.dataList = res.rows;
            })
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    //文件上传时
    uploading(event, file, fileList) {
      this.uploadLoading = true;
      this.openFullScreen(false, '文件正在解析中');
    },
    //遮罩层
    openFullScreen(res, text) {
      const loading = this.$loading({
        lock: true,
        text: text,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (res === true) loading.close();
      // setTimeout(() => {
      //   loading.close();
      // }, 1000);
    },
    //导入模板
    importTemplate(res, file) {
      console.log(res.data)
      if (res.data == 500) {
        this.$message.error(res.msg);
        return this.loading = false;
      } else if (res.code == 200) {
        if (res.msg === 'error') {
          console.log(res.data.List);
          if (res.data.tCnTrNoList && res.data.List){
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              type: 'error',
              duration: 10000,
              message: '<h3>导入数据有误</h3><h4 style="width: 80%;">' +res.data.tCnTrNoList+ '</h4><h4 style="width: 80%;">' + res.data.List + '</h4>'
            });
          }else if (res.data.tCnTrNoList && !res.data.List){
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              type: 'error',
              duration: 10000,
              message: '<h3>导入数据有误</h3><h4 style="width: 80%;">' +res.data.tCnTrNoList+ '</h4>'
            });
          }else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              type: 'error',
              duration: 10000,
              message: '<h3>导入数据有误</h3><h4 style="width: 80%;">' +res.data.List+ '</h4>'
            });
          }
          this.uploadLoading = false;
          return this.openFullScreen(true);
        }

        this.boxSorting = {
          pageNum: 1,
          total: null,
        };
        request({
          url: '/system/config/configKey/data_excel_pagenum',
          method: 'get',
        })
          .then(resErr => {
            console.log(resErr)
            if (resErr.msg) {
              this.boxSorting.pageSize = resErr.msg;
            } else {
              this.boxSorting.pageSize = 10;
            }
            request({
              url: '/warehouse/file/list',
              method: 'get',
              params: {
                fileName: res.data.fileName,
                pageNum: this.boxSorting.pageNum,
                pageSize: this.boxSorting.pageSize
              }
            })
              .then(response => {
                console.log(response);
                let i = this.dataList.length;
                this.boxSorting.total = response.total;
                let data = response.rows;
                data.forEach(item => {
                  item.fCntrid = this.goodsList[0].fCntrid
                  item.fGoodsid = this.goodsList[0].fGoodsid
                  item.fPackageid = this.goodsList[0].fPackageid
                })
                this.dataList = this.dataList.concat(data);
                if (this.boxSorting.total > 1) {
                  this.boxSorting.pageNum++;
                  this.boxInformatiNO(res, i);
                } else {
                  console.log(res)
                  request({
                    url: '/warehouse/file/delete/' + res.data.fileName,
                    method: 'delete',
                  });
                  this.loading = false;
                  this.openFullScreen(true);
                }
              });
          });
      } else {
        this.$message.error(res.msg);
      }
    },
    storageBox(res, i) {
      this.boxInformatiNO(res, i);
    },
    boxInformatiNO(res, i) {
      if ((Number(this.dataList.length) - i) < this.boxSorting.total) {
        request({
          url: '/warehouse/file/list',
          method: 'get',
          params: {
            fileName: res.data.fileName,
            pageNum: this.boxSorting.pageNum,
            pageSize: this.boxSorting.pageSize
          }
        })
          .then(response => {
            // this.tableData = this.tableData.concat(response.data.rows);
            // console.log(this.tableData);
            this.boxSorting.pageNum++;

            let data = response.rows;
            data.forEach(item => {
              item.fCntrid = this.goodsList[0].fCntrid
              item.fGoodsid = this.goodsList[0].fGoodsid
              item.fPackageid = this.goodsList[0].fPackageid
            })
            this.dataList = this.dataList.concat(data);

            // console.log(this.tableData.length+1,i);
            // if (Number(Number(this.tableData.length+1)-i) === this.boxSorting.total){
            //   this.loading = false
            //   this.openFullScreen(true)
            //   request({
            //     url: '/warehouse/file/delete/'+res.fileName,
            //     method: 'delete',
            //   })
            // }
            // console.log(this.boxSorting.total);
            this.storageBox(res, i);
            // this.tableData = this.tableData.concat(response.data.data);
            // let obj = {};
            // this.tableData = this.tableData.reduce((current, next) => {
            //   obj[next.fCntrno] ? '' : obj[next.fCntrno] = true && current.push(next);
            //   return current;
            // }, []);
          });
      } else {
        let obj = {};
        this.dataList = this.dataList.reduce((current, next) => {
          obj[next.fCntrno] ? '' : obj[next.fCntrno] = true && current.push(next);
          return current;
        }, []);
        request({
          url: '/warehouse/file/delete/' + res.data.fileName,
          method: 'delete',
        });
        this.uploading = false;
        this.openFullScreen(true);
      }
    },
  }
}
</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>