物料-采购件入库页面功能实现

inventory-web/src/views/material/list.vue

@@ -1,11 +1,38 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
+  <div class="app-container">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span class="title">基础物料管理</span>
+          <el-button type="primary">
+            <el-icon style="margin-right: 5px"><Plus /></el-icon>新增物料
+          </el-button>
+        </div>
+      </template>
 
+      <div class="filter-container">
+        <el-input placeholder="请输入物料名称或编码" style="width: 200px; margin-right: 10px;" />
+        <el-select placeholder="物料类别" style="width: 150px; margin-right: 10px;">
+          <el-option label="电子元器件" value="elec" />
+          <el-option label="结构件" value="struct" />
+        </el-select>
+        <el-button type="primary" plain>搜索</el-button>
+      </div>
+
+      <el-table :data="tableData" border stripe style="width: 100%; margin-top: 20px">
+        <el-table-column prop="code" label="物料编码" width="120" />
+        <el-table-column prop="name" label="物料名称" width="180" />
+        <el-table-column prop="spec" label="规格型号" />
+        <el-table-column prop="unit" label="单位" width="80" />
+        <el-table-column prop="category" label="类别" width="120" />
+        <el-table-column label="操作" width="150">
+          <template #default>
+            <el-button link type="primary" size="small">编辑</el-button>
+            <el-button link type="danger" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
 </template>
 
-<style scoped>
-
-</style>