|
|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <header class="bg-gray-800 text-white p-4 flex justify-between items-center">
|
|
|
+ <h1 class="text-2xl">原料品类管理</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">新增</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">修改</button></a>
|
|
|
+ <a href="#" @click.prevent="deleteSelected" class="mr-2"><button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">删除</button></a>
|
|
|
+ <a href="#" @click.prevent="exportData" class="mr-2"><button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">导出</button></a>
|
|
|
+ <a href="#" @click.prevent="importData" class="mr-2"><button class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">导入</button></a>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <section class="mt-4">
|
|
|
+ <div class="mb-4">
|
|
|
+ <input v-model="search.materialCode" placeholder="物料编码" class="border p-2 mr-2" />
|
|
|
+ <input v-model="search.materialGroup" placeholder="物料组" class="border p-2 mr-2" />
|
|
|
+ <input v-model="search.categoryOne" placeholder="类别一" class="border p-2 mr-2" />
|
|
|
+ <input v-model="search.categoryTwo" placeholder="类别二" class="border p-2 mr-2" />
|
|
|
+ <input v-model="search.rawMaterialClass" placeholder="原料大类" class="border p-2 mr-2" />
|
|
|
+ <button @click="resetSearch" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-2">重置</button>
|
|
|
+ <button @click="performSearch" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">查询</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="w-full border-collapse border">
|
|
|
+ <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="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>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref, computed } from 'vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'RawMaterialCategoryView',
|
|
|
+ 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: 'C3', categoryTwo: 'C4', rawMaterialClass: 'RMC2' },
|
|
|
+ // Add more items as needed
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const selectedItems = ref([]);
|
|
|
+
|
|
|
+ const selectAll = computed({
|
|
|
+ get: () => items.value.length > 0 && selectedItems.value.length === items.value.length,
|
|
|
+ set: (value) => {
|
|
|
+ selectedItems.value = value ? items.value.slice() : [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const toggleSelectAll = () => {
|
|
|
+ selectAll.value = !selectAll.value;
|
|
|
+ };
|
|
|
+
|
|
|
+ const resetSearch = () => {
|
|
|
+ search.value = {
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialClass: ''
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ const performSearch = () => {
|
|
|
+ // Implement search logic here
|
|
|
+ };
|
|
|
+
|
|
|
+ const deleteSelected = () => {
|
|
|
+ if (selectedItems.value.length > 0) {
|
|
|
+ if (confirm('确定要删除选中的项吗？')) {
|
|
|
+ items.value = items.value.filter(item => !selectedItems.value.includes(item));
|
|
|
+ selectedItems.value = [];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('请选择要删除的项');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const exportData = () => {
|
|
|
+ // Implement export logic here
|
|
|
+ };
|
|
|
+
|
|
|
+ const importData = () => {
|
|
|
+ // Implement import logic here
|
|
|
+ };
|
|
|
+
|
|
|
+ const filteredItems = computed(() => {
|
|
|
+ return items.value.filter(item => {
|
|
|
+ return (
|
|
|
+ (!search.value.materialCode || item.materialCode.includes(search.value.materialCode)) &&
|
|
|
+ (!search.value.materialGroup || item.materialGroup.includes(search.value.materialGroup)) &&
|
|
|
+ (!search.value.categoryOne || item.categoryOne.includes(search.value.categoryOne)) &&
|
|
|
+ (!search.value.categoryTwo || item.categoryTwo.includes(search.value.categoryTwo)) &&
|
|
|
+ (!search.value.rawMaterialClass || item.rawMaterialClass.includes(search.value.rawMaterialClass))
|
|
|
+ );
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ search,
|
|
|
+ items,
|
|
|
+ selectedItems,
|
|
|
+ selectAll,
|
|
|
+ toggleSelectAll,
|
|
|
+ resetSearch,
|
|
|
+ performSearch,
|
|
|
+ deleteSelected,
|
|
|
+ exportData,
|
|
|
+ importData,
|
|
|
+ filteredItems
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ max-width: 1200px;
|
|
|
+}
|
|
|
+
|
|
|
+header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+th, td {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+th {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 600px) {
|
|
|
+ header {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ header div {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ table {
|
|
|
+ display: block;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
genlitex