|
@@ -0,0 +1,141 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="container mx-auto px-4 py-8">
|
|
|
|
|
+ <h1 class="text-2xl font-bold mb-4">原料品类管理</h1>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Search Section -->
|
|
|
|
|
+ <div class="mb-4">
|
|
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
|
|
|
|
+ <input v-model="searchCriteria.materialCode" type="text" placeholder="物料编码" class="border p-2 rounded w-full" />
|
|
|
|
|
+ <input v-model="searchCriteria.materialGroup" type="text" placeholder="物料组" class="border p-2 rounded w-full" />
|
|
|
|
|
+ <input v-model="searchCriteria.categoryOne" type="text" placeholder="类别一" class="border p-2 rounded w-full" />
|
|
|
|
|
+ <input v-model="searchCriteria.categoryTwo" type="text" placeholder="类别二" class="border p-2 rounded w-full" />
|
|
|
|
|
+ <input v-model="searchCriteria.rawMaterialClass" type="text" placeholder="原料大类" class="border p-2 rounded w-full" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mt-2 flex justify-end">
|
|
|
|
|
+ <button @click="resetSearch" class="mr-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">重置</button>
|
|
|
|
|
+ <button @click="performSearch" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">查询</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Action Buttons -->
|
|
|
|
|
+ <div class="mb-4">
|
|
|
|
|
+ <a href="#/add-material" class="mr-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">新增</a>
|
|
|
|
|
+ <a href="#/edit-material" class="mr-2 bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">修改</a>
|
|
|
|
|
+ <a href="#" class="mr-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">删除</a>
|
|
|
|
|
+ <a href="#" class="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">导出</a>
|
|
|
|
|
+ <a href="#" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">导入</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Table Section -->
|
|
|
|
|
+ <table class="w-full border-collapse">
|
|
|
|
|
+ <thead>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th class="border p-2"><input type="checkbox" @click="selectAll" /></th>
|
|
|
|
|
+ <th class="border p-2">序号</th>
|
|
|
|
|
+ <th class="border p-2">物料编码</th>
|
|
|
|
|
+ <th class="border p-2">物料组</th>
|
|
|
|
|
+ <th class="border p-2">类别一</th>
|
|
|
|
|
+ <th class="border p-2">类别二</th>
|
|
|
|
|
+ <th class="border p-2">原料大类</th>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </thead>
|
|
|
|
|
+ <tbody>
|
|
|
|
|
+ <tr v-for="(item, index) in filteredItems" :key="index">
|
|
|
|
|
+ <td class="border p-2"><input type="checkbox" v-model="selectedItems" :value="item" /></td>
|
|
|
|
|
+ <td class="border p-2">{{ index + 1 }}</td>
|
|
|
|
|
+ <td class="border p-2">{{ item.materialCode }}</td>
|
|
|
|
|
+ <td class="border p-2">{{ item.materialGroup }}</td>
|
|
|
|
|
+ <td class="border p-2">{{ item.categoryOne }}</td>
|
|
|
|
|
+ <td class="border p-2">{{ item.categoryTwo }}</td>
|
|
|
|
|
+ <td class="border p-2">{{ item.rawMaterialClass }}</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </tbody>
|
|
|
|
|
+ </table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ searchCriteria: {
|
|
|
|
|
+ materialCode: '',
|
|
|
|
|
+ materialGroup: '',
|
|
|
|
|
+ categoryOne: '',
|
|
|
|
|
+ categoryTwo: '',
|
|
|
|
|
+ rawMaterialClass: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ items: [
|
|
|
|
|
+ // Sample data
|
|
|
|
|
+ { materialCode: 'MC001', materialGroup: 'MG001', categoryOne: 'C1', categoryTwo: 'C2', rawMaterialClass: 'RMC1' },
|
|
|
|
|
+ { materialCode: 'MC002', materialGroup: 'MG002', categoryOne: 'C3', categoryTwo: 'C4', rawMaterialClass: 'RMC2' },
|
|
|
|
|
+ // Add more sample data as needed
|
|
|
|
|
+ ],
|
|
|
|
|
+ selectedItems: []
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ filteredItems() {
|
|
|
|
|
+ return this.items.filter(item =>
|
|
|
|
|
+ item.materialCode.toLowerCase().includes(this.searchCriteria.materialCode.toLowerCase()) &&
|
|
|
|
|
+ item.materialGroup.toLowerCase().includes(this.searchCriteria.materialGroup.toLowerCase()) &&
|
|
|
|
|
+ item.categoryOne.toLowerCase().includes(this.searchCriteria.categoryOne.toLowerCase()) &&
|
|
|
|
|
+ item.categoryTwo.toLowerCase().includes(this.searchCriteria.categoryTwo.toLowerCase()) &&
|
|
|
|
|
+ item.rawMaterialClass.toLowerCase().includes(this.searchCriteria.rawMaterialClass.toLowerCase())
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ resetSearch() {
|
|
|
|
|
+ this.searchCriteria = {
|
|
|
|
|
+ materialCode: '',
|
|
|
|
|
+ materialGroup: '',
|
|
|
|
|
+ categoryOne: '',
|
|
|
|
|
+ categoryTwo: '',
|
|
|
|
|
+ rawMaterialClass: ''
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ performSearch() {
|
|
|
|
|
+ // Perform search logic here if needed
|
|
|
|
|
+ },
|
|
|
|
|
+ selectAll(event) {
|
|
|
|
|
+ if (event.target.checked) {
|
|
|
|
|
+ this.selectedItems = [...this.filteredItems];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.selectedItems = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.container {
|
|
|
|
|
+ max-width: 1200px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+input[type="checkbox"] {
|
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+table {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+th, td {
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ padding: 8px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+th {
|
|
|
|
|
+ background-color: #f4f4f4;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (max-width: 768px) {
|
|
|
|
|
+ .grid-cols-1, .grid-cols-2, .grid-cols-5 {
|
|
|
|
|
+ grid-template-columns: 1fr !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
genlitex