art-design/src/views/crmpc/stocking/Add.vue

<template>
  <div class="stocking-add-page">
    <div class="header boxshadow">
      <div class="title">合塑实业·汽车事业部-备货单(客户下定)</div>
      <div class="subtitle">业务员：{{ getUserInfo.user.name }}</div>
    </div>
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">基础信息</span>
      </div>
      <ElForm :model="baseForm" :rules="baseFormRules" ref="baseFormRef" class="base-form" label-position="right">
        <ElRow :gutter="12">
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="阿里订单号/PI号" label-width="124px" prop="pi_no" required>
              <ElInput v-model="baseForm.pi_no" placeholder="请输入阿里订单号/PI号" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="日期" label-width="114px" prop="biz_date" required>
              <ElDatePicker
                v-model="baseForm.biz_date"
                type="date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="清关目的国" label-width="114px" prop="clearance_country_id" required>
              <el-select
                v-model="baseForm.clearance_country_id"
                filterable
                placeholder="请选择国家"
                @change="(val) => (baseForm.clearance_country_snapshot = (countryOptions || []).find((x: any) => x.id === val)?.cn_addrs || '')"
              >
                <el-option
                  v-for="item in countryOptions"
                  :key="item.id"
                  :label="item.cn_addrs"
                  :value="item.id"
                />
              </el-select>
              <ElInput v-model="baseForm.clearance_country_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="客户名称" label-width="114px" prop="customer_id" required>
              <ElInput
                v-model="baseForm.customer_snapshot"
                placeholder="请选择客户"
                readonly
                @click="openCustomerDialog"
              >
                <template #suffix>
                  <i class="iconfont-sys" @click.stop="openCustomerDialog">&#xe867;</i>
                </template>
              </ElInput>
              <ElInput v-model="baseForm.customer_id" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="客户来源" label-width="114px">
              <el-tooltip class="box-item" content="如需修改客户来源，请先编辑修改客户资料">
                <el-select
                  v-model="baseForm.customer_source_id"
                  filterable
                  disabled
                  placeholder="请选择客户渠道"
                  @change="(val) => (baseForm.customer_source_snapshot = (channelOptions || []).find((x: any) => x.id === val)?.name || '')"
                >
                  <el-option
                    v-for="item in channelOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-tooltip>
              <ElInput v-model="baseForm.customer_source_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="客户所在国" label-width="114px">
              <el-tooltip class="box-item" content="如需修改客户所在国，请先编辑修改客户资料">
                <el-select
                  v-model="baseForm.customer_country_id"
                  filterable
                  placeholder="请选择国家"
                  disabled
                  @change="(val) => (baseForm.customer_country_snapshot = (countryOptions || []).find((x: any) => x.id === val)?.cn_addrs || '')"
                >
                  <el-option
                    v-for="item in countryOptions"
                    :key="item.id"
                    :label="item.cn_addrs"
                    :value="item.id"
                  />
                </el-select>
              </el-tooltip>
              <ElInput v-model="baseForm.customer_country_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <!-- 明细行 -->
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">订单详情</span>
      </div>
      <ElForm :model="formModel" :rules="itemRules" ref="itemsFormRef" class="items-wrap" label-position="right">
        <div class="item-row form-box" v-for="(item, idx) in items" :key="idx">
          <ElRow :gutter="12" class="item-row-wrap">
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="车型" label-width="85px" :prop="`items.${idx}.sku_id`" required>
                <ElInput
                  v-model="item.model_snapshot"
                  placeholder="请选择车型"
                  readonly
                  @click="openVehicleDialog(idx)"
                >
                  <template #suffix>
                    <i class="iconfont-sys" @click.stop="openVehicleDialog(idx)">&#xe867;</i>
                  </template>
                </ElInput>
                <ElInput v-model="item.sku_id" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="颜色/外饰" label-width="85px" :prop="`items.${idx}.color_exterior_snapshot`" required>
                <el-select
                  v-model="item.color_exterior_snapshot"
                  filterable
                  placeholder="请选择内容"
                  @change="(val) => (item.color_exterior_code = (wcolorOptions || []).find((x: any) => x.color_text === val)?.color_code || '')"
                >
                  <ElOption
                    v-for="item in wcolorOptions"
                    :key="item.color_code"
                    :label="item.color_text"
                    :value="item.color_text"
                  />
                </el-select>
                <ElInput v-model="item.color_exterior_code" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="颜色/内饰" label-width="85px" :prop="`items.${idx}.color_interior_snapshot`" required>
                <el-select
                  v-model="item.color_interior_snapshot"
                  filterable
                  placeholder="请选择内容"
                  @change="
                    (val) =>
                      (item.color_interior_code =
                        (ncolorOptions || []).find((x: any) => x.color_text === val)?.color_code ||
                        '')
                  "
                >
                  <ElOption
                    v-for="item in ncolorOptions"
                    :key="item.color_code"
                    :label="item.color_text"
                    :value="item.color_text"
                  />
                </el-select>
                <ElInput v-model="item.color_interior_code" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="改装" label-width="85px">
                <el-select
                  v-model="item.modify_ids"
                  filterable
                  multiple
                  placeholder="请选择内容"
                  @change="(vals) => (item.modify_list = (modificationOptions || []).filter((x: any) => (vals || []).includes(x.id)).map((x: any) => ({ option_id: x.id, option_name_snapshot: x.name })))"
                >
                  <el-option
                    v-for="item in modificationOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="里程" label-width="85px">
                <ElInput v-model="item.mileage" placeholder="请输入里程" />
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="12" class="item-row-wrap">
            <ElCol :sm="12" :md="12" :lg="6" :xl="4" v-if="(item.mileage ?? 0) <= 0">
              <ElFormItem label="官方指导价" label-width="95px" :prop="`items.${idx}.official_price`" required>
                <ElInput v-model="item.official_price" placeholder="请输入官方指导价">
                  <template #suffix>
                    <ElSelect v-model="item.guide_price_currency" style="width: 74px; border: none">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.guide_price_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4" v-else>
              <ElFormItem label="二手挂牌价" label-width="95px" :prop="`items.${idx}.listing_price`" required>
                <ElInput v-model="item.listing_price" placeholder="请输入二手挂牌价">
                  <template #suffix>
                    <ElSelect v-model="item.listing_price_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.listing_price_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4" v-if="(item.mileage ?? 0) <= 0">
              <ElFormItem label="优惠" label-width="85px">
                <ElInput v-model="item.discount_price" placeholder="请输入优惠额">
                  <template #suffix>
                    <ElSelect v-model="item.discount_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.discount_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4" v-else>
              <ElFormItem label="优惠" label-width="85px">
                <ElInput v-model="item.reduction_price" placeholder="请输入优惠">
                  <template #suffix>
                    <ElSelect v-model="item.reduction_price_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.reduction_price_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="12" class="item-row-wrap">
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="手续费" label-width="85px">
                <ElInput v-model="item.handling_fee" placeholder="请输入手续费">
                  <template #suffix>
                    <ElSelect v-model="item.helper_fee_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.helper_fee_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="改装费" label-width="85px">
                <ElInput v-model="item.retrofit_fee" placeholder="请输入改装费">
                  <template #suffix>
                    <ElSelect v-model="item.modify_fee_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.modify_fee_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="FOB段运费" label-width="85px">
                <ElInput v-model="item.fob_transport_fee" placeholder="请输入FOB段运费">
                  <template #suffix>
                    <ElSelect v-model="item.fob_fee_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.fob_fee_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="港杂费" label-width="85px">
                <ElInput v-model="item.port_misc_fee" placeholder="请输入港杂费">
                  <template #suffix>
                    <ElSelect v-model="item.port_fee_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.port_fee_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="海运费" label-width="85px">
                <ElInput v-model="item.ocean_freight" placeholder="请输入海运费">
                  <template #suffix>
                    <ElSelect v-model="item.ocean_freight_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.ocean_freight_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="佣金" label-width="85px">
                <ElInput v-model="item.commission" placeholder="请输入佣金">
                  <template #suffix>
                    <ElSelect v-model="item.commission_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.commission_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="购置税" label-width="85px">
                <ElInput v-model="item.purchase_tax" placeholder="请输入购置税">
                  <template #suffix>
                    <ElSelect v-model="item.purchase_tax_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.purchase_tax_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="预估退税额" label-width="85px">
                <ElInput v-model="item.tax_refund" placeholder="请输入预估退税额">
                  <template #suffix>
                    <ElSelect v-model="item.tax_refund_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.tax_refund_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="12" class="item-row-wrap">
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="成交价" label-width="85px" :prop="`items.${idx}.unit_price`" required>
                <ElInput v-model="item.unit_price" placeholder="请输入成交价">
                  <template #suffix>
                    <ElSelect v-model="item.unit_price_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.unit_price_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol>
            <!-- <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="总价" label-width="85px">
                <ElInput v-model="item.total_price" placeholder="请输入总价">
                  <template #suffix>
                    <ElSelect v-model="item.total_price_currency" style="width: 74px">
                      <ElOption
                        v-for="c in currencyOptions"
                        :key="c.currency_code"
                        :label="c.currency_name"
                        :value="c.currency_code"
                      />
                    </ElSelect>
                  </template>
                </ElInput>
                <ElInput v-model="item.total_price_currency_snapshot" type="hidden" />
              </ElFormItem>
            </ElCol> -->
            <ElCol :sm="12" :md="12" :lg="6" :xl="4">
              <ElFormItem label="利润" label-width="85px">
                <ElInput
                  v-model="item.profit"
                  placeholder="正在计算利润"
                  :class="Number(item.profit) < 0 ? 'profit-negative' : ''"
                  disabled
                >
                  <template #suffix>
                    <span style="font-size: 11px">
                      {{
                        ((currencyOptions || []).find((c: any) => c.currency_code === baseForm.settlement_currency)?.currency_name) ||
                          baseForm.settlement_currency
                      }}
                    </span>
                  </template>
                </ElInput>
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="12" class="item-row-wrap">
            <ElCol :sm="24" :md="24" :lg="24" :xl="24">
              <ElFormItem label="备注" label-width="85px">
                <ElInput type="textarea" :rows="2" v-model="item.remark" placeholder="请输入备注" />
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="12">
            <ElCol :span="24" style="text-align: right">
              <el-tag effect="light" type="success" @click="copyRow(idx)" class="row-actions">
                复制
              </el-tag>
              <el-tag
                effect="light"
                @click="addRowAfter(idx)"
                v-if="idx == items.length - 1"
                class="row-actions"
              >
                新增
              </el-tag>
              <el-tag
                type="danger"
                effect="light"
                class="row-actions"
                @click="removeRow(idx)"
                v-if="items.length > 1"
              >
                删除
              </el-tag>
            </ElCol>
          </ElRow>
        </div>
        <ElRow :gutter="12">
          <ElCol :sm="12" :md="12" :lg="6" :xl="6">
            <ElFormItem label="合计到岸价" label-width="105px">
              <ElInput v-model="baseForm.total_cif" placeholder="请输入合计到岸价">
                <template #suffix>
                  <ElSelect v-model="baseForm.total_cif_currency" style="width: 74px">
                    <ElOption
                      v-for="c in currencyOptions"
                      :key="c.currency_code"
                      :label="c.currency_name"
                      :value="c.currency_code"
                    />
                  </ElSelect>
                </template>
              </ElInput>
              <ElInput v-model="baseForm.total_cif_currency_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="6">
            <ElFormItem label="合同汇率" label-width="105px">
              <ElInput v-model="baseForm.contract_exchange_rate" placeholder="请输入">
                <template #suffix>
                  <ElSelect v-model="baseForm.settlement_currency" style="width: 74px">
                    <ElOption
                      @change="(val) =>(baseForm.contract_exchange_rate =(currencyOptions || []).find((x: any) => x.currency_code === val)?.exchange_rate || '') "
                      v-for="c in currencyOptions"
                      :key="c.currency_code"
                      :label="c.currency_name"
                      :value="c.currency_code"
                    />
                  </ElSelect>
                </template>
              </ElInput>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">运输详情</span>
      </div>
      <ElForm :model="baseForm" :rules="transportFormRules" ref="transportFormRef" class="foot-form" label-position="right">
        <ElRow :gutter="12">
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="清关人" label-width="98px" prop="declarant_name" required>
              <ElInput v-model="baseForm.declarant_name" placeholder="请输入清关人" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="预计发送日" label-width="98px" prop="eta_ship_date" required>
              <ElDatePicker
                v-model="baseForm.eta_ship_date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                type="date"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="国内收货港" label-width="98px" prop="domestic_port_id" required>
              <ElSelect
                v-model="baseForm.domestic_port_id"
                placeholder="请选择国内收货商"
                @change="
                  (val) =>
                    (baseForm.domestic_port_snapshot =
                      (portOptions || []).find((x: any) => x.id === val)?.port_name || '')
                "
              >
                <ElOption
                  v-for="p in portOptions"
                  :key="p.id"
                  :label="p.port_names"
                  :value="p.id"
                />
              </ElSelect>
              <ElInput v-model="baseForm.domestic_port_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="运输方式" label-width="98px" prop="shipping_method_id" required>
              <ElSelect
                v-model="baseForm.shipping_method_id"
                placeholder="请选择运输方式"
                @change="
                  (val) =>
                    (baseForm.shipping_method_snapshot =
                      (transportOptions || []).find((x: any) => x.item_value === val)?.item_label ||
                      '')
                "
              >
                <ElOption
                  v-for="t in transportOptions"
                  :key="t.item_value"
                  :label="t.item_label"
                  :value="t.item_value"
                />
              </ElSelect>
              <ElInput v-model="baseForm.shipping_method_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="贸易条款" label-width="98px" prop="trade_term_id" required>
              <ElSelect
                v-model="baseForm.trade_term_id"
                placeholder="请选择"
                @change="
                  (val) =>
                    (baseForm.trade_term_snapshot =
                      (trade_termsOptions || []).find((x: any) => x.id === val)?.item_label || '')
                "
              >
                <ElOption
                  v-for="t in trade_termsOptions"
                  :key="t.id"
                  :label="t.item_label"
                  :value="t.id"
                />
              </ElSelect>
              <ElInput v-model="baseForm.trade_term_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="清关目的港" label-width="98px" prop="clearance_port_id" required>
              <ElSelect
                v-model="baseForm.clearance_port_id"
                placeholder="请选择"
                @change="
                  (val) =>
                    (baseForm.clearance_port_snapshot =
                      (portOptionsall || []).find((x: any) => x.id === val)?.port_name || '')
                "
              >
                <ElOption
                  v-for="p in portOptionsall"
                  :key="p.id"
                  :label="p.port_names"
                  :value="p.id"
                />
              </ElSelect>
              <ElInput v-model="baseForm.clearance_port_snapshot" type="hidden" />
            </ElFormItem>
          </ElCol>
          <ElCol :sm="12" :md="12" :lg="6" :xl="4">
            <ElFormItem label="最迟到港时间" label-width="108px" prop="latest_arrival_date" required>
              <ElDatePicker
                v-model="baseForm.latest_arrival_date"
                type="date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">计划收款信息</span>
      </div>
      <div class="payment-section">
        <div class="payment-items">
          <div v-for="(payment, idx) in paymentItems" :key="idx" class="payment-item">
            <ElForm :model="payment" :rules="paymentFormRules" :ref="(el) => setPaymentFormRef(el, idx)" label-width="65px" class="payment-form" label-position="right">
              <ElRow :gutter="12">
                <ElCol :sm="12" :md="12" :lg="6" :xl="6">
                  <ElFormItem label="汇款人" label-width="65px" prop="remitter_name" required>
                    <ElInput v-model="payment.remitter_name" placeholder="请选择汇款人" />
                  </ElFormItem>
                </ElCol>
                <ElCol :sm="12" :md="12" :lg="4" :xl="4">
                  <ElFormItem label="汇款国" label-width="65px" prop="remit_country_id" required>
                    <el-select
                      v-model="payment.remit_country_id"
                      filterable
                      placeholder="请选择汇款国"
                      @change="
                        (val) =>
                          (payment.remit_country_name_snapshot =
                            (countryOptions || []).find((x: any) => x.id === val)?.cn_addrs || '')
                      "
                    >
                      <el-option
                        v-for="item in countryOptions"
                        :key="item.id"
                        :label="item.cn_addrs"
                        :value="item.id"
                      />
                    </el-select>
                    <ElInput v-model="payment.remit_country_name_snapshot" type="hidden" />
                  </ElFormItem>
                </ElCol>
                <ElCol :sm="12" :md="12" :lg="4" :xl="4">
                  <ElFormItem label="日期" label-width="65px" prop="remit_date" required>
                    <ElDatePicker
                      v-model="payment.remit_date"
                      type="date"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择日期"
                      style="width: 100%"
                    />
                  </ElFormItem>
                </ElCol>
                <ElCol :sm="12" :md="12" :lg="5" :xl="5">
                  <ElFormItem label="账户" label-width="65px" prop="account_id" required>
                    <ElSelect
                      v-model="payment.account_id"
                      placeholder="请选择账户"
                      @change="
                        (val) =>
                          (payment.account_name_snapshot =
                            (accountOptions || []).find((x: any) => x.id === val)?.short_desc || '')
                      "
                    >
                      <ElOption
                        v-for="item in accountOptions"
                        :key="item.id"
                        :label="item.short_desc"
                        :value="item.id"
                      />
                    </ElSelect>
                    <ElInput v-model="payment.account_name_snapshot" type="hidden" />
                  </ElFormItem>
                </ElCol>
                <ElCol :sm="12" :md="12" :lg="5" :xl="5">
                  <ElFormItem label="金额" label-width="65px" prop="amount" required>
                    <ElInput v-model="payment.amount" placeholder="请输入金额">
                      <template #suffix>
                        <ElSelect
                          v-model="payment.currency_code"
                          style="width: 74px"
                          @change="
                            (val) => {
                              const found = (currencyOptions || []).find(
                                (x: any) => x.currency_code === val
                              )
                              payment.currency_name_snapshot = found?.currency_name || ''
                            }
                          "
                        >
                          <ElOption
                            v-for="c in currencyOptions"
                            :key="c.currency_code"
                            :label="c.currency_name"
                            :value="c.currency_code"
                          />
                        </ElSelect>
                      </template>
                    </ElInput>
                    <ElInput v-model="payment.currency_name_snapshot" type="hidden" />
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow :gutter="12">
                <ElCol :span="24" style="text-align: right">
                  <ElButton
                    type="danger"
                    size="small"
                    @click="removePaymentItem(idx)"
                    :disabled="paymentItems.length === 1"
                    >删除</ElButton
                  >
                  <ElButton
                    type="primary"
                    size="small"
                    @click="addPaymentItem"
                    v-if="idx === paymentItems.length - 1"
                    >添加收款信息</ElButton
                  >
                </ElCol>
              </ElRow>
            </ElForm>
          </div>
        </div>
      </div>
    </div>
    <!-- 上传合同 -->
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">上传合同</span>
      </div>
      <el-upload
        class="upload-box"
        :action="actionImageUplode"
        :headers="uploadHeaders"
        :show-file-list="false"
        :on-success="handleContractUpload"
        :before-upload="beforeContractUpload"
        accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.txt"
      >
        <div class="qrcode-upload-box">
          <img v-if="!contractFile" class="avatar" src="@/assets/img/crm/contract.png" />
          <div v-else class="file-preview">
            <img v-if="isImageFile(contractFile)" :src="contractFile.url" class="preview-image" />
            <div v-else class="file-icon">
              <i class="el-icon-document"></i>
              <span class="file-name">{{ contractFile.name }}</span>
            </div>
          </div>
        </div>
      </el-upload>
    </div>
    <div class="form-card">
      <!-- 底部信息 -->
      <div class="submit-wrap">
        <ElButton
          type="primary"
          plain
          size="large"
          class="submit-btn"
          @click="handleSubmitWithValidation(0)"
          >保存</ElButton
        >
        <ElButton
          type="primary"
          size="large"
          class="submit-btn"
          @click="handleSubmitWithValidation(1)"
          >提交</ElButton
        >
      </div>
    </div>
    <!-- 选择车型 弹框 -->
    <ElDialog
      v-model="vehicleDialog.visible"
      title="选择车辆"
      width="900px"
      :close-on-click-modal="false"
      top="40px"
    >
      <div
        class="search-toolbar"
        style="margin-bottom: 12px; display: flex; justify-content: flex-end; gap: 8px"
      >
        <el-input
          v-model="vehicleDialog.search.keyword"
          placeholder="请输入关键字"
          clearable
          style="width: 300px"
          @keyup.enter="getVehicleList"
        >
          <template #suffix>
            <el-icon class="clickable" @click="getVehicleList"><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <ArtTable
        :loading="vehicleDialog.loading"
        :data="vehicleDialog.tableData"
        :currentPage="vehicleDialog.pagination.currentPage"
        :pageSize="vehicleDialog.pagination.pageSize"
        :total="vehicleDialog.pagination.total"
        @size-change="handleVehicleSizeChange"
        @current-change="handleVehicleCurrentChange"
      >
        <template #default>
          <ElTableColumn label="品牌" prop="brand_name" align="center" />
          <ElTableColumn label="车系" prop="series_name" align="center" />
          <ElTableColumn label="车型/配置" prop="model_name" min-width="160">
            <template #default="scope">
              <span class="primary">{{ scope.row.model_name }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="年款" prop="model_year" width="80" align="center" />
          <ElTableColumn label="指导价" prop="msrp" width="100" align="center" />
          <ElTableColumn label="操作" width="100" align="center" fixed="right">
            <template #default="scope">
              <ElButton link type="primary" @click="chooseVehicle(scope.row)">选择</ElButton>
            </template>
          </ElTableColumn>
        </template>
      </ArtTable>
    </ElDialog>
    <!-- 选择客户 弹框 -->
    <ElDialog
      v-model="customerDialog.visible"
      title="选择客户"
      width="900px"
      :close-on-click-modal="false"
      top="40px"
    >
      <div
        class="search-toolbar"
        style="margin-bottom: 12px; display: flex; justify-content: flex-end; gap: 8px"
      >
        <el-input
          v-model="customerDialog.search.keyword"
          placeholder="请输入客户名称/电话"
          clearable
          style="width: 300px"
          @keyup.enter="getCustomerList"
        >
          <template #suffix>
            <el-icon class="clickable" @click="getCustomerList"><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <ArtTable
        :loading="customerDialog.loading"
        :data="customerDialog.tableData"
        :currentPage="customerDialog.pagination.currentPage"
        :pageSize="customerDialog.pagination.pageSize"
        :total="customerDialog.pagination.total"
        @size-change="handleCustomerSizeChange"
        @current-change="handleCustomerCurrentChange"
      >
        <template #default>
          <ElTableColumn label="客户名称" prop="contacts" />
          <ElTableColumn label="客户编码" prop="code" />
          <ElTableColumn label="电话" prop="phone" />
          <ElTableColumn label="公司" prop="company">
            <template #default="scope">
              <div>{{
                scope.row.company == '' || scope.row.company == '0' ? ' --' : scope.row.company
              }}</div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" width="80" align="center" fixed="right">
            <template #default="scope">
              <ElButton link type="primary" @click="chooseCustomer(scope.row)">选择</ElButton>
            </template>
          </ElTableColumn>
        </template>
      </ArtTable>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { Search } from '@element-plus/icons-vue'
  import { useUserStore } from '@/store/modules/user'
  import { CrmService } from '@/api/crmApi'
  import { useStockingForm } from '@/composables/useStockingForm'
  import { onMounted, ref, computed } from 'vue'

  defineOptions({ name: 'CrmStockingAdd' }) // 定义组件名称，用于 KeepAlive 缓存控制

  const { getUserInfo } = useUserStore()
  const route = useRoute()
  const stocking_id = route.query.id
  // 表单引用
  const baseFormRef = ref()
  const itemsFormRef = ref()
  const transportFormRef = ref()
  const paymentFormRefs = ref<any[]>([])
  // 表单模型
  const formModel = computed(() => ({ items: items.value }))
  
  // 设置收款表单引用
  const setPaymentFormRef = (el: any, idx: number) => {
    if (el) {
      paymentFormRefs.value[idx] = el
    }
  }
  // 基础表单校验规则
  const baseFormRules = {
    pi_no: [{ required: true, message: '请输入阿里订单号/PI号', trigger: 'blur' }],
    biz_date: [{ required: true, message: '请选择日期', trigger: 'change' }],
    clearance_country_id: [{ required: true, message: '请选择清关目的国', trigger: 'change' }],
    customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }]
  }
  // 订单项校验规则
  const itemRules = computed(() => {
    const rules: any = {}
    items.value.forEach((_, idx) => {
      rules[`items.${idx}.sku_id`] = [{ required: true, message: '请选择车型', trigger: 'change' }]
      rules[`items.${idx}.color_exterior_snapshot`] = [
        { required: true, message: '请选择颜色/外饰', trigger: 'change' }
      ]
      rules[`items.${idx}.color_interior_snapshot`] = [
        { required: true, message: '请选择颜色/内饰', trigger: 'change' }
      ]
      rules[`items.${idx}.official_price`] = [
        { required: true, message: '请输入官方指导价', trigger: 'blur' }
      ]
      rules[`items.${idx}.listing_price`] = [
        { required: true, message: '请输入二手挂牌价', trigger: 'blur' }
      ]
      rules[`items.${idx}.unit_price`] = [
        { required: true, message: '请输入成交价', trigger: 'blur' }
      ]
    })
    return rules
  })
  // 运输详情校验规则
  const transportFormRules = {
    declarant_name: [{ required: true, message: '请输入清关人', trigger: 'blur' }],
    eta_ship_date: [{ required: true, message: '请选择预计发送日', trigger: 'change' }],
    domestic_port_id: [{ required: true, message: '请选择国内收货港', trigger: 'change' }],
    shipping_method_id: [{ required: true, message: '请选择运输方式', trigger: 'change' }],
    trade_term_id: [{ required: true, message: '请选择贸易条款', trigger: 'change' }],
    clearance_port_id: [{ required: true, message: '请选择清关目的港', trigger: 'change' }],
    latest_arrival_date: [{ required: true, message: '请选择最迟到港时间', trigger: 'change' }]
  }
  // 收款信息校验规则
  const paymentFormRules = {
    remitter_name: [{ required: true, message: '请输入汇款人', trigger: 'blur' }],
    remit_country_id: [{ required: true, message: '请选择汇款国', trigger: 'change' }],
    remit_date: [{ required: true, message: '请选择汇款日期', trigger: 'change' }],
    account_id: [{ required: true, message: '请选择账户', trigger: 'change' }],
    amount: [{ required: true, message: '请输入金额', trigger: 'blur' }]
  }
  // 使用公共的备货单表单逻辑
  const {
    // 数据
    baseForm,
    items,
    paymentItems,
    contractFile,
    customerDialog,
    vehicleDialog,

    // 选项数据
    channelOptions,
    countryOptions,
    modificationOptions,
    currencyOptions,
    accountOptions,
    customerOptions,
    portOptions,
    portOptionsall,
    wcolorOptions,
    ncolorOptions,
    transportOptions,
    trade_termsOptions,

    // 上传相关
    actionImageUplode,
    uploadHeaders,

    // 方法
    initializeForm,
    populateFromDetail,
    handleSubmit,
    getCurrencyRate,
    validateContractRate,
    wrapMoney,
    calcProfit,

    // 合同文件方法
    isImageFile,
    beforeContractUpload,
    handleContractUpload,
    removeContractFile,

    // 订单项方法
    copyRow,
    addRowAfter,
    removeRow,

    // 收款项方法
    addPaymentItem,
    removePaymentItem,

    // 客户选择方法
    openCustomerDialog,
    getCustomerList,
    handleCustomerSizeChange,
    handleCustomerCurrentChange,
    chooseCustomer,

    // 车辆选择方法
    openVehicleDialog,
    getVehicleList,
    handleVehicleSizeChange,
    handleVehicleCurrentChange,
    chooseVehicle
  } = useStockingForm(false) // isFinal = false
  // 获取详情数据
  const getdetilfn = async () => {
    const res = await CrmService.getStockDetail({ id: stocking_id })
    populateFromDetail(res)
  }

  // 自定义提交方法，添加表单校验
  const handleSubmitWithValidation = async (isFinal: number) => {
    try {
      // 校验基础表单
      await baseFormRef.value?.validate()
      // 校验订单项表单
      await itemsFormRef.value?.validate()
      // 校验运输详情表单
      await transportFormRef.value?.validate()
      // 校验收款信息表单
      for (let i = 0; i < paymentItems.value.length; i++) {
        const paymentFormRef = paymentFormRefs.value[i]
        if (paymentFormRef) {
          await paymentFormRef.validate()
        }
      }
      // 如果校验通过，调用原始的handleSubmit方法
      await handleSubmit(isFinal)
    } catch (error) {
      console.log('表单校验失败:', error)
    }
  }

  // 初始化表单
  onMounted(async () => {
    await initializeForm()
    // 如果有ID，代表复制   加载详情数据
    if (stocking_id) {
      await getdetilfn()
    }
  })
</script>

<style scoped lang="scss">
  :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
    padding: 4px;
  }
  :deep(.el-select__selected-item span) {
    font-size: 11px;
  }
  .form-title {
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
  }
  .form-title .title {
    margin-left: 6px;
  }
  .stocking-add-page {
    min-height: 100vh;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 12px;

    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
    }

    .subtitle {
      color: var(--el-text-color-secondary);
    }
  }

  .items-wrap {
    margin-top: 6px;
  }

  .item-row {
    padding: 8px 0;
  }

  .row-actions {
    margin-left: 8px;
  }

  /* 利润为负数时，输入文字变红（兼容 Element Plus disabled 样式） */
  :deep(.profit-negative .el-input__wrapper) {
    color: #ff4d4f !important;
  }
  :deep(.profit-negative .el-input__inner) {
    color: #ff4d4f !important;
    -webkit-text-fill-color: #ff4d4f !important; /* 修复 WebKit 在 disabled 下的文本颜色 */
  }
  :deep(.profit-negative.is-disabled .el-input__wrapper) {
    background-color: var(--el-fill-color-blank) !important;
    box-shadow: 0 0 0 1px var(--el-input-border-color, #dcdfe6) inset !important;
  }

  .submit-wrap {
    display: flex;
    justify-content: space-around;
    padding: 24px 0 8px;
    width: 500px;
    margin: auto;
  }

  .submit-btn {
    width: 100px;
    height: 44px;
    font-size: 16px;
  }
  .payment-item {
    margin-bottom: 12px;
  }
  .upload-box {
    width: 200px;
  }

  .file-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;
  }

  .file-icon i {
    font-size: 32px;
    color: #409eff;
    margin-bottom: 8px;
  }

  .file-name {
    font-size: 12px;
    color: #606266;
    text-align: center;
    word-break: break-all;
    padding: 0 8px;
  }
  :deep(.el-input__suffix .el-select .el-select__wrapper) {
    box-shadow: none;
    padding: 0px;
    text-align: right;
  }
  .form-box {
    border-bottom: 1px solid #f2f4f6;
    margin-bottom: 20px;
    padding: 8px 0px 20px;
  }
  /* 右对齐所有表单项的标签文字 */
  // :deep(.el-form-item__label) {
  //   text-align: right;
  // }
</style>