|
|
@@ -0,0 +1,87 @@
|
|
|
+<template>
|
|
|
+ <div class="container mx-auto p-4">
|
|
|
+ <h1 class="text-2xl font-bold mb-4">原料品类管理</h1>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="flex justify-between mb-4">
|
|
|
+ <div>
|
|
|
+ <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">新增</button>
|
|
|
+ <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mr-2">修改</button>
|
|
|
+ <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">删除</button>
|
|
|
+ <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-2">导出</button>
|
|
|
+ <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">导入</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 检索区 -->
|
|
|
+ <div class="mb-4">
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
|
+ <div>
|
|
|
+ <label for="materialCode" class="block text-sm font-medium text-gray-700">物料编码</label>
|
|
|
+ <input type="text" id="materialCode" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="materialGroup" class="block text-sm font-medium text-gray-700">物料组</label>
|
|
|
+ <input type="text" id="materialGroup" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="categoryOne" class="block text-sm font-medium text-gray-700">类别一</label>
|
|
|
+ <input type="text" id="categoryOne" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="categoryTwo" class="block text-sm font-medium text-gray-700">类别二</label>
|
|
|
+ <input type="text" id="categoryTwo" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="rawMaterialType" class="block text-sm font-medium text-gray-700">原料大类</label>
|
|
|
+ <input type="text" id="rawMaterialType" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-4 flex justify-end">
|
|
|
+ <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-2">重置</button>
|
|
|
+ <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">查询</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 检索结果表格 -->
|
|
|
+ <div class="overflow-x-auto">
|
|
|
+ <table class="min-w-full bg-white">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
|
|
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
|
|
|
+ </th>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">序号</th>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">物料编码</th>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">物料组</th>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">类别一</th>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">类别二</th>
|
|
|
+ <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">原料大类</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="bg-white divide-y divide-gray-200">
|
|
|
+ <tr>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
|
|
|
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
|
|
|
+ </td>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">1</td>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">MAT001</td>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">GROUP001</td>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">CATEGORY001</td>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">CATEGORY002</td>
|
|
|
+ <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">RAW_TYPE001</td>
|
|
|
+ </tr>
|
|
|
+ <!-- 更多数据行 -->
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add your custom styles here */
|
|
|
+</style>
|
genlitex