|
|
@@ -0,0 +1,138 @@
|
|
|
+<template>
|
|
|
+ <div class="container mx-auto p-4">
|
|
|
+ <h1 class="text-2xl font-bold mb-4">原料品类管理</h1>
|
|
|
+
|
|
|
+ <!-- 检索区 -->
|
|
|
+ <div class="mb-4">
|
|
|
+ <div class="flex flex-wrap gap-4">
|
|
|
+ <input v-model="searchCriteria.materialCode" type="text" placeholder="物料编码" class="w-full md:w-1/5 p-2 border rounded" />
|
|
|
+ <input v-model="searchCriteria.materialGroup" type="text" placeholder="物料组" class="w-full md:w-1/5 p-2 border rounded" />
|
|
|
+ <input v-model="searchCriteria.categoryOne" type="text" placeholder="类别一" class="w-full md:w-1/5 p-2 border rounded" />
|
|
|
+ <input v-model="searchCriteria.categoryTwo" type="text" placeholder="类别二" class="w-full md:w-1/5 p-2 border rounded" />
|
|
|
+ <input v-model="searchCriteria.rawMaterialClass" type="text" placeholder="原料大类" class="w-full md:w-1/5 p-2 border rounded" />
|
|
|
+ <button @click="resetSearch" class="p-2 bg-gray-300 hover:bg-gray-400 text-black rounded">重置</button>
|
|
|
+ <button @click="performSearch" class="p-2 bg-blue-500 hover:bg-blue-600 text-white rounded">查询</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 检索结果列表 -->
|
|
|
+ <div>
|
|
|
+ <table class="w-full border-collapse">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th class="border p-2"><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" /></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="item.id" :class="{ 'bg-gray-100': item.selected }">
|
|
|
+ <td class="border p-2"><input type="checkbox" v-model="item.selected" /></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>
|
|
|
+
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <div class="mt-4">
|
|
|
+ <a href="#/add-raw-material" class="mr-2 p-2 bg-green-500 hover:bg-green-600 text-white rounded">新增</a>
|
|
|
+ <a href="#/edit-raw-material" class="mr-2 p-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded">修改</a>
|
|
|
+ <a href="#" @click.prevent="deleteSelected" class="mr-2 p-2 bg-red-500 hover:bg-red-600 text-white rounded">删除</a>
|
|
|
+ <a href="#" class="mr-2 p-2 bg-blue-500 hover:bg-blue-600 text-white rounded">导出</a>
|
|
|
+ <a href="#" class="mr-2 p-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded">导入</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref, computed } from 'vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ const items = ref([
|
|
|
+ // 示例数据
|
|
|
+ { id: 1, materialCode: 'MC001', materialGroup: 'MG001', categoryOne: 'C1', categoryTwo: 'C2', rawMaterialClass: 'RMC1', selected: false },
|
|
|
+ { id: 2, materialCode: 'MC002', materialGroup: 'MG002', categoryOne: 'C1', categoryTwo: 'C3', rawMaterialClass: 'RMC2', selected: false },
|
|
|
+ // 添加更多示例数据
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const searchCriteria = ref({
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialClass: ''
|
|
|
+ });
|
|
|
+
|
|
|
+ const selectAll = ref(false);
|
|
|
+
|
|
|
+ const filteredItems = computed(() => {
|
|
|
+ return items.value.filter(item =>
|
|
|
+ (!searchCriteria.value.materialCode || item.materialCode.includes(searchCriteria.value.materialCode)) &&
|
|
|
+ (!searchCriteria.value.materialGroup || item.materialGroup.includes(searchCriteria.value.materialGroup)) &&
|
|
|
+ (!searchCriteria.value.categoryOne || item.categoryOne.includes(searchCriteria.value.categoryOne)) &&
|
|
|
+ (!searchCriteria.value.categoryTwo || item.categoryTwo.includes(searchCriteria.value.categoryTwo)) &&
|
|
|
+ (!searchCriteria.value.rawMaterialClass || item.rawMaterialClass.includes(searchCriteria.value.rawMaterialClass))
|
|
|
+ );
|
|
|
+ });
|
|
|
+
|
|
|
+ const resetSearch = () => {
|
|
|
+ searchCriteria.value = {
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialClass: ''
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ const performSearch = () => {
|
|
|
+ // 这里可以添加实际的搜索逻辑
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleSelectAll = () => {
|
|
|
+ items.value.forEach(item => item.selected = selectAll.value);
|
|
|
+ };
|
|
|
+
|
|
|
+ const deleteSelected = () => {
|
|
|
+ items.value = items.value.filter(item => !item.selected);
|
|
|
+ selectAll.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ items,
|
|
|
+ searchCriteria,
|
|
|
+ selectAll,
|
|
|
+ filteredItems,
|
|
|
+ resetSearch,
|
|
|
+ performSearch,
|
|
|
+ toggleSelectAll,
|
|
|
+ deleteSelected
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ max-width: 1200px;
|
|
|
+}
|
|
|
+
|
|
|
+th, td {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+button {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
genlitex