修改基础信息启用停用内容，进行修复
This commit is contained in:
@ -19,9 +19,10 @@ export function addMaterialBase(data: any) {
|
||||
}
|
||||
|
||||
// 3. 修改基础信息 (包含状态启用/禁用)
|
||||
// 【修复点】: 必须在 URL 中拼接 data.id，否则后端会报 405 Method Not Allowed
|
||||
export function updateMaterialBase(data: any) {
|
||||
return request({
|
||||
url: '/inbound/base/',
|
||||
url: `/inbound/base/${data.id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
@ -30,7 +31,7 @@ export function updateMaterialBase(data: any) {
|
||||
// 4. 删除基础信息
|
||||
export function delMaterialBase(id: number) {
|
||||
return request({
|
||||
url: `/inbound/base/${id}`, // 注意这里是反引号，用于拼接 URL
|
||||
url: `/inbound/base/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
@ -118,199 +118,254 @@
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="dialogStatus === 'create' ? '新增采购入库' : '编辑入库信息'"
|
||||
width="1050px"
|
||||
top="5vh"
|
||||
width="1000px"
|
||||
top="4vh"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
class="stylish-dialog"
|
||||
class="stylish-dialog compact-layout"
|
||||
>
|
||||
<el-form :model="form" label-width="110px" ref="formRef" :rules="rules" size="large" class="stylish-form">
|
||||
<div class="dialog-scroll-container">
|
||||
<el-form :model="form" label-width="100px" ref="formRef" :rules="rules" size="default" class="stylish-form">
|
||||
|
||||
<div class="form-card basic-card">
|
||||
<div class="card-title">
|
||||
<el-icon class="icon"><Box /></el-icon>
|
||||
<span>1. 基础信息</span>
|
||||
<span class="sub-title" v-if="dialogStatus === 'create'"> (请先搜索选择物料)</span>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<el-row :gutter="24" v-if="dialogStatus === 'create'" style="margin-bottom: 20px;">
|
||||
<el-col :span="14">
|
||||
<el-form-item label="物料搜索" prop="base_id" class="highlight-label">
|
||||
<el-select
|
||||
v-model="form.base_id"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="输入名称 / 规格型号进行模糊搜索..."
|
||||
:remote-method="handleSearchMaterial"
|
||||
:loading="searchLoading"
|
||||
style="width: 100%"
|
||||
@change="onMaterialSelected"
|
||||
size="large"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in materialOptions"
|
||||
:key="item.id"
|
||||
:label="item.name + ' [' + item.spec + ']'"
|
||||
:value="item.id"
|
||||
>
|
||||
<div class="option-item">
|
||||
<span class="opt-name">{{ item.name }}</span>
|
||||
<span class="opt-spec">{{ item.spec }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div class="info-alert">
|
||||
<el-icon><InfoFilled /></el-icon> 仅展示状态为“启用”的基础物料
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="read-only-grid">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8"><el-form-item label="名称"><el-input v-model="form.material_name" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="规格型号"><el-input v-model="form.spec_model" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="单位"><el-input v-model="form.unit" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="类别"><el-input v-model="form.category" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="类型"><el-input v-model="form.material_type" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-card inbound-card">
|
||||
<div class="card-title">
|
||||
<el-icon class="icon"><House /></el-icon>
|
||||
<span>2. 入库详情</span>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6"><el-form-item label="编码/SKU" prop="sku"><el-input v-model="form.sku" placeholder="选填" /></el-form-item></el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="入库日期" prop="in_date">
|
||||
<el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6"><el-form-item label="条码" prop="barcode"><el-input v-model="form.barcode" placeholder="扫描条码" /></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="库位" prop="warehouse_location"><el-input v-model="form.warehouse_location" placeholder="例如: A-01-02" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="identity-panel">
|
||||
<el-row>
|
||||
<el-col :span="24" style="margin-bottom: 12px;">
|
||||
<el-radio-group v-model="entryMode" @change="handleEntryModeChange" :disabled="modeLocked" class="custom-radio-group">
|
||||
<el-radio-button label="batch">按批号入库 (Batch)</el-radio-button>
|
||||
<el-radio-button label="serial">按序列号入库 (SN)</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span v-if="modeLocked" class="locked-msg"><el-icon><Lock /></el-icon> 根据历史记录已锁定入库方式</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批号" prop="batch_number">
|
||||
<el-input
|
||||
v-model="form.batch_number"
|
||||
:placeholder="entryMode === 'batch' ? '系统生成...' : '不可用'"
|
||||
:disabled="entryMode === 'serial'"
|
||||
clearable
|
||||
>
|
||||
<template #prefix><span class="prefix-tag bn">BN</span></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="序列号" prop="serial_number">
|
||||
<el-input
|
||||
v-model="form.serial_number"
|
||||
:placeholder="entryMode === 'serial' ? '请扫描 SN...' : '不可用'"
|
||||
:disabled="entryMode === 'batch'"
|
||||
clearable
|
||||
>
|
||||
<template #prefix><span class="prefix-tag sn">SN</span></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="form-card basic-card">
|
||||
<div class="card-title">
|
||||
<el-icon class="icon"><Box /></el-icon>
|
||||
<span>1. 基础信息</span>
|
||||
<span class="sub-title" v-if="dialogStatus === 'create'"> (请先搜索锁定物料)</span>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="24" style="margin-top: 15px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="入库数量" prop="in_quantity">
|
||||
<el-input-number v-model="form.in_quantity" :min="1" controls-position="right" style="width:100%" class="strong-input" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<template v-if="dialogStatus === 'update'">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="当前库存" prop="stock_quantity">
|
||||
<el-input-number v-model="form.stock_quantity" disabled style="width:100%" :controls="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="当前可用" prop="available_quantity">
|
||||
<el-input-number v-model="form.available_quantity" disabled style="width:100%" :controls="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="库存状态" prop="status">
|
||||
<el-select v-model="form.status" style="width:100%">
|
||||
<el-option label="在库" value="在库" />
|
||||
<el-option label="出库" value="出库" />
|
||||
<el-option label="损耗" value="损耗" />
|
||||
<div class="card-content">
|
||||
<el-row :gutter="24" v-if="dialogStatus === 'create'" style="margin-bottom: 15px;">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="物料搜索" prop="base_id" class="highlight-label">
|
||||
<el-select
|
||||
v-model="form.base_id"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="输入名称或规格..."
|
||||
:remote-method="handleSearchMaterial"
|
||||
@visible-change="handleMaterialDropdownVisible"
|
||||
:loading="searchLoading"
|
||||
style="width: 100%"
|
||||
@change="onMaterialSelected"
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in materialOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
<div class="option-item">
|
||||
<span class="opt-name">{{ item.name }}</span>
|
||||
<span class="opt-spec">{{ item.spec }}</span>
|
||||
<el-tag v-if="item.isHistory" size="small" type="info" effect="plain">历史</el-tag>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="14" style="display: flex; align-items: center;">
|
||||
<span class="search-tip">
|
||||
<el-icon><InfoFilled /></el-icon> 点击可查看最近使用的物料，或输入关键词从云端搜索。
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="到检状态" prop="inspection_status">
|
||||
<el-select v-model="form.inspection_status" style="width:100%">
|
||||
<el-option label="未检" value="未检"><span style="color:#909399">⚪ 未检</span></el-option>
|
||||
<el-option label="合格" value="合格"><span style="color:#67C23A">🟢 合格</span></el-option>
|
||||
<el-option label="不合格" value="不合格"><span style="color:#F56C6C">🔴 不合格</span></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12"><el-form-item label="到货图片" prop="arrival_photo"><el-input v-model="form.arrival_photo" placeholder="输入图片 URL" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="divider-text">商务与采购信息</div>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6"><el-form-item label="币种"><el-input v-model="form.currency" /></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="汇率"><el-input-number v-model="form.exchange_rate" :precision="2" controls-position="right" style="width:100%"/></el-form-item></el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="含税单价" prop="unit_price">
|
||||
<el-input-number v-model="form.unit_price" :precision="4" controls-position="right" style="width:100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="总价">
|
||||
<el-input-number v-model="form.total_price" :precision="2" disabled :controls="false" style="width:100%" class="total-price-input"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8"><el-form-item label="供应商"><el-input v-model="form.supplier_name" placeholder="供应商全称" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="采购人"><el-input v-model="form.purchaser" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="采购邮箱"><el-input v-model="form.purchaser_email" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12"><el-form-item label="原始链接"><el-input v-model="form.source_link" placeholder="http://" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="详情链接"><el-input v-model="form.detail_link" placeholder="http://" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<div class="read-only-grid">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><el-form-item label="名称"><el-input v-model="form.material_name" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="规格型号"><el-input v-model="form.spec_model" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="单位"><el-input v-model="form.unit" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="类别"><el-input v-model="form.category" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="类型"><el-input v-model="form.material_type" disabled class="is-text-view" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
<div class="form-card inbound-card">
|
||||
<div class="card-title">
|
||||
<el-icon class="icon"><House /></el-icon>
|
||||
<span>2. 入库详情</span>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><el-form-item label="编码/SKU" prop="sku"><el-input v-model="form.sku" placeholder="选填" /></el-form-item></el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="入库日期" prop="in_date">
|
||||
<el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6"><el-form-item label="条码" prop="barcode"><el-input v-model="form.barcode" placeholder="扫描条码" /></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="库位" prop="warehouse_location"><el-input v-model="form.warehouse_location" placeholder="例如: A-01-02" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="identity-panel">
|
||||
<el-row>
|
||||
<el-col :span="24" style="margin-bottom: 8px;">
|
||||
<el-radio-group v-model="entryMode" @change="handleEntryModeChange" :disabled="modeLocked" size="small" class="custom-radio-group">
|
||||
<el-radio-button label="batch">按批号入库 (Batch)</el-radio-button>
|
||||
<el-radio-button label="serial">按序列号入库 (SN)</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span v-if="modeLocked" class="locked-msg"><el-icon><Lock /></el-icon> 历史锁定</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批号" prop="batch_number">
|
||||
<el-input
|
||||
v-model="form.batch_number"
|
||||
:placeholder="entryMode === 'batch' ? '系统生成...' : '不可用'"
|
||||
:disabled="entryMode === 'serial'"
|
||||
clearable
|
||||
>
|
||||
<template #prefix><span class="prefix-tag bn">BN</span></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="序列号" prop="serial_number">
|
||||
<el-input
|
||||
v-model="form.serial_number"
|
||||
:placeholder="entryMode === 'serial' ? '请扫描 SN...' : '不可用'"
|
||||
:disabled="entryMode === 'batch'"
|
||||
clearable
|
||||
>
|
||||
<template #prefix><span class="prefix-tag sn">SN</span></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 10px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="入库数量" prop="in_quantity">
|
||||
<el-input-number v-model="form.in_quantity" :min="1" controls-position="right" style="width:100%" class="strong-input" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<template v-if="dialogStatus === 'update'">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="当前库存" prop="stock_quantity">
|
||||
<el-input-number v-model="form.stock_quantity" disabled style="width:100%" :controls="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="当前可用" prop="available_quantity">
|
||||
<el-input-number v-model="form.available_quantity" disabled style="width:100%" :controls="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="库存状态" prop="status">
|
||||
<el-select v-model="form.status" style="width:100%">
|
||||
<el-option label="在库" value="在库" />
|
||||
<el-option label="出库" value="出库" />
|
||||
<el-option label="损耗" value="损耗" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="到检状态" prop="inspection_status">
|
||||
<el-select v-model="form.inspection_status" style="width:100%">
|
||||
<el-option label="未检" value="未检"><span style="color:#909399">⚪ 未检</span></el-option>
|
||||
<el-option label="合格" value="合格"><span style="color:#67C23A">🟢 合格</span></el-option>
|
||||
<el-option label="不合格" value="不合格"><span style="color:#F56C6C">🔴 不合格</span></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12"><el-form-item label="到货图片" prop="arrival_photo"><el-input v-model="form.arrival_photo" placeholder="输入图片 URL" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="divider-text">商务与采购信息</div>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="币种">
|
||||
<el-autocomplete
|
||||
v-model="form.currency"
|
||||
:fetch-suggestions="querySearchCurrency"
|
||||
placeholder="币种"
|
||||
style="width: 100%"
|
||||
:trigger-on-focus="true"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<span>{{ item.value }}</span>
|
||||
<span style="float:right; color:#999; font-size:12px">{{ item.desc }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6"><el-form-item label="汇率"><el-input-number v-model="form.exchange_rate" :precision="2" controls-position="right" style="width:100%"/></el-form-item></el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="含税单价" prop="unit_price">
|
||||
<el-input-number v-model="form.unit_price" :precision="4" controls-position="right" style="width:100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="总价">
|
||||
<el-input-number v-model="form.total_price" :precision="2" disabled :controls="false" style="width:100%" class="total-price-input"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="供应商">
|
||||
<el-autocomplete
|
||||
v-model="form.supplier_name"
|
||||
:fetch-suggestions="querySearchSupplier"
|
||||
placeholder="输入或选择供应商"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
:trigger-on-focus="true"
|
||||
@select="handleSupplierSelect"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购人">
|
||||
<el-autocomplete
|
||||
v-model="form.purchaser"
|
||||
:fetch-suggestions="querySearchPurchaser"
|
||||
placeholder="输入采购人"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
:trigger-on-focus="true"
|
||||
@select="handlePurchaserSelect"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购邮箱">
|
||||
<el-autocomplete
|
||||
v-model="form.purchaser_email"
|
||||
:fetch-suggestions="querySearchEmail"
|
||||
placeholder="输入邮箱"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
:trigger-on-focus="true"
|
||||
@select="handleEmailSelect"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12"><el-form-item label="原始链接"><el-input v-model="form.source_link" placeholder="http://" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="详情链接"><el-input v-model="form.detail_link" placeholder="http://" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -392,7 +447,7 @@ const stockColumns = [
|
||||
const allColumns = [...baseColumns, ...stockColumns]
|
||||
|
||||
// 表头持久化
|
||||
const STORAGE_KEY = 'stock_buy_visible_columns'
|
||||
const STORAGE_KEY_COLS = 'stock_buy_visible_columns'
|
||||
const defaultColumns = [
|
||||
'material_name', 'category', 'material_type', 'spec_model', 'unit',
|
||||
'inbound_date', 'serial_number', 'batch_number', 'status', 'inspection_status',
|
||||
@ -401,7 +456,7 @@ const defaultColumns = [
|
||||
|
||||
const getSavedColumns = () => {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
const saved = localStorage.getItem(STORAGE_KEY_COLS)
|
||||
return saved ? JSON.parse(saved) : defaultColumns
|
||||
} catch (e) {
|
||||
return defaultColumns
|
||||
@ -411,7 +466,7 @@ const getSavedColumns = () => {
|
||||
const visibleColumnProps = ref(getSavedColumns())
|
||||
|
||||
watch(visibleColumnProps, (newVal) => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(newVal))
|
||||
localStorage.setItem(STORAGE_KEY_COLS, JSON.stringify(newVal))
|
||||
}, { deep: true })
|
||||
|
||||
|
||||
@ -429,6 +484,163 @@ const form = reactive({
|
||||
source_link: '', detail_link: '', arrival_photo: ''
|
||||
})
|
||||
|
||||
// ------------------------------------
|
||||
// 历史记录管理器 (Local Storage)
|
||||
// ------------------------------------
|
||||
const HISTORY_KEYS = {
|
||||
SUPPLIER: 'history_suppliers',
|
||||
PURCHASER: 'history_purchasers',
|
||||
EMAIL: 'history_emails',
|
||||
MATERIAL: 'history_materials'
|
||||
}
|
||||
|
||||
// 保存历史 (String 类型)
|
||||
const saveToHistory = (key: string, value: string) => {
|
||||
if (!value) return
|
||||
try {
|
||||
const existing = localStorage.getItem(key)
|
||||
let list = existing ? JSON.parse(existing) : []
|
||||
// 移除旧的，添加到前面
|
||||
list = list.filter((i: string) => i !== value)
|
||||
list.unshift(value)
|
||||
if (list.length > 20) list = list.slice(0, 20) // 最多存20条
|
||||
localStorage.setItem(key, JSON.stringify(list))
|
||||
} catch (e) { console.error('save history failed', e) }
|
||||
}
|
||||
|
||||
// 获取历史 (String 类型)
|
||||
const getHistoryList = (key: string): any[] => {
|
||||
try {
|
||||
const existing = localStorage.getItem(key)
|
||||
const list = existing ? JSON.parse(existing) : []
|
||||
return list.map((v: string) => ({ value: v }))
|
||||
} catch (e) { return [] }
|
||||
}
|
||||
|
||||
// 保存物料历史 (Object 类型)
|
||||
const saveMaterialHistory = (item: any) => {
|
||||
if (!item || !item.id) return
|
||||
const key = HISTORY_KEYS.MATERIAL
|
||||
try {
|
||||
const existing = localStorage.getItem(key)
|
||||
let list = existing ? JSON.parse(existing) : []
|
||||
// 必须保存完整对象，因为下拉框需要显示 name, spec 等
|
||||
list = list.filter((i: any) => i.id !== item.id)
|
||||
list.unshift({ ...item, isHistory: true }) // 标记为历史
|
||||
if (list.length > 10) list = list.slice(0, 10)
|
||||
localStorage.setItem(key, JSON.stringify(list))
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
const getMaterialHistory = () => {
|
||||
try {
|
||||
const existing = localStorage.getItem(HISTORY_KEYS.MATERIAL)
|
||||
return existing ? JSON.parse(existing) : []
|
||||
} catch (e) { return [] }
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------
|
||||
// Autocomplete 建议逻辑 (混合模式：历史+当前表格)
|
||||
// ------------------------------------
|
||||
const createFilter = (queryString: string) => {
|
||||
return (item: any) => {
|
||||
return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
||||
}
|
||||
}
|
||||
|
||||
// 辅助函数：从当前表格提取
|
||||
const getTableDataUnique = (field: string) => {
|
||||
const uniqueItems = Array.from(new Set(tableData.value.map((i: any) => i[field]).filter(Boolean)))
|
||||
return uniqueItems.map(i => ({ value: i }))
|
||||
}
|
||||
|
||||
// 通用查询: 历史记录 + 当前页面数据
|
||||
const mixedSearch = (queryString: string, tableField: string, storageKey: string, cb: any) => {
|
||||
const tableList = getTableDataUnique(tableField)
|
||||
const historyList = getHistoryList(storageKey)
|
||||
|
||||
// 合并去重
|
||||
const map = new Map()
|
||||
historyList.forEach(i => map.set(i.value, i))
|
||||
tableList.forEach(i => map.set(i.value, i)) // 表格数据优先（虽然value一样没区别）
|
||||
|
||||
const allList = Array.from(map.values())
|
||||
const results = queryString ? allList.filter(createFilter(queryString)) : allList
|
||||
cb(results)
|
||||
}
|
||||
|
||||
// 1. 供应商
|
||||
const querySearchSupplier = (qs: string, cb: any) => mixedSearch(qs, 'supplier_name', HISTORY_KEYS.SUPPLIER, cb)
|
||||
const handleSupplierSelect = (item: any) => saveToHistory(HISTORY_KEYS.SUPPLIER, item.value)
|
||||
|
||||
// 2. 采购人
|
||||
const querySearchPurchaser = (qs: string, cb: any) => mixedSearch(qs, 'purchaser', HISTORY_KEYS.PURCHASER, cb)
|
||||
const handlePurchaserSelect = (item: any) => saveToHistory(HISTORY_KEYS.PURCHASER, item.value)
|
||||
|
||||
// 3. 邮箱
|
||||
const querySearchEmail = (qs: string, cb: any) => mixedSearch(qs, 'purchaser_email', HISTORY_KEYS.EMAIL, cb)
|
||||
const handleEmailSelect = (item: any) => saveToHistory(HISTORY_KEYS.EMAIL, item.value)
|
||||
|
||||
// 4. 币种 (固定+过滤)
|
||||
const currencyOptions = [
|
||||
{ value: 'CNY', desc: '人民币' },
|
||||
{ value: 'USD', desc: '美元' },
|
||||
{ value: 'EUR', desc: '欧元' }
|
||||
]
|
||||
const querySearchCurrency = (queryString: string, cb: any) => {
|
||||
const results = queryString ? currencyOptions.filter(createFilter(queryString)) : currencyOptions
|
||||
cb(results)
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 物料搜索逻辑 (支持历史回显 + API)
|
||||
// ------------------------------------
|
||||
|
||||
// 下拉框展开时触发
|
||||
const handleMaterialDropdownVisible = (visible: boolean) => {
|
||||
if (visible) {
|
||||
// 只有当列表为空时（即没有进行API搜索时），才填充历史记录
|
||||
// 这样不会覆盖用户正在搜的结果
|
||||
if (materialOptions.value.length === 0) {
|
||||
materialOptions.value = getMaterialHistory()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearchMaterial = async (query: string) => {
|
||||
if (query) {
|
||||
searchLoading.value = true
|
||||
try {
|
||||
const res: any = await searchMaterialBase(query)
|
||||
// 给 API 返回的数据加个标记，区分历史
|
||||
const apiResults = (res.data || []).map((i: any) => ({ ...i, isHistory: false }))
|
||||
materialOptions.value = apiResults
|
||||
} finally {
|
||||
searchLoading.value = false
|
||||
}
|
||||
} else {
|
||||
// 搜索词清空时，恢复历史记录
|
||||
materialOptions.value = getMaterialHistory()
|
||||
}
|
||||
}
|
||||
|
||||
// 选中物料后 -> 存入历史 -> 填充表单
|
||||
const onMaterialSelected = (val: number) => {
|
||||
const item = materialOptions.value.find(i => i.id === val)
|
||||
if (item) {
|
||||
// 存入历史
|
||||
saveMaterialHistory(item)
|
||||
|
||||
form.material_name = item.name
|
||||
form.spec_model = item.spec
|
||||
form.category = item.category
|
||||
form.unit = item.unit
|
||||
form.material_type = item.type
|
||||
checkHistoryAndSetMode(item.id)
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 逻辑校验规则
|
||||
// ------------------------------------
|
||||
@ -521,32 +733,6 @@ const handleEntryModeChange = (val: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearchMaterial = async (query: string) => {
|
||||
if (query) {
|
||||
searchLoading.value = true
|
||||
try {
|
||||
const res: any = await searchMaterialBase(query)
|
||||
materialOptions.value = res.data || []
|
||||
} finally {
|
||||
searchLoading.value = false
|
||||
}
|
||||
} else {
|
||||
materialOptions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const onMaterialSelected = (val: number) => {
|
||||
const item = materialOptions.value.find(i => i.id === val)
|
||||
if (item) {
|
||||
form.material_name = item.name
|
||||
form.spec_model = item.spec
|
||||
form.category = item.category
|
||||
form.unit = item.unit
|
||||
form.material_type = item.type
|
||||
checkHistoryAndSetMode(item.id)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => [form.in_quantity, form.unit_price], () => {
|
||||
form.total_price = Number((form.in_quantity * form.unit_price).toFixed(4))
|
||||
})
|
||||
@ -568,6 +754,8 @@ const handleCreate = () => {
|
||||
entryMode.value = 'batch'
|
||||
form.batch_number = ''
|
||||
visible.value = true
|
||||
// 每次打开弹窗时，先清空选项，让下拉时触发“历史加载”
|
||||
materialOptions.value = []
|
||||
}
|
||||
|
||||
const handleUpdate = (row: any) => {
|
||||
@ -614,6 +802,14 @@ const handleUpdate = (row: any) => {
|
||||
form.detail_link = row.detail_link
|
||||
form.arrival_photo = row.arrival_photo
|
||||
|
||||
// 编辑模式下，把当前物料塞入选项，防止显示为 ID
|
||||
materialOptions.value = [{
|
||||
id: row.base_id,
|
||||
name: row.material_name,
|
||||
spec: row.spec_model,
|
||||
category: row.category
|
||||
}]
|
||||
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
@ -635,6 +831,12 @@ const submitForm = async () => {
|
||||
await updateBuyInbound(form.id!, payload)
|
||||
ElMessage.success('更新成功')
|
||||
}
|
||||
|
||||
// 核心修改：提交成功时，保存供应商等信息到历史记录
|
||||
saveToHistory(HISTORY_KEYS.SUPPLIER, form.supplier_name)
|
||||
saveToHistory(HISTORY_KEYS.PURCHASER, form.purchaser)
|
||||
saveToHistory(HISTORY_KEYS.EMAIL, form.purchaser_email)
|
||||
|
||||
await fetchData()
|
||||
visible.value = false
|
||||
} catch (e: any) {
|
||||
@ -688,7 +890,7 @@ onMounted(() => fetchData())
|
||||
<style scoped>
|
||||
/* 全局布局 */
|
||||
.buy-module {
|
||||
background: #f5f7fa; /* 整体背景微灰，突出内容 */
|
||||
background: #f5f7fa;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@ -727,21 +929,34 @@ onMounted(() => fetchData())
|
||||
.avail-num { font-weight: bold; color: #67C23A; font-size: 15px; }
|
||||
.sum-tag { margin-left: 4px; transform: scale(0.9); }
|
||||
|
||||
/* 弹窗与表单美化 */
|
||||
/* 弹窗核心样式调整 */
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 内部滚动容器 */
|
||||
.dialog-scroll-container {
|
||||
padding: 15px 20px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.stylish-form .form-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
background: #fcfcfc;
|
||||
padding: 12px 20px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -749,10 +964,11 @@ onMounted(() => fetchData())
|
||||
.card-title .icon { margin-right: 8px; font-size: 18px; color: #409EFF; }
|
||||
.card-title .sub-title { font-size: 12px; color: #909399; font-weight: normal; margin-left: 10px; }
|
||||
|
||||
.card-content { padding: 20px; }
|
||||
.card-content { padding: 15px 20px; }
|
||||
|
||||
/* 基础信息卡片 (蓝色调，示读) */
|
||||
/* 基础信息卡片 */
|
||||
.basic-card { border-left: 4px solid #409EFF; }
|
||||
.search-tip { color: #909399; font-size: 12px; margin-left: 10px; display: flex; align-items: center; gap: 4px; }
|
||||
.is-text-view :deep(.el-input__wrapper) {
|
||||
box-shadow: none !important;
|
||||
background-color: #f5f7fa;
|
||||
@ -760,7 +976,7 @@ onMounted(() => fetchData())
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.is-text-view :deep(.el-input__inner) { color: #606266; font-weight: 500; }
|
||||
.is-text-view :deep(.el-input__inner) { color: #606266; font-weight: 500; font-size: 13px; }
|
||||
|
||||
/* 入库信息卡片 */
|
||||
.inbound-card { border-left: 4px solid #67C23A; }
|
||||
@ -770,8 +986,8 @@ onMounted(() => fetchData())
|
||||
background: #fffbf0;
|
||||
border: 1px dashed #e6a23c;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.custom-radio-group { margin-bottom: 10px; }
|
||||
.locked-msg { font-size: 12px; color: #e6a23c; margin-left: 15px; }
|
||||
@ -784,9 +1000,9 @@ onMounted(() => fetchData())
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 30px 0 20px;
|
||||
margin: 20px 0 15px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.divider-text::before, .divider-text::after {
|
||||
@ -798,10 +1014,17 @@ onMounted(() => fetchData())
|
||||
.divider-text::after { margin-left: 15px; }
|
||||
|
||||
/* 底部按钮 */
|
||||
.dialog-footer { display: flex; justify-content: flex-end; gap: 15px; margin-top: 20px; }
|
||||
.info-alert { font-size: 12px; color: #909399; margin-top: 10px; display: flex; align-items: center; gap: 5px; }
|
||||
.option-item { display: flex; justify-content: space-between; width: 100%; }
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 15px;
|
||||
padding: 15px 20px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.option-item { display: flex; justify-content: space-between; width: 100%; align-items: center;}
|
||||
.opt-name { font-weight: bold; }
|
||||
.opt-spec { color: #8492a6; font-size: 13px; }
|
||||
.opt-spec { color: #8492a6; font-size: 13px; margin-right: 10px; }
|
||||
.total-price-input :deep(.el-input__inner) { color: #F56C6C; font-weight: bold; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user