出库操作逻辑上面实现，成功跑通

inventory-web/src/views/outbound/index.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="listQuery.keyword" placeholder="单号/姓名/SKU" style="width: 200px;" class="filter-item" />
+      <el-input
+          v-model="listQuery.keyword"
+          placeholder="单号/姓名/SKU"
+          style="width: 200px;"
+          class="filter-item"
+          clearable
+          @keyup.enter="fetchData"
+      />
       <el-date-picker
           v-model="listQuery.dateRange"
           type="daterange"
@@ -10,44 +17,75 @@
           end-placeholder="结束日期"
           class="filter-item"
           style="margin-left: 10px;"
+          value-format="YYYY-MM-DD"
       />
       <el-button type="primary" class="filter-item" style="margin-left: 10px;" @click="fetchData">查询</el-button>
-      <el-button type="success" class="filter-item" @click="$router.push('/stock/outbound/create')">新建出库</el-button>
+      <el-button type="success" class="filter-item" @click="$router.push('/outbound/create')">新建出库</el-button>
     </div>
 
-    <el-table :data="list" v-loading="loading" border style="width: 100%; margin-top: 20px;">
-      <el-table-column prop="outbound_no" label="出库单号" width="180" />
-      <el-table-column prop="outbound_time" label="出库时间" width="180" />
-      <el-table-column prop="outbound_type" label="类型" width="100">
+    <el-table
+        :data="list"
+        v-loading="loading"
+        border
+        style="width: 100%; margin-top: 20px;"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
+    >
+      <el-table-column prop="outbound_no" label="出库单号" min-width="180" show-overflow-tooltip />
+
+      <el-table-column prop="outbound_time" label="出库时间" width="170" align="center">
         <template #default="{ row }">
-          <el-tag>{{ formatType(row.outbound_type) }}</el-tag>
+          <span>{{ row.outbound_time ? row.outbound_time.substring(0, 16) : '' }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="sku" label="SKU" width="150" />
-      <el-table-column prop="quantity" label="数量" width="100" />
-      <el-table-column prop="consumer_name" label="领用/客户" width="120" />
-      <el-table-column prop="operator_name" label="操作员" width="120" />
-      <el-table-column label="签名" width="100" align="center">
+
+      <el-table-column prop="outbound_type" label="类型" width="100" align="center">
         <template #default="{ row }">
-          <el-button type="primary" link @click="viewSignature(row.signature_path)">查看</el-button>
+          <el-tag :type="getTagType(row.outbound_type)">{{ formatType(row.outbound_type) }}</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="sku" label="SKU" min-width="140" show-overflow-tooltip />
+
+      <el-table-column prop="quantity" label="数量" width="90" align="center" />
+
+      <el-table-column prop="consumer_name" label="领用/客户" min-width="120" show-overflow-tooltip />
+
+      <el-table-column prop="operator_name" label="操作员" min-width="100" show-overflow-tooltip />
+
+      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
+
+      <el-table-column label="签名" width="120" align="center">
+        <template #default="{ row }">
+          <div v-if="row.signature_path" class="signature-cell">
+            <el-image
+                style="width: 80px; height: 40px; border-radius: 4px; border: 1px solid #dcdfe6;"
+                :src="row.signature_path"
+                :preview-src-list="[row.signature_path]"
+                preview-teleported
+                fit="contain"
+                hide-on-click-modal
+            >
+              <template #error>
+                <div class="image-slot">
+                  <el-icon><Picture /></el-icon>
+                </div>
+              </template>
+            </el-image>
+          </div>
+          <span v-else style="color: #909399; font-size: 12px;">未签名</span>
         </template>
       </el-table-column>
     </el-table>
-
-    <el-dialog v-model="dialogVisible" title="电子签名凭证" width="500px">
-      <img :src="currentSignature" style="width: 100%; border: 1px solid #eee;" alt="Signature" />
-    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, reactive } from 'vue'
 import { getOutboundList } from '@/api/outbound'
+import { Picture } from '@element-plus/icons-vue' // 引入图标用于图片加载失败显示
 
 const list = ref([])
 const loading = ref(false)
-const dialogVisible = ref(false)
-const currentSignature = ref('')
 
 const listQuery = reactive({
   keyword: '',
@@ -58,7 +96,7 @@ const fetchData = async () => {
   loading.value = true
   try {
     const res = await getOutboundList(listQuery)
-    list.value = res.data.items || [] // 假设后端返回 { items: [] }
+    list.value = res.data.items || []
   } catch (e) {
     console.error(e)
   } finally {
@@ -76,12 +114,36 @@ const formatType = (type: string) => {
   return map[type] || type
 }
 
-const viewSignature = (url: string) => {
-  currentSignature.value = url // 这里可能需要拼接 BaseURL，取决于你 upload 接口返回的是相对路径还是绝对路径
-  dialogVisible.value = true
+// 辅助函数：根据类型返回 Tag 颜色
+const getTagType = (type: string) => {
+  const map: any = {
+    'SALES': 'success',
+    'USE': 'warning',
+    'TRANSFER': 'info',
+    'SCRAP': 'danger'
+  }
+  return map[type] || ''
 }
 
 onMounted(() => {
   fetchData()
 })
-</script>
+</script>
+
+<style scoped>
+.signature-cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 0;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>