备货单 加 审批流程
This commit is contained in:
浅念
@@ -205,4 +205,41 @@ export class manageService {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//备货单审核列表
|
||||||
|
static getstocklist(params: Api.Common.PaginatingParams) {
|
||||||
|
return request.get<Api.Common.CommonListData>({
|
||||||
|
url: '/admin/approval/list',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//备货单审核
|
||||||
|
static stockapproval(params: any) {
|
||||||
|
return request.post<Api.Common.AddResponse>({
|
||||||
|
url: '/admin/approval/store',
|
||||||
|
params
|
||||||
|
// showErrorMessage: false // 不显示错误消息
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 审核更新
|
||||||
|
static stockapprovalupdate(params: any) {
|
||||||
|
return request.post<Api.Common.AddResponse>({
|
||||||
|
url: '/admin/approval/update',
|
||||||
|
params
|
||||||
|
// showErrorMessage: false // 不显示错误消息
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//审核详情
|
||||||
|
static stockapprovaldetail(params: any) {
|
||||||
|
return request.get<any>({
|
||||||
|
url: '/admin/approval/show',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//审核删除
|
||||||
|
static stockapprovaldelete(params: any) {
|
||||||
|
return request.get<Api.Common.AddResponse>({
|
||||||
|
url: '/admin/approval/destroy',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -106,4 +106,16 @@ export class commonService {
|
|||||||
url: '/crm/customer/preset'
|
url: '/crm/customer/preset'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//角色下拉框
|
||||||
|
static getRoleSelect() {
|
||||||
|
return request.get<any>({
|
||||||
|
url: '/common/preset/roles'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//用户下拉框
|
||||||
|
static getUserSelect() {
|
||||||
|
return request.get<any>({
|
||||||
|
url: '/common/preset/users'
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+15
-1
@@ -210,7 +210,7 @@ export class CrmService {
|
|||||||
//备货单
|
//备货单
|
||||||
static getStockList(params: Api.Common.PaginatingParams) {
|
static getStockList(params: Api.Common.PaginatingParams) {
|
||||||
return request.get<Api.Common.CommonListData>({
|
return request.get<Api.Common.CommonListData>({
|
||||||
url: '/crm/stock/list',
|
url: '/crm/stock/order/list',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -222,4 +222,18 @@ export class CrmService {
|
|||||||
// showErrorMessage: false // 不显示错误消息
|
// showErrorMessage: false // 不显示错误消息
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//详情备货单
|
||||||
|
static getStockDetail(params: any) {
|
||||||
|
return request.get<any>({
|
||||||
|
url: '/crm/stock/order/show',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//打印
|
||||||
|
static printStock(params: any) {
|
||||||
|
return request.get<any>({
|
||||||
|
url: '/crm/stock/order/print',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,198 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
title="选择客户"
|
|
||||||
width="800px"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<div class="customer-selector">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div class="search-bar">
|
|
||||||
<el-input
|
|
||||||
v-model="searchKeyword"
|
|
||||||
placeholder="请输入客户名称搜索"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleSearch"
|
|
||||||
style="width: 300px"
|
|
||||||
>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="handleSearch">
|
|
||||||
<el-icon><Search /></el-icon>
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 客户列表 -->
|
|
||||||
<el-table
|
|
||||||
:data="customerList"
|
|
||||||
v-loading="loading"
|
|
||||||
height="400"
|
|
||||||
@row-click="handleRowClick"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-table-column prop="contacts" label="客户名称" min-width="200" />
|
|
||||||
<el-table-column prop="phone" label="联系电话" width="150" />
|
|
||||||
<el-table-column prop="email" label="邮箱" width="200" />
|
|
||||||
<el-table-column prop="country_name" label="国家" width="100" />
|
|
||||||
<el-table-column prop="channel_name" label="客户来源" width="120" />
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="pagination-wrapper">
|
|
||||||
<el-pagination
|
|
||||||
:current-page="currentPage"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:page-sizes="[10, 20, 50]"
|
|
||||||
:total="total"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="handleClose">取消</el-button>
|
|
||||||
<el-button type="primary" @click="handleConfirm" :disabled="!selectedCustomer">
|
|
||||||
确定
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, watch } from 'vue'
|
|
||||||
import { Search } from '@element-plus/icons-vue'
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
interface Customer {
|
|
||||||
id: number | string
|
|
||||||
contacts: string
|
|
||||||
phone?: string
|
|
||||||
email?: string
|
|
||||||
country_name?: string
|
|
||||||
channel_name?: string
|
|
||||||
[key: string]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
visible: boolean
|
|
||||||
keyword?: string
|
|
||||||
page?: number
|
|
||||||
pageSize?: number
|
|
||||||
loading?: boolean
|
|
||||||
data?: Customer[]
|
|
||||||
total?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'update:visible', value: boolean): void
|
|
||||||
(e: 'search', keyword: string): void
|
|
||||||
(e: 'page-change', page: number): void
|
|
||||||
(e: 'size-change', size: number): void
|
|
||||||
(e: 'select', customer: Customer): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
keyword: '',
|
|
||||||
page: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
loading: false,
|
|
||||||
data: () => [],
|
|
||||||
total: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const searchKeyword = ref(props.keyword)
|
|
||||||
const currentPage = ref(props.page)
|
|
||||||
const selectedCustomer = ref<Customer | null>(null)
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const dialogVisible = computed({
|
|
||||||
get: () => props.visible,
|
|
||||||
set: (value) => emit('update:visible', value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const customerList = computed(() => props.data)
|
|
||||||
const loading = computed(() => props.loading)
|
|
||||||
const total = computed(() => props.total)
|
|
||||||
|
|
||||||
// 监听外部数据变化
|
|
||||||
watch(() => props.keyword, (newVal) => {
|
|
||||||
searchKeyword.value = newVal
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(() => props.page, (newVal) => {
|
|
||||||
currentPage.value = newVal
|
|
||||||
})
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
const handleSearch = () => {
|
|
||||||
emit('search', searchKeyword.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRowClick = (row: Customer) => {
|
|
||||||
selectedCustomer.value = row
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSizeChange = (size: number) => {
|
|
||||||
emit('size-change', size)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrentChange = (page: number) => {
|
|
||||||
emit('page-change', page)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleConfirm = () => {
|
|
||||||
if (selectedCustomer.value) {
|
|
||||||
emit('select', selectedCustomer.value)
|
|
||||||
handleClose()
|
|
||||||
} else {
|
|
||||||
ElMessage.warning('请先选择一个客户')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
selectedCustomer.value = null
|
|
||||||
dialogVisible.value = false
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.customer-selector {
|
|
||||||
.search-bar {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-wrapper {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__row) {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.current-row {
|
|
||||||
background-color: #ecf5ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="money-input">
|
|
||||||
<el-input
|
|
||||||
v-model="inputValue"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:disabled="disabled"
|
|
||||||
:readonly="readonly"
|
|
||||||
type="number"
|
|
||||||
:precision="precision"
|
|
||||||
@input="handleInput"
|
|
||||||
@change="handleChange"
|
|
||||||
>
|
|
||||||
<template #append>
|
|
||||||
<el-select
|
|
||||||
v-model="currencyValue"
|
|
||||||
:placeholder="currencyPlaceholder"
|
|
||||||
:disabled="disabled || readonly"
|
|
||||||
style="width: 54px"
|
|
||||||
@change="handleCurrencyChange"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="option in currencyOptions"
|
|
||||||
:key="option.value"
|
|
||||||
:label="option.label"
|
|
||||||
:value="option.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, watch } from 'vue'
|
|
||||||
|
|
||||||
interface CurrencyOption {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
modelValue?: number
|
|
||||||
currency?: string
|
|
||||||
currencyOptions?: CurrencyOption[]
|
|
||||||
placeholder?: string
|
|
||||||
currencyPlaceholder?: string
|
|
||||||
precision?: number
|
|
||||||
disabled?: boolean
|
|
||||||
readonly?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'update:modelValue', value: number | undefined): void
|
|
||||||
(e: 'update:currency', value: string): void
|
|
||||||
(e: 'change', value: number | undefined, currency: string): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
modelValue: undefined,
|
|
||||||
currency: '',
|
|
||||||
currencyOptions: () => [],
|
|
||||||
placeholder: '请输入金额',
|
|
||||||
currencyPlaceholder: '币种',
|
|
||||||
precision: 2,
|
|
||||||
disabled: false,
|
|
||||||
readonly: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const inputValue = ref<string>('')
|
|
||||||
const currencyValue = ref<string>('')
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const displayValue = computed(() => {
|
|
||||||
if (props.modelValue === undefined || props.modelValue === null) return ''
|
|
||||||
return String(props.modelValue)
|
|
||||||
})
|
|
||||||
|
|
||||||
const displayCurrency = computed(() => {
|
|
||||||
return props.currency || ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听外部数据变化
|
|
||||||
watch(() => props.modelValue, (newVal) => {
|
|
||||||
if (newVal !== undefined && newVal !== null) {
|
|
||||||
inputValue.value = String(newVal)
|
|
||||||
} else {
|
|
||||||
inputValue.value = ''
|
|
||||||
}
|
|
||||||
}, { immediate: true })
|
|
||||||
|
|
||||||
watch(() => props.currency, (newVal) => {
|
|
||||||
currencyValue.value = newVal || ''
|
|
||||||
}, { immediate: true })
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
const handleInput = (value: string) => {
|
|
||||||
const numValue = value === '' ? undefined : Number(value)
|
|
||||||
emit('update:modelValue', numValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleChange = (value: string) => {
|
|
||||||
const numValue = value === '' ? undefined : Number(value)
|
|
||||||
emit('change', numValue, currencyValue.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrencyChange = (value: string) => {
|
|
||||||
emit('update:currency', value)
|
|
||||||
emit('change', props.modelValue, value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.money-input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
:deep(.el-input-group__append) {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.el-select {
|
|
||||||
.el-input__wrapper {
|
|
||||||
border-left: none;
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,338 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="order-item-row">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<!-- 车型选择 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="车型" required>
|
|
||||||
<el-input
|
|
||||||
v-model="item.model"
|
|
||||||
placeholder="请选择车型"
|
|
||||||
readonly
|
|
||||||
@click="showVehicleDialog"
|
|
||||||
>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="showVehicleDialog">选择</el-button>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 外观颜色 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="外观颜色">
|
|
||||||
<el-select
|
|
||||||
v-model="item.color_out"
|
|
||||||
placeholder="请选择外观颜色"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="color in wcolorOptions"
|
|
||||||
:key="color.value"
|
|
||||||
:label="color.label"
|
|
||||||
:value="color.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 内饰颜色 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="内饰颜色">
|
|
||||||
<el-select
|
|
||||||
v-model="item.color_in"
|
|
||||||
placeholder="请选择内饰颜色"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="color in ncolorOptions"
|
|
||||||
:key="color.value"
|
|
||||||
:label="color.label"
|
|
||||||
:value="color.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 改装 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="改装">
|
|
||||||
<el-select
|
|
||||||
v-model="item.modification"
|
|
||||||
placeholder="请选择改装"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="mod in modificationOptions"
|
|
||||||
:key="mod.value"
|
|
||||||
:label="mod.label"
|
|
||||||
:value="mod.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<!-- 改装费 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="改装费">
|
|
||||||
<MoneyInput
|
|
||||||
v-model:model-value="item.modification_fee"
|
|
||||||
v-model:currency="item.modification_fee_currency"
|
|
||||||
:currency-options="currencyOptions"
|
|
||||||
placeholder="请输入改装费"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- FOB段运费 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="FOB段运费">
|
|
||||||
<MoneyInput
|
|
||||||
v-model:model-value="item.fob_freight"
|
|
||||||
v-model:currency="item.fob_freight_currency"
|
|
||||||
:currency-options="currencyOptions"
|
|
||||||
placeholder="请输入FOB段运费"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 单价 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="单价">
|
|
||||||
<MoneyInput
|
|
||||||
v-model:model-value="item.unit_price"
|
|
||||||
v-model:currency="item.unit_price_currency"
|
|
||||||
:currency-options="currencyOptions"
|
|
||||||
placeholder="请输入单价"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 总价 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="总价">
|
|
||||||
<MoneyInput
|
|
||||||
v-model:model-value="item.total_price"
|
|
||||||
v-model:currency="item.total_price_currency"
|
|
||||||
:currency-options="currencyOptions"
|
|
||||||
placeholder="请输入总价"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<!-- 官方指导价 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="官方指导价">
|
|
||||||
<MoneyInput
|
|
||||||
v-model:model-value="item.guide_price"
|
|
||||||
v-model:currency="item.guide_price_currency"
|
|
||||||
:currency-options="currencyOptions"
|
|
||||||
placeholder="请输入官方指导价"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 优惠 -->
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="优惠">
|
|
||||||
<MoneyInput
|
|
||||||
v-model:model-value="item.discount"
|
|
||||||
v-model:currency="item.discount_currency"
|
|
||||||
:currency-options="currencyOptions"
|
|
||||||
placeholder="请输入优惠"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<el-col :span="12">
|
|
||||||
<div class="action-buttons">
|
|
||||||
<el-button type="primary" @click="handleCopy">复制</el-button>
|
|
||||||
<el-button type="success" @click="handleAddAfter">新增</el-button>
|
|
||||||
<el-button type="danger" @click="handleRemove">删除</el-button>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- 车辆选择弹框 -->
|
|
||||||
<VehicleSelectorDialog
|
|
||||||
v-model:visible="vehicleDialog.visible"
|
|
||||||
:keyword="vehicleDialog.keyword"
|
|
||||||
:page="vehicleDialog.page"
|
|
||||||
:page-size="vehicleDialog.pageSize"
|
|
||||||
:loading="vehicleDialog.loading"
|
|
||||||
:data="vehicleDialog.data"
|
|
||||||
:total="vehicleDialog.total"
|
|
||||||
@search="handleVehicleSearch"
|
|
||||||
@page-change="handleVehiclePageChange"
|
|
||||||
@size-change="handleVehicleSizeChange"
|
|
||||||
@select="handleVehicleSelect"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive } from 'vue'
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
import MoneyInput from './MoneyInput.vue'
|
|
||||||
import VehicleSelectorDialog from './VehicleSelectorDialog.vue'
|
|
||||||
|
|
||||||
interface OrderItem {
|
|
||||||
id?: string
|
|
||||||
model: string
|
|
||||||
color_out: string
|
|
||||||
color_in: string
|
|
||||||
modification: string
|
|
||||||
modification_fee?: number
|
|
||||||
modification_fee_currency?: string
|
|
||||||
fob_freight?: number
|
|
||||||
fob_freight_currency?: string
|
|
||||||
unit_price?: number
|
|
||||||
unit_price_currency?: string
|
|
||||||
total_price?: number
|
|
||||||
total_price_currency?: string
|
|
||||||
guide_price?: number
|
|
||||||
guide_price_currency?: string
|
|
||||||
discount?: number
|
|
||||||
discount_currency?: string
|
|
||||||
[key: string]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ColorOption {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ModificationOption {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CurrencyOption {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
item: OrderItem
|
|
||||||
index: number
|
|
||||||
wcolorOptions: ColorOption[]
|
|
||||||
ncolorOptions: ColorOption[]
|
|
||||||
modificationOptions: ModificationOption[]
|
|
||||||
currencyOptions: CurrencyOption[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'update:item', item: OrderItem): void
|
|
||||||
(e: 'copy', index: number): void
|
|
||||||
(e: 'add-after', index: number): void
|
|
||||||
(e: 'remove', index: number): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>()
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
// 车辆选择弹框状态
|
|
||||||
const vehicleDialog = reactive({
|
|
||||||
visible: false,
|
|
||||||
keyword: '',
|
|
||||||
page: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
loading: false,
|
|
||||||
data: [],
|
|
||||||
total: 0,
|
|
||||||
targetIndex: -1
|
|
||||||
})
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
const showVehicleDialog = () => {
|
|
||||||
vehicleDialog.targetIndex = props.index
|
|
||||||
vehicleDialog.visible = true
|
|
||||||
// 这里应该调用API获取车辆列表
|
|
||||||
// 暂时使用模拟数据
|
|
||||||
vehicleDialog.data = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
model_name: 'Model S',
|
|
||||||
brand_name: 'Tesla',
|
|
||||||
series_name: 'S系列',
|
|
||||||
msrp: 89990,
|
|
||||||
currency: 'USD',
|
|
||||||
color_exterior_text: '红色',
|
|
||||||
color_interior_text: '黑色'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
vehicleDialog.total = 1
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleVehicleSearch = (keyword: string) => {
|
|
||||||
vehicleDialog.keyword = keyword
|
|
||||||
// 实现搜索逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleVehiclePageChange = (page: number) => {
|
|
||||||
vehicleDialog.page = page
|
|
||||||
// 实现分页逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleVehicleSizeChange = (size: number) => {
|
|
||||||
vehicleDialog.pageSize = size
|
|
||||||
// 实现分页大小改变逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleVehicleSelect = (vehicle: any) => {
|
|
||||||
const idx = vehicleDialog.targetIndex
|
|
||||||
if (idx >= 0) {
|
|
||||||
// 回显车辆信息
|
|
||||||
props.item.model = vehicle.model_name || vehicle.name || ''
|
|
||||||
props.item.color_out = vehicle.color_exterior_text || ''
|
|
||||||
props.item.color_in = vehicle.color_interior_text || ''
|
|
||||||
props.item.guide_price = vehicle.msrp ?? props.item.guide_price
|
|
||||||
if (vehicle.currency) {
|
|
||||||
props.item.guide_price_currency = vehicle.currency
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('update:item', props.item)
|
|
||||||
}
|
|
||||||
vehicleDialog.visible = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCopy = () => {
|
|
||||||
emit('copy', props.index)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddAfter = () => {
|
|
||||||
emit('add-after', props.index)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRemove = () => {
|
|
||||||
emit('remove', props.index)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.order-item-row {
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid #e4e7ed;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
background-color: #fafafa;
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,205 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
title="选择车型"
|
|
||||||
width="800px"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<div class="vehicle-selector">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div class="search-bar">
|
|
||||||
<el-input
|
|
||||||
v-model="searchKeyword"
|
|
||||||
placeholder="请输入车型名称搜索"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleSearch"
|
|
||||||
style="width: 300px"
|
|
||||||
>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="handleSearch">
|
|
||||||
<el-icon><Search /></el-icon>
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 车辆列表 -->
|
|
||||||
<el-table
|
|
||||||
:data="vehicleList"
|
|
||||||
v-loading="loading"
|
|
||||||
height="400"
|
|
||||||
@row-click="handleRowClick"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-table-column prop="model_name" label="车型名称" min-width="200" />
|
|
||||||
<el-table-column prop="brand_name" label="品牌" width="120" />
|
|
||||||
<el-table-column prop="series_name" label="车系" width="120" />
|
|
||||||
<el-table-column prop="msrp" label="指导价" width="120">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row.msrp ? `${row.msrp} ${row.currency || ''}` : '-' }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="color_exterior_text" label="外观颜色" width="100" />
|
|
||||||
<el-table-column prop="color_interior_text" label="内饰颜色" width="100" />
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="pagination-wrapper">
|
|
||||||
<el-pagination
|
|
||||||
:current-page="currentPage"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:page-sizes="[10, 20, 50]"
|
|
||||||
:total="total"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="handleClose">取消</el-button>
|
|
||||||
<el-button type="primary" @click="handleConfirm" :disabled="!selectedVehicle">
|
|
||||||
确定
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, watch } from 'vue'
|
|
||||||
import { Search } from '@element-plus/icons-vue'
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
interface Vehicle {
|
|
||||||
id: number | string
|
|
||||||
model_name: string
|
|
||||||
brand_name: string
|
|
||||||
series_name: string
|
|
||||||
msrp?: number
|
|
||||||
currency?: string
|
|
||||||
color_exterior_text?: string
|
|
||||||
color_interior_text?: string
|
|
||||||
[key: string]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
visible: boolean
|
|
||||||
keyword?: string
|
|
||||||
page?: number
|
|
||||||
pageSize?: number
|
|
||||||
loading?: boolean
|
|
||||||
data?: Vehicle[]
|
|
||||||
total?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'update:visible', value: boolean): void
|
|
||||||
(e: 'search', keyword: string): void
|
|
||||||
(e: 'page-change', page: number): void
|
|
||||||
(e: 'size-change', size: number): void
|
|
||||||
(e: 'select', vehicle: Vehicle): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
keyword: '',
|
|
||||||
page: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
loading: false,
|
|
||||||
data: () => [],
|
|
||||||
total: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const searchKeyword = ref(props.keyword)
|
|
||||||
const currentPage = ref(props.page)
|
|
||||||
const selectedVehicle = ref<Vehicle | null>(null)
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const dialogVisible = computed({
|
|
||||||
get: () => props.visible,
|
|
||||||
set: (value) => emit('update:visible', value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const vehicleList = computed(() => props.data)
|
|
||||||
const loading = computed(() => props.loading)
|
|
||||||
const total = computed(() => props.total)
|
|
||||||
|
|
||||||
// 监听外部数据变化
|
|
||||||
watch(() => props.keyword, (newVal) => {
|
|
||||||
searchKeyword.value = newVal
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(() => props.page, (newVal) => {
|
|
||||||
currentPage.value = newVal
|
|
||||||
})
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
const handleSearch = () => {
|
|
||||||
emit('search', searchKeyword.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRowClick = (row: Vehicle) => {
|
|
||||||
selectedVehicle.value = row
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSizeChange = (size: number) => {
|
|
||||||
emit('size-change', size)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrentChange = (page: number) => {
|
|
||||||
emit('page-change', page)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleConfirm = () => {
|
|
||||||
if (selectedVehicle.value) {
|
|
||||||
emit('select', selectedVehicle.value)
|
|
||||||
handleClose()
|
|
||||||
} else {
|
|
||||||
ElMessage.warning('请先选择一个车型')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
selectedVehicle.value = null
|
|
||||||
dialogVisible.value = false
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.vehicle-selector {
|
|
||||||
.search-bar {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-wrapper {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__row) {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.current-row {
|
|
||||||
background-color: #ecf5ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export { default as VehicleSelectorDialog } from './VehicleSelectorDialog.vue'
|
|
||||||
export { default as CustomerSelectorDialog } from './CustomerSelectorDialog.vue'
|
|
||||||
export { default as MoneyInput } from './MoneyInput.vue'
|
|
||||||
export { default as OrderItemRow } from './OrderItemRow.vue'
|
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
|
||||||
|
export const usePdfPreview = () => {
|
||||||
|
const state = reactive({ visible: false, url: '', name: '', blobUrl: '' })
|
||||||
|
const frameRef = ref<HTMLIFrameElement | null>(null)
|
||||||
|
|
||||||
|
const open = (url: string, name = '') => {
|
||||||
|
if (!url) return
|
||||||
|
state.url = url
|
||||||
|
state.name = name
|
||||||
|
state.visible = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openWithResponse = (res: any) => {
|
||||||
|
const url = res?.data?.file_url || res?.file_url
|
||||||
|
const name = res?.data?.file_name || res?.file_name || ''
|
||||||
|
open(url, name)
|
||||||
|
}
|
||||||
|
|
||||||
|
const inferFilenameFromUrl = (url: string): string => {
|
||||||
|
try {
|
||||||
|
const u = new URL(url)
|
||||||
|
const parts = u.pathname.split('/')
|
||||||
|
return parts[parts.length - 1] || 'document.pdf'
|
||||||
|
} catch (e) {
|
||||||
|
const parts = (url || '').split('?')[0].split('/')
|
||||||
|
return parts[parts.length - 1] || 'document.pdf'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const download = async () => {
|
||||||
|
if (!state.url) return
|
||||||
|
const filename = state.name || inferFilenameFromUrl(state.url)
|
||||||
|
try {
|
||||||
|
const resp = await fetch(state.url, { credentials: 'include' })
|
||||||
|
const blob = await resp.blob()
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = filename
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
window.URL.revokeObjectURL(url)
|
||||||
|
} catch (err) {
|
||||||
|
window.open(state.url, '_blank')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览时也用 blob，提升兼容性
|
||||||
|
const preparePreview = async () => {
|
||||||
|
if (!state.url) return
|
||||||
|
try {
|
||||||
|
const resp = await fetch(state.url, { credentials: 'include' })
|
||||||
|
const blob = await resp.blob()
|
||||||
|
state.blobUrl && window.URL.revokeObjectURL(state.blobUrl)
|
||||||
|
state.blobUrl = window.URL.createObjectURL(blob)
|
||||||
|
} catch (e) {
|
||||||
|
state.blobUrl = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const print = () => {
|
||||||
|
const frame = frameRef.value
|
||||||
|
if (frame && frame.contentWindow) {
|
||||||
|
frame.contentWindow.focus()
|
||||||
|
frame.contentWindow.print()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (state.url) {
|
||||||
|
const win = window.open(state.url, '_blank')
|
||||||
|
if (win) {
|
||||||
|
win.addEventListener('load', () => win.print())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { pdf: state, frameRef, open, openWithResponse, download, print, preparePreview }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,862 @@
|
|||||||
|
import { ref, reactive, watch, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { commonService } from '@/api/commonApi'
|
||||||
|
import { vehicleService } from '@/api/vehicleApi'
|
||||||
|
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||||||
|
|
||||||
|
// 类型定义
|
||||||
|
export interface BaseForm {
|
||||||
|
pi_no: string
|
||||||
|
biz_date: string
|
||||||
|
clearance_country_id: string
|
||||||
|
clearance_country_snapshot: string
|
||||||
|
customer_source_id: string
|
||||||
|
customer_source_snapshot: string
|
||||||
|
customer_id: string
|
||||||
|
customer_snapshot: string
|
||||||
|
customer_country_id: string
|
||||||
|
customer_country_snapshot: string
|
||||||
|
declarant_name: string
|
||||||
|
eta_ship_date: string
|
||||||
|
shipping_method_id: string
|
||||||
|
shipping_method_snapshot: string
|
||||||
|
domestic_port_id: string
|
||||||
|
domestic_port_snapshot: string
|
||||||
|
trade_term_id: string
|
||||||
|
trade_term_snapshot: string
|
||||||
|
clearance_port_id: string
|
||||||
|
clearance_port_snapshot: string
|
||||||
|
latest_arrival_date: string
|
||||||
|
contract_exchange_rate: string
|
||||||
|
contract_exchange_rate_currency: string
|
||||||
|
remark: string
|
||||||
|
total_cif: number | undefined
|
||||||
|
total_cif_currency: string
|
||||||
|
total_cif_currency_snapshot: string
|
||||||
|
is_final: string
|
||||||
|
object_id: string | number
|
||||||
|
contract: string
|
||||||
|
contract_url?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ItemRow {
|
||||||
|
sku_id: string
|
||||||
|
vin?: string
|
||||||
|
mileage?: number
|
||||||
|
listing_price?: number | undefined
|
||||||
|
listing_price_currency: string
|
||||||
|
listing_price_currency_snapshot: string
|
||||||
|
reduction_price?: number | undefined
|
||||||
|
reduction_price_currency: string
|
||||||
|
reduction_price_currency_snapshot: string
|
||||||
|
model_snapshot: string
|
||||||
|
color_interior_code: string
|
||||||
|
color_interior_snapshot: string
|
||||||
|
color_exterior_code: string
|
||||||
|
color_exterior_snapshot: string
|
||||||
|
unit_price: number | undefined
|
||||||
|
handling_fee: string
|
||||||
|
fob_transport_fee: number | undefined
|
||||||
|
port_misc_fee: string
|
||||||
|
retrofit_fee: string
|
||||||
|
total_price: number | undefined
|
||||||
|
official_price: number | undefined
|
||||||
|
discount_price: number | undefined
|
||||||
|
fob_fee?: number | undefined
|
||||||
|
fob_fee_currency: string
|
||||||
|
fob_fee_currency_snapshot: string
|
||||||
|
helper_fee?: number | undefined
|
||||||
|
helper_fee_currency: string
|
||||||
|
helper_fee_currency_snapshot: string
|
||||||
|
domestic_freight?: number | undefined
|
||||||
|
domestic_freight_currency: string
|
||||||
|
domestic_freight_currency_snapshot: string
|
||||||
|
port_fee?: number | undefined
|
||||||
|
port_fee_currency: string
|
||||||
|
port_fee_currency_snapshot: string
|
||||||
|
unit_price_currency: string
|
||||||
|
unit_price_currency_snapshot: string
|
||||||
|
total_price_currency: string
|
||||||
|
total_price_currency_snapshot: string
|
||||||
|
guide_price_currency: string
|
||||||
|
guide_price_currency_snapshot: string
|
||||||
|
discount?: number | undefined
|
||||||
|
discount_currency: string
|
||||||
|
discount_currency_snapshot: string
|
||||||
|
contract_rate?: number | undefined
|
||||||
|
profit: number | undefined
|
||||||
|
profit_type_snapshot?: string
|
||||||
|
modify_ids: string[]
|
||||||
|
modify_list: Array<{ option_id: string; option_name_snapshot: string }>
|
||||||
|
modify_fee_currency: string
|
||||||
|
modify_fee_currency_snapshot: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaymentItem {
|
||||||
|
remit_country_id: string
|
||||||
|
remit_country_name_snapshot: string
|
||||||
|
remit_date: string
|
||||||
|
currency_code: string
|
||||||
|
currency_name_snapshot: string
|
||||||
|
account_id: string
|
||||||
|
account_name_snapshot: string
|
||||||
|
remitter_name: string
|
||||||
|
amount: number | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DialogState {
|
||||||
|
visible: boolean
|
||||||
|
search: { keyword: string }
|
||||||
|
loading: boolean
|
||||||
|
tableData: any[]
|
||||||
|
pagination: { currentPage: number; pageSize: number; total: number }
|
||||||
|
targetIndex?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useStockingForm(isFinal = false, stockingId?: string | number) {
|
||||||
|
const { uploadHeaders } = useUploadHeaders()
|
||||||
|
const actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload?scene=stock_orders`
|
||||||
|
|
||||||
|
// 选项数据
|
||||||
|
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 transportOptions = ref<Array<any>>([])
|
||||||
|
const trade_termsOptions = ref<Array<any>>([])
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const baseForm = reactive<BaseForm>({
|
||||||
|
pi_no: '',
|
||||||
|
biz_date: '',
|
||||||
|
clearance_country_id: '',
|
||||||
|
clearance_country_snapshot: '',
|
||||||
|
customer_source_id: '',
|
||||||
|
customer_source_snapshot: '',
|
||||||
|
customer_id: '',
|
||||||
|
customer_snapshot: '',
|
||||||
|
customer_country_id: '',
|
||||||
|
customer_country_snapshot: '',
|
||||||
|
declarant_name: '',
|
||||||
|
eta_ship_date: '',
|
||||||
|
shipping_method_id: '',
|
||||||
|
shipping_method_snapshot: '',
|
||||||
|
domestic_port_id: '',
|
||||||
|
domestic_port_snapshot: '',
|
||||||
|
trade_term_id: '',
|
||||||
|
trade_term_snapshot: '',
|
||||||
|
clearance_port_id: '',
|
||||||
|
clearance_port_snapshot: '',
|
||||||
|
latest_arrival_date: '',
|
||||||
|
contract_exchange_rate: '',
|
||||||
|
contract_exchange_rate_currency: 'USD',
|
||||||
|
remark: '',
|
||||||
|
total_cif: undefined,
|
||||||
|
total_cif_currency: 'USD',
|
||||||
|
total_cif_currency_snapshot: '',
|
||||||
|
is_final: isFinal ? '1' : '0',
|
||||||
|
object_id: stockingId || '0',
|
||||||
|
contract: '',
|
||||||
|
contract_url: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 创建新的订单项
|
||||||
|
const newItem = (): ItemRow => ({
|
||||||
|
sku_id: '',
|
||||||
|
model_snapshot: '',
|
||||||
|
mileage: 0,
|
||||||
|
listing_price: undefined,
|
||||||
|
listing_price_currency: 'USD',
|
||||||
|
listing_price_currency_snapshot: '',
|
||||||
|
reduction_price: undefined,
|
||||||
|
reduction_price_currency: 'USD',
|
||||||
|
reduction_price_currency_snapshot: '',
|
||||||
|
color_interior_code: '',
|
||||||
|
color_interior_snapshot: '',
|
||||||
|
color_exterior_code: '',
|
||||||
|
color_exterior_snapshot: '',
|
||||||
|
unit_price: undefined,
|
||||||
|
handling_fee: '',
|
||||||
|
fob_transport_fee: undefined,
|
||||||
|
port_misc_fee: '',
|
||||||
|
retrofit_fee: '',
|
||||||
|
total_price: undefined,
|
||||||
|
official_price: undefined,
|
||||||
|
discount_price: undefined,
|
||||||
|
fob_fee: undefined,
|
||||||
|
fob_fee_currency: 'USD',
|
||||||
|
fob_fee_currency_snapshot: '',
|
||||||
|
helper_fee: undefined,
|
||||||
|
helper_fee_currency: 'USD',
|
||||||
|
helper_fee_currency_snapshot: '',
|
||||||
|
domestic_freight: undefined,
|
||||||
|
domestic_freight_currency: 'USD',
|
||||||
|
domestic_freight_currency_snapshot: '',
|
||||||
|
port_fee: undefined,
|
||||||
|
port_fee_currency: 'USD',
|
||||||
|
port_fee_currency_snapshot: '',
|
||||||
|
unit_price_currency: 'USD',
|
||||||
|
unit_price_currency_snapshot: '',
|
||||||
|
total_price_currency: 'USD',
|
||||||
|
total_price_currency_snapshot: '',
|
||||||
|
guide_price_currency: 'USD',
|
||||||
|
guide_price_currency_snapshot: '',
|
||||||
|
discount: undefined,
|
||||||
|
discount_currency: 'USD',
|
||||||
|
discount_currency_snapshot: '',
|
||||||
|
contract_rate: 7.16,
|
||||||
|
profit: undefined,
|
||||||
|
modify_ids: [],
|
||||||
|
modify_list: [],
|
||||||
|
modify_fee_currency: 'USD',
|
||||||
|
modify_fee_currency_snapshot: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 创建新的收款项
|
||||||
|
const newPaymentItem = (): PaymentItem => ({
|
||||||
|
remit_country_id: '',
|
||||||
|
remit_country_name_snapshot: '',
|
||||||
|
remit_date: '',
|
||||||
|
currency_code: '',
|
||||||
|
currency_name_snapshot: '',
|
||||||
|
account_id: '',
|
||||||
|
account_name_snapshot: '',
|
||||||
|
remitter_name: '',
|
||||||
|
amount: undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
const items = ref<ItemRow[]>([newItem()])
|
||||||
|
const paymentItems = ref<PaymentItem[]>([newPaymentItem()])
|
||||||
|
const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
|
||||||
|
|
||||||
|
// 弹框状态
|
||||||
|
const customerDialog = reactive<DialogState>({
|
||||||
|
visible: false,
|
||||||
|
search: { keyword: '' },
|
||||||
|
loading: false,
|
||||||
|
tableData: [],
|
||||||
|
pagination: { currentPage: 1, pageSize: 10, total: 0 }
|
||||||
|
})
|
||||||
|
|
||||||
|
const vehicleDialog = reactive<DialogState>({
|
||||||
|
visible: false,
|
||||||
|
search: { keyword: '' },
|
||||||
|
loading: false,
|
||||||
|
tableData: [],
|
||||||
|
pagination: { currentPage: 1, pageSize: 10, total: 0 },
|
||||||
|
targetIndex: -1
|
||||||
|
})
|
||||||
|
|
||||||
|
// 数据加载方法
|
||||||
|
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('获取港口列表失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDictOptions = async () => {
|
||||||
|
const response = await commonService.getDictSelect({ scope: '2,15' })
|
||||||
|
transportOptions.value = response.transport
|
||||||
|
trade_termsOptions.value = response.trade_terms
|
||||||
|
}
|
||||||
|
|
||||||
|
// 币种相关方法
|
||||||
|
const getCurrencyRate = (code: string): string => {
|
||||||
|
try {
|
||||||
|
const found = (currencyOptions?.value || []).find((c: any) => c.currency_code === code)
|
||||||
|
return found?.rate || found?.exchange_rate || ''
|
||||||
|
} catch (e) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCurrencyBounds = (code: string): { min: number; max: number; base: number } => {
|
||||||
|
const found: any = (currencyOptions?.value || []).find((c: any) => c.currency_code === code) || {}
|
||||||
|
const base = Number(found?.rate || found?.exchange_rate || 0) || 0
|
||||||
|
const up = Number(found?.float_percent_up)
|
||||||
|
const down = Number(found?.float_percent_down)
|
||||||
|
if (!Number.isNaN(up) || !Number.isNaN(down)) {
|
||||||
|
const upPct = (Number.isNaN(up) ? 0 : up) / 100
|
||||||
|
const downPct = (Number.isNaN(down) ? 0 : down) / 100
|
||||||
|
return { min: base * (1 - downPct), max: base * (1 + upPct), base }
|
||||||
|
}
|
||||||
|
return { min: base * 0.9, max: base * 1.1, base }
|
||||||
|
}
|
||||||
|
|
||||||
|
const validateContractRate = () => {
|
||||||
|
const code = baseForm.contract_exchange_rate_currency || items.value[0]?.unit_price_currency || 'USD'
|
||||||
|
const { min, max } = getCurrencyBounds(code)
|
||||||
|
const val = Number(baseForm.contract_exchange_rate)
|
||||||
|
if (Number.isNaN(val)) return
|
||||||
|
if (val < min) {
|
||||||
|
baseForm.contract_exchange_rate = String(Number(min.toFixed(6)))
|
||||||
|
ElMessage?.warning?.('合同汇率已按币种浮动下限自动纠正')
|
||||||
|
} else if (val > max) {
|
||||||
|
baseForm.contract_exchange_rate = String(Number(max.toFixed(6)))
|
||||||
|
ElMessage?.warning?.('合同汇率已按币种浮动上限自动纠正')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 金额包装方法
|
||||||
|
const wrapMoney = (amount: any, currency: string, remark: string) => ({
|
||||||
|
currency: currency || '',
|
||||||
|
amount: amount === undefined || amount === null ? '' : String(amount),
|
||||||
|
rate: getCurrencyRate(currency),
|
||||||
|
remark
|
||||||
|
})
|
||||||
|
|
||||||
|
// 利润计算方法
|
||||||
|
const getRateNumber = (code: string): number => {
|
||||||
|
const r = Number(getCurrencyRate(code))
|
||||||
|
return Number.isNaN(r) ? 0 : r
|
||||||
|
}
|
||||||
|
|
||||||
|
const toUSD = (amount: any, code?: string): number => {
|
||||||
|
const val = amount === undefined || amount === null || amount === '' ? 0 : Number(amount)
|
||||||
|
if (Number.isNaN(val)) return 0
|
||||||
|
const cur = code || 'USD'
|
||||||
|
const rateCur = getRateNumber(cur)
|
||||||
|
const rateUSD = getRateNumber('USD') || 1
|
||||||
|
if (!rateCur) return 0
|
||||||
|
return (val * rateCur) / rateUSD
|
||||||
|
}
|
||||||
|
|
||||||
|
const calcProfit = (it: any): number => {
|
||||||
|
const unit = toUSD(it.unit_price, it.unit_price_currency)
|
||||||
|
const retrofit = toUSD(it.retrofit_fee, (it as any).modify_fee_currency)
|
||||||
|
const fob = toUSD(it.fob_transport_fee ?? (it as any).fob_fee, (it as any).fob_fee_currency)
|
||||||
|
const handling = toUSD(it.handling_fee ?? (it as any).helper_fee, (it as any).helper_fee_currency)
|
||||||
|
const port = toUSD(it.port_misc_fee ?? (it as any).port_fee, (it as any).port_fee_currency)
|
||||||
|
|
||||||
|
const mileageVal = Number(it.mileage ?? 0)
|
||||||
|
if (mileageVal > 0) {
|
||||||
|
// 二手车：用挂牌价与二手减价替代官方指导价与优惠
|
||||||
|
const listing = toUSD(it.listing_price ?? (it as any).listing_price, (it as any).listing_price_currency)
|
||||||
|
const reduction = toUSD(it.reduction_price ?? (it as any).reduction_price, (it as any).reduction_price_currency)
|
||||||
|
return unit - (retrofit + fob + listing + reduction + handling + port)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新车/里程<=0：保持原有计算（官方指导价与优惠）
|
||||||
|
const guide = toUSD(it.official_price ?? (it as any).guide_price, (it as any).guide_price_currency)
|
||||||
|
const discount = toUSD(it.discount_price ?? (it as any).discount, (it as any).discount_currency)
|
||||||
|
return unit - (retrofit + fob + guide + discount + handling + port)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 合同文件相关方法
|
||||||
|
const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
return /\.(jpg|jpeg|png|gif)$/i.test(file.name) || file.file_name.startsWith('image/')
|
||||||
|
}
|
||||||
|
|
||||||
|
const beforeContractUpload = (file: File) => {
|
||||||
|
const isValidType = /\.(jpg|jpeg|png|gif|pdf|doc|docx|xls|xlsx|txt)$/i.test(file.name)
|
||||||
|
if (!isValidType) {
|
||||||
|
ElMessage.error('只能上传图片或文档文件！')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const isLt10M = file.size / 1024 / 1024 < 10
|
||||||
|
if (!isLt10M) {
|
||||||
|
ElMessage.error('文件大小不能超过 10MB!')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleContractUpload = (response: any) => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
const fileInfo = {
|
||||||
|
name: response.data.original_name || '合同文件',
|
||||||
|
url: response.data.file_url,
|
||||||
|
file_name: response.data.file_name
|
||||||
|
}
|
||||||
|
contractFile.value = fileInfo
|
||||||
|
baseForm.contract = response.data.file_name
|
||||||
|
ElMessage.success('合同上传成功！')
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.message || '合同上传失败！')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeContractFile = () => {
|
||||||
|
contractFile.value = null
|
||||||
|
baseForm.contract = ''
|
||||||
|
ElMessage.success('合同文件已删除')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订单项操作方法
|
||||||
|
const copyRow = (idx: number) => {
|
||||||
|
const copied = JSON.parse(JSON.stringify(items.value[idx])) as ItemRow
|
||||||
|
items.value.splice(idx + 1, 0, copied)
|
||||||
|
}
|
||||||
|
|
||||||
|
const addRowAfter = (idx: number) => {
|
||||||
|
items.value.splice(idx + 1, 0, newItem())
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeRow = (idx: number) => {
|
||||||
|
items.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收款项操作方法
|
||||||
|
const addPaymentItem = () => {
|
||||||
|
paymentItems.value.push(newPaymentItem())
|
||||||
|
}
|
||||||
|
|
||||||
|
const removePaymentItem = (idx: number) => {
|
||||||
|
if (paymentItems.value.length > 1) {
|
||||||
|
paymentItems.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 客户选择相关方法
|
||||||
|
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_id = row.id || ''
|
||||||
|
baseForm.customer_snapshot = row.contacts || row.name || ''
|
||||||
|
customerDialog.visible = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 车辆选择相关方法
|
||||||
|
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 {
|
||||||
|
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 !== undefined && idx >= 0 && idx < items.value.length) {
|
||||||
|
const target = items.value[idx]
|
||||||
|
target.sku_id = row.id || ''
|
||||||
|
target.model_snapshot = row.model_name || row.name || ''
|
||||||
|
target.color_exterior_code = row.color_exterior_code || ''
|
||||||
|
target.color_exterior_snapshot = row.color_exterior_text || ''
|
||||||
|
target.color_interior_code = row.color_interior_code || ''
|
||||||
|
target.color_interior_snapshot = row.color_interior_text || ''
|
||||||
|
target.official_price = row.msrp ?? target.official_price
|
||||||
|
if (row.currency) {
|
||||||
|
target.guide_price_currency = row.currency
|
||||||
|
}
|
||||||
|
}
|
||||||
|
vehicleDialog.visible = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据回显方法
|
||||||
|
const populateFromDetail = (res: any) => {
|
||||||
|
if (!res) return
|
||||||
|
|
||||||
|
// 基础信息
|
||||||
|
baseForm.pi_no = res.pi_no || ''
|
||||||
|
baseForm.contract = res.contract || ''
|
||||||
|
baseForm.biz_date = res.biz_date || ''
|
||||||
|
baseForm.clearance_country_id = res.clearance_country_id || ''
|
||||||
|
baseForm.clearance_country_snapshot = res.clearance_country_snapshot || ''
|
||||||
|
baseForm.customer_source_id = res.customer_source_id || ''
|
||||||
|
baseForm.customer_source_snapshot = res.customer_source_snapshot || ''
|
||||||
|
baseForm.customer_id = res.customer_id || ''
|
||||||
|
baseForm.customer_snapshot = res.customer_snapshot || ''
|
||||||
|
baseForm.customer_country_id = res.customer_country_id || ''
|
||||||
|
baseForm.customer_country_snapshot = res.customer_country_snapshot || ''
|
||||||
|
baseForm.declarant_name = res.declarant_name || ''
|
||||||
|
baseForm.eta_ship_date = res.eta_ship_date || ''
|
||||||
|
baseForm.shipping_method_id = res.shipping_method_id || ''
|
||||||
|
baseForm.shipping_method_snapshot = res.shipping_method_snapshot || ''
|
||||||
|
baseForm.domestic_port_id = res.domestic_port_id || ''
|
||||||
|
baseForm.domestic_port_snapshot = res.domestic_port_snapshot || ''
|
||||||
|
baseForm.trade_term_id = res.trade_term_id || ''
|
||||||
|
baseForm.trade_term_snapshot = res.trade_term_snapshot || ''
|
||||||
|
baseForm.clearance_port_id = res.clearance_port_id || ''
|
||||||
|
baseForm.clearance_port_snapshot = res.clearance_port_snapshot || ''
|
||||||
|
baseForm.latest_arrival_date = res.latest_arrival_date || ''
|
||||||
|
baseForm.remark = res.remark || ''
|
||||||
|
|
||||||
|
// 合计与汇率
|
||||||
|
baseForm.total_cif = res.cif_total_amount ? Number(res.cif_total_amount) : undefined
|
||||||
|
baseForm.total_cif_currency = res.settlement_currency || baseForm.total_cif_currency
|
||||||
|
baseForm.contract_exchange_rate = res.contract_exchange_rate || getCurrencyRate(baseForm.total_cif_currency)
|
||||||
|
|
||||||
|
// 明细
|
||||||
|
const list = Array.isArray(res.veh_list) ? res.veh_list : []
|
||||||
|
items.value = list.map((it: any) => ({
|
||||||
|
sku_id: it.sku_id ? String(it.sku_id) : '',
|
||||||
|
vin: it.vin || '',
|
||||||
|
mileage: it.mileage ?? 0,
|
||||||
|
model_snapshot: it.model_snapshot || '',
|
||||||
|
listing_price: it.listing_price?.amount ? Number(it.listing_price.amount) : undefined,
|
||||||
|
listing_price_currency: it.listing_price?.currency || 'USD',
|
||||||
|
listing_price_currency_snapshot: '',
|
||||||
|
reduction_price: it.reduction_price?.amount ? Number(it.reduction_price.amount) : undefined,
|
||||||
|
reduction_price_currency: it.reduction_price?.currency || 'USD',
|
||||||
|
reduction_price_currency_snapshot: '',
|
||||||
|
color_interior_code: it.color_interior_code || '',
|
||||||
|
color_interior_snapshot: it.color_interior_snapshot || '',
|
||||||
|
color_exterior_code: it.color_exterior_code || '',
|
||||||
|
color_exterior_snapshot: it.color_exterior_snapshot || '',
|
||||||
|
unit_price: it.unit_price?.amount ? Number(it.unit_price.amount) : undefined,
|
||||||
|
handling_fee: it.handling_fee?.amount ?? '',
|
||||||
|
fob_transport_fee: it.fob_transport_fee?.amount ? Number(it.fob_transport_fee.amount) : undefined,
|
||||||
|
port_misc_fee: it.port_misc_fee?.amount ?? '',
|
||||||
|
retrofit_fee: it.retrofit_fee?.amount ?? '',
|
||||||
|
total_price: it.total_price?.amount ? Number(it.total_price.amount) : undefined,
|
||||||
|
official_price: it.official_price?.amount ? Number(it.official_price.amount) : undefined,
|
||||||
|
discount_price: it.discount_price?.amount ? Number(it.discount_price.amount) : undefined,
|
||||||
|
fob_fee: undefined,
|
||||||
|
fob_fee_currency: it.fob_transport_fee?.currency || 'USD',
|
||||||
|
fob_fee_currency_snapshot: '',
|
||||||
|
helper_fee: undefined,
|
||||||
|
helper_fee_currency: it.handling_fee?.currency || 'USD',
|
||||||
|
helper_fee_currency_snapshot: '',
|
||||||
|
domestic_freight: undefined,
|
||||||
|
domestic_freight_currency: it.domestic_freight?.currency || 'USD',
|
||||||
|
domestic_freight_currency_snapshot: '',
|
||||||
|
port_fee: undefined,
|
||||||
|
port_fee_currency: it.port_misc_fee?.currency || 'USD',
|
||||||
|
port_fee_currency_snapshot: '',
|
||||||
|
unit_price_currency: it.unit_price?.currency || 'USD',
|
||||||
|
unit_price_currency_snapshot: '',
|
||||||
|
total_price_currency: it.total_price?.currency || 'USD',
|
||||||
|
total_price_currency_snapshot: '',
|
||||||
|
guide_price_currency: it.official_price?.currency || 'USD',
|
||||||
|
guide_price_currency_snapshot: '',
|
||||||
|
discount: undefined,
|
||||||
|
discount_currency: it.discount_price?.currency || 'USD',
|
||||||
|
discount_currency_snapshot: '',
|
||||||
|
contract_rate: baseForm.contract_exchange_rate ? Number(baseForm.contract_exchange_rate) : undefined,
|
||||||
|
profit: undefined,
|
||||||
|
profit_type_snapshot: '',
|
||||||
|
modify_ids: Array.isArray(it.modify_list) ? it.modify_list.map((m: any) => Number(m.option_id)) : [],
|
||||||
|
modify_list: Array.isArray(it.modify_list)
|
||||||
|
? it.modify_list.map((m: any) => ({ option_id: String(m.option_id), option_name_snapshot: m.option_name_snapshot }))
|
||||||
|
: [],
|
||||||
|
modify_fee_currency: it.retrofit_fee?.currency || 'USD',
|
||||||
|
modify_fee_currency_snapshot: ''
|
||||||
|
}))
|
||||||
|
// 计划收款
|
||||||
|
const pays = Array.isArray(res.account_list) ? res.account_list : []
|
||||||
|
paymentItems.value = pays.map((p: any) => ({
|
||||||
|
remit_country_id: p.remit_country_id ? Number(p.remit_country_id) : '',
|
||||||
|
remit_country_name_snapshot: p.remit_country_name_snapshot || '',
|
||||||
|
remit_date: p.remit_date || '',
|
||||||
|
currency_code: p.currency_code || '',
|
||||||
|
currency_name_snapshot: p.currency_name_snapshot || '',
|
||||||
|
account_id: p.account_id ? String(p.account_id) : '',
|
||||||
|
account_name_snapshot: p.account_name_snapshot || '',
|
||||||
|
remitter_name: p.remitter_name || '',
|
||||||
|
amount: p.amount ? Number(p.amount) : undefined
|
||||||
|
}))
|
||||||
|
// 合同文件回显
|
||||||
|
if (res.contract) {
|
||||||
|
contractFile.value = {
|
||||||
|
name: '合同文件',
|
||||||
|
url: res.contract_url || res.contract,
|
||||||
|
file_name: res.contract
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交方法
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const mappedItems = items.value.map((it) => ({
|
||||||
|
sku_id: it.sku_id,
|
||||||
|
vin: it.vin || '',
|
||||||
|
mileage: it.mileage,
|
||||||
|
model_snapshot: it.model_snapshot,
|
||||||
|
color_interior_code: it.color_interior_code,
|
||||||
|
color_interior_snapshot: it.color_interior_snapshot,
|
||||||
|
color_exterior_code: it.color_exterior_code,
|
||||||
|
color_exterior_snapshot: it.color_exterior_snapshot,
|
||||||
|
unit_price: wrapMoney(it.unit_price, (it as any).unit_price_currency, '单价'),
|
||||||
|
handling_fee: wrapMoney(it.handling_fee, (it as any).helper_fee_currency, '手续费'),
|
||||||
|
fob_transport_fee: wrapMoney(
|
||||||
|
it.fob_transport_fee ?? (it as any).fob_fee,
|
||||||
|
(it as any).fob_fee_currency,
|
||||||
|
'FOB运输费'
|
||||||
|
),
|
||||||
|
port_misc_fee: wrapMoney(
|
||||||
|
it.port_misc_fee ?? (it as any).port_fee,
|
||||||
|
(it as any).port_fee_currency,
|
||||||
|
'港杂费'
|
||||||
|
),
|
||||||
|
retrofit_fee: wrapMoney((it as any).retrofit_fee, (it as any).modify_fee_currency, '改装费'),
|
||||||
|
modify_list: it.modify_list,
|
||||||
|
total_price: wrapMoney(it.total_price, (it as any).total_price_currency, '总价'),
|
||||||
|
official_price: wrapMoney(
|
||||||
|
(it as any).official_price ?? (it as any).guide_price,
|
||||||
|
(it as any).guide_price_currency,
|
||||||
|
'官方指导价'
|
||||||
|
),
|
||||||
|
discount_price: wrapMoney(
|
||||||
|
(it as any).discount_price ?? (it as any).discount,
|
||||||
|
(it as any).discount_currency,
|
||||||
|
'优惠额'
|
||||||
|
),
|
||||||
|
listing_price: wrapMoney(it.listing_price, (it as any).listing_price_currency, '挂牌价'),
|
||||||
|
reduction_price: wrapMoney(it.reduction_price, (it as any).reduction_price_currency, '二手减价')
|
||||||
|
}))
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
...baseForm,
|
||||||
|
veh_list: mappedItems,
|
||||||
|
account_list: paymentItems.value
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { message } = await CrmService.addStock(payload as any)
|
||||||
|
ElMessage.success(message || '保存成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = '/crmpc/stocking/stocking_list'
|
||||||
|
}, 1000)
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error('保存失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听器
|
||||||
|
watch(
|
||||||
|
() => baseForm.contract_exchange_rate_currency,
|
||||||
|
(newCurrency) => {
|
||||||
|
if (newCurrency) {
|
||||||
|
baseForm.contract_exchange_rate = getCurrencyRate(newCurrency)
|
||||||
|
validateContractRate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => baseForm.contract_exchange_rate,
|
||||||
|
(newCurrency) => {
|
||||||
|
if (newCurrency) {
|
||||||
|
validateContractRate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
items,
|
||||||
|
(val) => {
|
||||||
|
val.forEach((it: any, index: number) => {
|
||||||
|
const profit = calcProfit(it)
|
||||||
|
if (items.value[index]) items.value[index].profit = isNaN(profit) ? 0 : Number(profit.toFixed(2))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 合计到岸价 = 所有单价相加
|
||||||
|
const sum = (val || []).reduce((acc: number, cur: any) => {
|
||||||
|
const n = cur?.unit_price === undefined || cur?.unit_price === null || cur?.unit_price === '' ? 0 : Number(cur.unit_price)
|
||||||
|
return acc + (isNaN(n) ? 0 : n)
|
||||||
|
}, 0)
|
||||||
|
baseForm.total_cif = Number(sum.toFixed(2))
|
||||||
|
|
||||||
|
// 同步合计币种为第一行单价币种（若有）
|
||||||
|
if (items.value.length > 0) {
|
||||||
|
const c = items.value[0]?.unit_price_currency
|
||||||
|
if (c) baseForm.total_cif_currency = c
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
// 初始化方法
|
||||||
|
const initializeForm = async () => {
|
||||||
|
await Promise.all([
|
||||||
|
getcustomer(),
|
||||||
|
loadCurrencyOptions(),
|
||||||
|
getgetChannel(),
|
||||||
|
getarea(),
|
||||||
|
getmodification(),
|
||||||
|
loadColorOptions(),
|
||||||
|
loadAccountOptions(),
|
||||||
|
loadPortOptions(),
|
||||||
|
loadDictOptions()
|
||||||
|
])
|
||||||
|
|
||||||
|
// 设置默认汇率
|
||||||
|
baseForm.contract_exchange_rate = getCurrencyRate('USD')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 数据
|
||||||
|
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,
|
||||||
|
newItem,
|
||||||
|
|
||||||
|
// 收款项方法
|
||||||
|
addPaymentItem,
|
||||||
|
removePaymentItem,
|
||||||
|
newPaymentItem,
|
||||||
|
|
||||||
|
// 客户选择方法
|
||||||
|
openCustomerDialog,
|
||||||
|
getCustomerList,
|
||||||
|
handleCustomerSizeChange,
|
||||||
|
handleCustomerCurrentChange,
|
||||||
|
chooseCustomer,
|
||||||
|
|
||||||
|
// 车辆选择方法
|
||||||
|
openVehicleDialog,
|
||||||
|
getVehicleList,
|
||||||
|
handleVehicleSizeChange,
|
||||||
|
handleVehicleCurrentChange,
|
||||||
|
chooseVehicle
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -67,5 +67,71 @@ export const asyncRoutes: AppRouteRecord[] = [
|
|||||||
title: '回收站',
|
title: '回收站',
|
||||||
isHide: true
|
isHide: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 备货单相关路由
|
||||||
|
{
|
||||||
|
path: '/crmpc/stocking/stocking_list',
|
||||||
|
name: 'StockingList',
|
||||||
|
component: 'crmpc/stocking/stocking_list',
|
||||||
|
meta: {
|
||||||
|
title: '备货单列表',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/crmpc/stocking/Add',
|
||||||
|
name: 'StockingAdd',
|
||||||
|
component: 'crmpc/stocking/Add',
|
||||||
|
meta: {
|
||||||
|
title: '创建备货单',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/crmpc/stocking/show',
|
||||||
|
name: 'StockingShow',
|
||||||
|
component: 'crmpc/stocking/show',
|
||||||
|
meta: {
|
||||||
|
title: '备货单详情',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/crmpc/stocking/final_add',
|
||||||
|
name: 'StockingFinalAdd',
|
||||||
|
component: 'crmpc/stocking/final_add',
|
||||||
|
meta: {
|
||||||
|
title: '最终备货单',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/crmpc/stocking/final_show',
|
||||||
|
name: 'StockingFinalShow',
|
||||||
|
component: 'crmpc/stocking/final_show',
|
||||||
|
meta: {
|
||||||
|
title: '最终备货单详情',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//审批详情
|
||||||
|
{
|
||||||
|
path: '/crmpc/stocking/stocking_auth_detil',
|
||||||
|
name: 'StockingAuth',
|
||||||
|
component: 'crmpc/stocking/stocking_auth_detil',
|
||||||
|
meta: {
|
||||||
|
title: '最终备货单详情',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 审批流程添加
|
||||||
|
{
|
||||||
|
path: '/admin/approval/approval_add',
|
||||||
|
name: 'approvalAdd',
|
||||||
|
component: 'admin/approval/approval_add',
|
||||||
|
meta: {
|
||||||
|
title: '审批流程添加',
|
||||||
|
isHide: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -41,6 +41,12 @@ export const staticRoutes: AppRouteRecordRaw[] = [
|
|||||||
component: () => import('@/views/auth/feishu-callback.vue'),
|
component: () => import('@/views/auth/feishu-callback.vue'),
|
||||||
meta: { title: '飞书回调', noLogin: true, isHideTab: true }
|
meta: { title: '飞书回调', noLogin: true, isHideTab: true }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/auth/signature/mobile',
|
||||||
|
name: 'SignatureMobile',
|
||||||
|
component: () => import('@views/auth/signature/mobile.vue'),
|
||||||
|
meta: { title: '电子签名', isHideTab: true, noLogin: true, setTheme: true }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/exception',
|
path: '/exception',
|
||||||
component: Home,
|
component: Home,
|
||||||
|
|||||||
@@ -62,7 +62,13 @@ export enum RoutesAlias {
|
|||||||
UserCenter = '/system/user-center', // 用户中心
|
UserCenter = '/system/user-center', // 用户中心
|
||||||
inquirySystem = '/admin/inquiry_system', // 询单系统
|
inquirySystem = '/admin/inquiry_system', // 询单系统
|
||||||
customer = '/admin/customer', // 管理端客户列表
|
customer = '/admin/customer', // 管理端客户列表
|
||||||
customeraudit = '/admin/customer/customeraudit' // 管理端待审客户列表
|
customeraudit = '/admin/customer/customeraudit', // 管理端待审客户列表
|
||||||
|
// 备货单相关路由
|
||||||
|
StockingList = '/crmpc/stocking/stocking_list', // 备货单列表
|
||||||
|
StockingAdd = '/crmpc/stocking/Add', // 创建备货单
|
||||||
|
StockingShow = '/crmpc/stocking/show', // 备货单详情
|
||||||
|
StockingFinalAdd = '/crmpc/stocking/final_add', // 最终备货单添加
|
||||||
|
StockingFinalShow = '/crmpc/stocking/final_show' // 最终备货单详情
|
||||||
}
|
}
|
||||||
|
|
||||||
// 主页路由
|
// 主页路由
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<div class="color-page">
|
||||||
|
<div class="color-toolbar boxshadow">
|
||||||
|
<div class="color-search-group">
|
||||||
|
<el-form-item label="关键字:" label-width="70px">
|
||||||
|
<el-input
|
||||||
|
style="min-width: 120px"
|
||||||
|
v-model="keyword"
|
||||||
|
placeholder="请输入关键字"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="getColorList"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxshadow">
|
||||||
|
<ElRow>
|
||||||
|
<div style="width: 12px"></div>
|
||||||
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
||||||
|
<ElButton @click="addfn()" v-ripple v-if="hasAuth('approval_list@add')" type="primary">
|
||||||
|
新增审核流程
|
||||||
|
</ElButton>
|
||||||
|
</ElCol>
|
||||||
|
</ElRow>
|
||||||
|
<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="name" min-width="120" />
|
||||||
|
<ElTableColumn label="标识" prop="type" width="120" />
|
||||||
|
<ElTableColumn label="状态" prop="status" width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<ElTag :type="scope.row.is_active ? 'success' : 'info'">
|
||||||
|
{{ scope.row.is_active ? '启用' : '停用' }}
|
||||||
|
</ElTag>
|
||||||
|
</template>
|
||||||
|
</ElTableColumn>
|
||||||
|
<ElTableColumn label="创建时间" prop="created_at" min-width="160" />
|
||||||
|
<ElTableColumn fixed="right" label="操作" width="200px">
|
||||||
|
<template #default="scope">
|
||||||
|
<ElRow>
|
||||||
|
<el-button link @click="showDialog('edit', scope.row)">编辑</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
link
|
||||||
|
@click="deleteColor(scope.row)"
|
||||||
|
v-if="hasAuth('approval_list@destroy')"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</ElRow>
|
||||||
|
</template>
|
||||||
|
</ElTableColumn>
|
||||||
|
</template>
|
||||||
|
</ArtTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑对话框 -->
|
||||||
|
<ElDialog v-model="dialogVisible" title="新增审批流程" align-center width="600px">
|
||||||
|
<ElForm ref="formRef" :model="form" :rules="rules" label-width="100px" class="form">
|
||||||
|
<ElFormItem label="名称" prop="name">
|
||||||
|
<ElInput v-model="form.name" placeholder="请输入名称" />
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="标识" prop="type">
|
||||||
|
<ElInput v-model="form.type" placeholder="请输入标识" />
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="超时时间" prop="timeout_hours">
|
||||||
|
<ElInput v-model="form.timeout_hours" placeholder="请输入超时时间" >
|
||||||
|
<template #suffix>
|
||||||
|
<span>h</span>
|
||||||
|
</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="超时动作" prop="timeout_action">
|
||||||
|
<el-select v-model="form.timeout_action" placeholder="请选择颜色类型" style="width: 100%">
|
||||||
|
<el-option label="外观颜色" :value="1" />
|
||||||
|
<el-option label="内饰颜色" :value="2" />
|
||||||
|
</el-select>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="状态">
|
||||||
|
<ElSwitch v-model="form.is_active" :active-value="1" :inactive-value="0" />
|
||||||
|
</ElFormItem>
|
||||||
|
</ElForm>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||||||
|
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ElDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus'
|
||||||
|
import { manageService } from '@/api/adminApi'
|
||||||
|
import { useAuth } from '@/composables/useAuth'
|
||||||
|
import { router } from '@/router'
|
||||||
|
const { hasAuth } = useAuth()
|
||||||
|
defineOptions({ name: 'VehicleColor' })
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const loading = ref(false)
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const dialogType = ref('add')
|
||||||
|
const formRef = ref<FormInstance>()
|
||||||
|
const keyword = ref<string>('')
|
||||||
|
const typeFilter = ref<number | undefined>(undefined)
|
||||||
|
const statusFilter = ref<number | undefined>(undefined)
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const form = reactive<any>({
|
||||||
|
name: '',
|
||||||
|
type: '',
|
||||||
|
timeout_hours: '',
|
||||||
|
timeout_action: '',
|
||||||
|
is_active: 1
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const rules = reactive<FormRules>({
|
||||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 分页数据
|
||||||
|
const pagination = reactive({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref<any[]>([])
|
||||||
|
const tableRef = ref()
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
getColorList()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听搜索条件变化
|
||||||
|
watch([keyword, typeFilter, statusFilter], () => {
|
||||||
|
pagination.currentPage = 1
|
||||||
|
getColorList()
|
||||||
|
})
|
||||||
|
// 新增按钮点击
|
||||||
|
const addfn = () => {
|
||||||
|
router.push('/admin/approval/approval_add')
|
||||||
|
}
|
||||||
|
// 获取颜色列表
|
||||||
|
const getColorList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const { currentPage, pageSize } = pagination
|
||||||
|
const params = {
|
||||||
|
current: currentPage,
|
||||||
|
size: pageSize,
|
||||||
|
keyword: keyword.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const { records, current, size, total } = await manageService.getstocklist(params)
|
||||||
|
tableData.value = records || []
|
||||||
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取颜色列表失败:', error)
|
||||||
|
ElMessage.error('获取颜色列表失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置搜索条件
|
||||||
|
const resetSearch = () => {
|
||||||
|
keyword.value = ''
|
||||||
|
typeFilter.value = undefined
|
||||||
|
statusFilter.value = undefined
|
||||||
|
pagination.currentPage = 1
|
||||||
|
getColorList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理分页变化
|
||||||
|
const handleSizeChange = (newPageSize: number) => {
|
||||||
|
pagination.pageSize = newPageSize
|
||||||
|
getColorList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCurrentChange = (newCurrentPage: number) => {
|
||||||
|
pagination.currentPage = newCurrentPage
|
||||||
|
getColorList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示对话框
|
||||||
|
const showDialog = (type: string, row?: any) => {
|
||||||
|
router.push(`/admin/approval/approval_edit?id=${row.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const deleteColor = (row: any) => {
|
||||||
|
ElMessageBox.confirm('确定删除该审核流程吗？', '删除确认', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'error'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const { message } = await manageService.stockapprovaldelete({ id: row.id })
|
||||||
|
ElMessage.success(message)
|
||||||
|
getColorList()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
ElMessage.error('删除失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return
|
||||||
|
await formEl.validate(async (valid) => {
|
||||||
|
if (!valid) return
|
||||||
|
try {
|
||||||
|
// 新增
|
||||||
|
const { message } = await manageService.stockapproval(form)
|
||||||
|
ElMessage.success(message)
|
||||||
|
dialogVisible.value = false
|
||||||
|
getColorList()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('操作失败:', error)
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-table__empty-block) {
|
||||||
|
height: 100% !important;
|
||||||
|
min-height: 200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-page {
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 20px 20px;
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-search-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-col2 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -349,7 +349,8 @@
|
|||||||
dict_code: typeForm.dict_code,
|
dict_code: typeForm.dict_code,
|
||||||
dict_name: typeForm.dict_name,
|
dict_name: typeForm.dict_name,
|
||||||
description: typeForm.description,
|
description: typeForm.description,
|
||||||
status: typeForm.status
|
status: typeForm.status,
|
||||||
|
category_id: typeForm.category_id
|
||||||
})
|
})
|
||||||
ElMessage.success(message)
|
ElMessage.success(message)
|
||||||
} else {
|
} else {
|
||||||
@@ -358,6 +359,7 @@
|
|||||||
dict_code: typeForm.dict_code,
|
dict_code: typeForm.dict_code,
|
||||||
dict_name: typeForm.dict_name,
|
dict_name: typeForm.dict_name,
|
||||||
description: typeForm.description,
|
description: typeForm.description,
|
||||||
|
category_id: typeForm.category_id,
|
||||||
status: typeForm.status
|
status: typeForm.status
|
||||||
})
|
})
|
||||||
ElMessage.success(message)
|
ElMessage.success(message)
|
||||||
|
|||||||
@@ -116,6 +116,19 @@
|
|||||||
<ElFormItem label="邮箱" prop="email">
|
<ElFormItem label="邮箱" prop="email">
|
||||||
<ElInput v-model="form.email" :disabled="!isEdit" />
|
<ElInput v-model="form.email" :disabled="!isEdit" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
<ElFormItem label="签名" prop="signature" class="right-input">
|
||||||
|
<template v-if="form.signature_pic_full">
|
||||||
|
<img :src="form.signature_pic_full" class="signature-img" />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="signature-qrcode">
|
||||||
|
<qrcode-vue :value="qrcodeUrl" :size="120" level="M" />
|
||||||
|
<div class="qrcode-tip">手机扫码进行签名</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-button @click="handleSignature" type="primary">签名</el-button>
|
||||||
|
<el-input type="hidden" v-model="form.signature" />
|
||||||
|
</ElFormItem>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
<!-- <ElRow>
|
<!-- <ElRow>
|
||||||
<ElFormItem
|
<ElFormItem
|
||||||
@@ -218,6 +231,8 @@
|
|||||||
import { UserService } from '@/api/usersApi'
|
import { UserService } from '@/api/usersApi'
|
||||||
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||||||
import { useUserStore } from '@/store/modules/user'
|
import { useUserStore } from '@/store/modules/user'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import QrcodeVue from 'qrcode.vue'
|
||||||
const { uploadHeaders } = useUploadHeaders()
|
const { uploadHeaders } = useUploadHeaders()
|
||||||
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
||||||
defineOptions({ name: 'UserCenter' })
|
defineOptions({ name: 'UserCenter' })
|
||||||
@@ -277,6 +292,22 @@
|
|||||||
// await getarea()
|
// await getarea()
|
||||||
await getuserInfo()
|
await getuserInfo()
|
||||||
})
|
})
|
||||||
|
const qrcodeUrl = computed(() => {
|
||||||
|
const userId = form.value?.id || userInfo.value?.id || ''
|
||||||
|
const base = location.origin
|
||||||
|
const token = (useUserStore() as any).accessToken || ''
|
||||||
|
const params = new URLSearchParams({ userId: String(userId) })
|
||||||
|
if (token) params.append('token', token)
|
||||||
|
return `${base}/auth/signature/mobile?${params.toString()}`
|
||||||
|
})
|
||||||
|
const handleSignature = async () => {
|
||||||
|
const userId = form.value?.id || userInfo.value?.id || ''
|
||||||
|
const base = location.origin
|
||||||
|
const token = (useUserStore() as any).accessToken || ''
|
||||||
|
const params = new URLSearchParams({ userId: String(userId) })
|
||||||
|
if (token) params.append('token', token)
|
||||||
|
window.location.href = `${base}/auth/signature/mobile?${params.toString()}`
|
||||||
|
}
|
||||||
const edit = async () => {
|
const edit = async () => {
|
||||||
if (isEdit.value) {
|
if (isEdit.value) {
|
||||||
const res = await UserService.editUserInfo(form.value)
|
const res = await UserService.editUserInfo(form.value)
|
||||||
@@ -328,7 +359,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.qrcode-radio-group .el-form-item__content){
|
:deep(.qrcode-radio-group .el-form-item__content) {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
@@ -337,7 +368,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.qrcode-img{
|
.qrcode-img {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
}
|
}
|
||||||
@@ -372,7 +403,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// background: var(--art-main-bg-color);
|
// background: var(--art-main-bg-color);
|
||||||
background: linear-gradient(180deg, #E9F0FF 0%, #FFFFFF 67.9%);
|
background: linear-gradient(180deg, #e9f0ff 0%, #ffffff 67.9%);
|
||||||
|
|
||||||
border-radius: $box-radius;
|
border-radius: $box-radius;
|
||||||
.avatar {
|
.avatar {
|
||||||
|
|||||||
@@ -36,11 +36,11 @@
|
|||||||
<div class="form">
|
<div class="form">
|
||||||
<!-- 登录方式切换 tab -->
|
<!-- 登录方式切换 tab -->
|
||||||
<div class="login-type-tabs">
|
<div class="login-type-tabs">
|
||||||
<!-- <span
|
<span
|
||||||
:class="{ active: activeLoginType === 'password' }"
|
:class="{ active: activeLoginType === 'password' }"
|
||||||
@click="activeLoginType = 'password'"
|
@click="activeLoginType = 'password'"
|
||||||
>账号密码登录</span
|
>账号密码登录</span
|
||||||
> -->
|
>
|
||||||
<span
|
<span
|
||||||
:class="{ active: activeLoginType === 'qrcode' }"
|
:class="{ active: activeLoginType === 'qrcode' }"
|
||||||
@click="activeLoginType = 'qrcode'"
|
@click="activeLoginType = 'qrcode'"
|
||||||
|
|||||||
@@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<div class="signature-page" :class="{ landscape }">
|
||||||
|
<div class="header">电子签名</div>
|
||||||
|
<div class="canvas-wrap">
|
||||||
|
<canvas
|
||||||
|
ref="canvasRef"
|
||||||
|
class="canvas"
|
||||||
|
@touchstart.prevent="onStart"
|
||||||
|
@touchmove.prevent="onMove"
|
||||||
|
@touchend.prevent="onEnd"
|
||||||
|
@mousedown.prevent="onMouseDown"
|
||||||
|
@mousemove.prevent="onMouseMove"
|
||||||
|
@mouseup.prevent="onMouseUp"
|
||||||
|
></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar">
|
||||||
|
<el-button @click="clearCanvas">清空</el-button>
|
||||||
|
<el-button @click="toggleLandscape">横屏</el-button>
|
||||||
|
<el-button type="primary" :loading="submitting" @click="saveSignature">保存</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="tip">请在画布上手写签名，然后点击保存</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useUserStore } from '@/store/modules/user'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const userId = route.query.userId as string | undefined
|
||||||
|
const userStore = useUserStore()
|
||||||
|
// 优先使用URL传入的token，否则取当前应用内的token
|
||||||
|
const urlToken = route.query.token as string | undefined
|
||||||
|
const effectiveToken = urlToken || userStore.accessToken
|
||||||
|
const { uploadHeaders } = useUploadHeaders()
|
||||||
|
|
||||||
|
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||||
|
const ctx = ref<CanvasRenderingContext2D | null>(null)
|
||||||
|
const drawing = ref(false)
|
||||||
|
const submitting = ref(false)
|
||||||
|
const landscape = ref(false)
|
||||||
|
|
||||||
|
const resizeCanvas = () => {
|
||||||
|
const canvas = canvasRef.value
|
||||||
|
if (!canvas) return
|
||||||
|
const dpr = window.devicePixelRatio || 1
|
||||||
|
let width = Math.min(window.innerWidth - 32, 800)
|
||||||
|
let height = Math.round(width * 0.5)
|
||||||
|
if (landscape.value && window.innerHeight > 0) {
|
||||||
|
// 横屏时尽量占满高度
|
||||||
|
const h = Math.min(window.innerHeight - 120, 500)
|
||||||
|
height = h
|
||||||
|
width = Math.round(h * 2)
|
||||||
|
}
|
||||||
|
canvas.style.width = width + 'px'
|
||||||
|
canvas.style.height = height + 'px'
|
||||||
|
canvas.width = Math.floor(width * dpr)
|
||||||
|
canvas.height = Math.floor(height * dpr)
|
||||||
|
const c = canvas.getContext('2d')!
|
||||||
|
c.scale(dpr, dpr)
|
||||||
|
c.lineWidth = 3
|
||||||
|
c.lineCap = 'round'
|
||||||
|
c.lineJoin = 'round'
|
||||||
|
c.strokeStyle = '#111'
|
||||||
|
ctx.value = c
|
||||||
|
// 背景白色
|
||||||
|
c.fillStyle = '#fff'
|
||||||
|
c.fillRect(0, 0, width, height)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
resizeCanvas()
|
||||||
|
window.addEventListener('resize', resizeCanvas)
|
||||||
|
})
|
||||||
|
|
||||||
|
const getPoint = (e: TouchEvent | MouseEvent) => {
|
||||||
|
const canvas = canvasRef.value!
|
||||||
|
const rect = canvas.getBoundingClientRect()
|
||||||
|
let clientX = 0
|
||||||
|
let clientY = 0
|
||||||
|
if (e instanceof TouchEvent) {
|
||||||
|
const t = e.touches[0] || e.changedTouches[0]
|
||||||
|
clientX = t.clientX
|
||||||
|
clientY = t.clientY
|
||||||
|
} else {
|
||||||
|
clientX = (e as MouseEvent).clientX
|
||||||
|
clientY = (e as MouseEvent).clientY
|
||||||
|
}
|
||||||
|
return { x: clientX - rect.left, y: clientY - rect.top }
|
||||||
|
}
|
||||||
|
|
||||||
|
const onStart = (e: TouchEvent) => {
|
||||||
|
drawing.value = true
|
||||||
|
const p = getPoint(e)
|
||||||
|
ctx.value!.beginPath()
|
||||||
|
ctx.value!.moveTo(p.x, p.y)
|
||||||
|
}
|
||||||
|
const onMove = (e: TouchEvent) => {
|
||||||
|
if (!drawing.value) return
|
||||||
|
const p = getPoint(e)
|
||||||
|
ctx.value!.lineTo(p.x, p.y)
|
||||||
|
ctx.value!.stroke()
|
||||||
|
}
|
||||||
|
const onEnd = () => {
|
||||||
|
drawing.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseDown = (e: MouseEvent) => onStart(e as any)
|
||||||
|
const onMouseMove = (e: MouseEvent) => onMove(e as any)
|
||||||
|
const onMouseUp = () => onEnd()
|
||||||
|
|
||||||
|
const clearCanvas = () => {
|
||||||
|
resizeCanvas()
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataURLToFile = (dataURL: string, filename: string) => {
|
||||||
|
const arr = dataURL.split(',')
|
||||||
|
const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/png'
|
||||||
|
const bstr = atob(arr[1])
|
||||||
|
let n = bstr.length
|
||||||
|
const u8arr = new Uint8Array(n)
|
||||||
|
while (n--) u8arr[n] = bstr.charCodeAt(n)
|
||||||
|
return new File([u8arr], filename, { type: mime })
|
||||||
|
}
|
||||||
|
|
||||||
|
const uploadUrl = `${import.meta.env.VITE_API_URL}/ticket/upload?scene=user_signature`
|
||||||
|
|
||||||
|
const requestFullscreen = async (el: HTMLElement) => {
|
||||||
|
const anyEl = el as any
|
||||||
|
if (anyEl.requestFullscreen) return anyEl.requestFullscreen()
|
||||||
|
if (anyEl.webkitRequestFullscreen) return anyEl.webkitRequestFullscreen()
|
||||||
|
if (anyEl.msRequestFullscreen) return anyEl.msRequestFullscreen()
|
||||||
|
}
|
||||||
|
|
||||||
|
const lockOrientationLandscape = async () => {
|
||||||
|
const anyScr = screen as any
|
||||||
|
if (anyScr.orientation && anyScr.orientation.lock) {
|
||||||
|
try {
|
||||||
|
await anyScr.orientation.lock('landscape')
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleLandscape = async () => {
|
||||||
|
landscape.value = !landscape.value
|
||||||
|
if (landscape.value) {
|
||||||
|
await requestFullscreen(document.documentElement)
|
||||||
|
await lockOrientationLandscape()
|
||||||
|
}
|
||||||
|
setTimeout(resizeCanvas, 200)
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveSignature = async () => {
|
||||||
|
if (!userId) {
|
||||||
|
ElMessage.error('缺少用户信息')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
submitting.value = true
|
||||||
|
const canvas = canvasRef.value!
|
||||||
|
const dataUrl = canvas.toDataURL('image/png')
|
||||||
|
const file = dataURLToFile(dataUrl, `signature_${userId}_${Date.now()}.png`)
|
||||||
|
|
||||||
|
const form = new FormData()
|
||||||
|
form.append('file', file)
|
||||||
|
|
||||||
|
const headers: Record<string, string> = { ...(uploadHeaders.value || {}) }
|
||||||
|
if (effectiveToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${effectiveToken}`
|
||||||
|
}
|
||||||
|
const res = await fetch(uploadUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: form
|
||||||
|
})
|
||||||
|
const json = await res.json()
|
||||||
|
if (json.code !== 200) throw new Error(json.message || '上传失败')
|
||||||
|
|
||||||
|
// 将签名保存到个人信息（假设 crmuseredit 接受 signature 和 signature_pic_full 字段）
|
||||||
|
await CrmService.crmuseredit({
|
||||||
|
id: userId,
|
||||||
|
signature: json.data.file_name,
|
||||||
|
signature_pic_full: json.data.file_url
|
||||||
|
})
|
||||||
|
|
||||||
|
ElMessage.success('签名已保存')
|
||||||
|
// 完成后可提示返回或自动关闭
|
||||||
|
setTimeout(() => {
|
||||||
|
if (window.history.length > 1) window.history.back()
|
||||||
|
}, 800)
|
||||||
|
} catch (e: any) {
|
||||||
|
ElMessage.error(e?.message || '保存失败')
|
||||||
|
} finally {
|
||||||
|
submitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.signature-page {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.canvas-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.canvas {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 6px;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
text-align: center;
|
||||||
|
color: #909399;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,149 @@
|
|||||||
|
<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="order_no" min-width="140" />
|
||||||
|
<ElTableColumn label="阿里订单号/PN号" prop="pi_no" min-width="160" />
|
||||||
|
<ElTableColumn label="客户名称" prop="customer_snapshot" min-width="120" />
|
||||||
|
<ElTableColumn label="客户来源" prop="customer_source_snapshot" min-width="120" />
|
||||||
|
<ElTableColumn label="业务员" prop="salesperson_snapshot" min-width="100" />
|
||||||
|
<ElTableColumn label="日期" prop="created_at" 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="handleView1(scope.row)">查看终版</el-button>
|
||||||
|
</ElRow>
|
||||||
|
</template>
|
||||||
|
</ElTableColumn>
|
||||||
|
</template>
|
||||||
|
</ArtTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { router } from '@/router'
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useAuth } from '@/composables/useAuth'
|
||||||
|
|
||||||
|
const { hasAuth } = useAuth()
|
||||||
|
|
||||||
|
|
||||||
|
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 { currentPage, pageSize } = pagination
|
||||||
|
const params = {
|
||||||
|
current: currentPage,
|
||||||
|
size: pageSize,
|
||||||
|
is_final: 1, // 只获取备货单，非终版
|
||||||
|
keyword: keyword.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const { records, current, size, total } = await CrmService.getStockList(params)
|
||||||
|
tableData.value = records || []
|
||||||
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取列表失败:', error)
|
||||||
|
} 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 handleView1 = (row: any) => {
|
||||||
|
router.push({
|
||||||
|
path: '/crmpc/stocking/final_show',
|
||||||
|
query: { id: row.id } // 可带客户名等参数
|
||||||
|
})
|
||||||
|
// 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,625 @@
|
|||||||
|
<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="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="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="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="60px">
|
||||||
|
<ElInput v-model="item.port_fee" disabled>
|
||||||
|
<template #append>{{ item.port_fee_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="8">
|
||||||
|
<ElFormItem label="利润" label-width="52px">
|
||||||
|
<ElInput v-model="item.profit" disabled>
|
||||||
|
<template #append>{{ item.profit_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="8">
|
||||||
|
<ElFormItem label="车架号" label-width="70px">
|
||||||
|
<ElInput v-model.number="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
|
||||||
|
>
|
||||||
|
<div v-for="(p, idx) in payments" :key="idx">
|
||||||
|
<ElRow :gutter="12">
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款国"><ElInput v-model="p.remit_country" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="日期"><ElInput v-model="p.date" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="币种"><ElInput v-model="p.currency" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="账户"><ElInput v-model="p.account" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款人"><ElInput v-model="p.payer" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="金额"><ElInput v-model="p.amount" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 上传合同 -->
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="form-title">
|
||||||
|
<span class="border"></span>
|
||||||
|
<span class="title">上传合同</span>
|
||||||
|
</div>
|
||||||
|
<div class="file-preview">
|
||||||
|
<div v-if="contractFile" class="contract-file">
|
||||||
|
<div v-if="isImageFile(contractFile)" class="image-preview">
|
||||||
|
<img
|
||||||
|
:src="contractFile.url"
|
||||||
|
:alt="contractFile.name"
|
||||||
|
class="preview-image"
|
||||||
|
@click="previewImage(contractFile)"
|
||||||
|
/>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="text" size="small" @click="previewImage(contractFile)">
|
||||||
|
预览
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="document-preview">
|
||||||
|
<div class="file-icon">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
</div>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="primary" size="small" @click="downloadFile(contractFile)">
|
||||||
|
下载
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-file">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
<span>暂无合同文件</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const route = useRoute()
|
||||||
|
const stocking_id = route.query.id
|
||||||
|
const stockingInfo = ref<any>({})
|
||||||
|
|
||||||
|
// 回显视图模型，字段与模板一致
|
||||||
|
const header = reactive({ order_no: '', salesman: '' })
|
||||||
|
const base = reactive({
|
||||||
|
pn_no: '',
|
||||||
|
date: '',
|
||||||
|
close_date: '',
|
||||||
|
channel: '',
|
||||||
|
customer_name: '',
|
||||||
|
client_country: '',
|
||||||
|
total_cif: '',
|
||||||
|
total_cif_currency: '',
|
||||||
|
contract_rate: ''
|
||||||
|
})
|
||||||
|
const items = ref<any[]>([])
|
||||||
|
const ship = reactive({
|
||||||
|
customs: '',
|
||||||
|
plan: '',
|
||||||
|
method: '',
|
||||||
|
domestic_port: '',
|
||||||
|
terms: '',
|
||||||
|
latest_arrival: ''
|
||||||
|
})
|
||||||
|
const payments = ref<any[]>([])
|
||||||
|
|
||||||
|
// 合同文件
|
||||||
|
const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
|
||||||
|
|
||||||
|
const toMoneyView = (m: any) => ({
|
||||||
|
amount: m?.amount ?? '',
|
||||||
|
currency: m?.currency ?? ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//获取详情并映射到回显模型
|
||||||
|
const getdetilfn = async () => {
|
||||||
|
const res = await CrmService.getStockDetail({ id: stocking_id })
|
||||||
|
stockingInfo.value = res
|
||||||
|
// 头部
|
||||||
|
header.order_no = res?.order_no || res?.pi_no || ''
|
||||||
|
header.salesman = res?.salesperson_snapshot || res?.salesman || res?.salesman_name || res?.user?.name || ''
|
||||||
|
// 基础信息
|
||||||
|
base.pn_no = res?.pi_no || ''
|
||||||
|
base.date = res?.biz_date || ''
|
||||||
|
base.close_date = res?.clearance_country_snapshot || ''
|
||||||
|
base.channel = res?.customer_source_snapshot || res?.customer_source || ''
|
||||||
|
base.customer_name = res?.customer_snapshot || res?.customer_name || ''
|
||||||
|
base.client_country = res?.customer_country_snapshot || res?.customer_country || ''
|
||||||
|
// 订单明细
|
||||||
|
const list = Array.isArray(res?.veh_list) ? res.veh_list : []
|
||||||
|
items.value = list.map((it: any) => {
|
||||||
|
const unit = toMoneyView(it?.unit_price)
|
||||||
|
const total = toMoneyView(it?.total_price)
|
||||||
|
const guide = toMoneyView(it?.official_price)
|
||||||
|
const discount = toMoneyView(it?.discount_price)
|
||||||
|
const helper = toMoneyView(it?.handling_fee)
|
||||||
|
const fob = toMoneyView(it?.fob_transport_fee)
|
||||||
|
const port = toMoneyView(it?.port_misc_fee)
|
||||||
|
const profit = toMoneyView(it?.profit)
|
||||||
|
return {
|
||||||
|
model: it?.model_snapshot || '',
|
||||||
|
vin: it?.vin || '',
|
||||||
|
color_out: it?.color_exterior_snapshot || '',
|
||||||
|
color_in: it?.color_interior_snapshot || '',
|
||||||
|
modify: (Array.isArray(it?.modify_list) ? it.modify_list : [])
|
||||||
|
.map((m: any) => m?.option_name_snapshot)
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('、'),
|
||||||
|
modify_fee: it?.retrofit_fee?.amount ?? '',
|
||||||
|
modify_fee_currency: it?.retrofit_fee?.currency ?? '',
|
||||||
|
fob_fee: fob.amount,
|
||||||
|
fob_fee_currency: fob.currency,
|
||||||
|
unit_price: unit.amount,
|
||||||
|
unit_price_currency: unit.currency,
|
||||||
|
total_price: total.amount,
|
||||||
|
total_price_currency: total.currency,
|
||||||
|
guide_price: guide.amount,
|
||||||
|
guide_price_currency: guide.currency,
|
||||||
|
discount: discount.amount,
|
||||||
|
discount_currency: discount.currency,
|
||||||
|
helper_fee: helper.amount,
|
||||||
|
helper_fee_currency: helper.currency,
|
||||||
|
domestic_freight: it?.domestic_freight?.amount ?? '',
|
||||||
|
domestic_freight_currency: it?.domestic_freight?.currency ?? '',
|
||||||
|
port_fee: port.amount,
|
||||||
|
port_fee_currency: port.currency,
|
||||||
|
profit: profit.amount,
|
||||||
|
profit_currency: profit.currency
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 运输详情
|
||||||
|
ship.customs = res?.declarant_name || ''
|
||||||
|
ship.plan = res?.eta_ship_date || ''
|
||||||
|
ship.method = res?.shipping_method_snapshot || ''
|
||||||
|
ship.domestic_port = res?.domestic_port_snapshot || ''
|
||||||
|
ship.terms = `${res?.trade_term_snapshot || ''} / ${res?.clearance_port_snapshot || ''}`.replace(
|
||||||
|
/^\s*\/\s*$/,
|
||||||
|
''
|
||||||
|
)
|
||||||
|
ship.latest_arrival = res?.latest_arrival_date || ''
|
||||||
|
// 合计与汇率
|
||||||
|
base.total_cif = res?.cif_total_amount?.amount ?? ''
|
||||||
|
base.total_cif_currency = res?.cif_total_amount?.currency || ''
|
||||||
|
base.contract_rate = res?.contract_exchange_rate || res?.contract_rate || ''
|
||||||
|
// 计划收款（全部展示）
|
||||||
|
payments.value = (Array.isArray(res?.account_list) ? res.account_list : []).map((p: any) => ({
|
||||||
|
remit_country: p?.remit_country_name_snapshot || '',
|
||||||
|
date: p?.remit_date || '',
|
||||||
|
currency: p?.currency_name_snapshot || p?.currency_code || '',
|
||||||
|
account: p?.account_name_snapshot || '',
|
||||||
|
payer: p?.remitter_name || '',
|
||||||
|
amount: p?.amount ?? ''
|
||||||
|
}))
|
||||||
|
// 合同文件
|
||||||
|
if (res?.contract) {
|
||||||
|
contractFile.value = {
|
||||||
|
name: '合同文件',
|
||||||
|
url: res.contract_url || res.contract,
|
||||||
|
file_name: res.contract
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 判断是否为图片文件
|
||||||
|
const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 检查文件名
|
||||||
|
if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查file_name字段
|
||||||
|
if (file.file_name && file.file_name.startsWith('image/')) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查URL中的文件扩展名（去除查询参数）
|
||||||
|
if (file.url) {
|
||||||
|
const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
|
||||||
|
if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
const previewImage = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 创建图片预览弹窗
|
||||||
|
const imagePreview = document.createElement('div')
|
||||||
|
imagePreview.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const image = document.createElement('img')
|
||||||
|
image.src = file.url
|
||||||
|
image.alt = file.name
|
||||||
|
image.style.cssText = `
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||||
|
`
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('div')
|
||||||
|
closeBtn.innerHTML = '×'
|
||||||
|
closeBtn.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10000;
|
||||||
|
`
|
||||||
|
|
||||||
|
imagePreview.appendChild(image)
|
||||||
|
imagePreview.appendChild(closeBtn)
|
||||||
|
document.body.appendChild(imagePreview)
|
||||||
|
|
||||||
|
// 点击关闭
|
||||||
|
const closePreview = () => {
|
||||||
|
document.body.removeChild(imagePreview)
|
||||||
|
}
|
||||||
|
|
||||||
|
imagePreview.addEventListener('click', closePreview)
|
||||||
|
closeBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
closePreview()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ESC键关闭
|
||||||
|
const handleKeydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
closePreview()
|
||||||
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const downloadFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.url
|
||||||
|
link.download = file.name
|
||||||
|
link.target = '_blank'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('下载失败:', error)
|
||||||
|
ElMessage.error('下载失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getdetilfn()
|
||||||
|
})
|
||||||
|
</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); }
|
||||||
|
|
||||||
|
.file-preview {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-file {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
object-fit: contain;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: #409eff;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file i {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,619 @@
|
|||||||
|
<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="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="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="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="60px">
|
||||||
|
<ElInput v-model="item.port_fee" disabled>
|
||||||
|
<template #append>{{ item.port_fee_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="8">
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
<div v-for="(p, idx) in payments" :key="idx">
|
||||||
|
<ElRow :gutter="12">
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款国"><ElInput v-model="p.remit_country" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="日期"><ElInput v-model="p.date" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="币种"><ElInput v-model="p.currency" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="账户"><ElInput v-model="p.account" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款人"><ElInput v-model="p.payer" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="金额"><ElInput v-model="p.amount" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 上传合同 -->
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="form-title">
|
||||||
|
<span class="border"></span>
|
||||||
|
<span class="title">上传合同</span>
|
||||||
|
</div>
|
||||||
|
<div class="file-preview">
|
||||||
|
<div v-if="contractFile" class="contract-file">
|
||||||
|
<div v-if="isImageFile(contractFile)" class="image-preview">
|
||||||
|
<img
|
||||||
|
:src="contractFile.url"
|
||||||
|
:alt="contractFile.name"
|
||||||
|
class="preview-image"
|
||||||
|
@click="previewImage(contractFile)"
|
||||||
|
/>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="text" size="small" @click="previewImage(contractFile)">
|
||||||
|
预览
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="document-preview">
|
||||||
|
<div class="file-icon">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
</div>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="primary" size="small" @click="downloadFile(contractFile)">
|
||||||
|
下载
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-file">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
<span>暂无合同文件</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const route = useRoute()
|
||||||
|
const stocking_id = route.query.id
|
||||||
|
const stockingInfo = ref<any>({})
|
||||||
|
|
||||||
|
// 回显视图模型，字段与模板一致
|
||||||
|
const header = reactive({ order_no: '', salesman: '' })
|
||||||
|
const base = reactive({
|
||||||
|
pn_no: '',
|
||||||
|
date: '',
|
||||||
|
close_date: '',
|
||||||
|
channel: '',
|
||||||
|
customer_name: '',
|
||||||
|
client_country: '',
|
||||||
|
total_cif: '',
|
||||||
|
total_cif_currency: '',
|
||||||
|
contract_rate: ''
|
||||||
|
})
|
||||||
|
const items = ref<any[]>([])
|
||||||
|
const ship = reactive({
|
||||||
|
customs: '',
|
||||||
|
plan: '',
|
||||||
|
method: '',
|
||||||
|
domestic_port: '',
|
||||||
|
terms: '',
|
||||||
|
latest_arrival: ''
|
||||||
|
})
|
||||||
|
const payments = ref<any[]>([])
|
||||||
|
|
||||||
|
// 合同文件
|
||||||
|
const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
|
||||||
|
|
||||||
|
const toMoneyView = (m: any) => ({
|
||||||
|
amount: m?.amount ?? '',
|
||||||
|
currency: m?.currency ?? ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//获取详情并映射到回显模型
|
||||||
|
const getdetilfn = async () => {
|
||||||
|
const res = await CrmService.getStockDetail({ id: stocking_id })
|
||||||
|
stockingInfo.value = res
|
||||||
|
// 头部
|
||||||
|
header.order_no = res?.order_no || res?.pi_no || ''
|
||||||
|
header.salesman = res?.salesperson_snapshot || res?.salesman || res?.salesman_name || res?.user?.name || ''
|
||||||
|
// 基础信息
|
||||||
|
base.pn_no = res?.pi_no || ''
|
||||||
|
base.date = res?.biz_date || ''
|
||||||
|
base.close_date = res?.clearance_country_snapshot || ''
|
||||||
|
base.channel = res?.customer_source_snapshot || res?.customer_source || ''
|
||||||
|
base.customer_name = res?.customer_snapshot || res?.customer_name || ''
|
||||||
|
base.client_country = res?.customer_country_snapshot || res?.customer_country || ''
|
||||||
|
// 订单明细
|
||||||
|
const list = Array.isArray(res?.veh_list) ? res.veh_list : []
|
||||||
|
items.value = list.map((it: any) => {
|
||||||
|
const unit = toMoneyView(it?.unit_price)
|
||||||
|
const total = toMoneyView(it?.total_price)
|
||||||
|
const guide = toMoneyView(it?.official_price)
|
||||||
|
const discount = toMoneyView(it?.discount_price)
|
||||||
|
const helper = toMoneyView(it?.handling_fee)
|
||||||
|
const fob = toMoneyView(it?.fob_transport_fee)
|
||||||
|
const port = toMoneyView(it?.port_misc_fee)
|
||||||
|
const profit = toMoneyView(it?.profit)
|
||||||
|
return {
|
||||||
|
model: it?.model_snapshot || '',
|
||||||
|
color_out: it?.color_exterior_snapshot || '',
|
||||||
|
color_in: it?.color_interior_snapshot || '',
|
||||||
|
modify: (Array.isArray(it?.modify_list) ? it.modify_list : [])
|
||||||
|
.map((m: any) => m?.option_name_snapshot)
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('、'),
|
||||||
|
modify_fee: it?.retrofit_fee?.amount ?? '',
|
||||||
|
modify_fee_currency: it?.retrofit_fee?.currency ?? '',
|
||||||
|
fob_fee: fob.amount,
|
||||||
|
fob_fee_currency: fob.currency,
|
||||||
|
unit_price: unit.amount,
|
||||||
|
unit_price_currency: unit.currency,
|
||||||
|
total_price: total.amount,
|
||||||
|
total_price_currency: total.currency,
|
||||||
|
guide_price: guide.amount,
|
||||||
|
guide_price_currency: guide.currency,
|
||||||
|
discount: discount.amount,
|
||||||
|
discount_currency: discount.currency,
|
||||||
|
helper_fee: helper.amount,
|
||||||
|
helper_fee_currency: helper.currency,
|
||||||
|
domestic_freight: it?.domestic_freight?.amount ?? '',
|
||||||
|
domestic_freight_currency: it?.domestic_freight?.currency ?? '',
|
||||||
|
port_fee: port.amount,
|
||||||
|
port_fee_currency: port.currency,
|
||||||
|
profit: profit.amount,
|
||||||
|
profit_currency: profit.currency
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 运输详情
|
||||||
|
ship.customs = res?.declarant_name || ''
|
||||||
|
ship.plan = res?.eta_ship_date || ''
|
||||||
|
ship.method = res?.shipping_method_snapshot || ''
|
||||||
|
ship.domestic_port = res?.domestic_port_snapshot || ''
|
||||||
|
ship.terms = `${res?.trade_term_snapshot || ''} / ${res?.clearance_port_snapshot || ''}`.replace(
|
||||||
|
/^\s*\/\s*$/,
|
||||||
|
''
|
||||||
|
)
|
||||||
|
ship.latest_arrival = res?.latest_arrival_date || ''
|
||||||
|
// 合计与汇率
|
||||||
|
base.total_cif = res?.cif_total_amount?.amount ?? ''
|
||||||
|
base.total_cif_currency = res?.cif_total_amount?.currency || ''
|
||||||
|
base.contract_rate = res?.contract_exchange_rate || res?.contract_rate || ''
|
||||||
|
// 计划收款（全部展示）
|
||||||
|
payments.value = (Array.isArray(res?.account_list) ? res.account_list : []).map((p: any) => ({
|
||||||
|
remit_country: p?.remit_country_name_snapshot || '',
|
||||||
|
date: p?.remit_date || '',
|
||||||
|
currency: p?.currency_name_snapshot || p?.currency_code || '',
|
||||||
|
account: p?.account_name_snapshot || '',
|
||||||
|
payer: p?.remitter_name || '',
|
||||||
|
amount: p?.amount ?? ''
|
||||||
|
}))
|
||||||
|
// 合同文件
|
||||||
|
if (res?.contract) {
|
||||||
|
contractFile.value = {
|
||||||
|
name: '合同文件',
|
||||||
|
url: res.contract_url || res.contract,
|
||||||
|
file_name: res.contract
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 判断是否为图片文件
|
||||||
|
const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 检查文件名
|
||||||
|
if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查file_name字段
|
||||||
|
if (file.file_name && file.file_name.startsWith('image/')) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查URL中的文件扩展名（去除查询参数）
|
||||||
|
if (file.url) {
|
||||||
|
const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
|
||||||
|
if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
const previewImage = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 创建图片预览弹窗
|
||||||
|
const imagePreview = document.createElement('div')
|
||||||
|
imagePreview.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const image = document.createElement('img')
|
||||||
|
image.src = file.url
|
||||||
|
image.alt = file.name
|
||||||
|
image.style.cssText = `
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||||
|
`
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('div')
|
||||||
|
closeBtn.innerHTML = '×'
|
||||||
|
closeBtn.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10000;
|
||||||
|
`
|
||||||
|
|
||||||
|
imagePreview.appendChild(image)
|
||||||
|
imagePreview.appendChild(closeBtn)
|
||||||
|
document.body.appendChild(imagePreview)
|
||||||
|
|
||||||
|
// 点击关闭
|
||||||
|
const closePreview = () => {
|
||||||
|
document.body.removeChild(imagePreview)
|
||||||
|
}
|
||||||
|
|
||||||
|
imagePreview.addEventListener('click', closePreview)
|
||||||
|
closeBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
closePreview()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ESC键关闭
|
||||||
|
const handleKeydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
closePreview()
|
||||||
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const downloadFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.url
|
||||||
|
link.download = file.name
|
||||||
|
link.target = '_blank'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('下载失败:', error)
|
||||||
|
ElMessage.error('下载失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getdetilfn()
|
||||||
|
})
|
||||||
|
</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); }
|
||||||
|
|
||||||
|
.file-preview {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-file {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
object-fit: contain;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: #409eff;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file i {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
</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,179 @@
|
|||||||
|
<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="order_no" />
|
||||||
|
<ElTableColumn label="阿里订单号/PN号" prop="pi_no" />
|
||||||
|
<ElTableColumn label="客户名称" prop="customer_snapshot" />
|
||||||
|
<ElTableColumn label="客户来源" prop="customer_source_snapshot" />
|
||||||
|
<ElTableColumn label="业务员" prop="salesperson_snapshot" />
|
||||||
|
<ElTableColumn label="日期" prop="created_at" />
|
||||||
|
<ElTableColumn label="补充" prop="remark" />
|
||||||
|
<!-- <ElTableColumn label="状态" prop="status" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<ElTag type="success">备货完成</ElTag>
|
||||||
|
</template>
|
||||||
|
</ElTableColumn> -->
|
||||||
|
<ElTableColumn label="操作" fixed="right" min-width="120" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<ElRow :gutter="10" justify="center">
|
||||||
|
<el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="scope.row.is_use == 0"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="handleCreateRepair(scope.row)"
|
||||||
|
>创建终版</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-if="scope.row.is_use == 1"
|
||||||
|
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'
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useAuth } from '@/composables/useAuth'
|
||||||
|
|
||||||
|
const { hasAuth } = useAuth()
|
||||||
|
|
||||||
|
|
||||||
|
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 { currentPage, pageSize } = pagination
|
||||||
|
const params = {
|
||||||
|
current: currentPage,
|
||||||
|
size: pageSize,
|
||||||
|
is_final: 0, // 只获取备货单，非终版
|
||||||
|
keyword: keyword.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const { records, current, size, total } = await CrmService.getStockList(params)
|
||||||
|
tableData.value = records || []
|
||||||
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取列表失败:', error)
|
||||||
|
} 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({
|
||||||
|
path: '/crmpc/stocking/show',
|
||||||
|
query: { id: row.id } // 可带客户名等参数
|
||||||
|
})
|
||||||
|
// TODO: 跳转或弹窗查看备货单
|
||||||
|
}
|
||||||
|
const handleView1 = (row: any) => {
|
||||||
|
router.push({
|
||||||
|
path: '/crmpc/stocking/final_show',
|
||||||
|
query: { id: row.object_id } // 可带客户名等参数
|
||||||
|
})
|
||||||
|
// router.push('/crmpc/stocking/final_show')
|
||||||
|
// TODO: 跳转或弹窗查看备货单
|
||||||
|
}
|
||||||
|
const handleCreateRepair = (row: any) => {
|
||||||
|
router.push({
|
||||||
|
path: '/crmpc/stocking/final_add',
|
||||||
|
query: { id: row.id } // 可带客户名等参数
|
||||||
|
})
|
||||||
|
// 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>
|
||||||
|
|
||||||
+263
-539
@@ -12,7 +12,7 @@
|
|||||||
<ElForm :model="baseForm" class="base-form">
|
<ElForm :model="baseForm" class="base-form">
|
||||||
<ElRow :gutter="12">
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="阿里订单号/PN号">
|
<ElFormItem label="阿里订单号/PI号">
|
||||||
<ElInput v-model="baseForm.pi_no" placeholder="请输入阿里订单号/PN号" />
|
<ElInput v-model="baseForm.pi_no" placeholder="请输入阿里订单号/PN号" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
@@ -141,12 +141,12 @@
|
|||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="颜色/外饰" label-width="72px">
|
<ElFormItem label="颜色/外饰" label-width="72px">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="item.color_interior_snapshot"
|
v-model="item.color_exterior_snapshot"
|
||||||
filterable
|
filterable
|
||||||
placeholder="请选择内容"
|
placeholder="请选择内容"
|
||||||
@change="
|
@change="
|
||||||
(val) =>
|
(val) =>
|
||||||
(item.color_interior_code =
|
(item.color_exterior_code =
|
||||||
(wcolorOptions || []).find((x: any) => x.color_text === val)?.color_code ||
|
(wcolorOptions || []).find((x: any) => x.color_text === val)?.color_code ||
|
||||||
'')
|
'')
|
||||||
"
|
"
|
||||||
@@ -158,18 +158,18 @@
|
|||||||
:value="item.color_text"
|
:value="item.color_text"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
<ElInput v-model="item.color_interior_code" type="hidden" />
|
<ElInput v-model="item.color_exterior_code" type="hidden" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="颜色/内饰" label-width="72px">
|
<ElFormItem label="颜色/内饰" label-width="72px">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="item.color_exterior_snapshot"
|
v-model="item.color_interior_snapshot"
|
||||||
filterable
|
filterable
|
||||||
placeholder="请选择内容"
|
placeholder="请选择内容"
|
||||||
@change="
|
@change="
|
||||||
(val) =>
|
(val) =>
|
||||||
(item.color_exterior_code =
|
(item.color_interior_code =
|
||||||
(ncolorOptions || []).find((x: any) => x.color_text === val)?.color_code ||
|
(ncolorOptions || []).find((x: any) => x.color_text === val)?.color_code ||
|
||||||
'')
|
'')
|
||||||
"
|
"
|
||||||
@@ -181,7 +181,7 @@
|
|||||||
:value="item.color_text"
|
:value="item.color_text"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
<ElInput v-model="item.color_exterior_code" type="hidden" />
|
<ElInput v-model="item.color_interior_code" type="hidden" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="8">
|
<ElCol :span="8">
|
||||||
@@ -205,50 +205,15 @@
|
|||||||
:value="item.id"
|
:value="item.id"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
<ElInput v-model="item.modify_list" type="hidden" />
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
<ElRow :gutter="12">
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="改装费" label-width="60px">
|
<ElFormItem label="单价" label-width="45px">
|
||||||
<ElInput v-model.number="item.retrofit_fee" placeholder="请输入改装费">
|
<ElInput v-model="item.unit_price" placeholder="请输入单价">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="item.modify_fee_currency" style="width: 64px">
|
<ElSelect v-model="item.unit_price_currency" style="width: 61px">
|
||||||
<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 :span="4">
|
|
||||||
<ElFormItem label="FOB段运费" label-width="84px">
|
|
||||||
<ElInput v-model.number="item.fob_transport_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>
|
|
||||||
<ElInput v-model="item.fob_fee_currency_snapshot" type="hidden" />
|
|
||||||
</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
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -262,10 +227,10 @@
|
|||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="总价" label-width="52px">
|
<ElFormItem label="总价" label-width="45px">
|
||||||
<ElInput v-model.number="item.total_price" placeholder="请输入总价">
|
<ElInput v-model="item.total_price" placeholder="请输入总价">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="item.total_price_currency" style="width: 64px">
|
<ElSelect v-model="item.total_price_currency" style="width: 61px">
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -278,11 +243,11 @@
|
|||||||
<ElInput v-model="item.total_price_currency_snapshot" type="hidden" />
|
<ElInput v-model="item.total_price_currency_snapshot" type="hidden" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="5">
|
||||||
<ElFormItem label="官方指导价" label-width="85px">
|
<ElFormItem label="改装费" label-width="55px">
|
||||||
<ElInput v-model.number="item.official_price" placeholder="请输入官方指导价">
|
<ElInput v-model="item.retrofit_fee" placeholder="请输入改装费">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="item.guide_price_currency" style="width: 64px">
|
<ElSelect v-model="item.modify_fee_currency" style="width: 61px">
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -292,14 +257,14 @@
|
|||||||
</ElSelect>
|
</ElSelect>
|
||||||
</template>
|
</template>
|
||||||
</ElInput>
|
</ElInput>
|
||||||
<ElInput v-model="item.guide_price_currency_snapshot" type="hidden" />
|
<ElInput v-model="item.modify_fee_currency_snapshot" type="hidden" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="6">
|
||||||
<ElFormItem label="优惠" label-width="52px">
|
<ElFormItem label="FOB段运费" label-width="84px">
|
||||||
<ElInput v-model.number="item.discount_price" placeholder="请输入优惠额">
|
<ElInput v-model="item.fob_transport_fee" placeholder="请输入FOB段运费">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="item.discount_currency" style="width: 64px">
|
<ElSelect v-model="item.fob_fee_currency" style="width: 61px">
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -309,16 +274,14 @@
|
|||||||
</ElSelect>
|
</ElSelect>
|
||||||
</template>
|
</template>
|
||||||
</ElInput>
|
</ElInput>
|
||||||
<ElInput v-model="item.discount_currency_snapshot" type="hidden" />
|
<ElInput v-model="item.fob_fee_currency_snapshot" type="hidden" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
</ElRow>
|
<ElCol :span="5">
|
||||||
<ElRow :gutter="12">
|
|
||||||
<ElCol :span="4">
|
|
||||||
<ElFormItem label="手续费" label-width="60px">
|
<ElFormItem label="手续费" label-width="60px">
|
||||||
<ElInput v-model.number="item.handling_fee" placeholder="请输入手续费">
|
<ElInput v-model="item.handling_fee" placeholder="请输入手续费">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="item.helper_fee_currency" style="width: 64px">
|
<ElSelect v-model="item.helper_fee_currency" style="width: 61px">
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -331,28 +294,13 @@
|
|||||||
<ElInput v-model="item.helper_fee_currency_snapshot" type="hidden" />
|
<ElInput v-model="item.helper_fee_currency_snapshot" type="hidden" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<!-- <ElCol :span="4">
|
</ElRow>
|
||||||
<ElFormItem label="国内运费" label-width="72px">
|
<ElRow :gutter="12">
|
||||||
<ElInput v-model.number="item.domestic_freight" placeholder="请输入国内运费">
|
<ElCol :span="5">
|
||||||
<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>
|
|
||||||
<ElInput v-model="item.domestic_freight_currency_snapshot" type="hidden" />
|
|
||||||
</ElFormItem>
|
|
||||||
</ElCol> -->
|
|
||||||
<ElCol :span="4">
|
|
||||||
<ElFormItem label="港杂费" label-width="60px">
|
<ElFormItem label="港杂费" label-width="60px">
|
||||||
<ElInput v-model.number="item.port_misc_fee" placeholder="请输入港杂费">
|
<ElInput v-model="item.port_misc_fee" placeholder="请输入港杂费">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="item.port_fee_currency" style="width: 64px">
|
<ElSelect v-model="item.port_fee_currency" style="width: 61px">
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -366,12 +314,83 @@
|
|||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="利润" label-width="52px">
|
<ElFormItem label="里程" label-width="52px">
|
||||||
<ElSelect v-model="item.profit_type" placeholder="请选择" style="width: 100%">
|
<ElInput v-model="item.mileage" placeholder="请输入里程" />
|
||||||
<ElOption label="正在计算利润" value="calc" />
|
</ElFormItem>
|
||||||
<ElOption label="已确认" value="ok" />
|
</ElCol>
|
||||||
</ElSelect>
|
<ElCol :span="5" v-if="(item.mileage ?? 0) <= 0">
|
||||||
<ElInput v-model="item.profit_type_snapshot" type="hidden" />
|
<ElFormItem label="官方指导价" label-width="85px">
|
||||||
|
<ElInput v-model="item.official_price" placeholder="请输入官方指导价">
|
||||||
|
<template #append>
|
||||||
|
<ElSelect v-model="item.guide_price_currency" style="width: 61px">
|
||||||
|
<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 :span="5" v-else>
|
||||||
|
<ElFormItem label="挂牌价" label-width="55px">
|
||||||
|
<ElInput v-model="item.listing_price" placeholder="请输入挂牌价">
|
||||||
|
<template #append>
|
||||||
|
<ElSelect v-model="item.listing_price_currency" style="width: 61px">
|
||||||
|
<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 :span="6" v-if="(item.mileage ?? 0) <= 0">
|
||||||
|
<ElFormItem label="优惠" label-width="52px">
|
||||||
|
<ElInput v-model="item.discount_price" placeholder="请输入优惠额">
|
||||||
|
<template #append>
|
||||||
|
<ElSelect v-model="item.discount_currency" style="width: 61px">
|
||||||
|
<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 :span="6" v-else>
|
||||||
|
<ElFormItem label="二手减价" label-width="72px">
|
||||||
|
<ElInput v-model="item.reduction_price" placeholder="请输入二手减价">
|
||||||
|
<template #append>
|
||||||
|
<ElSelect v-model="item.reduction_price_currency" style="width: 61px">
|
||||||
|
<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>
|
||||||
|
<ElCol :span="4">
|
||||||
|
<ElFormItem label="利润" label-width="40px">
|
||||||
|
<ElInput v-model="item.profit" placeholder="正在计算利润" disabled>
|
||||||
|
<template #append> <span style="font-size: 11px">美元</span></template>
|
||||||
|
</ElInput>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
@@ -390,9 +409,9 @@
|
|||||||
<ElRow :gutter="12">
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="合计到岸价" label-width="85px">
|
<ElFormItem label="合计到岸价" label-width="85px">
|
||||||
<ElInput v-model.number="baseForm.total_cif" placeholder="请输入合计到岸价">
|
<ElInput v-model="baseForm.total_cif" placeholder="请输入合计到岸价">
|
||||||
<template #append>
|
<template #append>
|
||||||
<ElSelect v-model="baseForm.total_cif_currency" style="width: 64px">
|
<ElSelect v-model="baseForm.total_cif_currency" style="width: 61px">
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="c in currencyOptions"
|
v-for="c in currencyOptions"
|
||||||
:key="c.currency_code"
|
:key="c.currency_code"
|
||||||
@@ -407,7 +426,18 @@
|
|||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="合同汇率" label-width="70px">
|
<ElFormItem label="合同汇率" label-width="70px">
|
||||||
<ElInput v-model="baseForm.contract_exchange_rate" placeholder="请输入" />
|
<ElInput v-model="baseForm.contract_exchange_rate" placeholder="请输入">
|
||||||
|
<template #append>
|
||||||
|
<ElSelect v-model="baseForm.contract_exchange_rate_currency" style="width: 61px">
|
||||||
|
<ElOption
|
||||||
|
v-for="c in currencyOptions"
|
||||||
|
:key="c.currency_code"
|
||||||
|
:label="c.currency_name"
|
||||||
|
:value="c.currency_code"
|
||||||
|
/>
|
||||||
|
</ElSelect>
|
||||||
|
</template>
|
||||||
|
</ElInput>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
@@ -445,14 +475,14 @@
|
|||||||
@change="
|
@change="
|
||||||
(val) =>
|
(val) =>
|
||||||
(baseForm.shipping_method_snapshot =
|
(baseForm.shipping_method_snapshot =
|
||||||
(ncolorOptions || []).find((x: any) => x.id === val)?.item_label || '')
|
(transportOptions || []).find((x: any) => x.item_value === val)?.item_label || '')
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<ElOption
|
<ElOption
|
||||||
v-for="t in transportOptions"
|
v-for="t in transportOptions"
|
||||||
:key="t.id"
|
:key="t.item_value"
|
||||||
:label="t.item_label"
|
:label="t.item_label"
|
||||||
:value="t.id"
|
:value="t.item_value"
|
||||||
/>
|
/>
|
||||||
</ElSelect>
|
</ElSelect>
|
||||||
<ElInput v-model="baseForm.shipping_method_snapshot" type="hidden" />
|
<ElInput v-model="baseForm.shipping_method_snapshot" type="hidden" />
|
||||||
@@ -614,7 +644,7 @@
|
|||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="金额">
|
<ElFormItem label="金额">
|
||||||
<ElInput v-model.number="payment.amount" placeholder="请输入金额" />
|
<ElInput v-model="payment.amount" placeholder="请输入金额" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
@@ -635,10 +665,26 @@
|
|||||||
<span class="border"></span>
|
<span class="border"></span>
|
||||||
<span class="title">上传合同</span>
|
<span class="title">上传合同</span>
|
||||||
</div>
|
</div>
|
||||||
<ElUpload drag action="#" :auto-upload="false" :show-file-list="true" class="upload-box">
|
<el-upload
|
||||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
class="upload-box"
|
||||||
<div class="el-upload__text">拖拽文件到此处，或点击上传</div>
|
:action="actionImageUplode"
|
||||||
</ElUpload>
|
: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>
|
||||||
<div class="form-card">
|
<div class="form-card">
|
||||||
<!-- 底部信息 -->
|
<!-- 底部信息 -->
|
||||||
@@ -751,447 +797,82 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { Search } from '@element-plus/icons-vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
import { CrmService } from '@/api/crmApi'
|
|
||||||
import { commonService } from '@/api/commonApi'
|
|
||||||
import { vehicleService } from '@/api/vehicleApi'
|
|
||||||
import { StringDecoder } from 'string_decoder'
|
|
||||||
import { useUserStore } from '@/store/modules/user'
|
import { useUserStore } from '@/store/modules/user'
|
||||||
import { watch } from 'vue'
|
import { useStockingForm } from '@/composables/useStockingForm'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
const { getUserInfo } = useUserStore()
|
const { getUserInfo } = useUserStore()
|
||||||
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 {
|
||||||
const res = await CrmService.getCountry()
|
// 数据
|
||||||
countryOptions.value = res || []
|
baseForm,
|
||||||
}
|
items,
|
||||||
//改装项
|
paymentItems,
|
||||||
const getmodification = async () => {
|
contractFile,
|
||||||
const res = await commonService.getModificationSelect()
|
customerDialog,
|
||||||
modificationOptions.value = res || []
|
vehicleDialog,
|
||||||
}
|
|
||||||
//颜色下拉列表
|
// 选项数据
|
||||||
const loadColorOptions = async () => {
|
channelOptions,
|
||||||
try {
|
countryOptions,
|
||||||
const res = await commonService.getColorSelect({ type: 1 })
|
modificationOptions,
|
||||||
wcolorOptions.value = res
|
currencyOptions,
|
||||||
const response = await commonService.getColorSelect({ type: 2 })
|
accountOptions,
|
||||||
ncolorOptions.value = response
|
customerOptions,
|
||||||
} catch (error) {
|
portOptions,
|
||||||
console.error('获取颜色列表失败:', error)
|
portOptionsall,
|
||||||
ElMessage.error('获取颜色列表失败')
|
wcolorOptions,
|
||||||
}
|
ncolorOptions,
|
||||||
}
|
transportOptions,
|
||||||
//账户
|
trade_termsOptions,
|
||||||
const loadAccountOptions = async () => {
|
|
||||||
try {
|
// 上传相关
|
||||||
const res = await commonService.getAccountSelect()
|
actionImageUplode,
|
||||||
accountOptions.value = res
|
uploadHeaders,
|
||||||
} catch (error) {
|
|
||||||
console.error('获取账户列表失败:', error)
|
// 方法
|
||||||
ElMessage.error('获取账户列表失败')
|
initializeForm,
|
||||||
}
|
handleSubmit,
|
||||||
}
|
getCurrencyRate,
|
||||||
//币种
|
validateContractRate,
|
||||||
const loadCurrencyOptions = async () => {
|
wrapMoney,
|
||||||
try {
|
calcProfit,
|
||||||
const res = await commonService.getCurrencySelect()
|
|
||||||
currencyOptions.value = res
|
// 合同文件方法
|
||||||
} catch (error) {
|
isImageFile,
|
||||||
console.error('获取币种列表失败:', error)
|
beforeContractUpload,
|
||||||
ElMessage.error('获取币种列表失败')
|
handleContractUpload,
|
||||||
}
|
removeContractFile,
|
||||||
}
|
|
||||||
//港口
|
// 订单项方法
|
||||||
const loadPortOptions = async () => {
|
copyRow,
|
||||||
try {
|
addRowAfter,
|
||||||
const res = await commonService.getPortSelect({ scene: 'domestic' })
|
removeRow,
|
||||||
const resall = await commonService.getPortSelect({})
|
|
||||||
portOptions.value = res
|
// 收款项方法
|
||||||
portOptionsall.value = resall
|
addPaymentItem,
|
||||||
} catch (error) {
|
removePaymentItem,
|
||||||
console.error('获取港口列表失败:', error)
|
|
||||||
ElMessage.error('获取港口列表失败')
|
// 客户选择方法
|
||||||
}
|
openCustomerDialog,
|
||||||
}
|
getCustomerList,
|
||||||
//字典下拉框
|
handleCustomerSizeChange,
|
||||||
const transportOptions = ref<Array<any>>([])
|
handleCustomerCurrentChange,
|
||||||
const trade_termsOptions = ref<Array<any>>([])
|
chooseCustomer,
|
||||||
const loadDictOptions = async () => {
|
|
||||||
const response = await commonService.getDictSelect({ scope: '2,15' })
|
// 车辆选择方法
|
||||||
transportOptions.value = response.transport
|
openVehicleDialog,
|
||||||
trade_termsOptions.value = response.trade_terms
|
getVehicleList,
|
||||||
}
|
handleVehicleSizeChange,
|
||||||
|
handleVehicleCurrentChange,
|
||||||
|
chooseVehicle
|
||||||
|
} = useStockingForm(false) // isFinal = false
|
||||||
|
|
||||||
|
// 初始化表单
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
getcustomer()
|
await initializeForm()
|
||||||
await loadCurrencyOptions()
|
|
||||||
getgetChannel()
|
|
||||||
getarea()
|
|
||||||
getmodification()
|
|
||||||
loadColorOptions()
|
|
||||||
loadAccountOptions()
|
|
||||||
loadPortOptions()
|
|
||||||
loadDictOptions()
|
|
||||||
// 设置默认汇率
|
|
||||||
baseForm.contract_exchange_rate = getCurrencyRate('USD')
|
|
||||||
})
|
})
|
||||||
const getCurrencyRate = (code: string): string => {
|
|
||||||
try {
|
|
||||||
const found = (currencyOptions?.value || []).find((c: any) => c.currency_code === code)
|
|
||||||
return found?.rate || found?.exchange_rate || ''
|
|
||||||
} catch (e) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const baseForm = reactive({
|
|
||||||
pi_no: '',
|
|
||||||
biz_date: '',
|
|
||||||
clearance_country_id: '',
|
|
||||||
clearance_country_snapshot: '',
|
|
||||||
customer_source_id: '',
|
|
||||||
customer_source_snapshot: '',
|
|
||||||
customer_id: '',
|
|
||||||
customer_snapshot: '',
|
|
||||||
customer_country_id: '',
|
|
||||||
customer_country_snapshot: '',
|
|
||||||
declarant_name: '',
|
|
||||||
eta_ship_date: '',
|
|
||||||
shipping_method_id: '',
|
|
||||||
shipping_method_snapshot: '',
|
|
||||||
domestic_port_id: '',
|
|
||||||
domestic_port_snapshot: '',
|
|
||||||
trade_term_id: '',
|
|
||||||
trade_term_snapshot: '',
|
|
||||||
clearance_port_id: '',
|
|
||||||
clearance_port_snapshot: '',
|
|
||||||
latest_arrival_date: '',
|
|
||||||
contract_exchange_rate: '',
|
|
||||||
remark: '',
|
|
||||||
total_cif: undefined as number | undefined,
|
|
||||||
total_cif_currency: 'USD',
|
|
||||||
total_cif_currency_snapshot: '',
|
|
||||||
is_final: '0'
|
|
||||||
})
|
|
||||||
type ItemRow = {
|
|
||||||
sku_id: string
|
|
||||||
model_snapshot: string
|
|
||||||
color_interior_code: string
|
|
||||||
color_interior_snapshot: string
|
|
||||||
color_exterior_code: string
|
|
||||||
color_exterior_snapshot: string
|
|
||||||
unit_price: number | undefined
|
|
||||||
handling_fee: string
|
|
||||||
fob_transport_fee: number | undefined
|
|
||||||
port_misc_fee: string
|
|
||||||
retrofit_fee: string
|
|
||||||
total_price: number | undefined
|
|
||||||
official_price: number | undefined
|
|
||||||
discount_price: number | undefined
|
|
||||||
fob_fee: number | undefined
|
|
||||||
fob_fee_currency: string
|
|
||||||
fob_fee_currency_snapshot: string
|
|
||||||
helper_fee: number | undefined
|
|
||||||
helper_fee_currency: string
|
|
||||||
helper_fee_currency_snapshot: string
|
|
||||||
domestic_freight: number | undefined
|
|
||||||
domestic_freight_currency: string
|
|
||||||
domestic_freight_currency_snapshot: string
|
|
||||||
port_fee: number | undefined
|
|
||||||
port_fee_currency: string
|
|
||||||
port_fee_currency_snapshot: string
|
|
||||||
unit_price_currency: string
|
|
||||||
unit_price_currency_snapshot: string
|
|
||||||
total_price_currency: string
|
|
||||||
total_price_currency_snapshot: string
|
|
||||||
guide_price_currency: string
|
|
||||||
guide_price_currency_snapshot: string
|
|
||||||
discount: number | undefined
|
|
||||||
discount_currency: string
|
|
||||||
discount_currency_snapshot: string
|
|
||||||
contract_rate: number | undefined
|
|
||||||
profit_type: string
|
|
||||||
profit_type_snapshot: string
|
|
||||||
modify_ids: string[]
|
|
||||||
modify_list: Array<{ option_id: string; option_name_snapshot: string }>
|
|
||||||
modify_fee_currency: string
|
|
||||||
modify_fee_currency_snapshot: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const newItem = (): ItemRow => ({
|
|
||||||
sku_id: '',
|
|
||||||
model_snapshot: '',
|
|
||||||
color_interior_code: '',
|
|
||||||
color_interior_snapshot: '',
|
|
||||||
color_exterior_code: '',
|
|
||||||
color_exterior_snapshot: '',
|
|
||||||
unit_price: undefined,
|
|
||||||
handling_fee: '',
|
|
||||||
fob_transport_fee: undefined,
|
|
||||||
port_misc_fee: '',
|
|
||||||
retrofit_fee: '',
|
|
||||||
total_price: undefined,
|
|
||||||
official_price: undefined,
|
|
||||||
discount_price: undefined,
|
|
||||||
fob_fee: undefined,
|
|
||||||
fob_fee_currency: 'USD',
|
|
||||||
fob_fee_currency_snapshot: '',
|
|
||||||
helper_fee: undefined,
|
|
||||||
helper_fee_currency: 'USD',
|
|
||||||
helper_fee_currency_snapshot: '',
|
|
||||||
domestic_freight: undefined,
|
|
||||||
domestic_freight_currency: 'USD',
|
|
||||||
domestic_freight_currency_snapshot: '',
|
|
||||||
port_fee: undefined,
|
|
||||||
port_fee_currency: 'USD',
|
|
||||||
port_fee_currency_snapshot: '',
|
|
||||||
unit_price_currency: 'USD',
|
|
||||||
unit_price_currency_snapshot: '',
|
|
||||||
total_price_currency: 'USD',
|
|
||||||
total_price_currency_snapshot: '',
|
|
||||||
guide_price_currency: 'USD',
|
|
||||||
guide_price_currency_snapshot: '',
|
|
||||||
discount: undefined,
|
|
||||||
discount_currency: 'USD',
|
|
||||||
discount_currency_snapshot: '',
|
|
||||||
contract_rate: 7.16,
|
|
||||||
profit_type: 'calc',
|
|
||||||
profit_type_snapshot: '',
|
|
||||||
modify_ids: [],
|
|
||||||
modify_list: [],
|
|
||||||
modify_fee_currency: 'USD',
|
|
||||||
modify_fee_currency_snapshot: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const items = ref<ItemRow[]>([newItem()])
|
|
||||||
|
|
||||||
const copyRow = (idx: number) => {
|
|
||||||
const copied = JSON.parse(JSON.stringify(items.value[idx])) as ItemRow
|
|
||||||
copied.uid = Math.random().toString(36).slice(2)
|
|
||||||
items.value.splice(idx + 1, 0, copied)
|
|
||||||
}
|
|
||||||
const addRowAfter = (idx: number) => {
|
|
||||||
items.value.splice(idx + 1, 0, newItem())
|
|
||||||
}
|
|
||||||
const removeRow = (idx: number) => {
|
|
||||||
items.value.splice(idx, 1)
|
|
||||||
}
|
|
||||||
// 监听币种变化，自动更新汇率
|
|
||||||
watch(
|
|
||||||
() => items.value[0].unit_price_currency,
|
|
||||||
(newCurrency) => {
|
|
||||||
if (newCurrency) {
|
|
||||||
baseForm.contract_exchange_rate = getCurrencyRate(newCurrency)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
type PaymentItem = {
|
|
||||||
remit_country_id: string
|
|
||||||
remit_country_name_snapshot: string
|
|
||||||
remit_date: string
|
|
||||||
currency_code: string
|
|
||||||
currency_name_snapshot: string
|
|
||||||
account_id: string
|
|
||||||
account_name_snapshot: string
|
|
||||||
remitter_name: string
|
|
||||||
amount: number | undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
const newPaymentItem = (): PaymentItem => ({
|
|
||||||
remit_country_id: '',
|
|
||||||
remit_country_name_snapshot: '',
|
|
||||||
remit_date: '',
|
|
||||||
currency_code: '',
|
|
||||||
currency_name_snapshot: '',
|
|
||||||
account_id: '',
|
|
||||||
account_name_snapshot: '',
|
|
||||||
remitter_name: '',
|
|
||||||
amount: undefined
|
|
||||||
})
|
|
||||||
|
|
||||||
const paymentItems = ref<PaymentItem[]>([newPaymentItem()])
|
|
||||||
|
|
||||||
const addPaymentItem = () => {
|
|
||||||
paymentItems.value.push(newPaymentItem())
|
|
||||||
}
|
|
||||||
|
|
||||||
const removePaymentItem = (idx: number) => {
|
|
||||||
if (paymentItems.value.length > 1) {
|
|
||||||
paymentItems.value.splice(idx, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapMoney = (amount: any, currency: string, remark: string) => ({
|
|
||||||
currency: currency || '',
|
|
||||||
amount: amount === undefined || amount === null ? '' : String(amount),
|
|
||||||
rate: getCurrencyRate(currency),
|
|
||||||
remark
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
const mappedItems = items.value.map((it) => ({
|
|
||||||
sku_id: it.sku_id,
|
|
||||||
model_snapshot: it.model_snapshot,
|
|
||||||
color_interior_code: it.color_interior_code,
|
|
||||||
color_interior_snapshot: it.color_interior_snapshot,
|
|
||||||
color_exterior_code: it.color_exterior_code,
|
|
||||||
color_exterior_snapshot: it.color_exterior_snapshot,
|
|
||||||
unit_price: wrapMoney(it.unit_price, (it as any).unit_price_currency, '单价'),
|
|
||||||
handling_fee: wrapMoney(it.handling_fee, (it as any).helper_fee_currency, '手续费'),
|
|
||||||
fob_transport_fee: wrapMoney(
|
|
||||||
it.fob_transport_fee ?? (it as any).fob_fee,
|
|
||||||
(it as any).fob_fee_currency,
|
|
||||||
'FOB运输费'
|
|
||||||
),
|
|
||||||
port_misc_fee: wrapMoney(
|
|
||||||
it.port_misc_fee ?? (it as any).port_fee,
|
|
||||||
(it as any).port_fee_currency,
|
|
||||||
'港杂费'
|
|
||||||
),
|
|
||||||
retrofit_fee: wrapMoney((it as any).retrofit_fee, (it as any).modify_fee_currency, '单价'),
|
|
||||||
modify_list: it.modify_list,
|
|
||||||
total_price: wrapMoney(it.total_price, (it as any).total_price_currency, '总价'),
|
|
||||||
official_price: wrapMoney(
|
|
||||||
(it as any).official_price ?? (it as any).guide_price,
|
|
||||||
(it as any).guide_price_currency,
|
|
||||||
'官方指导价'
|
|
||||||
),
|
|
||||||
discount_price: wrapMoney(
|
|
||||||
(it as any).discount_price ?? (it as any).discount,
|
|
||||||
(it as any).discount_currency,
|
|
||||||
'优惠额'
|
|
||||||
)
|
|
||||||
}))
|
|
||||||
|
|
||||||
const payload = {
|
|
||||||
...baseForm,
|
|
||||||
veh_list: mappedItems,
|
|
||||||
account_list: paymentItems.value
|
|
||||||
}
|
|
||||||
console.log('submit payload', payload)
|
|
||||||
// const { message } = await CrmService.addStock(payload)
|
|
||||||
// ElMessage.success(message)
|
|
||||||
}
|
|
||||||
// 选择客户弹框逻辑
|
|
||||||
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_id = row.id || ''
|
|
||||||
baseForm.customer_snapshot = 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.sku_id = row.id || ''
|
|
||||||
target.model_snapshot = row.model_name || row.name || ''
|
|
||||||
// 回显颜色与指导价
|
|
||||||
target.color_exterior_code = row.color_exterior_code || ''
|
|
||||||
target.color_exterior_snapshot = row.color_exterior_text || ''
|
|
||||||
target.color_interior_code = row.color_interior_code || ''
|
|
||||||
target.color_interior_snapshot = row.color_interior_text || ''
|
|
||||||
target.official_price = row.msrp ?? target.official_price
|
|
||||||
if (row.currency) {
|
|
||||||
target.official_price_currency = row.currency
|
|
||||||
}
|
|
||||||
// 可按需带出更多字段回显
|
|
||||||
}
|
|
||||||
vehicleDialog.visible = false
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -1199,7 +880,7 @@
|
|||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
:deep(.el-select__selected-item span) {
|
:deep(.el-select__selected-item span) {
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
.form-title {
|
.form-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -1210,7 +891,6 @@
|
|||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
}
|
}
|
||||||
.stocking-add-page {
|
.stocking-add-page {
|
||||||
// background: var(--art-main-bg-color);
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1273,5 +953,49 @@
|
|||||||
.payment-item {
|
.payment-item {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.upload-box { width: 200px; }
|
.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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -32,12 +32,12 @@
|
|||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<ElTableColumn label="备货单编号" prop="stock_no" min-width="140" />
|
<ElTableColumn label="备货单编号" prop="order_no" min-width="140" />
|
||||||
<ElTableColumn label="阿里订单号/PN号" prop="order_no" min-width="160" />
|
<ElTableColumn label="阿里订单号/PN号" prop="pi_no" min-width="160" />
|
||||||
<ElTableColumn label="客户名称" prop="customer_name" min-width="120" />
|
<ElTableColumn label="客户名称" prop="customer_snapshot" min-width="120" />
|
||||||
<ElTableColumn label="客户来源" prop="customer_source" min-width="120" />
|
<ElTableColumn label="客户来源" prop="customer_source_snapshot" min-width="120" />
|
||||||
<ElTableColumn label="业务员" prop="salesman" min-width="100" />
|
<ElTableColumn label="业务员" prop="salesperson_snapshot" min-width="100" />
|
||||||
<ElTableColumn label="日期" prop="date" min-width="120" />
|
<ElTableColumn label="日期" prop="created_at" min-width="120" />
|
||||||
<ElTableColumn label="补充" prop="remark" min-width="160" />
|
<ElTableColumn label="补充" prop="remark" min-width="160" />
|
||||||
<ElTableColumn label="状态" prop="status" width="120">
|
<ElTableColumn label="状态" prop="status" width="120">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
@@ -47,13 +47,7 @@
|
|||||||
<ElTableColumn label="操作" fixed="right" min-width="220" align="center">
|
<ElTableColumn label="操作" fixed="right" min-width="220" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<ElRow :gutter="10" justify="center">
|
<ElRow :gutter="10" justify="center">
|
||||||
<el-button link type="primary" @click="handleView(scope.row)">查看备货单</el-button>
|
<el-button link type="primary" @click="handleView1(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>
|
</ElRow>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
@@ -64,7 +58,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { router } from '@/router'
|
import { router } from '@/router'
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useAuth } from '@/composables/useAuth'
|
||||||
|
|
||||||
|
const { hasAuth } = useAuth()
|
||||||
|
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const keyword = ref('')
|
const keyword = ref('')
|
||||||
@@ -84,20 +83,19 @@ import { router } from '@/router'
|
|||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
// 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
|
const { currentPage, pageSize } = pagination
|
||||||
const mock = Array.from({ length: 8 }).map((_, i) => ({
|
const params = {
|
||||||
id: i + 1,
|
current: currentPage,
|
||||||
stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
|
size: pageSize,
|
||||||
order_no: 'VCS28762JN2',
|
is_final: 1, // 只获取备货单，非终版
|
||||||
customer_name: 'Alicia',
|
keyword: keyword.value
|
||||||
customer_source: '广交会',
|
}
|
||||||
salesman: '王玉凯',
|
|
||||||
date: '2025-08-27',
|
const { records, current, size, total } = await CrmService.getStockList(params)
|
||||||
remark: 'XXXXXXXXXXXX',
|
tableData.value = records || []
|
||||||
status: 1,
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||||
}))
|
} catch (error) {
|
||||||
tableData.value = mock
|
console.error('获取列表失败:', error)
|
||||||
pagination.total = 24
|
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
@@ -114,20 +112,15 @@ import { router } from '@/router'
|
|||||||
|
|
||||||
const handleCreate = () => {
|
const handleCreate = () => {
|
||||||
// TODO: 跳转到创建备货单页面
|
// TODO: 跳转到创建备货单页面
|
||||||
router.push('/crmpc/stocking_list/Add')
|
router.push('/crmpc/stocking/Add')
|
||||||
}
|
|
||||||
const handleView = (row: any) => {
|
|
||||||
router.push('/crmpc/stocking_list/show')
|
|
||||||
// TODO: 跳转或弹窗查看备货单
|
|
||||||
}
|
}
|
||||||
const handleView1 = (row: any) => {
|
const handleView1 = (row: any) => {
|
||||||
router.push('/crmpc/stocking_list/final_show')
|
router.push({
|
||||||
|
path: '/crmpc/stocking/final_show',
|
||||||
|
query: { id: row.id } // 可带客户名等参数
|
||||||
|
})
|
||||||
// TODO: 跳转或弹窗查看备货单
|
// TODO: 跳转或弹窗查看备货单
|
||||||
}
|
}
|
||||||
const handleCreateRepair = (row: any) => {
|
|
||||||
router.push('/crmpc/stocking_list/final')
|
|
||||||
// TODO: 跳转创建维修保单
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -154,4 +147,3 @@ import { router } from '@/router'
|
|||||||
}
|
}
|
||||||
.clickable { cursor: pointer; }
|
.clickable { cursor: pointer; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
+474
-123
@@ -8,7 +8,7 @@
|
|||||||
<span>业务员：{{ header.salesman }}</span>
|
<span>业务员：{{ header.salesman }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ElButton type="primary" plain>打印整单</ElButton>
|
<ElButton type="primary" plain @click="printCurrent">打印整单</ElButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 基础信息 -->
|
<!-- 基础信息 -->
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="关闭日期">
|
<ElFormItem label="清关目的国">
|
||||||
<ElInput v-model="base.close_date" disabled />
|
<ElInput v-model="base.close_date" disabled />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
@@ -77,20 +77,6 @@
|
|||||||
</ElRow>
|
</ElRow>
|
||||||
|
|
||||||
<ElRow :gutter="12">
|
<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">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="单价" label-width="52px">
|
<ElFormItem label="单价" label-width="52px">
|
||||||
<ElInput v-model="item.unit_price" disabled>
|
<ElInput v-model="item.unit_price" disabled>
|
||||||
@@ -106,22 +92,19 @@
|
|||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="官方指导价" label-width="85px">
|
<ElFormItem label="改装费" label-width="60px">
|
||||||
<ElInput v-model="item.guide_price" disabled>
|
<ElInput v-model="item.modify_fee" disabled>
|
||||||
<template #append>{{ item.guide_price_currency }}</template>
|
<template #append>{{ item.modify_fee_currency }}</template>
|
||||||
</ElInput>
|
</ElInput>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="优惠" label-width="52px">
|
<ElFormItem label="FOB段运费" label-width="84px">
|
||||||
<ElInput v-model="item.discount" disabled>
|
<ElInput v-model="item.fob_fee" disabled>
|
||||||
<template #append>{{ item.discount_currency }}</template>
|
<template #append>{{ item.fob_fee_currency }}</template>
|
||||||
</ElInput>
|
</ElInput>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
</ElRow>
|
|
||||||
|
|
||||||
<ElRow :gutter="12">
|
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="手续费" label-width="60px">
|
<ElFormItem label="手续费" label-width="60px">
|
||||||
<ElInput v-model="item.helper_fee" disabled>
|
<ElInput v-model="item.helper_fee" disabled>
|
||||||
@@ -129,13 +112,6 @@
|
|||||||
</ElInput>
|
</ElInput>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</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">
|
<ElCol :span="4">
|
||||||
<ElFormItem label="港杂费" label-width="60px">
|
<ElFormItem label="港杂费" label-width="60px">
|
||||||
<ElInput v-model="item.port_fee" disabled>
|
<ElInput v-model="item.port_fee" disabled>
|
||||||
@@ -143,7 +119,47 @@
|
|||||||
</ElInput>
|
</ElInput>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElCol>
|
</ElCol>
|
||||||
|
</ElRow>
|
||||||
|
|
||||||
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="4">
|
<ElCol :span="4">
|
||||||
|
<ElFormItem label="里程" label-width="52px">
|
||||||
|
<ElInput v-model="item.mileage" disabled />
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<template v-if="(item.mileage ?? 0) <= 0">
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<ElCol :span="4">
|
||||||
|
<ElFormItem label="挂牌价" label-width="55px">
|
||||||
|
<ElInput v-model="item.listing_price" disabled>
|
||||||
|
<template #append>{{ item.listing_price_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="4">
|
||||||
|
<ElFormItem label="二手减价" label-width="72px">
|
||||||
|
<ElInput v-model="item.reduction_price" disabled>
|
||||||
|
<template #append>{{ item.reduction_price_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
</template>
|
||||||
|
<ElCol :span="8">
|
||||||
<ElFormItem label="利润" label-width="52px">
|
<ElFormItem label="利润" label-width="52px">
|
||||||
<ElInput v-model="item.profit" disabled>
|
<ElInput v-model="item.profit" disabled>
|
||||||
<template #append>{{ item.profit_currency }}</template>
|
<template #append>{{ item.profit_currency }}</template>
|
||||||
@@ -174,114 +190,364 @@
|
|||||||
<div class="boxshadow">
|
<div class="boxshadow">
|
||||||
<div class="form-title"><span class="border"></span><span class="title">运输详情</span></div>
|
<div class="form-title"><span class="border"></span><span class="title">运输详情</span></div>
|
||||||
<ElRow :gutter="12">
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="4"><ElFormItem label="清关人"><ElInput v-model="ship.customs" disabled /></ElFormItem></ElCol>
|
<ElCol :span="4"
|
||||||
<ElCol :span="4"><ElFormItem label="预计发送日"><ElInput v-model="ship.plan" disabled /></ElFormItem></ElCol>
|
><ElFormItem label="清关人"><ElInput v-model="ship.customs" disabled /></ElFormItem
|
||||||
<ElCol :span="4"><ElFormItem label="运输方式"><ElInput v-model="ship.method" disabled /></ElFormItem></ElCol>
|
></ElCol>
|
||||||
<ElCol :span="4"><ElFormItem label="国内收货港"><ElInput v-model="ship.domestic_port" disabled /></ElFormItem></ElCol>
|
<ElCol :span="4"
|
||||||
<ElCol :span="8"><ElFormItem label="贸易条款/清关目的港"><ElInput v-model="ship.terms" disabled /></ElFormItem></ElCol>
|
><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>
|
||||||
<ElRow :gutter="12">
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="6"><ElFormItem label="最迟到港时间"><ElInput v-model="ship.latest_arrival" disabled /></ElFormItem></ElCol>
|
<ElCol :span="6"
|
||||||
|
><ElFormItem label="最迟到港时间"
|
||||||
|
><ElInput v-model="ship.latest_arrival" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 计划收款信息 -->
|
<!-- 计划收款信息 -->
|
||||||
<div class="boxshadow">
|
<div class="boxshadow">
|
||||||
<div class="form-title"><span class="border"></span><span class="title">计划收款信息</span></div>
|
<div class="form-title"
|
||||||
<ElRow :gutter="12">
|
><span class="border"></span><span class="title">计划收款信息</span></div
|
||||||
<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>
|
<div v-for="(p, idx) in payments" :key="idx">
|
||||||
<ElCol :span="4"><ElFormItem label="币种"><ElInput v-model="pay.currency" disabled /></ElFormItem></ElCol>
|
<ElRow :gutter="12">
|
||||||
<ElCol :span="4"><ElFormItem label="账户"><ElInput v-model="pay.account" disabled /></ElFormItem></ElCol>
|
<ElCol :span="4"
|
||||||
<ElCol :span="4"><ElFormItem label="汇款人"><ElInput v-model="pay.payer" disabled /></ElFormItem></ElCol>
|
><ElFormItem label="汇款国"><ElInput v-model="p.remit_country" disabled /></ElFormItem
|
||||||
<ElCol :span="4"><ElFormItem label="金额"><ElInput v-model="pay.amount" disabled /></ElFormItem></ElCol>
|
></ElCol>
|
||||||
</ElRow>
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="日期"><ElInput v-model="p.date" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="币种"><ElInput v-model="p.currency" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="账户"><ElInput v-model="p.account" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款人"><ElInput v-model="p.payer" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="金额"><ElInput v-model="p.amount" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 上传合同 -->
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="form-title">
|
||||||
|
<span class="border"></span>
|
||||||
|
<span class="title">上传合同</span>
|
||||||
|
</div>
|
||||||
|
<div class="file-preview">
|
||||||
|
<div v-if="contractFile" class="contract-file">
|
||||||
|
<div v-if="isImageFile(contractFile)" class="image-preview">
|
||||||
|
<img
|
||||||
|
:src="contractFile.url"
|
||||||
|
:alt="contractFile.name"
|
||||||
|
class="preview-image"
|
||||||
|
@click="previewImage(contractFile)"
|
||||||
|
/>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="text" size="small" @click="previewImage(contractFile)">
|
||||||
|
预览
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="document-preview">
|
||||||
|
<div class="file-icon">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
</div>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="primary" size="small" @click="downloadFile(contractFile)">
|
||||||
|
下载
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-file">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
<span>暂无合同文件</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- PDF 预览弹窗 -->
|
||||||
|
<el-dialog v-model="pdf.visible" title="打印预览" width="80%" top="40px" :close-on-click-modal="false">
|
||||||
|
<div style="height: 70vh; display: flex; flex-direction: column; gap: 12px;">
|
||||||
|
<div style="display:flex; justify-content:flex-end; gap: 8px;">
|
||||||
|
<!-- <el-button type="primary" @click="print()">打印</el-button> -->
|
||||||
|
<el-button @click="download">下载</el-button>
|
||||||
|
</div>
|
||||||
|
<iframe
|
||||||
|
v-if="pdf.blobUrl || pdf.url"
|
||||||
|
ref="frameRef"
|
||||||
|
:src="pdf.blobUrl || pdf.url"
|
||||||
|
style="flex:1; width: 100%; border: 1px solid #eee; border-radius: 6px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const header = reactive({ order_no: 'HSAT-JN00010', salesman: '王玉杰' })
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { usePdfPreview } from '@/composables/usePdfPreview'
|
||||||
|
const { pdf, frameRef, openWithResponse, download, print, preparePreview } = usePdfPreview()
|
||||||
|
const printCurrent = async () => {
|
||||||
|
const res = await CrmService.printStock({ id: stocking_id })
|
||||||
|
openWithResponse(res)
|
||||||
|
preparePreview()
|
||||||
|
}
|
||||||
|
const route = useRoute()
|
||||||
|
const stocking_id = route.query.id
|
||||||
|
const stockingInfo = ref<any>({})
|
||||||
|
|
||||||
|
// 回显视图模型，字段与模板一致
|
||||||
|
const header = reactive({ order_no: '', salesman: '' })
|
||||||
const base = reactive({
|
const base = reactive({
|
||||||
pn_no: 'VCSC250827-JN1',
|
pn_no: '',
|
||||||
date: '2025-08-31',
|
date: '',
|
||||||
close_date: '',
|
close_date: '',
|
||||||
channel: '广交会',
|
channel: '',
|
||||||
customer_name: 'Alicia',
|
customer_name: '',
|
||||||
client_country: '埃赫',
|
client_country: '',
|
||||||
total_cif: '60,652.00',
|
total_cif: '',
|
||||||
total_cif_currency: '美元',
|
total_cif_currency: '',
|
||||||
contract_rate: '7.16'
|
contract_rate: ''
|
||||||
})
|
})
|
||||||
const items = ref([
|
const items = ref<any[]>([])
|
||||||
{
|
|
||||||
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({
|
const ship = reactive({
|
||||||
customs: '陌生人',
|
customs: '',
|
||||||
plan: '2025-08-28',
|
plan: '',
|
||||||
method: '滚装',
|
method: '',
|
||||||
domestic_port: '上海',
|
domestic_port: '',
|
||||||
terms: '贸易条款展示字段',
|
terms: '',
|
||||||
latest_arrival: '2025-09-03'
|
latest_arrival: ''
|
||||||
})
|
})
|
||||||
const pay = reactive({
|
const payments = ref<any[]>([])
|
||||||
remit_country: '汇款国',
|
|
||||||
date: '2025-08-28',
|
// 合同文件
|
||||||
currency: '美元',
|
const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
|
||||||
account: '中行1451',
|
|
||||||
payer: 'AMOTOR TECHNOLOGY CO., LIMITED/XTRANSFER LIMITED',
|
const toMoneyView = (m: any) => ({
|
||||||
amount: '15,000.00'
|
amount: m?.amount ?? '',
|
||||||
|
currency: m?.currency ?? ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//获取详情并映射到回显模型
|
||||||
|
const getdetilfn = async () => {
|
||||||
|
const res = await CrmService.getStockDetail({ id: stocking_id })
|
||||||
|
stockingInfo.value = res
|
||||||
|
// 头部
|
||||||
|
header.order_no = res?.order_no || res?.pi_no || ''
|
||||||
|
header.salesman = res?.salesperson_snapshot || res?.salesman || res?.salesman_name || res?.user?.name || ''
|
||||||
|
// 基础信息
|
||||||
|
base.pn_no = res?.pi_no || ''
|
||||||
|
base.date = res?.biz_date || ''
|
||||||
|
base.close_date = res?.clearance_country_snapshot || ''
|
||||||
|
base.channel = res?.customer_source_snapshot || res?.customer_source || ''
|
||||||
|
base.customer_name = res?.customer_snapshot || res?.customer_name || ''
|
||||||
|
base.client_country = res?.customer_country_snapshot || res?.customer_country || ''
|
||||||
|
// 订单明细
|
||||||
|
const list = Array.isArray(res?.veh_list) ? res.veh_list : []
|
||||||
|
items.value = list.map((it: any) => {
|
||||||
|
const unit = toMoneyView(it?.unit_price)
|
||||||
|
const total = toMoneyView(it?.total_price)
|
||||||
|
const guide = toMoneyView(it?.official_price)
|
||||||
|
const discount = toMoneyView(it?.discount_price)
|
||||||
|
const helper = toMoneyView(it?.handling_fee)
|
||||||
|
const fob = toMoneyView(it?.fob_transport_fee)
|
||||||
|
const port = toMoneyView(it?.port_misc_fee)
|
||||||
|
const profit = toMoneyView(it?.profit)
|
||||||
|
return {
|
||||||
|
model: it?.model_snapshot || '',
|
||||||
|
mileage: it?.mileage ?? 0,
|
||||||
|
color_out: it?.color_exterior_snapshot || '',
|
||||||
|
color_in: it?.color_interior_snapshot || '',
|
||||||
|
modify: (Array.isArray(it?.modify_list) ? it.modify_list : [])
|
||||||
|
.map((m: any) => m?.option_name_snapshot)
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('、'),
|
||||||
|
modify_fee: it?.retrofit_fee?.amount ?? '',
|
||||||
|
modify_fee_currency: it?.retrofit_fee?.currency ?? '',
|
||||||
|
fob_fee: fob.amount,
|
||||||
|
fob_fee_currency: fob.currency,
|
||||||
|
unit_price: unit.amount,
|
||||||
|
unit_price_currency: unit.currency,
|
||||||
|
total_price: total.amount,
|
||||||
|
total_price_currency: total.currency,
|
||||||
|
guide_price: guide.amount,
|
||||||
|
guide_price_currency: guide.currency,
|
||||||
|
discount: discount.amount,
|
||||||
|
discount_currency: discount.currency,
|
||||||
|
listing_price: it?.listing_price?.amount ?? '',
|
||||||
|
listing_price_currency: it?.listing_price?.currency ?? '',
|
||||||
|
reduction_price: it?.reduction_price?.amount ?? '',
|
||||||
|
reduction_price_currency: it?.reduction_price?.currency ?? '',
|
||||||
|
helper_fee: helper.amount,
|
||||||
|
helper_fee_currency: helper.currency,
|
||||||
|
domestic_freight: it?.domestic_freight?.amount ?? '',
|
||||||
|
domestic_freight_currency: it?.domestic_freight?.currency ?? '',
|
||||||
|
port_fee: port.amount,
|
||||||
|
port_fee_currency: port.currency,
|
||||||
|
profit: profit.amount,
|
||||||
|
profit_currency: profit.currency
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 运输详情
|
||||||
|
ship.customs = res?.declarant_name || ''
|
||||||
|
ship.plan = res?.eta_ship_date || ''
|
||||||
|
ship.method = res?.shipping_method_snapshot || ''
|
||||||
|
ship.domestic_port = res?.domestic_port_snapshot || ''
|
||||||
|
ship.terms = `${res?.trade_term_snapshot || ''} / ${res?.clearance_port_snapshot || ''}`.replace(
|
||||||
|
/^\s*\/\s*$/,
|
||||||
|
''
|
||||||
|
)
|
||||||
|
ship.latest_arrival = res?.latest_arrival_date || ''
|
||||||
|
// 合计与汇率
|
||||||
|
base.total_cif = res?.cif_total_amount?.amount ?? ''
|
||||||
|
base.total_cif_currency = res?.cif_total_amount?.currency || ''
|
||||||
|
base.contract_rate = res?.contract_exchange_rate || res?.contract_rate || ''
|
||||||
|
// 计划收款（全部展示）
|
||||||
|
payments.value = (Array.isArray(res?.account_list) ? res.account_list : []).map((p: any) => ({
|
||||||
|
remit_country: p?.remit_country_name_snapshot || '',
|
||||||
|
date: p?.remit_date || '',
|
||||||
|
currency: p?.currency_name_snapshot || p?.currency_code || '',
|
||||||
|
account: p?.account_name_snapshot || '',
|
||||||
|
payer: p?.remitter_name || '',
|
||||||
|
amount: p?.amount ?? ''
|
||||||
|
}))
|
||||||
|
// 合同文件
|
||||||
|
if (res?.contract) {
|
||||||
|
contractFile.value = {
|
||||||
|
name: '合同文件',
|
||||||
|
url: res.contract_url || res.contract,
|
||||||
|
file_name: res.contract
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 判断是否为图片文件
|
||||||
|
const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 检查文件名
|
||||||
|
if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查file_name字段
|
||||||
|
if (file.file_name && file.file_name.startsWith('image/')) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查URL中的文件扩展名（去除查询参数）
|
||||||
|
if (file.url) {
|
||||||
|
const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
|
||||||
|
if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
const previewImage = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 创建图片预览弹窗
|
||||||
|
const imagePreview = document.createElement('div')
|
||||||
|
imagePreview.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const image = document.createElement('img')
|
||||||
|
image.src = file.url
|
||||||
|
image.alt = file.name
|
||||||
|
image.style.cssText = `
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||||
|
`
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('div')
|
||||||
|
closeBtn.innerHTML = '×'
|
||||||
|
closeBtn.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10000;
|
||||||
|
`
|
||||||
|
|
||||||
|
imagePreview.appendChild(image)
|
||||||
|
imagePreview.appendChild(closeBtn)
|
||||||
|
document.body.appendChild(imagePreview)
|
||||||
|
|
||||||
|
// 点击关闭
|
||||||
|
const closePreview = () => {
|
||||||
|
document.body.removeChild(imagePreview)
|
||||||
|
}
|
||||||
|
|
||||||
|
imagePreview.addEventListener('click', closePreview)
|
||||||
|
closeBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
closePreview()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ESC键关闭
|
||||||
|
const handleKeydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
closePreview()
|
||||||
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const downloadFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.url
|
||||||
|
link.download = file.name
|
||||||
|
link.target = '_blank'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('下载失败:', error)
|
||||||
|
ElMessage.error('下载失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getdetilfn()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -313,6 +579,91 @@
|
|||||||
.items-wrap { margin-top: 6px; }
|
.items-wrap { margin-top: 6px; }
|
||||||
.item-row { padding: 8px 0; }
|
.item-row { padding: 8px 0; }
|
||||||
:deep(.el-input.is-disabled .el-input__inner) { color: var(--el-text-color-regular); }
|
:deep(.el-input.is-disabled .el-input__inner) { color: var(--el-text-color-regular); }
|
||||||
|
|
||||||
|
.file-preview {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-file {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
object-fit: contain;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: #409eff;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file i {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="stocking-page">
|
<div class="stocking-page">
|
||||||
<div class="stocking-toolbar boxshadow">
|
<div class="stocking-toolbar boxshadow">
|
||||||
<div class="toolbar-left">
|
<div class="toolbar-left">
|
||||||
<ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
|
<!-- <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-right">
|
<div class="toolbar-right">
|
||||||
<el-input
|
<el-input
|
||||||
@@ -64,8 +64,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { router } from '@/router'
|
import { router } from '@/router'
|
||||||
|
import { manageService } from '@/api/adminApi'
|
||||||
|
import { useAuth } from '@/composables/useAuth'
|
||||||
|
|
||||||
|
const { hasAuth } = useAuth()
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const keyword = ref('')
|
const keyword = ref('')
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
@@ -84,20 +87,19 @@ import { router } from '@/router'
|
|||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
// 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
|
const { currentPage, pageSize } = pagination
|
||||||
const mock = Array.from({ length: 8 }).map((_, i) => ({
|
const params = {
|
||||||
id: i + 1,
|
current: currentPage,
|
||||||
stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
|
size: pageSize,
|
||||||
order_no: 'VCS28762JN2',
|
is_final: 0, // 只获取备货单，非终版
|
||||||
customer_name: 'Alicia',
|
keyword: keyword.value
|
||||||
customer_source: '广交会',
|
}
|
||||||
salesman: '王玉凯',
|
|
||||||
date: '2025-08-27',
|
const { records, current, size, total } = await manageService.getstocklist(params)
|
||||||
remark: 'XXXXXXXXXXXX',
|
tableData.value = records || []
|
||||||
status: 1,
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||||
}))
|
} catch (error) {
|
||||||
tableData.value = mock
|
console.error('获取列表失败:', error)
|
||||||
pagination.total = 24
|
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,625 @@
|
|||||||
|
<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="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="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="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="60px">
|
||||||
|
<ElInput v-model="item.port_fee" disabled>
|
||||||
|
<template #append>{{ item.port_fee_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="8">
|
||||||
|
<ElFormItem label="利润" label-width="52px">
|
||||||
|
<ElInput v-model="item.profit" disabled>
|
||||||
|
<template #append>{{ item.profit_currency }}</template>
|
||||||
|
</ElInput>
|
||||||
|
</ElFormItem>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :span="8">
|
||||||
|
<ElFormItem label="车架号" label-width="70px">
|
||||||
|
<ElInput v-model.number="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
|
||||||
|
>
|
||||||
|
<div v-for="(p, idx) in payments" :key="idx">
|
||||||
|
<ElRow :gutter="12">
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款国"><ElInput v-model="p.remit_country" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="日期"><ElInput v-model="p.date" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="币种"><ElInput v-model="p.currency" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="账户"><ElInput v-model="p.account" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="汇款人"><ElInput v-model="p.payer" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
<ElCol :span="4"
|
||||||
|
><ElFormItem label="金额"><ElInput v-model="p.amount" disabled /></ElFormItem
|
||||||
|
></ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 上传合同 -->
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="form-title">
|
||||||
|
<span class="border"></span>
|
||||||
|
<span class="title">上传合同</span>
|
||||||
|
</div>
|
||||||
|
<div class="file-preview">
|
||||||
|
<div v-if="contractFile" class="contract-file">
|
||||||
|
<div v-if="isImageFile(contractFile)" class="image-preview">
|
||||||
|
<img
|
||||||
|
:src="contractFile.url"
|
||||||
|
:alt="contractFile.name"
|
||||||
|
class="preview-image"
|
||||||
|
@click="previewImage(contractFile)"
|
||||||
|
/>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="text" size="small" @click="previewImage(contractFile)">
|
||||||
|
预览
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="document-preview">
|
||||||
|
<div class="file-icon">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
</div>
|
||||||
|
<div class="file-info">
|
||||||
|
<span class="file-name">{{ contractFile.name }}</span>
|
||||||
|
<el-button type="primary" size="small" @click="downloadFile(contractFile)">
|
||||||
|
下载
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-file">
|
||||||
|
<i class="iconfont-sys"></i>
|
||||||
|
<span>暂无合同文件</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const route = useRoute()
|
||||||
|
const stocking_id = route.query.id
|
||||||
|
const stockingInfo = ref<any>({})
|
||||||
|
|
||||||
|
// 回显视图模型，字段与模板一致
|
||||||
|
const header = reactive({ order_no: '', salesman: '' })
|
||||||
|
const base = reactive({
|
||||||
|
pn_no: '',
|
||||||
|
date: '',
|
||||||
|
close_date: '',
|
||||||
|
channel: '',
|
||||||
|
customer_name: '',
|
||||||
|
client_country: '',
|
||||||
|
total_cif: '',
|
||||||
|
total_cif_currency: '',
|
||||||
|
contract_rate: ''
|
||||||
|
})
|
||||||
|
const items = ref<any[]>([])
|
||||||
|
const ship = reactive({
|
||||||
|
customs: '',
|
||||||
|
plan: '',
|
||||||
|
method: '',
|
||||||
|
domestic_port: '',
|
||||||
|
terms: '',
|
||||||
|
latest_arrival: ''
|
||||||
|
})
|
||||||
|
const payments = ref<any[]>([])
|
||||||
|
|
||||||
|
// 合同文件
|
||||||
|
const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
|
||||||
|
|
||||||
|
const toMoneyView = (m: any) => ({
|
||||||
|
amount: m?.amount ?? '',
|
||||||
|
currency: m?.currency ?? ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//获取详情并映射到回显模型
|
||||||
|
const getdetilfn = async () => {
|
||||||
|
const res = await CrmService.getStockDetail({ id: stocking_id })
|
||||||
|
stockingInfo.value = res
|
||||||
|
// 头部
|
||||||
|
header.order_no = res?.order_no || res?.pi_no || ''
|
||||||
|
header.salesman = res?.salesperson_snapshot || res?.salesman || res?.salesman_name || res?.user?.name || ''
|
||||||
|
// 基础信息
|
||||||
|
base.pn_no = res?.pi_no || ''
|
||||||
|
base.date = res?.biz_date || ''
|
||||||
|
base.close_date = res?.clearance_country_snapshot || ''
|
||||||
|
base.channel = res?.customer_source_snapshot || res?.customer_source || ''
|
||||||
|
base.customer_name = res?.customer_snapshot || res?.customer_name || ''
|
||||||
|
base.client_country = res?.customer_country_snapshot || res?.customer_country || ''
|
||||||
|
// 订单明细
|
||||||
|
const list = Array.isArray(res?.veh_list) ? res.veh_list : []
|
||||||
|
items.value = list.map((it: any) => {
|
||||||
|
const unit = toMoneyView(it?.unit_price)
|
||||||
|
const total = toMoneyView(it?.total_price)
|
||||||
|
const guide = toMoneyView(it?.official_price)
|
||||||
|
const discount = toMoneyView(it?.discount_price)
|
||||||
|
const helper = toMoneyView(it?.handling_fee)
|
||||||
|
const fob = toMoneyView(it?.fob_transport_fee)
|
||||||
|
const port = toMoneyView(it?.port_misc_fee)
|
||||||
|
const profit = toMoneyView(it?.profit)
|
||||||
|
return {
|
||||||
|
model: it?.model_snapshot || '',
|
||||||
|
vin: it?.vin || '',
|
||||||
|
color_out: it?.color_exterior_snapshot || '',
|
||||||
|
color_in: it?.color_interior_snapshot || '',
|
||||||
|
modify: (Array.isArray(it?.modify_list) ? it.modify_list : [])
|
||||||
|
.map((m: any) => m?.option_name_snapshot)
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('、'),
|
||||||
|
modify_fee: it?.retrofit_fee?.amount ?? '',
|
||||||
|
modify_fee_currency: it?.retrofit_fee?.currency ?? '',
|
||||||
|
fob_fee: fob.amount,
|
||||||
|
fob_fee_currency: fob.currency,
|
||||||
|
unit_price: unit.amount,
|
||||||
|
unit_price_currency: unit.currency,
|
||||||
|
total_price: total.amount,
|
||||||
|
total_price_currency: total.currency,
|
||||||
|
guide_price: guide.amount,
|
||||||
|
guide_price_currency: guide.currency,
|
||||||
|
discount: discount.amount,
|
||||||
|
discount_currency: discount.currency,
|
||||||
|
helper_fee: helper.amount,
|
||||||
|
helper_fee_currency: helper.currency,
|
||||||
|
domestic_freight: it?.domestic_freight?.amount ?? '',
|
||||||
|
domestic_freight_currency: it?.domestic_freight?.currency ?? '',
|
||||||
|
port_fee: port.amount,
|
||||||
|
port_fee_currency: port.currency,
|
||||||
|
profit: profit.amount,
|
||||||
|
profit_currency: profit.currency
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 运输详情
|
||||||
|
ship.customs = res?.declarant_name || ''
|
||||||
|
ship.plan = res?.eta_ship_date || ''
|
||||||
|
ship.method = res?.shipping_method_snapshot || ''
|
||||||
|
ship.domestic_port = res?.domestic_port_snapshot || ''
|
||||||
|
ship.terms = `${res?.trade_term_snapshot || ''} / ${res?.clearance_port_snapshot || ''}`.replace(
|
||||||
|
/^\s*\/\s*$/,
|
||||||
|
''
|
||||||
|
)
|
||||||
|
ship.latest_arrival = res?.latest_arrival_date || ''
|
||||||
|
// 合计与汇率
|
||||||
|
base.total_cif = res?.cif_total_amount?.amount ?? ''
|
||||||
|
base.total_cif_currency = res?.cif_total_amount?.currency || ''
|
||||||
|
base.contract_rate = res?.contract_exchange_rate || res?.contract_rate || ''
|
||||||
|
// 计划收款（全部展示）
|
||||||
|
payments.value = (Array.isArray(res?.account_list) ? res.account_list : []).map((p: any) => ({
|
||||||
|
remit_country: p?.remit_country_name_snapshot || '',
|
||||||
|
date: p?.remit_date || '',
|
||||||
|
currency: p?.currency_name_snapshot || p?.currency_code || '',
|
||||||
|
account: p?.account_name_snapshot || '',
|
||||||
|
payer: p?.remitter_name || '',
|
||||||
|
amount: p?.amount ?? ''
|
||||||
|
}))
|
||||||
|
// 合同文件
|
||||||
|
if (res?.contract) {
|
||||||
|
contractFile.value = {
|
||||||
|
name: '合同文件',
|
||||||
|
url: res.contract_url || res.contract,
|
||||||
|
file_name: res.contract
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 判断是否为图片文件
|
||||||
|
const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 检查文件名
|
||||||
|
if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查file_name字段
|
||||||
|
if (file.file_name && file.file_name.startsWith('image/')) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查URL中的文件扩展名（去除查询参数）
|
||||||
|
if (file.url) {
|
||||||
|
const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
|
||||||
|
if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
const previewImage = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
// 创建图片预览弹窗
|
||||||
|
const imagePreview = document.createElement('div')
|
||||||
|
imagePreview.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const image = document.createElement('img')
|
||||||
|
image.src = file.url
|
||||||
|
image.alt = file.name
|
||||||
|
image.style.cssText = `
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||||
|
`
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('div')
|
||||||
|
closeBtn.innerHTML = '×'
|
||||||
|
closeBtn.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10000;
|
||||||
|
`
|
||||||
|
|
||||||
|
imagePreview.appendChild(image)
|
||||||
|
imagePreview.appendChild(closeBtn)
|
||||||
|
document.body.appendChild(imagePreview)
|
||||||
|
|
||||||
|
// 点击关闭
|
||||||
|
const closePreview = () => {
|
||||||
|
document.body.removeChild(imagePreview)
|
||||||
|
}
|
||||||
|
|
||||||
|
imagePreview.addEventListener('click', closePreview)
|
||||||
|
closeBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
closePreview()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ESC键关闭
|
||||||
|
const handleKeydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
closePreview()
|
||||||
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const downloadFile = (file: { name: string; url: string; file_name: string }) => {
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.url
|
||||||
|
link.download = file.name
|
||||||
|
link.target = '_blank'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('下载失败:', error)
|
||||||
|
ElMessage.error('下载失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getdetilfn()
|
||||||
|
})
|
||||||
|
</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); }
|
||||||
|
|
||||||
|
.file-preview {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-file {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
object-fit: contain;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: #409eff;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-file i {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@@ -32,39 +32,86 @@
|
|||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<ElTableColumn label="备货单编号" prop="stock_no" min-width="140" />
|
<ElTableColumn label="备货单编号" prop="order_no" />
|
||||||
<ElTableColumn label="阿里订单号/PN号" prop="order_no" min-width="160" />
|
<ElTableColumn label="阿里订单号/PN号" prop="pi_no" />
|
||||||
<ElTableColumn label="客户名称" prop="customer_name" min-width="120" />
|
<ElTableColumn label="客户名称" prop="customer_snapshot" />
|
||||||
<ElTableColumn label="客户来源" prop="customer_source" min-width="120" />
|
<ElTableColumn label="客户来源" prop="customer_source_snapshot" />
|
||||||
<ElTableColumn label="业务员" prop="salesman" min-width="100" />
|
<ElTableColumn label="业务员" prop="salesperson_snapshot" />
|
||||||
<ElTableColumn label="日期" prop="date" min-width="120" />
|
<ElTableColumn label="日期" prop="created_at" />
|
||||||
<ElTableColumn label="补充" prop="remark" min-width="160" />
|
<ElTableColumn label="补充" prop="remark" />
|
||||||
<ElTableColumn label="状态" prop="status" width="120">
|
<!-- <ElTableColumn label="状态" prop="status" width="120">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<ElTag type="success">备货完成</ElTag>
|
<ElTag type="success">备货完成</ElTag>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn> -->
|
||||||
<ElTableColumn label="操作" fixed="right" min-width="220" align="center">
|
<ElTableColumn label="操作" fixed="right" min-width="120" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<ElRow :gutter="10" justify="center">
|
<ElRow :gutter="10" justify="center">
|
||||||
<el-button link type="primary" @click="handleView(scope.row)">查看备货单</el-button>
|
<el-link
|
||||||
<el-button link type="primary" @click="handleCreateRepair(scope.row)"
|
type="warning"
|
||||||
>创建终版备货单</el-button
|
underline="never"
|
||||||
|
@click="printfn(scope.row)"
|
||||||
|
style="margin-right: 8px"
|
||||||
>
|
>
|
||||||
<el-button link type="primary" @click="handleView1(scope.row)"
|
<i class="iconfont-sys"></i> 打印
|
||||||
>查看终版备货单</el-button
|
</el-link>
|
||||||
|
<el-link
|
||||||
|
type="success"
|
||||||
|
underline="never"
|
||||||
|
@click="handleView(scope.row)"
|
||||||
|
style="margin-right: 8px"
|
||||||
>
|
>
|
||||||
|
<i class="iconfont-sys"></i> 查看
|
||||||
|
</el-link>
|
||||||
|
<el-link
|
||||||
|
v-if="scope.row.is_use == 0"
|
||||||
|
type="primary"
|
||||||
|
underline="never"
|
||||||
|
@click="handleCreateRepair(scope.row)"
|
||||||
|
>
|
||||||
|
<i class="iconfont-sys"></i> 创建终版
|
||||||
|
</el-link>
|
||||||
|
<el-link
|
||||||
|
v-if="scope.row.is_use == 1"
|
||||||
|
type="success"
|
||||||
|
underline="never"
|
||||||
|
@click="handleView1(scope.row)"
|
||||||
|
>
|
||||||
|
<i class="iconfont-sys"></i> 查看终版
|
||||||
|
</el-link>
|
||||||
</ElRow>
|
</ElRow>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
</template>
|
</template>
|
||||||
</ArtTable>
|
</ArtTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- PDF 预览弹窗 -->
|
||||||
|
<el-dialog v-model="pdf.visible" title="打印预览" width="80%" top="40px" :close-on-click-modal="false">
|
||||||
|
<div style="height: 70vh; display: flex; flex-direction: column; gap: 12px;">
|
||||||
|
<div style="display:flex; justify-content:flex-end; gap: 8px;">
|
||||||
|
<!-- <el-button type="primary" @click="print()">打印</el-button> -->
|
||||||
|
<el-button @click="download">下载</el-button>
|
||||||
|
</div>
|
||||||
|
<iframe
|
||||||
|
v-if="pdf.blobUrl || pdf.url"
|
||||||
|
ref="frameRef"
|
||||||
|
:src="pdf.blobUrl || pdf.url"
|
||||||
|
style="flex:1; width: 100%; border: 1px solid #eee; border-radius: 6px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { router } from '@/router'
|
import { router } from '@/router'
|
||||||
|
import { CrmService } from '@/api/crmApi'
|
||||||
|
import { usePdfPreview } from '@/composables/usePdfPreview'
|
||||||
|
import { useAuth } from '@/composables/useAuth'
|
||||||
|
|
||||||
|
const { hasAuth } = useAuth()
|
||||||
|
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const keyword = ref('')
|
const keyword = ref('')
|
||||||
@@ -72,6 +119,9 @@ import { router } from '@/router'
|
|||||||
const tableData = ref<any[]>([])
|
const tableData = ref<any[]>([])
|
||||||
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
||||||
|
|
||||||
|
// PDF 预览/打印（公共）
|
||||||
|
const { pdf, frameRef, openWithResponse, download, print, preparePreview } = usePdfPreview()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
@@ -84,20 +134,19 @@ import { router } from '@/router'
|
|||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
// 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
|
const { currentPage, pageSize } = pagination
|
||||||
const mock = Array.from({ length: 8 }).map((_, i) => ({
|
const params = {
|
||||||
id: i + 1,
|
current: currentPage,
|
||||||
stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
|
size: pageSize,
|
||||||
order_no: 'VCS28762JN2',
|
is_final: 0, // 只获取备货单，非终版
|
||||||
customer_name: 'Alicia',
|
keyword: keyword.value
|
||||||
customer_source: '广交会',
|
}
|
||||||
salesman: '王玉凯',
|
|
||||||
date: '2025-08-27',
|
const { records, current, size, total } = await CrmService.getStockList(params)
|
||||||
remark: 'XXXXXXXXXXXX',
|
tableData.value = records || []
|
||||||
status: 1,
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||||
}))
|
} catch (error) {
|
||||||
tableData.value = mock
|
console.error('获取列表失败:', error)
|
||||||
pagination.total = 24
|
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
@@ -117,17 +166,38 @@ import { router } from '@/router'
|
|||||||
router.push('/crmpc/stocking/Add')
|
router.push('/crmpc/stocking/Add')
|
||||||
}
|
}
|
||||||
const handleView = (row: any) => {
|
const handleView = (row: any) => {
|
||||||
router.push('/crmpc/stocking/show')
|
router.push({
|
||||||
|
path: '/crmpc/stocking/show',
|
||||||
|
query: { id: row.id } // 可带客户名等参数
|
||||||
|
})
|
||||||
// TODO: 跳转或弹窗查看备货单
|
// TODO: 跳转或弹窗查看备货单
|
||||||
}
|
}
|
||||||
const handleView1 = (row: any) => {
|
const handleView1 = (row: any) => {
|
||||||
router.push('/crmpc/stocking/final_show')
|
router.push({
|
||||||
|
path: '/crmpc/stocking/final_show',
|
||||||
|
query: { id: row.object_id } // 可带客户名等参数
|
||||||
|
})
|
||||||
|
// router.push('/crmpc/stocking/final_show')
|
||||||
// TODO: 跳转或弹窗查看备货单
|
// TODO: 跳转或弹窗查看备货单
|
||||||
}
|
}
|
||||||
const handleCreateRepair = (row: any) => {
|
const handleCreateRepair = (row: any) => {
|
||||||
router.push('/crmpc/stocking/final_add')
|
router.push({
|
||||||
|
path: '/crmpc/stocking/final_add',
|
||||||
|
query: { id: row.id } // 可带客户名等参数
|
||||||
|
})
|
||||||
// TODO: 跳转创建维修保单
|
// TODO: 跳转创建维修保单
|
||||||
}
|
}
|
||||||
|
//打印
|
||||||
|
const printfn = (row: any) => {
|
||||||
|
CrmService.printStock({ id: row.id })
|
||||||
|
.then((res) => {
|
||||||
|
openWithResponse(res)
|
||||||
|
preparePreview()
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
Reference in New Issue
Block a user