|
|
@@ -0,0 +1,160 @@
|
|
|
+<template>
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <header class="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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ <table class="w-full text-left">
|
|
|
+ <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>
|
|
|
+ </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">
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Lucide from 'lucide-vue-next'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Lucide
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchCriteria: {
|
|
|
+ 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 => {
|
|
|
+ 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 = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ max-width: 1200px;
|
|
|
+}
|
|
|
+</style>
|
genlitex