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

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

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

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

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

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

<!--            <template slot-scope="scope">-->
<!--              <el-select clearable v-model="scope.row.fManual" :disabled="modify">-->
<!--                <el-option />-->
<!--              </el-select>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" :disabled="scope.row.fManual == 0 || modify" @click="deleteRow(scope.$index, dataList)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item>
              <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"
                  >保 存</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="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.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fFeeid"
                  header-align="center"
                  align="center"
                  width="180px"
                  label="费用名称"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fFeeid"
                      filterable
                      remote
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      placeholder="费用名称"
                    >
                      <el-option
                        v-for="(dict, index) in fDNameOptions"
                        :key="index.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fFeeUnitid"
                  header-align="center"
                  align="center"
                  width="180px"
                  label="计价单位"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fFeeUnitid"
                      placeholder="请选择计价单位"
                      @change="changeFeeUnit(scope.row)"
                      clearable
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                    >
                      <el-option
                        v-for="(dict, index) in jFeetunitOptions"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fQty"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="数量"
                >
                  <template slot-scope="scope">
                    <el-input
                      oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                      v-model="scope.row.fQty"
                      placeholder="数量"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      @change="changeContractAmt(scope.row)"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fUnitprice"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="单价"
                >
                  <template slot-scope="scope">
                    <el-input
                      oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                      v-model="scope.row.fUnitprice"
                      placeholder="单价"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      @change="changeContractAmt(scope.row)"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fAmount"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="金额"
                >
                  <template slot-scope="scope">
                    <el-input
                      disabled
                      oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                      v-model="scope.row.fAmount"
                      placeholder="金额"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fStltypeid"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="结算方式"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fStltypeid"
                      placeholder="请选择结算表票结、月结"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                    >
                      <el-option
                        v-for="(dict, index) in fStltypeOptions"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="parseInt(dict.dictValue)"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fCurrency"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="币别"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fCurrency"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      placeholder="币别"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fExrate"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="汇率"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fExrate"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      placeholder="汇率"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fTaxrate"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="税率"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fTaxrate"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      placeholder="税率"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fSrcTypeId"
                  header-align="center"
                  align="center"
                  width="130px"
                  label="来源"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.fSrcTypeId === 0">录入</span>
                    <span v-if="scope.row.fSrcTypeId !== 0">协议</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="remarks"
                  header-align="center"
                  align="center"
                  width="150px"
                  label="备注"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.Remarks"
                      :disabled="modify || scope.row.fSrcTypeId !== 0"
                      placeholder="备注"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                  width="200px"
                >
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="
                          deleteRow(scope.$index, warehouseDrList)
                        "
                      size="small"
                      :disabled="modify"
                    >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
      <el-collapse-item>
              <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"
                    :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="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="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.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
          <el-table-column
            prop="fFeeid"
            header-align="center"
            align="center"
            width="180px"
            label="费用名称"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fFeeid"
                filterable
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                remote
                placeholder="费用名称"
              >
                <el-option
                  v-for="(dict, index) in fCNameOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fFeeUnitid"
            header-align="center"
            align="center"
            width="180px"
            label="计价单位"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fFeeUnitid"
                filterable
                remote
                @change="changeFeeUnit(scope.row)"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="计价单位"
              >
                <el-option
                  v-for="(dict, index) in jFeetunitOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fQty"
            header-align="center"
            align="center"
            width="150px"
            label="数量"
          >
            <template slot-scope="scope">
              <el-input
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fQty"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                @change="changeContractAmt(scope.row)"
                placeholder="数量"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fUnitprice"
            header-align="center"
            align="center"
            width="150px"
            label="单价"
          >
            <template slot-scope="scope">
              <el-input
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fUnitprice"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                @change="changeContractAmt(scope.row)"
                placeholder="单价"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fAmount"
            header-align="center"
            align="center"
            width="150px"
            label="金额"
          >
            <template slot-scope="scope">
              <el-input
                disabled
                oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
                v-model="scope.row.fAmount"
                placeholder="金额"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fStltypeid"
            header-align="center"
            align="center"
            width="130px"
            label="结算方式"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fStltypeid"
                placeholder="请选择结算表票结、月结"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
              >
                <el-option
                  v-for="(dict, index) in fStltypeOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="fCurrency"
            header-align="center"
            align="center"
            width="150px"
            label="币别"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fCurrency"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="币别"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fExrate"
            header-align="center"
            align="center"
            width="150px"
            label="汇率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fExrate"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="汇率"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fTaxrate"
            header-align="center"
            align="center"
            width="150px"
            label="税率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fTaxrate"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="税率"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fSrcTypeId"
            header-align="center"
            align="center"
            width="130px"
            label="来源"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.fSrcTypeId === 0">录入</span>
              <span v-if="scope.row.fSrcTypeId !== 0">协议</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remarks"
            header-align="center"
            align="center"
            width="150px"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remarks"
                :disabled="modify || scope.row.fSrcTypeId !== 0"
                placeholder="备注"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200px"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button size="small">审核费用</el-button> -->
              <el-button
                @click.native.prevent="
                    deleteRoww(scope.$index, warehouseCrList)
                  "
                size="small"
                :disabled="modify"
              >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </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" v-if="this.form.fBillstatus == 11" @click="modify = false">修 改</el-button>
      <el-button type="success" v-if="this.form.fBillstatus == 11" @click="approval">保 存</el-button>
<!--      <el-button type="primary" v-if="this.form.fBillstatus == 11" @click="approval">请 核</el-button>-->
      <el-button type="success" v-if="approVal" @click="addOrUpdateHand(form)">审 批</el-button>
      <el-button type="primary" v-if="this.form.fBillstatus != 11"@click="addOrUpdateHandle(form)">查看审批</el-button
      >
    </div>
<!--    附件查看-->
    <el-dialog
      title="查看附件"
      :visible.sync="dialogVisible"
      width="60%"
      v-dialogDrag>
      <el-table
        :data="relevantAttachments"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        style="width: 100%"
        height="150"
      >
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fName"
          header-align="center"
          align="center"
          width="250px"
          label="附件名称"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fName"
              placeholder="附件名称"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="250px"
          label="上传时间"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.createTime"
              disabled
              placeholder="上传时间"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="createBy"
          header-align="center"
          align="center"
          width="150px"
          label="上传人"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.createBy"
              disabled
              placeholder="上传人"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fUrl"
          header-align="center"
          align="center"
          width="150px"
          label="操作"
        >
          <template slot-scope="scope">
            <!--          <el-upload-->
            <!--            class="upload-demo"-->
            <!--            :action="uploadImgUrl"-->
            <!--            :on-success="(res,file)=>{handleSucces(scope,res,file)}"-->
            <!--            :headers="headers"-->
            <!--            style="width:25%;float: left"-->
            <!--            :show-file-list="false"-->
            <!--            :limit="1"-->
            <!--          >-->
            <!--            <el-button size="small" type="primary" style="margin-left:20px">点击上传</el-button>-->
            <!--          </el-upload>-->
            <el-button size="small" type="primary" @click="checkFile(scope)">查看</el-button>
            <!--          <el-button size="small" type="primary" @click="deleteFile(scope)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { listCorps, addmodify, getCntr, postApproval, listFees,getGoodName,getFName} 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'
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 {
      approVal: false,
      //客户名称下拉模糊
      nameOptions:[],
      //字典表包装类型
      packgeOptions:[],
      //货名下拉
      goodsOptions:[],
      //箱型下拉
      cntrOptions:[],
      fTaxrate:"",
      //结算方式
      fStltypeOptions:[],
      //计价单位
      jFeetunitOptions:[],
      //收付款费用名称字典表
      fDNameOptions: [],
      fCNameOptions: [],
      warehouseCrList:[],
      estimatedTime:{},
      addOrUpdateVisible: false,
      addOrUpdateVisib: false,
      warehouseDrList:[],
      goodsList:[],
      dataList:[],
      visible:false,
      dataForm:{},
      modify:true,
      doNot:true,
      activeNames: ["1","2","3","4","5","6"],
      form:{},
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      relevantAttachments: [],
      headers: { Authorization: 'Bearer ' + getToken() },
      //集装箱尺码字典表
      CntrsizeOptions: [],
      //模糊查询箱类型
      typeOptions: [],
      //附件上传弹窗
      dialogVisible: false,
      //调箱动作字典表
      boxActionOptions: [],
      //集装箱主字典表
      ownerOptions: [],
      //模糊下拉查询地点
      addressOptions: [],
      //空重字典表
      updateEFOptions: [],
      //状态字典表
      cntrstatusOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户详情表格数据
      corpsList: [],
      // 查询参数
      select: '',
      querDate: [],
      file: [],
      row: [],
      res:[]
    }
  },
  //页面跳转后传递参数
  activated() {
    let formDate
    if (this.$route.query.list){
      formDate = {
        fId: JSON.parse(this.$route.query.list).billId
      }
      this.approVal = true;
    }else if(this.$route.query.data){
      formDate = JSON.parse(this.$route.query.data)
      this.approVal = false;
    }
    if (formDate) {
      addmodify(formDate).then(response => {
        this.form = response.rows[0]
        this.goodsList = response.rows[0].tWarehousebillsCntrList
        this.estimatedTime = response.rows[0].tVoyageL
        this.dataList = response.rows[0].tWarehousebillsCntritemsList
        this.loading = false
        if (response.rows[0].tWarehousebillsfeesDr){
          this.warehouseDrList = response.rows[0].tWarehousebillsfeesDr
          for(let item in this.warehouseDrList){
            this.$set(this.warehouseDrList[item],'fFeeUnitid',JSON.stringify(this.warehouseDrList[item].fFeeunitid))
          }
        }
        if (response.rows[0].warehousebillsfeesCr){
          this.warehouseCrList = response.rows[0].warehousebillsfeesCr
          for(let item in this.warehouseCrList){
            this.$set(this.warehouseCrList[item],'fFeeUnitid',JSON.stringify(this.warehouseCrList[item].fFeeunitid))
          }
        }
      })
    }
  },
  created() {
    this.getDicts("data_unitfees").then((response) => {
      if (response.data) {
        this.jFeetunitOptions = response.data;
      }
    });
    this.getDicts("data_stltype_type").then((response) => {
      if (response.data) {
        this.fStltypeOptions = response.data;
      }
    });
    this.getDicts("tax_rate").then((response) => {
      if (response.data) {
        this.fTaxrate = response.data[0].dictValue;
      }
    });
    this.getDicts("f_packageid").then((response) => {
      if (response.data) {
        this.packgeOptions = response.data
      }
    });
    this.cntrtypeRemoteMethod()
    this.goodRemoteMethod()
    this.nameRemoteMethod()
    this.fWRemoteMethod()
    let queryParams = { pageNum: 1, fDc: "C" };
    listFees(queryParams).then((response) => {
      this.fCNameOptions = response.rows;
    });
    let query = { pageNum: 1, fDc: "D" };
    listFees(query).then((response) => {
      this.fDNameOptions = response.rows;
    });
    // this.name()
  },
  methods: {

    //获取客户名称下拉
    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({
        fName: null,
        fFeeid: null,
        fFeeUnitid: '7',
        fQty: null,
        fUnitprice: null,
        fAmount: null,
        fCurrency: "RMB",
        fExrate: "1",
        fTaxrate: this.fTaxrate,
        fCxrate: null,
        fRate: null,
        remarks: null,
        fMblno: this.form.fMblno,
        fProductName: this.form.fProductName,
        fMarks: this.form.fMarks,
        fBusinessType: this.form.fBusinessType,
        fSrcTypeId: 0,
      })
    },
    // 数量计算
    changeContractAmt(row) {
      let fQty = 0;
      let fUnitprice = 0;
      if (row.fUnitprice) {
        fUnitprice = row.fUnitprice;
      }
      if (row.fQty) {
        fQty = row.fQty;
      }
      this.$set(row, "fAmount", Number(fUnitprice) * Number(fQty)).toFixed(2);
    },

    // modifyInfo(){
    //   this.
    //
    // },
    // 变更计价单位
    changeFeeUnit(row) {
      if (!row.fFeeUnitid) {
        return false;
      }
      // if (row.fFeeUnitid === "2") {
      //   console.log(row.fQty)
      //   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;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          column.property === "fUnitprice" ||
          column.property === "fAmount" ||
          column.property === "fQty" ||
          column.property === "fQty"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        }
      });
      return sums;
    },
    addOrUpdateHand(form) {
      this.addOrUpdateVisib = true;
      this.$nextTick(() => {
        let actId = ''
        if(this.form.fBillstatus < 6){
          actId = "410"
        }else{
          actId = "420";
        }
        this.$refs.ApprovalComments.init(form.fId, actId);
      });
    },
    //首页审批跳转关闭返回首页
    cancelTwo() {
      this.open = false;
      let view = {
        fullPath: "/domesticTrade/orderInformation?data=%7B%22fId%22%3A687%7D",
        hash: "",
        matched: Array(2),
        meta: Object,
        name: "OrderInformation",
        params: Object,
        path: "/domesticTrade/orderInformation",
        query: Object,
        title: "订单信息"
      };
      this.$router.push({ path: "/index" });
      this.$store
        .dispatch("tagsView/delView", view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view);
          }
        });
      Global.$emit("removeCache", "closeSelectedTag", view);
    },

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

    addOrUpdateHandle() {
      this.addOrUpdateVisible = true;
      let id = "448";
      let actId = ''
      if(this.form.fBillstatus < 6){
        actId = "410"
      }else{
        actId = "420";
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.form.fId, actId);
      });
    },
    deleteRoww(index, rows) {
      rows.splice(index, 1);
    },
    handleSelect(){},
    //应收新行
    addCollection(){
      this.warehouseDrList.push({
        fName: null,
        fFeeid: null,
        fFeeUnitid: '7',
        fQty: null,
        fUnitprice: null,
        fAmount: null,
        fCurrency: "RMB",
        fExrate: "1",
        fTaxrate: this.fTaxrate,
        fCxrate: null,
        fRate: null,
        remarks: null,
        fMblno: this.form.fMblno,
        fProductName: this.form.fProductName,
        fMarks: this.form.fMarks,
        fBusinessType: this.form.fBusinessType,
        fSrcTypeId: 0,
      })
    },
    //提交审批
    approval(){
      if(!this.form.fMblno){
        this.$message.error("请维护提单号")
        return false
      }
      if(this.dataList.length === 0){
        this.$message.error("请维护箱信息")
        return false
      }
      let form = {
        fId:this.form.fId,
        fMblno:this.form.fMblno
      }
      let formData = new window.FormData();
      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))
      postApproval(formData).then(response=>{
        this.msgSuccess("操作成功");
        if(response.data.tWarehouseBills){
          this.form = response.data.tWarehouseBills
        }
        if(response.data.tWarehousebillsCntritemsList){
          this.dataList = response.data.tWarehousebillsCntritemsList
        }
        if(response.data.warehousebillsfeesCrList){
          this.warehouseCrList = response.data.warehousebillsfeesCrList
          for(let item in this.warehouseCrList){
              this.$set(this.warehouseCrList[item],'fFeeUnitid',JSON.stringify(this.warehouseCrList[item].fFeeunitid))
          }
        }
        if(response.data.warehousebillsfeesDrList){
          this.warehouseDrList = response.data.warehousebillsfeesDrList
            for(let item in this.warehouseDrList){
                this.$set(this.warehouseDrList[item],'fFeeUnitid',JSON.stringify(this.warehouseDrList[item].fFeeunitid))
            }
          }
        })
      },
    //新行
    addList(){
      this.dataList.push({
        fManual:'1',
        fCntrno:null,
        fSealno:null,
        fCntrweight:null,
        fGoodsid:null,
        fPackageid:null,
        fCntrid:null,
      })
    },
    //查看附件
    check(status){
      this.dialogVisible = true
      if(status === 1){
      }else{
      }
    },
    saveFile() {
      this.row.accessoryList = this.file
      this.dialogVisible = false
      this.relevantAttachments = []
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    //多选框选中
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.fId)
      this.select = selection
      console.log(this.select)
    }
  }
}
</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;
}

</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>