lemonBeans_ui/src/views/fleet/plans/AddOrUpdate.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    width="80%"
    @close="handleClose"
  >
    <span>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="corpId">
              <el-select
                v-model="form.corpId"
                placeholder="请输入客户名称"
                :clearable="true"
                filterable
                :disabled="disabled"
                size="mini"
                style="width:180px"
              >
                <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="disabled"
                 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="disabled"
                 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="disabled"
                 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="mblno">
              <el-input
                v-model="form.mblno"
                placeholder="请输入提单号"
                :disabled="disabled"
                 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="disabled"
                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="disabled"
                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="disabled"
                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="disabled"
                 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="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起运港" prop="pol">
              <el-input
                v-model="form.pol"
                placeholder="请输入起运港"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的港" prop="pod">
              <el-input
                v-model="form.pod"
                placeholder="请输入目的港"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              v-if="form.transType != 3"
              label="提箱地点"
              prop="loadAddr"
            >
              <el-input
                v-model="form.loadAddr"
                placeholder="请输入提箱地点"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
            <el-form-item v-else label="装货地点" prop="loadAddr">
              <el-input
                v-model="form.loadAddr"
                placeholder="请输入装货地点"
                :disabled="disabled"
                 size="mini"
              />
            </el-form-item>
          </el-col>
          <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="loadAttn">
              <el-input
                v-model="form.loadAttn"
                placeholder="请输入装车联系人"
                :disabled="disabled"
                 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.loadAttntel"
                placeholder="请输入装车联系电话"
                :disabled="disabled"
                v-input-limit="0"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.transType != 3">
          <el-col :span="6">
            <el-form-item
              v-if="form.billType == 1"
              label="卸货地点"
              prop="mdLoadAddr"
            >
              <el-input
                v-model="form.mdLoadAddr"
                placeholder="请输入装卸货地点"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
            <el-form-item
              v-if="form.billType == 2"
              label="装货地点"
              prop="mdLoadAddr"
            >
              <el-input
                v-model="form.mdLoadAddr"
                placeholder="请输入装货地点"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.billType == 1 || form.billType == 2">
            <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" v-if="form.billType == 1 || form.billType == 2">
            <el-form-item label="联系人" prop="mdLoadAttn">
              <el-input
                v-model="form.mdLoadAttn"
                placeholder="请输入装卸货联系人"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.billType == 1 || form.billType == 2">
            <el-form-item label="联系电话" prop="mdLoadAttnTel">
              <el-input
                v-model="form.mdLoadAttnTel"
                placeholder="请输入装卸货联系电话"
                :disabled="disabled"
                v-input-limit="0"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="form.transType != 3" :span="6">
            <el-form-item label="卸箱地点" prop="unLoadAddr">
              <el-input
                v-model="form.unLoadAddr"
                placeholder="请输入卸箱地点"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
          <el-col v-else :span="6">
            <el-form-item label="卸货地点" prop="unLoadAddr">
              <el-input
                v-model="form.unLoadAddr"
                placeholder="请输入卸箱地点"
                :disabled="disabled"
                 size="mini"
                 style="width:180px"
              />
            </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="unLoadAttn">
              <el-input
                v-model="form.unLoadAttn"
                placeholder="请输入卸车联系人"
                :disabled="disabled"
                 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.unLoadAttnTel"
                placeholder="请输入卸车联系电话"
                :disabled="disabled"
                v-input-limit="0"
                 size="mini"
                 style="width:180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="线路描述" prop="routeDesc">
              <el-input
                type="textarea"
                :rows="2"
                v-model="form.routeDesc"
                placeholder="请输入线路描述"
                :disabled="disabled"
                size="mini"
                style="width:180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注" prop="remarks">
              <el-input
                type="textarea"
                :rows="2"
                v-model="form.remarks"
                placeholder="请输入备注"
                :disabled="disabled"
                size="mini"
                style="width:180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: flex-end; margin: 10px 0">
          <el-button type="danger" @click="submitAllowChanges"
            >申请修改</el-button
          >
        </div>
        <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="addRow(planList)"
                    :disabled="disabled"
                    >添加</el-button
                  >
                </div>
                <div v-if="form.transType == 3">
                  <el-form-item label="损耗单位" prop="goodsLossType">
                    <el-select
                      v-model="form.goodsLossType"
                      placeholder="请选择损耗单位"
                    >
                      <el-option
                        v-for="(dict, index) in goodsLossTypeList"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <div v-if="form.transType == 3">
                  <el-form-item label="耗损标准" prop="goodsLossStd">
                    <el-input
                      v-model="form.goodsLossStd"
                      placeholder="请输入耗损标准"
                      v-input-limit="2"
                    />
                  </el-form-item>
                </div>
              </div>
              <el-table :data="planList">
                <el-table-column label="箱型" align="center" prop="cntrId">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.cntrId"
                      placeholder="请选择箱型"
                      :disabled="disabled"
                      @visible-change="noMorecntrId(planList)"
                    >
                      <el-option
                        v-for="(dict, index) in cntrIdList"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                        :disabled="dict.noOption"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  label="计价方式"
                  align="center"
                  prop="priceType"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.priceType"
                      placeholder="请输入计价方式"
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="(dict, index) in priceTypeList"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column label="应收运价" align="center" prop="priceDr">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.priceDr"
                      placeholder="应收运价"
                      :disabled="disabled"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="应付运价" align="center" prop="priceCr">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.priceCr"
                      placeholder="应付运价"
                      :disabled="disabled"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="计划货量" align="center" prop="cntrQty">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.cntrQty"
                      placeholder="计划货量"
                      :disabled="disabled"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="已调度货量"
                  align="center"
                  prop="cntrPlanQty"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.cntrPlanQty"
                      placeholder="已调度货量"
                      :disabled="true"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="已派车货量"
                  align="center"
                  prop="planQty"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.planQty"
                      placeholder="已派车货量"
                      :disabled="true"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remarks">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.remarks"
                      placeholder="备注"
                      :disabled="disabled"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click.native.prevent="
                        deleteplansRow(scope.$index, planList, scope.row)
                      "
                      :disabled="disabled"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </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
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="opuserID "
                  header-align="center"
                  align="center"
                  label="上传人"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.opuserID"
                      placeholder="上传人"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="opdata"
                  header-align="center"
                  align="center"
                  label="上传时间"
                >
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.opdata"
                      type="date"
                      disabled
                      placeholder="上传时间"
                      format="yyyy-MM-dd HH:mm"
                      value-format="timestamp"
                    ></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="attachUrl"
                  header-align="center"
                  align="center"
                  label="上传附件"
                >
                  <template slot-scope="scope">
                    <uploadFile
                      @input="showFile"
                      v-model="scope.row.attachUrl"
                    />
                  </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-item v-if="userType == '00'">
            <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="addRow(DList)"
                    :disabled="disabled"
                    >添加</el-button
                  >
                </div>
              </div>
              <el-table :data="DList" v-if="userType == '00'">
                <el-table-column label="结算单位" align="center" prop="fcorpid">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fcorpid"
                      placeholder="结算单位"
                      :clearable="true"
                      filterable
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="(dict, index) in fMblnoOptions"
                        :key="index.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column label="费用名称" align="center" prop="ffeeid">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.ffeeid"
                      placeholder="费用名称"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="(dict, index) in fWbuOptions"
                        :key="index.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="计费单位"
                  align="center"
                  prop="ffeeunitid"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.ffeeunitid"
                      placeholder="计费单位"
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="(dict, index) in priceTypeList"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="计费数量" align="center" prop="fqty">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fqty"
                      placeholder="计费数量"
                      v-input-limit="0"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="单价" align="center" prop="funitprice">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.funitprice"
                      placeholder="单价"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="币种" align="center" prop="fcurrency">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fcurrency"
                      placeholder="请选择币种"
                    >
                      <el-option
                        v-for="item in currencyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="税率" align="center" prop="ftaxrate">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ftaxrate"
                      placeholder="税率"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="金额" align="center" prop="famount">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.famount"
                      placeholder="金额"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="汇率" align="center" prop="fexrate">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fexrate"
                      placeholder="汇率"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark" placeholder="备注" />
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click.native.prevent="deleteRow(scope.$index, DList)"
                      :disabled="disabled"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item v-if="userType == '00'">
            <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="addRow(CList)"
                    :disabled="disabled"
                    >添加</el-button
                  >
                </div>
              </div>
              <el-table :data="CList" v-if="userType == '00'">
                <el-table-column label="结算单位" align="center" prop="fcorpid">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fcorpid"
                      placeholder="结算单位"
                      :clearable="true"
                      filterable
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="(dict, index) in fMblnoOptions"
                        :key="index.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column label="费用名称" align="center" prop="ffeeid">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.ffeeid"
                      placeholder="费用名称"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="(dict, index) in fWbuOptions"
                        :key="index.fId"
                        :label="dict.fName"
                        :value="dict.fId"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="计费单位"
                  align="center"
                  prop="ffeeunitid"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ffeeunitid"
                      placeholder="计费单位"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="计费数量" align="center" prop="fqty">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fqty"
                      placeholder="计费数量"
                      v-input-limit="0"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="单价" align="center" prop="funitprice">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.funitprice"
                      placeholder="单价"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="币种" align="center" prop="fcurrency">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.fcurrency"
                      placeholder="请选择币种"
                    >
                      <el-option
                        v-for="item in currencyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="税率" align="center" prop="ftaxrate">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ftaxrate"
                      placeholder="税率"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="金额" align="center" prop="famount">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.famount"
                      placeholder="金额"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="汇率" align="center" prop="fexrate">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fexrate"
                      placeholder="汇率"
                      v-input-limit="2"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark" placeholder="备注" />
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click.native.prevent="deleteRow(scope.$index, CList)"
                      :disabled="disabled"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item v-if="userType == '00'">
            <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="addschedulingRow(schedulingList)"
                    :disabled="disabled"
                    >添加</el-button
                  >
                </div>
              </div>
              {{schedulingList}}
              <el-table :data="schedulingList" v-if="userType == '00'">
                <el-table-column label="箱型" align="center" prop="cntrId">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.cntrId"
                      placeholder="请选择箱型"
                      :disabled="disabled||scope.row.billStatus==6"
                      @change="checkPid(scope.row)"
                    >
                      <el-option
                        v-for="(dict, index) in cntrId2List"
                        :key="index.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  label="车队名称"
                  align="center"
                  prop="carcorPid"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.carcorPid"
                      placeholder="车队名称"
                      :disabled="disabled||scope.row.billStatus==6"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="调度安排货量"
                  align="center"
                  prop="cntrQty"
                  :disabled="disabled"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.cntrQty"
                      placeholder="调度安排货量"
                      v-input-limit="2"
                      :disabled="disabled||scope.row.billStatus==6"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="已派车货量"
                  align="center"
                  prop="carQty"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.carQty"
                      placeholder="已派车货量"
                      :disabled="true"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remarks">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.remarks"
                      placeholder="备注"
                      :disabled="disabled||scope.row.billStatus==6"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="150"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click.native.prevent="
                        delplansRow(scope.$index, schedulingList, scope.row)
                      "
                      :disabled="disabled||scope.row.billStatus==6"
                      >删除</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-document-checked"
                      @click.native.prevent="addplansRow(scope.row)"
                      :disabled="disabled||scope.row.billStatus==6"
                      >提交</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-document-delete"
                      @click.native.prevent="
                        revokeplansRow(scope.$index, schedulingList, scope.row)
                      "
                      :disabled="disabled"
                      >撤销</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :disabled="disabled"
        >提交</el-button
      >
      <el-button type="success" @click="submitFix">修改</el-button>
      <el-button type="info" @click="submitSave" :disabled="disabled"
        >保 存</el-button
      >
      <el-button type="warning" @click="submitRetreat">撤 回</el-button>
      <el-button @click="showDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addFtmsorderbills,
  RetreatFtmsorderbills,
  allowChangesFtmsorderbills,
  updateFtmsorderbills,
} from "@/api/fleet/ftmsorderbills";
import {
  singleaddFtmsorderbillsplans,
  revokeFtmsorderbillsplans,
  removeFtmsorderbillsplans,
} from "@/api/fleet/ftmsorderbillsplans";
import { listGoods } from "@/api/basicdata/goods";
import { listCorps } from "@/api/basicdata/corps";
import { listFees } from "@/api/basicdata/fees";
import UploadFile from "@/components/Uploadfile";
import Cookies from "js-cookie";
export default {
  name: "plans",
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      required: "",
    },
    form: Object,
    disabled: {
      type: Boolean,
      default: false,
    },
    planList: {
      type: Array,
      default: [],
    },
    DList: {
      type: Array,
      default: [],
    },
    CList: {
      type: Array,
      default: [],
    },
    schedulingList: {
      type: Array,
      default: [],
    },
  },
  components: {
    UploadFile,
  },
  data() {
    return {
      dcList: [
        {
          value: "D",
          label: "收款",
        },
        {
          value: "C",
          label: "付款",
        },
      ],
      currencyList: [
        {
          value: "RMB",
          label: "RMB",
        },
      ],
      // 控制弹出框显示隐藏
      showDialog: false,
      // 表单校验
      rules: {
        corpId: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        billType: [
          { required: true, message: "请选择业务类型", trigger: "blur" },
        ],
        transType: [
          { required: true, message: "请选择运输方式", trigger: "blur" },
        ],
        loadAddr: [
          { required: true, message: "请输入提箱地点", trigger: "blur" },
        ],
        loadAttntel: [
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
        mdLoadAttnTel: [
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
        unLoadAttnTel: [
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
      },
      billTypeList: [],
      transTypeList: [],
      transPropList: [],
      goodsLossTypeList: [],
      relevantAttachments: [],
      cntrIdList: [],
      priceTypeList: [],
      userType: null,
      username: null,
      collapses: [],
      fMblnoOptions: [],
      cntrId2List: [],
      goodsOptions: [],
      fWbuOptions: [],
    };
  },
  created() {
    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;
    });
    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: {
    //选中时赋值pid
    checkPid(row){
        let arr = this.planList;
        let arr2 = arr.filter((e) => e.cntrId == row.cntrId);
        row["pid"] = arr2[0].id;
    },
    noMorecntrId(e) {
      this.cntrIdList.forEach((item) => (item.noOption = false));
      let arrIds = e.map((item) => item.cntrId);
      this.cntrIdList
        .filter((item) => arrIds.indexOf(item.dictValue) > -1)
        .forEach((item) => (item.noOption = true));
    },
    showSure(val) {
      let pidList = val.filter((e) => e.pid != null);
      let arr1 = pidList;
      let arr1Ids = arr1.map((item) => item.cntrId);
      arr1Ids = [...new Set(arr1Ids)];
      let arr2 = this.cntrIdList;
      this.cntrId2List = arr2.filter(
        (item) => arr1Ids.indexOf(item.dictValue) > -1
      );
    },
    // 新增附件上传
    addRelevt() {
      this.relevantAttachments.push({
        attachUrl: null,
        attachName: null,
        opuserID: this.username,
        opdata: Date.parse(new Date()),
      });
    },
    // 添加行
    addRow(tableData, event) {
      var obj = {};
      tableData.push(obj);
    },
    //删除行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    deleteplansRow(index, rows, row) {
      let arr = this.schedulingList;
      let arr2 = arr.filter((e) => e.cntrId == row.cntrId && e.cntrId != null);
      if (arr2.length != 0) {
        this.msgSuccess("调度安排已插入此箱型数据，不能删除");
      } else {
        this.cntrIdList
          .filter((item) => item.dictValue == row.cntrId)
          .forEach((item) => (item.noOption = false));
        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);
      }
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
      this.cntrIdList.forEach((item) => (item.noOption = false));
      // this.fMblnoOptions = [];
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let arr = this.schedulingList.filter((e) => e.billStatus == 6);
          if (this.schedulingList.length == arr.length) {
            this.form["billStatus"] = "6";
            this.DList.map((e) => {
              return (e.fDc = "D");
            });
            this.CList.map((e) => {
              return (e.fDc = "C");
            });
            let formData = new window.FormData();
            formData.append("tmsorder", JSON.stringify(this.form));
            formData.append(
              "attachs",
              JSON.stringify(this.relevantAttachments)
            );
            formData.append("scntrs", JSON.stringify(this.planList));
            formData.append(
              "fees",
              JSON.stringify(this.DList.concat(this.CList))
            );
            formData.append("plans", JSON.stringify(this.schedulingList));
            addFtmsorderbills(formData).then((response) => {
              this.msgSuccess("新增成功");
              this.$parent.getList();
              this.showDialog = false;
            });
          } else {
            this.msgSuccess("调度安排中有未提交的数据");
          }
        }
      });
    },
    //修改
    submitFix() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.DList.map((e) => {
              return (e.fDc = "D");
            });
            this.CList.map((e) => {
              return (e.fDc = "C");
            });
            let formData = new window.FormData();
            formData.append("tmsorder", JSON.stringify(this.form));
            formData.append(
              "attachs",
              JSON.stringify(this.relevantAttachments)
            );
            formData.append("scntrs", JSON.stringify(this.planList));
            formData.append(
              "fees",
              JSON.stringify(this.DList.concat(this.CList))
            );
            formData.append("plans", JSON.stringify(this.schedulingList));
            updateFtmsorderbills(formData).then((response) => {
              this.msgSuccess("修改成功");
              this.$parent.getList();
              this.showDialog = false;
            });
          }
        }
      });
    },
    //保存
    submitSave() {
      this.form["billStatus"] = "2";
      let formData = new window.FormData();
      formData.append("tmsorder", JSON.stringify(this.form));
      formData.append("attachs", JSON.stringify(this.relevantAttachments));
      formData.append("scntrs", JSON.stringify(this.planList));
      formData.append("fees", JSON.stringify(this.DList));
      formData.append("plans", JSON.stringify(this.schedulingList));
      addFtmsorderbills(formData).then((response) => {
        if (response.code == 200) {
          this.msgSuccess("保存成功");
          this.$parent.getList();
          this.$parent.getSave(response);
        }
      });
    },
    //撤回
    submitRetreat() {
      const id = { id: this.form.id };
      RetreatFtmsorderbills(id).then((response) => {
        this.msgSuccess("撤回成功");
        this.$parent.getList();
        this.showDialog = false;
      });
    },
    //修改
    submitAllowChanges() {
      if (this.form.billStatus == 6) {
        const id = this.form.id;
        allowChangesFtmsorderbills(id).then((response) => {
          if (response == false) {
            this.msgSuccess("不允许修改");
          } else {
            this.$emit("fixDisabled", "false");
          }
        });
      } else {
        this.$emit("fixDisabled", "false");
      }
    },
    //调度安排新增
    addschedulingRow(tableData, event) {
      const pidList = this.planList.filter((e) => e.pid != null);
      if (
        this.planList.length == 0 ||
        Object.keys(this.planList[0]).length == 0
      ) {
        this.msgSuccess("至少添加一条计划货量");
      } else if (pidList.length != this.planList.length) {
        this.$confirm("计划货量存在未保存数据，是否保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.submitSave();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存",
            });
          });
      } else {
        var obj = {};
        tableData.push(obj);
        this.showSure(this.planList);
      }
    },
    //单条订单调度提交
    addplansRow(row) {
      console.log(row);
      if (row.billStatus != 6) {
        let formData = new window.FormData();
        formData.append("tmsorder", JSON.stringify(this.form));
        formData.append("plans", JSON.stringify(row));
        singleaddFtmsorderbillsplans(formData).then((response) => {
          this.msgSuccess("成功提交");
          if (response.code == 200) {
            // row["billStatus"] = response.data.billStatus;
            this.$set(row, 'id', response.data.id)
            this.$set(row, 'billStatus', response.data.billStatus)
          }
        });
      } else {
        this.msgSuccess("请勿重复提交");
      }
    },
    delplansRow(index, rows, row) {

      if (row.billStatus != 6&&row.id!=null) {
        removeFtmsorderbillsplans(row).then((response) => {
          if (response.code == 200) {
            rows.splice(index, 1);
            this.msgSuccess("成功删除");
          }
        });
      } else {
        rows.splice(index, 1);
      }
    },
    revokeplansRow(index, rows, row) {
      if (row.billStatus == 6) {
        revokeFtmsorderbillsplans(row).then((response) => {
          if (response.code == 200) {
            this.msgSuccess("成功撤回");
            this.$set(row, 'billStatus', response.data.billStatus)
          }
        });
      }else{
        this.msgSuccess("此条数据没有提交，不能申请撤回");
      }
    },
  },
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible;
    },
    planList(val) {
      this.showSure(val);
    },
  },
};
</script>