lemonBeans_ui/src/views/track/cabinet/AddOrUpdate.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    width="80%"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <span>
      <el-form ref="form" :model="form" label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="fCorpId">
              <el-select
                v-model="form.fCorpId"
                placeholder="请输入客户名称"
                :clearable="true"
                filterable
                size="mini"
                style="width: 180px"
                :disabled="true"
              >
                <el-option
                  v-for="(dict, index) in fMblnoOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型" prop="billType">
              <el-select
                v-model="form.billType"
                placeholder="请选择业务类型"
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in billTypeList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输方式" prop="transType">
              <el-select
                v-model="form.transType"
                placeholder="请选择运输方式"
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in transTypeList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输性质" prop="transProp">
              <el-select
                v-model="form.transProp"
                placeholder="请选择运输方式"
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in transPropList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="装车地点" prop="tLoadAddr">
              <el-input
                v-model="form.tLoadAddr"
                placeholder="请输入装车地点"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划时间" prop="tLoadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.tLoadDate"
                type="date"
                placeholder="选择计划装车时间"
                :disabled="true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="loadAttn">
              <el-input
                v-model="form.tLoadAttn"
                placeholder="请输入装车联系人"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="loadAttntel">
              <el-input
                v-model="form.tLoadAttntel"
                placeholder="请输入装车联系电话"
                :disabled="true"
                v-input-limit="0"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="卸车地点" prop="unLoadAddr">
              <el-input
                v-model="form.tUnLoadAddr"
                placeholder="请输入卸车地点"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划时间" prop="tUnLoadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.tUnLoadDate"
                type="date"
                placeholder="选择计划卸车时间"
                :disabled="true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="unLoadAttn">
              <el-input
                v-model="form.tUnLoadAttn"
                placeholder="请输入卸车联系人"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="unLoadAttnTel">
              <el-input
                v-model="form.tUnLoadAttnTel"
                placeholder="请输入卸车联系电话"
                :disabled="true"
                v-input-limit="0"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="提单号" prop="mblno">
              <el-input
                v-model="form.mblno"
                placeholder="请输入提单号"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货品名称" prop="goodsId">
              <el-select
                v-model="form.goodsId"
                placeholder="请输入货品名称"
                :disabled="true"
                clearable
                filterable
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in goodsOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划件数" prop="qtyPlan">
              <el-input
                v-model="form.qtyPlan"
                placeholder="请输入计划件数"
                :disabled="true"
                v-input-limit="2"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量(吨)" prop="weightPlan">
              <el-input
                v-model="form.weightPlan"
                placeholder="请输入计划重量"
                :disabled="true"
                v-input-limit="2"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="船名" prop="ysl">
              <el-input
                v-model="form.ysl"
                placeholder="请输入船名"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航次" prop="voy">
              <el-input
                v-model="form.voy"
                placeholder="请输入航次"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起运港" prop="polId">
              <el-select
                v-model="form.polId"
                placeholder="请输入起运港"
                :clearable="true"
                filterable
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in polList"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的港" prop="podId">
              <el-select
                v-model="form.podId"
                placeholder="请输入目的港"
                :clearable="true"
                filterable
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in podList"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="车号" prop="carregNo">
              <el-input
                v-model="form.carregNo"
                placeholder="请输入车号"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="司机" prop="driverName">
              <el-input
                v-model="form.driverName"
                placeholder="请输入司机"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="司机电话" prop="driverTel">
              <el-input
                v-model="form.driverTel"
                placeholder="请输入司机电话"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="箱号" prop="cntrName">
              <el-input
                v-model="form.cntrName"
                placeholder="请输入箱号"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="运单号" prop="orderNo">
              <el-input
                v-model="form.orderNo"
                placeholder="请输入运单号"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起始里程" prop="odometerFrom">
              <el-input
                v-model="form.odometerFrom"
                placeholder="请输入起始里程表读数"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束里程" prop="odometerEnd">
              <el-input
                v-model="form.odometerEnd"
                placeholder="请输入结束里程表读数"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接单时间" prop="acceptDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.acceptDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择接单时间"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="提箱时间" prop="loadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.loadDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择提箱时间"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装卸货时间" prop="mdLoadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.mdLoadDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择装卸货时间"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="还卸柜时间" prop="unLoadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.unLoadDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择还卸柜时间"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="回单时间" prop="waybillDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.waybillDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择回单时间"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="油气费" prop="oilAmt">
              <el-input
                v-model="form.oilAmt"
                placeholder="请输入油气费"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单趟提成" prop="driverbonus">
              <el-input
                v-model="form.driverbonus"
                placeholder="请输入单趟提成"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="其他费用" prop="costOth">
              <el-input
                v-model="form.costOth"
                placeholder="请输入其他费用"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="花销备注" prop="costRemarks">
              <el-input
                v-model="form.costRemarks"
                placeholder="请输入备注"
                size="mini"
                style="width: 180px"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.billType == 1">
          <el-col :span="6">
            <el-form-item label="修洗费" prop="costomAmt03">
              <el-input
                v-model="form.costomAmt03"
                placeholder="请输入修洗费"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="吊装费" prop="costomAmt04">
              <el-input
                v-model="form.costomAmt04"
                placeholder="请输入吊装费"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="其他费用" prop="costomAmt02">
              <el-input
                v-model="form.costomAmt02"
                placeholder="请输入其他费用"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="费用备注" prop="costomStr02">
              <el-input
                v-model="form.costomStr02"
                placeholder="请输入备注"
                size="mini"
                style="width: 180px"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.billType == 2">
          <el-col :span="6">
            <el-form-item label="港杂费" prop="costomAmt05">
              <el-input
                v-model="form.costomAmt05"
                placeholder="请输入港杂费"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提箱费" prop="costomAmt06">
              <el-input
                v-model="form.costomAmt06"
                placeholder="请输入提箱费"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="其他费用" prop="costomAmt01">
              <el-input
                v-model="form.costomAmt01"
                placeholder="请输入其他费用"
                size="mini"
                style="width: 180px"
                v-input-limit="2"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="费用备注" prop="costomStr01">
              <el-input
                v-model="form.costomStr01"
                placeholder="请输入备注"
                size="mini"
                style="width: 180px"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注" prop="acceptRemarks">
              <el-input
                v-model="form.acceptRemarks"
                placeholder="请输入备注"
                size="mini"
                :disabled="disabled"
                type="textarea"
                :rows="2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-collapse v-model="collapses">
        <el-collapse-item>
          <template slot="title">
            <i class="header-icon el-icon-circle-plus" style="font-size: 16px"
              ><span
                style="font-size: 16px; font-weight: bolder; margin-left: 5px"
                >确认费用</span
              >
            </i>
          </template>
          <div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin: 10px 0;
              "
            >
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="addRelevt4"
                  v-hasPermi="['fleet:vehicleStatus:edit']"
                  >添加费用</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="addRelevt2"
                  v-hasPermi="['fleet:vehicleStatus:edit']"
                  >导入费用</el-button
                >
              </div>
            </div>
          </div>
          <el-table :data="chiFeesList" style="width: 100%">
            <el-table-column
              prop="fCorpid"
              label="结算单位"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fCorpid"
                  placeholder="请输入客户名称"
                  :clearable="true"
                  filterable
                  size="mini"
                  style="width: 160px"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                >
                  <el-option
                    v-for="(dict, index) in allfMblnoOptions"
                    :key="index.fId"
                    :label="dict.fName"
                    :value="dict.fId"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="fFeeid"
              label="费用名称"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fFeeid"
                  filterable
                  remote
                  placeholder="费用名称"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                >
                  <el-option
                    v-for="(dict, index) in fWbuOptions"
                    :key="index.fId"
                    :label="dict.fName"
                    :value="dict.fId"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="fDc" label="收付" align="center" width="100">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fDc"
                  placeholder="请选择"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                >
                  <el-option label="收" value="D"></el-option>
                  <el-option label="付" value="C"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="fFeeunitid"
              label="计费单位"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fFeeunitid"
                  placeholder="请选择计费单位"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  clearable
                >
                  <el-option
                    v-for="dict in jFeetunitOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="fBillingQty"
              label="计费数量"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fBillingQty"
                  placeholder="请输入内容"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  @input="total(scope.row)"
                  v-input-limit="2"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fUnitprice"
              label="单价"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fUnitprice"
                  placeholder="请输入内容"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  @input="total(scope.row)"
                  v-input-limit="2"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fCurrency"
              label="币种"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fCurrency"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fExrate"
              label="汇率"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fExrate"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fAmount"
              label="金额"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fAmount"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="fTaxrate"
              label="税率"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fTaxrate"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remarks"
                  placeholder="请输入内容"
                  :disabled="scope.row.fBillstatus > 2 || scope.row.fBillstatus <=6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="费用来源" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.actId == 1080">费用确认</span>
                <span v-if="scope.row.actId == 1090">追加费用</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              fixed="right"
              width="240px"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-document-checked"
                  :disabled="
                    scope.row.fBillstatus == 6 || scope.row.fBillstatus == 3
                  "
                  @click.native.prevent="addFees(scope.row)"
                  >提交</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                  :disabled="scope.row.fBillstatus == 3"
                  @click.native.prevent="fixFees(scope.row)"
                  >变更</el-button
                >
                 <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-document-delete"
                  :disabled="scope.row.fBillstatus < 6"
                  @click.native.prevent="revokeFees(scope.row)"
                  >撤销</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  :disabled="scope.row.fBillstatus == 6"
                  @click.native.prevent="
                    delFees(scope.$index, chiFeesList, scope.row)
                  "
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            <i class="header-icon el-icon-circle-plus" style="font-size: 16px"
              ><span
                style="font-size: 16px; font-weight: bolder; margin-left: 5px"
                >附件上传</span
              >
            </i>
          </template>
          <div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin: 10px 0;
              "
            >
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="addRelevt"
                  :disabled="disabled"
                  >添加</el-button
                >
              </div>
            </div>
            <el-table
              :data="relevantAttachments"
              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="attachName"
                header-align="center"
                align="center"
                label="附件名称"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.attachName"
                    placeholder="附件名称"
                    show-word-limit
                    :disabled="disabled"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="createBy "
                header-align="center"
                align="center"
                label="上传人"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.createBy"
                    placeholder="上传人"
                    show-word-limit
                    :disabled="disabled"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                header-align="center"
                align="center"
                label="上传时间"
              >
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.createTime"
                    type="date"
                    disabled
                    placeholder="上传时间"
                  ></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                prop="attachUrl"
                header-align="center"
                align="center"
                label="上传附件"
              >
                <template slot-scope="scope">
                  <div style="display: flex; justify-content: center">
                    <el-upload
                      class="upload-demo"
                      :action="uploadImgUrl"
                      :on-success="
                        (res, file) => {
                          handleSucces(scope, res, file);
                        }
                      "
                      :headers="headers"
                      :disabled="disabled"
                      :show-file-list="false"
                      :limit="1"
                    >
                      <el-button size="small" type="text" :disabled="disabled"
                        >点击上传</el-button
                      >
                    </el-upload>
                    <el-button
                      size="small"
                      type="text"
                      @click="checkFile(scope)"
                      :disabled="disabled"
                      style="margin-left: 10px"
                      >查看</el-button
                    >
                    <el-button
                      size="small"
                      type="text"
                      :disabled="disabled"
                      @click="deleteFile(scope)"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                label="操作"
                width="130PX"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click.native.prevent="
                      deleteRow(scope.$index, relevantAttachments)
                    "
                    :disabled="disabled"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('acceptDate')"
        >接 单</el-button
      >
      <el-button type="primary" @click="submitForm('loadDate')"
        >提 箱</el-button
      >
      <el-button type="primary" @click="submitForm('mdLoadDate')"
        >装卸货</el-button
      >
      <el-button type="primary" @click="submitForm('unLoadDate')"
        >还卸柜</el-button
      >
      <el-button type="primary" @click="submitForm('waybillDate')"
        >回 单</el-button
      >
      <el-button type="primary" @click="driversubmitForm"
        >提 交</el-button
      >
      <el-button type="success" @click="submitAllowChanges">修 改</el-button>
      <el-button type="info" @click="submitSave">保 存</el-button>
      <!-- <el-button type="warning" @click="submitRetreat">撤 回</el-button> -->
      <el-button @click="showDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  removeFtmsorderbillscars,
  driverSaveFtmsorderbillscars,
  insertDriverFtmsorderbillscars,
} from "@/api/fleet/ftmsorderbillscars";
import { getBasicInformation } from "@/api/kaihe/basicdata/container";
import { listGoods } from "@/api/basicdata/goods";
import { listCorps } from "@/api/basicdata/corps";
import { listFees } from "@/api/basicdata/fees";
import UploadFile from "@/components/Uploadfile";
import { submit, changeFees ,revokeFees,deleteFees,driverSubmit} from "@/api/track/singleCost";
import Cookies from "js-cookie";
import { getToken } from "@/utils/auth";
export default {
  name: "plans",
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      required: "",
    },
    form: Object,
    DList: {
      type: Array,
      default: [],
    },
    CList: {
      type: Array,
      default: [],
    },
    disabled: Boolean,
    relevantAttachments: {
      type: Array,
      default: [],
    },
    feesList: {
      type: Array,
      default:() => [],
    },
    allfMblnoOptions: {
      type: Array,
      default: [],
    },
  },
  components: {
    UploadFile,
  },
  data() {
    return {
      chiFeesList: [],
      // 控制弹出框显示隐藏
      showDialog: false,
      billTypeList: [],
      transTypeList: [],
      transPropList: [],
      goodsLossTypeList: [],
      cntrIdList: [],
      priceTypeList: [],
      userType: null,
      username: null,
      collapses: [],
      fMblnoOptions: [],
      fMblnoOptions2: [],
      cntrId2List: [],
      goodsOptions: [],
      fWbuOptions: [],
      ffeeunitidList: [],
      polList: [],
      podList: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      jFeetunitOptions: [],
    };
  },
  created() {
    this.getDicts("data_unitfees").then((response) => {
      if (response.data) {
        this.jFeetunitOptions = response.data;
      }
    });
    this.getDicts("data_billType").then((response) => {
      this.billTypeList = response.data;
    });
    this.getDicts("data_transType").then((response) => {
      this.transTypeList = response.data;
    });
    this.getDicts("data_transProp").then((response) => {
      this.transPropList = response.data;
    });
    this.getDicts("data_goodsLossType").then((response) => {
      this.goodsLossTypeList = response.data;
    });
    this.getDicts("data_cntrId").then((response) => {
      response.data.map((e) => (e.noOption = false));
      this.cntrIdList = response.data;
    });
    this.getDicts("data_priceType").then((response) => {
      this.priceTypeList = response.data;
    });
    this.getDicts("data_ffeeunitid").then((response) => {
      this.ffeeunitidList = response.data;
    });
    getBasicInformation({
      fTypes: 1,
      fStatus: "T",
    }).then((response) => {
      this.polList = response;
      this.podList = response;
    });
    listCorps().then((response) => {
      this.fMblnoOptions = response.rows;
    });
    listGoods().then((response) => {
      this.goodsOptions = response.rows;
    });
    listFees().then((response) => {
      this.fWbuOptions = response.rows;
    });
    this.userType = Cookies.get("userType");
    this.username = Cookies.get("userName");
  },
  methods: {
    // 新增附件上传
    addRelevt4() {
      this.chiFeesList.push({
        actId: "1090",
        fCorpid: this.form.fCorpId,
        fFeeid: "",
        fDc: "",
        fFeeunitid: "1",
        fBillingQty: 0,
        fUnitprice: 0,
        fCurrency: "RMB",
        fTaxrate: null,
        fAmount: 0,
        fExrate: 1,
        remarks: "",
      });
    },
    // 新增附件上传
    addRelevt() {
      this.relevantAttachments.push({
        attachUrl: null,
        attachName: null,
        createBy: this.username,
        createTime: Date.parse(new Date()),
      });
    },
    //附件删除
    deleteFile(scope) {
      this.relevantAttachments[scope.$index].attachName = "";
      this.relevantAttachments[scope.$index].attachUrl = "";
      if (this.relevantAttachments[scope.$index].attachUrl === "") {
        this.$message.success("删除成功");
      } else {
        this.$message.error("未知错误，删除失败");
      }
    },
    //附件查看
    checkFile(scope) {
      if (this.relevantAttachments[scope.$index].attachUrl) {
        window.open(this.relevantAttachments[scope.$index].attachUrl);
      } else {
        this.$message.error("请上传附件");
      }
    },
    //附件上传
    handleSucces(scope, res, file) {
      this.relevantAttachments[scope.$index].attachName = res.fileName;
      this.relevantAttachments[scope.$index].attachUrl = res.url;
      if (this.relevantAttachments[scope.$index].attachUrl === "") {
        this.$message.error("上传失败");
      } else {
        this.$message.success("上传成功");
      }
    },
    // 添加行
    addRow(tableData, event) {
      var obj = {};
      tableData.push(obj);
    },
    addDListRow(tableData, event) {
      var obj = {
        fcorpid: this.form.fCorpId,
        fcurrency: "RMB",
        fPid: this.form.id,
        fExrate: "1",
      };
      tableData.push(obj);
    },
    //删除行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 上传成功返回数据
    showFile(row) {
      for (let list in this.relevantAttachments) {
        this.$set(this.relevantAttachments[list], "attachUrl", row.url);
        this.$set(this.relevantAttachments[list], "attachName", row.fileName);
      }
    },
    addRelevt2() {
      let arr = this.chiFeesList;
      arr.filter((e) => e.actId == "1080");
      if (arr.length > 0) {
        this.$confirm("已生成费用信息, 是否重新生成?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.chiFeesList = this.chiFeesList.filter(
              (e) => e.actId != "1080"
            );
            this.addRelevt3();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.addRelevt3();
      }
    },
    addRelevt3() {
      if (this.form.oilAmt > 0) {
        this.chiFeesList.push({
          actId: "1080",
          fCorpid: this.form.driverUserId,
          fFeeid: 52,
          fDc: "C",
          fFeeunitid: "6",
          fBillingQty: 1,
          fUnitprice: this.form.oilAmt,
          fCurrency: "RMB",
          fTaxrate: 3,
          fAmount: this.form.oilAmt,
          fExrate: 1,
          remarks: this.form.costRemarks,
        });
      }
      if (this.form.driverbonus > 0) {
        this.chiFeesList.push({
          actId: "1080",
          fCorpid: this.form.driverUserId,
          fFeeid: 53,
          fDc: "C",
          fFeeunitid: "6",
          fBillingQty: 1,
          fUnitprice: this.form.driverbonus,
          fCurrency: "RMB",
          fTaxrate: 3,
          fAmount: this.form.driverbonus,
          fExrate: 1,
          remarks: this.form.costRemarks,
        });
      }
      if (this.form.costOth > 0) {
        this.chiFeesList.push({
          actId: "1080",
          fCorpid: this.form.driverUserId,
          fFeeid: 54,
          fDc: "C",
          fFeeunitid: "6",
          fBillingQty: 1,
          fUnitprice: this.form.costOth,
          fCurrency: "RMB",
          fTaxrate: 3,
          fAmount: this.form.costOth,
          fExrate: 1,
          remarks: this.form.costRemarks,
        });
      }
      if (this.form.costomAmt03 > 0) {
        this.chiFeesList.push(
          {
            actId: "1080",
            fCorpid: this.form.fCorpId,
            fFeeid: 55,
            fDc: "D",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt03,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt03,
            fExrate: 1,
            remarks: this.form.costomStr02,
          },
          {
            actId: "1080",
            fCorpid: this.form.driverUserId,
            fFeeid: 55,
            fDc: "C",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt03,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt03,
            fExrate: 1,
            remarks: this.form.costomStr02,
          }
        );
      }
      if (this.form.costomAmt04 > 0) {
        this.chiFeesList.push(
          {
            actId: "1080",
            fCorpid: this.form.fCorpId,
            fFeeid: 56,
            fDc: "D",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt04,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt04,
            fExrate: 1,
            remarks: this.form.costomStr02,
          },
          {
            actId: "1080",
            fCorpid: this.form.driverUserId,
            fFeeid: 56,
            fDc: "C",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt04,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt04,
            fExrate: 1,
            remarks: this.form.costomStr02,
          }
        );
      }
      if (this.form.costomAmt02 > 0) {
        this.chiFeesList.push(
          {
            actId: "1080",
            fCorpid: this.form.fCorpId,
            fFeeid: 57,
            fDc: "D",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt02,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt02,
            fExrate: 1,
            remarks: this.form.costomStr02,
          },
          {
            actId: "1080",
            fCorpid: this.form.driverUserId,
            fFeeid: 57,
            fDc: "C",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt02,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt02,
            fExrate: 1,
            remarks: this.form.costomStr02,
          }
        );
      }
      if (this.form.costomAmt05 > 0) {
        this.chiFeesList.push(
          {
            actId: "1080",
            fCorpid: this.form.fCorpId,
            fFeeid: 58,
            fDc: "D",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt05,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt05,
            fExrate: 1,
            remarks: this.form.costomStr01,
          },
          {
            actId: "1080",
            fCorpid: this.form.driverUserId,
            fFeeid: 58,
            fDc: "C",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt05,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt05,
            fExrate: 1,
            remarks: this.form.costomStr01,
          }
        );
      }
      if (this.form.costomAmt06 > 0) {
        this.chiFeesList.push(
          {
            actId: "1080",
            fCorpid: this.form.fCorpId,
            fFeeid: 59,
            fDc: "D",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt06,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt06,
            fExrate: 1,
            remarks: this.form.costomStr01,
          },
          {
            actId: "1080",
            fCorpid: this.form.driverUserId,
            fFeeid: 59,
            fDc: "C",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt06,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt06,
            fExrate: 1,
            remarks: this.form.costomStr01,
          }
        );
      }
      if (this.form.costomAmt01 > 0) {
        this.chiFeesList.push(
          {
            actId: "1080",
            fCorpid: this.form.fCorpId,
            fFeeid: 60,
            fDc: "D",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt01,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt01,
            fExrate: 1,
            remarks: this.form.costomStr01,
          },
          {
            actId: "1080",
            fCorpid: this.form.driverUserId,
            fFeeid: 60,
            fDc: "C",
            fFeeunitid: "6",
            fBillingQty: 1,
            fUnitprice: this.form.costomAmt01,
            fCurrency: "RMB",
            fTaxrate: 3,
            fAmount: this.form.costomAmt01,
            fExrate: 1,
            remarks: this.form.costomStr01,
          }
        );
      }
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
      this.cntrIdList.forEach((item) => (item.noOption = false));
      this.collapses = [];
    },
    /** 提交按钮 */
    submitForm(butType) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.costOth > 0 && !this.form.costRemarks) {
            return this.$message.error("请输入花销备注");
          }
          if (this.form.costomAmt02 > 0 && !this.form.costomStr02) {
            return this.$message.error("请输入费用备注");
          }
          if (this.form.costomAmt01 > 0 && !this.form.costomStr01) {
            return this.$message.error("请输入费用备注");
          }
          this.DList.map((e) => {
            return (e.fDc = "D");
          });
          this.CList.map((e) => {
            return (e.fDc = "C");
          });
          let formData = new window.FormData();
          formData.append("cars", JSON.stringify(this.form));
          formData.append("attachs", JSON.stringify(this.relevantAttachments));
          formData.append("operationType", butType);
          insertDriverFtmsorderbillscars(formData).then((response) => {
            if (response.code == 200) {
              this.msgSuccess("提交成功");
              this.$parent.getList();
            }
          });
        }
      });
    },
    //修改
    submitFix() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
        }
      });
    },
    //保存
    submitSave() {
      let formData = new window.FormData();
      formData.append("cars", JSON.stringify(this.form));
      formData.append("attachs", JSON.stringify(this.relevantAttachments));
      formData.append("fees", JSON.stringify(this.chiFeesList));
      formData.append("operationType", "unLoadDate");
      driverSaveFtmsorderbillscars(formData).then((response) => {
        if (response.code == 200) {
          this.msgSuccess("保存成功");
          this.$parent.getList();
          // this.$parent.getSave(response);
        }
      });
    },
    //撤回
    submitRetreat() {},
    //修改
    submitAllowChanges() {
      if (this.form.orderStatus <= 60) {
        this.$emit("fixDisabled", "false");
        this.msgSuccess("允许修改");
      } else {
        this.msgSuccess("不允许修改");
      }
    },
    driversubmitForm(){
      if(this.chiFeesList.length==0){
        return this.$message.error("确认费用不能为空");
      }
       let formData = new window.FormData();
      formData.append("cars", JSON.stringify(this.form));
      formData.append("attachs", JSON.stringify(this.relevantAttachments));
      formData.append("fees", JSON.stringify(this.chiFeesList));
      driverSubmit(formData).then((response) => {
        if (response.code == 200) {
          this.msgSuccess("提交成功");
          this.showDialog=false;
          this.$parent.getList();
        }
      });
    },
    addFees(row) {
      if (row.fBillstatus == 1) {
        row.fBillstatus = 6;
      }
      if (row.fBillstatus == 6) {
        return this.$message.error("已提交，请勿重复提交");
      }
      let formDatae = new window.FormData();
      formDatae.append("status", 6);
      formDatae.append("cars", JSON.stringify(this.form));
      formDatae.append("ftmsorderbillsfees", JSON.stringify(row));
      submit(formDatae).then((response) => {
        if (response.code == 200) {
          this.$message.success("提交成功");
          this.$set(row, "fId", response.data.ftmsorderbillsfeesList.fId);
          this.$set(
            row,
            "fBillstatus",
            response.data.ftmsorderbillsfeesList.fBillstatus
          );
        }
      });
    },
    fixFees(row) {
      if (row.fBillstatus == 0) {
        return this.$message.error("已进行变更，请勿重复点击");
      }
      if (row.fId) {
        changeFees(row.fId).then((response) => {
          if (response.code == 200) {
            this.$message.success("允许修改");
            this.$set(row, "fBillstatus", 1);
          }
        });
      }
    },
    delFees(index, rows, row) {
      if (row.fBillstatus == 2 || row.fBillstatus == 3) {
        deleteFees(row.fId).then((response) => {
          if (response.code == 200) {
            rows.splice(index, 1);
            this.$message.success("删除成功");
          }
        });
      } else if (!row.fBillstatus){
        rows.splice(index, 1);
        this.$message.success("删除成功");
      }else{
         this.$message.error("不允许删除");
      }
    },
    revokeFees(row){
      revokeFees(row.fId).then((response) => {
          if (response.code == 200) {
            this.$message.success("撤销成功");
            this.$set(row, "fBillstatus", 3);
          }
      });
    },
    //单条订单调度提交
    addscarsRow(row) {},
    delscarsRow(index, rows, row) {
      if (row.billStatus != 6 && row.id != null) {
        removeFtmsorderbillscars(row).then((response) => {
          if (response.code == 200) {
            rows.splice(index, 1);
            this.msgSuccess("成功删除");
          }
        });
      } else {
        rows.splice(index, 1);
      }
    },
    revokescarsRow(index, rows, row) {},
    changescarsRow(row) {},
    total(row) {
      console.log(row);
      if (row.fQty && row.fUnitprice) {
        this.$set(row, "fAmount", (row.fQty * row.fUnitprice).toFixed(2));
      } else {
        this.$set(row, "fAmount", 0);
      }
    },
  },
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible;
    },
    feesList(newVal, oldVal) {
      this.chiFeesList = newVal;
    },
  },
};
</script>