xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加 采集 修改车辆信息页面 备货单页面调整 审核菜单徽标

Browse Source
This commit is contained in:
浅念
2025-10-12 17:14:32 +08:00
parent dee800f90f
commit 0b89bade20
35 changed files with 5848 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/crmpc/stocking/Add.vue
+145 -73
View File
@@ -9,15 +9,15 @@
<span class="border"></span>
<span class="title">基础信息</span>
</div>
<ElForm :model="baseForm" class="base-form" label-position="right">
<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="114px">
<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">
<ElFormItem label="日期" label-width="114px" prop="biz_date" required>
<ElDatePicker
v-model="baseForm.biz_date"
type="date"
@@ -29,16 +29,12 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="清关目的国" label-width="114px">
<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 || '')
"
@change="(val) => (baseForm.clearance_country_snapshot = (countryOptions || []).find((x: any) => x.id === val)?.cn_addrs || '')"
>
<el-option
v-for="item in countryOptions"
@@ -51,7 +47,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="客户名称" label-width="114px">
<ElFormItem label="客户名称" label-width="114px" prop="customer_id" required>
<ElInput
v-model="baseForm.customer_snapshot"
placeholder="请选择客户"
@@ -73,11 +69,7 @@
filterable
disabled
placeholder="请选择客户渠道"
@change="
(val) =>
(baseForm.customer_source_snapshot =
(channelOptions || []).find((x: any) => x.id === val)?.name || '')
"
@change="(val) => (baseForm.customer_source_snapshot = (channelOptions || []).find((x: any) => x.id === val)?.name || '')"
>
<el-option
v-for="item in channelOptions"
@@ -98,11 +90,7 @@
filterable
placeholder="请选择国家"
disabled
@change="
(val) =>
(baseForm.customer_country_snapshot =
(countryOptions || []).find((x: any) => x.id === val)?.cn_addrs || '')
"
@change="(val) => (baseForm.customer_country_snapshot = (countryOptions || []).find((x: any) => x.id === val)?.cn_addrs || '')"
>
<el-option
v-for="item in countryOptions"
@@ -124,11 +112,11 @@
<span class="border"></span>
<span class="title">订单详情</span>
</div>
<ElForm class="items-wrap" label-position="right">
<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">
<ElFormItem label="车型" label-width="85px" :prop="`items.${idx}.sku_id`" required>
<ElInput
v-model="item.model_snapshot"
placeholder="请选择车型"
@@ -143,17 +131,12 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="颜色/外饰" label-width="85px">
<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 ||
'')
"
@change="(val) => (item.color_exterior_code = (wcolorOptions || []).find((x: any) => x.color_text === val)?.color_code || '')"
>
<ElOption
v-for="item in wcolorOptions"
@@ -166,7 +149,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="颜色/内饰" label-width="85px">
<ElFormItem label="颜色/内饰" label-width="85px" :prop="`items.${idx}.color_interior_snapshot`" required>
<el-select
v-model="item.color_interior_snapshot"
filterable
@@ -195,12 +178,7 @@
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 })))
"
@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"
@@ -219,10 +197,10 @@
</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="85px">
<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: 64px; border: none">
<ElSelect v-model="item.guide_price_currency" style="width: 74px; border: none">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -236,10 +214,10 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4" v-else>
<ElFormItem label="二手挂牌价" label-width="85px">
<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: 64px">
<ElSelect v-model="item.listing_price_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -256,7 +234,7 @@
<ElFormItem label="优惠" label-width="85px">
<ElInput v-model="item.discount_price" placeholder="请输入优惠额">
<template #suffix>
<ElSelect v-model="item.discount_currency" style="width: 64px">
<ElSelect v-model="item.discount_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -273,7 +251,7 @@
<ElFormItem label="优惠" label-width="85px">
<ElInput v-model="item.reduction_price" placeholder="请输入优惠">
<template #suffix>
<ElSelect v-model="item.reduction_price_currency" style="width: 64px">
<ElSelect v-model="item.reduction_price_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -292,7 +270,7 @@
<ElFormItem label="手续费" label-width="85px">
<ElInput v-model="item.handling_fee" placeholder="请输入手续费">
<template #suffix>
<ElSelect v-model="item.helper_fee_currency" style="width: 64px">
<ElSelect v-model="item.helper_fee_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -309,7 +287,7 @@
<ElFormItem label="改装费" label-width="85px">
<ElInput v-model="item.retrofit_fee" placeholder="请输入改装费">
<template #suffix>
<ElSelect v-model="item.modify_fee_currency" style="width: 64px">
<ElSelect v-model="item.modify_fee_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -326,7 +304,7 @@
<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: 64px">
<ElSelect v-model="item.fob_fee_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -343,7 +321,7 @@
<ElFormItem label="港杂费" label-width="85px">
<ElInput v-model="item.port_misc_fee" placeholder="请输入港杂费">
<template #suffix>
<ElSelect v-model="item.port_fee_currency" style="width: 64px">
<ElSelect v-model="item.port_fee_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -360,7 +338,7 @@
<ElFormItem label="海运费" label-width="85px">
<ElInput v-model="item.ocean_freight" placeholder="请输入海运费">
<template #suffix>
<ElSelect v-model="item.ocean_freight_currency" style="width: 64px">
<ElSelect v-model="item.ocean_freight_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -377,7 +355,7 @@
<ElFormItem label="佣金" label-width="85px">
<ElInput v-model="item.commission" placeholder="请输入佣金">
<template #suffix>
<ElSelect v-model="item.commission_currency" style="width: 64px">
<ElSelect v-model="item.commission_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -394,7 +372,7 @@
<ElFormItem label="购置税" label-width="85px">
<ElInput v-model="item.purchase_tax" placeholder="请输入购置税">
<template #suffix>
<ElSelect v-model="item.purchase_tax_currency" style="width: 64px">
<ElSelect v-model="item.purchase_tax_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -411,7 +389,7 @@
<ElFormItem label="预估退税额" label-width="85px">
<ElInput v-model="item.tax_refund" placeholder="请输入预估退税额">
<template #suffix>
<ElSelect v-model="item.tax_refund_currency" style="width: 64px">
<ElSelect v-model="item.tax_refund_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -427,10 +405,10 @@
</ElRow>
<ElRow :gutter="12" class="item-row-wrap">
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="成交价" label-width="85px">
<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: 64px">
<ElSelect v-model="item.unit_price_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -447,7 +425,7 @@
<ElFormItem label="总价" label-width="85px">
<ElInput v-model="item.total_price" placeholder="请输入总价">
<template #suffix>
<ElSelect v-model="item.total_price_currency" style="width: 64px">
<ElSelect v-model="item.total_price_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -517,7 +495,7 @@
<ElFormItem label="合计到岸价" label-width="105px">
<ElInput v-model="baseForm.total_cif" placeholder="请输入合计到岸价">
<template #suffix>
<ElSelect v-model="baseForm.total_cif_currency" style="width: 64px">
<ElSelect v-model="baseForm.total_cif_currency" style="width: 74px">
<ElOption
v-for="c in currencyOptions"
:key="c.currency_code"
@@ -534,7 +512,7 @@
<ElFormItem label="合同汇率" label-width="105px">
<ElInput v-model="baseForm.contract_exchange_rate" placeholder="请输入">
<template #suffix>
<ElSelect v-model="baseForm.settlement_currency" style="width: 64px">
<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"
@@ -555,15 +533,15 @@
<span class="border"></span>
<span class="title">运输详情</span>
</div>
<ElForm :model="baseForm" class="foot-form" label-position="right">
<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">
<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">
<ElFormItem label="预计发送日" label-width="98px" prop="eta_ship_date" required>
<ElDatePicker
v-model="baseForm.eta_ship_date"
value-format="YYYY-MM-DD"
@@ -575,7 +553,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="国内收货港" label-width="98px">
<ElFormItem label="国内收货港" label-width="98px" prop="domestic_port_id" required>
<ElSelect
v-model="baseForm.domestic_port_id"
placeholder="请选择国内收货商"
@@ -596,7 +574,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="运输方式" label-width="98px">
<ElFormItem label="运输方式" label-width="98px" prop="shipping_method_id" required>
<ElSelect
v-model="baseForm.shipping_method_id"
placeholder="请选择运输方式"
@@ -618,7 +596,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="贸易条款" label-width="98px">
<ElFormItem label="贸易条款" label-width="98px" prop="trade_term_id" required>
<ElSelect
v-model="baseForm.trade_term_id"
placeholder="请选择"
@@ -639,7 +617,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="清关目的港" label-width="98px">
<ElFormItem label="清关目的港" label-width="98px" prop="clearance_port_id" required>
<ElSelect
v-model="baseForm.clearance_port_id"
placeholder="请选择"
@@ -660,7 +638,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="6" :xl="4">
<ElFormItem label="最迟到港时间" label-width="98px">
<ElFormItem label="最迟到港时间" label-width="108px" prop="latest_arrival_date" required>
<ElDatePicker
v-model="baseForm.latest_arrival_date"
type="date"
@@ -682,15 +660,15 @@
<div class="payment-section">
<div class="payment-items">
<div v-for="(payment, idx) in paymentItems" :key="idx" class="payment-item">
<ElForm :model="payment" label-width="55px" class="payment-form" label-position="right">
<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="55px">
<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="55px">
<ElFormItem label="汇款国" label-width="65px" prop="remit_country_id" required>
<el-select
v-model="payment.remit_country_id"
filterable
@@ -712,7 +690,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="4" :xl="4">
<ElFormItem label="日期" label-width="55px">
<ElFormItem label="日期" label-width="65px" prop="remit_date" required>
<ElDatePicker
v-model="payment.remit_date"
type="date"
@@ -724,7 +702,7 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="5" :xl="5">
<ElFormItem label="账户" label-width="55px">
<ElFormItem label="账户" label-width="65px" prop="account_id" required>
<ElSelect
v-model="payment.account_id"
placeholder="请选择账户"
@@ -745,12 +723,12 @@
</ElFormItem>
</ElCol>
<ElCol :sm="12" :md="12" :lg="5" :xl="5">
<ElFormItem label="金额" label-width="55px">
<ElFormItem label="金额" label-width="65px" prop="amount" required>
<ElInput v-model="payment.amount" placeholder="请输入金额">
<template #suffix>
<ElSelect
v-model="payment.currency_code"
style="width: 64px"
style="width: 74px"
@change="
(val) => {
const found = (currencyOptions || []).find(
@@ -826,10 +804,19 @@
<div class="form-card">
<!-- 底部信息 -->
<div class="submit-wrap">
<ElButton type="primary" plain size="large" class="submit-btn" @click="handleSubmit(0)"
<ElButton
type="primary"
plain
size="large"
class="submit-btn"
@click="handleSubmitWithValidation(0)"
>保存</ElButton
>
<ElButton type="primary" size="large" class="submit-btn" @click="handleSubmit(1)"
<ElButton
type="primary"
size="large"
class="submit-btn"
@click="handleSubmitWithValidation(1)"
>提交</ElButton
>
</div>
@@ -945,13 +932,75 @@
import { useUserStore } from '@/store/modules/user'
import { CrmService } from '@/api/crmApi'
import { useStockingForm } from '@/composables/useStockingForm'
import { onMounted } from 'vue'
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 {
// 数据
@@ -1024,6 +1073,29 @@
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()