车辆信息，备货单 等页面
This commit is contained in:
浅念
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,952 @@
|
||||
<template>
|
||||
<div class="stocking-add-page">
|
||||
<div class="header boxshadow">
|
||||
<div class="title">合塑实业·汽车事业部-备货单(客户下定)</div>
|
||||
<div class="subtitle">业务员：{{ baseForm.salesman }}</div>
|
||||
</div>
|
||||
<div class="boxshadow">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">基础信息</span>
|
||||
</div>
|
||||
<ElForm :model="baseForm" class="base-form">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="阿里订单号/PN号">
|
||||
<ElInput v-model="baseForm.pn_no" placeholder="请输入阿里订单号/PN号" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="日期">
|
||||
<ElDatePicker
|
||||
v-model="baseForm.date"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="清关目的国">
|
||||
<el-select v-model="baseForm.country" filterable placeholder="请选择国家">
|
||||
<el-option
|
||||
v-for="item in countryOptions"
|
||||
:key="item.id"
|
||||
:label="item.cn_addr"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="客户来源">
|
||||
<el-select v-model="baseForm.customer_source" filterable placeholder="请选择客户渠道">
|
||||
<el-option
|
||||
v-for="item in channelOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="客户名称">
|
||||
<ElInput
|
||||
v-model="baseForm.customer_name"
|
||||
placeholder="请选择客户"
|
||||
readonly
|
||||
@click="openCustomerDialog"
|
||||
>
|
||||
<template #append>
|
||||
<ElButton type="primary" text @click.stop="openCustomerDialog">选择</ElButton>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="客户所在国">
|
||||
<el-select v-model="baseForm.country" filterable placeholder="请选择国家">
|
||||
<el-option
|
||||
v-for="item in countryOptions"
|
||||
:key="item.id"
|
||||
:label="item.cn_addr"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElForm>
|
||||
</div>
|
||||
<!-- 明细行 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">订单详情</span>
|
||||
</div>
|
||||
<div class="items-wrap">
|
||||
<div class="item-row" v-for="(item, idx) in items" :key="item.uid">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="8">
|
||||
<ElFormItem label="车型" label-width="64px">
|
||||
<ElInput
|
||||
v-model="item.model"
|
||||
placeholder="请选择车型"
|
||||
readonly
|
||||
@click="openVehicleDialog(idx)"
|
||||
>
|
||||
<template #append>
|
||||
<ElButton type="primary" text @click.stop="openVehicleDialog(idx)"
|
||||
>选择</ElButton
|
||||
>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="颜色/外饰" label-width="72px">
|
||||
<el-select v-model="item.color_out" filterable placeholder="请选择内容">
|
||||
<ElOption
|
||||
v-for="item in wcolorOptions"
|
||||
:key="item.color_code"
|
||||
:label="item.color_text"
|
||||
:value="item.color_text"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="颜色/内饰" label-width="72px">
|
||||
<el-select v-model="item.color_in" filterable placeholder="请选择内容">
|
||||
<ElOption
|
||||
v-for="item in ncolorOptions"
|
||||
:key="item.color_code"
|
||||
:label="item.color_text"
|
||||
:value="item.color_text"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="8">
|
||||
<ElFormItem label="改装" label-width="52px">
|
||||
<el-select v-model="item.modify" filterable multiple placeholder="请选择内容">
|
||||
<el-option
|
||||
v-for="item in modificationOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="改装费" label-width="60px">
|
||||
<ElInput v-model.number="item.modify_fee" placeholder="请输入改装费">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.modify_fee_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="FOB段运费" label-width="84px">
|
||||
<ElInput v-model.number="item.fob_fee" placeholder="请输入FOB段运费">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.fob_fee_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="单价" label-width="52px">
|
||||
<ElInput v-model.number="item.unit_price" placeholder="请输入单价">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.unit_price_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="总价" label-width="52px">
|
||||
<ElInput v-model.number="item.total_price" placeholder="请输入总价">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.total_price_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="官方指导价" label-width="85px">
|
||||
<ElInput v-model.number="item.guide_price" placeholder="请输入官方指导价">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.guide_price_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="优惠" label-width="52px">
|
||||
<ElInput v-model.number="item.discount" placeholder="请输入优惠额">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.discount_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="手续费" label-width="60px">
|
||||
<ElInput v-model.number="item.helper_fee" placeholder="请输入手续费">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.helper_fee_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="国内运费" label-width="72px">
|
||||
<ElInput v-model.number="item.domestic_freight" placeholder="请输入国内运费">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.domestic_freight_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="港杂费" label-width="60px">
|
||||
<ElInput v-model.number="item.port_fee" placeholder="请输入港杂费">
|
||||
<template #append>
|
||||
<ElSelect v-model="item.port_fee_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="利润" label-width="52px">
|
||||
<ElSelect v-model="item.profit_type" placeholder="请选择" style="width: 100%">
|
||||
<ElOption label="正在计算利润" value="calc" />
|
||||
<ElOption label="已确认" value="ok" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="8">
|
||||
<ElFormItem label="车架号" label-width="70px">
|
||||
<ElInput v-model.number="item.vin" placeholder="请输入" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="合计到岸价" label-width="85px">
|
||||
<ElInput v-model.number="baseForm.total_cif" placeholder="请输入合计到岸价">
|
||||
<template #append>
|
||||
<ElSelect v-model="baseForm.total_cif_currency" style="width: 64px">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="合同汇率" label-width="70px">
|
||||
<ElInput v-model.number="baseForm.customer_source" placeholder="请输入" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxshadow">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">运输详情</span>
|
||||
</div>
|
||||
<ElForm :model="footForm" class="foot-form">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="清关人">
|
||||
<ElInput v-model="footForm.contact" placeholder="请输入清关人" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="预计发送日">
|
||||
<ElDatePicker
|
||||
v-model="footForm.plan_ship_date"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="运输方式">
|
||||
<ElSelect v-model="footForm.transport" placeholder="请选择运输方式">
|
||||
<ElOption label="滚装" value="roll" />
|
||||
<ElOption label="集装箱" value="container" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="国内收货港">
|
||||
<ElSelect v-model="footForm.domestic_receiver" placeholder="请选择国内收货商">
|
||||
<ElOption
|
||||
v-for="p in portOptions"
|
||||
:key="p.port_id"
|
||||
:label="p.port_name"
|
||||
:value="p.port_id"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="贸易条款">
|
||||
<ElInput v-model="footForm.trade_term" placeholder="请选择" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="清关目的港">
|
||||
<ElSelect v-model="footForm.trade_term" placeholder="请选择">
|
||||
<ElOption
|
||||
v-for="p in portOptionsall"
|
||||
:key="p.port_id"
|
||||
:label="p.port_name"
|
||||
:value="p.port_id"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="6">
|
||||
<ElFormItem label="最迟到港时间">
|
||||
<ElDatePicker
|
||||
v-model="footForm.plan_ship_date"
|
||||
type="date"
|
||||
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>
|
||||
<ElForm :model="footForm" label-width="55px" class="foot-form">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="汇款国">
|
||||
<el-select v-model="footForm.remitter" filterable placeholder="请选择汇款国">
|
||||
<el-option
|
||||
v-for="item in countryOptions"
|
||||
:key="item.id"
|
||||
:label="item.cn_addr"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="日期">
|
||||
<ElDatePicker
|
||||
v-model="footForm.remit_date"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="币种">
|
||||
<ElSelect v-model="footForm.currency" placeholder="请选择币种">
|
||||
<ElOption
|
||||
v-for="c in currencyOptions"
|
||||
:key="c.currency_code"
|
||||
:label="c.currency_name"
|
||||
:value="c.currency_code"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="账户">
|
||||
<ElSelect v-model="footForm.account" placeholder="请选择账户">
|
||||
<ElOption
|
||||
v-for="item in accountOptions"
|
||||
:key="item.id"
|
||||
:label="item.account_number"
|
||||
:value="item.id"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="汇款人">
|
||||
<ElInput v-model="footForm.payer" placeholder="请选择汇款人" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="金额">
|
||||
<ElInput v-model.number="footForm.amount" placeholder="请输入金额" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElForm>
|
||||
</div>
|
||||
<!-- 上传合同 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">上传合同</span>
|
||||
</div>
|
||||
<ElUpload drag action="#" :auto-upload="false" :show-file-list="true" class="upload-box">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">拖拽文件到此处，或点击上传</div>
|
||||
</ElUpload>
|
||||
</div>
|
||||
|
||||
<div class="form-card">
|
||||
<!-- 底部信息 -->
|
||||
<div class="submit-wrap">
|
||||
<ElButton type="primary" size="large" class="submit-btn" @click="handleSubmit"
|
||||
>提交</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" />
|
||||
<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 { ElMessage } from 'element-plus'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
import { commonService } from '@/api/commonApi'
|
||||
import { vehicleService } from '@/api/vehicleApi'
|
||||
const channelOptions = ref<any>()
|
||||
const countryOptions = ref<any>()
|
||||
const modificationOptions = ref<any>()
|
||||
const currencyOptions = ref<any>()
|
||||
const accountOptions = ref<any>()
|
||||
const customerOptions = ref<any>()
|
||||
const portOptions = ref<any>()
|
||||
const portOptionsall = ref<any>()
|
||||
// 外观颜色
|
||||
const wcolorOptions = ref<Array<any>>([])
|
||||
// 内饰颜色
|
||||
const ncolorOptions = ref<Array<any>>([])
|
||||
//渠道
|
||||
const getgetChannel = async () => {
|
||||
const res = await CrmService.getChannel()
|
||||
channelOptions.value = res || []
|
||||
}
|
||||
//客户下拉
|
||||
const getcustomer = async () => {
|
||||
const res = await commonService.getCustomerSelect()
|
||||
customerOptions.value = res || []
|
||||
}
|
||||
|
||||
//国家
|
||||
const getarea = async () => {
|
||||
const res = await CrmService.getCountry()
|
||||
countryOptions.value = res || []
|
||||
}
|
||||
//改装项
|
||||
const getmodification = async () => {
|
||||
const res = await commonService.getModificationSelect()
|
||||
modificationOptions.value = res || []
|
||||
}
|
||||
//颜色下拉列表
|
||||
const loadColorOptions = async () => {
|
||||
try {
|
||||
const res = await commonService.getColorSelect({ type: 1 })
|
||||
wcolorOptions.value = res
|
||||
const response = await commonService.getColorSelect({ type: 2 })
|
||||
ncolorOptions.value = response
|
||||
} catch (error) {
|
||||
console.error('获取颜色列表失败:', error)
|
||||
ElMessage.error('获取颜色列表失败')
|
||||
}
|
||||
}
|
||||
//账户
|
||||
const loadAccountOptions = async () => {
|
||||
try {
|
||||
const res = await commonService.getAccountSelect()
|
||||
accountOptions.value = res
|
||||
} catch (error) {
|
||||
console.error('获取账户列表失败:', error)
|
||||
ElMessage.error('获取账户列表失败')
|
||||
}
|
||||
}
|
||||
//币种
|
||||
const loadCurrencyOptions = async () => {
|
||||
try {
|
||||
const res = await commonService.getCurrencySelect()
|
||||
currencyOptions.value = res
|
||||
} catch (error) {
|
||||
console.error('获取币种列表失败:', error)
|
||||
ElMessage.error('获取币种列表失败')
|
||||
}
|
||||
}
|
||||
//港口
|
||||
const loadPortOptions = async () => {
|
||||
try {
|
||||
const res = await commonService.getPortSelect({ scene: 'domestic' })
|
||||
const resall = await commonService.getPortSelect({})
|
||||
portOptions.value = res
|
||||
portOptionsall.value = resall
|
||||
} catch (error) {
|
||||
console.error('获取港口列表失败:', error)
|
||||
ElMessage.error('获取港口列表失败')
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getcustomer()
|
||||
loadCurrencyOptions()
|
||||
getgetChannel()
|
||||
getarea()
|
||||
getmodification()
|
||||
loadColorOptions()
|
||||
loadAccountOptions()
|
||||
loadPortOptions()
|
||||
})
|
||||
const baseForm = reactive({
|
||||
pn_no: '',
|
||||
date: '',
|
||||
country: '',
|
||||
customer_source: '',
|
||||
customer_name: '',
|
||||
salesman: '王玉杰',
|
||||
total_cif: undefined as number | undefined,
|
||||
total_cif_currency: 'USD'
|
||||
})
|
||||
|
||||
|
||||
type ItemRow = {
|
||||
uid: string
|
||||
model: string
|
||||
color_out: string
|
||||
color_in: string
|
||||
modify: string
|
||||
modify_fee: number | undefined
|
||||
modify_fee_currency: string
|
||||
modify_type: string
|
||||
fob_fee: number | undefined
|
||||
fob_fee_currency: string
|
||||
helper_fee: number | undefined
|
||||
helper_fee_currency: string
|
||||
domestic_freight: number | undefined
|
||||
domestic_freight_currency: string
|
||||
port_fee: number | undefined
|
||||
port_fee_currency: string
|
||||
unit_price: number | undefined
|
||||
unit_price_currency: string
|
||||
total_price: number | undefined
|
||||
total_price_currency: string
|
||||
guide_price: number | undefined
|
||||
guide_price_currency: string
|
||||
discount: number | undefined
|
||||
discount_currency: string
|
||||
contract_rate: number | undefined
|
||||
profit_type: string
|
||||
vin: string
|
||||
}
|
||||
|
||||
const newItem = (): ItemRow => ({
|
||||
uid: Math.random().toString(36).slice(2),
|
||||
model: '',
|
||||
color_out: '',
|
||||
color_in: '',
|
||||
modify: '',
|
||||
modify_fee: undefined,
|
||||
modify_fee_currency: 'USD',
|
||||
modify_type: '',
|
||||
fob_fee: undefined,
|
||||
fob_fee_currency: 'USD',
|
||||
helper_fee: undefined,
|
||||
helper_fee_currency: 'USD',
|
||||
domestic_freight: undefined,
|
||||
domestic_freight_currency: 'USD',
|
||||
port_fee: undefined,
|
||||
port_fee_currency: 'USD',
|
||||
unit_price: undefined,
|
||||
unit_price_currency: 'USD',
|
||||
total_price: undefined,
|
||||
total_price_currency: 'USD',
|
||||
guide_price: undefined,
|
||||
guide_price_currency: 'USD',
|
||||
discount: undefined,
|
||||
discount_currency: 'USD',
|
||||
contract_rate: 7.16,
|
||||
profit_type: 'calc',
|
||||
vin: ''
|
||||
})
|
||||
|
||||
const items = ref<ItemRow[]>([newItem(), newItem()])
|
||||
|
||||
const footForm = reactive({
|
||||
contact: '',
|
||||
plan_ship_date: '',
|
||||
transport: '',
|
||||
domestic_receiver: '',
|
||||
trade_term: '',
|
||||
remitter: '',
|
||||
remit_date: '',
|
||||
currency: 'CNY',
|
||||
account: '',
|
||||
payer: '',
|
||||
amount: undefined as number | undefined
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
const payload = { baseForm, items: items.value, footForm }
|
||||
console.log('submit payload', payload)
|
||||
ElMessage.success('提交成功')
|
||||
}
|
||||
// 选择客户弹框逻辑
|
||||
const customerDialog = reactive({
|
||||
visible: false,
|
||||
search: { keyword: '' },
|
||||
loading: false,
|
||||
tableData: [] as any[],
|
||||
pagination: { currentPage: 1, pageSize: 10, total: 0 }
|
||||
})
|
||||
const openCustomerDialog = () => {
|
||||
customerDialog.visible = true
|
||||
customerDialog.pagination.currentPage = 1
|
||||
getCustomerList()
|
||||
}
|
||||
const getCustomerList = async () => {
|
||||
customerDialog.loading = true
|
||||
try {
|
||||
const { currentPage, pageSize } = customerDialog.pagination
|
||||
const params = { current: currentPage, size: pageSize, keyword: customerDialog.search.keyword }
|
||||
const { data, current, size, total } = await CrmService.getcustomerList(params as any)
|
||||
customerDialog.tableData = data || []
|
||||
Object.assign(customerDialog.pagination, { currentPage: current, pageSize: size, total })
|
||||
} catch (e) {
|
||||
} finally {
|
||||
customerDialog.loading = false
|
||||
}
|
||||
}
|
||||
const handleCustomerSizeChange = (size: number) => {
|
||||
customerDialog.pagination.pageSize = size
|
||||
getCustomerList()
|
||||
}
|
||||
const handleCustomerCurrentChange = (page: number) => {
|
||||
customerDialog.pagination.currentPage = page
|
||||
getCustomerList()
|
||||
}
|
||||
const chooseCustomer = (row: any) => {
|
||||
baseForm.customer_name = row.contacts || row.name || ''
|
||||
customerDialog.visible = false
|
||||
}
|
||||
|
||||
// 选择车型弹框逻辑
|
||||
const vehicleDialog = reactive({
|
||||
visible: false,
|
||||
targetIndex: -1,
|
||||
search: { keyword: '' },
|
||||
loading: false,
|
||||
tableData: [] as any[],
|
||||
pagination: { currentPage: 1, pageSize: 10, total: 0 }
|
||||
})
|
||||
|
||||
const openVehicleDialog = (index: number) => {
|
||||
vehicleDialog.targetIndex = index
|
||||
vehicleDialog.visible = true
|
||||
vehicleDialog.pagination.currentPage = 1
|
||||
getVehicleList()
|
||||
}
|
||||
|
||||
const getVehicleList = async () => {
|
||||
vehicleDialog.loading = true
|
||||
try {
|
||||
const { currentPage, pageSize } = vehicleDialog.pagination
|
||||
const params = { current: currentPage, size: pageSize, keyword: vehicleDialog.search.keyword }
|
||||
const { records, current, size, total } = await vehicleService.getVehicleList(params)
|
||||
vehicleDialog.tableData = records || []
|
||||
Object.assign(vehicleDialog.pagination, { currentPage: current, pageSize: size, total })
|
||||
} catch (e) {
|
||||
ElMessage.error('获取车辆列表失败')
|
||||
} finally {
|
||||
vehicleDialog.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleVehicleSizeChange = (size: number) => {
|
||||
vehicleDialog.pagination.pageSize = size
|
||||
getVehicleList()
|
||||
}
|
||||
const handleVehicleCurrentChange = (page: number) => {
|
||||
vehicleDialog.pagination.currentPage = page
|
||||
getVehicleList()
|
||||
}
|
||||
|
||||
const chooseVehicle = (row: any) => {
|
||||
const idx = vehicleDialog.targetIndex
|
||||
if (idx >= 0 && idx < items.value.length) {
|
||||
const target = items.value[idx]
|
||||
target.model = row.model_name || row.name || ''
|
||||
// 回显颜色与指导价
|
||||
target.color_out = row.color_exterior_text || ''
|
||||
target.color_in = row.color_interior_text || ''
|
||||
target.guide_price = row.msrp ?? target.guide_price
|
||||
if (row.currency) {
|
||||
target.guide_price_currency = row.currency
|
||||
}
|
||||
// 可按需带出更多字段回显
|
||||
}
|
||||
vehicleDialog.visible = false
|
||||
}
|
||||
</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: 12px;
|
||||
}
|
||||
.form-title {
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-title .title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.stocking-add-page {
|
||||
// background: var(--art-main-bg-color);
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.row-actions span {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.row-actions .primary {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.row-actions .danger {
|
||||
color: var(--el-color-danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 0 8px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 220px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.upload-box { width: 160px; }
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="stocking-page">
|
||||
<div class="stocking-toolbar boxshadow">
|
||||
<div class="toolbar-left">
|
||||
<ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
@keyup.enter="getList"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clickable" @click="getList"><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxshadow">
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="备货单编号" prop="stock_no" min-width="140" />
|
||||
<ElTableColumn label="阿里订单号/PN号" prop="order_no" min-width="160" />
|
||||
<ElTableColumn label="客户名称" prop="customer_name" min-width="120" />
|
||||
<ElTableColumn label="客户来源" prop="customer_source" min-width="120" />
|
||||
<ElTableColumn label="业务员" prop="salesman" min-width="100" />
|
||||
<ElTableColumn label="日期" prop="date" min-width="120" />
|
||||
<ElTableColumn label="补充" prop="remark" min-width="160" />
|
||||
<ElTableColumn label="状态" prop="status" width="120">
|
||||
<template #default="scope">
|
||||
<ElTag type="success">备货完成</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="操作" fixed="right" min-width="220" align="center">
|
||||
<template #default="scope">
|
||||
<ElRow :gutter="10" justify="center">
|
||||
<el-button link type="primary" @click="handleView(scope.row)">查看备货单</el-button>
|
||||
<el-button link type="primary" @click="handleCreateRepair(scope.row)"
|
||||
>创建终版备货单</el-button
|
||||
>
|
||||
<el-button link type="primary" @click="handleView1(scope.row)"
|
||||
>查看终版备货单</el-button
|
||||
>
|
||||
</ElRow>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { router } from '@/router'
|
||||
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const tableRef = ref()
|
||||
const tableData = ref<any[]>([])
|
||||
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
watch([keyword], () => {
|
||||
pagination.currentPage = 1
|
||||
// 不自动请求，保持与截图行为一致，点击搜索或回车触发
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
|
||||
const mock = Array.from({ length: 8 }).map((_, i) => ({
|
||||
id: i + 1,
|
||||
stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
|
||||
order_no: 'VCS28762JN2',
|
||||
customer_name: 'Alicia',
|
||||
customer_source: '广交会',
|
||||
salesman: '王玉凯',
|
||||
date: '2025-08-27',
|
||||
remark: 'XXXXXXXXXXXX',
|
||||
status: 1,
|
||||
}))
|
||||
tableData.value = mock
|
||||
pagination.total = 24
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
getList()
|
||||
}
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.currentPage = page
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
// TODO: 跳转到创建备货单页面
|
||||
router.push('/crmpc/stocking_list/Add')
|
||||
}
|
||||
const handleView = (row: any) => {
|
||||
router.push('/crmpc/stocking_list/show')
|
||||
// TODO: 跳转或弹窗查看备货单
|
||||
}
|
||||
const handleView1 = (row: any) => {
|
||||
router.push('/crmpc/stocking_list/final_show')
|
||||
// TODO: 跳转或弹窗查看备货单
|
||||
}
|
||||
const handleCreateRepair = (row: any) => {
|
||||
router.push('/crmpc/stocking_list/final')
|
||||
// TODO: 跳转创建维修保单
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stocking-page {
|
||||
background: var(--art-main-bg-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.stocking-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background: var(--art-main-bg-color);
|
||||
}
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.clickable { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,535 @@
|
||||
<template>
|
||||
<div class="stocking-final-show-page">
|
||||
<div class="header boxshadow">
|
||||
<div class="header-left">
|
||||
<div class="title">合塑实业·汽车事业部-备货单(客户下定)</div>
|
||||
<div class="sub">备货单编号：{{ header.order_no }} 业务员：{{ header.salesman }}</div>
|
||||
</div>
|
||||
<ElButton type="primary" plain @click="handlePrint">打印整单</ElButton>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">基础信息</span></div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="5"><ElFormItem label="阿里订单号/PN号"><ElInput v-model="base.pn_no" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="日期"><ElInput v-model="base.date" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="关闭日期"><ElInput v-model="base.close_date" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="3"><ElFormItem label="客户来源"><ElInput v-model="base.channel" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="客户名称"><ElInput v-model="base.customer_name" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="客户所在国"><ElInput v-model="base.client_country" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<!-- 订单详情 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">订单详情</span></div>
|
||||
<div class="items-wrap">
|
||||
<div class="item-row" v-for="(item, idx) in items" :key="idx">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="8"><ElFormItem label="车型" label-width="64px"><ElInput v-model="item.model" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="颜色/外" label-width="72px"><ElInput v-model="item.color_out" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="内饰" label-width="52px"><ElInput v-model="item.color_in" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="8"><ElFormItem label="改装" label-width="52px"><ElInput v-model="item.modify" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4"><ElFormItem label="改装费" label-width="60px"><ElInput v-model="item.modify_fee" disabled><template #append>{{ item.modify_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="FOB段运费" label-width="84px"><ElInput v-model="item.fob_fee" disabled><template #append>{{ item.fob_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="单价" label-width="52px"><ElInput v-model="item.unit_price" disabled><template #append>{{ item.unit_price_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="总价" label-width="52px"><ElInput v-model="item.total_price" disabled><template #append>{{ item.total_price_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="官方指导价" label-width="85px"><ElInput v-model="item.guide_price" disabled><template #append>{{ item.guide_price_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="优惠" label-width="52px"><ElInput v-model="item.discount" disabled><template #append>{{ item.discount_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4"><ElFormItem label="手续费" label-width="60px"><ElInput v-model="item.helper_fee" disabled><template #append>{{ item.helper_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="国内运费" label-width="72px"><ElInput v-model="item.domestic_freight" disabled><template #append>{{ item.domestic_freight_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="港杂费" label-width="60px"><ElInput v-model="item.port_fee" disabled><template #append>{{ item.port_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="利润" label-width="52px"><ElInput v-model="item.profit" disabled><template #append>{{ item.profit_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="车架号" label-width="60px"><ElInput v-model="item.vin" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="5"><ElFormItem label="合计到岸价" label-width="85px"><ElInput v-model="base.total_cif" disabled><template #append>{{ base.total_cif_currency }}</template></ElInput></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="合同汇率" label-width="70px"><ElInput v-model="base.contract_rate" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运输详情 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">运输详情</span></div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4"><ElFormItem label="清关人"><ElInput v-model="ship.customs" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="预计发送日"><ElInput v-model="ship.plan" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="运输方式"><ElInput v-model="ship.method" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="国内收货港"><ElInput v-model="ship.domestic_port" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="8"><ElFormItem label="贸易条款/清关目的港"><ElInput v-model="ship.terms" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="6"><ElFormItem label="最迟到港时间"><ElInput v-model="ship.latest_arrival" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<!-- 计划收款信息 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">计划收款信息</span></div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4"><ElFormItem label="汇款国"><ElInput v-model="pay.remit_country" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="日期"><ElInput v-model="pay.date" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="币种"><ElInput v-model="pay.currency" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="账户"><ElInput v-model="pay.account" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="汇款人"><ElInput v-model="pay.payer" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="金额"><ElInput v-model="pay.amount" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<!-- 上传合同 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">上传合同</span></div>
|
||||
<div class="upload-box">
|
||||
<img class="preview" src="@/assets/img/common/logo.webp" alt="file" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const header = reactive({ order_no: 'HSAT-JN00010', salesman: '王玉杰' })
|
||||
|
||||
// 打印功能
|
||||
const handlePrint = () => {
|
||||
// 创建一个新的窗口用于打印
|
||||
const printWindow = window.open('', '_blank')
|
||||
if (!printWindow) return
|
||||
|
||||
// 构建表格行数据
|
||||
const tableRows = items.value.map((item, index) => {
|
||||
return `
|
||||
<tr>
|
||||
<td>${index + 1}</td>
|
||||
<td class="text-left">${item.model}</td>
|
||||
<td>1</td>
|
||||
<td>${item.color_out}</td>
|
||||
<td>${item.color_in}</td>
|
||||
<td class="text-left">${item.modify}</td>
|
||||
<td>$${item.unit_price}</td>
|
||||
<td>$${item.total_price}</td>
|
||||
<td>${item.guide_price}</td>
|
||||
<td>${item.discount}</td>
|
||||
</tr>
|
||||
`
|
||||
}).join('')
|
||||
|
||||
// 构建打印页面的HTML
|
||||
const printHTML = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>备货单打印</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
}
|
||||
.print-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #333;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.main-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.order-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.order-info-left, .order-info-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.info-label {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
min-width: 60px;
|
||||
}
|
||||
.info-value {
|
||||
flex: 1;
|
||||
}
|
||||
.order-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.order-table th,
|
||||
.order-table td {
|
||||
border: 1px solid #333;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.order-table th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.order-table .text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.summary-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.summary-label {
|
||||
font-weight: bold;
|
||||
min-width: 100px;
|
||||
}
|
||||
.shipping-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.shipping-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.shipping-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.shipping-label {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
min-width: 80px;
|
||||
}
|
||||
.payment-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 11px;
|
||||
}
|
||||
.payment-table th,
|
||||
.payment-table td {
|
||||
border: 1px solid #333;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
.payment-table th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media print {
|
||||
body { -webkit-print-color-adjust: exact; }
|
||||
.print-container { padding: 10px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="print-container">
|
||||
<!-- 标题 -->
|
||||
<div class="header">
|
||||
<div class="main-title">合塑实业-汽车事业部-备货单(客户下定)</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单基本信息 -->
|
||||
<div class="order-info">
|
||||
<div class="order-info-left">
|
||||
<div class="info-item">
|
||||
<span class="info-label">备货单编号:</span>
|
||||
<span class="info-value">${header.order_no}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">阿里订单号/PI号:</span>
|
||||
<span class="info-value">${base.pn_no}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">日期:</span>
|
||||
<span class="info-value">${base.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-info-right">
|
||||
<div class="info-item">
|
||||
<span class="info-label">业务员:</span>
|
||||
<span class="info-value">${header.salesman}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">客户名称:</span>
|
||||
<span class="info-value">${base.customer_name}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">客户来源:</span>
|
||||
<span class="info-value">${base.channel}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">关目的国:</span>
|
||||
<span class="info-value">${base.client_country}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">客户所在国:</span>
|
||||
<span class="info-value">${base.client_country}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单详情表格 -->
|
||||
<table class="order-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编号</th>
|
||||
<th>车型</th>
|
||||
<th>数量/台</th>
|
||||
<th>颜色/外</th>
|
||||
<th>内饰</th>
|
||||
<th>改装</th>
|
||||
<th>单价(美金)</th>
|
||||
<th>总价(美金)</th>
|
||||
<th>官方指导价</th>
|
||||
<th>优惠</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${tableRows}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 汇总信息 -->
|
||||
<div class="summary-section">
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">合同汇率:</span>
|
||||
<span>${base.contract_rate}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">合计到岸价:</span>
|
||||
<span>$${base.total_cif}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运输信息 -->
|
||||
<div class="shipping-info">
|
||||
<div class="shipping-grid">
|
||||
<div class="shipping-item">
|
||||
<span class="shipping-label">清关人:</span>
|
||||
<span>${ship.customs}</span>
|
||||
</div>
|
||||
<div class="shipping-item">
|
||||
<span class="shipping-label">预计发运日期:</span>
|
||||
<span>${ship.plan}</span>
|
||||
</div>
|
||||
<div class="shipping-item">
|
||||
<span class="shipping-label">出运方式:</span>
|
||||
<span>${ship.method}</span>
|
||||
</div>
|
||||
<div class="shipping-item">
|
||||
<span class="shipping-label">国内收货港:</span>
|
||||
<span>${ship.domestic_port}</span>
|
||||
</div>
|
||||
<div class="shipping-item">
|
||||
<span class="shipping-label">贸易条款/清关目的港:</span>
|
||||
<span>${ship.terms}</span>
|
||||
</div>
|
||||
<div class="shipping-item">
|
||||
<span class="shipping-label">最迟到港时间:</span>
|
||||
<span>${ship.latest_arrival}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 计划收款信息 -->
|
||||
<div style="margin-top: 20px;">
|
||||
<h4 style="margin-bottom: 10px; font-size: 13px;">计划收款信息</h4>
|
||||
<table class="payment-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>汇款国</th>
|
||||
<th>日期</th>
|
||||
<th>币种</th>
|
||||
<th>账户</th>
|
||||
<th>汇款人</th>
|
||||
<th>金额</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>收款1</td>
|
||||
<td>${pay.remit_country}</td>
|
||||
<td>${pay.date}</td>
|
||||
<td>${pay.currency}</td>
|
||||
<td>${pay.account}</td>
|
||||
<td class="text-left">${pay.payer}</td>
|
||||
<td>$${pay.amount}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
// 写入HTML内容
|
||||
printWindow.document.write(printHTML)
|
||||
printWindow.document.close()
|
||||
|
||||
// 等待内容加载完成后打印
|
||||
setTimeout(() => {
|
||||
printWindow.print()
|
||||
printWindow.close()
|
||||
}, 500)
|
||||
}
|
||||
const base = reactive({
|
||||
pn_no: 'VCSC250827JN1',
|
||||
date: '2025-08-28',
|
||||
close_date: '',
|
||||
channel: '广交会',
|
||||
customer_name: 'Ailcia',
|
||||
client_country: '密鲁',
|
||||
total_cif: '60,652.00',
|
||||
total_cif_currency: '美元',
|
||||
contract_rate: '7.16'
|
||||
})
|
||||
const items = ref([
|
||||
{
|
||||
model: '丰田卡罗拉锐放汽油 2024款 2.0L CVT 精英版',
|
||||
color_out: '银',
|
||||
color_in: '黑',
|
||||
modify: '改装仿皮座椅',
|
||||
modify_fee: '1000',
|
||||
modify_fee_currency: '美元',
|
||||
fob_fee: '500',
|
||||
fob_fee_currency: '美元',
|
||||
unit_price: '14,545.00',
|
||||
unit_price_currency: '美元',
|
||||
total_price: '14,545.00',
|
||||
total_price_currency: '美元',
|
||||
guide_price: '139800',
|
||||
guide_price_currency: '人民币',
|
||||
discount: '42000郑州',
|
||||
discount_currency: '人民币',
|
||||
helper_fee: '1500',
|
||||
helper_fee_currency: '美元',
|
||||
domestic_freight: '1500',
|
||||
domestic_freight_currency: '美元',
|
||||
port_fee: '600',
|
||||
port_fee_currency: '美元',
|
||||
profit: '1000',
|
||||
profit_currency: '美元',
|
||||
vin: 'S4412454142142141'
|
||||
},
|
||||
{
|
||||
model: '丰田卡罗拉锐放汽油 2024款 2.0L CVT 精英版',
|
||||
color_out: '银',
|
||||
color_in: '黑',
|
||||
modify: '改装仿皮座椅',
|
||||
modify_fee: '1000',
|
||||
modify_fee_currency: '美元',
|
||||
fob_fee: '500',
|
||||
fob_fee_currency: '美元',
|
||||
unit_price: '14,545.00',
|
||||
unit_price_currency: '美元',
|
||||
total_price: '14,545.00',
|
||||
total_price_currency: '美元',
|
||||
guide_price: '139800',
|
||||
guide_price_currency: '人民币',
|
||||
discount: '42000郑州',
|
||||
discount_currency: '人民币',
|
||||
helper_fee: '1500',
|
||||
helper_fee_currency: '美元',
|
||||
domestic_freight: '1500',
|
||||
domestic_freight_currency: '美元',
|
||||
port_fee: '600',
|
||||
port_fee_currency: '美元',
|
||||
profit: '1000',
|
||||
profit_currency: '美元',
|
||||
vin: 'S4412454142142141'
|
||||
},
|
||||
{
|
||||
model: '丰田卡罗拉锐放汽油 2024款 2.0L CVT 精英版',
|
||||
color_out: '银',
|
||||
color_in: '黑',
|
||||
modify: '改装仿皮座椅',
|
||||
modify_fee: '1000',
|
||||
modify_fee_currency: '美元',
|
||||
fob_fee: '500',
|
||||
fob_fee_currency: '美元',
|
||||
unit_price: '14,545.00',
|
||||
unit_price_currency: '美元',
|
||||
total_price: '14,545.00',
|
||||
total_price_currency: '美元',
|
||||
guide_price: '139800',
|
||||
guide_price_currency: '人民币',
|
||||
discount: '42000郑州',
|
||||
discount_currency: '人民币',
|
||||
helper_fee: '1500',
|
||||
helper_fee_currency: '美元',
|
||||
domestic_freight: '1500',
|
||||
domestic_freight_currency: '美元',
|
||||
port_fee: '600',
|
||||
port_fee_currency: '美元',
|
||||
profit: '1000',
|
||||
profit_currency: '美元',
|
||||
vin: 'S4412454142142141'
|
||||
}
|
||||
])
|
||||
const ship = reactive({ customs: '陆云鹤', plan: '2025-08-28', method: '海运', domestic_port: 'shanghai', terms: 'FOB shanghai', latest_arrival: '2025-9-03' })
|
||||
const pay = reactive({ remit_country: '香港', date: '2028-9-01', currency: '美元', account: '中行1451', payer: 'AMOTOR TECHNOLOGY CO. LIMITED/XTRANSFER LIMITED', amount: '15,000.00' })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stocking-final-show-page { min-height: 100vh; }
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
.form-title { font-weight: bold; color: #222; margin-bottom: 15px; }
|
||||
.form-title .title { margin-left: 6px; }
|
||||
.items-wrap { margin-top: 6px; }
|
||||
.item-row { padding: 8px 0; }
|
||||
.upload-box { padding: 12px; }
|
||||
.upload-box .preview { width: 120px; height: 120px; object-fit: cover; border: 1px dashed var(--el-border-color); border-radius: 6px; }
|
||||
:deep(.el-input.is-disabled .el-input__inner) { color: var(--el-text-color-regular); }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="stocking-show-page">
|
||||
<div class="header boxshadow">
|
||||
<div class="header-left">
|
||||
<div class="title">合塑实业·汽车事业部-备货单(客户下定)</div>
|
||||
<div class="sub">
|
||||
<span class="mr40">备货单编号：{{ header.order_no }}</span>
|
||||
<span>业务员：{{ header.salesman }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ElButton type="primary" plain>打印整单</ElButton>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">基础信息</span></div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="5">
|
||||
<ElFormItem label="阿里订单号/PN号">
|
||||
<ElInput v-model="base.pn_no" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="日期">
|
||||
<ElInput v-model="base.date" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="关闭日期">
|
||||
<ElInput v-model="base.close_date" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="3">
|
||||
<ElFormItem label="客户来源">
|
||||
<ElInput v-model="base.channel" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="客户名称">
|
||||
<ElInput v-model="base.customer_name" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="客户所在国">
|
||||
<ElInput v-model="base.client_country" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<!-- 订单详情 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">订单详情</span></div>
|
||||
<div class="items-wrap">
|
||||
<div class="item-row" v-for="(item, idx) in items" :key="idx">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="8">
|
||||
<ElFormItem label="车型" label-width="64px">
|
||||
<ElInput v-model="item.model" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="颜色/外" label-width="72px">
|
||||
<ElInput v-model="item.color_out" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="内饰" label-width="52px">
|
||||
<ElInput v-model="item.color_in" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="8">
|
||||
<ElFormItem label="改装" label-width="52px">
|
||||
<ElInput v-model="item.modify" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="改装费" label-width="60px">
|
||||
<ElInput v-model="item.modify_fee" disabled>
|
||||
<template #append>{{ item.modify_fee_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="FOB段运费" label-width="84px">
|
||||
<ElInput v-model="item.fob_fee" disabled>
|
||||
<template #append>{{ item.fob_fee_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="单价" label-width="52px">
|
||||
<ElInput v-model="item.unit_price" disabled>
|
||||
<template #append>{{ item.unit_price_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="总价" label-width="52px">
|
||||
<ElInput v-model="item.total_price" disabled>
|
||||
<template #append>{{ item.total_price_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="官方指导价" label-width="85px">
|
||||
<ElInput v-model="item.guide_price" disabled>
|
||||
<template #append>{{ item.guide_price_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="优惠" label-width="52px">
|
||||
<ElInput v-model="item.discount" disabled>
|
||||
<template #append>{{ item.discount_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="手续费" label-width="60px">
|
||||
<ElInput v-model="item.helper_fee" disabled>
|
||||
<template #append>{{ item.helper_fee_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="国内运费" label-width="72px">
|
||||
<ElInput v-model="item.domestic_freight" disabled>
|
||||
<template #append>{{ item.domestic_freight_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="港杂费" label-width="60px">
|
||||
<ElInput v-model="item.port_fee" disabled>
|
||||
<template #append>{{ item.port_fee_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="利润" label-width="52px">
|
||||
<ElInput v-model="item.profit" disabled>
|
||||
<template #append>{{ item.profit_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="5">
|
||||
<ElFormItem label="合计到岸价" label-width="85px">
|
||||
<ElInput v-model="base.total_cif" disabled>
|
||||
<template #append>{{ base.total_cif_currency }}</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElFormItem label="合同汇率" label-width="70px">
|
||||
<ElInput v-model="base.contract_rate" disabled />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运输详情 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">运输详情</span></div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4"><ElFormItem label="清关人"><ElInput v-model="ship.customs" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="预计发送日"><ElInput v-model="ship.plan" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="运输方式"><ElInput v-model="ship.method" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="国内收货港"><ElInput v-model="ship.domestic_port" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="8"><ElFormItem label="贸易条款/清关目的港"><ElInput v-model="ship.terms" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="6"><ElFormItem label="最迟到港时间"><ElInput v-model="ship.latest_arrival" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
|
||||
<!-- 计划收款信息 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title"><span class="border"></span><span class="title">计划收款信息</span></div>
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="4"><ElFormItem label="汇款国"><ElInput v-model="pay.remit_country" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="日期"><ElInput v-model="pay.date" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="币种"><ElInput v-model="pay.currency" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="账户"><ElInput v-model="pay.account" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="汇款人"><ElInput v-model="pay.payer" disabled /></ElFormItem></ElCol>
|
||||
<ElCol :span="4"><ElFormItem label="金额"><ElInput v-model="pay.amount" disabled /></ElFormItem></ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const header = reactive({ order_no: 'HSAT-JN00010', salesman: '王玉杰' })
|
||||
const base = reactive({
|
||||
pn_no: 'VCSC250827-JN1',
|
||||
date: '2025-08-31',
|
||||
close_date: '',
|
||||
channel: '广交会',
|
||||
customer_name: 'Alicia',
|
||||
client_country: '埃赫',
|
||||
total_cif: '60,652.00',
|
||||
total_cif_currency: '美元',
|
||||
contract_rate: '7.16'
|
||||
})
|
||||
const items = ref([
|
||||
{
|
||||
model: '丰田卡罗拉 2024款 2.0L CVT 精英版',
|
||||
color_out: '银色',
|
||||
color_in: '黑',
|
||||
modify: '改装仿皮座椅',
|
||||
modify_fee: '1000',
|
||||
modify_fee_currency: '美元',
|
||||
fob_fee: '500',
|
||||
fob_fee_currency: '美元',
|
||||
unit_price: '14,545.00',
|
||||
unit_price_currency: '美元',
|
||||
total_price: '14,545.00',
|
||||
total_price_currency: '美元',
|
||||
guide_price: '139800',
|
||||
guide_price_currency: '人民币',
|
||||
discount: '42000',
|
||||
discount_currency: '人民币',
|
||||
helper_fee: '1500',
|
||||
helper_fee_currency: '美元',
|
||||
domestic_freight: '1500',
|
||||
domestic_freight_currency: '美元',
|
||||
port_fee: '600',
|
||||
port_fee_currency: '美元',
|
||||
profit: '1000',
|
||||
profit_currency: '美元'
|
||||
},
|
||||
{
|
||||
model: '丰田卡罗拉 2024款 2.0L CVT 精英版',
|
||||
color_out: '黑色',
|
||||
color_in: '黑',
|
||||
modify: '改装仿皮座椅',
|
||||
modify_fee: '1000',
|
||||
modify_fee_currency: '美元',
|
||||
fob_fee: '500',
|
||||
fob_fee_currency: '美元',
|
||||
unit_price: '14,545.00',
|
||||
unit_price_currency: '美元',
|
||||
total_price: '14,545.00',
|
||||
total_price_currency: '美元',
|
||||
guide_price: '139800',
|
||||
guide_price_currency: '人民币',
|
||||
discount: '42000',
|
||||
discount_currency: '人民币',
|
||||
helper_fee: '1500',
|
||||
helper_fee_currency: '美元',
|
||||
domestic_freight: '1500',
|
||||
domestic_freight_currency: '美元',
|
||||
port_fee: '600',
|
||||
port_fee_currency: '美元',
|
||||
profit: '1000',
|
||||
profit_currency: '美元'
|
||||
}
|
||||
])
|
||||
const ship = reactive({
|
||||
customs: '陌生人',
|
||||
plan: '2025-08-28',
|
||||
method: '滚装',
|
||||
domestic_port: '上海',
|
||||
terms: '贸易条款展示字段',
|
||||
latest_arrival: '2025-09-03'
|
||||
})
|
||||
const pay = reactive({
|
||||
remit_country: '汇款国',
|
||||
date: '2025-08-28',
|
||||
currency: '美元',
|
||||
account: '中行1451',
|
||||
payer: 'AMOTOR TECHNOLOGY CO., LIMITED/XTRANSFER LIMITED',
|
||||
amount: '15,000.00'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stocking-show-page { min-height: 100vh; }
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 12px;
|
||||
color: #333333;
|
||||
.header-left {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.sub {
|
||||
color: #333333;
|
||||
}
|
||||
.mr40 { margin-right: 40px; }
|
||||
}
|
||||
.form-title { font-weight: bold; color: #222; margin-bottom: 15px; }
|
||||
.form-title .title { margin-left: 6px; }
|
||||
.items-wrap { margin-top: 6px; }
|
||||
.item-row { padding: 8px 0; }
|
||||
:deep(.el-input.is-disabled .el-input__inner) { color: var(--el-text-color-regular); }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="stocking-page">
|
||||
<div class="stocking-toolbar boxshadow">
|
||||
<div class="toolbar-left">
|
||||
<ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
@keyup.enter="getList"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clickable" @click="getList"><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxshadow">
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="备货单编号" prop="stock_no" min-width="140" />
|
||||
<ElTableColumn label="阿里订单号/PN号" prop="order_no" min-width="160" />
|
||||
<ElTableColumn label="客户名称" prop="customer_name" min-width="120" />
|
||||
<ElTableColumn label="客户来源" prop="customer_source" min-width="120" />
|
||||
<ElTableColumn label="业务员" prop="salesman" min-width="100" />
|
||||
<ElTableColumn label="日期" prop="date" min-width="120" />
|
||||
<ElTableColumn label="补充" prop="remark" min-width="160" />
|
||||
<ElTableColumn label="状态" prop="status" width="120">
|
||||
<template #default="scope">
|
||||
<ElTag type="success">备货完成</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="操作" fixed="right" min-width="220" align="center">
|
||||
<template #default="scope">
|
||||
<ElRow :gutter="10" justify="center">
|
||||
<el-button link type="primary" @click="handleView(scope.row)">查看备货单</el-button>
|
||||
<el-button link type="primary" @click="handleCreateRepair(scope.row)"
|
||||
>创建终版备货单</el-button
|
||||
>
|
||||
<el-button link type="primary" @click="handleView1(scope.row)"
|
||||
>查看终版备货单</el-button
|
||||
>
|
||||
</ElRow>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { router } from '@/router'
|
||||
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const tableRef = ref()
|
||||
const tableData = ref<any[]>([])
|
||||
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
watch([keyword], () => {
|
||||
pagination.currentPage = 1
|
||||
// 不自动请求，保持与截图行为一致，点击搜索或回车触发
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
|
||||
const mock = Array.from({ length: 8 }).map((_, i) => ({
|
||||
id: i + 1,
|
||||
stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
|
||||
order_no: 'VCS28762JN2',
|
||||
customer_name: 'Alicia',
|
||||
customer_source: '广交会',
|
||||
salesman: '王玉凯',
|
||||
date: '2025-08-27',
|
||||
remark: 'XXXXXXXXXXXX',
|
||||
status: 1,
|
||||
}))
|
||||
tableData.value = mock
|
||||
pagination.total = 24
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
getList()
|
||||
}
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.currentPage = page
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
// TODO: 跳转到创建备货单页面
|
||||
router.push('/crmpc/stocking_list/Add')
|
||||
}
|
||||
const handleView = (row: any) => {
|
||||
router.push('/crmpc/stocking_list/show')
|
||||
// TODO: 跳转或弹窗查看备货单
|
||||
}
|
||||
const handleView1 = (row: any) => {
|
||||
router.push('/crmpc/stocking_list/final_show')
|
||||
// TODO: 跳转或弹窗查看备货单
|
||||
}
|
||||
const handleCreateRepair = (row: any) => {
|
||||
router.push('/crmpc/stocking_list/final')
|
||||
// TODO: 跳转创建维修保单
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stocking-page {
|
||||
background: var(--art-main-bg-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.stocking-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background: var(--art-main-bg-color);
|
||||
}
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.clickable { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="stocking-page">
|
||||
<div class="stocking-toolbar boxshadow">
|
||||
<div class="toolbar-left">
|
||||
<ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
@keyup.enter="getList"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clickable" @click="getList"><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxshadow">
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="备货单编号" prop="stock_no" min-width="140" />
|
||||
<ElTableColumn label="阿里订单号/PN号" prop="order_no" min-width="160" />
|
||||
<ElTableColumn label="客户名称" prop="customer_name" min-width="120" />
|
||||
<ElTableColumn label="客户来源" prop="customer_source" min-width="120" />
|
||||
<ElTableColumn label="业务员" prop="salesman" min-width="100" />
|
||||
<ElTableColumn label="日期" prop="date" min-width="120" />
|
||||
<ElTableColumn label="补充" prop="remark" min-width="160" />
|
||||
<ElTableColumn label="状态" prop="status" width="120">
|
||||
<template #default="scope">
|
||||
<ElTag type="success">备货完成</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="操作" fixed="right" min-width="220" align="center">
|
||||
<template #default="scope">
|
||||
<ElRow :gutter="10" justify="center">
|
||||
<el-button link type="primary" @click="handleView(scope.row)">查看备货单</el-button>
|
||||
<el-button link type="primary" @click="handleCreateRepair(scope.row)"
|
||||
>创建终版备货单</el-button
|
||||
>
|
||||
<el-button link type="primary" @click="handleView1(scope.row)"
|
||||
>查看终版备货单</el-button
|
||||
>
|
||||
</ElRow>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { router } from '@/router'
|
||||
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const tableRef = ref()
|
||||
const tableData = ref<any[]>([])
|
||||
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
watch([keyword], () => {
|
||||
pagination.currentPage = 1
|
||||
// 不自动请求，保持与截图行为一致，点击搜索或回车触发
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
|
||||
const mock = Array.from({ length: 8 }).map((_, i) => ({
|
||||
id: i + 1,
|
||||
stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
|
||||
order_no: 'VCS28762JN2',
|
||||
customer_name: 'Alicia',
|
||||
customer_source: '广交会',
|
||||
salesman: '王玉凯',
|
||||
date: '2025-08-27',
|
||||
remark: 'XXXXXXXXXXXX',
|
||||
status: 1,
|
||||
}))
|
||||
tableData.value = mock
|
||||
pagination.total = 24
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
getList()
|
||||
}
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.currentPage = page
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
// TODO: 跳转到创建备货单页面
|
||||
router.push('/crmpc/stocking/Add')
|
||||
}
|
||||
const handleView = (row: any) => {
|
||||
router.push('/crmpc/stocking/show')
|
||||
// TODO: 跳转或弹窗查看备货单
|
||||
}
|
||||
const handleView1 = (row: any) => {
|
||||
router.push('/crmpc/stocking/final_show')
|
||||
// TODO: 跳转或弹窗查看备货单
|
||||
}
|
||||
const handleCreateRepair = (row: any) => {
|
||||
router.push('/crmpc/stocking/final_add')
|
||||
// TODO: 跳转创建维修保单
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stocking-page {
|
||||
background: var(--art-main-bg-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.stocking-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background: var(--art-main-bg-color);
|
||||
}
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.clickable { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user