成品入库与出库相关联

inventory-web/src/views/stock/inbound/product.vue

@@ -2,10 +2,32 @@
   <div class="product-module">
     <div class="header-tools">
       <div class="left-tools">
-        <el-input v-model="queryParams.keyword" placeholder="🔍 搜索物料 / SN / 工单 / 订单号..." class="search-input" clearable @clear="fetchData" @keyup.enter="fetchData">
+        <el-input
+            v-model="queryParams.keyword"
+            placeholder="🔍 搜索物料 / SN / 工单 / 订单号..."
+            class="search-input"
+            clearable
+            @clear="fetchData"
+            @keyup.enter="fetchData"
+            style="width: 300px; margin-right: 10px;"
+        >
           <template #append><el-button :icon="Search" @click="fetchData" /></template>
         </el-input>
+
+        <el-select
+            v-model="queryParams.statuses"
+            multiple
+            collapse-tags
+            placeholder="状态筛选"
+            style="width: 220px;"
+            @change="fetchData"
+        >
+          <el-option label="在库" value="在库" />
+          <el-option label="借库" value="借库" />
+          <el-option label="已出库" value="已出库" />
+        </el-select>
       </div>
+
       <div class="right-tools">
         <el-button type="primary" :icon="Plus" @click="handleCreate" class="action-btn">成品入库登记</el-button>
         <el-button :icon="Refresh" @click="fetchData" class="action-btn">刷新</el-button>
@@ -45,12 +67,15 @@
           </template>
 
           <template #default="scope" v-else-if="['serial_number'].includes(col.prop)">
-            <span v-if="scope.row[col.prop]" class="tag-sn">{{ scope.row[col.prop] }}</span>
+            <div v-if="scope.row.serial_number" class="id-cell">
+              <span class="prefix-tag sn">SN</span>
+              <span class="id-text">{{ scope.row.serial_number }}</span>
+            </div>
             <span v-else class="text-placeholder">-</span>
           </template>
 
           <template #default="scope" v-else-if="col.prop === 'qty_stock'">
-            <span class="stock-num">{{ scope.row.sum_stock }}</span><el-tag size="small" type="info" effect="plain" class="sum-tag">总</el-tag>
+            <span class="stock-num">{{ scope.row.qty_stock }}</span>
           </template>
 
           <template #default="scope" v-else-if="col.prop === 'status'">
@@ -184,6 +209,17 @@
               </div>
 
               <el-row :gutter="24" style="margin-top:15px">
+                <template v-if="dialogStatus === 'update'">
+                  <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="质量状态">
                     <el-select v-model="form.quality_status" style="width:100%">
@@ -191,7 +227,7 @@
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="18">
+                <el-col :span="dialogStatus === 'update' ? 12 : 18">
                   <el-form-item label="成品实拍" prop="product_photo">
                     <div class="upload-container">
                       <el-upload
@@ -367,7 +403,12 @@ const dialogStatus = ref<'create' | 'update'>('create')
 const tableData = ref([])
 const total = ref(0)
 const formRef = ref()
-const queryParams = reactive({ page: 1, pageSize: 15, keyword: '' })
+const queryParams = reactive({
+  page: 1,
+  pageSize: 15,
+  keyword: '',
+  statuses: ['在库', '借库']
+})
 const materialOptions = ref<any[]>([])
 
 // 打印相关变量
@@ -420,7 +461,7 @@ const defaultVisibleCols = [
 ]
 
 // 表头持久化
-const STORAGE_KEY = 'stock_product_visible_columns'
+const STORAGE_KEY = 'stock_product_visible_columns_v2' // Changed key
 const getSavedColumns = () => {
   try {
     const saved = localStorage.getItem(STORAGE_KEY)
@@ -467,7 +508,17 @@ const mixedSearch = (qs: string, tableField: string, storageKey: string, cb: any
 const querySearchManager = (qs: string, cb: any) => mixedSearch(qs, 'production_manager', HISTORY_KEYS.PRODUCTION_MANAGER, cb)
 const handleManagerSelect = (item: any) => saveToHistory(HISTORY_KEYS.PRODUCTION_MANAGER, item.value)
 
-const fetchData = async () => { loading.value = true; try { const res: any = await getProductList(queryParams); tableData.value = res.data.items || []; total.value = res.data.total || 0 } finally { loading.value = false } }
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const params = { ...queryParams, statuses: queryParams.statuses.join(',') }
+    const res: any = await getProductList(params);
+    tableData.value = res.data.items || [];
+    total.value = res.data.total || 0
+  } finally {
+    loading.value = false
+  }
+}
 
 const handleMaterialDropdownVisible = (visible: boolean) => { if (visible && materialOptions.value.length === 0) handleSearchMaterial('') }
 const handleSearchMaterial = async (query: string) => { searchLoading.value = true; try { const res: any = await searchMaterialBase(query); const apiResults = (res.data || []).map((i: any) => ({ ...i, isHistory: false })); if (!query) { const history = getMaterialHistory(); const historyIds = new Set(history.map((h: any) => h.id)); const filteredApi = apiResults.filter((apiItem: any) => !historyIds.has(apiItem.id)); materialOptions.value = [...history, ...filteredApi] } else { materialOptions.value = apiResults } } finally { searchLoading.value = false } }
@@ -633,7 +684,7 @@ const resetForm = () => {
   })
 }
 
-const getStatusType = (s:string) => ({'在库':'success','出库':'info','损耗':'danger'}[s]||'warning')
+const getStatusType = (s:string) => ({'在库':'success','出库':'info','借库':'warning','损耗':'danger'}[s]||'warning')
 const getQualityType = (s:string) => ({'合格':'success','不合格':'danger','待检':'info'}[s]||'info')
 const formatMoney = (val:any) => isNaN(Number(val)) ? '-' : `¥ ${Number(val).toFixed(2)}`
 onMounted(() => fetchData())
@@ -641,7 +692,9 @@ onMounted(() => fetchData())
 
 <style scoped>
 .product-module { background: #f5f7fa; padding: 20px; min-height: 100vh; }
-.header-tools { display: flex; justify-content: space-between; margin-bottom: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05); }
+.header-tools { display: flex; justify-content: space-between; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05); }
+.left-tools { display: flex; gap: 10px; align-items: center; flex: 1; }
+.right-tools { display: flex; gap: 10px; align-items: center; }
 .modern-table { border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05); }
 :deep(.table-header-gray th) { background-color: #f8f9fb !important; color: #606266; }
 .tag-sn { color: #409EFF; font-weight: bold; font-family: monospace; }
@@ -668,6 +721,8 @@ onMounted(() => fetchData())
 .empty-preview { color: #909399; }
 .more-images-badge { margin-left: 5px; background: #909399; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; }
 .clickable-text { color: #409EFF; cursor: pointer; font-weight: 500; text-decoration: underline; }
+.id-cell { display: flex; align-items: center; }
+.id-text { font-family: monospace; color: #606266; }
 
 .upload-container { display: flex; flex-wrap: wrap; gap: 8px; }
 :deep(.el-upload--picture-card) { width: 100px; height: 100px; line-height: 100px; }