longwei_user-2025-07-09 05:43:48

src/views/RawMaterialCategoryManagement.vue

@@ -1,94 +1,59 @@
 <template>
   <div class="container mx-auto px-4">
-    <header class="py-4 flex justify-between items-center">
+    <header class="bg-gray-800 text-white py-4 flex justify-between items-center">
       <h1 class="text-2xl font-bold">原料品类管理</h1>
       <div>
         <a href="#/add-raw-material" class="mr-2">
-          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-            <Lucide icon="PlusCircle" class="inline-block mr-1"/> 新增
-          </button>
+          <Lucide icon="PlusCircle" class="w-6 h-6" />
         </a>
         <a href="#/edit-raw-material" class="mr-2">
-          <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
-            <Lucide icon="Edit" class="inline-block mr-1"/> 修改
-          </button>
+          <Lucide icon="Edit" class="w-6 h-6" />
         </a>
-        <a href="#/delete-raw-material" class="mr-2">
-          <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
-            <Lucide icon="Trash" class="inline-block mr-1"/> 删除
-          </button>
+        <a href="#" class="mr-2">
+          <Lucide icon="Trash" class="w-6 h-6" />
         </a>
         <a href="#" class="mr-2">
-          <button class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
-            <Lucide icon="FileDownload" class="inline-block mr-1"/> 导出
-          </button>
+          <Lucide icon="Download" class="w-6 h-6" />
         </a>
         <a href="#" class="mr-2">
-          <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
-            <Lucide icon="FileUpload" class="inline-block mr-1"/> 导入
-          </button>
+          <Lucide icon="Upload" class="w-6 h-6" />
         </a>
       </div>
     </header>
 
-    <section class="mb-4">
-      <form @submit.prevent="handleSearch">
-        <div class="flex flex-wrap -mx-2 mb-4">
-          <div class="w-full md:w-1/5 px-2 mb-4">
-            <label class="block text-gray-700 font-bold mb-2" for="material-code">物料编码</label>
-            <input v-model="searchCriteria.materialCode" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="material-code" type="text" placeholder="物料编码">
-          </div>
-          <div class="w-full md:w-1/5 px-2 mb-4">
-            <label class="block text-gray-700 font-bold mb-2" for="material-group">物料组</label>
-            <input v-model="searchCriteria.materialGroup" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="material-group" type="text" placeholder="物料组">
-          </div>
-          <div class="w-full md:w-1/5 px-2 mb-4">
-            <label class="block text-gray-700 font-bold mb-2" for="category-one">类别一</label>
-            <input v-model="searchCriteria.categoryOne" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="category-one" type="text" placeholder="类别一">
-          </div>
-          <div class="w-full md:w-1/5 px-2 mb-4">
-            <label class="block text-gray-700 font-bold mb-2" for="category-two">类别二</label>
-            <input v-model="searchCriteria.categoryTwo" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="category-two" type="text" placeholder="类别二">
-          </div>
-          <div class="w-full md:w-1/5 px-2 mb-4">
-            <label class="block text-gray-700 font-bold mb-2" for="raw-material-class">原料大类</label>
-            <input v-model="searchCriteria.rawMaterialClass" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="raw-material-class" type="text" placeholder="原料大类">
-          </div>
-        </div>
-        <div class="flex justify-between">
-          <button type="button" @click="resetSearch" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
-            <Lucide icon="RefreshCw" class="inline-block mr-1"/> 重置
-          </button>
-          <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-            <Lucide icon="Search" class="inline-block mr-1"/> 查询
-          </button>
-        </div>
-      </form>
-    </section>
+    <section class="mt-4">
+      <div class="flex mb-4">
+        <input type="text" v-model="search.materialCode" placeholder="物料编码" class="border p-2 mr-2 flex-grow" />
+        <input type="text" v-model="search.materialGroup" placeholder="物料组" class="border p-2 mr-2 flex-grow" />
+        <input type="text" v-model="search.categoryOne" placeholder="类别一" class="border p-2 mr-2 flex-grow" />
+        <input type="text" v-model="search.categoryTwo" placeholder="类别二" class="border p-2 mr-2 flex-grow" />
+        <input type="text" v-model="search.rawMaterialClass" placeholder="原料大类" class="border p-2 mr-2 flex-grow" />
+        <button @click="resetSearch" class="bg-gray-800 text-white p-2">重置</button>
+        <button @click="performSearch" class="bg-blue-500 text-white p-2 ml-2">查询</button>
+      </div>
 
-    <section>
-      <table class="w-full text-left">
+      <table class="w-full border">
         <thead>
           <tr>
-            <th class="px-4 py-2">序号</th>
-            <th class="px-4 py-2">物料编码</th>
-            <th class="px-4 py-2">物料组</th>
-            <th class="px-4 py-2">类别一</th>
-            <th class="px-4 py-2">类别二</th>
-            <th class="px-4 py-2">原料大类</th>
-            <th class="px-4 py-2">选择</th>
+            <th class="p-2">序号</th>
+            <th class="p-2">物料编码</th>
+            <th class="p-2">物料组</th>
+            <th class="p-2">类别一</th>
+            <th class="p-2">类别二</th>
+            <th class="p-2">原料大类</th>
+            <th class="p-2">选择</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, index) in filteredItems" :key="index" class="border-b">
-            <td class="px-4 py-2">{{ index + 1 }}</td>
-            <td class="px-4 py-2">{{ item.materialCode }}</td>
-            <td class="px-4 py-2">{{ item.materialGroup }}</td>
-            <td class="px-4 py-2">{{ item.categoryOne }}</td>
-            <td class="px-4 py-2">{{ item.categoryTwo }}</td>
-            <td class="px-4 py-2">{{ item.rawMaterialClass }}</td>
-            <td class="px-4 py-2">
-              <input type="checkbox" v-model="selectedItems" :value="item">
+          <tr v-for="(item, index) in filteredItems" :key="index">
+            <td class="p-2">{{ index + 1 }}</td>
+            <td class="p-2">{{ item.materialCode }}</td>
+            <td class="p-2">{{ item.materialGroup }}</td>
+            <td class="p-2">{{ item.categoryOne }}</td>
+            <td class="p-2">{{ item.categoryTwo }}</td>
+            <td class="p-2">{{ item.rawMaterialClass }}</td>
+            <td class="p-2">
+              <input type="checkbox" v-model="selectedItems" :value="item" />
             </td>
           </tr>
         </tbody>
@@ -98,63 +63,105 @@
 </template>
 
 <script>
-import Lucide from 'lucide-vue-next'
+import { ref, computed } from 'vue';
+import Lucide from 'lucide-vue-next';
 
 export default {
   components: {
     Lucide
   },
-  data() {
-    return {
-      searchCriteria: {
+  setup() {
+    const search = ref({
+      materialCode: '',
+      materialGroup: '',
+      categoryOne: '',
+      categoryTwo: '',
+      rawMaterialClass: ''
+    });
+
+    const items = ref([
+      { materialCode: 'MC001', materialGroup: 'MG001', categoryOne: 'C1', categoryTwo: 'C2', rawMaterialClass: 'RMC1' },
+      { materialCode: 'MC002', materialGroup: 'MG002', categoryOne: 'C1', categoryTwo: 'C3', rawMaterialClass: 'RMC2' },
+      // Add more items as needed
+    ]);
+
+    const selectedItems = ref([]);
+
+    const resetSearch = () => {
+      search.value = {
         materialCode: '',
         materialGroup: '',
         categoryOne: '',
         categoryTwo: '',
         rawMaterialClass: ''
-      },
-      items: [
-        // Sample data
-        { materialCode: 'MAT001', materialGroup: 'GROUP1', categoryOne: 'CAT1', categoryTwo: 'SUBCAT1', rawMaterialClass: 'CLASS1' },
-        { materialCode: 'MAT002', materialGroup: 'GROUP2', categoryOne: 'CAT2', categoryTwo: 'SUBCAT2', rawMaterialClass: 'CLASS2' },
-        // Add more sample data as needed
-      ],
-      selectedItems: []
-    }
-  },
-  computed: {
-    filteredItems() {
-      return this.items.filter(item => {
+      };
+    };
+
+    const performSearch = () => {
+      // Implement search logic here
+    };
+
+    const filteredItems = computed(() => {
+      return items.value.filter(item => {
         return (
-          (!this.searchCriteria.materialCode || item.materialCode.includes(this.searchCriteria.materialCode)) &&
-          (!this.searchCriteria.materialGroup || item.materialGroup.includes(this.searchCriteria.materialGroup)) &&
-          (!this.searchCriteria.categoryOne || item.categoryOne.includes(this.searchCriteria.categoryOne)) &&
-          (!this.searchCriteria.categoryTwo || item.categoryTwo.includes(this.searchCriteria.categoryTwo)) &&
-          (!this.searchCriteria.rawMaterialClass || item.rawMaterialClass.includes(this.searchCriteria.rawMaterialClass))
-        )
-      })
-    }
-  },
-  methods: {
-    handleSearch() {
-      // Handle search logic if needed
-    },
-    resetSearch() {
-      this.searchCriteria = {
-        materialCode: '',
-        materialGroup: '',
-        categoryOne: '',
-        categoryTwo: '',
-        rawMaterialClass: ''
-      }
-      this.selectedItems = []
-    }
+          item.materialCode.toLowerCase().includes(search.value.materialCode.toLowerCase()) &&
+          item.materialGroup.toLowerCase().includes(search.value.materialGroup.toLowerCase()) &&
+          item.categoryOne.toLowerCase().includes(search.value.categoryOne.toLowerCase()) &&
+          item.categoryTwo.toLowerCase().includes(search.value.categoryTwo.toLowerCase()) &&
+          item.rawMaterialClass.toLowerCase().includes(search.value.rawMaterialClass.toLowerCase())
+        );
+      });
+    });
+
+    return {
+      search,
+      items,
+      selectedItems,
+      resetSearch,
+      performSearch,
+      filteredItems
+    };
   }
-}
+};
 </script>
 
 <style scoped>
 .container {
   max-width: 1200px;
 }
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+input[type="text"] {
+  width: calc(20% - 8px);
+}
+
+button {
+  padding: 8px 16px;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+th {
+  background-color: #f2f2f2;
+  text-align: left;
+}
 </style>