库存前端页面优化

klp-ui/src/views/wms/stockIo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="出入库单号" prop="stockIoCode">
+      <el-form-item label="出入库单号" prop="stockIoCode" style="min-width:200px;max-width:220px;">
         <el-input
           v-model="queryParams.stockIoCode"
           placeholder="请输入出入库单号"
@@ -94,12 +94,16 @@
       <el-table-column label="出入库单号" align="center" prop="stockIoCode" />
       <el-table-column label="类型" align="center" prop="ioType">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.stock_io_type" :value="scope.row.ioType"/>
+          <el-tag :type="getIoTypeTagType(scope.row.ioType)">
+            {{ getIoTypeLabel(scope.row.ioType) }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column label="业务类型" align="center" prop="bizType">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.stock_biz_type" :value="scope.row.bizType"/>
+          <el-tag :type="getBizTypeTagType(scope.row.bizType)">
+            {{ getBizTypeLabel(scope.row.bizType) }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column label="单据状态" align="center" prop="status">
@@ -401,6 +405,35 @@ export default {
       }
       // 刷新列表
       this.getList();
+    },
+    getIoTypeTagType(type) {
+      if (type === 'in') return 'success';
+      if (type === 'out') return 'primary';
+      if (type === 'transfer') return 'warning';
+      return '';
+    },
+    getIoTypeLabel(type) {
+      if (type === 'in') return '入库';
+      if (type === 'out') return '出库';
+      if (type === 'transfer') return '移库';
+      return type;
+    },
+    getBizTypeTagType(type) {
+      if (type === 'purchase') return 'success';
+      if (type === 'sales') return 'primary';
+      if (type === 'return') return 'warning';
+      if (type === 'relocation') return 'info';
+      return 'default';
+    },
+    getBizTypeLabel(type) {
+      const map = {
+        purchase: '采购',
+        sales: '销售',
+        return: '退货',
+        relocation: '调拨',
+        other: '其他'
+      };
+      return map[type] || type;
     }
   }
 };